From 51e5aa9b2c073e050faee64f932551560d332c00 Mon Sep 17 00:00:00 2001
From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com>
Date: Sun, 30 Aug 2020 08:04:52 -0300
Subject: [PATCH 01/10] Typos

---
 .../01-mutation-observer/article.md           | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 6a458fa0..a1602f33 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -1,7 +1,7 @@
 
 # Mutation observer
 
-`MutationObserver` is a built-in object that observes a DOM element and fires a callback in case of changes.
+`MutationObserver` is a built-in object that observes a DOM element and fires a callback if there are changes.
 
 We'll first take a look at the syntax, and then explore a real-world use case, to see where such thing may be useful.
 
@@ -128,16 +128,16 @@ Such snippet in an HTML markup looks like this:
 ...
 ```
 
-Also we'll use a JavaScript highlighting library on our site, e.g. [Prism.js](https://prismjs.com/). A call to `Prism.highlightElem(pre)` examines the contents of such `pre` elements and adds into them special tags and styles for colored syntax highlighting, similar to what you see in examples here, at this page.
+Also we'll use a JavaScript highlighting library on our site, e.g. [Prism.js](https://prismjs.com/). A call to `Prism.highlightElem(pre)` examines the contents of such `pre` elements and adds into them special tags and styles for colored syntax highlighting, similar to what you see in examples here, on this page.
 
-When exactly to run that highlighting method? We can do it on `DOMContentLoaded` event, or at the bottom of the page. At that moment we have our DOM ready, can search for elements `pre[class*="language"]` and call `Prism.highlightElem` on them:
+When exactly should we run that highlighting method? We can do it on `DOMContentLoaded` event, or at the bottom of the page. At that moment we have our DOM ready, we can search for elements `pre[class*="language"]` and call `Prism.highlightElem` on them:
 
 ```js
 // highlight all code snippets on the page
 document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem);
 ```
 
-Everything's simple so far, right? There are `<pre>` code snippets in HTML, we highlight them.
+Everything's simple so far, right? Where there are `<pre>` code snippets in HTML, we highlight them.
 
 Now let's go on. Let's say we're going to dynamically fetch materials from a server. We'll study methods for that [later in the tutorial](info:fetch). For now it only matters that we fetch an HTML article from a webserver and display it on demand:
 
@@ -162,13 +162,13 @@ snippets.forEach(Prism.highlightElem);
 */!*
 ```
 
-...But imagine, we have many places in the code where we load contents: articles, quizzes, forum posts. Do we need to put the highlighting call everywhere? That's not very convenient, and also easy to forget.
+...But imagine, we have many places in the code where we load content: articles, quizzes, forum posts. Do we need to put the highlighting call everywhere? That's not very convenient, and also easy to forget.
 
-And what if the content is loaded by a third-party module? E.g. we have a forum written by someone else, that loads contents dynamically, and we'd like to add syntax highlighting to it. No one likes to patch third-party scripts.
+And what if the content is loaded by a third-party module? E.g. we have a forum written by someone else, that loads content dynamically, and we'd like to add syntax highlighting to it. No one likes patching third-party scripts.
 
 Luckily, there's another option.
 
-We can use `MutationObserver` to automatically detect when code snippets are inserted in the page and highlight them.
+We can use `MutationObserver` to automatically detect when code snippets are inserted into the page and highlight them.
 
 So we'll handle the highlighting functionality in one place, relieving us from the need to integrate it.
 
@@ -236,9 +236,9 @@ There's a method to stop observing the node:
 
 - `observer.disconnect()` -- stops the observation.
 
-When we stop the observing, it might be possible that some changes were not processed by the observer yet.
+When we stop the observing, it might be possible that some changes were not yet processed by the observer.
 
-- `observer.takeRecords()` -- gets a list of unprocessed mutation records, those that happened, but the callback did not handle them.
+- `observer.takeRecords()` -- gets a list of unprocessed mutation records, those that happened, but the callback has not handled them.
 
 These methods can be used together, like this:
 
@@ -252,14 +252,14 @@ let mutationRecords = observer.takeRecords();
 ```
 
 ```smart header="Garbage collection interaction"
-Observers use weak references to nodes internally. That is: if a node is removed from DOM, and becomes unreachable, then it becomes garbage collected.
+Observers use weak references to nodes internally. That is: if a node is removed from the DOM, and becomes unreachable, then it can be garbage collected.
 
 The mere fact that a DOM node is observed doesn't prevent the garbage collection.
 ```
 
 ## Summary  
 
-`MutationObserver` can react on changes in DOM: attributes, added/removed elements, text content.
+`MutationObserver` can react to changes in DOM: attributes, added/removed elements, text content.
 
 We can use it to track changes introduced by other parts of our code, as well as to integrate with third-party scripts.
 

From 4830a26deb4648bebe91f13e186467cd0a7b4343 Mon Sep 17 00:00:00 2001
From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com>
Date: Tue, 1 Sep 2020 08:53:56 -0300
Subject: [PATCH 02/10] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index a1602f33..1e9be8fb 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -1,7 +1,7 @@
 
 # Mutation observer
 
-`MutationObserver` is a built-in object that observes a DOM element and fires a callback if there are changes.
+`MutationObserver` is a built-in object that observes a DOM element and fires a callback when it detects a change.
 
 We'll first take a look at the syntax, and then explore a real-world use case, to see where such thing may be useful.
 

From d92984129cbde666e1d4312232e48cd0e6e66209 Mon Sep 17 00:00:00 2001
From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com>
Date: Tue, 1 Sep 2020 08:55:28 -0300
Subject: [PATCH 03/10] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 1e9be8fb..8b780cce 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -128,7 +128,7 @@ Such snippet in an HTML markup looks like this:
 ...
 ```
 
-Also we'll use a JavaScript highlighting library on our site, e.g. [Prism.js](https://prismjs.com/). A call to `Prism.highlightElem(pre)` examines the contents of such `pre` elements and adds into them special tags and styles for colored syntax highlighting, similar to what you see in examples here, on this page.
+For better readability and at the same time, to beautify it, we'll be using a JavaScript syntax highlighting library on our site, like [Prism.js](https://prismjs.com/). To get syntax highlighting for above snippet in Prism, `Prism.highlightElem(pre)` is called, which examines the contents of such `pre` elements and adds special tags and styles for colored syntax highlighting into those elements, similar to what you see in examples here, on this page.
 
 When exactly should we run that highlighting method? We can do it on `DOMContentLoaded` event, or at the bottom of the page. At that moment we have our DOM ready, we can search for elements `pre[class*="language"]` and call `Prism.highlightElem` on them:
 

From 2881c97d727705902b2a31b45252e2ef36b24112 Mon Sep 17 00:00:00 2001
From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com>
Date: Tue, 1 Sep 2020 08:56:29 -0300
Subject: [PATCH 04/10] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 8b780cce..1c7f2c4a 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -130,7 +130,7 @@ Such snippet in an HTML markup looks like this:
 
 For better readability and at the same time, to beautify it, we'll be using a JavaScript syntax highlighting library on our site, like [Prism.js](https://prismjs.com/). To get syntax highlighting for above snippet in Prism, `Prism.highlightElem(pre)` is called, which examines the contents of such `pre` elements and adds special tags and styles for colored syntax highlighting into those elements, similar to what you see in examples here, on this page.
 
-When exactly should we run that highlighting method? We can do it on `DOMContentLoaded` event, or at the bottom of the page. At that moment we have our DOM ready, we can search for elements `pre[class*="language"]` and call `Prism.highlightElem` on them:
+When exactly should we run that highlighting method? Well, we can do it on `DOMContentLoaded` event, or put the script at the bottom of the page. The moment our DOM is ready, we can search for elements `pre[class*="language"]` and call `Prism.highlightElem` on them:
 
 ```js
 // highlight all code snippets on the page

From 00178008b23115b478cbda1ffc7b552ea3bc2eda Mon Sep 17 00:00:00 2001
From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com>
Date: Tue, 1 Sep 2020 08:59:20 -0300
Subject: [PATCH 05/10] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 1c7f2c4a..0dce27f5 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -162,7 +162,7 @@ snippets.forEach(Prism.highlightElem);
 */!*
 ```
 
-...But imagine, we have many places in the code where we load content: articles, quizzes, forum posts. Do we need to put the highlighting call everywhere? That's not very convenient, and also easy to forget.
+...But, imagine if we have many places in the code where we load our content - articles, quizzes, forum posts, etc. Do we need to put the highlighting call everywhere? That's not very convenient, right? It is also easy to forget where we put them and therefore, making it harder if we want to make some changes to the code later.
 
 And what if the content is loaded by a third-party module? E.g. we have a forum written by someone else, that loads content dynamically, and we'd like to add syntax highlighting to it. No one likes patching third-party scripts.
 

From 751f78a06c475272cb5232d67f8c55eea11ff135 Mon Sep 17 00:00:00 2001
From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com>
Date: Tue, 1 Sep 2020 08:59:54 -0300
Subject: [PATCH 06/10] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 0dce27f5..d2a8eac0 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -164,7 +164,7 @@ snippets.forEach(Prism.highlightElem);
 
 ...But, imagine if we have many places in the code where we load our content - articles, quizzes, forum posts, etc. Do we need to put the highlighting call everywhere? That's not very convenient, right? It is also easy to forget where we put them and therefore, making it harder if we want to make some changes to the code later.
 
-And what if the content is loaded by a third-party module? E.g. we have a forum written by someone else, that loads content dynamically, and we'd like to add syntax highlighting to it. No one likes patching third-party scripts.
+And what if the content is loaded by a third-party module? For example, we have a forum written by someone else, that loads content dynamically, and we'd like to add syntax highlighting to it. No one likes patching third-party scripts.
 
 Luckily, there's another option.
 

From 2b5502a2c8b1c59390ff3be5b769f5cb6eeea142 Mon Sep 17 00:00:00 2001
From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com>
Date: Tue, 1 Sep 2020 09:02:40 -0300
Subject: [PATCH 07/10] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index d2a8eac0..4ec1cd4a 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -236,7 +236,7 @@ There's a method to stop observing the node:
 
 - `observer.disconnect()` -- stops the observation.
 
-When we stop the observing, it might be possible that some changes were not yet processed by the observer.
+When we stop the observing, it might be possible that some changes were not yet processed by the observer. In such cases, we use
 
 - `observer.takeRecords()` -- gets a list of unprocessed mutation records, those that happened, but the callback has not handled them.
 

From 8d71d86c708e823fd29a3bd1f07098de71b4ddba Mon Sep 17 00:00:00 2001
From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com>
Date: Tue, 1 Sep 2020 09:03:03 -0300
Subject: [PATCH 08/10] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index 4ec1cd4a..abfe5fa7 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -238,7 +238,7 @@ There's a method to stop observing the node:
 
 When we stop the observing, it might be possible that some changes were not yet processed by the observer. In such cases, we use
 
-- `observer.takeRecords()` -- gets a list of unprocessed mutation records, those that happened, but the callback has not handled them.
+- `observer.takeRecords()` -- gets a list of unprocessed mutation records - those that happened, but the callback has not handled them.
 
 These methods can be used together, like this:
 

From be28fe248a8281c35b5f4cd1dc2df0eddcb4e4a1 Mon Sep 17 00:00:00 2001
From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com>
Date: Tue, 1 Sep 2020 09:06:58 -0300
Subject: [PATCH 09/10] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index abfe5fa7..a7d19469 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -252,7 +252,7 @@ let mutationRecords = observer.takeRecords();
 ```
 
 ```smart header="Garbage collection interaction"
-Observers use weak references to nodes internally. That is: if a node is removed from the DOM, and becomes unreachable, then it can be garbage collected.
+Observers use weak references to nodes internally. That is, if a node is removed from the DOM, and becomes unreachable, then it can be garbage collected.
 
 The mere fact that a DOM node is observed doesn't prevent the garbage collection.
 ```

From cd3fb86f9cb230a23dfba31dc09072bf4333fc7f Mon Sep 17 00:00:00 2001
From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com>
Date: Tue, 1 Sep 2020 11:30:49 -0300
Subject: [PATCH 10/10] Update 2-ui/99-ui-misc/01-mutation-observer/article.md

Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com>
---
 2-ui/99-ui-misc/01-mutation-observer/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md
index a7d19469..bc471bae 100644
--- a/2-ui/99-ui-misc/01-mutation-observer/article.md
+++ b/2-ui/99-ui-misc/01-mutation-observer/article.md
@@ -259,7 +259,7 @@ The mere fact that a DOM node is observed doesn't prevent the garbage collection
 
 ## Summary  
 
-`MutationObserver` can react to changes in DOM: attributes, added/removed elements, text content.
+`MutationObserver` can react to changes in DOM - attributes, text content and adding/removing elements.
 
 We can use it to track changes introduced by other parts of our code, as well as to integrate with third-party scripts.