You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/12-generators-iterators/2-async-iterators-generators/article.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -112,7 +112,7 @@ Here's a small cheatsheet:
112
112
113
113
|| Iterators | Async iterators |
114
114
|-------|-----------|-----------------|
115
-
| Object method to provide iteraterable|`Symbol.iterator`|`Symbol.asyncIterator`|
115
+
| Object method to provide iterator|`Symbol.iterator`|`Symbol.asyncIterator`|
116
116
|`next()` return value is | any value |`Promise`|
117
117
| to loop, use |`for..of`|`for await..of`|
118
118
@@ -178,7 +178,7 @@ No problem, just prepend it with `async`, like this:
178
178
})();
179
179
```
180
180
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`.
182
182
183
183
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.
184
184
@@ -344,7 +344,7 @@ Syntax differences between async and regular iterators:
344
344
345
345
|| Iterators | Async iterators |
346
346
|-------|-----------|-----------------|
347
-
| Object method to provide iteraterable|`Symbol.iterator`|`Symbol.asyncIterator`|
347
+
| Object method to provide iterator|`Symbol.iterator`|`Symbol.asyncIterator`|
348
348
|`next()` return value is | any value |`Promise`|
349
349
350
350
Syntax differences between async and regular generators:
@@ -356,6 +356,6 @@ Syntax differences between async and regular generators:
356
356
357
357
In web-development we often meet streams of data, when it flows chunk-by-chunk. For instance, downloading or uploading a big file.
358
358
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).
360
360
361
361
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.
Copy file name to clipboardExpand all lines: 2-ui/1-document/10-size-and-scroll-window/article.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,11 +17,11 @@ For instance, this button shows the height of your window:
17
17
```
18
18
19
19
````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?
21
21
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.
23
23
24
-
And `window.innerWidth/innerHeight` ignore the scrollbar.
24
+
...And `window.innerWidth/innerHeight` ignore the scrollbar.
25
25
26
26
If there's a scrollbar, and it occupies some space, then these two lines show different values:
27
27
```js run
@@ -42,9 +42,9 @@ In modern HTML we should always write `DOCTYPE`. Generally that's not a JavaScri
42
42
43
43
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`.
44
44
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?
46
46
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:
48
48
49
49
```js run
50
50
let scrollHeight = Math.max(
@@ -60,11 +60,11 @@ Why so? Better don't ask. These inconsistencies come from ancient times, not a "
60
60
61
61
## Get the current scroll [#page-scroll]
62
62
63
-
Regular elements have their current scroll state in `elem.scrollLeft/scrollTop`.
63
+
DOM elements have their current scroll state in `elem.scrollLeft/scrollTop`.
64
64
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.
66
66
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`:
68
68
69
69
```js run
70
70
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
83
83
84
84
Regular elements can be scrolled by changing `scrollTop/scrollLeft`.
85
85
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`.
89
89
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).
91
91
92
92
- The method `scrollBy(x,y)` scrolls the page relative to its current position. For instance, `scrollBy(0,10)` scrolls the page `10px` down.
93
93
@@ -96,7 +96,7 @@ It should work, but smells like cross-browser incompatibilities. Not good. Fortu
- 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`.
100
100
101
101
To scroll to the very beginning, we can use `scrollTo(0,0)`.
0 commit comments