From a4ba2bbbcedca3343557f8c69dc125c725b635e3 Mon Sep 17 00:00:00 2001 From: Hamir Mahal Date: Fri, 26 Mar 2021 14:35:55 -0700 Subject: [PATCH 01/91] close #2534 by slightly changing 7-microtask-queue --- 1-js/11-async/07-microtask-queue/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/11-async/07-microtask-queue/article.md b/1-js/11-async/07-microtask-queue/article.md index b146c26b8..014dd93c0 100644 --- a/1-js/11-async/07-microtask-queue/article.md +++ b/1-js/11-async/07-microtask-queue/article.md @@ -30,7 +30,7 @@ As stated in the [specification](https://tc39.github.io/ecma262/#sec-jobs-and-jo - The queue is first-in-first-out: tasks enqueued first are run first. - Execution of a task is initiated only when nothing else is running. -Or, to say more simply, when a promise is ready, its `.then/catch/finally` handlers are put into the queue; they are not executed yet. When the JavaScript engine becomes free from the current code, it takes a task from the queue and executes it. +Or, to put it more simply, when a promise is ready, its `.then/catch/finally` handlers are put into the queue; they are not executed yet. When the JavaScript engine becomes free from the current code, it takes a task from the queue and executes it. That's why "code finished" in the example above shows first. @@ -40,7 +40,7 @@ Promise handlers always go through this internal queue. If there's a chain with multiple `.then/catch/finally`, then every one of them is executed asynchronously. That is, it first gets queued, then executed when the current code is complete and previously queued handlers are finished. -**What if the order matters for us? How can we make `code finished` run after `promise done`?** +**What if the order matters for us? How can we make `code finished` appear after `promise done`?** Easy, just put it into the queue with `.then`: From a662e1c7b23cf78e1beb0a6336bfbf29bb4de633 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Fri, 26 Mar 2021 23:43:52 -0300 Subject: [PATCH 02/91] typo --- 2-ui/99-ui-misc/02-selection-range/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 6284e02e3..c5ab3fbdd 100644 --- a/2-ui/99-ui-misc/02-selection-range/article.md +++ b/2-ui/99-ui-misc/02-selection-range/article.md @@ -377,7 +377,7 @@ E.g. if the user starts selecting with mouse and goes from "Example" to "italic" There are events on to keep track of selection: -- `elem.onselectstart` -- when a selection *starts* on speficially elemen `elem` (or inside it). For instance, when the user presses the mouse button on it and starts to move the pointer. +- `elem.onselectstart` -- when a selection *starts* specifically on element `elem` (or inside it). For instance, when the user presses the mouse button on it and starts to move the pointer. - Preventing the default action cancels the selection start. So starting a selection from this element becomes impossible, but the element is still selectable. The visitor just needs to start the selection from elsewhere. - `document.onselectionchange` -- whenever a selection changes or starts. - Please note: this handler can be set only on `document`, it tracks all selections in it. From 67230aacd112c6dc30ad488d2f0462072eda7754 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sat, 27 Mar 2021 23:58:33 -0300 Subject: [PATCH 03/91] code --- 1-js/03-code-quality/06-polyfills/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/03-code-quality/06-polyfills/article.md b/1-js/03-code-quality/06-polyfills/article.md index af38faad2..7efaf8677 100644 --- a/1-js/03-code-quality/06-polyfills/article.md +++ b/1-js/03-code-quality/06-polyfills/article.md @@ -48,7 +48,7 @@ Modern project build systems, such as [webpack](http://webpack.github.io/), prov New language features may include not only syntax constructs and operators, but also built-in functions. -For example, `Math.trunc(n)` is a function that "cuts off" the decimal part of a number, e.g `Math.trunc(1.23) = 1`. +For example, `Math.trunc(n)` is a function that "cuts off" the decimal part of a number, e.g `Math.trunc(1.23)` returns `1`. In some (very outdated) JavaScript engines, there's no `Math.trunc`, so such code will fail. From 32eb2f9a86f84f6374e0fb6f078191dac1aa2f10 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sun, 28 Mar 2021 15:02:25 -0300 Subject: [PATCH 04/91] typo --- 5-network/03-fetch-progress/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/03-fetch-progress/article.md b/5-network/03-fetch-progress/article.md index f5a64da54..c0e3d922a 100644 --- a/5-network/03-fetch-progress/article.md +++ b/5-network/03-fetch-progress/article.md @@ -9,7 +9,7 @@ To track download progress, we can use `response.body` property. It's `ReadableS Unlike `response.text()`, `response.json()` and other methods, `response.body` gives full control over the reading process, and we can count how much is consumed at any moment. -Here's the sketch of code that reads the reponse from `response.body`: +Here's the sketch of code that reads the response from `response.body`: ```js // instead of response.json() and other methods From 4820b978df5616e2eb35b09c37af32a00dbae810 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sun, 28 Mar 2021 15:05:53 -0300 Subject: [PATCH 05/91] repeated word --- 5-network/06-fetch-api/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/06-fetch-api/article.md b/5-network/06-fetch-api/article.md index e57689c75..eea5030b6 100644 --- a/5-network/06-fetch-api/article.md +++ b/5-network/06-fetch-api/article.md @@ -171,7 +171,7 @@ The `redirect` option allows to change that: - **`"follow"`** -- the default, follow HTTP-redirects, - **`"error"`** -- error in case of HTTP-redirect, -- **`"manual"`** -- allows to process HTTP-redirects manually. In case of redirect, we'll get a special response object, with `response.type="opaqueredirect"` and and zeroed/empty status and most other properies. +- **`"manual"`** -- allows to process HTTP-redirects manually. In case of redirect, we'll get a special response object, with `response.type="opaqueredirect"` and zeroed/empty status and most other properies. ## integrity From 01ebc30fa75020ca99df73ad9d83409326fc93fb Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sun, 28 Mar 2021 15:07:48 -0300 Subject: [PATCH 06/91] typo --- 5-network/11-websocket/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md index aab6d31be..8193f8419 100644 --- a/5-network/11-websocket/article.md +++ b/5-network/11-websocket/article.md @@ -88,7 +88,7 @@ Sec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q== Sec-WebSocket-Version: 13 ``` -- `Origin` -- the origin of the client page, e.g. `https://javascript.info`. WebSocket objects are cross-origin by nature. There are no special headers or other limitations. Old servers are unable to handle WebSocket anyway, so there are no compabitility issues. But `Origin` header is important, as it allows the server to decide whether or not to talk WebSocket with this website. +- `Origin` -- the origin of the client page, e.g. `https://javascript.info`. WebSocket objects are cross-origin by nature. There are no special headers or other limitations. Old servers are unable to handle WebSocket anyway, so there are no compatibility issues. But `Origin` header is important, as it allows the server to decide whether or not to talk WebSocket with this website. - `Connection: Upgrade` -- signals that the client would like to change the protocol. - `Upgrade: websocket` -- the requested protocol is "websocket". - `Sec-WebSocket-Key` -- a random browser-generated key for security. From c06e21fee9ed06fcccf1149844aed6202390d448 Mon Sep 17 00:00:00 2001 From: Venkata Pavan Date: Wed, 31 Mar 2021 13:30:26 +0530 Subject: [PATCH 07/91] Few grammatical corrections Few grammatical corrections --- 1-js/11-async/02-promise-basics/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-js/11-async/02-promise-basics/article.md b/1-js/11-async/02-promise-basics/article.md index a8fb3d9e7..f2f533220 100644 --- a/1-js/11-async/02-promise-basics/article.md +++ b/1-js/11-async/02-promise-basics/article.md @@ -28,10 +28,10 @@ Its arguments `resolve` and `reject` are callbacks provided by JavaScript itself When the executor obtains the result, be it soon or late, doesn't matter, it should call one of these callbacks: -- `resolve(value)` — if the job finished successfully, with result `value`. -- `reject(error)` — if an error occurred, `error` is the error object. +- `resolve(value)` — if the job is finished successfully, with result `value`. +- `reject(error)` — if an error has occurred, `error` is the error object. -So to summarize: the executor runs automatically and attempts to perform a job. When it is finished with the attempt it calls `resolve` if it was successful or `reject` if there was an error. +So to summarize: the executor runs automatically and attempts to perform a job. When it is finished with the attempt, it calls `resolve` if it was successful or `reject` if there was an error. The `promise` object returned by the `new Promise` constructor has these internal properties: From 6d0b3141a432e09237512bf58958742e54cddc4e Mon Sep 17 00:00:00 2001 From: Tami Olafunmiloye Date: Thu, 1 Apr 2021 17:21:25 -0400 Subject: [PATCH 08/91] Fix grammatical error The sentence should say "Why we need tests" with no question mark, or "Why do we need tests?" I think keeping the question mark makes it more personal. --- 1-js/03-code-quality/05-testing-mocha/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/03-code-quality/05-testing-mocha/article.md b/1-js/03-code-quality/05-testing-mocha/article.md index 68ffcae4d..9037b484d 100644 --- a/1-js/03-code-quality/05-testing-mocha/article.md +++ b/1-js/03-code-quality/05-testing-mocha/article.md @@ -2,7 +2,7 @@ Automated testing will be used in further tasks, and it's also widely used in real projects. -## Why we need tests? +## Why do we need tests? When we write a function, we can usually imagine what it should do: which parameters give which results. From c722cda8d670df1761d7323e1a730a0b559fa415 Mon Sep 17 00:00:00 2001 From: PhilipKirner <43518396+PhilipKirner@users.noreply.github.com> Date: Thu, 1 Apr 2021 17:08:37 -0600 Subject: [PATCH 09/91] Update article.md Potential Grammar Correction --- 2-ui/1-document/03-dom-navigation/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index f7123d70d..b5f03098c 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -214,7 +214,7 @@ alert( document.body.previousSibling ); // HTMLHeadElement ## Element-only navigation -Navigation properties listed above refer to *all* nodes. For instance, in `childNodes` we can see both text nodes, element nodes, and even comment nodes if there exist. +Navigation properties listed above refer to *all* nodes. For instance, in `childNodes` we can see both text nodes, element nodes, and even comment nodes if they exist. But for many tasks we don't want text or comment nodes. We want to manipulate element nodes that represent tags and form the structure of the page. From 334d4de8e1fd1aced183b20651f3926b51e4f46a Mon Sep 17 00:00:00 2001 From: Mustafa Kemal Tuna <12192118+lumosmind@users.noreply.github.com> Date: Sun, 4 Apr 2021 11:47:58 +0300 Subject: [PATCH 10/91] pseudo function expression it could be more intuitive. function() looks like calling a function but example is about function expression. --- 1-js/04-object-basics/04-object-methods/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index 0d3c1f392..a36b9ca07 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -81,7 +81,7 @@ user = { // method shorthand looks better, right? user = { *!* - sayHi() { // same as "sayHi: function()" + sayHi() { // same as "sayHi: function(){...}" */!* alert("Hello"); } From 023ec22d3b1f7536685883df90ed1ea0dee51065 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Mon, 5 Apr 2021 02:26:17 -0300 Subject: [PATCH 11/91] typos --- 4-binary/03-blob/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/4-binary/03-blob/article.md b/4-binary/03-blob/article.md index a44308f6f..5031afa32 100644 --- a/4-binary/03-blob/article.md +++ b/4-binary/03-blob/article.md @@ -74,7 +74,7 @@ link.href = URL.createObjectURL(blob); We can also create a link dynamically in JavaScript and simulate a click by `link.click()`, then download starts automatically. -Here's the similar code that causes user to download the dynamicallly created `Blob`, without any HTML: +Here's the similar code that causes user to download the dynamically created `Blob`, without any HTML: ```js run let link = document.createElement('a'); @@ -186,7 +186,7 @@ let context = canvas.getContext('2d'); context.drawImage(img, 0, 0); // we can context.rotate(), and do many other things on canvas -// toBlob is async opereation, callback is called when done +// toBlob is async operation, callback is called when done canvas.toBlob(function(blob) { // blob ready, download it let link = document.createElement('a'); @@ -235,7 +235,7 @@ That makes Blobs convenient for upload/download operations, that are so common i Methods that perform web-requests, such as [XMLHttpRequest](info:xmlhttprequest), [fetch](info:fetch) and so on, can work with `Blob` natively, as well as with other binary types. -We can easily convert betweeen `Blob` and low-level binary data types: +We can easily convert between `Blob` and low-level binary data types: - We can make a Blob from a typed array using `new Blob(...)` constructor. - We can get back `ArrayBuffer` from a Blob using `FileReader`, and then create a view over it for low-level binary processing. From b896887fe3c49176cf00ff86070250ee97b51373 Mon Sep 17 00:00:00 2001 From: Matt Schlenker Date: Mon, 5 Apr 2021 14:11:18 -0400 Subject: [PATCH 12/91] Fix comma splice. --- 1-js/01-getting-started/4-devtools/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/4-devtools/article.md b/1-js/01-getting-started/4-devtools/article.md index 08aeaf987..50926d4f7 100644 --- a/1-js/01-getting-started/4-devtools/article.md +++ b/1-js/01-getting-started/4-devtools/article.md @@ -8,7 +8,7 @@ To see errors and get a lot of other useful information about scripts, "develope Most developers lean towards Chrome or Firefox for development because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catch-up" to Chrome or Firefox. So most developers have a "favorite" browser and switch to others if a problem is browser-specific. -Developer tools are potent, they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands. +Developer tools are potent; they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands. ## Google Chrome From a2c36c946bf16e9a158844b6ee91150394da7c64 Mon Sep 17 00:00:00 2001 From: Dylan Dixon <61722933+dylan-workhub@users.noreply.github.com> Date: Fri, 9 Apr 2021 20:39:27 -0230 Subject: [PATCH 13/91] Fix plural typo line 414 Fixed a small typo with pluralization. --- 1-js/02-first-steps/15-function-basics/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md index b12d0b9e7..0068bf194 100644 --- a/1-js/02-first-steps/15-function-basics/article.md +++ b/1-js/02-first-steps/15-function-basics/article.md @@ -411,7 +411,7 @@ Functions that are used *very often* sometimes have ultrashort names. For example, the [jQuery](http://jquery.com) framework defines a function with `$`. The [Lodash](http://lodash.com/) library has its core function named `_`. -These are exceptions. Generally functions names should be concise and descriptive. +These are exceptions. Generally function names should be concise and descriptive. ``` ## Functions == Comments From 6de9d70114501d6380fbef2b60c939461eebaef9 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sun, 11 Apr 2021 01:37:21 -0300 Subject: [PATCH 14/91] typo --- 9-regular-expressions/05-regexp-multiline-mode/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/9-regular-expressions/05-regexp-multiline-mode/article.md b/9-regular-expressions/05-regexp-multiline-mode/article.md index f8ac08ec7..1c8b36d0a 100644 --- a/9-regular-expressions/05-regexp-multiline-mode/article.md +++ b/9-regular-expressions/05-regexp-multiline-mode/article.md @@ -35,7 +35,7 @@ alert( str.match(/^\d/g) ); // 1 That's because by default a caret `pattern:^` only matches at the beginning of the text, and in the multiline mode -- at the start of any line. ```smart -"Start of a line" formally means "immediately after a line break": the test `pattern:^` in multiline mode matches at all positions preceeded by a newline character `\n`. +"Start of a line" formally means "immediately after a line break": the test `pattern:^` in multiline mode matches at all positions preceded by a newline character `\n`. And at the text start. ``` From dbae68c452989ad07f7d7dd5d9e6071b41e94343 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sun, 11 Apr 2021 04:00:11 -0300 Subject: [PATCH 15/91] Plunker reminder #1775 --- .../2-async-iterators-generators/article.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/1-js/12-generators-iterators/2-async-iterators-generators/article.md b/1-js/12-generators-iterators/2-async-iterators-generators/article.md index 072e10472..d4e9f7861 100644 --- a/1-js/12-generators-iterators/2-async-iterators-generators/article.md +++ b/1-js/12-generators-iterators/2-async-iterators-generators/article.md @@ -384,6 +384,8 @@ An example of use (shows commit authors in console): } })(); + +// Note: If you are running this in an external sandbox, you'll need to paste here the function fetchCommits described above ``` That's just what we wanted. From 8b7bf1014379f14c1f954c94a5725fe2a508d86c Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Mon, 12 Apr 2021 04:30:49 -0300 Subject: [PATCH 16/91] store vs keeps stored --- 1-js/05-data-types/08-weakmap-weakset/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/08-weakmap-weakset/article.md b/1-js/05-data-types/08-weakmap-weakset/article.md index 5adbced20..8d5a86981 100644 --- a/1-js/05-data-types/08-weakmap-weakset/article.md +++ b/1-js/05-data-types/08-weakmap-weakset/article.md @@ -1,6 +1,6 @@ # WeakMap and WeakSet -As we know from the chapter , JavaScript engine stores a value in memory while it is reachable (and can potentially be used). +As we know from the chapter , JavaScript engine keeps a value in memory while it is "reachable" and can potentially be used. For instance: ```js From d8be8b03275a5f40be9be6a9659cecd4c3a8405a Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Thu, 15 Apr 2021 09:45:19 +0300 Subject: [PATCH 17/91] Add scrollX/scrollY --- 2-ui/1-document/10-size-and-scroll-window/article.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md index 95a5cd48b..08a2f6576 100644 --- a/2-ui/1-document/10-size-and-scroll-window/article.md +++ b/2-ui/1-document/10-size-and-scroll-window/article.md @@ -73,6 +73,12 @@ alert('Current scroll from the left: ' + window.pageXOffset); These properties are read-only. +```smart header="Also available as `window` properties `scrollX` and `scrollY`" +For historical reasons, both properties exist, but they are the same: +- `window.pageXOffset` is an alias of `window.scrollX`. +- `window.pageYOffset` is an alias of `window.scrollY`. +``` + ## Scrolling: scrollTo, scrollBy, scrollIntoView [#window-scroll] ```warn From adb962b51181bd8e8472d48684ff69aaa9e32ce4 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sat, 17 Apr 2021 19:55:20 +0300 Subject: [PATCH 18/91] closes #2572 --- 1-js/05-data-types/09-keys-values-entries/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/09-keys-values-entries/article.md b/1-js/05-data-types/09-keys-values-entries/article.md index b633dc274..28c48a533 100644 --- a/1-js/05-data-types/09-keys-values-entries/article.md +++ b/1-js/05-data-types/09-keys-values-entries/article.md @@ -99,4 +99,4 @@ let doublePrices = Object.fromEntries( alert(doublePrices.meat); // 8 ``` -It may look difficult from the first sight, but becomes easy to understand after you use it once or twice. We can make powerful chains of transforms this way. +It may look difficult at first sight, but becomes easy to understand after you use it once or twice. We can make powerful chains of transforms this way. From 7d624ef828c574f17bd8f24f2c1cb38c002270b7 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sun, 18 Apr 2021 06:28:56 -0300 Subject: [PATCH 19/91] typo it's --- 6-data-storage/03-indexeddb/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/6-data-storage/03-indexeddb/article.md b/6-data-storage/03-indexeddb/article.md index a4fb78c1e..6bd347657 100644 --- a/6-data-storage/03-indexeddb/article.md +++ b/6-data-storage/03-indexeddb/article.md @@ -50,7 +50,7 @@ Unlike server-side databases, IndexedDB is client-side, the data is stored in th If the local database version is less than specified in `open`, then a special event `upgradeneeded` is triggered, and we can compare versions and upgrade data structures as needed. -The `upgradeneeded` event also triggers when the database doesn't yet exist (technically, it's version is `0`), so we can perform the initialization. +The `upgradeneeded` event also triggers when the database doesn't yet exist (technically, its version is `0`), so we can perform the initialization. Let's say we published the first version of our app. From ffd8e03ecf50ad8bf0ffadbe80e38c675f14ac62 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sun, 18 Apr 2021 07:31:31 -0300 Subject: [PATCH 20/91] typos? easier reading - review pls --- 6-data-storage/03-indexeddb/article.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/6-data-storage/03-indexeddb/article.md b/6-data-storage/03-indexeddb/article.md index a4fb78c1e..7520c6e0e 100644 --- a/6-data-storage/03-indexeddb/article.md +++ b/6-data-storage/03-indexeddb/article.md @@ -95,7 +95,7 @@ openRequest.onupgradeneeded = function(event) { }; ``` -Please note: as our current version is `2`, `onupgradeneeded` handler has a code branch for version `0`, suitable for users that are accessing for the first time and have no database, and also for version `1`, for upgrades. +Please note: as our current version is `2`, the `onupgradeneeded` handler has a code branch for version `0`, suitable for users that are accessing for the first time and have no database, and also for version `1`, for upgrades. And then, only if `onupgradeneeded` handler finishes without errors, `openRequest.onsuccess` triggers, and the database is considered successfully opened. @@ -156,7 +156,7 @@ openRequest.onsuccess = function() { openRequest.onblocked = function() { // this event shouldn't trigger if we handle onversionchange correctly - // it means that there's another open connection to same database + // it means that there's another open connection to the same database // and it wasn't closed after db.onversionchange triggered for it }; */!* @@ -171,7 +171,7 @@ We can handle things more gracefully in `db.onversionchange`, prompt the visitor Or, an alternative approach would be to not close the database in `db.onversionchange`, but instead use the `onblocked` handler (in the new tab) to alert the visitor, tell him that the newer version can't be loaded until they close other tabs. -These update collisions happen rarely, but we should at least have some handling for them, at least `onblocked` handler, to prevent our script from dying silently. +These update collisions happen rarely, but we should at least have some handling for them, at least an `onblocked` handler, to prevent our script from dying silently. ## Object store @@ -189,7 +189,7 @@ An example of an object that can't be stored: an object with circular references **There must be a unique `key` for every value in the store.** -A key must be one of the these types - number, date, string, binary, or array. It's a unique identifier, so we can search/remove/update values by the key. +A key must be one of these types - number, date, string, binary, or array. It's a unique identifier, so we can search/remove/update values by the key. ![](indexeddb-structure.svg) @@ -253,7 +253,7 @@ db.deleteObjectStore('books') The term "transaction" is generic, used in many kinds of databases. -A transaction is a group operations, that should either all succeed or all fail. +A transaction is a group of operations, that should either all succeed or all fail. For instance, when a person buys something, we need to: 1. Subtract the money from their account. @@ -347,9 +347,9 @@ Usually, we can assume that a transaction commits when all its requests are comp So, in the example above no special call is needed to finish the transaction. -Transactions auto-commit principle has an important side effect. We can't insert an async operation like `fetch`, `setTimeout` in the middle of transaction. IndexedDB will not keep the transaction waiting till these are done. +Transactions auto-commit principle has an important side effect. We can't insert an async operation like `fetch`, `setTimeout` in the middle of a transaction. IndexedDB will not keep the transaction waiting till these are done. -In the code below, `request2` in line `(*)` fails, because the transaction is already committed, and can't make any request in it: +In the code below, `request2` in the line `(*)` fails, because the transaction is already committed, and can't make any request in it: ```js let request1 = books.add(book); @@ -370,7 +370,7 @@ That's because `fetch` is an asynchronous operation, a macrotask. Transactions a Authors of IndexedDB spec believe that transactions should be short-lived. Mostly for performance reasons. -Notably, `readwrite` transactions "lock" the stores for writing. So if one part of application initiated `readwrite` on `books` object store, then another part that wants to do the same has to wait: the new transaction "hangs" till the first one is done. That can lead to strange delays if transactions take a long time. +Notably, `readwrite` transactions "lock" the stores for writing. So if one part of the application initiated `readwrite` on `books` object store, then another part that wants to do the same has to wait: the new transaction "hangs" till the first one is done. That can lead to strange delays if transactions take a long time. So, what to do? @@ -792,7 +792,7 @@ await inventory.add({ id: 'js', price: 10, created: new Date() }); // Error The next `inventory.add` after `fetch` `(*)` fails with an "inactive transaction" error, because the transaction is already committed and closed at that time. -The workaround is same as when working with native IndexedDB: either make a new transaction or just split things apart. +The workaround is the same as when working with native IndexedDB: either make a new transaction or just split things apart. 1. Prepare the data and fetch all that's needed first. 2. Then save in the database. From 47b1ca8df82a83a7ea7739df29d0d4d10ac84792 Mon Sep 17 00:00:00 2001 From: Bora Lee Date: Wed, 21 Apr 2021 12:51:22 +0900 Subject: [PATCH 21/91] Fix grammar and wrong information --- 2-ui/4-forms-controls/2-focus-blur/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md index d4348d25b..b866a5e2b 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -104,7 +104,7 @@ The best recipe is to be careful when using these events. If we want to track us ``` ## Allow focusing on any element: tabindex -By default many elements do not support focusing. +By default, many elements do not support focusing. The list varies a bit between browsers, but one thing is always correct: `focus/blur` support is guaranteed for elements that a visitor can interact with: `