renovations

1-js/4-data-structures/1-properties-and-methods/article.md

@@ -1,4 +1,4 @@
-# Методы и свойства
+# Введение в методы и свойства
 
 Все значения в JavaScript, за исключением `null` и `undefined`, содержат набор вспомогательных функций и значений, доступных "через точку".
 
@@ -109,6 +109,10 @@ alert( 12..toFixed(1) ); // 12.0
 
 [/warn]
 
+## Итого
 
+В этой главе мы познакомились с методами и свойствами.
 
-Мы еще встретимся со [строками](/string) и [числами](/number) в последующих главах и глубже познакомимся с их свойствами и методами.
+Почти все значения в JavaScript, кроме разве что `null` и `undefined` имеют их и предоставляют через них разный функционал.
+
+Далее мы подробно разберём основные свойства и методы структур данных в JavaScript.

1-js/4-data-structures/1-string/1-ucfirst/_js.view/solution.js

@@ -1,9 +0,0 @@
-function ucFirst(str) {
-  var newStr = str.charAt(0).toUpperCase();
-
-  for(var i=1; i<str.length; i++) {
-    newStr += str.charAt(i);
-  }
-
-  return newStr;
-}

1-js/4-data-structures/1-string/1-ucfirst/solution.md

@@ -1,20 +0,0 @@
-Мы не можем просто заменить первый символ, т.к. строки в JavaScript неизменяемы.
-
-Но можно пересоздать строку на основе существующей, с заглавным первым символом:
-
-```js
-//+ run
-function ucFirst(str) {
-  var newStr = str.charAt(0).toUpperCase();
-
-  for(var i=1; i<str.length; i++) {
-    newStr += str.charAt(i);
-  }
-
-  return newStr;
-}
-
-alert( ucFirst("вася") );
-```
-
-P.S. Возможны и более короткие решения, использующие методы для работы со строками, которые мы пройдём далее.

1-js/4-data-structures/2-number/article.md

@@ -80,7 +80,7 @@ alert( 1e500 ); // Infinity
 
 Если математическая операция не может быть совершена, то возвращается специальное значение `NaN` (Not-A-Number).
 
-Например, деление `0/0` в математическом смысле неопределено, поэтому возвращает `NaN`:
+Например, деление `0/0` в математическом смысле неопределено, поэтому его результат `NaN`:
 
 ```js
 //+ run
@@ -111,7 +111,7 @@ alert( isNaN(n) ); // true
 ```
 
 [smart]
-Отсюда вытекает забавный способ проверки значения на `NaN`: можно проверить его на равенство самому себе, вот так:
+Отсюда вытекает забавный способ проверки значения на `NaN`: можно проверить значение на равенство самому себе, если не равно -- то `NaN`:
 
 ```js
 //+ run
@@ -136,15 +136,31 @@ alert( NaN + 1 ); // NaN
 Если аргумент `isNaN` -- не число, то он автоматически преобразуется к числу.
 
 
-[summary]Никакие математические операции в JavaScript не могут привести к ошибке или "обрушить" программу. 
+[smart header="Математические операции в JS безопасны"]
+Никакие математические операции в JavaScript не могут привести к ошибке или "обрушить" программу. 
 
 В худшем случае, результат будет `NaN`.
-[/summary]
+[/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` только тогда, когда `n` -- обычное число, а не одно из этих значений:**
 
 ```js
@@ -154,12 +170,11 @@ alert( isFinite(Infinity) ); // false
 alert( isFinite(NaN) ); // false
 ```
 
-Если аргумент `isFinite` -- не число, то он автоматически преобразуется к числу.
-
-
 ## Преобразование к числу 
 
-Строгое преобразование можно осуществить унарным плюсом `'+'`:
+Большинство арифметических операций и математических функций преобразуют значение в число автоматически.
+
+Для того, чтобы сделать это явно, обычно перед значением ставят унарный плюс `'+'`:
 
 ```js
 //+ run
@@ -167,7 +182,7 @@ var s = "12.34";
 alert( +s );  // 12.34
 ```
 
-*Строгое* -- означает, что если строка не является в точности числом, то результат будет `NaN`:
+При этом, если строка не является в точности числом, то результат будет `NaN`:
 
 ```js
 //+ run
@@ -191,38 +206,6 @@ alert( +"1 2" ); // NaN, пробел посередине числа - ошиб
 alert( '12.34' / "-2" );  // -6.17
 ```
 
-### isNaN -- проверка на число для строк
-
-Функция `isNaN` является математической, она преобразует аргумент в число, а затем проверяет, `NaN` это или нет. 
-
-Поэтому можно использовать ее для проверки:
-
-```js
-//+ run
-var x = "-11.5";
-if (isNaN(x)) {
-  alert("Строка преобразовалась в NaN. Не число");  
-} else {
-  alert("Число"); 
-}
-```
-
-Единственный тонкий момент -- в том, что пустая строка и строка из пробельных символов преобразуются к `0`:
-
-```js
-//+ run
-alert(isNaN(" \n\n  ")) // false, т.к. строка из пробелов преобразуется к 0
-```
-
-В случае, если применить такую проверку не к строке, то могут быть сюрпризы, в частности `isNaN` посчитает числами значения `false, true, null`, так как они хотя и не числа, но преобразуются к ним:
-
-```js
-+false = 0 // isNaN(false) преобразует false в число, получится 0 - ок
-+true = 1  // тоже ок
-+null = 0  // тоже ок
-+undefined = NaN;  // а вот это точно не число
-```
-
 ## Мягкое преобразование: parseInt и parseFloat   
 
 В мире HTML/CSS многие значения не являются в точности числами. Например, метрики CSS: `10pt` или `-12px`.
@@ -241,9 +224,9 @@ alert( +"12px" ) // NaN
 alert( parseInt('12px') ); // 12
 ```
 
-**`parseInt` и ее аналог `parseFloat` преобразуют строку символ за символом, пока это возможно.** 
+**Функция `parseInt` и ее аналог `parseFloat` преобразуют строку символ за символом, пока это возможно.** 
 
-При возникновении ошибки возвращается число, которое получилось. `parseInt` читает из строки целое число, а `parseFloat` -- дробное.
+При возникновении ошибки возвращается число, которое получилось. Функция `parseInt` читает из строки целое число, а `parseFloat` -- дробное.
 
 ```js
 //+ run
@@ -258,34 +241,39 @@ alert( parseFloat('12.3.4') ) // 12.3, ошибка на второй точке
 alert( parseInt('a123') ); // NaN
 ```
 
-[warn header="Ошибка `parseInt('0..')`"]
 
-`parseInt` (но не `parseFloat`) понимает 16-ричную систему счисления:
+## Проверка на число 
+
+Для проверки строки на число можно использовать функцию `isNaN(str)`.
+
+Она преобразует строку в число аналогично `+`, а затем вернёт `true`, если это `NaN`, т.е. если преобразование не удалось:
 
 ```js
 //+ run
-alert( parseInt('0xFF') ) // 255
+var x = prompt("Введите значение", "-11.5");
+
+if (isNaN(x)) {
+  alert("Строка преобразовалась в NaN. Не число");  
+} else {
+  alert("Число"); 
+}
 ```
 
-В старом стандарте JavaScript он умел понимать и восьмеричную:
+Однако, у такой проверки есть две особенности:
+
+<ol><li>Пустая строка и строка из пробельных символов преобразуются к `0`, поэтому считаются числами.</li>
+<li>Если применить такую проверку не к строке, то могут быть сюрпризы, в частности `isNaN` посчитает числами значения `false, true, null`, так как они хотя и не числа, но преобразуются к ним.</li>
+</ol>
 
 ```js
 //+ run
-alert( parseInt('010') )  // в некоторых браузерах 8
+alert( isNaN(null) ); //  false - не NaN, т.е. "число"
+alert( isNaN("\n  \n") ); //  false - не NaN, т.е. "число"
 ```
 
-Если вы хотите быть уверенным, что число, начинающееся с нуля, будет интерпретировано верно -- используйте второй необязательный аргумент `parseInt` -- основание системы счисления:
+Если такое поведение допустимо, то `isNaN` -- приемлемый вариант.
 
-```js
-//+ run
-alert( parseInt('010', 10) ); // во всех браузерах 10
-```
-
-[/warn]
-
-## Проверка на число для всех типов
-
-Если вам нужна действительно точная проверка на число, которая не считает числом строку из пробелов, логические и специальные значения -- используйте следующую функцию `isNumeric`:
+Если же нужна действительно точная проверка на число, которая не считает числом строку из пробелов, логические и специальные значения, а также отсекает `Infinity` -- используйте следующую функцию `isNumeric`:
 
 ```js
 function isNumeric(n) {
@@ -318,10 +306,12 @@ var n = 255;
 alert( n.toString(16) ); // ff
 ```
 
+В частности, это используют для работы с цветовыми значениями в браузере, вида `#AABBCC`.
+
 Основание может быть любым от `2` до `36`. 
 
 <ul>
-<li>Основание `2` бывает полезно для отладки битовых операций, которые мы пройдём чуть позже:
+<li>Основание `2` бывает полезно для отладки побитовых операций:
 
 ```js
 //+ run
@@ -338,7 +328,7 @@ var n = 1234567890;
 alert( n.toString(36) ); // kf12oi
 ```
 
-При помощи такого кодирования можно сделать длинный цифровой идентификатор короче, чтобы затем использовать его в URL.
+При помощи такого кодирования можно "укоротить" длинный цифровой идентификатор, например чтобы выдать его в качестве URL.
 </li>
 </ul>
 
@@ -386,14 +376,14 @@ alert( 1.2 + 1.3 ^ 0); // 2, приоритет ^ меньше, чем +
 Это удобно в первую очередь тем, что легко читается и не заставляет ставить дополнительные скобки как `Math.floor(...)`:
 
 ```js
-var x = a * b / c ^ 0; // читается так: "a*b/c *!*и округлить*/!*"
+var x = a * b / c ^ 0; // читается как "a * b / c и округлить"
 ```
 
 [/smart]
 
 ### Округление до заданной точности
    
-Обычный трюк -- это умножить и поделить на 10 с нужным количеством нулей. Например, округлим `3.456` до 2го знака после запятой:
+Для округления до нужной цифры после запятой можно умножить и поделить на 10 с нужным количеством нулей. Например, округлим `3.456` до 2го знака после запятой:
 
 ```js
 //+ run
@@ -405,7 +395,7 @@ alert( Math.round( n * 100 ) / 100 );  // 3.456 -> 345.6 -> 346 -> 3.46
 
 ### num.toFixed(precision)   
 
-Существует специальный метод `num.toFixed(precision)`, который округляет число `num` до точности `precision` и возвращает результат *в виде строки*:
+Существует также специальный метод `num.toFixed(precision)`, который округляет число `num` до точности `precision` и возвращает результат *в виде строки*:
 
 ```js
 //+ run
@@ -438,7 +428,7 @@ alert( +n.toFixed(5) ); // 12.34
 ```
 
 [warn header="Метод `toFixed` не эквивалентен `Math.round`!"]
-Например, произведём округление до одного знака после запятой с использованием двух способов:
+Например, произведём округление до одного знака после запятой с использованием двух способов: `toFixed` и `Math.round` с умножением и делением:
 
 ```js
 //+ run
@@ -463,7 +453,7 @@ alert(0.1 + 0.2 == 0.3);
 
 Запустили? Если нет -- все же сделайте это.
 
-Ок, вы запустили его. Результат несколько странный, не так ли? Возможно, ошибка в браузере? Поменяйте браузер, запустите еще раз.
+Ок, вы запустили его. Он вывел `false`. Результат несколько странный, не так ли? Возможно, ошибка в браузере? Поменяйте браузер, запустите еще раз.
 
 Хорошо, теперь мы можем быть уверены: `0.1 + 0.2` это не `0.3`. Но тогда что же это?
 
@@ -472,20 +462,25 @@ alert(0.1 + 0.2 == 0.3);
 alert(0.1 + 0.2); // 0.30000000000000004
 ```
 
-Как видите, произошла небольшая вычислительная ошибка.
+Как видите, произошла небольшая вычислительная ошибка, результат сложения `0.1 + 0.2` немного больше, чем `0.3`.
 
-Дело в том, что в стандарте IEEE 754 на число выделяется ровно 8 байт(=64 бита), не больше и не меньше. 
+```js
+//+ run
+alert(0.1 + 0.2 > 0.3); // true
+```
 
-Число `0.1 (=1/10)` короткое в десятичном формате, а в двоичной системе счисления это бесконечная дробь ([перевод десятичной дроби в двоичную систему](http://www.klgtu.ru/students/literature/inf_asu/1760.html)). Также бесконечной дробью является `0.2 (=2/10)`.
+Всё дело в том, что в стандарте 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`, то две неточности складываются, получаем незначительную, но всё же ошибку в вычислениях.
 
 Конечно, это не означает, что точные вычисления для таких чисел невозможны. Они возможны. И даже необходимы.
 
@@ -518,7 +513,7 @@ alert( +result.toFixed(10) ); // 0.3
 
 ```js
 //+ run
-alert(9999999999999999);
+alert(9999999999999999); // выведет 10000000000000000
 ```
 
 Причина та же -- потеря точности. 

1-js/4-data-structures/3-string/1-ucfirst/_js.view/solution.js

@@ -0,0 +1,5 @@
+function ucFirst(str) {
+  if (!str) return str;
+
+  return str[0].toUpperCase() + str.slice(1);
+}

1-js/4-data-structures/3-string/1-ucfirst/solution.md

@@ -0,0 +1,27 @@
+Мы не можем просто заменить первый символ, т.к. строки в 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. Возможны и более короткие решения, использующие методы для работы со строками, которые мы пройдём далее.

1-js/4-data-structures/3-string/article.md

@@ -16,11 +16,11 @@ var anotherText = 'еще строка';
 var str = "012345";
 ```
 
-В JavaScript **нет разницы между двойными и одинарными кавычками**. 
+В JavaScript нет разницы между двойными и одинарными кавычками. 
 
 ### Специальные символы
 
-Строки могут содержать специальные символы. Самый часто используемый из таких символов -- это *перевод строки*.
+Строки могут содержать специальные символы. Самый часто используемый из таких символов -- это "перевод строки".
 
 Он обозначается как `\n`, например:
 
@@ -56,10 +56,10 @@ var str = '*!*I\'m*/!* a JavaScript programmer';
 ```js
 //+ run
 var str = "I'm a JavaScript \"programmer\" ";
-alert(str);
+alert(str); // I'm a JavaScript "programmer"
 ```
 
-Экранирование служит исключительно для правильного восприятия строки JavaScript. **В памяти строка будет содержать сам символ без `'\'`**. Вы можете увидеть это, запустив пример выше.
+Экранирование служит исключительно для правильного восприятия строки JavaScript. В памяти строка будет содержать сам символ без `'\'`. Вы можете увидеть это, запустив пример выше.
 
 Сам символ обратного слэша `'\'` является служебным, поэтому всегда экранируется, т.е пишется как `\\`:
 
@@ -106,8 +106,7 @@ alert( str.charAt(0) );  // "j"
 
 В JavaScript **нет отдельного типа "символ"**, так что `charAt` возвращает строку, состоящую из выбранного символа.
 
-[smart]
-В современных браузерах (не  IE7-) для доступа к символу можно также использовать квадратные скобки:
+Также (кроме IE7-) для доступа к символу можно также использовать квадратные скобки:
 
 ```js
 //+ run
@@ -123,7 +122,7 @@ alert( "".charAt(0) ); // пустая строка
 alert( ""[0] ); // undefined, IE8+
 ```
 
-[/smart]
+Вообще же метод `charAt` существует по историческим причинам, ведь квадратные скобки -- проще и короче.
 
 [warn header="Вызов метода -- всегда со скобками"]
 
@@ -144,7 +143,7 @@ alert( ""[0] ); // undefined, IE8+
 //+ run
 var str = "строка";
 
-str =  str.charAt(3) + str.charAt(4) + str.charAt(5);
+str =  str[3] + str[4] + str[5];
 
 alert(str); // ока
 ```
@@ -161,7 +160,7 @@ alert( "Интерфейс".toUpperCase() ); // ИНТЕРФЕЙС
 Пример ниже получает первый символ и приводит его к нижнему регистру:
 
 ```js
-alert( "Интерфейс".charAt(0).toLowerCase() ); // 'и'
+alert( "Интерфейс"[0].toLowerCase() ); // 'и'
 ```
 
 ### Поиск подстроки
@@ -348,14 +347,7 @@ alert( "testme".slice(1, -1) ); // "estm", от 1 позиции до перво
 
 Отрицательное значение первого параметра поддерживается в `substr` во всех браузерах, кроме IE8-.
 
-[summary]
-Самый удобный метод из списка -- это `slice(start, end)`. Очень забавно, что не `substr`,  не `substring`, а именно метод `slice`, название которого наименее очевидно.
-
-Впрочем, `substr(start, length)` тоже можно использовать, но с оглядкой на IE8-, который не поддерживает отрицательный `start`.
-[/summary]
-
-
-
+Если выбирать из этих трёх метод один, для использования в большинстве ситуаций -- то это будет `slice`: он и отрицательные аргументы поддерживает и работает наиболее очевидно. 
 
 ## Кодировка Юникод
 
@@ -478,9 +470,9 @@ alert( "ö" > "z" ); // true
 
 Сравнение строк `s1` и `s2` обрабатывается по следующему алгоритму:
 
-<ol><li>Сравниваются первые символы: `a = s1.charAt(0)` и `b = s2.charAt(0)`. Если они разные, то сравниваем их и, в зависимости от результата их сравнения, возвратить `true` или `false`. Если же они одинаковые, то...</li>
-<li>Сравниваются вторые символы `a = s1.charAt(1)` и `b = s2.charAt(1)`</li>
-<li>Затем третьи `a = s1.charAt(2)` и `b = s2.charAt(2)` и так далее, пока символы не будут наконец разными, и тогда какой символ больше -- та строка и больше. Если же в какой-либо строке закончились символы, то считаем, что она меньше, а если закончились в обеих -- они равны.</li>
+<ol><li>Сравниваются первые символы: `s1[0]` и `s2[0]`. Если они разные, то сравниваем их и, в зависимости от результата их сравнения, возвратить `true` или `false`. Если же они одинаковые, то...</li>
+<li>Сравниваются вторые символы `s1[1]` и `s2[1]`</li>
+<li>Затем третьи `s1[2]` и `s2[2]` и так далее, пока символы не будут наконец разными, и тогда какой символ больше -- та строка и больше. Если же в какой-либо строке закончились символы, то считаем, что она меньше, а если закончились в обеих -- они равны.</li>
 </ol>
 
 Спецификация языка определяет этот алгоритм более детально. Если же говорить простыми словами, смысл алгоритма в точности соответствует порядку, по которому имена заносятся в орфографический словарь.

1-js/4-data-structures/4-object/article.md

@@ -1,6 +1,6 @@
 # Объекты как ассоциативные массивы
 
-Объекты в JavaScript являются "двуличными". Они сочетают в себе два важных функционала.
+Объекты в JavaScript сочетают в себе два важных функционала.
 
 Первый -- это  ассоциативный массив: структура, пригодная для хранения любых данных. В этой главе мы рассмотрим использование объектов именно как массивов. 
 
@@ -13,13 +13,15 @@
 
 Её можно легко представить как шкаф с подписанными ящиками. Все данные хранятся в ящичках. По имени можно легко найти ящик и взять то значение, которое в нём лежит.
 
+<img src="object.svg">
+
 В отличие от реальных шкафов, в ассоциативный массив можно в любой момент добавить новые именованные "ящики" или удалить существующие. Далее мы увидим примеры, как это делается.
 
 Кстати, в других языках программирования такую структуру данных также называют *"словарь"* и *"хэш"*.  
 
 ## Создание объектов
 
-Пустой объект (*"пустой шкаф"*) может быть создан одним из двух синтаксисов:
+Пустой объект ("пустой шкаф") может быть создан одним из двух синтаксисов:
 
 ```js
 1. o = new Object();
@@ -38,47 +40,52 @@
 var person = {}; // пока пустой
 ```
 
-Основные операции с объектами -- это:
-<ol>
-<li>**Присвоение свойства по ключу.**</li>
-<li>**Чтение свойства по ключу.**</li>
-<li>**Удаление свойства по ключу.**</li>
-</ol>
+<img src="object-person-empty.svg">
 
-Для обращения к свойствам используется запись "через точку", вида `объект.свойство`:
+
+Основные операции с объектами -- это создание, получение и удаление свойств.
+
+Для обращения к свойствам используется запись "через точку", вида `объект.свойство`, например:
 
 ```js
-//+ run
-var person = {};
-
-// *!*1. присвоение*/!*
 // при присвоении свойства в объекте автоматически создаётся "ящик" 
 // с именем "name" и в него записывается содержимое 'Вася'
 person.name = 'Вася'; 
 
 person.age = 25;  // запишем ещё одно свойство: с именем 'age' и значением 25
-
-// *!*2. чтение*/!*
-alert(person.name + ': ' + person.age); // вывести значения 
-
-// *!*3. удаление*/!*
-delete person.name; // удалить "ящик" с именем "name" вместе со значением в нём
 ```
 
+<img src="object-person-1.svg">
+
+Значения хранятся "внутри" ящиков. Обратим внимание -- любые значения, любых типов: число, строка -- не важно.
+
+Чтобы прочитать их -- также обратимся через точку:
+```js
+alert(person.name + ': ' + person.age); // "Вася: 25" 
+```
+
+Удаление осуществляется оператором `delete`:
+
+```js
+delete person.age;
+```
+
+Осталось только свойство `name`:
+
+<img src="object-person-2.svg">
+
 Следующая операция:
 <ol start="4">
 <li>**Проверка существования свойства с определенным ключом.**</li>
 </ol>
 
-Например, есть объект `person`, и нужно проверить, существует ли в нем свойство `age`.
+Для проверки существования свойства в объекте есть оператор `in`. 
 
-Для проверки существования есть оператор `in`. Его синтаксис: `"prop" in obj`, причем имя свойства -- в виде строки, например:
+Его синтаксис: `"prop" in obj`, причем имя свойства -- в виде строки, например:
 
 ```js
-var person = { };
-
-if (*!*"age" in person*/!*) { 
-  alert("Свойство age существует!");
+if ("name" in person) { 
+  alert("Свойство name существует!");
 }
 ```
 
@@ -192,11 +199,7 @@ alert( person[key] );  // выведет person['age']
 
 Объект можно заполнить значениями при создании, указав их в фигурных скобках: `{ ключ1: значение1, ключ2: значение2, ... }`.
 
-Такой синтаксис называется *литеральным* (оригинал - *literal*), например:
-
-<img src="objectLiteral.png">
-
-Следующие два фрагмента кода создают одинаковый объект:
+Такой синтаксис называется *литеральным* (оригинал - *literal*), cледующие два фрагмента кода создают одинаковый объект:
 
 ```js
 var menuSetup = {
@@ -213,7 +216,7 @@ menuSetup.height = 200;
 menuSetup.title = 'Menu';
 ```
 
-**Названия свойств можно перечислять в кавычках или без, если они удовлетворяют ограничениям для имён переменных.**
+Названия свойств можно перечислять как в кавычках, так и без, если они удовлетворяют ограничениям для имён переменных.
 
 Например:
 
@@ -225,7 +228,7 @@ var menuSetup = {
 };
 ```
 
-**Значение у свойства может быть любое, в том числе и другой объект, который можно указать тут же:**
+В качестве значения можно тут же указать и другой объект:
 
 ```js
 var user = {

1-js/4-data-structures/4-object/object-person-1.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="112px" height="146px" viewBox="0 0 112 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="object-person-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="noun_3865-(1)" sketch:type="MSLayerGroup" transform="translate(-68.000000, 0.000000)" fill="#000000">
+            <g id="Three_Stack_1_" sketch:type="MSShapeGroup">
+                <g id="Cabinet" transform="translate(68.200000, 0.033058)">
+                    <path d="M107.53776,0.321282149 L4.06472,0.321282149 C2.02368,0.321282149 0.36952,1.40182215 0.36952,2.73508215 L0.36952,143.198802 C0.36952,144.532062 2.02368,145.612602 4.06472,145.612602 L107.53776,145.612602 C109.5788,145.612602 111.23296,144.532062 111.23296,143.198802 L111.23296,2.73508215 C111.23296,1.40182215 109.5788,0.321282149 107.53776,0.321282149 L107.53776,0.321282149 Z M101.5312,139.321282 L10.0688,139.321282 L10.0688,77.7692421 L101.5312,77.7692421 L101.5312,139.321282 L101.5312,139.321282 Z M101.5312,68.3996021 L10.0688,68.3996021 L10.0688,6.84756215 L101.5312,6.84756215 L101.5312,68.3996021 L101.5312,68.3996021 Z" id="Shape"></path>
+                </g>
+                <g id="Middle_Handle" transform="translate(0.000000, 18.000000)">
+                    <path d="M137.34488,64.3626 L133.58024,64.3626 L133.58024,69.8868 C133.58024,70.32258 133.03712,70.67574 132.36752,70.67574 L115.39192,70.67574 C114.72232,70.67574 114.1792,70.32258 114.1792,69.8868 L114.1792,64.3626 L110.6576,64.3626 C109.99048,64.3626 109.44984,64.71252 109.44984,65.14506 L109.44984,73.04904 C109.44984,73.48158 109.99048,73.8315 110.6576,73.8315 L137.34488,73.8315 C138.012,73.8315 138.55264,73.48158 138.55264,73.04904 L138.55264,65.14506 C138.55264,64.71414 138.00952,64.3626 137.34488,64.3626 L137.34488,64.3626 Z" id="Shape"></path>
+                </g>
+                <g id="Top_Handle" transform="translate(108.500000, 9.404959)">
+                    <path d="M28.84488,0.0375813223 L25.08024,0.0375813223 L25.08024,5.56178132 C25.08024,5.99756132 24.53712,6.35072132 23.86752,6.35072132 L6.89192,6.35072132 C6.22232,6.35072132 5.6792,5.99756132 5.6792,5.56178132 L5.6792,0.0375813223 L2.1576,0.0375813223 C1.49048,0.0375813223 0.94984,0.387501322 0.94984,0.820041322 L0.94984,8.72402132 C0.94984,9.15656132 1.49048,9.50648132 2.1576,9.50648132 L28.84488,9.50648132 C29.512,9.50648132 30.05264,9.15656132 30.05264,8.72402132 L30.05264,0.820041322 C30.05264,0.387501322 29.50952,0.0375813223 28.84488,0.0375813223 L28.84488,0.0375813223 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+        <text id="name" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#4990E2">
+            <tspan x="35" y="46">name</tspan>
+        </text>
+        <text id="age" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#4990E2">
+            <tspan x="42" y="119">age</tspan>
+        </text>
+    </g>
+</svg>

1-js/4-data-structures/4-object/object-person-2.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="112px" height="146px" viewBox="0 0 112 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="object-person-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="noun_3865-(1)" sketch:type="MSLayerGroup" fill="#000000">
+            <g id="Three_Stack_1_" sketch:type="MSShapeGroup">
+                <g id="Cabinet" transform="translate(0.200000, 0.033058)">
+                    <path d="M107.53776,0.321282149 L4.06472,0.321282149 C2.02368,0.321282149 0.36952,1.40182215 0.36952,2.73508215 L0.36952,143.198802 C0.36952,144.532062 2.02368,145.612602 4.06472,145.612602 L107.53776,145.612602 C109.5788,145.612602 111.23296,144.532062 111.23296,143.198802 L111.23296,2.73508215 C111.23296,1.40182215 109.5788,0.321282149 107.53776,0.321282149 L107.53776,0.321282149 Z M101.5312,137.321282 L10.0688,137.321282 L10.0688,6.84756215 L101.5312,6.84756215 L101.5312,137.321282 L101.5312,137.321282 Z" id="Shape"></path>
+                </g>
+                <g id="Top_Handle" transform="translate(40.500000, 9.404959)">
+                    <path d="M28.84488,0.0375813223 L25.08024,0.0375813223 L25.08024,5.56178132 C25.08024,5.99756132 24.53712,6.35072132 23.86752,6.35072132 L6.89192,6.35072132 C6.22232,6.35072132 5.6792,5.99756132 5.6792,5.56178132 L5.6792,0.0375813223 L2.1576,0.0375813223 C1.49048,0.0375813223 0.94984,0.387501322 0.94984,0.820041322 L0.94984,8.72402132 C0.94984,9.15656132 1.49048,9.50648132 2.1576,9.50648132 L28.84488,9.50648132 C29.512,9.50648132 30.05264,9.15656132 30.05264,8.72402132 L30.05264,0.820041322 C30.05264,0.387501322 29.50952,0.0375813223 28.84488,0.0375813223 L28.84488,0.0375813223 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+        <text id="name" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#4990E2">
+            <tspan x="35" y="74">name</tspan>
+        </text>
+    </g>
+</svg>

1-js/4-data-structures/4-object/object-person-empty.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="112px" height="179px" viewBox="0 0 112 179" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="object-person-empty" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <path d="M48.5,29.5 L52.5,25.5" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M44.5,29.5 L48.5,25.5" id="Line-2" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup" transform="translate(46.500000, 27.500000) scale(-1, 1) translate(-46.500000, -27.500000) "></path>
+        <path d="M48.5,14.5714286 L48.5,29.4285714" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <g id="noun_3865-(1)" sketch:type="MSLayerGroup" transform="translate(-68.000000, 25.000000)">
+            <g id="Background_xA0_Image_1_"></g>
+            <g id="Three_Stack_1_" transform="translate(68.200000, 8.033058)" fill="#000000" sketch:type="MSShapeGroup">
+                <g id="Cabinet">
+                    <path d="M107.53776,0.321282149 L4.06472,0.321282149 C2.02368,0.321282149 0.36952,1.40182215 0.36952,2.73508215 L0.36952,143.198802 C0.36952,144.532062 2.02368,145.612602 4.06472,145.612602 L107.53776,145.612602 C109.5788,145.612602 111.23296,144.532062 111.23296,143.198802 L111.23296,2.73508215 C111.23296,1.40182215 109.5788,0.321282149 107.53776,0.321282149 L107.53776,0.321282149 Z M101.5312,141.087942 L10.0688,141.087942 L10.0688,4.84756215 L101.5312,4.84756215 L101.5312,141.087942 L101.5312,141.087942 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+        <text id="Объект" sketch:type="MSTextLayer" font-family="Open Sans" font-size="16" font-weight="bold" sketch:alignment="middle">
+            <tspan x="52.5" y="89" fill="#DFDFDF"></tspan>
+            <tspan x="29.3203125" y="111" fill="#D8D8D8">пусто</tspan>
+        </text>
+        <text id="person" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#000000">
+            <tspan x="27" y="8">person</tspan>
+        </text>
+    </g>
+</svg>

1-js/4-data-structures/4-object/object.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="99px" height="128px" viewBox="0 0 99 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="object" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="noun_3865-(1)" sketch:type="MSLayerGroup" transform="translate(-61.000000, -7.000000)">
+            <g id="Background_xA0_Image_1_"></g>
+            <g id="Three_Stack_1_" fill="#000000" sketch:type="MSShapeGroup">
+                <g id="Cabinet" transform="translate(60.775000, 7.041322)">
+                    <path d="M95.83002,0.281617686 L3.62219,0.281617686 C1.80336,0.281617686 0.32929,1.22875769 0.32929,2.39741769 L0.32929,125.519938 C0.32929,126.688598 1.80336,127.635738 3.62219,127.635738 L95.83002,127.635738 C97.64885,127.635738 99.12292,126.688598 99.12292,125.519938 L99.12292,2.39741769 C99.12292,1.22875769 97.64885,0.281617686 95.83002,0.281617686 L95.83002,0.281617686 Z M90.4774,123.669678 L8.9726,123.669678 L8.9726,86.5082777 L90.4774,86.5082777 L90.4774,123.669678 L90.4774,123.669678 Z M90.4774,82.5393777 L8.9726,82.5393777 L8.9726,45.3779777 L90.4774,45.3779777 L90.4774,82.5393777 L90.4774,82.5393777 Z M90.4774,41.4104977 L8.9726,41.4104977 L8.9726,4.24909769 L90.4774,4.24909769 L90.4774,41.4104977 L90.4774,41.4104977 Z" id="Shape"></path>
+                </g>
+                <g id="Bottom_Handle">
+                    <path d="M122.18648,97.54548 L118.8317,97.54548 L118.8317,102.3891 C118.8317,102.77108 118.34771,103.08064 117.75101,103.08064 L102.62135,103.08064 C102.02465,103.08064 101.54066,102.77108 101.54066,102.3891 L101.54066,97.54548 L98.40246,97.54548 C97.80797,97.54548 97.32619,97.85362 97.32619,98.23276 L97.32619,105.16094 C97.32619,105.54008 97.80797,105.8468 98.40246,105.8468 L122.18427,105.8468 C122.77876,105.8468 123.26054,105.54008 123.26054,105.16094 L123.26054,98.23276 C123.26054,97.85362 122.78097,97.54548 122.18648,97.54548 L122.18648,97.54548 Z" id="Shape"></path>
+                </g>
+                <g id="Middle_Handle">
+                    <path d="M122.39201,56.4166 L119.03723,56.4166 L119.03723,61.2588 C119.03723,61.64078 118.55324,61.95034 117.95654,61.95034 L102.82909,61.95034 C102.23239,61.95034 101.7484,61.64078 101.7484,61.2588 L101.7484,56.4166 L98.6102,56.4166 C98.01571,56.4166 97.53393,56.72332 97.53393,57.10246 L97.53393,64.03064 C97.53393,64.40978 98.01571,64.7165 98.6102,64.7165 L122.39201,64.7165 C122.9865,64.7165 123.46828,64.40978 123.46828,64.03064 L123.46828,57.10246 C123.46828,56.72474 122.98429,56.4166 122.39201,56.4166 L122.39201,56.4166 Z" id="Shape"></path>
+                </g>
+                <g id="Top_Handle" transform="translate(96.687500, 15.256198)">
+                    <path d="M25.70451,0.0329416529 L22.34973,0.0329416529 L22.34973,4.87514165 C22.34973,5.25712165 21.86574,5.56668165 21.26904,5.56668165 L6.14159,5.56668165 C5.54489,5.56668165 5.0609,5.25712165 5.0609,4.87514165 L5.0609,0.0329416529 L1.9227,0.0329416529 C1.32821,0.0329416529 0.84643,0.339661653 0.84643,0.718801653 L0.84643,7.64698165 C0.84643,8.02612165 1.32821,8.33284165 1.9227,8.33284165 L25.70451,8.33284165 C26.299,8.33284165 26.78078,8.02612165 26.78078,7.64698165 L26.78078,0.718801653 C26.78078,0.339661653 26.29679,0.0329416529 25.70451,0.0329416529 L25.70451,0.0329416529 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+        <text id="ключ1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#4990E2">
+            <tspan x="26" y="35">ключ1</tspan>
+        </text>
+        <text id="ключ2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#4990E2">
+            <tspan x="26" y="74">ключ2</tspan>
+        </text>
+        <text id="ключ3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#4990E2">
+            <tspan x="26" y="118">ключ3</tspan>
+        </text>
+    </g>
+</svg>

1-js/4-data-structures/5-object-for-in/article.md

@@ -1,6 +1,6 @@
 # Объекты: перебор свойств 
 
-Для перебора всех свойств из объекта используется цикл по свойствам `for..in`. Это специальная синтаксическая конструкция, которая работает не так, как обычный цикл.
+Для перебора всех свойств из объекта используется цикл по свойствам `for..in`. Эта синтаксическая конструкция отличается от рассмотренного ранее цикла `for(;;)`.
 
 [cut]
 
@@ -14,11 +14,10 @@ for (key in obj) {
 }
 ```
 
-При этом в `key` будут последовательно записаны имена свойств. Конечно, вместо `key` может быть любое другое имя переменной. 
-
+При этом `for..in` последовательно переберёт свойства объекта `obj`, имя каждого свойства будет записано в  `key` и вызвано тело цикла.
 
 [smart header="Объявление переменной в цикле `for (var key in obj)`"]
-Переменную можно объявить прямо в цикле:
+Вспомогательную переменную `key` можно объявить прямо в цикле:
 
 ```js
 for (*!*var key*/!* in menu) { 
@@ -26,11 +25,10 @@ for (*!*var key*/!* in menu) {
 }
 ```
 
-Так иногда пишут для краткости кода.
+Так иногда пишут для краткости кода. Можно использовать и любое другое название, кроме `key`, например `for(var propName in menu)`.
 [/smart]
 
-
-Например:
+Пример итерации по свойствам:
 
 ```js
 //+ run

1-js/4-data-structures/6-object-reference/article.md

@@ -1,6 +1,6 @@
 # Объекты: передача по ссылке
 
-Фундаментальным отличием объектов от примитивов, является их копирование "по ссылке".
+Фундаментальным отличием объектов от примитивов, является их хранение и копирование "по ссылке".
 
 [cut]
 
@@ -15,7 +15,7 @@ var phrase = message;
 
 В результате такого копирования получились две полностью независимые переменные, в каждой из которых хранится значение `"Привет"`.
 
-<img src="message_box_hello.png"> <img src="phrase_box_hello.png">
+<img src="variable-copy-value.svg">
 
 ## Копирование по ссылке
 
@@ -23,23 +23,15 @@ var phrase = message;
 
 **В переменной, которой присвоен объект, хранится не сам объект, а "адрес его места в памяти", иными словами -- "ссылка" на него.**
 
-Например, обычную переменную можно изобразить как коробку с данными:
-
-```js
-var message = "Привет"; // значение в переменной
-```
-
-<img src="box-message-hello.png">
-
-А вот как выглядит переменная, которой присвоен объект:
+Вот как выглядит переменная, которой присвоен объект:
 
 ```js
 var user = { name: "Вася" };
 ```
 
-<img src="referenceUser.png">
+<img src="variable-contains-reference.svg">
 
-Внимание: объект -- вне переменной. В переменной -- лишь ссылка на него.
+Внимание: объект -- вне переменной. В переменной -- лишь "адрес" (ссылка) для него.
 
 **При копировании переменной с объектом -- копируется эта ссылка, а объект по-прежнему остается в единственном экземпляре.** 
 
@@ -53,7 +45,7 @@ var admin = user; // скопировали ссылку
 
 Получили две переменные, в которых находятся ссылки на один и тот же объект:
 
-<img src="referenceUserAdmin.png">
+<img src="variable-copy-reference.svg">
 
 **Так как объект всего один, то изменения через любую переменную видны в других переменных:**
 
@@ -71,12 +63,12 @@ alert(*!*user.name*/!*); // 'Петя', изменения видны в user
 [smart header="Переменная с объектом как \"ключ\" к сейфу с данными"]
 Ещё одна аналогия: переменная, в которую присвоен объект, на самом деле хранит не сами данные, а ключ к сейфу, где они хранятся.
 
-При копировании её, получается что мы сделали копию ключа, но сейф по-прежнему один. По какому бы ключу мы не залезли в сейф, данные -- одни и те же.
+При копировании её, получается что мы сделали копию ключа, но сейф по-прежнему один.
 [/smart]
 
 ## Клонирование объектов
 
-Иногда, на практике -- очень редко, нужно скопировать объект целиком, создать именно полную копию, "независимый клон".
+Иногда, на практике -- очень редко, нужно скопировать объект целиком, создать именно полную независимую копию, "клон" объекта.
 
 Что ж, можно сделать и это. Для этого нужно пройти по объекту, достать данные и скопировать на уровне примитивов.
 
@@ -98,15 +90,15 @@ for(var key in user) {
 }
 */!*
 
-// теперь clone -- полностью независимая копия
+// теперь clone - полностью независимая копия
 clone.name = "Петя"; // поменяли данные в clone
 
 alert(user.name); // по-прежнем "Вася"
 ```
 
-В этом коде не учитывается, что свойства объектов, в свою очередь, могут хранить ссылки на другие объекты. Можно обойти такие подобъекты и тоже склонировать их.
+В этом коде каждое свойство объекта `user` копируется в `clone`. Если предположить, что они примитивны, то каждое скопируется по значению и мы как раз получим полный клон.
 
-Это называют "глубоким" клонированием. Для того, чтобы это сделать, нужно рекурсивно обойти объект вместе с подобъектами. 
+Если же свойства объектов, в свою очередь, могут хранить ссылки на другие объекты, то нужно обойти такие подобъекты и тоже склонировать их. Это называют "глубоким" клонированием.
 
 ## Вывод в консоли
 
@@ -134,21 +126,21 @@ console.log(time);
 time.microsecond++;
 ```
 
-Как видно, некий объект выводится `(*)`, затем он меняется `(**)` и снова выводится, и так несколько раз. Пока ничего необычного, типичная ситуация -- скрипт делает какую-то работу с объектом и выводит в консоли то, как она продвигается.
+Как видно, в нём некий объект выводится строкой `(*)`, затем он меняется в строке `(**)` и снова выводится, и так несколько раз. Пока ничего необычного, типичная ситуация -- скрипт делает какую-то работу с объектом и выводит в консоли то, как она продвигается.
 
 Необычное -- в другом!
 
-При раскрытии каждый объект будет выглядеть примерно так (в Chrome):
+При раскрытии каждый объект будет выглядеть примерно так (скриншот из Chrome):
 
 <img src="object-reference-console.png">
 
 **Судя по выводу, свойство `microsecond` всегда было равно `123459`... Или нет?**
 
-Конечно, нет! Консоль нас просто дурит. 
+Если посмотреть на код выше то, очевидно, нет! Это свойство меняется, а консоль нас просто дурит. 
 
 **При "раскрытии" свойств объекта в консоли -- браузер всегда выводит их текущие (на момент раскрытия) значения.**
 
-Так происходит именно потому, что вывод не делает "копию" текущего содержимого, а сохраняет лишь ссылку на объект. В будущем, при отладке скриптов у вас не раз возникнет подобная ситуация :)
+Так происходит именно потому, что вывод не делает "копию" текущего содержимого, а сохраняет лишь ссылку на объект. Запомните эту особенность консоли, в будущем, при отладке скриптов у вас не раз возникнет подобная ситуация.
 
 
 ## Итого

1-js/4-data-structures/6-object-reference/variable-contains-reference.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="297px" height="199px" viewBox="0 0 297 199" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="variable-contains-reference" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <path d="M43.5,141 L145.5,141" id="Line-2" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M1.5,197.5 L43.5,141.5" id="Line" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M132.5,196.5 L174.5,140.5" id="Line-3" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M43.5,101 L175.5,101" id="Line-7" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M1.5,157.5 L43.5,101.5" id="Line-8" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M132.5,157.5 L174.5,101.5" id="Line-9" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M43,141.5 L43,101.5" id="Line-4" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <rect id="Rectangle-2" stroke="#979797" stroke-width="2" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(81.959003, 132.776161) rotate(47.000000) translate(-81.959003, -132.776161) " x="42" y="120.247795" width="79.918006" height="25.0567324"></rect>
+        <path d="M175,140 L175,101.5" id="Line-5" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <rect id="Rectangle-4" stroke="#979797" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="158" width="133" height="40"></rect>
+        <g id="Rectangle-3-+-Oval-1-+-message" sketch:type="MSLayerGroup" transform="translate(37.000000, 171.000000)">
+            <rect id="Rectangle-3" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="63" height="16"></rect>
+            <circle id="Oval-1" stroke="#979797" sketch:type="MSShapeGroup" cx="3.5" cy="3.5" r="1.5"></circle>
+            <text id="user" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#4990E2">
+                <tspan x="15" y="12">user</tspan>
+            </text>
+        </g>
+        <g id="noun_3865-(1)" sketch:type="MSLayerGroup" transform="translate(185.000000, 0.000000)" fill="#000000">
+            <g id="Three_Stack_1_" sketch:type="MSShapeGroup">
+                <g id="Cabinet" transform="translate(0.200000, 0.033058)">
+                    <path d="M107.53776,0.321282149 L4.06472,0.321282149 C2.02368,0.321282149 0.36952,0.908809745 0.36952,1.63375009 L0.36952,78.0088142 C0.36952,78.7337546 2.02368,79.3212821 4.06472,79.3212821 L107.53776,79.3212821 C109.5788,79.3212821 111.23296,78.7337546 111.23296,78.0088142 L111.23296,1.63375009 C111.23296,0.908809745 109.5788,0.321282149 107.53776,0.321282149 L107.53776,0.321282149 Z M101.5312,72.9669421 L10.0688,72.9669421 L10.0688,6.84756215 L101.5312,6.84756215 L101.5312,72.9669421 L101.5312,72.9669421 Z" id="Shape"></path>
+                </g>
+                <g id="Top_Handle" transform="translate(40.500000, 9.404959)">
+                    <path d="M28.84488,0.0375813223 L25.08024,0.0375813223 L25.08024,5.56178132 C25.08024,5.99756132 24.53712,6.35072132 23.86752,6.35072132 L6.89192,6.35072132 C6.22232,6.35072132 5.6792,5.99756132 5.6792,5.56178132 L5.6792,0.0375813223 L2.1576,0.0375813223 C1.49048,0.0375813223 0.94984,0.387501322 0.94984,0.820041322 L0.94984,8.72402132 C0.94984,9.15656132 1.49048,9.50648132 2.1576,9.50648132 L28.84488,9.50648132 C29.512,9.50648132 30.05264,9.15656132 30.05264,8.72402132 L30.05264,0.820041322 C30.05264,0.387501322 29.50952,0.0375813223 28.84488,0.0375813223 L28.84488,0.0375813223 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+        <text id="name" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#979797">
+            <tspan x="218" y="49">name</tspan>
+        </text>
+        <g id="noun_37574_cc" sketch:type="MSLayerGroup" transform="translate(127.000000, 83.500000) rotate(10.000000) translate(-127.000000, -83.500000) translate(72.000000, 36.000000)" fill="#000000">
+            <g id="Editor" transform="translate(54.754715, 47.398639) rotate(141.000000) translate(-54.754715, -47.398639) translate(-4.796384, 34.631516)" sketch:type="MSShapeGroup">
+                <path d="M67.2636383,25.5342454 L67.2636383,17.7965953 C67.2636383,17.7965953 3.56264802,17.9173072 2.58917769,0 C34.7901854,16.5161804 67.2668582,10.8327102 67.2668582,10.8327102 L67.2636383,3.09506005 L116.972573,14.3146527 L67.2636383,25.5342454 L67.2636383,25.5342454 Z M72.5431368,22.3343418 L72.5431368,16.3282175 C72.5431368,16.3282175 23.6262507,17.435782 9.14303504,4.96543295 C35.1656667,17.435782 72.5431345,11.9892017 72.5431345,11.9892017 L72.5431368,6.09642199 L107.216377,14.3146527 L72.5431368,22.3343418 L72.5431368,22.3343418 Z" id="left_arrow" transform="translate(59.780875, 12.767123) scale(-1, 1) translate(-59.780875, -12.767123) "></path>
+            </g>
+        </g>
+        <g id="noun_4093_cc" sketch:type="MSLayerGroup" transform="translate(73.000000, 126.000000)" fill="#010101">
+            <path d="M15.47568,0 L0.52464,0 C0.19664,0 0,0.138870968 0,0.370322581 L0,6.57074194 C0,6.80208065 0.19664,6.94083871 0.52464,6.94083871 L15.47568,6.94083871 C15.80352,6.94083871 16,6.80208065 16,6.57074194 L16,0.370322581 C16,0.138870968 15.80336,0 15.47568,0 L15.47568,0 Z M14.67984,0.555370968 L7.86896,4.34959677 L1.17744,0.555370968 L14.67984,0.555370968 L14.67984,0.555370968 Z M14.95088,6.38558065 L1.04912,6.38558065 C0.88512,6.38558065 0.78688,6.31614516 0.78688,6.20030645 L0.78688,1.03125806 L7.86896,4.99743548 L15.21296,0.884483871 L15.21296,6.20030645 C15.21312,6.31614516 15.11488,6.38558065 14.95088,6.38558065 L14.95088,6.38558065 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

1-js/4-data-structures/6-object-reference/variable-copy-reference.svg

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="501px" height="199px" viewBox="0 0 501 199" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="variable-copy-reference" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <path d="M43.5,141 L145.5,141" id="Line-2" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M1.5,197.5 L43.5,141.5" id="Line" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M132.5,196.5 L174.5,140.5" id="Line-3" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M43.5,101 L175.5,101" id="Line-7" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M1.5,157.5 L43.5,101.5" id="Line-8" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M132.5,157.5 L174.5,101.5" id="Line-9" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M43,141.5 L43,101.5" id="Line-4" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <rect id="Rectangle-2" stroke="#979797" stroke-width="2" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(81.959003, 132.776161) rotate(47.000000) translate(-81.959003, -132.776161) " x="42" y="120.247795" width="79.918006" height="25.0567324"></rect>
+        <path d="M175,140 L175,101.5" id="Line-5" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <rect id="Rectangle-4" stroke="#979797" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="158" width="133" height="40"></rect>
+        <g id="Rectangle-3-+-Oval-1-+-message" sketch:type="MSLayerGroup" transform="translate(37.000000, 171.000000)">
+            <rect id="Rectangle-3" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="63" height="16"></rect>
+            <circle id="Oval-1" stroke="#979797" sketch:type="MSShapeGroup" cx="3.5" cy="3.5" r="1.5"></circle>
+            <text id="user" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#4990E2">
+                <tspan x="15" y="12">user</tspan>
+            </text>
+        </g>
+        <g id="noun_3865-(1)" sketch:type="MSLayerGroup" transform="translate(185.000000, 0.000000)" fill="#000000">
+            <g id="Three_Stack_1_" sketch:type="MSShapeGroup">
+                <g id="Cabinet" transform="translate(0.200000, 0.033058)">
+                    <path d="M107.53776,0.321282149 L4.06472,0.321282149 C2.02368,0.321282149 0.36952,0.908809745 0.36952,1.63375009 L0.36952,78.0088142 C0.36952,78.7337546 2.02368,79.3212821 4.06472,79.3212821 L107.53776,79.3212821 C109.5788,79.3212821 111.23296,78.7337546 111.23296,78.0088142 L111.23296,1.63375009 C111.23296,0.908809745 109.5788,0.321282149 107.53776,0.321282149 L107.53776,0.321282149 Z M101.5312,72.9669421 L10.0688,72.9669421 L10.0688,6.84756215 L101.5312,6.84756215 L101.5312,72.9669421 L101.5312,72.9669421 Z" id="Shape"></path>
+                </g>
+                <g id="Top_Handle" transform="translate(40.500000, 9.404959)">
+                    <path d="M28.84488,0.0375813223 L25.08024,0.0375813223 L25.08024,5.56178132 C25.08024,5.99756132 24.53712,6.35072132 23.86752,6.35072132 L6.89192,6.35072132 C6.22232,6.35072132 5.6792,5.99756132 5.6792,5.56178132 L5.6792,0.0375813223 L2.1576,0.0375813223 C1.49048,0.0375813223 0.94984,0.387501322 0.94984,0.820041322 L0.94984,8.72402132 C0.94984,9.15656132 1.49048,9.50648132 2.1576,9.50648132 L28.84488,9.50648132 C29.512,9.50648132 30.05264,9.15656132 30.05264,8.72402132 L30.05264,0.820041322 C30.05264,0.387501322 29.50952,0.0375813223 28.84488,0.0375813223 L28.84488,0.0375813223 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+        <text id="name" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#979797">
+            <tspan x="218" y="49">name</tspan>
+        </text>
+        <g id="noun_37574_cc" sketch:type="MSLayerGroup" transform="translate(127.000000, 83.500000) rotate(10.000000) translate(-127.000000, -83.500000) translate(72.000000, 36.000000)" fill="#000000">
+            <g id="Editor" transform="translate(54.754715, 47.398639) rotate(141.000000) translate(-54.754715, -47.398639) translate(-4.796384, 34.631516)" sketch:type="MSShapeGroup">
+                <path d="M67.2636383,25.5342454 L67.2636383,17.7965953 C67.2636383,17.7965953 3.56264802,17.9173072 2.58917769,0 C34.7901854,16.5161804 67.2668582,10.8327102 67.2668582,10.8327102 L67.2636383,3.09506005 L116.972573,14.3146527 L67.2636383,25.5342454 L67.2636383,25.5342454 Z M72.5431368,22.3343418 L72.5431368,16.3282175 C72.5431368,16.3282175 23.6262507,17.435782 9.14303504,4.96543295 C35.1656667,17.435782 72.5431345,11.9892017 72.5431345,11.9892017 L72.5431368,6.09642199 L107.216377,14.3146527 L72.5431368,22.3343418 L72.5431368,22.3343418 Z" id="left_arrow" transform="translate(59.780875, 12.767123) scale(-1, 1) translate(-59.780875, -12.767123) "></path>
+            </g>
+        </g>
+        <g id="noun_4093_cc" sketch:type="MSLayerGroup" transform="translate(73.000000, 126.000000)" fill="#010101">
+            <path d="M15.47568,0 L0.52464,0 C0.19664,0 0,0.138870968 0,0.370322581 L0,6.57074194 C0,6.80208065 0.19664,6.94083871 0.52464,6.94083871 L15.47568,6.94083871 C15.80352,6.94083871 16,6.80208065 16,6.57074194 L16,0.370322581 C16,0.138870968 15.80336,0 15.47568,0 L15.47568,0 Z M14.67984,0.555370968 L7.86896,4.34959677 L1.17744,0.555370968 L14.67984,0.555370968 L14.67984,0.555370968 Z M14.95088,6.38558065 L1.04912,6.38558065 C0.88512,6.38558065 0.78688,6.31614516 0.78688,6.20030645 L0.78688,1.03125806 L7.86896,4.99743548 L15.21296,0.884483871 L15.21296,6.20030645 C15.21312,6.31614516 15.11488,6.38558065 14.95088,6.38558065 L14.95088,6.38558065 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+        </g>
+        <path d="M367.5,141 L469.5,141" id="Line-16" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M325.5,197.5 L367.5,141.5" id="Line-6" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M456.5,196.5 L498.5,140.5" id="Line-10" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M367.5,101 L499.5,101" id="Line-11" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M325.5,157.5 L367.5,101.5" id="Line-12" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M456.5,157.5 L498.5,101.5" id="Line-13" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M367,141.5 L367,101.5" id="Line-14" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <rect id="Rectangle-5" stroke="#979797" stroke-width="2" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(405.959003, 132.776161) rotate(47.000000) translate(-405.959003, -132.776161) " x="366" y="120.247795" width="79.918006" height="25.0567324"></rect>
+        <path d="M499,140 L499,101.5" id="Line-15" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <rect id="Rectangle-6" stroke="#979797" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="324" y="158" width="133" height="40"></rect>
+        <g id="Rectangle-3-+-Oval-1-+-message-2" sketch:type="MSLayerGroup" transform="translate(361.000000, 171.000000)">
+            <rect id="Rectangle-3" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="63" height="16"></rect>
+            <circle id="Oval-1" stroke="#979797" sketch:type="MSShapeGroup" cx="3.5" cy="3.5" r="1.5"></circle>
+            <text id="admin" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#4990E2">
+                <tspan x="15" y="12">admin</tspan>
+            </text>
+        </g>
+        <g id="noun_37574_cc-2" sketch:type="MSLayerGroup" transform="translate(358.286167, 83.555879) scale(-1, 1) rotate(10.000000) translate(-358.286167, -83.555879) translate(303.786167, 35.555879)" fill="#000000">
+            <g id="Editor" transform="translate(54.526831, 47.793916) rotate(141.000000) translate(-54.526831, -47.793916) translate(-5.024268, 35.026793)" sketch:type="MSShapeGroup">
+                <path d="M67.2636383,25.5342454 L67.2636383,17.7965953 C67.2636383,17.7965953 3.56264802,17.9173072 2.58917769,0 C34.7901854,16.5161804 67.2668582,10.8327102 67.2668582,10.8327102 L67.2636383,3.09506005 L116.972573,14.3146527 L67.2636383,25.5342454 L67.2636383,25.5342454 Z M72.5431368,22.3343418 L72.5431368,16.3282175 C72.5431368,16.3282175 23.6262507,17.435782 9.14303504,4.96543295 C35.1656667,17.435782 72.5431345,11.9892017 72.5431345,11.9892017 L72.5431368,6.09642199 L107.216377,14.3146527 L72.5431368,22.3343418 L72.5431368,22.3343418 Z" id="left_arrow" transform="translate(59.780875, 12.767123) scale(-1, 1) translate(-59.780875, -12.767123) "></path>
+            </g>
+        </g>
+        <g id="noun_4093_cc-2" sketch:type="MSLayerGroup" transform="translate(397.000000, 126.000000)" fill="#010101">
+            <path d="M15.47568,0 L0.52464,0 C0.19664,0 0,0.138870968 0,0.370322581 L0,6.57074194 C0,6.80208065 0.19664,6.94083871 0.52464,6.94083871 L15.47568,6.94083871 C15.80352,6.94083871 16,6.80208065 16,6.57074194 L16,0.370322581 C16,0.138870968 15.80336,0 15.47568,0 L15.47568,0 Z M14.67984,0.555370968 L7.86896,4.34959677 L1.17744,0.555370968 L14.67984,0.555370968 L14.67984,0.555370968 Z M14.95088,6.38558065 L1.04912,6.38558065 C0.88512,6.38558065 0.78688,6.31614516 0.78688,6.20030645 L0.78688,1.03125806 L7.86896,4.99743548 L15.21296,0.884483871 L15.21296,6.20030645 C15.21312,6.31614516 15.11488,6.38558065 14.95088,6.38558065 L14.95088,6.38558065 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

1-js/4-data-structures/6-object-reference/variable-copy-value.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="366px" height="103px" viewBox="0 0 366 103" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>Diagrams</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="variable-copy-value" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <path d="M43.5,45 L145.5,45" id="Line-2" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M1.5,101.5 L43.5,45.5" id="Line" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M132.5,100.5 L174.5,44.5" id="Line-3" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M43.5,5 L175.5,5" id="Line-7" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M1.5,61.5 L43.5,5.5" id="Line-8" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M132.5,61.5 L174.5,5.5" id="Line-9" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M43,45.5 L43,5.5" id="Line-4" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <rect id="Rectangle-2" stroke="#979797" stroke-width="2" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(81.959003, 36.776161) rotate(47.000000) translate(-81.959003, -36.776161) " x="42" y="24.247795" width="79.918006" height="25.0567324"></rect>
+        <text id="&quot;Привет&quot;" sketch:type="MSTextLayer" transform="translate(85.693270, 38.500000) rotate(47.000000) translate(-85.693270, -38.500000) " font-family="Open Sans" font-size="14" font-weight="normal" fill="#373535">
+            <tspan x="54.6932699" y="44">"Привет"</tspan>
+        </text>
+        <path d="M175,44 L175,5.5" id="Line-5" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <rect id="Rectangle-4" stroke="#979797" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="62" width="133" height="40"></rect>
+        <g id="Rectangle-3-+-Oval-1-+-message" sketch:type="MSLayerGroup" transform="translate(37.000000, 75.000000)">
+            <rect id="Rectangle-3" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="63" height="16"></rect>
+            <circle id="Oval-1" stroke="#979797" sketch:type="MSShapeGroup" cx="3.5" cy="3.5" r="1.5"></circle>
+            <text id="message" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#4990E2">
+                <tspan x="7" y="12">message</tspan>
+            </text>
+        </g>
+        <path d="M232.5,45 L334.5,45" id="Line-6" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M190.5,101.5 L232.5,45.5" id="Line-10" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M321.5,100.5 L363.5,44.5" id="Line-11" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M232.5,5 L364.5,5" id="Line-12" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M190.5,61.5 L232.5,5.5" id="Line-13" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M321.5,61.5 L363.5,5.5" id="Line-14" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <path d="M232,45.5 L232,5.5" id="Line-15" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <rect id="Rectangle-5" stroke="#979797" stroke-width="2" fill="#E8E8E8" sketch:type="MSShapeGroup" transform="translate(270.959003, 36.776161) rotate(47.000000) translate(-270.959003, -36.776161) " x="231" y="24.247795" width="79.918006" height="25.0567324"></rect>
+        <text id="&quot;Привет&quot;" sketch:type="MSTextLayer" transform="translate(274.693270, 38.500000) rotate(47.000000) translate(-274.693270, -38.500000) " font-family="Open Sans" font-size="14" font-weight="normal" fill="#373535">
+            <tspan x="243.69327" y="44">"Привет"</tspan>
+        </text>
+        <path d="M364,44 L364,5.5" id="Line-16" stroke="#979797" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
+        <rect id="Rectangle-6" stroke="#979797" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="189" y="62" width="133" height="40"></rect>
+        <g id="Rectangle-3-+-Oval-1-+-message-2" sketch:type="MSLayerGroup" transform="translate(226.000000, 75.000000)">
+            <rect id="Rectangle-3" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="63" height="16"></rect>
+            <circle id="Oval-1" stroke="#979797" sketch:type="MSShapeGroup" cx="3.5" cy="3.5" r="1.5"></circle>
+            <text id="phrase" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#4990E2">
+                <tspan x="10" y="12">phrase</tspan>
+            </text>
+        </g>
+    </g>
+</svg>