Skip to content

Commit 9b95b5e

Browse files
committed
minor
1 parent 3578cb3 commit 9b95b5e

File tree

2 files changed

+17
-17
lines changed
  • 1-js/12-generators-iterators/2-async-iterators-generators
  • 2-ui/1-document/10-size-and-scroll-window

2 files changed

+17
-17
lines changed

1-js/12-generators-iterators/2-async-iterators-generators/article.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ Here's a small cheatsheet:
112112

113113
| | Iterators | Async iterators |
114114
|-------|-----------|-----------------|
115-
| Object method to provide iteraterable | `Symbol.iterator` | `Symbol.asyncIterator` |
115+
| Object method to provide iterator | `Symbol.iterator` | `Symbol.asyncIterator` |
116116
| `next()` return value is | any value | `Promise` |
117117
| to loop, use | `for..of` | `for await..of` |
118118

@@ -178,7 +178,7 @@ No problem, just prepend it with `async`, like this:
178178
})();
179179
```
180180

181-
Now we have an the async generator, iteratable with `for await...of`.
181+
Now we have an the async generator, iterable with `for await...of`.
182182

183183
It's indeed very simple. We add the `async` keyword, and the generator now can use `await` inside of it, rely on promises and other async functions.
184184

@@ -344,7 +344,7 @@ Syntax differences between async and regular iterators:
344344

345345
| | Iterators | Async iterators |
346346
|-------|-----------|-----------------|
347-
| Object method to provide iteraterable | `Symbol.iterator` | `Symbol.asyncIterator` |
347+
| Object method to provide iterator | `Symbol.iterator` | `Symbol.asyncIterator` |
348348
| `next()` return value is | any value | `Promise` |
349349

350350
Syntax differences between async and regular generators:
@@ -356,6 +356,6 @@ Syntax differences between async and regular generators:
356356

357357
In web-development we often meet streams of data, when it flows chunk-by-chunk. For instance, downloading or uploading a big file.
358358

359-
We can use async generators to process such data, but it's worth to mention that there's also another API called Streams, that provides special interfaces to transform the data and to pass it from one stream to another (e.g. download from one place and immediately send elsewhere).
359+
We can use async generators to process such data, but it's worth to mention that there's also another API called Streams, that provides special interfaces to transform the data and to pass it from one stream to another (e.g. download from one place and immediately send elsewhere).
360360

361361
Streams API not a part of JavaScript language standard. Streams and async generators complement each other, both are great ways to handle async data flows.

2-ui/1-document/10-size-and-scroll-window/article.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ For instance, this button shows the height of your window:
1717
```
1818

1919
````warn header="Not `window.innerWidth/Height`"
20-
Browsers also support properties `window.innerWidth/innerHeight`. They look like what we want. So what's the difference?
20+
Browsers also support properties `window.innerWidth/innerHeight`. They look like what we want. So why not to use them instead?
2121

22-
If there's a scrollbar occupying some space, `clientWidth/clientHeight` provide the width/height inside it. In other words, they return width/height of the visible part of the document, available for the content.
22+
If there exists a scrollbar, and it occupies some space, `clientWidth/clientHeight` provide the width/height without it (subtract it). In other words, they return width/height of the visible part of the document, available for the content.
2323

24-
And `window.innerWidth/innerHeight` ignore the scrollbar.
24+
...And `window.innerWidth/innerHeight` ignore the scrollbar.
2525

2626
If there's a scrollbar, and it occupies some space, then these two lines show different values:
2727
```js run
@@ -42,9 +42,9 @@ In modern HTML we should always write `DOCTYPE`. Generally that's not a JavaScri
4242
4343
Theoretically, as the root document element is `documentElement.clientWidth/Height`, and it encloses all the content, we could measure its full size as `documentElement.scrollWidth/scrollHeight`.
4444
45-
These properties work well for regular elements. But for the whole page these properties do not work as intended. In Chrome/Safari/Opera if there's no scroll, then `documentElement.scrollHeight` may be even less than `documentElement.clientHeight`! For regular elements that's a nonsense.
45+
These properties work well for regular elements. But for the whole page these properties do not work as intended. In Chrome/Safari/Opera if there's no scroll, then `documentElement.scrollHeight` may be even less than `documentElement.clientHeight`! Sounds like a nonsense, weird, right?
4646
47-
To have a reliable result on the full document height, we should take the maximum of these properties:
47+
To reliably obtain the full document height, we should take the maximum of these properties:
4848
4949
```js run
5050
let scrollHeight = Math.max(
@@ -60,11 +60,11 @@ Why so? Better don't ask. These inconsistencies come from ancient times, not a "
6060
6161
## Get the current scroll [#page-scroll]
6262
63-
Regular elements have their current scroll state in `elem.scrollLeft/scrollTop`.
63+
DOM elements have their current scroll state in `elem.scrollLeft/scrollTop`.
6464
65-
What's with the page? Most browsers provide `documentElement.scrollLeft/Top` for the document scroll, but Chrome/Safari/Opera have bugs (like [157855](https://code.google.com/p/chromium/issues/detail?id=157855), [106133](https://bugs.webkit.org/show_bug.cgi?id=106133)) and we should use `document.body` instead of `document.documentElement` there.
65+
For document scroll `document.documentElement.scrollLeft/Top` works in most browsers, except oldler WebKit-based ones, like Safari (bug [5991](https://bugs.webkit.org/show_bug.cgi?id=5991)), where we should use `document.body` instead of `document.documentElement` there.
6666
67-
Luckily, we don't have to remember these peculiarities at all, because of the special properties `window.pageXOffset/pageYOffset`:
67+
Luckily, we don't have to remember these peculiarities at all, because the scroll is available in the special properties `window.pageXOffset/pageYOffset`:
6868
6969
```js run
7070
alert('Current scroll from the top: ' + window.pageYOffset);
@@ -83,11 +83,11 @@ For instance, if we try to scroll the page from the script in `<head>`, it won't
8383
8484
Regular elements can be scrolled by changing `scrollTop/scrollLeft`.
8585
86-
We can do the same for the page:
87-
- For all browsers except Chrome/Safari/Opera: modify `document.documentElement.scrollTop/Left`.
88-
- In Chrome/Safari/Opera: use `document.body.scrollTop/Left` instead.
86+
We can do the same for the page, but as explained above:
87+
- For most browsers (except older Webkit-based) `document.documentElement.scrollTop/Left` is the right property.
88+
- Otherwise, `document.body.scrollTop/Left`.
8989
90-
It should work, but smells like cross-browser incompatibilities. Not good. Fortunately, there's a simpler, more universal solution: special methods [window.scrollBy(x,y)](mdn:api/Window/scrollBy) and [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo).
90+
These cross-browser incompatibilities are not good. Fortunately, there's a simpler, universal solution: special methods [window.scrollBy(x,y)](mdn:api/Window/scrollBy) and [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo).
9191
9292
- The method `scrollBy(x,y)` scrolls the page relative to its current position. For instance, `scrollBy(0,10)` scrolls the page `10px` down.
9393
@@ -96,7 +96,7 @@ It should work, but smells like cross-browser incompatibilities. Not good. Fortu
9696
9797
<button onclick="window.scrollBy(0,10)">window.scrollBy(0,10)</button>
9898
```
99-
- The method `scrollTo(pageX,pageY)` scrolls the page relative to the document's top-left corner. It's like setting `scrollLeft/scrollTop`.
99+
- The method `scrollTo(pageX,pageY)` scrolls the page to absolute coordinates, so that the top-left corner of the visible part has coordinates `(pageX, pageY)` relative to the document's top-left corner. It's like setting `scrollLeft/scrollTop`.
100100
101101
To scroll to the very beginning, we can use `scrollTo(0,0)`.
102102

0 commit comments

Comments
 (0)