Feb 29, 2020 · Jan 16, 2020 · Jan 20, 2020 · Jan 20, 2020 · Feb 2, 2020 · Feb 2, 2020
diff --git a/1-js/01-getting-started/4-devtools/article.md b/1-js/01-getting-started/4-devtools/article.md
 # Інструменти розробника

 Будь-який код так і тяжіє до помилок. Швидше за все, ви будете робити помилки... Хоча, про що я говорю? Ви *точно* будете робити помилки, принаймні, якщо ви людина, а неробот [robot](https://uk.wikipedia.org/wiki/Бендер_(Футурама)).
 Будь-який код так і тяжіє до помилок. Швидше за все, ви будете робити помилки... Хоча, про що я говорю? Ви *точно* будете робити помилки, принаймні, якщо ви людина, а не[робот](https://uk.wikipedia.org/wiki/Бендер_(Футурама)).

 Зазвичай, користувачі не бачать помилок в браузері. Тому, якщо в скрипті щось трапиться на так, ми не побачимо помилки, і не зможемо її виправити.


 ## Google Chrome

 Відкрийте сторінку [bug.html](bug.html).
 Для прикладів ми будемо використовувати браузер [Google Chrome](https://www.google.com/intl/uk_ua/chrome/). Інструменти розробника в ньому показуються лише англійською мовою, незалежно від налаштувань браузера.

 На цій сторінці є помилка в JavaScript коді. Вона прихована для звичайних користувачів, тому потрібно відкрити інструменти розробника, щоб її побачити.
 Відкрийте сторінку [bug.html](bug.html). На ній є помилка в JavaScript коді. Вона прихована для звичайних користувачів, тому потрібно відкрити інструменти розробника, щоб її побачити.

 Натисніть клавішу `key:F12` або, якщо у вас Mac, комбінацію клавіш `key:Cmd+Opt+J`.


 ![chrome](chrome.png)

 Точний вигляд інструментів розробника може відрізнятися в залежності від вашої версії Chrome. Вони міняються час від часу, але в основному це вікно пивинно бути схожим. Ці інструменти показуються лише англійською мовою, незалежно від мови браузера.
 Точний вигляд інструментів розробника може відрізнятися в залежності від вашої версії Chrome. Вони міняються час від часу, але в основному це вікно пивинно бути схожим.

 - Тут ми можемо побачити червоне повідомлення. У нашому випадку, скрипт має невизначену команду "lalala".
 - З правого боку є посилання на джерело `bug.html:12` з номером рядка, де ця помилка виникла. При натисканні на це посилання, інструмент перейде на вкладку "Source", де відкриє файл і перейде на рядок, в якому трапилася помилка.

 ## Safari

 Safari (браузер вMac, не підтримується Windows/Linux)дещо особливий. Спочатку нам потрібно увімкнути меню "Розробка".
 Safari (стандартнийбраузер вmacOS, не підтримується Windows/Linux)має свої нюанси. Спочатку нам потрібно увімкнути меню "Розробка".

 Відкрийте Параметри і перейдіть на панель "Експертні". Знизу буде галочка, яку необхідно вибрати:

diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg
diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg
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
 function hello(name) {
  let phrase = `Hello, ${name}!`;
  let phrase = `Привіт, ${name}!`;

  say(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

  <script src="hello.js"></script>

 An example for debugging.
 Приклад для налагодження.

  <script>
  hello("John");
  hello("Олександр");
  </script>

 </body>
diff --git a/1-js/03-code-quality/02-coding-style/article.md b/1-js/03-code-quality/02-coding-style/article.md

 Наш код повинен бути настільки зрозумілим та читабельним, наскільки це можливо.

 Насправді,це є мистецтвомпрограмування-- брати складну задачу і писати код, який одночасно і вирішує задачу, і залишається зрозумілим людині. Саме тут хороший стиль коду стає у нагоді.
 Насправді,мистецтвопрограмування— це брати складну задачу і писати код, який одночасно і вирішує задачу, і залишається зрозумілим людині. Саме тут хороший стиль коду стає у нагоді.

 ## Синтаксис

 Деякі запропоновані правила наведені унаступній шпаргалці (дивитисьнижче більш детально):
 Деякі запропоновані правила наведені уцій шпаргалці (*нижчерозписанобільш детально*):

 ![](code-style.svg)
 <!--

 ### Фігурні дужки

 У більшості JavaScript проєктів фігурні дужки написані у так званому "Єгипетському" стилі з відкриваючою дужкоюна тому ж рядку, що й відповідне ключове слово -- не на новому рядку. Також потрібно додавати пробіл перед відкриваючою дужкою, наприклад:
 У більшості JavaScript проєктів фігурні дужки написані у так званому "Єгипетському" стилі, де відкриваюча дужка знаходиться ненановому рядку, а натому ж, що й відповідне ключове слово. Також потрібно додавати пробіл перед відкриваючою дужкою, наприклад:

 ```js
 if (condition) {
 }
 ```

 Чи потрібно ставити дужки, коли конструкція складається з одного рядка, наприклад `if (condition) doSomething()`?
 Чи потрібно ставити дужки, коли конструкція складаєтьсялишез одного рядка, наприклад `if (condition) doSomething()`?

 Нижче наведені різні варіанти розташування дужок з коментарями, щоб ви змогли самостійно вирішити який варіант є найбільш читабельним.

diff --git a/1-js/03-code-quality/index.md b/1-js/03-code-quality/index.md
 #Code quality
 #Якість коду

 This chapter explains coding practices that we'll use further in the development.
 В цьому розділі пояснюються підходи до написання коду, які будемо використовувати в подальшій розробці.
diff --git a/images.yml b/images.yml
 # 1-js/02-first-steps/04-variables/variable.svg
 variable.svg:
 '"Hello!"':
    text:'"Привіт!"'
  "Hello!":
    text: "Привіт!"
    position: "center"
  message:
 "message":
    text: "Повідомлення"
    position: "center"

 # 1-js/02-first-steps/04-variables/variable-change.svg
 variable-change.svg:
 '"Hello!"':
    text:'"Привіт!"'
  "Hello!":
    text: "Привіт!"
    position: "center"
 '"World!"':
    text:'"Світ!"'
  "World!":
    text: "Світ!"
    position: "center"
  message:
 "message":
    text: "Повідомлення"
    position: "center"

  TheMaster: ''
  Other: ''

 # 1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg
 chrome-open-sources.svg:
  "open sources":
    text: "показати вихідні файли"

 # 1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg
 chrome-sources-breakpoint.svg:
  here's the list: ''
  breakpoints: ''
  "here's the list":
    text: "список всіх точок в цьому файлі"
    position: "right"
  "breakpoints":
    text: "точки зупинки"

 # 1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg
 chrome-sources-debugger-pause.svg:
  '1': ''
  '2': ''
  '3': ''
  jump to the outer function: ''
  watch expressions: ''
  current variables: ''
  "see the outer call details":
    text: "перегляд деталей зовнішнього виклику"
    position: "right"
  "watch expressions":
    text: "перегляд виразів"
    position: "right"
  "current variables":
    text: "поточні змінні"
    position: "right"

 # 1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg
 chrome-sources-debugger-trace-1.svg:
  nested calls: ''
  "nested calls":
    text: "вкладені виклики"

 toolbarButtonGlyphs.svg: {}
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		# Інструменти розробника

		Будь-який код так і тяжіє до помилок. Швидше за все, ви будете робити помилки... Хоча, про що я говорю? Ви точно будете робити помилки, принаймні, якщо ви людина, а неробот [robot](https://uk.wikipedia.org/wiki/Бендер_(Футурама)).
		Будь-який код так і тяжіє до помилок. Швидше за все, ви будете робити помилки... Хоча, про що я говорю? Ви точно будете робити помилки, принаймні, якщо ви людина, а не[робот](https://uk.wikipedia.org/wiki/Бендер_(Футурама)).

		Зазвичай, користувачі не бачать помилок в браузері. Тому, якщо в скрипті щось трапиться на так, ми не побачимо помилки, і не зможемо її виправити.

Expand All		@@ -12,9 +12,9 @@

		## Google Chrome

		Відкрийте сторінку [bug.html](bug.html).
		Для прикладів ми будемо використовувати браузер [Google Chrome](https://www.google.com/intl/uk_ua/chrome/). Інструменти розробника в ньому показуються лише англійською мовою, незалежно від налаштувань браузера.

		На цій сторінці є помилка в JavaScript коді. Вона прихована для звичайних користувачів, тому потрібно відкрити інструменти розробника, щоб її побачити.
		Відкрийте сторінку [bug.html](bug.html). На ній є помилка в JavaScript коді. Вона прихована для звичайних користувачів, тому потрібно відкрити інструменти розробника, щоб її побачити.

		Натисніть клавішу `key:F12` або, якщо у вас Mac, комбінацію клавіш `key:Cmd+Opt+J`.

Expand All		@@ -24,7 +24,7 @@

		![chrome](chrome.png)

		Точний вигляд інструментів розробника може відрізнятися в залежності від вашої версії Chrome. Вони міняються час від часу, але в основному це вікно пивинно бути схожим. Ці інструменти показуються лише англійською мовою, незалежно від мови браузера.
		Точний вигляд інструментів розробника може відрізнятися в залежності від вашої версії Chrome. Вони міняються час від часу, але в основному це вікно пивинно бути схожим.

		- Тут ми можемо побачити червоне повідомлення. У нашому випадку, скрипт має невизначену команду "lalala".
		- З правого боку є посилання на джерело `bug.html:12` з номером рядка, де ця помилка виникла. При натисканні на це посилання, інструмент перейде на вкладку "Source", де відкриє файл і перейде на рядок, в якому трапилася помилка.
Expand All		@@ -47,7 +47,7 @@

		## Safari

		Safari (браузер вMac, не підтримується Windows/Linux)дещо особливий. Спочатку нам потрібно увімкнути меню "Розробка".
		Safari (стандартнийбраузер вmacOS, не підтримується Windows/Linux)має свої нюанси. Спочатку нам потрібно увімкнути меню "Розробка".

		Відкрийте Параметри і перейдіть на панель "Експертні". Знизу буде галочка, яку необхідно вибрати:

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		function hello(name) {
		let phrase = `Hello, ${name}!`;
		let phrase = `Привіт, ${name}!`;

		say(phrase);
		}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,10 +4,10 @@

		<script src="hello.js"></script>

		An example for debugging.
		Приклад для налагодження.

		<script>
		hello("John");
		hello("Олександр");
		</script>

		</body>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,11 +2,11 @@

		Наш код повинен бути настільки зрозумілим та читабельним, наскільки це можливо.

		Насправді,це є мистецтвомпрограмування-- брати складну задачу і писати код, який одночасно і вирішує задачу, і залишається зрозумілим людині. Саме тут хороший стиль коду стає у нагоді.
		Насправді,мистецтвопрограмування— це брати складну задачу і писати код, який одночасно і вирішує задачу, і залишається зрозумілим людині. Саме тут хороший стиль коду стає у нагоді.

		## Синтаксис

		Деякі запропоновані правила наведені унаступній шпаргалці (дивитисьнижче більш детально):
		Деякі запропоновані правила наведені уцій шпаргалці (нижчерозписанобільш детально):

		![](code-style.svg)
		<!--
Expand DownExpand Up		@@ -42,7 +42,7 @@ if (n < 0) {

		### Фігурні дужки

		У більшості JavaScript проєктів фігурні дужки написані у так званому "Єгипетському" стилі з відкриваючою дужкоюна тому ж рядку, що й відповідне ключове слово -- не на новому рядку. Також потрібно додавати пробіл перед відкриваючою дужкою, наприклад:
		У більшості JavaScript проєктів фігурні дужки написані у так званому "Єгипетському" стилі, де відкриваюча дужка знаходиться ненановому рядку, а натому ж, що й відповідне ключове слово. Також потрібно додавати пробіл перед відкриваючою дужкою, наприклад:

		```js
		if (condition) {
Expand All		@@ -52,7 +52,7 @@ if (condition) {
		}
		```

		Чи потрібно ставити дужки, коли конструкція складається з одного рядка, наприклад `if (condition) doSomething()`?
		Чи потрібно ставити дужки, коли конструкція складаєтьсялишез одного рядка, наприклад `if (condition) doSomething()`?

		Нижче наведені різні варіанти розташування дужок з коментарями, щоб ви змогли самостійно вирішити який варіант є найбільш читабельним.

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,3 @@
		#Code quality
		#Якість коду

		This chapter explains coding practices that we'll use further in the development.
		В цьому розділі пояснюються підходи до написання коду, які будемо використовувати в подальшій розробці.
Original file line number	Diff line number	Diff line change
		@@ -1,21 +1,21 @@
		# 1-js/02-first-steps/04-variables/variable.svg
		variable.svg:
		'"Hello!"':
		text:'"Привіт!"'
		"Hello!":
		text: "Привіт!"
		position: "center"
		message:
		"message":
		text: "Повідомлення"
		position: "center"

		# 1-js/02-first-steps/04-variables/variable-change.svg
		variable-change.svg:
		'"Hello!"':
		text:'"Привіт!"'
		"Hello!":
		text: "Привіт!"
		position: "center"
		'"World!"':
		text:'"Світ!"'
		"World!":
		text: "Світ!"
		position: "center"
		message:
		"message":
		text: "Повідомлення"
		position: "center"

Expand DownExpand Up		@@ -43,20 +43,35 @@ ifelse_task.svg:
		TheMaster: ''
		Other: ''

		# 1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg
		chrome-open-sources.svg:
		"open sources":
		text: "показати вихідні файли"

		# 1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg
		chrome-sources-breakpoint.svg:
		here's the list: ''
		breakpoints: ''
		"here's the list":
		text: "список всіх точок в цьому файлі"
		position: "right"
		"breakpoints":
		text: "точки зупинки"

		# 1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg
		chrome-sources-debugger-pause.svg:
		'1': ''
		'2': ''
		'3': ''
		jump to the outer function: ''
		watch expressions: ''
		current variables: ''
		"see the outer call details":
		text: "перегляд деталей зовнішнього виклику"
		position: "right"
		"watch expressions":
		text: "перегляд виразів"
		position: "right"
		"current variables":
		text: "поточні змінні"
		position: "right"

		# 1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg
		chrome-sources-debugger-trace-1.svg:
		nested calls: ''
		"nested calls":
		text: "вкладені виклики"

		toolbarButtonGlyphs.svg: {}

Expand Down