update next-tick article

content/2.index.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 head:
-  title: Alpine
+  title: Michał Sukiennik's Career
 description: An open source blog theme powered by Nuxt.
 title: About
 ---

content/articles/1.next-tick.md

@@ -2,10 +2,9 @@
 cover: /articles/next-tick/article-next-tick-poster.png
 author:
   name: Michał Sukiennik
-  avatarUrl: https://pbs.twimg.com/profile_images/1042510623962275840/1Iw_Mvud_400x400.jpg
-  link: https://twitter.com/atinux
-date: 2024-01-31T13:11:39.690Z
-description: Do we need nextTick? When to use it and how does it work?
+  link: https://www.linkedin.com/in/micha%C5%82sukiennik/
+date: 2023-11-24T13:11:39.690Z
+description: Changing Vue component data does not immediately change the DOM. Rather, Vue updates the DOM asynchronously. You can catch the moment when Vue updates the DOM using the nextTick function.
 layout: article
 ---
 
@@ -17,15 +16,15 @@ Changing Vue component data (_props_ or _state_) does not immediately change the
 
 ## Flow
 
-The `nextTick` occurs after the view has been updated, i.e. some state has been changed and replaced in the DOM, but before the re-render - reloading the UI. **It is not yet visible but already updated.**
+The `nextTick` occurs after the state has been updated, i.e., some `show` flag has been changed and is prepared to be presented in the DOM, but before the re-render - reloading the UI. **It is not yet visible but has already been updated**.
 
 ![graph.png](/articles/next-tick/article-next-tick-graph.png)
 
 ## `nextTick()`
 
-As component data changes, the DOM is updated **asynchronously**. Vue collects multiple updates to the virtual DOM from all components, and then creates a single batch of changes to update the DOM with it.
+As component data changes, the DOM is **updated asynchronously**. Vue collects multiple updates to the virtual DOM from all components and then creates a single batch of changes to update the DOM with them.
 
-Updating the DOM in a single batch is more efficient than performing many small updates.
+**Updating the DOM in a single batch is more efficient than performing many small updates**.
 
 For example, consider a component that toggles the display of an element:
 
@@ -51,7 +50,7 @@ const handleClick = () => {
 
 Clicking the "Insert/Remove" button changes the `show` flag, which toggles the display of the `<div id="content">` element using the `v-if="show"` directive.
 
-Looking at `handleClick`, right after mutating the `show.value = !show.value` data, the implemented DOM data does not match the `show` value. If `show` is true, then content is `null`: which means that the DOM is not synchronized with the component data.
+Looking at `handleClick`, right after mutating the `show.value = !show.value` data, the implemented DOM data does not match the `show` value. If `show` is true, then content is `null`, which means that the DOM is not synchronized with the component data.
 
 If you want to catch the moment when the DOM has just been updated, you need to use the special function `nextTick(callback)`. It performs a callback after new data reaches the DOM.
 
@@ -85,7 +84,7 @@ In addition, `nextTick(callback)` performs a callback when all updates to the ch
 
 ## `nextTick()` with `async/await`
 
-If nextTick() is called without arguments:
+If `nextTick()` is called without arguments:
 
 ```vue
 <script setup>
@@ -114,11 +113,16 @@ This helps take advantage of the more readable `async/await` syntax.
 
 For example, we make the previous component more readable by capturing the DOM update using the async/await syntax:
 
-`const handleClick = async () => {...}` has been marked as an asynchronous function.
-
-When the Insert/Remove button is clicked, the `show` value changes.
+```
+const handleClick = async () => {...}
+``` 
+has been marked as an asynchronous function. When the Insert/Remove button is clicked, the `show` value changes.
 
-The `await nextTick()` waits until the changes reach the DOM - update. Finally, `console.log(content)` logs the actual contents of the ref.
+The `await nextTick()` waits until the changes reach the DOM update. Finally,
+```
+console.log(content)
+``` 
+logs the actual contents of the ref.
 
 
 ## Summary