diff --git a/1-js/11-async/01-callbacks/article.md b/1-js/11-async/01-callbacks/article.md index af38241e..c2f67c6c 100644 --- a/1-js/11-async/01-callbacks/article.md +++ b/1-js/11-async/01-callbacks/article.md @@ -223,6 +223,30 @@ As calls become more nested, the code becomes deeper and increasingly more diffi That's sometimes called "callback hell" or "pyramid of doom." + + ![](callback-hell.svg) The "pyramid" of nested calls grows to the right with every asynchronous action. Soon it spirals out of control. diff --git a/1-js/11-async/01-callbacks/callback-hell.svg b/1-js/11-async/01-callbacks/callback-hell.svg index eaf125a9..740f6506 100644 --- a/1-js/11-async/01-callbacks/callback-hell.svg +++ b/1-js/11-async/01-callbacks/callback-hell.svg @@ -1 +1 @@ -loadScript('1.js',function(error,script){if(error){handleError(error);}else{// ...loadScript('2.js',function(error,script){if(error){handleError(error);}else{// ...loadScript('3.js',function(error,script){if(error){handleError(error);}else{// ...continue after all scripts are loaded (*)}});}})}}); \ No newline at end of file +loadScript ( '1.js' , function ( error , script ) { if ( error ) { handleError ( error ); } else { // ... loadScript ( '2.js' , function ( error , script ) { if ( error ) { handleError ( error ); } else { // ... loadScript ( '3.js' , function ( error , script ) { if ( error ) { handleError ( error ); } else { // ... } }); } }) } }); \ No newline at end of file diff --git a/1-js/12-generators-iterators/1-generators/article.md b/1-js/12-generators-iterators/1-generators/article.md index 84f9228f..44472b96 100644 --- a/1-js/12-generators-iterators/1-generators/article.md +++ b/1-js/12-generators-iterators/1-generators/article.md @@ -239,8 +239,8 @@ function* generateSequence(start, end) { Now we'd like to reuse it for generation of a more complex sequence: - first, digits `0..9` (with character codes 48..57), -- followed by alphabet letters `a..z` (character codes 65..90) -- followed by uppercased letters `A..Z` (character codes 97..122) +- followed by alphabet letters `A..Z` (character codes 65..90) +- followed by uppercased letters `a..z` (character codes 97..122) We can use this sequence e.g. to create passwords by selecting characters from it (could add syntax characters as well), but let's generate it first. 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 8be14c7e..94d6e281 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 @@ -283,7 +283,7 @@ for await (let commit of fetchCommits(repo)) { } ``` -We'd like a call, like `fetchCommits(repo)` to get commits for us, making requests whenever needed. And let it care about all pagination stuff, for us it'll be a simple `for await..of`. +We'd like to make a function `fetchCommits(repo)` that gets commits for us, making requests whenever needed. And let it care about all pagination stuff, for us it'll be a simple `for await..of`. With async generators that's pretty easy to implement: @@ -361,4 +361,4 @@ In web-development we often meet streams of data, when it flows chunk-by-chunk. We can use async generators to process such data, but it's also worth to mention that there's also another API called Streams, that provides special interfaces to work with such streams, to transform the data and to pass it from one stream to another (e.g. download from one place and immediately send elsewhere). -Streams API is not a part of JavaScript language standard. +Streams API is not a part of JavaScript language standard. 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 e8566885..4550c373 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 @@ -<p>Example: <i>italic</i> and <b>bold</b></p>0123 \ No newline at end of file +0123 \ 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 9d796c7e..dd19679c 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 @@ -<p>Example: <i>italic</i> and <b>bold</b></p>0123 \ No newline at end of file +0123 \ 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 d3abd8d8..e7bdb2a0 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 @@ -<p>Example: <i>italic</i> and <b>bold</b></p>startContainer (<p>.firstChild)startOffset (=2)commonAncestorContainer (<p>)endContainer (<b>.firstChild)endOffset (=3) \ No newline at end of file +startContainer (<p>.firstChild)startOffset (=2)commonAncestorContainer (<p>)endContainer (<b>.firstChild)endOffset (=3) \ 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 ba9f1f1c..fd058beb 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 @@ -<p>Example: <i>italic</i> and <b>bold</b></p>0123 \ No newline at end of file +0123 \ 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 06df79be..3e7eb7f1 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 @@ -<p>Example: <i>italic</i> and <b>bold</b></p>focusanchor \ No newline at end of file +focusanchor \ 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 74da3c79..7fb3cbe0 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 @@ -<p>Example: <i>italic</i> and <b>bold</b></p>anchorfocus \ No newline at end of file +anchorfocus \ No newline at end of file diff --git a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256.svg b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256.svg index 38085b4a..89ae9640 100644 --- a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256.svg +++ b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256.svg @@ -1 +1 @@ -10000000 08-bit intege r256 \ No newline at end of file +8-bit integer256 \ No newline at end of file diff --git a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257.svg b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257.svg index cad97574..c7b74cd6 100644 --- a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257.svg +++ b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257.svg @@ -1 +1 @@ -10000000 18-bit intege r257 \ No newline at end of file +8-bit integer257 \ No newline at end of file diff --git a/4-binary/03-blob/blob.svg b/4-binary/03-blob/blob.svg index 9542160a..b1cf6fcc 100644 --- a/4-binary/03-blob/blob.svg +++ b/4-binary/03-blob/blob.svg @@ -1 +1 @@ -image/pn gblob1blob2strbuffer...typeBlobblobParts+= \ No newline at end of file +image/pngblob1blob2strbuffer...typeBlobblobParts+= \ No newline at end of file diff --git a/5-network/07-url/url-object.svg b/5-network/07-url/url-object.svg index 6484fbb5..80da6fec 100644 --- a/5-network/07-url/url-object.svg +++ b/5-network/07-url/url-object.svg @@ -1 +1 @@ -hreforiginhostproto colhttp://site.com:8080/path/page?p1=v1&p2=v2… #has hhostnameportpathnamesearchhash \ No newline at end of file +hreforiginhostproto colhostnameportpathnamesearchhash \ No newline at end of file diff --git a/5-network/08-xmlhttprequest/article.md b/5-network/08-xmlhttprequest/article.md index fac27203..f150d47c 100644 --- a/5-network/08-xmlhttprequest/article.md +++ b/5-network/08-xmlhttprequest/article.md @@ -6,7 +6,7 @@ Despite of having the word "XML" in its name, it can operate on any data, not on Right now, there's another, more modern method `fetch`, that somewhat deprecates `XMLHttpRequest`. -In modern web-development `XMLHttpRequest` may be used for three reasons: +In modern web-development `XMLHttpRequest` is used for three reasons: 1. Historical reasons: we need to support existing scripts with `XMLHttpRequest`. 2. We need to support old browsers, and don't want polyfills (e.g. to keep scripts tiny). @@ -51,7 +51,7 @@ To do the request, we need 3 steps: Some request methods like `GET` do not have a body. And some of them like `POST` use `body` to send the data to the server. We'll see examples later. -4. Listen to events for response. +4. Listen to `xhr` events for response. These three are the most widely used: - `load` -- when the result is ready, that includes HTTP errors like 404. @@ -110,7 +110,7 @@ xhr.onerror = function() { }; ``` -Once the server has responded, we can receive the result in the following properties of the request object: +Once the server has responded, we can receive the result in the following `xhr` properties: `status` : HTTP status code (a number): `200`, `404`, `403` and so on, can be `0` in case of a non-HTTP failure. @@ -119,7 +119,7 @@ Once the server has responded, we can receive the result in the following proper : HTTP status message (a string): usually `OK` for `200`, `Not Found` for `404`, `Forbidden` for `403` and so on. `response` (old scripts may use `responseText`) -: The server response. +: The server response body. We can also specify a timeout using the corresponding property: @@ -130,7 +130,7 @@ xhr.timeout = 10000; // timeout in ms, 10 seconds If the request does not succeed within the given time, it gets canceled and `timeout` event triggers. ````smart header="URL search parameters" -To pass URL parameters, like `?name=value`, and ensure the proper encoding, we can use [URL](info:url) object: +To add parameters to URL, like `?name=value`, and ensure the proper encoding, we can use [URL](info:url) object: ```js let url = new URL('https://google.com/search'); @@ -208,9 +208,7 @@ xhr.onreadystatechange = function() { }; ``` -You can find `readystatechange` listeners in really old code, it's there for historical reasons, as there was a time when there were no `load` and other events. - -Nowadays, `load/error/progress` handlers deprecate it. +You can find `readystatechange` listeners in really old code, it's there for historical reasons, as there was a time when there were no `load` and other events. Nowadays, `load/error/progress` handlers deprecate it. ## Aborting request @@ -305,7 +303,7 @@ There are 3 methods for HTTP-headers: Headers are returned as a single line, e.g.: - ``` + ```http Cache-Control: max-age=31536000 Content-Length: 4260 Content-Type: image/png @@ -327,6 +325,8 @@ There are 3 methods for HTTP-headers: result[name] = value; return result; }, {}); + + // headers['Content-Type'] = 'image/png' ``` ## POST, FormData @@ -340,14 +340,14 @@ let formData = new FormData([form]); // creates an object, optionally fill from formData.append(name, value); // appends a field ``` -We create it, optionally from a form, `append` more fields if needed, and then: +We create it, optionally fill from a form, `append` more fields if needed, and then: 1. `xhr.open('POST', ...)` – use `POST` method. 2. `xhr.send(formData)` to submit the form to the server. For instance: -```html run +```html run refresh
@@ -365,6 +365,7 @@ For instance: xhr.open("POST", "/article/xmlhttprequest/post/user"); xhr.send(formData); + xhr.onload = () => alert(xhr.response); ``` @@ -388,19 +389,19 @@ xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8'); xhr.send(json); ``` -The `.send(body)` method is pretty omnivore. It can send almost everything, including `Blob` and `BufferSource` objects. +The `.send(body)` method is pretty omnivore. It can send almost any `body`, including `Blob` and `BufferSource` objects. ## Upload progress -The `progress` event only works on the downloading stage. +The `progress` event triggers only on the downloading stage. That is: if we `POST` something, `XMLHttpRequest` first uploads our data (the request body), then downloads the response. If we're uploading something big, then we're surely more interested in tracking the upload progress. But `xhr.onprogress` doesn't help here. -There's another object `xhr.upload`, without methods, exclusively for upload events. +There's another object, without methods, exclusively to track upload events: `xhr.upload`. -The event list is similar to `xhr` events, but `xhr.upload` triggers them on uploading: +It generates events, similar to `xhr`, but `xhr.upload` triggers them solely on uploading: - `loadstart` -- upload started. - `progress` -- triggers periodically during the upload. @@ -519,7 +520,7 @@ There are actually more events, the [modern specification](http://www.w3.org/TR/ The `error`, `abort`, `timeout`, and `load` events are mutually exclusive. Only one of them may happen. -The most used events are load completion (`load`), load failure (`error`), or we can use a single `loadend` handler and check the response to see what happened. +The most used events are load completion (`load`), load failure (`error`), or we can use a single `loadend` handler and check the properties of the request object `xhr` to see what happened. We've already seen another event: `readystatechange`. Historically, it appeared long ago, before the specification settled. Nowadays, there's no need to use it, we can replace it with newer events, but it can often be found in older scripts. diff --git a/5-network/09-resume-upload/article.md b/5-network/09-resume-upload/article.md index 0232d23d..dfe18d0b 100644 --- a/5-network/09-resume-upload/article.md +++ b/5-network/09-resume-upload/article.md @@ -12,9 +12,9 @@ To resume upload, we need to know how much was uploaded till the connection was There's `xhr.upload.onprogress` to track upload progress. -Unfortunately, it's useless here, as it triggers when the data is *sent*, but was it received by the server? The browser doesn't know. +Unfortunately, it won't help us to resume the upload here, as it triggers when the data is *sent*, but was it received by the server? The browser doesn't know. -Maybe it was buffered by a local network proxy, or maybe the remote server process just died and couldn't process them, or it was just lost in the middle when the connection broke, and didn't reach the receiver. +Maybe it was buffered by a local network proxy, or maybe the remote server process just died and couldn't process them, or it was just lost in the middle and didn't reach the receiver. So, this event is only useful to show a nice progress bar. diff --git a/9-regular-expressions/03-regexp-character-classes/hello-java-boundaries.svg b/9-regular-expressions/03-regexp-character-classes/hello-java-boundaries.svg index 2cb2316a..f46673a4 100644 --- a/9-regular-expressions/03-regexp-character-classes/hello-java-boundaries.svg +++ b/9-regular-expressions/03-regexp-character-classes/hello-java-boundaries.svg @@ -1 +1 @@ -Hello, Java ! \ No newline at end of file +H e l l o, J a v a! \ No newline at end of file diff --git a/9-regular-expressions/03-regexp-character-classes/love-html5-classes.svg b/9-regular-expressions/03-regexp-character-classes/love-html5-classes.svg index 994c3911..706e49a3 100644 --- a/9-regular-expressions/03-regexp-character-classes/love-html5-classes.svg +++ b/9-regular-expressions/03-regexp-character-classes/love-html5-classes.svg @@ -1 +1 @@ -I love HTML 5\s \w \w \w \w \ d \ No newline at end of file +I l o v e H T M L 5\w\w\w\w\s\d \ No newline at end of file diff --git a/figures.sketch b/figures.sketch index 4301a635..85c4d442 100644 Binary files a/figures.sketch and b/figures.sketch differ