chore: apply suggestions from code review

Co-authored-by: Stanislav <[email protected]>

Author: AdriandeCita

2-ui/99-ui-misc/01-mutation-observer/article.md

@@ -49,7 +49,7 @@ observer.observe(node, config);
 Наприклад, ось елемент `<div>` із атрибутом `contentEditable`. Цей атрибут дає нам змогу переміщувати фокус на нього і редагувати.
 
 ```html run
-<div contentEditable id="elem">Натисни і <b>редагуй</b>, Будь ласка</div>
+<div contentEditable id="elem">Натисни і <b>редагуй</b>, будь ласка</div>
 
 <script>
 let observer = new MutationObserver(mutationRecords => {
@@ -76,7 +76,7 @@ mutationRecords = [{
 }];
 ```
 
-Якщо ми виконаємо складніші операції редагування, наприклад видалимо весь `<b>редагуй</b>`, подія мутації можливо міститиме декілька записів змін:
+Якщо ми виконаємо складніші операції редагування, наприклад видалимо `<b>редагуй</b>`, подія мутації можливо міститиме декілька записів змін:
 
 ```js
 mutationRecords = [{
@@ -115,7 +115,7 @@ mutationRecords = [{
 
 Також трапляються ситуації, коли `MutationObserver` є корисним з точки зору архітектури.
 
-Припустімо, ми робимо вебсайт про програмування. Природно, статті та інші матеріали можуть містити фрагменти програмного коду.
+Припустимо, ми робимо вебсайт про програмування. Природньо, статті та інші матеріали можуть містити фрагменти програмного коду.
 
 Такий фрагмент всередині HTML-розмітки виглядає так:
 
@@ -128,9 +128,9 @@ mutationRecords = [{
 ...
 ```
 
-Для кращої прочитності і, в той же час для естетичності, ми будемо використовувати JavaScript-бібліотеку для підсвітки синтаксису на нашому вебсайті, на кшталт [Prism.js](https://prismjs.com/). Для отримання синтаксичної підсвітки за допомогою Prism для наведеного вище фрагмента, викликається `Prism.highlightElem(pre)`, який вивчає вміст таких елементів `pre`, та додає в них особливі теги і стилі для кольорової підсвітки синтаксису, подібно до того, що ви можете побачитип в прикладах тут, на цій сторінці.
+Для кращої прочитності і, в той же час для естетичності, ми будемо використовувати JavaScript-бібліотеку для підсвітки синтаксису на нашому вебсайті, на кшталт [Prism.js](https://prismjs.com/). Для отримання синтаксичної підсвітки за допомогою Prism для наведеного вище фрагмента, викликається `Prism.highlightElem(pre)`, який перевіряє вміст таких елементів `pre`, та додає в них особливі теги і стилі для кольорової підсвітки синтаксису, подібно до того, що ви можете побачити в прикладах тут, на цій сторінці.
 
-Коли саме нам слід запускати такий метод для виконання підсвітки? Що ж, ми можемо це робити на подію `DOMContentLoaded`, або поставити скрипт внизу сторінки. Як тільки наша DOM готова, ми можемо виконати пошук елементів `pre[class*="language"]` та викликати на них `Prism.highlightElem`:
+Коли саме нам слід запускати такий метод для додавання підсвітки? Що ж, ми можемо це робити на подію `DOMContentLoaded`, або поставити скрипт внизу сторінки. Як тільки наша DOM готова, ми можемо виконати пошук елементів `pre[class*="language"]` та викликати на них `Prism.highlightElem`:
 
 ```js
 // підсвітити всі фрагменти коду на сторінці
@@ -146,7 +146,7 @@ let article = /* отримаємо новий вміст із сервера */
 articleElem.innerHTML = article;
 ```
 
-HTML-вміст нової статті `article` може містити фрагменти коду. Нам потрібно викликати на них `Prism.highlightElem`, інакше вони підсвітки на них не буде.
+HTML-вміст нової статті `article` може містити фрагменти коду. Нам потрібно викликати на них `Prism.highlightElem`, інакше підсвітки на них не буде.
 
 **Коли і де нам слід викликати `Prism.highlightElem` для динамічно завантаженої статті ?**
 
@@ -162,7 +162,7 @@ snippets.forEach(Prism.highlightElem);
 */!*
 ```
 
-...Але, уявімо, що у нас є багато місць в коді, де ми завантажуємо наш вміст: статті, опитники, форумні дописи тощо. Чи повинні ми всюди вставити виклик підсвітки, аби виконати підсвітку синтаксису коду всередині вмісту після завантаження? Це не надто зручно.
+...Але, уявімо, що у нас є багато місць в коді, де ми завантажуємо наш вміст: статті, опитники, форумні дописи тощо. Чи повинні ми всюди вставляти виклик підсвітки, аби виконати підсвітку синтаксису коду всередині вмісту після завантаження? Це не надто зручно.
 
 І що, якщо вміст було завантажено стороннім модулем? Наприклад, якщо ми маємо форум, написаний кимось іншим, який динамічно завантажує вміст, і нам би хотілося додати до нього підсвітку синтаксису. Ніхто не любить правити сторонні скрипти.
 
@@ -221,7 +221,7 @@ let demoElem = document.getElementById('highlight-demo');
 // динамічно вставляє вміст із фрагментами коду
 demoElem.innerHTML = `Фрагмент коду -- нижче:
   <pre class="language-javascript"><code> let hello = "world!"; </code></pre>
-  <div>Іще один:</div>
+  <div>І ще один:</div>
   <div>
     <pre class="language-css"><code>.class { margin: 5px; } </code></pre>
   </div>
@@ -238,7 +238,7 @@ demoElem.innerHTML = `Фрагмент коду -- нижче:
 
 Коли ми припиняємо спостереження, може трапитися ситуація, що деякі зміни ще не були оброблені спостерігачем. В таких випадках, ми вживаємо
 
-- `observer.takeRecords()` -- отримує перелік необроблених записів мутацій - тих, що трапилися, проте функція зворотного виклику їх ще не опрацювала.
+- `observer.takeRecords()` -- отримує перелік необроблених записів мутацій -- тих, що трапилися, проте функція зворотного виклику їх ще не опрацювала.
 
 Ці методи можна застосовувати разом, як це показано далі:
 
@@ -259,7 +259,7 @@ observer.disconnect();
 ```
 
 ```smart header="Взаємодія зі збиранням сміття"
-Всередині спостерігачів використовуються слабкі посилання на вузли. Це означає, що якщо вузол видаляється із DOM, і стає недоступним - збирач сміття зможе його прибрати.
+Всередині спостерігачів використовуються слабкі посилання на вузли. Це означає, що якщо вузол видаляється із DOM, і стає недоступним -- збирач сміття зможе його прибрати.
 
 Сам факт спостереження за вузлом DOM не перешкоджає процесу збирання сміття.
 ```