+
diff --git a/2-ui/5-loading/01-onload-ondomcontentloaded/readystate.view/index.html b/2-ui/5-loading/01-onload-ondomcontentloaded/readystate.view/index.html
index a4685a716..27df70939 100644
--- a/2-ui/5-loading/01-onload-ondomcontentloaded/readystate.view/index.html
+++ b/2-ui/5-loading/01-onload-ondomcontentloaded/readystate.view/index.html
@@ -9,8 +9,8 @@
[20] readyState:interactive
[21] DOMContentLoaded
[30] iframe onload
- [40] readyState:complete
[40] img onload
+ [40] readyState:complete
[40] window onload
-->
diff --git a/2-ui/99-ui-misc/02-selection-range/article.md b/2-ui/99-ui-misc/02-selection-range/article.md
index c5ab3fbdd..09a20bc67 100644
--- a/2-ui/99-ui-misc/02-selection-range/article.md
+++ b/2-ui/99-ui-misc/02-selection-range/article.md
@@ -217,7 +217,7 @@ The range object that we created in the example above has following properties:
## Range selection methods
-There are many convenience methods to manipulate ranges.
+There are many convenient methods to manipulate ranges.
We've already seen `setStart` and `setEnd`, here are other similar methods.
@@ -354,7 +354,7 @@ The main selection properties are:
```smart header="Selection end/start vs Range"
-There's an important differences of a selection anchor/focus compared with a `Range` start/end.
+There's an important difference between a selection anchor/focus compared with a `Range` start/end.
As we know, `Range` objects always have their start before the end.
@@ -408,7 +408,7 @@ From – To
There are two approaches to copying the selected content:
1. We can use `document.getSelection().toString()` to get it as text.
-2. Otherwise, to copy the full DOM, e.g. if we need to keep formatting, we can get the underlying ranges with `getRangesAt(...)`. A `Range` object, in turn, has `cloneContents()` method that clones its content and returns as `DocumentFragment` object, that we can insert elsewhere.
+2. Otherwise, to copy the full DOM, e.g. if we need to keep formatting, we can get the underlying ranges with `getRangeAt(...)`. A `Range` object, in turn, has `cloneContents()` method that clones its content and returns as `DocumentFragment` object, that we can insert elsewhere.
Here's the demo of copying the selected content both as text and as DOM nodes:
@@ -438,7 +438,7 @@ As text:
## Selection methods
-We can work with the selection by addding/removing ranges:
+We can work with the selection by adding/removing ranges:
- `getRangeAt(i)` -- get i-th range, starting from `0`. In all browsers except Firefox, only `0` is used.
- `addRange(range)` -- add `range` to selection. All browsers except Firefox ignore the call, if the selection already has an associated range.
diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg b/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg
index 9ebcffaac..a97d1b47a 100644
--- a/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg
+++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg b/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg
index 088c71c20..2a8f9aca3 100644
--- a/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg
+++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg
index f13c6d74a..32843436d 100644
--- a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg
+++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg
index 4bf5b00b0..859f755ce 100644
--- a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg
+++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/02-selection-range/selection-direction-backward.svg b/2-ui/99-ui-misc/02-selection-range/selection-direction-backward.svg
index 6399f9d5e..85615d38f 100644
--- a/2-ui/99-ui-misc/02-selection-range/selection-direction-backward.svg
+++ b/2-ui/99-ui-misc/02-selection-range/selection-direction-backward.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/02-selection-range/selection-direction-forward.svg b/2-ui/99-ui-misc/02-selection-range/selection-direction-forward.svg
index 03c6fc5c6..511b00a26 100644
--- a/2-ui/99-ui-misc/02-selection-range/selection-direction-forward.svg
+++ b/2-ui/99-ui-misc/02-selection-range/selection-direction-forward.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/02-selection-range/selection-firefox.svg b/2-ui/99-ui-misc/02-selection-range/selection-firefox.svg
index 050852d3d..aa7ff1eb7 100644
--- a/2-ui/99-ui-misc/02-selection-range/selection-firefox.svg
+++ b/2-ui/99-ui-misc/02-selection-range/selection-firefox.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/solution.md b/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/solution.md
new file mode 100644
index 000000000..2911b76cf
--- /dev/null
+++ b/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/solution.md
@@ -0,0 +1,50 @@
+The console output is: 1 7 3 5 2 6 4.
+
+The task is quite simple, we just need to know how microtask and macrotask queues work.
+
+Let's see what's going on, step by step.
+
+```js
+console.log(1);
+// The first line executes immediately, it outputs `1`.
+// Macrotask and microtask queues are empty, as of now.
+
+setTimeout(() => console.log(2));
+// `setTimeout` appends the callback to the macrotask queue.
+// - macrotask queue content:
+// `console.log(2)`
+
+Promise.resolve().then(() => console.log(3));
+// The callback is appended to the microtask queue.
+// - microtask queue content:
+// `console.log(3)`
+
+Promise.resolve().then(() => setTimeout(() => console.log(4)));
+// The callback with `setTimeout(...4)` is appended to microtasks
+// - microtask queue content:
+// `console.log(3); setTimeout(...4)`
+
+Promise.resolve().then(() => console.log(5));
+// The callback is appended to the microtask queue
+// - microtask queue content:
+// `console.log(3); setTimeout(...4); console.log(5)`
+
+setTimeout(() => console.log(6));
+// `setTimeout` appends the callback to macrotasks
+// - macrotask queue content:
+// `console.log(2); console.log(6)`
+
+console.log(7);
+// Outputs 7 immediately.
+```
+
+To summarize,
+
+1. Numbers `1` and `7` show up immediately, because simple `console.log` calls don't use any queues.
+2. Then, after the main code flow is finished, the microtask queue runs.
+ - It has commands: `console.log(3); setTimeout(...4); console.log(5)`.
+ - Numbers `3` and `5` show up, while `setTimeout(() => console.log(4))` adds the `console.log(4)` call to the end of the macrotask queue.
+ - The macrotask queue is now: `console.log(2); console.log(6); console.log(4)`.
+3. After the microtask queue becomes empty, the macrotask queue executes. It outputs `2`, `6`, `4`.
+
+Finally, we have the output: `1 7 3 5 2 6 4`.
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/task.md b/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/task.md
new file mode 100644
index 000000000..ad406b3be
--- /dev/null
+++ b/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/task.md
@@ -0,0 +1,21 @@
+importance: 5
+
+---
+
+# What will be the output of this code?
+
+```js
+console.log(1);
+
+setTimeout(() => console.log(2));
+
+Promise.resolve().then(() => console.log(3));
+
+Promise.resolve().then(() => setTimeout(() => console.log(4)));
+
+Promise.resolve().then(() => console.log(5));
+
+setTimeout(() => console.log(6));
+
+console.log(7);
+```
diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 3ea0c2c57..f33188491 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -17,7 +17,7 @@ The general algorithm of the engine:
- execute them, starting with the oldest task.
2. Sleep until a task appears, then go to 1.
-That's a formalization for what we see when browsing a page. The JavaScript engine does nothing most of the time, it only runs if a script/handler/event activates.
+That's a formalization of what we see when browsing a page. The JavaScript engine does nothing most of the time, it only runs if a script/handler/event activates.
Examples of tasks:
@@ -30,19 +30,19 @@ Tasks are set -- the engine handles them -- then waits for more tasks (while sle
It may happen that a task comes while the engine is busy, then it's enqueued.
-The tasks form a queue, so-called "macrotask queue" (v8 term):
+The tasks form a queue, the so-called "macrotask queue" ([v8](https://v8.dev/) term):
-For instance, while the engine is busy executing a `script`, a user may move their mouse causing `mousemove`, and `setTimeout` may be due and so on, these tasks form a queue, as illustrated on the picture above.
+For instance, while the engine is busy executing a `script`, a user may move their mouse causing `mousemove`, and `setTimeout` may be due and so on, these tasks form a queue, as illustrated in the picture above.
-Tasks from the queue are processed on "first come – first served" basis. When the engine browser is done with the `script`, it handles `mousemove` event, then `setTimeout` handler, and so on.
+Tasks from the queue are processed on a "first come – first served" basis. When the engine browser is done with the `script`, it handles `mousemove` event, then `setTimeout` handler, and so on.
So far, quite simple, right?
Two more details:
1. Rendering never happens while the engine executes a task. It doesn't matter if the task takes a long time. Changes to the DOM are painted only after the task is complete.
-2. If a task takes too long, the browser can't do other tasks, such as processing user events. So after a time, it raises an alert like "Page Unresponsive", suggesting killing the task with the whole page. That happens when there are a lot of complex calculations or a programming error leading to an infinite loop.
+2. If a task takes too long, the browser can't do other tasks, such as processing user events. So after some time, it raises an alert like "Page Unresponsive", suggesting killing the task with the whole page. That happens when there are a lot of complex calculations or a programming error leading to an infinite loop.
That was the theory. Now let's see how we can apply that knowledge.
@@ -54,7 +54,7 @@ For example, syntax-highlighting (used to colorize code examples on this page) i
While the engine is busy with syntax highlighting, it can't do other DOM-related stuff, process user events, etc. It may even cause the browser to "hiccup" or even "hang" for a bit, which is unacceptable.
-We can avoid problems by splitting the big task into pieces. Highlight first 100 lines, then schedule `setTimeout` (with zero-delay) for the next 100 lines, and so on.
+We can avoid problems by splitting the big task into pieces. Highlight the first 100 lines, then schedule `setTimeout` (with zero-delay) for the next 100 lines, and so on.
To demonstrate this approach, for the sake of simplicity, instead of text-highlighting, let's take a function that counts from `1` to `1000000000`.
diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md
index d32715f87..f2c87d1e0 100644
--- a/3-frames-and-windows/01-popup-windows/article.md
+++ b/3-frames-and-windows/01-popup-windows/article.md
@@ -38,26 +38,6 @@ button.onclick = () => {
This way users are somewhat protected from unwanted popups, but the functionality is not disabled totally.
-What if the popup opens from `onclick`, but after `setTimeout`? That's a bit tricky.
-
-Try this code:
-
-```js run
-// open after 3 seconds
-setTimeout(() => window.open('http://google.com'), 3000);
-```
-
-The popup opens in Chrome, but gets blocked in Firefox.
-
-...If we decrease the delay, the popup works in Firefox too:
-
-```js run
-// open after 1 seconds
-setTimeout(() => window.open('http://google.com'), 1000);
-```
-
-The difference is that Firefox treats a timeout of 2000ms or less are acceptable, but after it -- removes the "trust", assuming that now it's "outside of the user action". So the first one is blocked, and the second one is not.
-
## window.open
The syntax to open a popup is: `window.open(url, name, params)`:
@@ -87,7 +67,7 @@ Settings for `params`:
There is also a number of less supported browser-specific features, which are usually not used. Check window.open in MDN for examples.
-## Example: a minimalistic window
+## Example: a minimalistic window
Let's open a window with minimal set of features, just to see which of them browser allows to disable:
@@ -120,7 +100,7 @@ Rules for omitted settings:
## Accessing popup from window
-The `open` call returns a reference to the new window. It can be used to manipulate it's properties, change location and even more.
+The `open` call returns a reference to the new window. It can be used to manipulate its properties, change location and even more.
In this example, we generate popup content from JavaScript:
@@ -239,7 +219,7 @@ There's also `window.onscroll` event.
Theoretically, there are `window.focus()` and `window.blur()` methods to focus/unfocus on a window. And there are also `focus/blur` events that allow to catch the moment when the visitor focuses on a window and switches elsewhere.
-Although, in practice they are severely limited, because in the past evil pages abused them.
+Although, in practice they are severely limited, because in the past evil pages abused them.
For instance, look at this code:
@@ -257,10 +237,10 @@ Still, there are some use cases when such calls do work and can be useful.
For instance:
-- When we open a popup, it's might be a good idea to run a `newWindow.focus()` on it. Just in case, for some OS/browser combinations it ensures that the user is in the new window now.
+- When we open a popup, it might be a good idea to run `newWindow.focus()` on it. Just in case, for some OS/browser combinations it ensures that the user is in the new window now.
- If we want to track when a visitor actually uses our web-app, we can track `window.onfocus/onblur`. That allows us to suspend/resume in-page activities, animations etc. But please note that the `blur` event means that the visitor switched out from the window, but they still may observe it. The window is in the background, but still may be visible.
-## Summary
+## Summary
Popup windows are used rarely, as there are alternatives: loading and displaying information in-page, or in iframe.
diff --git a/3-frames-and-windows/03-cross-window-communication/article.md b/3-frames-and-windows/03-cross-window-communication/article.md
index 0aa9abfe7..4d4e320e4 100644
--- a/3-frames-and-windows/03-cross-window-communication/article.md
+++ b/3-frames-and-windows/03-cross-window-communication/article.md
@@ -275,7 +275,7 @@ Arguments:
`targetOrigin`
: Specifies the origin for the target window, so that only a window from the given origin will get the message.
-The `targetOrigin` is a safety measure. Remember, if the target window comes from another origin, we can't read it's `location` in the sender window. So we can't be sure which site is open in the intended window right now: the user could navigate away, and the sender window has no idea about it.
+The `targetOrigin` is a safety measure. Remember, if the target window comes from another origin, we can't read its `location` in the sender window. So we can't be sure which site is open in the intended window right now: the user could navigate away, and the sender window has no idea about it.
Specifying `targetOrigin` ensures that the window only receives the data if it's still at the right site. Important when the data is sensitive.
diff --git a/3-frames-and-windows/06-clickjacking/article.md b/3-frames-and-windows/06-clickjacking/article.md
index 1daa87dd0..34d0a91ae 100644
--- a/3-frames-and-windows/06-clickjacking/article.md
+++ b/3-frames-and-windows/06-clickjacking/article.md
@@ -154,7 +154,7 @@ Depending on your browser, the `iframe` above is either empty or alerting you th
## Showing with disabled functionality
-The `X-Frame-Options` header has a side-effect. Other sites won't be able to show our page in a frame, even if they have good reasons to do so.
+The `X-Frame-Options` header has a side effect. Other sites won't be able to show our page in a frame, even if they have good reasons to do so.
So there are other solutions... For instance, we can "cover" the page with a `` with styles `height: 100%; width: 100%;`, so that it will intercept all clicks. That `
` is to be removed if `window == top` or if we figure out that we don't need the protection.
diff --git a/4-binary/01-arraybuffer-binary-arrays/01-concat/_js.view/solution.js b/4-binary/01-arraybuffer-binary-arrays/01-concat/_js.view/solution.js
index 2f51384ef..00c37bb94 100644
--- a/4-binary/01-arraybuffer-binary-arrays/01-concat/_js.view/solution.js
+++ b/4-binary/01-arraybuffer-binary-arrays/01-concat/_js.view/solution.js
@@ -2,9 +2,9 @@ function concat(arrays) {
// sum of individual array lengths
let totalLength = arrays.reduce((acc, value) => acc + value.length, 0);
- if (!arrays.length) return null;
-
let result = new Uint8Array(totalLength);
+
+ if (!arrays.length) return result;
// for each array - copy it over result
// next array is copied right after the previous one
diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md
index 95c18dda9..2827e277e 100644
--- a/4-binary/01-arraybuffer-binary-arrays/article.md
+++ b/4-binary/01-arraybuffer-binary-arrays/article.md
@@ -30,7 +30,7 @@ Let's eliminate a possible source of confusion. `ArrayBuffer` has nothing in com
**To manipulate an `ArrayBuffer`, we need to use a "view" object.**
-A view object does not store anything on it's own. It's the "eyeglasses" that give an interpretation of the bytes stored in the `ArrayBuffer`.
+A view object does not store anything on its own. It's the "eyeglasses" that give an interpretation of the bytes stored in the `ArrayBuffer`.
For instance:
@@ -71,7 +71,7 @@ for(let num of view) {
## TypedArray
-The common term for all these views (`Uint8Array`, `Uint32Array`, etc) is [TypedArray](https://tc39.github.io/ecma262/#sec-typedarray-objects). They share the same set of methods and properities.
+The common term for all these views (`Uint8Array`, `Uint32Array`, etc) is [TypedArray](https://tc39.github.io/ecma262/#sec-typedarray-objects). They share the same set of methods and properties.
Please note, there's no constructor called `TypedArray`, it's just a common "umbrella" term to represent one of views over `ArrayBuffer`: `Int8Array`, `Uint8Array` and so on, the full list will soon follow.
diff --git a/4-binary/03-blob/article.md b/4-binary/03-blob/article.md
index e3bd32b38..fc0150577 100644
--- a/4-binary/03-blob/article.md
+++ b/4-binary/03-blob/article.md
@@ -101,7 +101,7 @@ For each URL generated by `URL.createObjectURL` the browser stores a URL -> `Blo
A generated URL (and hence the link with it) is only valid within the current document, while it's open. And it allows to reference the `Blob` in `![]()
`, ``, basically any other object that expects a URL.
-There's a side-effect though. While there's a mapping for a `Blob`, the `Blob` itself resides in the memory. The browser can't free it.
+There's a side effect though. While there's a mapping for a `Blob`, the `Blob` itself resides in the memory. The browser can't free it.
The mapping is automatically cleared on document unload, so `Blob` objects are freed then. But if an app is long-living, then that doesn't happen soon.
@@ -237,8 +237,8 @@ const readableStream = blob.stream();
const stream = readableStream.getReader();
while (true) {
- // for each iteration: data is the next blob fragment
- let { done, data } = await stream.read();
+ // for each iteration: value is the next blob fragment
+ let { done, value } = await stream.read();
if (done) {
// no more data in the stream
console.log('all blob processed.');
@@ -246,7 +246,7 @@ while (true) {
}
// do something with the data portion we've just read from the blob
- console.log(data);
+ console.log(value);
}
```
diff --git a/5-network/01-fetch/article.md b/5-network/01-fetch/article.md
index 688db2ba5..4669fc451 100644
--- a/5-network/01-fetch/article.md
+++ b/5-network/01-fetch/article.md
@@ -195,7 +195,7 @@ To make a `POST` request, or a request with another method, we need to use `fetc
- **`method`** -- HTTP-method, e.g. `POST`,
- **`body`** -- the request body, one of:
- a string (e.g. JSON-encoded),
- - `FormData` object, to submit the data as `form/multipart`,
+ - `FormData` object, to submit the data as `multipart/form-data`,
- `Blob`/`BufferSource` to send binary data,
- [URLSearchParams](info:url), to submit the data in `x-www-form-urlencoded` encoding, rarely used.
@@ -298,13 +298,13 @@ fetch(url, options)
Response properties:
- `response.status` -- HTTP code of the response,
-- `response.ok` -- `true` is the status is 200-299.
+- `response.ok` -- `true` if the status is 200-299.
- `response.headers` -- Map-like object with HTTP headers.
Methods to get response body:
- **`response.text()`** -- return the response as text,
- **`response.json()`** -- parse the response as JSON object,
-- **`response.formData()`** -- return the response as `FormData` object (form/multipart encoding, see the next chapter),
+- **`response.formData()`** -- return the response as `FormData` object (`multipart/form-data` encoding, see the next chapter),
- **`response.blob()`** -- return the response as [Blob](info:blob) (binary data with type),
- **`response.arrayBuffer()`** -- return the response as [ArrayBuffer](info:arraybuffer-binary-arrays) (low-level binary data),
diff --git a/5-network/04-fetch-abort/article.md b/5-network/04-fetch-abort/article.md
index af66c37cc..eadc5aac2 100644
--- a/5-network/04-fetch-abort/article.md
+++ b/5-network/04-fetch-abort/article.md
@@ -24,7 +24,7 @@ When `abort()` is called:
- `controller.signal` emits the `"abort"` event.
- `controller.signal.aborted` property becomes `true`.
-Generally, we have two parties in the process:
+Generally, we have two parties in the process:
1. The one that performs a cancelable operation, it sets a listener on `controller.signal`.
2. The one that cancels: it calls `controller.abort()` when needed.
@@ -34,7 +34,7 @@ Here's the full example (without `fetch` yet):
let controller = new AbortController();
let signal = controller.signal;
-// The party that performs a cancelable operation
+// The party that performs a cancelable operation
// gets the "signal" object
// and sets the listener to trigger when controller.abort() is called
signal.addEventListener('abort', () => alert("abort!"));
@@ -143,6 +143,6 @@ let results = await Promise.all([...fetchJobs, ourJob]);
## Summary
-- `AbortController` is a simple object that generates an `abort` event on it's `signal` property when the `abort()` method is called (and also sets `signal.aborted` to `true`).
+- `AbortController` is a simple object that generates an `abort` event on its `signal` property when the `abort()` method is called (and also sets `signal.aborted` to `true`).
- `fetch` integrates with it: we pass the `signal` property as the option, and then `fetch` listens to it, so it's possible to abort the `fetch`.
- We can use `AbortController` in our code. The "call `abort()`" -> "listen to `abort` event" interaction is simple and universal. We can use it even without `fetch`.
diff --git a/5-network/05-fetch-crossorigin/article.md b/5-network/05-fetch-crossorigin/article.md
index d45ee391d..4420f43c7 100644
--- a/5-network/05-fetch-crossorigin/article.md
+++ b/5-network/05-fetch-crossorigin/article.md
@@ -44,7 +44,7 @@ One way to communicate with another server was to submit a `