From 04b2fcfba29b95c0bce0a6afb7cbb2f50e1700b6 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Mon, 1 May 2017 11:44:56 +0300 Subject: [PATCH] promises --- .../03-prototype-inheritance/article.md | 2 +- .../article.md | 2 +- .../10-onload-ondomcontentloaded/article.md | 2 +- 5-animation/3-js-animation/article.md | 12 +- .../3-js-animation/text.view/index.html | 2 +- 8-async/01-callback-hell/article.md | 33 ++-- 8-async/02-promise-basics/article.md | 160 ++++++++---------- 8-async/02-promise-basics/head.html | 13 ++ 8-async/03-promise-chaining/article.md | 96 ++++++++--- 8-async/03-promise-chaining/getMessage.js | 3 + .../promise-then-chain.png | Bin 9513 -> 9583 bytes .../promise-then-chain@2x.png | Bin 22796 -> 23016 bytes archive/promise/async-then.js | 60 +++++++ archive/promise/fetch.js | 37 ++++ archive/{ => promise}/thenable.js | 0 archive/promise/thenable2.js | 19 +++ figures.sketch | Bin 4764661 -> 4764708 bytes 17 files changed, 304 insertions(+), 137 deletions(-) create mode 100644 8-async/02-promise-basics/head.html create mode 100644 8-async/03-promise-chaining/getMessage.js create mode 100644 archive/promise/async-then.js create mode 100644 archive/promise/fetch.js rename archive/{ => promise}/thenable.js (100%) create mode 100644 archive/promise/thenable2.js diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/article.md b/1-js/07-object-oriented-programming/03-prototype-inheritance/article.md index 22d9919e..8af84740 100644 --- a/1-js/07-object-oriented-programming/03-prototype-inheritance/article.md +++ b/1-js/07-object-oriented-programming/03-prototype-inheritance/article.md @@ -174,7 +174,7 @@ let user = { set fullName(value) { [this.name, this.surname] = value.split(" "); - } + }, get fullName() { return `${this.name} ${this.surname}`; diff --git a/2-ui/1-document/06-dom-attributes-and-properties/article.md b/2-ui/1-document/06-dom-attributes-and-properties/article.md index 54a253e6..fbd81803 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/article.md +++ b/2-ui/1-document/06-dom-attributes-and-properties/article.md @@ -139,7 +139,7 @@ Please note: 1. `getAttribute('About')` -- the first letter is uppercase here, and in HTML it's all lowercase. But that doesn't matter: attribute names are case-insensitive. 2. We can assign anything to an attribute, but that becomes a string. So here we have `"123"` as the value. -3. All attributes including ones that we set are seen in `innerHTML`. +3. All attributes including ones that we set are visible in `outerHTML`. 4. The `attributes` collection is iterable and has all attributes with `name` and `value`. ## Property-attribute synchronization diff --git a/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md b/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md index 70386621..1e3ba766 100644 --- a/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md +++ b/2-ui/3-event-details/10-onload-ondomcontentloaded/article.md @@ -67,7 +67,7 @@ There are two differences between them. | | `async` | `defer` | |---------|---------|---------| | Order | Scripts with `async` execute *in the load-first order*. Their document order doesn't matter -- which loads first runs first. | Scripts with `defer` always execute *in the document order* (as they go in the document). | -| `DOMContentLoaded` | Scripts with `async` may load and execute while the document has not yet been fully downloaded. | Scripts with `defer` execute after the document is loaded and parsed (they wait if needed), right before `DOMContentLoaded`. | +| `DOMContentLoaded` | Scripts with `async` may load and execute while the document has not yet been fully downloaded. That happens if scripts are small or cached, and the document is long enough. | Scripts with `defer` execute after the document is loaded and parsed (they wait if needed), right before `DOMContentLoaded`. | So `async` is used for totally independent scripts. diff --git a/5-animation/3-js-animation/article.md b/5-animation/3-js-animation/article.md index 3ff78618..f91f72e6 100644 --- a/5-animation/3-js-animation/article.md +++ b/5-animation/3-js-animation/article.md @@ -186,7 +186,7 @@ Function `animate` accepts 3 parameters that essentially describes the animation Let's animate the element `width` from `0` to `100%` using our function. -Click for the demo: +Click on the element for the demo: [codetabs height=60 src="width"] @@ -410,9 +410,7 @@ As we can see, the graph of the first half of the animation is the scaled down ` ## More interesting "draw" -Instead of moving the element we can do something else. All we need is to write the write `draw` - -### Typing in the text +Instead of moving the element we can do something else. All we need is to write the write the proper `draw`. Here's the animated "bouncing" text typing: @@ -420,9 +418,11 @@ Here's the animated "bouncing" text typing: ## Summary -JavaScript animation is implemented with the help of `requestAnimationFrame`. +JavaScript animation should be implemented via `requestAnimationFrame`. That built-in method allows to setup a callback function to run when the browser will be preparing a repaint. Usually that's very soon, but the exact time depends on the browser. -The helper `animate` function: +When a page is in the background, there are no repaints at all, so the callback won't run: the animation will be suspended and won't consume resources. That's great. + +Here's the helper `animate` function to setup most animations: ```js function animate({timing, draw, duration}) { diff --git a/5-animation/3-js-animation/text.view/index.html b/5-animation/3-js-animation/text.view/index.html index 25482a63..e404fe5c 100644 --- a/5-animation/3-js-animation/text.view/index.html +++ b/5-animation/3-js-animation/text.view/index.html @@ -10,7 +10,7 @@ -