diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 19be4ec3..4822fdb4 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -75,7 +75,7 @@ Examples of such restrictions include: This limitation is, again, for the user's safety. A page from `http://anysite.com` which a user has opened must not be able to access another browser tab with the URL `http://gmail.com` and steal information from there. - JavaScript can easily communicate over the net to the server where the current page came from. But its ability to receive data from other sites/domains is crippled. Though possible, it requires explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's a safety limitation. -![](limitations.png) +![](limitations.svg) Such limits do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers also allow plugin/extensions which may ask for extended permissions. diff --git a/1-js/01-getting-started/1-intro/limitations.png b/1-js/01-getting-started/1-intro/limitations.png deleted file mode 100644 index 05ecc945..00000000 Binary files a/1-js/01-getting-started/1-intro/limitations.png and /dev/null differ diff --git a/1-js/01-getting-started/1-intro/limitations.svg b/1-js/01-getting-started/1-intro/limitations.svg new file mode 100644 index 00000000..c631336d --- /dev/null +++ b/1-js/01-getting-started/1-intro/limitations.svg @@ -0,0 +1,92 @@ + + + + limitations.svg + Created with sketchtool. + + + + + + + https://javascript.info + + + <script> + ... + </script> + + + + + + + + https://gmail.com + + + + + + + + + + + + + + + + + + + + + + + + https://javascript.info + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/1-js/01-getting-started/1-intro/limitations@2x.png b/1-js/01-getting-started/1-intro/limitations@2x.png deleted file mode 100644 index 382a1f3d..00000000 Binary files a/1-js/01-getting-started/1-intro/limitations@2x.png and /dev/null differ diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md index d1af4c99..09883c2a 100644 --- a/1-js/02-first-steps/04-variables/article.md +++ b/1-js/02-first-steps/04-variables/article.md @@ -99,7 +99,7 @@ We can easily grasp the concept of a "variable" if we imagine it as a "box" for For instance, the variable `message` can be imagined as a box labeled `"message"` with the value `"Hello!"` in it: -![](variable.png) +![](variable.svg) We can put any value in the box. @@ -116,7 +116,7 @@ alert(message); When the value is changed, the old data is removed from the variable: -![](variable-change.png) +![](variable-change.svg) We can also declare two variables and copy data from one into the other. diff --git a/1-js/02-first-steps/04-variables/variable-change.png b/1-js/02-first-steps/04-variables/variable-change.png deleted file mode 100644 index ec1764b8..00000000 Binary files a/1-js/02-first-steps/04-variables/variable-change.png and /dev/null differ diff --git a/1-js/02-first-steps/04-variables/variable-change.svg b/1-js/02-first-steps/04-variables/variable-change.svg new file mode 100644 index 00000000..19363d8d --- /dev/null +++ b/1-js/02-first-steps/04-variables/variable-change.svg @@ -0,0 +1,37 @@ + + + + variable-change.svg + Created with sketchtool. + + + + + + + + + "World!" + + + + + + "Hello!" + + + + + + message + + + + + + + + + + + \ No newline at end of file diff --git a/1-js/02-first-steps/04-variables/variable-change@2x.png b/1-js/02-first-steps/04-variables/variable-change@2x.png deleted file mode 100644 index 437d357c..00000000 Binary files a/1-js/02-first-steps/04-variables/variable-change@2x.png and /dev/null differ diff --git a/1-js/02-first-steps/04-variables/variable.png b/1-js/02-first-steps/04-variables/variable.png deleted file mode 100644 index 43a272ba..00000000 Binary files a/1-js/02-first-steps/04-variables/variable.png and /dev/null differ diff --git a/1-js/02-first-steps/04-variables/variable.svg b/1-js/02-first-steps/04-variables/variable.svg new file mode 100644 index 00000000..9f967d19 --- /dev/null +++ b/1-js/02-first-steps/04-variables/variable.svg @@ -0,0 +1,26 @@ + + + + variable.svg + Created with sketchtool. + + + + + + + + + + "Hello!" + + + + + + message + + + + + \ No newline at end of file diff --git a/1-js/02-first-steps/04-variables/variable@2x.png b/1-js/02-first-steps/04-variables/variable@2x.png deleted file mode 100644 index dfeaef4c..00000000 Binary files a/1-js/02-first-steps/04-variables/variable@2x.png and /dev/null differ diff --git a/1-js/02-first-steps/11-logical-operators/9-check-login/ifelse_task.svg b/1-js/02-first-steps/11-logical-operators/9-check-login/ifelse_task.svg index c391a680..f16e37a6 100644 --- a/1-js/02-first-steps/11-logical-operators/9-check-login/ifelse_task.svg +++ b/1-js/02-first-steps/11-logical-operators/9-check-login/ifelse_task.svg @@ -10,7 +10,7 @@ - Begin + Begin diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index 397e81fe..39ad16a4 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -22,7 +22,7 @@ The toggler button + + + chrome-sources-console.svg + Created with sketchtool. + + + + + + + + + \ No newline at end of file diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console@2x.png b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console@2x.png deleted file mode 100644 index f01a7d10..00000000 Binary files a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console@2x.png and /dev/null differ diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.png b/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.png deleted file mode 100644 index df9e13f3..00000000 Binary files a/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.png and /dev/null differ diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.svg new file mode 100644 index 00000000..27ec5520 --- /dev/null +++ b/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.svg @@ -0,0 +1,55 @@ + + + + chrome-tabs.svg + Created with sketchtool. + + + 2 + + + + + + + + + 1 + + + + + + + + + 3 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-tabs@2x.png b/1-js/03-code-quality/01-debugging-chrome/chrome-tabs@2x.png deleted file mode 100644 index 5793bd05..00000000 Binary files a/1-js/03-code-quality/01-debugging-chrome/chrome-tabs@2x.png and /dev/null differ diff --git a/1-js/03-code-quality/03-comments/article.md b/1-js/03-code-quality/03-comments/article.md index fabe3b78..88e0776d 100644 --- a/1-js/03-code-quality/03-comments/article.md +++ b/1-js/03-code-quality/03-comments/article.md @@ -4,7 +4,7 @@ As we know from the chapter , comments can be single-line: start We normally use them to describe how and why the code works. -At first sight, commenting might be obvious, but novices in programming usually get it wrong. +At first sight, commenting might be obvious, but novices in programming often use them wrongly. ## Bad comments @@ -120,9 +120,9 @@ In reality, we can't totally avoid "explanatory" comments. There are complex alg So, explanatory comments are usually bad. Which comments are good? Describe the architecture -: Provide a high-level overview of components, how they interact, what's the control flow in various situations... In short -- the bird's eye view of the code. There's a special diagram language [UML](http://wikipedia.org/wiki/Unified_Modeling_Language) for high-level architecture diagrams. Definitely worth studying. +: Provide a high-level overview of components, how they interact, what's the control flow in various situations... In short -- the bird's eye view of the code. There's a special language [UML](http://wikipedia.org/wiki/Unified_Modeling_Language) to build high-level architecture diagrams explaining the code. Definitely worth studying. -Document a function usage +Document function parameters and usage : There's a special syntax [JSDoc](http://en.wikipedia.org/wiki/JSDoc) to document a function: usage, parameters, returned value. For instance: 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 3455ac47..a8d6babf 100644 --- a/1-js/03-code-quality/05-testing-mocha/article.md +++ b/1-js/03-code-quality/05-testing-mocha/article.md @@ -18,15 +18,15 @@ For instance, we're creating a function `f`. Wrote some code, testing: `f(1)` wo That's very typical. When we develop something, we keep a lot of possible use cases in mind. But it's hard to expect a programmer to check all of them manually after every change. So it becomes easy to fix one thing and break another one. -**Automated testing means that tests are written separately, in addition to the code. They can be executed automatically and check all the main use cases.** +**Automated testing means that tests are written separately, in addition to the code. They run our functions in various ways and compare results with the expected.** ## Behavior Driven Development (BDD) -Let's use a technique named [Behavior Driven Development](http://en.wikipedia.org/wiki/Behavior-driven_development) or, in short, BDD. That approach is used among many projects. BDD is not just about testing. That's more. +Let's start with a technique named [Behavior Driven Development](http://en.wikipedia.org/wiki/Behavior-driven_development) or, in short, BDD. **BDD is three things in one: tests AND documentation AND examples.** -Let's see the example. +To understand BDD, we'll examine a practical case of development. ## Development of "pow": the spec @@ -36,7 +36,7 @@ That task is just an example: there's the `**` operator in JavaScript that can d Before creating the code of `pow`, we can imagine what the function should do and describe it. -Such description is called a *specification* or, in short, a spec, and looks like this: +Such description is called a *specification* or, in short, a spec, and contains descriptions of use cases together with tests for them, like this: ```js describe("pow", function() { @@ -51,7 +51,7 @@ describe("pow", function() { A spec has three main building blocks that you can see above: `describe("title", function() { ... })` -: What functionality we're describing. Uses to group "workers" -- the `it` blocks. In our case we're describing the function `pow`. +: What functionality we're describing. In our case we're describing the function `pow`. Used to group "workers" -- the `it` blocks. `it("use case description", function() { ... })` : In the title of `it` we *in a human-readable way* describe the particular use case, and the second argument is a function that tests it. @@ -59,9 +59,9 @@ A spec has three main building blocks that you can see above: `assert.equal(value1, value2)` : The code inside `it` block, if the implementation is correct, should execute without errors. - Functions `assert.*` are used to check whether `pow` works as expected. Right here we're using one of them -- `assert.equal`, it compares arguments and yields an error if they are not equal. Here it checks that the result of `pow(2, 3)` equals `8`. + Functions `assert.*` are used to check whether `pow` works as expected. Right here we're using one of them -- `assert.equal`, it compares arguments and yields an error if they are not equal. Here it checks that the result of `pow(2, 3)` equals `8`. There are other types of comparisons and checks, that we'll add later. - There are other types of comparisons and checks that we'll see further. +The specification can be executed, and it will run the test specified in `it` block. We'll see that later. ## The development flow @@ -79,7 +79,7 @@ So, the development is *iterative*. We write the spec, implement it, make sure t Let's see this development flow in our practical case. -The first step is complete: we have an initial spec for `pow`. Now, before making the implementaton, let's use few JavaScript libraries to run the tests, just to see that they are working (they will all fail). +The first step is already complete: we have an initial spec for `pow`. Now, before making the implementaton, let's use few JavaScript libraries to run the tests, just to see that they are working (they will all fail). ## The spec in action @@ -336,10 +336,9 @@ The result with new tests: The newly added tests fail, because our implementation does not support them. That's how BDD is done: first we write failing tests, and then make an implementation for them. ```smart header="Other assertions" - Please note the assertion `assert.isNaN`: it checks for `NaN`. -There are other assertions in Chai as well, for instance: +There are other assertions in [Chai](http://chaijs.com) as well, for instance: - `assert.equal(value1, value2)` -- checks the equality `value1 == value2`. - `assert.strictEqual(value1, value2)` -- checks the strict equality `value1 === value2`. @@ -380,9 +379,9 @@ In BDD, the spec goes first, followed by implementation. At the end we have both The spec can be used in three ways: -1. **Tests** guarantee that the code works correctly. -2. **Docs** -- the titles of `describe` and `it` tell what the function does. -3. **Examples** -- the tests are actually working examples showing how a function can be used. +1. As **Tests** - they guarantee that the code works correctly. +2. As **Docs** -- the titles of `describe` and `it` tell what the function does. +3. As **Examples** -- the tests are actually working examples showing how a function can be used. With the spec, we can safely improve, change, even rewrite the function from scratch and make sure it still works right. diff --git a/1-js/03-code-quality/06-polyfills/article.md b/1-js/03-code-quality/06-polyfills/article.md index f4df5998..9f4694ba 100644 --- a/1-js/03-code-quality/06-polyfills/article.md +++ b/1-js/03-code-quality/06-polyfills/article.md @@ -29,8 +29,8 @@ Actually, there are two parts in Babel: A script that updates/adds new functions is called "polyfill". It "fills in" the gap and adds missing implementations. Two interesting polyfills are: - - [babel polyfill](https://babeljs.io/docs/usage/polyfill/) that supports a lot, but is big. - - [polyfill.io](http://polyfill.io) service that allows to load/construct polyfills on-demand, depending on the features we need. + - [core js](https://github.com/zloirock/core-js) that supports a lot, allows to include only needed features. + - [polyfill.io](http://polyfill.io) service that provides a script with polyfills, depending on the features and user's browser. So, if we're going to use modern language features, a transpiler and a polyfill are necessary. diff --git a/1-js/04-object-basics/01-object/article.md b/1-js/04-object-basics/01-object/article.md index e776faad..27a71428 100644 --- a/1-js/04-object-basics/01-object/article.md +++ b/1-js/04-object-basics/01-object/article.md @@ -9,7 +9,7 @@ An object can be created with figure brackets `{…}` with an optional list of * We can imagine an object as a cabinet with signed files. Every piece of data is stored in its file by the key. It's easy to find a file by its name or add/remove a file. -![](object.png) +![](object.svg) An empty object ("empty cabinet") can be created using one of two syntaxes: @@ -18,7 +18,7 @@ let user = new Object(); // "object constructor" syntax let user = {}; // "object literal" syntax ``` -![](object-user-empty.png) +![](object-user-empty.svg) Usually, the figure brackets `{...}` are used. That declaration is called an *object literal*. @@ -42,7 +42,7 @@ In the `user` object, there are two properties: The resulting `user` object can be imagined as a cabinet with two signed files labeled "name" and "age". -![user object](object-user.png) +![user object](object-user.svg) We can add, remove and read files from it any time. @@ -60,7 +60,7 @@ The value can be of any type. Let's add a boolean one: user.isAdmin = true; ``` -![user object 2](object-user-isadmin.png) +![user object 2](object-user-isadmin.svg) To remove a property, we can use `delete` operator: @@ -68,7 +68,7 @@ To remove a property, we can use `delete` operator: delete user.age; ``` -![user object 3](object-user-delete.png) +![user object 3](object-user-delete.svg) We can also use multiword property names, but then they must be quoted: @@ -80,7 +80,7 @@ let user = { }; ``` -![](object-user-props.png) +![](object-user-props.svg) The last property in the list may end with a comma: @@ -474,7 +474,7 @@ let phrase = message; As a result we have two independent variables, each one is storing the string `"Hello!"`. -![](variable-copy-value.png) +![](variable-copy-value.svg) Objects are not like that. @@ -488,7 +488,7 @@ let user = { }; ``` -![](variable-contains-reference.png) +![](variable-contains-reference.svg) Here, the object is stored somewhere in memory. And the variable `user` has a "reference" to it. @@ -506,7 +506,7 @@ let admin = user; // copy the reference Now we have two variables, each one with the reference to the same object: -![](variable-copy-reference.png) +![](variable-copy-reference.svg) We can use any variable to access the cabinet and modify its contents: diff --git a/1-js/04-object-basics/01-object/object-user-delete.png b/1-js/04-object-basics/01-object/object-user-delete.png deleted file mode 100644 index 8702675c..00000000 Binary files a/1-js/04-object-basics/01-object/object-user-delete.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/object-user-delete.svg b/1-js/04-object-basics/01-object/object-user-delete.svg new file mode 100644 index 00000000..89cc8643 --- /dev/null +++ b/1-js/04-object-basics/01-object/object-user-delete.svg @@ -0,0 +1,36 @@ + + + + object-user-delete.svg + Created with sketchtool. + + + + + + + + + + + name + + + + + + + + + isAdmin + + + + + + user + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/object-user-delete@2x.png b/1-js/04-object-basics/01-object/object-user-delete@2x.png deleted file mode 100644 index 6f41d574..00000000 Binary files a/1-js/04-object-basics/01-object/object-user-delete@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/object-user-empty.png b/1-js/04-object-basics/01-object/object-user-empty.png deleted file mode 100644 index 6b1f27a6..00000000 Binary files a/1-js/04-object-basics/01-object/object-user-empty.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/object-user-empty.svg b/1-js/04-object-basics/01-object/object-user-empty.svg new file mode 100644 index 00000000..2b25a0e7 --- /dev/null +++ b/1-js/04-object-basics/01-object/object-user-empty.svg @@ -0,0 +1,21 @@ + + + + object-user-empty.svg + Created with sketchtool. + + + + + + + + empty + + + user + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/object-user-empty@2x.png b/1-js/04-object-basics/01-object/object-user-empty@2x.png deleted file mode 100644 index 47b6d9f6..00000000 Binary files a/1-js/04-object-basics/01-object/object-user-empty@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/object-user-isadmin.png b/1-js/04-object-basics/01-object/object-user-isadmin.png deleted file mode 100644 index 2ce66a49..00000000 Binary files a/1-js/04-object-basics/01-object/object-user-isadmin.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/object-user-isadmin.svg b/1-js/04-object-basics/01-object/object-user-isadmin.svg new file mode 100644 index 00000000..e201e7f9 --- /dev/null +++ b/1-js/04-object-basics/01-object/object-user-isadmin.svg @@ -0,0 +1,45 @@ + + + + object-user-isadmin.svg + Created with sketchtool. + + + + + + + + + + + name + + + + + + + + + age + + + + + + + + + isAdmin + + + + + + user + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/object-user-isadmin@2x.png b/1-js/04-object-basics/01-object/object-user-isadmin@2x.png deleted file mode 100644 index 2d76b267..00000000 Binary files a/1-js/04-object-basics/01-object/object-user-isadmin@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/object-user-props.png b/1-js/04-object-basics/01-object/object-user-props.png deleted file mode 100644 index b0486e90..00000000 Binary files a/1-js/04-object-basics/01-object/object-user-props.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/object-user-props.svg b/1-js/04-object-basics/01-object/object-user-props.svg new file mode 100644 index 00000000..adf5ee6d --- /dev/null +++ b/1-js/04-object-basics/01-object/object-user-props.svg @@ -0,0 +1,45 @@ + + + + object-user-props.svg + Created with sketchtool. + + + + + + + + + + + name + + + + + + + + + age + + + + + + + + + likes birds + + + + + + user + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/object-user-props@2x.png b/1-js/04-object-basics/01-object/object-user-props@2x.png deleted file mode 100644 index c1e1b71f..00000000 Binary files a/1-js/04-object-basics/01-object/object-user-props@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/object-user.png b/1-js/04-object-basics/01-object/object-user.png deleted file mode 100644 index 6215b820..00000000 Binary files a/1-js/04-object-basics/01-object/object-user.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/object-user.svg b/1-js/04-object-basics/01-object/object-user.svg new file mode 100644 index 00000000..7309232a --- /dev/null +++ b/1-js/04-object-basics/01-object/object-user.svg @@ -0,0 +1,36 @@ + + + + object-user.svg + Created with sketchtool. + + + + + + + + + + + name + + + + + + + + + age + + + + + + user + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/object-user@2x.png b/1-js/04-object-basics/01-object/object-user@2x.png deleted file mode 100644 index d06a4e8c..00000000 Binary files a/1-js/04-object-basics/01-object/object-user@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/object.png b/1-js/04-object-basics/01-object/object.png deleted file mode 100644 index a853c9c3..00000000 Binary files a/1-js/04-object-basics/01-object/object.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/object.svg b/1-js/04-object-basics/01-object/object.svg new file mode 100644 index 00000000..d2275b66 --- /dev/null +++ b/1-js/04-object-basics/01-object/object.svg @@ -0,0 +1,41 @@ + + + + object.svg + Created with sketchtool. + + + + + + + + + + + key1 + + + + + + + + + key2 + + + + + + + + + key3 + + + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/object@2x.png b/1-js/04-object-basics/01-object/object@2x.png deleted file mode 100644 index 12011ff5..00000000 Binary files a/1-js/04-object-basics/01-object/object@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/variable-contains-reference.png b/1-js/04-object-basics/01-object/variable-contains-reference.png deleted file mode 100644 index e5573bac..00000000 Binary files a/1-js/04-object-basics/01-object/variable-contains-reference.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/variable-contains-reference.svg b/1-js/04-object-basics/01-object/variable-contains-reference.svg new file mode 100644 index 00000000..092efa36 --- /dev/null +++ b/1-js/04-object-basics/01-object/variable-contains-reference.svg @@ -0,0 +1,36 @@ + + + + variable-contains-reference.svg + Created with sketchtool. + + + + + + + + + user + + + + + + + + + + + + + + + name + + + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/variable-contains-reference@2x.png b/1-js/04-object-basics/01-object/variable-contains-reference@2x.png deleted file mode 100644 index eec1ea2f..00000000 Binary files a/1-js/04-object-basics/01-object/variable-contains-reference@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/variable-copy-reference.png b/1-js/04-object-basics/01-object/variable-copy-reference.png deleted file mode 100644 index 3f2d4592..00000000 Binary files a/1-js/04-object-basics/01-object/variable-copy-reference.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/variable-copy-reference.svg b/1-js/04-object-basics/01-object/variable-copy-reference.svg new file mode 100644 index 00000000..4dc2d89f --- /dev/null +++ b/1-js/04-object-basics/01-object/variable-copy-reference.svg @@ -0,0 +1,56 @@ + + + + variable-copy-reference.svg + Created with sketchtool. + + + + + + + + + + user + + + + + + + + + + + + + + + + + admin + + + + + + + + + + + + + + + + + name + + + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/variable-copy-reference@2x.png b/1-js/04-object-basics/01-object/variable-copy-reference@2x.png deleted file mode 100644 index a8a6767d..00000000 Binary files a/1-js/04-object-basics/01-object/variable-copy-reference@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/variable-copy-value.png b/1-js/04-object-basics/01-object/variable-copy-value.png deleted file mode 100644 index ae7c158f..00000000 Binary files a/1-js/04-object-basics/01-object/variable-copy-value.png and /dev/null differ diff --git a/1-js/04-object-basics/01-object/variable-copy-value.svg b/1-js/04-object-basics/01-object/variable-copy-value.svg new file mode 100644 index 00000000..ea048d4a --- /dev/null +++ b/1-js/04-object-basics/01-object/variable-copy-value.svg @@ -0,0 +1,40 @@ + + + + variable-copy-value.svg + Created with sketchtool. + + + + + + + + + + "Hello!" + + + + + + message + + + + + + + + + "Hello!" + + + + + phrase + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/01-object/variable-copy-value@2x.png b/1-js/04-object-basics/01-object/variable-copy-value@2x.png deleted file mode 100644 index 52be5d9a..00000000 Binary files a/1-js/04-object-basics/01-object/variable-copy-value@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/article.md b/1-js/04-object-basics/02-garbage-collection/article.md index 42d35e7b..620cbc21 100644 --- a/1-js/04-object-basics/02-garbage-collection/article.md +++ b/1-js/04-object-basics/02-garbage-collection/article.md @@ -38,7 +38,7 @@ let user = { }; ``` -![](memory-user-john.png) +![](memory-user-john.svg) Here the arrow depicts an object reference. The global variable `"user"` references the object `{name: "John"}` (we'll call it John for brevity). The `"name"` property of John stores a primitive, so it's painted inside the object. @@ -48,7 +48,7 @@ If the value of `user` is overwritten, the reference is lost: user = null; ``` -![](memory-user-john-lost.png) +![](memory-user-john-lost.svg) Now John becomes unreachable. There's no way to access it, no references to it. Garbage collector will junk the data and free the memory. @@ -67,7 +67,7 @@ let admin = user; */!* ``` -![](memory-user-john-admin.png) +![](memory-user-john-admin.svg) Now if we do the same: ```js @@ -102,7 +102,7 @@ Function `marry` "marries" two objects by giving them references to each other a The resulting memory structure: -![](family.png) +![](family.svg) As of now, all objects are reachable. @@ -113,19 +113,19 @@ delete family.father; delete family.mother.husband; ``` -![](family-delete-refs.png) +![](family-delete-refs.svg) It's not enough to delete only one of these two references, because all objects would still be reachable. But if we delete both, then we can see that John has no incoming reference any more: -![](family-no-father.png) +![](family-no-father.svg) Outgoing references do not matter. Only incoming ones can make an object reachable. So, John is now unreachable and will be removed from the memory with all its data that also became unaccessible. After garbage collection: -![](family-no-father-2.png) +![](family-no-father-2.svg) ## Unreachable island @@ -139,7 +139,7 @@ family = null; The in-memory picture becomes: -![](family-no-family.png) +![](family-no-family.svg) This example demonstrates how important the concept of reachability is. @@ -161,25 +161,25 @@ The following "garbage collection" steps are regularly performed: For instance, let our object structure look like this: -![](garbage-collection-1.png) +![](garbage-collection-1.svg) We can clearly see an "unreachable island" to the right side. Now let's see how "mark-and-sweep" garbage collector deals with it. The first step marks the roots: -![](garbage-collection-2.png) +![](garbage-collection-2.svg) Then their references are marked: -![](garbage-collection-3.png) +![](garbage-collection-3.svg) ...And their references, while possible: -![](garbage-collection-4.png) +![](garbage-collection-4.svg) Now the objects that could not be visited in the process are considered unreachable and will be removed: -![](garbage-collection-5.png) +![](garbage-collection-5.svg) That's the concept of how garbage collection works. diff --git a/1-js/04-object-basics/02-garbage-collection/family-delete-refs.png b/1-js/04-object-basics/02-garbage-collection/family-delete-refs.png deleted file mode 100644 index 96d4ed03..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/family-delete-refs.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/family-delete-refs.svg b/1-js/04-object-basics/02-garbage-collection/family-delete-refs.svg new file mode 100644 index 00000000..a67ffc3c --- /dev/null +++ b/1-js/04-object-basics/02-garbage-collection/family-delete-refs.svg @@ -0,0 +1,56 @@ + + + + family-delete-refs.svg + Created with sketchtool. + + + + + + <global variable> + + + + Object + + + + Object + + + wife + + + family + + + name: "John" + + + + name: "Ann" + + + mother + + + Object + + + + + + + + + + + father + + + husband + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/02-garbage-collection/family-delete-refs@2x.png b/1-js/04-object-basics/02-garbage-collection/family-delete-refs@2x.png deleted file mode 100644 index 748b4a5c..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/family-delete-refs@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/family-no-family.png b/1-js/04-object-basics/02-garbage-collection/family-no-family.png deleted file mode 100644 index f89226de..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/family-no-family.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/family-no-family.svg b/1-js/04-object-basics/02-garbage-collection/family-no-family.svg new file mode 100644 index 00000000..df860121 --- /dev/null +++ b/1-js/04-object-basics/02-garbage-collection/family-no-family.svg @@ -0,0 +1,57 @@ + + + + family-no-family.svg + Created with sketchtool. + + + + + + <global> + + + + Object + + + + Object + + + father + + + wife + + + name: "John" + + + + name: "Ann" + + + mother + + + Object + + + + + husband + + + + + family: null + + + + + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/02-garbage-collection/family-no-family@2x.png b/1-js/04-object-basics/02-garbage-collection/family-no-family@2x.png deleted file mode 100644 index f6961a98..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/family-no-family@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/family-no-father-2.png b/1-js/04-object-basics/02-garbage-collection/family-no-father-2.png deleted file mode 100644 index 823d0a61..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/family-no-father-2.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/family-no-father-2.svg b/1-js/04-object-basics/02-garbage-collection/family-no-father-2.svg new file mode 100644 index 00000000..50278590 --- /dev/null +++ b/1-js/04-object-basics/02-garbage-collection/family-no-father-2.svg @@ -0,0 +1,33 @@ + + + + family-no-father-2.svg + Created with sketchtool. + + + + + Object + + + family + + + + name: "Ann" + + + mother + + + Object + + + + + + <global> + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/02-garbage-collection/family-no-father-2@2x.png b/1-js/04-object-basics/02-garbage-collection/family-no-father-2@2x.png deleted file mode 100644 index 9e100d52..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/family-no-father-2@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/family-no-father.png b/1-js/04-object-basics/02-garbage-collection/family-no-father.png deleted file mode 100644 index c239a898..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/family-no-father.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/family-no-father.svg b/1-js/04-object-basics/02-garbage-collection/family-no-father.svg new file mode 100644 index 00000000..9837ced8 --- /dev/null +++ b/1-js/04-object-basics/02-garbage-collection/family-no-father.svg @@ -0,0 +1,50 @@ + + + + family-no-father.svg + Created with sketchtool. + + + + + Object + + + + Object + + + wife + + + family + + + name: "John" + + + + name: "Ann" + + + mother + + + Object + + + + + + + + + + + + + <global> + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/02-garbage-collection/family-no-father@2x.png b/1-js/04-object-basics/02-garbage-collection/family-no-father@2x.png deleted file mode 100644 index 468f4cc6..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/family-no-father@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/family.png b/1-js/04-object-basics/02-garbage-collection/family.png deleted file mode 100644 index a454af47..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/family.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/family.svg b/1-js/04-object-basics/02-garbage-collection/family.svg new file mode 100644 index 00000000..6c66e856 --- /dev/null +++ b/1-js/04-object-basics/02-garbage-collection/family.svg @@ -0,0 +1,52 @@ + + + + family.svg + Created with sketchtool. + + + + + + Object + + + + Object + + + father + + + wife + + + family + + + name: "John" + + + + name: "Ann" + + + mother + + + Object + + + + + + husband + + + + + <global variable> + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/02-garbage-collection/family@2x.png b/1-js/04-object-basics/02-garbage-collection/family@2x.png deleted file mode 100644 index 7a0183ee..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/family@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-1.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-1.png deleted file mode 100644 index 5cfe664c..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/garbage-collection-1.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-1.svg b/1-js/04-object-basics/02-garbage-collection/garbage-collection-1.svg new file mode 100644 index 00000000..d3bc5ce9 --- /dev/null +++ b/1-js/04-object-basics/02-garbage-collection/garbage-collection-1.svg @@ -0,0 +1,162 @@ + + + + garbage-collection-1.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + <global> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-1@2x.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-1@2x.png deleted file mode 100644 index 790a6b82..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/garbage-collection-1@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-2.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-2.png deleted file mode 100644 index 2bbe4241..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/garbage-collection-2.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-2.svg b/1-js/04-object-basics/02-garbage-collection/garbage-collection-2.svg new file mode 100644 index 00000000..c7311022 --- /dev/null +++ b/1-js/04-object-basics/02-garbage-collection/garbage-collection-2.svg @@ -0,0 +1,178 @@ + + + + garbage-collection-2.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + <global> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-2@2x.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-2@2x.png deleted file mode 100644 index c697c5c8..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/garbage-collection-2@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-3.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-3.png deleted file mode 100644 index 665a2278..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/garbage-collection-3.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-3.svg b/1-js/04-object-basics/02-garbage-collection/garbage-collection-3.svg new file mode 100644 index 00000000..a0ce257e --- /dev/null +++ b/1-js/04-object-basics/02-garbage-collection/garbage-collection-3.svg @@ -0,0 +1,190 @@ + + + + garbage-collection-3.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + <global> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-3@2x.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-3@2x.png deleted file mode 100644 index d7e56d88..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/garbage-collection-3@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-4.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-4.png deleted file mode 100644 index 4ba6e17e..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/garbage-collection-4.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-4.svg b/1-js/04-object-basics/02-garbage-collection/garbage-collection-4.svg new file mode 100644 index 00000000..bc5a035c --- /dev/null +++ b/1-js/04-object-basics/02-garbage-collection/garbage-collection-4.svg @@ -0,0 +1,194 @@ + + + + garbage-collection-4.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + <global> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-4@2x.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-4@2x.png deleted file mode 100644 index 50b31a11..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/garbage-collection-4@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-5.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-5.png deleted file mode 100644 index 35c8816d..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/garbage-collection-5.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-5.svg b/1-js/04-object-basics/02-garbage-collection/garbage-collection-5.svg new file mode 100644 index 00000000..150aa926 --- /dev/null +++ b/1-js/04-object-basics/02-garbage-collection/garbage-collection-5.svg @@ -0,0 +1,212 @@ + + + + garbage-collection-5.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + <global> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + unreachables + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/02-garbage-collection/garbage-collection-5@2x.png b/1-js/04-object-basics/02-garbage-collection/garbage-collection-5@2x.png deleted file mode 100644 index 79ed5e4b..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/garbage-collection-5@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/memory-user-john-admin.png b/1-js/04-object-basics/02-garbage-collection/memory-user-john-admin.png deleted file mode 100644 index 9ddac3e2..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/memory-user-john-admin.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/memory-user-john-admin.svg b/1-js/04-object-basics/02-garbage-collection/memory-user-john-admin.svg new file mode 100644 index 00000000..bc7a23d3 --- /dev/null +++ b/1-js/04-object-basics/02-garbage-collection/memory-user-john-admin.svg @@ -0,0 +1,29 @@ + + + + memory-user-john-admin.svg + Created with sketchtool. + + + + user + + + + name: "John" + + + Object + + + + admin + + + + + <global> + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/02-garbage-collection/memory-user-john-admin@2x.png b/1-js/04-object-basics/02-garbage-collection/memory-user-john-admin@2x.png deleted file mode 100644 index 9069781f..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/memory-user-john-admin@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/memory-user-john-lost.png b/1-js/04-object-basics/02-garbage-collection/memory-user-john-lost.png deleted file mode 100644 index ae1684b2..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/memory-user-john-lost.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/memory-user-john-lost.svg b/1-js/04-object-basics/02-garbage-collection/memory-user-john-lost.svg new file mode 100644 index 00000000..78009e31 --- /dev/null +++ b/1-js/04-object-basics/02-garbage-collection/memory-user-john-lost.svg @@ -0,0 +1,30 @@ + + + + memory-user-john-lost.svg + Created with sketchtool. + + + + + name: "John" + + + Object + + + + user: null + + + <global> + + + + + + + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/02-garbage-collection/memory-user-john-lost@2x.png b/1-js/04-object-basics/02-garbage-collection/memory-user-john-lost@2x.png deleted file mode 100644 index c510380f..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/memory-user-john-lost@2x.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/memory-user-john.png b/1-js/04-object-basics/02-garbage-collection/memory-user-john.png deleted file mode 100644 index 2ad00b6c..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/memory-user-john.png and /dev/null differ diff --git a/1-js/04-object-basics/02-garbage-collection/memory-user-john.svg b/1-js/04-object-basics/02-garbage-collection/memory-user-john.svg new file mode 100644 index 00000000..45ce86ed --- /dev/null +++ b/1-js/04-object-basics/02-garbage-collection/memory-user-john.svg @@ -0,0 +1,25 @@ + + + + memory-user-john.svg + Created with sketchtool. + + + + user + + + + name: "John" + + + Object + + + + + <global> + + + + \ No newline at end of file diff --git a/1-js/04-object-basics/02-garbage-collection/memory-user-john@2x.png b/1-js/04-object-basics/02-garbage-collection/memory-user-john@2x.png deleted file mode 100644 index f365ac03..00000000 Binary files a/1-js/04-object-basics/02-garbage-collection/memory-user-john@2x.png and /dev/null differ diff --git a/1-js/05-data-types/04-array/array-pop.png b/1-js/05-data-types/04-array/array-pop.png deleted file mode 100644 index 4d6867b1..00000000 Binary files a/1-js/05-data-types/04-array/array-pop.png and /dev/null differ diff --git a/1-js/05-data-types/04-array/array-pop.svg b/1-js/05-data-types/04-array/array-pop.svg new file mode 100644 index 00000000..6334430f --- /dev/null +++ b/1-js/05-data-types/04-array/array-pop.svg @@ -0,0 +1,69 @@ + + + + array-pop.svg + Created with sketchtool. + + + + + + 0 + + + 1 + + + + 2 + + + + 3 + + + "Apple" + + + "Orange" + + + "Pear" + + + "Lemon" + + + length = 4 + + + + clear + + + + + 0 + + + 1 + + + + 2 + + + "Apple" + + + "Orange" + + + "Pear" + + + length = 3 + + + + \ No newline at end of file diff --git a/1-js/05-data-types/04-array/array-pop@2x.png b/1-js/05-data-types/04-array/array-pop@2x.png deleted file mode 100644 index c65ef944..00000000 Binary files a/1-js/05-data-types/04-array/array-pop@2x.png and /dev/null differ diff --git a/1-js/05-data-types/04-array/array-shift.png b/1-js/05-data-types/04-array/array-shift.png deleted file mode 100644 index 5798a647..00000000 Binary files a/1-js/05-data-types/04-array/array-shift.png and /dev/null differ diff --git a/1-js/05-data-types/04-array/array-shift.svg b/1-js/05-data-types/04-array/array-shift.svg new file mode 100644 index 00000000..3c60c081 --- /dev/null +++ b/1-js/05-data-types/04-array/array-shift.svg @@ -0,0 +1,101 @@ + + + + array-shift.svg + Created with sketchtool. + + + + 1 + + + + 2 + + + + 3 + + + "Orange" + + + "Pear" + + + "Lemon" + + + length = 4 + + + + + + 2 + + + + 3 + + + "Orange" + + + "Pear" + + + "Lemon" + + + length = 3 + + + + clear + + + move + + elements + to the left + + + + + 0 + + + "Apple" + + + + + + 0 + + + 1 + + + + 2 + + + "Orange" + + + "Pear" + + + "Lemon" + + + 1 + + + 1 + + + + \ No newline at end of file diff --git a/1-js/05-data-types/04-array/array-shift@2x.png b/1-js/05-data-types/04-array/array-shift@2x.png deleted file mode 100644 index ba95f265..00000000 Binary files a/1-js/05-data-types/04-array/array-shift@2x.png and /dev/null differ diff --git a/1-js/05-data-types/04-array/array-speed.png b/1-js/05-data-types/04-array/array-speed.png deleted file mode 100644 index a400d0c1..00000000 Binary files a/1-js/05-data-types/04-array/array-speed.png and /dev/null differ diff --git a/1-js/05-data-types/04-array/array-speed.svg b/1-js/05-data-types/04-array/array-speed.svg new file mode 100644 index 00000000..091f0fa5 --- /dev/null +++ b/1-js/05-data-types/04-array/array-speed.svg @@ -0,0 +1,48 @@ + + + + array-speed.svg + Created with sketchtool. + + + + + + 0 + + + 1 + + + + 2 + + + + 3 + + + + + pop + + + + + unshift + + + + + push + + + + + shift + + + + + + \ No newline at end of file diff --git a/1-js/05-data-types/04-array/array-speed@2x.png b/1-js/05-data-types/04-array/array-speed@2x.png deleted file mode 100644 index 11a3e67c..00000000 Binary files a/1-js/05-data-types/04-array/array-speed@2x.png and /dev/null differ diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md index c91a9e23..22c5c02c 100644 --- a/1-js/05-data-types/04-array/article.md +++ b/1-js/05-data-types/04-array/article.md @@ -100,7 +100,7 @@ A [queue](https://en.wikipedia.org/wiki/Queue_(abstract_data_type)) is one of th - `push` appends an element to the end. - `shift` get an element from the beginning, advancing the queue, so that the 2nd element becomes the 1st. -![](queue.png) +![](queue.svg) Arrays support both operations. @@ -117,7 +117,7 @@ So new elements are added or taken always from the "end". A stack is usually illustrated as a pack of cards: new cards are added to the top or taken from the top: -![](stack.png) +![](stack.svg) For stacks, the latest pushed item is received first, that's also called LIFO (Last-In-First-Out) principle. For queues, we have FIFO (First-In-First-Out). @@ -239,7 +239,7 @@ Please think of arrays as special structures to work with the *ordered data*. Th Methods `push/pop` run fast, while `shift/unshift` are slow. -![](array-speed.png) +![](array-speed.svg) Why is it faster to work with the end of an array than with its beginning? Let's see what happens during the execution: @@ -255,7 +255,7 @@ The `shift` operation must do 3 things: 2. Move all elements to the left, renumber them from the index `1` to `0`, from `2` to `1` and so on. 3. Update the `length` property. -![](array-shift.png) +![](array-shift.svg) **The more elements in the array, the more time to move them, more in-memory operations.** @@ -269,7 +269,7 @@ The actions for the `pop` operation: fruits.pop(); // take 1 element from the end ``` -![](array-pop.png) +![](array-pop.svg) **The `pop` method does not need to move anything, because other elements keep their indexes. That's why it's blazingly fast.** diff --git a/1-js/05-data-types/04-array/queue.png b/1-js/05-data-types/04-array/queue.png deleted file mode 100644 index 39af3bed..00000000 Binary files a/1-js/05-data-types/04-array/queue.png and /dev/null differ diff --git a/1-js/05-data-types/04-array/queue.svg b/1-js/05-data-types/04-array/queue.svg new file mode 100644 index 00000000..12c23b93 --- /dev/null +++ b/1-js/05-data-types/04-array/queue.svg @@ -0,0 +1,22 @@ + + + + queue.svg + Created with sketchtool. + + + + + + + + + + push + + + shift + + + + \ No newline at end of file diff --git a/1-js/05-data-types/04-array/queue@2x.png b/1-js/05-data-types/04-array/queue@2x.png deleted file mode 100644 index 75045a51..00000000 Binary files a/1-js/05-data-types/04-array/queue@2x.png and /dev/null differ diff --git a/1-js/05-data-types/04-array/stack.png b/1-js/05-data-types/04-array/stack.png deleted file mode 100644 index 7d259935..00000000 Binary files a/1-js/05-data-types/04-array/stack.png and /dev/null differ diff --git a/1-js/05-data-types/04-array/stack.svg b/1-js/05-data-types/04-array/stack.svg new file mode 100644 index 00000000..6719153f --- /dev/null +++ b/1-js/05-data-types/04-array/stack.svg @@ -0,0 +1,22 @@ + + + + stack.svg + Created with sketchtool. + + + + + + + + + + push + + + pop + + + + \ No newline at end of file diff --git a/1-js/05-data-types/04-array/stack@2x.png b/1-js/05-data-types/04-array/stack@2x.png deleted file mode 100644 index 16c62251..00000000 Binary files a/1-js/05-data-types/04-array/stack@2x.png and /dev/null differ diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md index 4261f52b..00198954 100644 --- a/1-js/05-data-types/05-array-methods/article.md +++ b/1-js/05-data-types/05-array-methods/article.md @@ -568,7 +568,7 @@ Let's see the details of what's going on. The calculation flow: -![](reduce.png) +![](reduce.svg) Or in the form of a table, where each row represents a function call on the next array element: diff --git a/1-js/05-data-types/05-array-methods/reduce.png b/1-js/05-data-types/05-array-methods/reduce.png deleted file mode 100644 index 7566c4d8..00000000 Binary files a/1-js/05-data-types/05-array-methods/reduce.png and /dev/null differ diff --git a/1-js/05-data-types/05-array-methods/reduce.svg b/1-js/05-data-types/05-array-methods/reduce.svg new file mode 100644 index 00000000..f77f156c --- /dev/null +++ b/1-js/05-data-types/05-array-methods/reduce.svg @@ -0,0 +1,64 @@ + + + + reduce.svg + Created with sketchtool. + + + + + 1 + + + sum + 0 + current + 1 + + + + 2 + + + sum + 0+1 + current + 2 + + + + 3 + + + sum + 0+1+2 + current + 3 + + + + 4 + + + sum + 0+1+2+3 + current + 4 + + + + 5 + + + sum + 0+1+2+3+4 + current + 5 + + + + 0+1+2+3+4+5 = 15 + + + + \ No newline at end of file diff --git a/1-js/05-data-types/05-array-methods/reduce@2x.png b/1-js/05-data-types/05-array-methods/reduce@2x.png deleted file mode 100644 index 7c9fd669..00000000 Binary files a/1-js/05-data-types/05-array-methods/reduce@2x.png and /dev/null differ diff --git a/1-js/05-data-types/10-destructuring-assignment/article.md b/1-js/05-data-types/10-destructuring-assignment/article.md index 50b68752..ddd3f167 100644 --- a/1-js/05-data-types/10-destructuring-assignment/article.md +++ b/1-js/05-data-types/10-destructuring-assignment/article.md @@ -393,7 +393,7 @@ The whole `options` object except `extra` that was not mentioned, is assigned to Note that `size` and `items` itself is not destructured. -![](destructuring-complex.png) +![](destructuring-complex.svg) Finally, we have `width`, `height`, `item1`, `item2` and `title` from the default value. diff --git a/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.png b/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.png deleted file mode 100644 index c46bf6e4..00000000 Binary files a/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.png and /dev/null differ diff --git a/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg b/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg new file mode 100644 index 00000000..c3e25b56 --- /dev/null +++ b/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg @@ -0,0 +1,59 @@ + + + + destructuring-complex.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/1-js/05-data-types/10-destructuring-assignment/destructuring-complex@2x.png b/1-js/05-data-types/10-destructuring-assignment/destructuring-complex@2x.png deleted file mode 100644 index 26032a3d..00000000 Binary files a/1-js/05-data-types/10-destructuring-assignment/destructuring-complex@2x.png and /dev/null differ diff --git a/1-js/05-data-types/12-json/article.md b/1-js/05-data-types/12-json/article.md index cce3d1df..ec0844e3 100644 --- a/1-js/05-data-types/12-json/article.md +++ b/1-js/05-data-types/12-json/article.md @@ -170,7 +170,7 @@ JSON.stringify(meetup); // Error: Converting circular structure to JSON Here, the conversion fails, because of circular reference: `room.occupiedBy` references `meetup`, and `meetup.place` references `room`: -![](json-meetup.png) +![](json-meetup.svg) ## Excluding and transforming: replacer diff --git a/1-js/05-data-types/12-json/json-meetup.png b/1-js/05-data-types/12-json/json-meetup.png deleted file mode 100644 index 26866642..00000000 Binary files a/1-js/05-data-types/12-json/json-meetup.png and /dev/null differ diff --git a/1-js/05-data-types/12-json/json-meetup.svg b/1-js/05-data-types/12-json/json-meetup.svg new file mode 100644 index 00000000..5e192934 --- /dev/null +++ b/1-js/05-data-types/12-json/json-meetup.svg @@ -0,0 +1,35 @@ + + + + json-meetup.svg + Created with sketchtool. + + + + + number: 23 + + + + title: "Conference" + + + + ... + + + place + + + + + occupiedBy + + + + participants + + + + + \ No newline at end of file diff --git a/1-js/05-data-types/12-json/json-meetup@2x.png b/1-js/05-data-types/12-json/json-meetup@2x.png deleted file mode 100644 index a8f2cd60..00000000 Binary files a/1-js/05-data-types/12-json/json-meetup@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.png b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.png deleted file mode 100644 index a64cb183..00000000 Binary files a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.png and /dev/null differ diff --git a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.svg b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.svg new file mode 100644 index 00000000..d5a8ba23 --- /dev/null +++ b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.svg @@ -0,0 +1,72 @@ + + + + fibonacci-recursion-tree.svg + Created with sketchtool. + + + + fib + ( + 5 + ) + + + + + + + + + + + + + + + + + fib(4) + + + fib(3) + + + fib(3) + + + fib(2) + + + fib(0) + + + fib(1) + + + fib(1) + + + fib(2) + + + fib(0) + + + fib(1) + + + fib(1) + + + fib(2) + + + fib(0) + + + fib(1) + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree@2x.png b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree@2x.png deleted file mode 100644 index 950639ef..00000000 Binary files a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/solution.md b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/solution.md index 91bcecc0..36524a45 100644 --- a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/solution.md +++ b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/solution.md @@ -29,7 +29,7 @@ Here we can see that the value of `fib(3)` is needed for both `fib(5)` and `fib( Here's the full recursion tree: -![fibonacci recursion tree](fibonacci-recursion-tree.png) +![fibonacci recursion tree](fibonacci-recursion-tree.svg) We can clearly notice that `fib(3)` is evaluated two times and `fib(2)` is evaluated three times. The total amount of computations grows much faster than `n`, making it enormous even for `n=77`. diff --git a/1-js/06-advanced-functions/01-recursion/article.md b/1-js/06-advanced-functions/01-recursion/article.md index 3964818b..9805b5b9 100644 --- a/1-js/06-advanced-functions/01-recursion/article.md +++ b/1-js/06-advanced-functions/01-recursion/article.md @@ -373,7 +373,7 @@ The code is short and easy to understand (hopefully?). That's the power of recur Here's the diagram of calls: -![recursive salaries](recursive-salaries.png) +![recursive salaries](recursive-salaries.svg) We can easily see the principle: for an object `{...}` subcalls are made, while arrays `[...]` are the "leaves" of the recursion tree, they give immediate result. @@ -444,7 +444,7 @@ let list = { Graphical representation of the list: -![linked list](linked-list.png) +![linked list](linked-list.svg) An alternative code for creation: @@ -464,7 +464,7 @@ let secondList = list.next.next; list.next.next = null; ``` -![linked list split](linked-list-split.png) +![linked list split](linked-list-split.svg) To join: @@ -488,7 +488,7 @@ list = { value: "new item", next: list }; */!* ``` -![linked list](linked-list-0.png) +![linked list](linked-list-0.svg) To remove a value from the middle, change `next` of the previous one: @@ -496,7 +496,7 @@ To remove a value from the middle, change `next` of the previous one: list.next = list.next.next; ``` -![linked list](linked-list-remove-1.png) +![linked list](linked-list-remove-1.svg) We made `list.next` jump over `1` to value `2`. The value `1` is now excluded from the chain. If it's not stored anywhere else, it will be automatically removed from the memory. diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-0.png b/1-js/06-advanced-functions/01-recursion/linked-list-0.png deleted file mode 100644 index c694e702..00000000 Binary files a/1-js/06-advanced-functions/01-recursion/linked-list-0.png and /dev/null differ diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-0.svg b/1-js/06-advanced-functions/01-recursion/linked-list-0.svg new file mode 100644 index 00000000..97e80b26 --- /dev/null +++ b/1-js/06-advanced-functions/01-recursion/linked-list-0.svg @@ -0,0 +1,71 @@ + + + + linked-list-0.svg + Created with sketchtool. + + + + + value + + + 1 + + + + next + + + + value + + + "new item" + + + + next + + + + value + + + 2 + + + + next + + + + value + + + 3 + + + + next + + + + value + + + 4 + + + + next + + + null + + + list + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-0@2x.png b/1-js/06-advanced-functions/01-recursion/linked-list-0@2x.png deleted file mode 100644 index 1fe50ace..00000000 Binary files a/1-js/06-advanced-functions/01-recursion/linked-list-0@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-remove-1.png b/1-js/06-advanced-functions/01-recursion/linked-list-remove-1.png deleted file mode 100644 index ea4d5083..00000000 Binary files a/1-js/06-advanced-functions/01-recursion/linked-list-remove-1.png and /dev/null differ diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-remove-1.svg b/1-js/06-advanced-functions/01-recursion/linked-list-remove-1.svg new file mode 100644 index 00000000..95946635 --- /dev/null +++ b/1-js/06-advanced-functions/01-recursion/linked-list-remove-1.svg @@ -0,0 +1,71 @@ + + + + linked-list-remove-1.svg + Created with sketchtool. + + + + + value + + + "new item" + + + + next + + + + value + + + 1 + + + + next + + + + value + + + 2 + + + + next + + + + value + + + 3 + + + + next + + + + value + + + 4 + + + + next + + + null + + + list + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-remove-1@2x.png b/1-js/06-advanced-functions/01-recursion/linked-list-remove-1@2x.png deleted file mode 100644 index d0feafc3..00000000 Binary files a/1-js/06-advanced-functions/01-recursion/linked-list-remove-1@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-split.png b/1-js/06-advanced-functions/01-recursion/linked-list-split.png deleted file mode 100644 index 310a3606..00000000 Binary files a/1-js/06-advanced-functions/01-recursion/linked-list-split.png and /dev/null differ diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-split.svg b/1-js/06-advanced-functions/01-recursion/linked-list-split.svg new file mode 100644 index 00000000..6032a85a --- /dev/null +++ b/1-js/06-advanced-functions/01-recursion/linked-list-split.svg @@ -0,0 +1,66 @@ + + + + linked-list-split.svg + Created with sketchtool. + + + + + value + + + 1 + + + + next + + + + value + + + 2 + + + + next + + + + value + + + 3 + + + + next + + + + value + + + 4 + + + + next + + + null + + + null + + + secondList + + + list + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/01-recursion/linked-list-split@2x.png b/1-js/06-advanced-functions/01-recursion/linked-list-split@2x.png deleted file mode 100644 index 2de39ca4..00000000 Binary files a/1-js/06-advanced-functions/01-recursion/linked-list-split@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/01-recursion/linked-list.png b/1-js/06-advanced-functions/01-recursion/linked-list.png deleted file mode 100644 index 80fabffc..00000000 Binary files a/1-js/06-advanced-functions/01-recursion/linked-list.png and /dev/null differ diff --git a/1-js/06-advanced-functions/01-recursion/linked-list.svg b/1-js/06-advanced-functions/01-recursion/linked-list.svg new file mode 100644 index 00000000..4955c436 --- /dev/null +++ b/1-js/06-advanced-functions/01-recursion/linked-list.svg @@ -0,0 +1,60 @@ + + + + linked-list.svg + Created with sketchtool. + + + + + value + + + 1 + + + + next + + + + value + + + 2 + + + + next + + + + value + + + 3 + + + + next + + + + value + + + 4 + + + + next + + + null + + + list + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/01-recursion/linked-list@2x.png b/1-js/06-advanced-functions/01-recursion/linked-list@2x.png deleted file mode 100644 index 1e6dc148..00000000 Binary files a/1-js/06-advanced-functions/01-recursion/linked-list@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/01-recursion/recursive-salaries.png b/1-js/06-advanced-functions/01-recursion/recursive-salaries.png deleted file mode 100644 index 68d843de..00000000 Binary files a/1-js/06-advanced-functions/01-recursion/recursive-salaries.png and /dev/null differ diff --git a/1-js/06-advanced-functions/01-recursion/recursive-salaries.svg b/1-js/06-advanced-functions/01-recursion/recursive-salaries.svg new file mode 100644 index 00000000..a3314e5e --- /dev/null +++ b/1-js/06-advanced-functions/01-recursion/recursive-salaries.svg @@ -0,0 +1,90 @@ + + + + recursive-salaries.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/01-recursion/recursive-salaries@2x.png b/1-js/06-advanced-functions/01-recursion/recursive-salaries@2x.png deleted file mode 100644 index e7da5175..00000000 Binary files a/1-js/06-advanced-functions/01-recursion/recursive-salaries@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy.png b/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy.png deleted file mode 100644 index 8e39564f..00000000 Binary files a/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy.svg b/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy.svg new file mode 100644 index 00000000..aa5e2d6e --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy.svg @@ -0,0 +1,93 @@ + + + + lexenv-makearmy.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + outer + + + + + + + + + i: 0 + + + + + + + + + i: 1 + + + + + + + + + i: 2 + + + + + + + + + i: 10 + + + + ... + + + makeArmy() + Lexical Environment + + + for block + Lexical Environment + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy@2x.png b/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy@2x.png deleted file mode 100644 index 39cc13a4..00000000 Binary files a/1-js/06-advanced-functions/03-closure/8-make-army/lexenv-makearmy@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/8-make-army/solution.md b/1-js/06-advanced-functions/03-closure/8-make-army/solution.md index f5afd426..0fb0b4a4 100644 --- a/1-js/06-advanced-functions/03-closure/8-make-army/solution.md +++ b/1-js/06-advanced-functions/03-closure/8-make-army/solution.md @@ -84,7 +84,7 @@ Now it works correctly, because every time the code block in `for (let i=0...) { So, the value of `i` now lives a little bit closer. Not in `makeArmy()` Lexical Environment, but in the Lexical Environment that corresponds the current loop iteration. That's why now it works. -![](lexenv-makearmy.png) +![](lexenv-makearmy.svg) Here we rewrote `while` into `for`. diff --git a/1-js/06-advanced-functions/03-closure/article.md b/1-js/06-advanced-functions/03-closure/article.md index 70b1738d..633c7a1c 100644 --- a/1-js/06-advanced-functions/03-closure/article.md +++ b/1-js/06-advanced-functions/03-closure/article.md @@ -74,7 +74,7 @@ The Lexical Environment object consists of two parts: For instance, in this simple code, there is only one Lexical Environment: -![lexical environment](lexical-environment-global.png) +![lexical environment](lexical-environment-global.svg) This is a so-called global Lexical Environment, associated with the whole script. @@ -82,7 +82,7 @@ On the picture above, the rectangle means Environment Record (variable store) an Here's the bigger picture of what happens when a `let` changes: -![lexical environment](lexical-environment-global-2.png) +![lexical environment](lexical-environment-global-2.svg) Rectangles on the right-hand side demonstrate how the global Lexical Environment changes during the execution: @@ -110,7 +110,7 @@ That is why we can call a function declaration before it is defined. The code below demonstrates that the Lexical Environment is non-empty from the beginning. It has `say`, because that's a Function Declaration. And later it gets `phrase`, declared with `let`: -![lexical environment](lexical-environment-global-3.png) +![lexical environment](lexical-environment-global-3.svg) ### Inner and outer Lexical Environment @@ -134,7 +134,7 @@ For instance, for `say("John")`, it looks like this (the execution is at the lin say("John"); // Hello, John ```--> -![lexical environment](lexical-environment-simple.png) +![lexical environment](lexical-environment-simple.svg) So, during the function call we have two Lexical Environments: the inner one (for the function call) and the outer one (global): @@ -156,7 +156,7 @@ Let's see how the search proceeds in our example: - When the `alert` inside `say` wants to access `name`, it finds it immediately in the function Lexical Environment. - When it wants to access `phrase`, then there is no `phrase` locally, so it follows the reference to the enclosing Lexical Environment and finds it there. -![lexical environment lookup](lexical-environment-simple-lookup.png) +![lexical environment lookup](lexical-environment-simple-lookup.svg) Now we can give the answer to the first question from the beginning of the chapter. @@ -265,7 +265,7 @@ How does the counter work internally? When the inner function runs, the variable in `count++` is searched from inside out. For the example above, the order will be: -![](lexical-search-order.png) +![](lexical-search-order.svg) 1. The locals of the nested function... 2. The variables of the outer function... @@ -319,7 +319,7 @@ Please note the additional `[[Environment]]` property is covered here. We didn't 1. When the script has just started, there is only global Lexical Environment: - ![](lexenv-nested-makecounter-1.png) + ![](lexenv-nested-makecounter-1.svg) At that starting moment there is only `makeCounter` function, because it's a Function Declaration. It did not run yet. @@ -331,7 +331,7 @@ Please note the additional `[[Environment]]` property is covered here. We didn't 2. The code runs on, the new global variable `counter` is declared and for its value `makeCounter()` is called. Here's a snapshot of the moment when the execution is on the first line inside `makeCounter()`: - ![](lexenv-nested-makecounter-2.png) + ![](lexenv-nested-makecounter-2.svg) At the moment of the call of `makeCounter()`, the Lexical Environment is created, to hold its variables and arguments. @@ -347,19 +347,19 @@ Please note the additional `[[Environment]]` property is covered here. We didn't For our new nested function the value of `[[Environment]]` is the current Lexical Environment of `makeCounter()` (where it was born): - ![](lexenv-nested-makecounter-3.png) + ![](lexenv-nested-makecounter-3.svg) Please note that on this step the inner function was created, but not yet called. The code inside `function() { return count++; }` is not running. 4. As the execution goes on, the call to `makeCounter()` finishes, and the result (the tiny nested function) is assigned to the global variable `counter`: - ![](lexenv-nested-makecounter-4.png) + ![](lexenv-nested-makecounter-4.svg) That function has only one line: `return count++`, that will be executed when we run it. 5. When the `counter()` is called, an "empty" Lexical Environment is created for it. It has no local variables by itself. But the `[[Environment]]` of `counter` is used as the outer reference for it, so it has access to the variables of the former `makeCounter()` call where it was created: - ![](lexenv-nested-makecounter-5.png) + ![](lexenv-nested-makecounter-5.svg) Now if it accesses a variable, it first searches its own Lexical Environment (empty), then the Lexical Environment of the former `makeCounter()` call, then the global one. @@ -371,7 +371,7 @@ Please note the additional `[[Environment]]` property is covered here. We didn't 6. The call to `counter()` not only returns the value of `count`, but also increases it. Note that the modification is done "in place". The value of `count` is modified exactly in the environment where it was found. - ![](lexenv-nested-makecounter-6.png) + ![](lexenv-nested-makecounter-6.svg) So we return to the previous step with the only change -- the new value of `count`. The following calls all do the same. @@ -381,7 +381,7 @@ The answer to the second question from the beginning of the chapter should now b The `work()` function in the code below uses the `name` from the place of its origin through the outer lexical environment reference: -![](lexenv-nested-work.png) +![](lexenv-nested-work.svg) So, the result is `"Pete"` here. @@ -420,7 +420,7 @@ In the example below, the `user` variable exists only in the `if` block: alert(user); // Error, can't see such variable! ```--> -![](lexenv-if.png) +![](lexenv-if.svg) When the execution gets into the `if` block, the new "if-only" Lexical Environment is created for it. diff --git a/1-js/06-advanced-functions/03-closure/lexenv-if.png b/1-js/06-advanced-functions/03-closure/lexenv-if.png deleted file mode 100644 index 5a11b65d..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-if.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexenv-if.svg b/1-js/06-advanced-functions/03-closure/lexenv-if.svg new file mode 100644 index 00000000..f7be2dcb --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/lexenv-if.svg @@ -0,0 +1,69 @@ + + + + lexenv-if.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + phrase: "Hello" + + + + + + + + + + + + + + outer + + + + + + outer + + + + null + + + + + user: "John" + + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexenv-if@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-if@2x.png deleted file mode 100644 index 794676cd..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-if@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1.png deleted file mode 100644 index c6083a45..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1.svg b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1.svg new file mode 100644 index 00000000..4d610007 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1.svg @@ -0,0 +1,39 @@ + + + + lexenv-nested-makecounter-1.svg + Created with sketchtool. + + + + + + + + + + + + makeCounter: function + + + + [[Environment]] + + + + + outer + + + + + + + + null + + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1@2x.png deleted file mode 100644 index af57c51c..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-1@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.png deleted file mode 100644 index dce67876..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.svg b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.svg new file mode 100644 index 00000000..17f5121a --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.svg @@ -0,0 +1,69 @@ + + + + lexenv-nested-makecounter-2.svg + Created with sketchtool. + + + + + + + + + + + + + + + + makeCounter: function + + + + + + counter: undefined + + + + + + + + + + + + + + count: 0 + + + + + + outer + + + + + + outer + + + + null + + + + global Lexical Environment + + + Lexical Environment + of makeCounter() call + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2@2x.png deleted file mode 100644 index 9bba88bc..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.png deleted file mode 100644 index 4d5a787c..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.svg b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.svg new file mode 100644 index 00000000..88ab7b6b --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.svg @@ -0,0 +1,71 @@ + + + + lexenv-nested-makecounter-3.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + makeCounter: function + + + + + + counter: undefined + + + + + + + + + + + + + + count: 0 + + + + + + outer + + + + + + outer + + + + null + + + [[Environment]] + + + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3@2x.png deleted file mode 100644 index c7575f4d..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.png deleted file mode 100644 index 70b4a09b..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.svg b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.svg new file mode 100644 index 00000000..ea78dcf8 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.svg @@ -0,0 +1,86 @@ + + + + lexenv-nested-makecounter-4.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + makeCounter: function + + + + + + counter: + function + + + + + + + + + + + + + + count: 0 + + + + + + outer + + + + + + outer + + + + null + + + [[Environment]] + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4@2x.png deleted file mode 100644 index 4cc762c1..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.png deleted file mode 100644 index 7410dddc..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.svg b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.svg new file mode 100644 index 00000000..3eb46414 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.svg @@ -0,0 +1,95 @@ + + + + lexenv-nested-makecounter-5.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + makeCounter: function + + + + + + counter: function + + + + + + + + + + + + + + count: 0 + + + + + + + + + + + <empty> + + + + + + outer + + + + + + outer + + + + + + outer + + + + null + + + + [[Environment]] + + + + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5@2x.png deleted file mode 100644 index 103c66fb..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.png deleted file mode 100644 index 44366ed7..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.svg b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.svg new file mode 100644 index 00000000..4ccc06b8 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.svg @@ -0,0 +1,85 @@ + + + + lexenv-nested-makecounter-6.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + makeCounter: function + + + + + + counter: function + + + + + + + + + + + + + + count: 1 + + + + + + outer + + + + + + outer + + + + null + + + [[Environment]] + + + + + modified here + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6@2x.png deleted file mode 100644 index 36df7cad..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-work.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-work.png deleted file mode 100644 index 3bdf5108..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-nested-work.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-work.svg b/1-js/06-advanced-functions/03-closure/lexenv-nested-work.svg new file mode 100644 index 00000000..d8e0b737 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/lexenv-nested-work.svg @@ -0,0 +1,90 @@ + + + + lexenv-nested-work.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + makeWorker: function + name: "John" + + + + + + + + + + + + + + + + + + + <empty> + + + + + + outer + + + + + + outer + + + + + + outer + + + + null + + + + + name: "Pete" + + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexenv-nested-work@2x.png b/1-js/06-advanced-functions/03-closure/lexenv-nested-work@2x.png deleted file mode 100644 index 023dba05..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexenv-nested-work@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global-2.png b/1-js/06-advanced-functions/03-closure/lexical-environment-global-2.png deleted file mode 100644 index 342bdae9..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexical-environment-global-2.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global-2.svg b/1-js/06-advanced-functions/03-closure/lexical-environment-global-2.svg new file mode 100644 index 00000000..e0a27886 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/lexical-environment-global-2.svg @@ -0,0 +1,64 @@ + + + + lexical-environment-global-2.svg + Created with sketchtool. + + + + + + phrase: "Bye" + + + + + + phrase: "Hello" + + + + + + phrase: undefined + + + + + + <empty> + + + + + + outer + + + + null + + + + + + + + + + + + + + + + execution start + + + + + + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global-2@2x.png b/1-js/06-advanced-functions/03-closure/lexical-environment-global-2@2x.png deleted file mode 100644 index 55306e66..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexical-environment-global-2@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global-3.png b/1-js/06-advanced-functions/03-closure/lexical-environment-global-3.png deleted file mode 100644 index 1cd77f8a..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexical-environment-global-3.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global-3.svg b/1-js/06-advanced-functions/03-closure/lexical-environment-global-3.svg new file mode 100644 index 00000000..00369f9b --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/lexical-environment-global-3.svg @@ -0,0 +1,61 @@ + + + + lexical-environment-global-3.svg + Created with sketchtool. + + + + + + say: function + phrase: "Hello" + + + + + + say: function + + + + + + outer + + + + null + + + + + + + + + + + + + + + + + + + + + + + + + + + execution start + + + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global-3@2x.png b/1-js/06-advanced-functions/03-closure/lexical-environment-global-3@2x.png deleted file mode 100644 index 3e256bbb..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexical-environment-global-3@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global.png b/1-js/06-advanced-functions/03-closure/lexical-environment-global.png deleted file mode 100644 index 6899a777..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexical-environment-global.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global.svg b/1-js/06-advanced-functions/03-closure/lexical-environment-global.svg new file mode 100644 index 00000000..006c63f0 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/lexical-environment-global.svg @@ -0,0 +1,40 @@ + + + + lexical-environment-global.svg + Created with sketchtool. + + + + + + phrase: "Hello" + + + + + + outer + + + + null + + + + + + + + + + + + + + LexicalEnvironment + + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-global@2x.png b/1-js/06-advanced-functions/03-closure/lexical-environment-global@2x.png deleted file mode 100644 index 91980cf8..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexical-environment-global@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.png b/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.png deleted file mode 100644 index 56aafaf3..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.svg b/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.svg new file mode 100644 index 00000000..4b547ab1 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.svg @@ -0,0 +1,73 @@ + + + + lexical-environment-simple-lookup.svg + Created with sketchtool. + + + + + + + + + + + + + + say: function + phrase: "Hello" + + + + + + name: "John" + + + + + + outer + + + + + + outer + + + + null + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup@2x.png b/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup@2x.png deleted file mode 100644 index f423b125..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-simple.png b/1-js/06-advanced-functions/03-closure/lexical-environment-simple.png deleted file mode 100644 index 2424fbf2..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexical-environment-simple.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-simple.svg b/1-js/06-advanced-functions/03-closure/lexical-environment-simple.svg new file mode 100644 index 00000000..c93c78e7 --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/lexical-environment-simple.svg @@ -0,0 +1,67 @@ + + + + lexical-environment-simple.svg + Created with sketchtool. + + + + + + + + + + + + + + say: function + phrase: "Hello" + + + + + + name: "John" + + + + + + outer + + + + + + outer + + + + null + + + + + + + + + + + + + + + + + + + + the new function Lexical Environment + + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexical-environment-simple@2x.png b/1-js/06-advanced-functions/03-closure/lexical-environment-simple@2x.png deleted file mode 100644 index b206cbe8..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexical-environment-simple@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexical-search-order.png b/1-js/06-advanced-functions/03-closure/lexical-search-order.png deleted file mode 100644 index 1b641d48..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexical-search-order.png and /dev/null differ diff --git a/1-js/06-advanced-functions/03-closure/lexical-search-order.svg b/1-js/06-advanced-functions/03-closure/lexical-search-order.svg new file mode 100644 index 00000000..74c096ff --- /dev/null +++ b/1-js/06-advanced-functions/03-closure/lexical-search-order.svg @@ -0,0 +1,48 @@ + + + + lexical-search-order.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1 + + + 2 + + + 3 + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/03-closure/lexical-search-order@2x.png b/1-js/06-advanced-functions/03-closure/lexical-search-order@2x.png deleted file mode 100644 index f06bc3ed..00000000 Binary files a/1-js/06-advanced-functions/03-closure/lexical-search-order@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/article.md b/1-js/06-advanced-functions/08-settimeout-setinterval/article.md index 61c01f33..dedf1599 100644 --- a/1-js/06-advanced-functions/08-settimeout-setinterval/article.md +++ b/1-js/06-advanced-functions/08-settimeout-setinterval/article.md @@ -200,7 +200,7 @@ setTimeout(function run() { For `setInterval` the internal scheduler will run `func(i)` every 100ms: -![](setinterval-interval.png) +![](setinterval-interval.svg) Did you notice? @@ -216,7 +216,7 @@ In the edge case, if the function always executes longer than `delay` ms, then t And here is the picture for the recursive `setTimeout`: -![](settimeout-interval.png) +![](settimeout-interval.svg) **The recursive `setTimeout` guarantees the fixed delay (here 100ms).** diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.png b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.png deleted file mode 100644 index 844c5378..00000000 Binary files a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.png and /dev/null differ diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.svg b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.svg new file mode 100644 index 00000000..23ca0e0e --- /dev/null +++ b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.svg @@ -0,0 +1,40 @@ + + + + setinterval-interval.svg + Created with sketchtool. + + + + + + func(1) + + + + + + func(2) + + + + + + func(3) + + + + + 100 + + + 200 + + + 300 + + + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval@2x.png b/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval@2x.png deleted file mode 100644 index 4fbf122c..00000000 Binary files a/1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.png b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.png deleted file mode 100644 index f59e157f..00000000 Binary files a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.png and /dev/null differ diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.svg b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.svg new file mode 100644 index 00000000..a9a7cd09 --- /dev/null +++ b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.svg @@ -0,0 +1,39 @@ + + + + settimeout-interval.svg + Created with sketchtool. + + + + + + func(1) + + + + + + func(2) + + + + + + func(3) + + + + + + + 100 + + + 100 + + + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval@2x.png b/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval@2x.png deleted file mode 100644 index ed99391c..00000000 Binary files a/1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval@2x.png and /dev/null differ diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 33a4bb8f..600f0ea1 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -53,7 +53,7 @@ Now let's get into details of how it works. The result of `cachingDecorator(func)` is a "wrapper": `function(x)` that "wraps" the call of `func(x)` into caching logic: -![](decorator-makecaching-wrapper.png) +![](decorator-makecaching-wrapper.svg) As we can see, the wrapper returns the result of `func(x)` "as is". From an outside code, the wrapped `slow` function still does the same. It just got a caching aspect added to its behavior. diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.png b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.png deleted file mode 100644 index d9541c76..00000000 Binary files a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.png and /dev/null differ diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg new file mode 100644 index 00000000..7092d120 --- /dev/null +++ b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg @@ -0,0 +1,64 @@ + + + + decorator-makecaching-wrapper.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + wrapper + + + around the function + + + + + \ No newline at end of file diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper@2x.png b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper@2x.png deleted file mode 100644 index 17eef3f1..00000000 Binary files a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md index c4dd1aac..42e77a83 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/article.md +++ b/1-js/08-prototypes/01-prototype-inheritance/article.md @@ -10,7 +10,7 @@ For instance, we have a `user` object with its properties and methods, and want In JavaScript, objects have a special hidden property `[[Prototype]]` (as named in the specification), that is either `null` or references another object. That object is called "a prototype": -![prototype](object-prototype-empty.png) +![prototype](object-prototype-empty.svg) The prototype is a little bit "magical". When we want to read a property from `object`, and it's missing, JavaScript automatically takes it from the prototype. In programming, such thing is called "prototypal inheritance". Many cool language features and programming techniques are based on it. @@ -66,7 +66,7 @@ Here the line `(*)` sets `animal` to be a prototype of `rabbit`. Then, when `alert` tries to read property `rabbit.eats` `(**)`, it's not in `rabbit`, so JavaScript follows the `[[Prototype]]` reference and finds it in `animal` (look from the bottom up): -![](proto-animal-rabbit.png) +![](proto-animal-rabbit.svg) Here we can say that "`animal` is the prototype of `rabbit`" or "`rabbit` prototypically inherits from `animal`". @@ -97,7 +97,7 @@ rabbit.walk(); // Animal walk The method is automatically taken from the prototype, like this: -![](proto-animal-rabbit-walk.png) +![](proto-animal-rabbit-walk.svg) The prototype chain can be longer: @@ -129,7 +129,7 @@ longEar.walk(); // Animal walk alert(longEar.jumps); // true (from rabbit) ``` -![](proto-animal-rabbit-chain.png) +![](proto-animal-rabbit-chain.svg) There are actually only two limitations: @@ -169,7 +169,7 @@ rabbit.walk(); // Rabbit! Bounce-bounce! From now on, `rabbit.walk()` call finds the method immediately in the object and executes it, without using the prototype: -![](proto-animal-rabbit-walk-2.png) +![](proto-animal-rabbit-walk-2.svg) That's for data properties only, not for accessors. If a property is a getter/setter, then it behaves like a function: getters/setters are looked up in the prototype. @@ -245,7 +245,7 @@ alert(animal.isSleeping); // undefined (no such property in the prototype) The resulting picture: -![](proto-animal-rabbit-walk-3.png) +![](proto-animal-rabbit-walk-3.svg) If we had other objects like `bird`, `snake` etc inheriting from `animal`, they would also gain access to methods of `animal`. But `this` in each method would be the corresponding object, evaluated at the call-time (before dot), not `animal`. So when we write data into `this`, it is stored into these objects. @@ -305,7 +305,7 @@ for(let prop in rabbit) { Here we have the following inheritance chain: `rabbit` inherits from `animal`, that inherits from `Object.prototype` (because `animal` is a literal object `{...}`, so it's by default), and then `null` above it: -![](rabbit-animal-object.png) +![](rabbit-animal-object.svg) Note, there's one funny thing. Where is the method `rabbit.hasOwnProperty` coming from? We did not define it. Looking at the chain we can see that the method is provided by `Object.prototype.hasOwnProperty`. In other words, it's inherited. diff --git a/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.png b/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.png deleted file mode 100644 index 3ecff3fd..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg b/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg new file mode 100644 index 00000000..e1efc1ce --- /dev/null +++ b/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg @@ -0,0 +1,22 @@ + + + + object-prototype-empty.svg + Created with sketchtool. + + + + + prototype object + + + + object + + + + [[Prototype]] + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty@2x.png b/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty@2x.png deleted file mode 100644 index f80e61e6..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.png deleted file mode 100644 index 48e02ad1..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg new file mode 100644 index 00000000..5eda2d9e --- /dev/null +++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg @@ -0,0 +1,40 @@ + + + + proto-animal-rabbit-chain.svg + Created with sketchtool. + + + + + eats: true + walk: function + + + animal + + + + jumps: true + + + rabbit + + + + [[Prototype]] + + + + earLength: 10 + + + longEar + + + + [[Prototype]] + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain@2x.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain@2x.png deleted file mode 100644 index 1a04db88..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.png deleted file mode 100644 index 22b867fc..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg new file mode 100644 index 00000000..a0a495cb --- /dev/null +++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg @@ -0,0 +1,29 @@ + + + + proto-animal-rabbit-walk-2.svg + Created with sketchtool. + + + + + eats: true + walk: function + + + animal + + + + walk: function + + + rabbit + + + + [[Prototype]] + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2@2x.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2@2x.png deleted file mode 100644 index 8d9f9f1a..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.png deleted file mode 100644 index bc76d64b..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg new file mode 100644 index 00000000..541b92d8 --- /dev/null +++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg @@ -0,0 +1,30 @@ + + + + proto-animal-rabbit-walk-3.svg + Created with sketchtool. + + + + + walk: function + sleep: function + + + animal + + + rabbit + + + + [[Prototype]] + + + + name: "White Rabbit" + isSleeping: true + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3@2x.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3@2x.png deleted file mode 100644 index 725a4c15..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.png deleted file mode 100644 index 29fc6d50..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg new file mode 100644 index 00000000..db1208ea --- /dev/null +++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg @@ -0,0 +1,29 @@ + + + + proto-animal-rabbit-walk.svg + Created with sketchtool. + + + + + eats: true + walk: function + + + animal + + + + jumps: true + + + rabbit + + + + [[Prototype]] + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk@2x.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk@2x.png deleted file mode 100644 index 724d6111..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.png deleted file mode 100644 index d50327f0..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg new file mode 100644 index 00000000..2672739e --- /dev/null +++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg @@ -0,0 +1,28 @@ + + + + proto-animal-rabbit.svg + Created with sketchtool. + + + + + eats: true + + + animal + + + + jumps: true + + + rabbit + + + + [[Prototype]] + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit@2x.png b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit@2x.png deleted file mode 100644 index 0506b92b..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.png b/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.png deleted file mode 100644 index c37d0078..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg new file mode 100644 index 00000000..37b318f2 --- /dev/null +++ b/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg @@ -0,0 +1,32 @@ + + + + proto-user-admin.svg + Created with sketchtool. + + + + + name: "John" + surname: "Smith" + set fullName: function + + + + isAdmin: true + name: "Alice" + surname: "Cooper" + + + user + + + admin + + + + [[Prototype]] + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin@2x.png b/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin@2x.png deleted file mode 100644 index 8c3f546e..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.png b/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.png deleted file mode 100644 index 3924233d..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.png and /dev/null differ diff --git a/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.svg b/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.svg new file mode 100644 index 00000000..28daef3a --- /dev/null +++ b/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.svg @@ -0,0 +1,48 @@ + + + + rabbit-animal-object.svg + Created with sketchtool. + + + + + toString: function + hasOwnProperty: function + ... + + + Object.prototype + + + + animal + + + + [[Prototype]] + + + [[Prototype]] + + + + [[Prototype]] + + + null + + + eats: true + + + + rabbit + + + + jumps: true + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object@2x.png b/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object@2x.png deleted file mode 100644 index 5350a193..00000000 Binary files a/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/article.md b/1-js/08-prototypes/02-function-prototype/article.md index 2089e96c..7ed0f9c2 100644 --- a/1-js/08-prototypes/02-function-prototype/article.md +++ b/1-js/08-prototypes/02-function-prototype/article.md @@ -36,7 +36,7 @@ Setting `Rabbit.prototype = animal` literally states the following: "When a `new That's the resulting picture: -![](proto-constructor-animal-rabbit.png) +![](proto-constructor-animal-rabbit.svg) On the picture, `"prototype"` is a horizontal arrow, meaning a regular property, and `[[Prototype]]` is vertical, meaning the inheritance of `rabbit` from `animal`. @@ -62,7 +62,7 @@ Rabbit.prototype = { constructor: Rabbit }; */ ``` -![](function-prototype-constructor.png) +![](function-prototype-constructor.svg) We can check it: @@ -86,7 +86,7 @@ let rabbit = new Rabbit(); // inherits from {constructor: Rabbit} alert(rabbit.constructor == Rabbit); // true (from prototype) ``` -![](rabbit-prototype-constructor.png) +![](rabbit-prototype-constructor.svg) We can use `constructor` property to create a new object using the same constructor as the existing one. diff --git a/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.png b/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.png deleted file mode 100644 index 6ab9c693..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg b/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg new file mode 100644 index 00000000..6aa3710c --- /dev/null +++ b/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg @@ -0,0 +1,26 @@ + + + + function-prototype-constructor.svg + Created with sketchtool. + + + + + + Rabbit + + + + + prototype + + + constructor + + + default "prototype" + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/02-function-prototype/function-prototype-constructor@2x.png b/1-js/08-prototypes/02-function-prototype/function-prototype-constructor@2x.png deleted file mode 100644 index 3beb0a57..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/function-prototype-constructor@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring.png b/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring.png deleted file mode 100644 index c4793867..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring.svg b/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring.svg new file mode 100644 index 00000000..37601da2 --- /dev/null +++ b/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring.svg @@ -0,0 +1,39 @@ + + + + native-prototypes-array-tostring.svg + Created with sketchtool. + + + + + toString: function + + ... + + + Array.prototype + + + + toString: function + ... + + + Object.prototype + + + + + [[Prototype]] + + + + [[Prototype]] + + + [1, 2, 3] + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring@2x.png b/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring@2x.png deleted file mode 100644 index 293c88bf..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/native-prototypes-array-tostring@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/native-prototypes-classes.png b/1-js/08-prototypes/02-function-prototype/native-prototypes-classes.png deleted file mode 100644 index e1c9a970..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/native-prototypes-classes.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/native-prototypes-classes.svg b/1-js/08-prototypes/02-function-prototype/native-prototypes-classes.svg new file mode 100644 index 00000000..a6f78e57 --- /dev/null +++ b/1-js/08-prototypes/02-function-prototype/native-prototypes-classes.svg @@ -0,0 +1,87 @@ + + + + native-prototypes-classes.svg + Created with sketchtool. + + + + + toString: function + other object methods + + + Object.prototype + + + + + null + + + + slice: function + other array methods + + + [[Prototype]] + + + [[Prototype]] + + + [[Prototype]] + + + [[Prototype]] + + + [[Prototype]] + + + [[Prototype]] + + + [[Prototype]] + + + Array.prototype + + + + call: function + other function methods + + + Function.prototype + + + + toFixed: function + other number methods + + + Number.prototype + + + + + + [1, 2, 3] + + + + function f(args) { + ... + } + + + + 5 + + + + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/02-function-prototype/native-prototypes-classes@2x.png b/1-js/08-prototypes/02-function-prototype/native-prototypes-classes@2x.png deleted file mode 100644 index c8858900..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/native-prototypes-classes@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/object-prototype-1.png b/1-js/08-prototypes/02-function-prototype/object-prototype-1.png deleted file mode 100644 index a69cad4a..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/object-prototype-1.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/object-prototype-1.svg b/1-js/08-prototypes/02-function-prototype/object-prototype-1.svg new file mode 100644 index 00000000..8a93d2a8 --- /dev/null +++ b/1-js/08-prototypes/02-function-prototype/object-prototype-1.svg @@ -0,0 +1,38 @@ + + + + object-prototype-1.svg + Created with sketchtool. + + + + + constructor: Object + toString: function + ... + + + + Object.prototype + + + + Object + + + obj = new Object() + + + + + [[Prototype]] + + + prototype + + + constructor + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/02-function-prototype/object-prototype-1@2x.png b/1-js/08-prototypes/02-function-prototype/object-prototype-1@2x.png deleted file mode 100644 index 9d661ac1..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/object-prototype-1@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/object-prototype.png b/1-js/08-prototypes/02-function-prototype/object-prototype.png deleted file mode 100644 index 820ffcc7..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/object-prototype.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/object-prototype.svg b/1-js/08-prototypes/02-function-prototype/object-prototype.svg new file mode 100644 index 00000000..828f61d3 --- /dev/null +++ b/1-js/08-prototypes/02-function-prototype/object-prototype.svg @@ -0,0 +1,30 @@ + + + + object-prototype.svg + Created with sketchtool. + + + + + constructor: Object + toString: function + ... + + + Object.prototype + + + + Object + + + + prototype + + + constructor + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/02-function-prototype/object-prototype@2x.png b/1-js/08-prototypes/02-function-prototype/object-prototype@2x.png deleted file mode 100644 index 1eb7e874..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/object-prototype@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.png b/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.png deleted file mode 100644 index 4b381460..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg b/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg new file mode 100644 index 00000000..447a3b72 --- /dev/null +++ b/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg @@ -0,0 +1,36 @@ + + + + proto-constructor-animal-rabbit.svg + Created with sketchtool. + + + + + eats: true + + + + name: "White Rabbit" + + + animal + + + + Rabbit + + + rabbit + + + + + [[Prototype]] + + + prototype + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit@2x.png b/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit@2x.png deleted file mode 100644 index c6e6ab5f..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/rabbit-animal-object.png b/1-js/08-prototypes/02-function-prototype/rabbit-animal-object.png deleted file mode 100644 index 3924233d..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/rabbit-animal-object.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/rabbit-animal-object.svg b/1-js/08-prototypes/02-function-prototype/rabbit-animal-object.svg new file mode 100644 index 00000000..28daef3a --- /dev/null +++ b/1-js/08-prototypes/02-function-prototype/rabbit-animal-object.svg @@ -0,0 +1,48 @@ + + + + rabbit-animal-object.svg + Created with sketchtool. + + + + + toString: function + hasOwnProperty: function + ... + + + Object.prototype + + + + animal + + + + [[Prototype]] + + + [[Prototype]] + + + + [[Prototype]] + + + null + + + eats: true + + + + rabbit + + + + jumps: true + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/02-function-prototype/rabbit-animal-object@2x.png b/1-js/08-prototypes/02-function-prototype/rabbit-animal-object@2x.png deleted file mode 100644 index 5350a193..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/rabbit-animal-object@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.png b/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.png deleted file mode 100644 index 8f3519a7..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.png and /dev/null differ diff --git a/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg b/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg new file mode 100644 index 00000000..322f7b10 --- /dev/null +++ b/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg @@ -0,0 +1,39 @@ + + + + rabbit-prototype-constructor.svg + Created with sketchtool. + + + + + + + + + + default "prototype" + + + + + Rabbit + + + rabbit + + + + + + [[Prototype]] + + + prototype + + + constructor + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor@2x.png b/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor@2x.png deleted file mode 100644 index 07acb8f4..00000000 Binary files a/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/article.md b/1-js/08-prototypes/03-native-prototypes/article.md index d540be5f..c5e0dbd6 100644 --- a/1-js/08-prototypes/03-native-prototypes/article.md +++ b/1-js/08-prototypes/03-native-prototypes/article.md @@ -19,11 +19,11 @@ Where's the code that generates the string `"[object Object]"`? That's a built-i Here's what's going on: -![](object-prototype.png) +![](object-prototype.svg) When `new Object()` is called (or a literal object `{...}` is created), the `[[Prototype]]` of it is set to `Object.prototype` according to the rule that we discussed in the previous chapter: -![](object-prototype-1.png) +![](object-prototype-1.svg) So then when `obj.toString()` is called the method is taken from `Object.prototype`. @@ -52,7 +52,7 @@ By specification, all of the built-in prototypes have `Object.prototype` on the Here's the overall picture (for 3 built-ins to fit): -![](native-prototypes-classes.png) +![](native-prototypes-classes.svg) Let's check the prototypes manually: @@ -79,7 +79,7 @@ alert(arr); // 1,2,3 <-- the result of Array.prototype.toString As we've seen before, `Object.prototype` has `toString` as well, but `Array.prototype` is closer in the chain, so the array variant is used. -![](native-prototypes-array-tostring.png) +![](native-prototypes-array-tostring.svg) In-browser tools like Chrome developer console also show inheritance (`console.dir` may need to be used for built-in objects): diff --git a/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.png b/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.png deleted file mode 100644 index 6ab9c693..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg b/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg new file mode 100644 index 00000000..6aa3710c --- /dev/null +++ b/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg @@ -0,0 +1,26 @@ + + + + function-prototype-constructor.svg + Created with sketchtool. + + + + + + Rabbit + + + + + prototype + + + constructor + + + default "prototype" + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor@2x.png b/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor@2x.png deleted file mode 100644 index 3beb0a57..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.png b/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.png deleted file mode 100644 index c4793867..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg b/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg new file mode 100644 index 00000000..37601da2 --- /dev/null +++ b/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg @@ -0,0 +1,39 @@ + + + + native-prototypes-array-tostring.svg + Created with sketchtool. + + + + + toString: function + + ... + + + Array.prototype + + + + toString: function + ... + + + Object.prototype + + + + + [[Prototype]] + + + + [[Prototype]] + + + [1, 2, 3] + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring@2x.png b/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring@2x.png deleted file mode 100644 index 293c88bf..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.png b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.png deleted file mode 100644 index e1c9a970..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg new file mode 100644 index 00000000..a6f78e57 --- /dev/null +++ b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg @@ -0,0 +1,87 @@ + + + + native-prototypes-classes.svg + Created with sketchtool. + + + + + toString: function + other object methods + + + Object.prototype + + + + + null + + + + slice: function + other array methods + + + [[Prototype]] + + + [[Prototype]] + + + [[Prototype]] + + + [[Prototype]] + + + [[Prototype]] + + + [[Prototype]] + + + [[Prototype]] + + + Array.prototype + + + + call: function + other function methods + + + Function.prototype + + + + toFixed: function + other number methods + + + Number.prototype + + + + + + [1, 2, 3] + + + + function f(args) { + ... + } + + + + 5 + + + + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes@2x.png b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes@2x.png deleted file mode 100644 index c8858900..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-1.png b/1-js/08-prototypes/03-native-prototypes/object-prototype-1.png deleted file mode 100644 index a69cad4a..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/object-prototype-1.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg b/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg new file mode 100644 index 00000000..8a93d2a8 --- /dev/null +++ b/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg @@ -0,0 +1,38 @@ + + + + object-prototype-1.svg + Created with sketchtool. + + + + + constructor: Object + toString: function + ... + + + + Object.prototype + + + + Object + + + obj = new Object() + + + + + [[Prototype]] + + + prototype + + + constructor + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-1@2x.png b/1-js/08-prototypes/03-native-prototypes/object-prototype-1@2x.png deleted file mode 100644 index 9d661ac1..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/object-prototype-1@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-null.png b/1-js/08-prototypes/03-native-prototypes/object-prototype-null.png deleted file mode 100644 index 792c4f42..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/object-prototype-null.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg b/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg new file mode 100644 index 00000000..ba22dc60 --- /dev/null +++ b/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg @@ -0,0 +1,21 @@ + + + + object-prototype-null.svg + Created with sketchtool. + + + + + obj + + + + [[Prototype]] + + + null + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-null@2x.png b/1-js/08-prototypes/03-native-prototypes/object-prototype-null@2x.png deleted file mode 100644 index d97efa88..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/object-prototype-null@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype.png b/1-js/08-prototypes/03-native-prototypes/object-prototype.png deleted file mode 100644 index 820ffcc7..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/object-prototype.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype.svg b/1-js/08-prototypes/03-native-prototypes/object-prototype.svg new file mode 100644 index 00000000..828f61d3 --- /dev/null +++ b/1-js/08-prototypes/03-native-prototypes/object-prototype.svg @@ -0,0 +1,30 @@ + + + + object-prototype.svg + Created with sketchtool. + + + + + constructor: Object + toString: function + ... + + + Object.prototype + + + + Object + + + + prototype + + + constructor + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype@2x.png b/1-js/08-prototypes/03-native-prototypes/object-prototype@2x.png deleted file mode 100644 index 1eb7e874..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/object-prototype@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.png b/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.png deleted file mode 100644 index 4b381460..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg b/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg new file mode 100644 index 00000000..447a3b72 --- /dev/null +++ b/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg @@ -0,0 +1,36 @@ + + + + proto-constructor-animal-rabbit.svg + Created with sketchtool. + + + + + eats: true + + + + name: "White Rabbit" + + + animal + + + + Rabbit + + + rabbit + + + + + [[Prototype]] + + + prototype + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit@2x.png b/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit@2x.png deleted file mode 100644 index c6e6ab5f..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.png b/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.png deleted file mode 100644 index 8f3519a7..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.png and /dev/null differ diff --git a/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg b/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg new file mode 100644 index 00000000..322f7b10 --- /dev/null +++ b/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg @@ -0,0 +1,39 @@ + + + + rabbit-prototype-constructor.svg + Created with sketchtool. + + + + + + + + + + default "prototype" + + + + + Rabbit + + + rabbit + + + + + + [[Prototype]] + + + prototype + + + constructor + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor@2x.png b/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor@2x.png deleted file mode 100644 index 07acb8f4..00000000 Binary files a/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/04-prototype-methods/article.md b/1-js/08-prototypes/04-prototype-methods/article.md index 71031d6b..9ff71045 100644 --- a/1-js/08-prototypes/04-prototype-methods/article.md +++ b/1-js/08-prototypes/04-prototype-methods/article.md @@ -121,7 +121,7 @@ But `Object` also can serve us well here, because language creators gave a thoug The `__proto__` is not a property of an object, but an accessor property of `Object.prototype`: -![](object-prototype-2.png) +![](object-prototype-2.svg) So, if `obj.__proto__` is read or set, the corresponding getter/setter is called from its prototype, and it gets/sets `[[Prototype]]`. @@ -142,7 +142,7 @@ alert(obj[key]); // "some value" `Object.create(null)` creates an empty object without a prototype (`[[Prototype]]` is `null`): -![](object-prototype-null.png) +![](object-prototype-null.svg) So, there is no inherited getter/setter for `__proto__`. Now it is processed as a regular data property, so the example above works right. diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-2.png b/1-js/08-prototypes/04-prototype-methods/object-prototype-2.png deleted file mode 100644 index 343435af..00000000 Binary files a/1-js/08-prototypes/04-prototype-methods/object-prototype-2.png and /dev/null differ diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg b/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg new file mode 100644 index 00000000..d0bf3464 --- /dev/null +++ b/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg @@ -0,0 +1,38 @@ + + + + object-prototype-2.svg + Created with sketchtool. + + + + + ... + get __proto__: function + set __proto__: function + + + + Object.prototype + + + + Object + + + obj + + + + + [[Prototype]] + + + prototype + + + constructor + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-2@2x.png b/1-js/08-prototypes/04-prototype-methods/object-prototype-2@2x.png deleted file mode 100644 index 86b8a678..00000000 Binary files a/1-js/08-prototypes/04-prototype-methods/object-prototype-2@2x.png and /dev/null differ diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-null.png b/1-js/08-prototypes/04-prototype-methods/object-prototype-null.png deleted file mode 100644 index 792c4f42..00000000 Binary files a/1-js/08-prototypes/04-prototype-methods/object-prototype-null.png and /dev/null differ diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg b/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg new file mode 100644 index 00000000..ba22dc60 --- /dev/null +++ b/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg @@ -0,0 +1,21 @@ + + + + object-prototype-null.svg + Created with sketchtool. + + + + + obj + + + + [[Prototype]] + + + null + + + + \ No newline at end of file diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-null@2x.png b/1-js/08-prototypes/04-prototype-methods/object-prototype-null@2x.png deleted file mode 100644 index d97efa88..00000000 Binary files a/1-js/08-prototypes/04-prototype-methods/object-prototype-null@2x.png and /dev/null differ diff --git a/1-js/09-classes/01-class/article.md b/1-js/09-classes/01-class/article.md index 94bcf7c5..cd6579c0 100644 --- a/1-js/09-classes/01-class/article.md +++ b/1-js/09-classes/01-class/article.md @@ -93,7 +93,7 @@ Afterwards, for `new User` objects, when we call a method, it's taken from the p We can illustrate the result of `class User` declaration as: -![](class-user.png) +![](class-user.svg) Here's the code to introspect it: diff --git a/1-js/09-classes/01-class/class-user.png b/1-js/09-classes/01-class/class-user.png deleted file mode 100644 index dc8b7567..00000000 Binary files a/1-js/09-classes/01-class/class-user.png and /dev/null differ diff --git a/1-js/09-classes/01-class/class-user.svg b/1-js/09-classes/01-class/class-user.svg new file mode 100644 index 00000000..788e1422 --- /dev/null +++ b/1-js/09-classes/01-class/class-user.svg @@ -0,0 +1,29 @@ + + + + class-user.svg + Created with sketchtool. + + + + + sayHi: function + + + + User + + + User.prototype + + + + prototype + + + constructor: User + + + + + \ No newline at end of file diff --git a/1-js/09-classes/01-class/class-user@2x.png b/1-js/09-classes/01-class/class-user@2x.png deleted file mode 100644 index aaa53708..00000000 Binary files a/1-js/09-classes/01-class/class-user@2x.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.png b/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.png deleted file mode 100644 index c610e28c..00000000 Binary files a/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.svg b/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.svg new file mode 100644 index 00000000..8ab56829 --- /dev/null +++ b/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object.svg @@ -0,0 +1,67 @@ + + + + rabbit-extends-object.svg + Created with sketchtool. + + + + + call: function + bind: function + ... + + + + Function.prototype + + + + constructor + + + Object + + + Rabbit + + + + [[Prototype]] + + + + [[Prototype]] + + + constructor + + + + call: function + bind: function + ... + + + + Function.prototype + + + Rabbit + + + + [[Prototype]] + + + constructor + + + class Rabbit + + + class Rabbit extends Object + + + + \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png b/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png deleted file mode 100644 index 4819c7f7..00000000 Binary files a/1-js/09-classes/02-class-inheritance/3-class-extend-object/rabbit-extends-object@2x.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/3-class-extend-object/solution.md b/1-js/09-classes/02-class-inheritance/3-class-extend-object/solution.md index c1483aa3..fa26ec83 100644 --- a/1-js/09-classes/02-class-inheritance/3-class-extend-object/solution.md +++ b/1-js/09-classes/02-class-inheritance/3-class-extend-object/solution.md @@ -71,7 +71,7 @@ By the way, `Function.prototype` has "generic" function methods, like `call`, `b Here's the picture: -![](rabbit-extends-object.png) +![](rabbit-extends-object.svg) So, to put it short, there are two differences: diff --git a/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.png b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.png deleted file mode 100644 index 0d887dbc..00000000 Binary files a/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg new file mode 100644 index 00000000..7a55a504 --- /dev/null +++ b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg @@ -0,0 +1,64 @@ + + + + animal-rabbit-extends.svg + Created with sketchtool. + + + + + constructor: Animal + run: function + stop: function + + + + Animal.prototype + + + + constructor: Rabbit + hide: function + + + Rabbit.prototype + + + + Animal + + + + Rabbit + + + new Rabbit + + + + + [[Prototype]] + + + + [[Prototype]] + + + prototype + + + + prototype + + + name: "White Rabbit" + + + constructor + + + constructor + + + + \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/animal-rabbit-extends@2x.png b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends@2x.png deleted file mode 100644 index af09271a..00000000 Binary files a/1-js/09-classes/02-class-inheritance/animal-rabbit-extends@2x.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/article.md b/1-js/09-classes/02-class-inheritance/article.md index abb7d1e3..29d3188a 100644 --- a/1-js/09-classes/02-class-inheritance/article.md +++ b/1-js/09-classes/02-class-inheritance/article.md @@ -24,7 +24,7 @@ class Animal { let animal = new Animal("My animal"); ``` -![](rabbit-animal-independent-animal.png) +![](rabbit-animal-independent-animal.svg) ...And `Rabbit`: @@ -42,7 +42,7 @@ class Rabbit { let rabbit = new Rabbit("My rabbit"); ``` -![](rabbit-animal-independent-rabbit.png) +![](rabbit-animal-independent-rabbit.svg) Right now they are fully independent. @@ -88,7 +88,7 @@ Now the `Rabbit` code became a bit shorter, as it uses `Animal` constructor by d Internally, `extends` keyword adds `[[Prototype]]` reference from `Rabbit.prototype` to `Animal.prototype`: -![](animal-rabbit-extends.png) +![](animal-rabbit-extends.svg) So, if a method is not found in `Rabbit.prototype`, JavaScript takes it from `Animal.prototype`. @@ -384,7 +384,7 @@ So, in both lines `(*)` and `(**)` the value of `this.__proto__` is exactly the Here's the picture of what happens: -![](this-super-loop.png) +![](this-super-loop.svg) 1. Inside `longEar.eat()`, the line `(**)` calls `rabbit.eat` providing it with `this=longEar`. ```js @@ -501,7 +501,7 @@ The reason is simple: - So its `[[HomeObject]]` is `rabbit`, as it was created in `rabbit`. There's no way to change `[[HomeObject]]`. - The code of `tree.sayHi()` has `super.sayHi()` inside. It goes up from `rabbit` and takes the method from `animal`. -![](super-homeobject-wrong.png) +![](super-homeobject-wrong.svg) ### Methods, not function properties diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.png b/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.png deleted file mode 100644 index 8d30622c..00000000 Binary files a/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.svg b/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.svg new file mode 100644 index 00000000..6f2124eb --- /dev/null +++ b/1-js/09-classes/02-class-inheritance/class-inheritance-array-object.svg @@ -0,0 +1,41 @@ + + + + class-inheritance-array-object.svg + Created with sketchtool. + + + + + slice: function + ... + + + Array.prototype + + + arr + + + + hasOwnProperty: function + ... + + + Object.prototype + + + + + + [1, 2, 3] + + + [[Prototype]] + + + [[Prototype]] + + + + \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-array-object@2x.png b/1-js/09-classes/02-class-inheritance/class-inheritance-array-object@2x.png deleted file mode 100644 index 00f6bd80..00000000 Binary files a/1-js/09-classes/02-class-inheritance/class-inheritance-array-object@2x.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.png b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.png deleted file mode 100644 index f8afbbcd..00000000 Binary files a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.svg b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.svg new file mode 100644 index 00000000..9714d670 --- /dev/null +++ b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2.svg @@ -0,0 +1,62 @@ + + + + class-inheritance-rabbit-animal-2.svg + Created with sketchtool. + + + + + jump: function + + + Rabbit.prototype + + + rabbit + + + + eat: function + + + Animal.prototype + + + + + + name: "White Rabbit" + + + [[Prototype]] + + + [[Prototype]] + + + Rabbit.prototype.__proto__ = Animal.prototype sets this + + + + toString: function + hasOwnProperty: function + ... + + + Object.prototype + + + + [[Prototype]] + + + + [[Prototype]] + + + null + + + + \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2@2x.png b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2@2x.png deleted file mode 100644 index cf5aa655..00000000 Binary files a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal-2@2x.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.png b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.png deleted file mode 100644 index a6f8964e..00000000 Binary files a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.svg b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.svg new file mode 100644 index 00000000..249bfa4c --- /dev/null +++ b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal.svg @@ -0,0 +1,39 @@ + + + + class-inheritance-rabbit-animal.svg + Created with sketchtool. + + + + + methods of Rabbit + + + Rabbit.prototype + + + rabbit + + + + methods of Animal + + + Animal.prototype + + + + + + [[Prototype]] + + + [[Prototype]] + + + properties of rabbit + + + + \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal@2x.png b/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal@2x.png deleted file mode 100644 index 2e3f4d7f..00000000 Binary files a/1-js/09-classes/02-class-inheritance/class-inheritance-rabbit-animal@2x.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.png b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.png deleted file mode 100644 index 79351a75..00000000 Binary files a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.svg b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.svg new file mode 100644 index 00000000..7a16b785 --- /dev/null +++ b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal.svg @@ -0,0 +1,42 @@ + + + + rabbit-animal-independent-animal.svg + Created with sketchtool. + + + + + + constructor: Animal + run: function + stop: function + + + Animal.prototype + + + + Animal + + + + new Animal + + + + + [[Prototype]] + + + prototype + + + name: "My animal" + + + constructor + + + + \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal@2x.png b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal@2x.png deleted file mode 100644 index 346574e0..00000000 Binary files a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-animal@2x.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.png b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.png deleted file mode 100644 index 3d3b78cc..00000000 Binary files a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.svg b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.svg new file mode 100644 index 00000000..ab936c15 --- /dev/null +++ b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit.svg @@ -0,0 +1,41 @@ + + + + rabbit-animal-independent-rabbit.svg + Created with sketchtool. + + + + + + constructor: Rabbit + hide: function + + + Rabbit.prototype + + + + Rabbit + + + + new Rabbit + + + + + [[Prototype]] + + + prototype + + + name: "My rabbit" + + + constructor + + + + \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit@2x.png b/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit@2x.png deleted file mode 100644 index a923d10e..00000000 Binary files a/1-js/09-classes/02-class-inheritance/rabbit-animal-independent-rabbit@2x.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.png b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.png deleted file mode 100644 index 30f4d912..00000000 Binary files a/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.svg b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.svg new file mode 100644 index 00000000..9a24f0cd --- /dev/null +++ b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.svg @@ -0,0 +1,44 @@ + + + + super-homeobject-wrong.svg + Created with sketchtool. + + + + + sayHi + + + plant + + + + sayHi + + + tree + + + + + + sayHi + + + + animal + + + rabbit + + + + [[HomeObject]] + + + sayHi + + + + \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/super-homeobject-wrong@2x.png b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong@2x.png deleted file mode 100644 index e7fd103f..00000000 Binary files a/1-js/09-classes/02-class-inheritance/super-homeobject-wrong@2x.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/this-super-loop.png b/1-js/09-classes/02-class-inheritance/this-super-loop.png deleted file mode 100644 index e68ed70e..00000000 Binary files a/1-js/09-classes/02-class-inheritance/this-super-loop.png and /dev/null differ diff --git a/1-js/09-classes/02-class-inheritance/this-super-loop.svg b/1-js/09-classes/02-class-inheritance/this-super-loop.svg new file mode 100644 index 00000000..7862b41c --- /dev/null +++ b/1-js/09-classes/02-class-inheritance/this-super-loop.svg @@ -0,0 +1,72 @@ + + + + this-super-loop.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + rabbit + + + longEar + + + rabbit + + + longEar + + + + + + + + \ No newline at end of file diff --git a/1-js/09-classes/02-class-inheritance/this-super-loop@2x.png b/1-js/09-classes/02-class-inheritance/this-super-loop@2x.png deleted file mode 100644 index 037d0758..00000000 Binary files a/1-js/09-classes/02-class-inheritance/this-super-loop@2x.png and /dev/null differ diff --git a/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.png b/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.png deleted file mode 100644 index c5e7e3e4..00000000 Binary files a/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.png and /dev/null differ diff --git a/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.svg b/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.svg new file mode 100644 index 00000000..1e868cce --- /dev/null +++ b/1-js/09-classes/03-static-properties-methods/animal-rabbit-static.svg @@ -0,0 +1,64 @@ + + + + animal-rabbit-static.svg + Created with sketchtool. + + + + + constructor: Animal + run: function + + + + Animal.prototype + + + + constructor: Rabbit + hide: function + + + Rabbit.prototype + + + + Animal + + + + Rabbit + + + rabbit + + + + + [[Prototype]] + + + + [[Prototype]] + + + + [[Prototype]] + + + prototype + + + + prototype + + + compare + + + name: "White Rabbit" + + + + \ No newline at end of file diff --git a/1-js/09-classes/03-static-properties-methods/animal-rabbit-static@2x.png b/1-js/09-classes/03-static-properties-methods/animal-rabbit-static@2x.png deleted file mode 100644 index de434af2..00000000 Binary files a/1-js/09-classes/03-static-properties-methods/animal-rabbit-static@2x.png and /dev/null differ diff --git a/1-js/09-classes/03-static-properties-methods/article.md b/1-js/09-classes/03-static-properties-methods/article.md index 77bf092f..608788f7 100644 --- a/1-js/09-classes/03-static-properties-methods/article.md +++ b/1-js/09-classes/03-static-properties-methods/article.md @@ -174,7 +174,7 @@ Now we can call `Rabbit.compare` assuming that the inherited `Animal.compare` wi How does it work? Again, using prototypes. As you might have already guessed, `extends` gives `Rabbit` the `[[Prototype]]` reference to `Animal`. -![](animal-rabbit-static.png) +![](animal-rabbit-static.svg) So, `Rabbit` function now inherits from `Animal` function. And `Animal` function normally has `[[Prototype]]` referencing `Function.prototype`, because it doesn't `extend` anything. diff --git a/1-js/09-classes/05-extend-natives/article.md b/1-js/09-classes/05-extend-natives/article.md index 84eae491..dfe2ddf3 100644 --- a/1-js/09-classes/05-extend-natives/article.md +++ b/1-js/09-classes/05-extend-natives/article.md @@ -78,6 +78,6 @@ For example, both `Array` and `Date` inherit from `Object`, so their instances h Here's the picture structure for `Date` and `Object`: -![](object-date-inheritance.png) +![](object-date-inheritance.svg) As you can see, there's no link between `Date` and `Object`. They are independent, only `Date.prototype` inherits from `Object.prototype`. diff --git a/1-js/09-classes/05-extend-natives/object-date-inheritance.png b/1-js/09-classes/05-extend-natives/object-date-inheritance.png deleted file mode 100644 index 73020a49..00000000 Binary files a/1-js/09-classes/05-extend-natives/object-date-inheritance.png and /dev/null differ diff --git a/1-js/09-classes/05-extend-natives/object-date-inheritance.svg b/1-js/09-classes/05-extend-natives/object-date-inheritance.svg new file mode 100644 index 00000000..f46577f1 --- /dev/null +++ b/1-js/09-classes/05-extend-natives/object-date-inheritance.svg @@ -0,0 +1,71 @@ + + + + object-date-inheritance.svg + Created with sketchtool. + + + + + constructor: Object + toString: function + hasOwnProperty: function + ... + + + + Object.prototype + + + + constructor: Date + toString: function + getDate: function + ... + + + Date.prototype + + + + Object + + + + Date + + + new Date() + + + + + [[Prototype]] + + + + [[Prototype]] + + + prototype + + + + prototype + + + defineProperty + keys + ... + + + now + parse + ... + + + 1 Jan 2019 + + + + \ No newline at end of file diff --git a/1-js/09-classes/05-extend-natives/object-date-inheritance@2x.png b/1-js/09-classes/05-extend-natives/object-date-inheritance@2x.png deleted file mode 100644 index 6520f9e2..00000000 Binary files a/1-js/09-classes/05-extend-natives/object-date-inheritance@2x.png and /dev/null differ diff --git a/1-js/09-classes/06-instanceof/article.md b/1-js/09-classes/06-instanceof/article.md index 78146572..684901c6 100644 --- a/1-js/09-classes/06-instanceof/article.md +++ b/1-js/09-classes/06-instanceof/article.md @@ -94,7 +94,7 @@ The algorithm of `obj instanceof Class` works roughly as follows: Here's the illustration of what `rabbit instanceof Animal` compares with `Animal.prototype`: -![](instanceof.png) +![](instanceof.svg) By the way, there's also a method [objA.isPrototypeOf(objB)](mdn:js/object/isPrototypeOf), that returns `true` if `objA` is somewhere in the chain of prototypes for `objB`. So the test of `obj instanceof Class` can be rephrased as `Class.prototype.isPrototypeOf(obj)`. diff --git a/1-js/09-classes/06-instanceof/instanceof.png b/1-js/09-classes/06-instanceof/instanceof.png deleted file mode 100644 index b87bc6c0..00000000 Binary files a/1-js/09-classes/06-instanceof/instanceof.png and /dev/null differ diff --git a/1-js/09-classes/06-instanceof/instanceof.svg b/1-js/09-classes/06-instanceof/instanceof.svg new file mode 100644 index 00000000..b291384f --- /dev/null +++ b/1-js/09-classes/06-instanceof/instanceof.svg @@ -0,0 +1,51 @@ + + + + instanceof.svg + Created with sketchtool. + + + + + Animal.prototype + + + + Object.prototype + + + + + Rabbit.prototype + + + + [[Prototype]] + + + + rabbit + + + + [[Prototype]] + + + [[Prototype]] + + + + null + + + [[Prototype]] + + + = Animal.prototype? + + + + + + + \ No newline at end of file diff --git a/1-js/09-classes/06-instanceof/instanceof@2x.png b/1-js/09-classes/06-instanceof/instanceof@2x.png deleted file mode 100644 index 4c265ee3..00000000 Binary files a/1-js/09-classes/06-instanceof/instanceof@2x.png and /dev/null differ diff --git a/1-js/09-classes/07-mixins/article.md b/1-js/09-classes/07-mixins/article.md index 9e8c037b..3e06800a 100644 --- a/1-js/09-classes/07-mixins/article.md +++ b/1-js/09-classes/07-mixins/article.md @@ -97,7 +97,7 @@ new User("Dude").sayHi(); // Hello Dude! Please note that the call to the parent method `super.say()` from `sayHiMixin` looks for the method in the prototype of that mixin, not the class. -![](mixin-inheritance.png) +![](mixin-inheritance.svg) That's because methods `sayHi` and `sayBye` were initially created in `sayHiMixin`. So their `[[HomeObject]]` internal property references `sayHiMixin`, as shown on the picture above. diff --git a/1-js/09-classes/07-mixins/mixin-inheritance.png b/1-js/09-classes/07-mixins/mixin-inheritance.png deleted file mode 100644 index 6142ce7f..00000000 Binary files a/1-js/09-classes/07-mixins/mixin-inheritance.png and /dev/null differ diff --git a/1-js/09-classes/07-mixins/mixin-inheritance.svg b/1-js/09-classes/07-mixins/mixin-inheritance.svg new file mode 100644 index 00000000..c1ce62f9 --- /dev/null +++ b/1-js/09-classes/07-mixins/mixin-inheritance.svg @@ -0,0 +1,54 @@ + + + + mixin-inheritance.svg + Created with sketchtool. + + + + + sayHi: function + sayBye: function + + + sayHiMixin + + + + say: function + + + sayMixin + + + + [[Prototype]] + + + + constructor: User + sayHi: function + sayBye: function + + + User.prototype + + + + + + [[Prototype]] + + + + name: ... + + + user + + + [[HomeObject] + + + + \ No newline at end of file diff --git a/1-js/09-classes/07-mixins/mixin-inheritance@2x.png b/1-js/09-classes/07-mixins/mixin-inheritance@2x.png deleted file mode 100644 index ccbd7430..00000000 Binary files a/1-js/09-classes/07-mixins/mixin-inheritance@2x.png and /dev/null differ diff --git a/1-js/11-async/01-callbacks/article.md b/1-js/11-async/01-callbacks/article.md index ee0bb3ca..a9183c80 100644 --- a/1-js/11-async/01-callbacks/article.md +++ b/1-js/11-async/01-callbacks/article.md @@ -222,7 +222,7 @@ 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.png) +![](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.png b/1-js/11-async/01-callbacks/callback-hell.png deleted file mode 100644 index 567ec284..00000000 Binary files a/1-js/11-async/01-callbacks/callback-hell.png and /dev/null differ diff --git a/1-js/11-async/01-callbacks/callback-hell.svg b/1-js/11-async/01-callbacks/callback-hell.svg new file mode 100644 index 00000000..574d7dfb --- /dev/null +++ b/1-js/11-async/01-callbacks/callback-hell.svg @@ -0,0 +1,350 @@ + + + + callback-hell.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + 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 diff --git a/1-js/11-async/01-callbacks/callback-hell@2x.png b/1-js/11-async/01-callbacks/callback-hell@2x.png deleted file mode 100644 index 4d6b0ad7..00000000 Binary files a/1-js/11-async/01-callbacks/callback-hell@2x.png and /dev/null differ diff --git a/1-js/11-async/02-promise-basics/article.md b/1-js/11-async/02-promise-basics/article.md index dd9e239c..4dae2aaa 100644 --- a/1-js/11-async/02-promise-basics/article.md +++ b/1-js/11-async/02-promise-basics/article.md @@ -38,7 +38,7 @@ When the executor finishes the job, it should call one of the functions that it - sets `state` to `"rejected"`, - sets `result` to `error`. -![](promise-resolve-reject.png) +![](promise-resolve-reject.svg) Later we'll see how these changes become known to "fans". @@ -60,7 +60,7 @@ We can see two things by running the code above: After one second of "processing" the executor calls `resolve("done")` to produce the result: -![](promise-resolve-1.png) +![](promise-resolve-1.svg) That was an example of a successful job completion, a "fulfilled promise". @@ -73,7 +73,7 @@ let promise = new Promise(function(resolve, reject) { }); ``` -![](promise-reject-1.png) +![](promise-reject-1.svg) To summarize, the executor should do a job (something that takes time usually) and then call `resolve` or `reject` to change the state of the corresponding Promise object. diff --git a/1-js/11-async/02-promise-basics/promise-reject-1.png b/1-js/11-async/02-promise-basics/promise-reject-1.png deleted file mode 100644 index 3ae74879..00000000 Binary files a/1-js/11-async/02-promise-basics/promise-reject-1.png and /dev/null differ diff --git a/1-js/11-async/02-promise-basics/promise-reject-1.svg b/1-js/11-async/02-promise-basics/promise-reject-1.svg new file mode 100644 index 00000000..822ccb2e --- /dev/null +++ b/1-js/11-async/02-promise-basics/promise-reject-1.svg @@ -0,0 +1,27 @@ + + + + promise-reject-1.svg + Created with sketchtool. + + + + + new Promise(executor) + + + state: "pending" + result: undefined + + + + reject(error) + + + + state: "rejected" + result: error + + + + \ No newline at end of file diff --git a/1-js/11-async/02-promise-basics/promise-reject-1@2x.png b/1-js/11-async/02-promise-basics/promise-reject-1@2x.png deleted file mode 100644 index 9eff3793..00000000 Binary files a/1-js/11-async/02-promise-basics/promise-reject-1@2x.png and /dev/null differ diff --git a/1-js/11-async/02-promise-basics/promise-resolve-1.png b/1-js/11-async/02-promise-basics/promise-resolve-1.png deleted file mode 100644 index b4bb5182..00000000 Binary files a/1-js/11-async/02-promise-basics/promise-resolve-1.png and /dev/null differ diff --git a/1-js/11-async/02-promise-basics/promise-resolve-1.svg b/1-js/11-async/02-promise-basics/promise-resolve-1.svg new file mode 100644 index 00000000..6d8d2781 --- /dev/null +++ b/1-js/11-async/02-promise-basics/promise-resolve-1.svg @@ -0,0 +1,27 @@ + + + + promise-resolve-1.svg + Created with sketchtool. + + + + + new Promise(executor) + + + state: "pending" + result: undefined + + + + resolve("done") + + + + state: "fulfilled" + result: "done" + + + + \ No newline at end of file diff --git a/1-js/11-async/02-promise-basics/promise-resolve-1@2x.png b/1-js/11-async/02-promise-basics/promise-resolve-1@2x.png deleted file mode 100644 index ecb4af35..00000000 Binary files a/1-js/11-async/02-promise-basics/promise-resolve-1@2x.png and /dev/null differ diff --git a/1-js/11-async/02-promise-basics/promise-resolve-reject.png b/1-js/11-async/02-promise-basics/promise-resolve-reject.png deleted file mode 100644 index 09429bbc..00000000 Binary files a/1-js/11-async/02-promise-basics/promise-resolve-reject.png and /dev/null differ diff --git a/1-js/11-async/02-promise-basics/promise-resolve-reject.svg b/1-js/11-async/02-promise-basics/promise-resolve-reject.svg new file mode 100644 index 00000000..94173351 --- /dev/null +++ b/1-js/11-async/02-promise-basics/promise-resolve-reject.svg @@ -0,0 +1,36 @@ + + + + promise-resolve-reject.svg + Created with sketchtool. + + + + + new Promise(executor) + + + state: "pending" + result: undefined + + + + + resolve(value) + + + reject(error) + + + + state: "fulfilled" + result: value + + + + state: "rejected" + result: error + + + + \ No newline at end of file diff --git a/1-js/11-async/02-promise-basics/promise-resolve-reject@2x.png b/1-js/11-async/02-promise-basics/promise-resolve-reject@2x.png deleted file mode 100644 index e01e152a..00000000 Binary files a/1-js/11-async/02-promise-basics/promise-resolve-reject@2x.png and /dev/null differ diff --git a/1-js/11-async/03-promise-chaining/article.md b/1-js/11-async/03-promise-chaining/article.md index f21503fb..9482a1d2 100644 --- a/1-js/11-async/03-promise-chaining/article.md +++ b/1-js/11-async/03-promise-chaining/article.md @@ -42,7 +42,7 @@ Here the flow is: As the result is passed along the chain of handlers, we can see a sequence of `alert` calls: `1` -> `2` -> `4`. -![](promise-then-chain.png) +![](promise-then-chain.svg) The whole thing works, because a call to `promise.then` returns a promise, so that we can call the next `.then` on it. @@ -94,7 +94,7 @@ What we did here is just several handlers to one promise. They don't pass the re Here's the picture (compare it with the chaining above): -![](promise-then-many.png) +![](promise-then-many.svg) All `.then` on the same promise get the same result -- the result of that promise. So in the code above all `alert` show the same: `1`. @@ -382,4 +382,4 @@ If a `.then` (or `catch/finally`, doesn't matter) handler returns a promise, the Here's a full picture: -![](promise-handler-variants.png) +![](promise-handler-variants.svg) diff --git a/1-js/11-async/03-promise-chaining/promise-handler-variants.png b/1-js/11-async/03-promise-chaining/promise-handler-variants.png deleted file mode 100644 index 49a8a218..00000000 Binary files a/1-js/11-async/03-promise-chaining/promise-handler-variants.png and /dev/null differ diff --git a/1-js/11-async/03-promise-chaining/promise-handler-variants.svg b/1-js/11-async/03-promise-chaining/promise-handler-variants.svg new file mode 100644 index 00000000..c76a047f --- /dev/null +++ b/1-js/11-async/03-promise-chaining/promise-handler-variants.svg @@ -0,0 +1,58 @@ + + + + promise-handler-variants.svg + Created with sketchtool. + + + + + + + return value + + + return promise + + + throw error + + + + state: "fulfilled" + result: value + + + + state: "rejected" + result: error + + + + + + + + ...with the result + of the new promise... + + + + state: "pending" + result: undefined + + + the call of .then(handler) always returns a promise: + + + that promise is settled by handler + + + if handler ends with… + + + the promise settles with: + + + + \ No newline at end of file diff --git a/1-js/11-async/03-promise-chaining/promise-handler-variants@2x.png b/1-js/11-async/03-promise-chaining/promise-handler-variants@2x.png deleted file mode 100644 index f9292fcb..00000000 Binary files a/1-js/11-async/03-promise-chaining/promise-handler-variants@2x.png and /dev/null differ diff --git a/1-js/11-async/03-promise-chaining/promise-then-chain.png b/1-js/11-async/03-promise-chaining/promise-then-chain.png deleted file mode 100644 index fab8a92a..00000000 Binary files a/1-js/11-async/03-promise-chaining/promise-then-chain.png and /dev/null differ diff --git a/1-js/11-async/03-promise-chaining/promise-then-chain.svg b/1-js/11-async/03-promise-chaining/promise-then-chain.svg new file mode 100644 index 00000000..d0faae2b --- /dev/null +++ b/1-js/11-async/03-promise-chaining/promise-then-chain.svg @@ -0,0 +1,38 @@ + + + + promise-then-chain.svg + Created with sketchtool. + + + + + .then + + + + new Promise + + + resolve(1) + + + return 2 + + + + + .then + + + return 4 + + + + + .then + + + + + \ No newline at end of file diff --git a/1-js/11-async/03-promise-chaining/promise-then-chain@2x.png b/1-js/11-async/03-promise-chaining/promise-then-chain@2x.png deleted file mode 100644 index 421b5935..00000000 Binary files a/1-js/11-async/03-promise-chaining/promise-then-chain@2x.png and /dev/null differ diff --git a/1-js/11-async/03-promise-chaining/promise-then-many.png b/1-js/11-async/03-promise-chaining/promise-then-many.png deleted file mode 100644 index b13d20a9..00000000 Binary files a/1-js/11-async/03-promise-chaining/promise-then-many.png and /dev/null differ diff --git a/1-js/11-async/03-promise-chaining/promise-then-many.svg b/1-js/11-async/03-promise-chaining/promise-then-many.svg new file mode 100644 index 00000000..d745dee5 --- /dev/null +++ b/1-js/11-async/03-promise-chaining/promise-then-many.svg @@ -0,0 +1,32 @@ + + + + promise-then-many.svg + Created with sketchtool. + + + + + .then + + + + new Promise + + + resolve(1) + + + + + .then + + + + + .then + + + + + \ No newline at end of file diff --git a/1-js/11-async/03-promise-chaining/promise-then-many@2x.png b/1-js/11-async/03-promise-chaining/promise-then-many@2x.png deleted file mode 100644 index dccc553f..00000000 Binary files a/1-js/11-async/03-promise-chaining/promise-then-many@2x.png and /dev/null differ diff --git a/1-js/11-async/04-promise-error-handling/promise-handler-variants.png b/1-js/11-async/04-promise-error-handling/promise-handler-variants.png deleted file mode 100644 index 49a8a218..00000000 Binary files a/1-js/11-async/04-promise-error-handling/promise-handler-variants.png and /dev/null differ diff --git a/1-js/11-async/04-promise-error-handling/promise-handler-variants.svg b/1-js/11-async/04-promise-error-handling/promise-handler-variants.svg new file mode 100644 index 00000000..c76a047f --- /dev/null +++ b/1-js/11-async/04-promise-error-handling/promise-handler-variants.svg @@ -0,0 +1,58 @@ + + + + promise-handler-variants.svg + Created with sketchtool. + + + + + + + return value + + + return promise + + + throw error + + + + state: "fulfilled" + result: value + + + + state: "rejected" + result: error + + + + + + + + ...with the result + of the new promise... + + + + state: "pending" + result: undefined + + + the call of .then(handler) always returns a promise: + + + that promise is settled by handler + + + if handler ends with… + + + the promise settles with: + + + + \ No newline at end of file diff --git a/1-js/11-async/04-promise-error-handling/promise-handler-variants@2x.png b/1-js/11-async/04-promise-error-handling/promise-handler-variants@2x.png deleted file mode 100644 index f9292fcb..00000000 Binary files a/1-js/11-async/04-promise-error-handling/promise-handler-variants@2x.png and /dev/null differ diff --git a/1-js/11-async/04-promise-error-handling/promise-then-chain.png b/1-js/11-async/04-promise-error-handling/promise-then-chain.png deleted file mode 100644 index fab8a92a..00000000 Binary files a/1-js/11-async/04-promise-error-handling/promise-then-chain.png and /dev/null differ diff --git a/1-js/11-async/04-promise-error-handling/promise-then-chain.svg b/1-js/11-async/04-promise-error-handling/promise-then-chain.svg new file mode 100644 index 00000000..d0faae2b --- /dev/null +++ b/1-js/11-async/04-promise-error-handling/promise-then-chain.svg @@ -0,0 +1,38 @@ + + + + promise-then-chain.svg + Created with sketchtool. + + + + + .then + + + + new Promise + + + resolve(1) + + + return 2 + + + + + .then + + + return 4 + + + + + .then + + + + + \ No newline at end of file diff --git a/1-js/11-async/04-promise-error-handling/promise-then-chain@2x.png b/1-js/11-async/04-promise-error-handling/promise-then-chain@2x.png deleted file mode 100644 index 421b5935..00000000 Binary files a/1-js/11-async/04-promise-error-handling/promise-then-chain@2x.png and /dev/null differ diff --git a/1-js/11-async/04-promise-error-handling/promise-then-many.png b/1-js/11-async/04-promise-error-handling/promise-then-many.png deleted file mode 100644 index b13d20a9..00000000 Binary files a/1-js/11-async/04-promise-error-handling/promise-then-many.png and /dev/null differ diff --git a/1-js/11-async/04-promise-error-handling/promise-then-many.svg b/1-js/11-async/04-promise-error-handling/promise-then-many.svg new file mode 100644 index 00000000..d745dee5 --- /dev/null +++ b/1-js/11-async/04-promise-error-handling/promise-then-many.svg @@ -0,0 +1,32 @@ + + + + promise-then-many.svg + Created with sketchtool. + + + + + .then + + + + new Promise + + + resolve(1) + + + + + .then + + + + + .then + + + + + \ No newline at end of file diff --git a/1-js/11-async/04-promise-error-handling/promise-then-many@2x.png b/1-js/11-async/04-promise-error-handling/promise-then-many@2x.png deleted file mode 100644 index dccc553f..00000000 Binary files a/1-js/11-async/04-promise-error-handling/promise-then-many@2x.png and /dev/null differ diff --git a/1-js/11-async/07-microtask-queue/article.md b/1-js/11-async/07-microtask-queue/article.md index 807ba14f..f444e21c 100644 --- a/1-js/11-async/07-microtask-queue/article.md +++ b/1-js/11-async/07-microtask-queue/article.md @@ -34,7 +34,7 @@ Or, to say that simply, when a promise is ready, its `.then/catch/finally` handl That's why "code finished" in the example above shows first. -![](promiseQueue.png) +![](promiseQueue.svg) Promise handlers always go through that internal queue. diff --git a/1-js/11-async/07-microtask-queue/eventLoop.png b/1-js/11-async/07-microtask-queue/eventLoop.png deleted file mode 100644 index 8d8210b0..00000000 Binary files a/1-js/11-async/07-microtask-queue/eventLoop.png and /dev/null differ diff --git a/1-js/11-async/07-microtask-queue/eventLoop.svg b/1-js/11-async/07-microtask-queue/eventLoop.svg new file mode 100644 index 00000000..22bbcb5a --- /dev/null +++ b/1-js/11-async/07-microtask-queue/eventLoop.svg @@ -0,0 +1,36 @@ + + + + eventLoop.svg + Created with sketchtool. + + + + + ... + + + + setTimeout + + + + mousemove + + + + script + + + event + loop + + + macrotask + queue + + + + + + \ No newline at end of file diff --git a/1-js/11-async/07-microtask-queue/eventLoop@2x.png b/1-js/11-async/07-microtask-queue/eventLoop@2x.png deleted file mode 100644 index c02575e9..00000000 Binary files a/1-js/11-async/07-microtask-queue/eventLoop@2x.png and /dev/null differ diff --git a/1-js/11-async/07-microtask-queue/promiseQueue.png b/1-js/11-async/07-microtask-queue/promiseQueue.png deleted file mode 100644 index f8a972d3..00000000 Binary files a/1-js/11-async/07-microtask-queue/promiseQueue.png and /dev/null differ diff --git a/1-js/11-async/07-microtask-queue/promiseQueue.svg b/1-js/11-async/07-microtask-queue/promiseQueue.svg new file mode 100644 index 00000000..0e6d51d5 --- /dev/null +++ b/1-js/11-async/07-microtask-queue/promiseQueue.svg @@ -0,0 +1,43 @@ + + + + promiseQueue.svg + Created with sketchtool. + + + + promise + . + then + ( + handler + ); + + + ... + + + alert + ( + "code finished" + ); + + + + handler enqueued + + + queued handler runs + + + + + + + + script execution finished + + + + + \ No newline at end of file diff --git a/1-js/11-async/07-microtask-queue/promiseQueue@2x.png b/1-js/11-async/07-microtask-queue/promiseQueue@2x.png deleted file mode 100644 index f7b49e2b..00000000 Binary files a/1-js/11-async/07-microtask-queue/promiseQueue@2x.png and /dev/null differ diff --git a/1-js/12-generators-iterators/1-generators/article.md b/1-js/12-generators-iterators/1-generators/article.md index ffdefdad..f9209e7e 100644 --- a/1-js/12-generators-iterators/1-generators/article.md +++ b/1-js/12-generators-iterators/1-generators/article.md @@ -29,7 +29,7 @@ let generator = generateSequence(); The `generator` object is something like an "frozen function call": -![](generateSequence-1.png) +![](generateSequence-1.svg) Upon creation, the code execution is paused at the very beginning. @@ -59,7 +59,7 @@ The result of `next()` is always an object: As of now, we got the first value only: -![](generateSequence-2.png) +![](generateSequence-2.svg) Let's call `generator.next()` again. It resumes the code execution and returns the next `yield`: @@ -69,7 +69,7 @@ let two = generator.next(); alert(JSON.stringify(two)); // {value: 2, done: false} ``` -![](generateSequence-3.png) +![](generateSequence-3.svg) And, if we call it the third time, then the execution reaches `return` statement that finishes the function: @@ -79,7 +79,7 @@ let three = generator.next(); alert(JSON.stringify(three)); // {value: 3, *!*done: true*/!*} ``` -![](generateSequence-4.png) +![](generateSequence-4.svg) Now the generator is done. We should see it from `done:true` and process `value:3` as the final result. @@ -349,7 +349,7 @@ let question = generator.next().value; // <-- yield returns the value generator.next(4); // --> pass the result into the generator ``` -![](genYield2.png) +![](genYield2.svg) 1. The first call `generator.next()` is always without an argument. It starts the execution and returns the result of the first `yield` ("2+2?"). At this point the generator pauses the execution (still on that line). 2. Then, as shown at the picture above, the result of `yield` gets into the `question` variable in the calling code. @@ -390,7 +390,7 @@ alert( generator.next(9).done ); // true The execution picture: -![](genYield2-2.png) +![](genYield2-2.svg) 1. The first `.next()` starts the execution... It reaches the first `yield`. 2. The result is returned to the outer code. diff --git a/1-js/12-generators-iterators/1-generators/genYield2-2.png b/1-js/12-generators-iterators/1-generators/genYield2-2.png deleted file mode 100644 index d9e89193..00000000 Binary files a/1-js/12-generators-iterators/1-generators/genYield2-2.png and /dev/null differ diff --git a/1-js/12-generators-iterators/1-generators/genYield2-2.svg b/1-js/12-generators-iterators/1-generators/genYield2-2.svg new file mode 100644 index 00000000..9b366126 --- /dev/null +++ b/1-js/12-generators-iterators/1-generators/genYield2-2.svg @@ -0,0 +1,69 @@ + + + + genYield2-2.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + "2 + 2?" + + + + + "3 * 3?" + + + . + next + ( + 4 + ) + + + + + . + next + ( + 9 + ) + + + Generator + + + Calling code + + + + \ No newline at end of file diff --git a/1-js/12-generators-iterators/1-generators/genYield2-2@2x.png b/1-js/12-generators-iterators/1-generators/genYield2-2@2x.png deleted file mode 100644 index ef2fcf6b..00000000 Binary files a/1-js/12-generators-iterators/1-generators/genYield2-2@2x.png and /dev/null differ diff --git a/1-js/12-generators-iterators/1-generators/genYield2.png b/1-js/12-generators-iterators/1-generators/genYield2.png deleted file mode 100644 index 7d3d9ace..00000000 Binary files a/1-js/12-generators-iterators/1-generators/genYield2.png and /dev/null differ diff --git a/1-js/12-generators-iterators/1-generators/genYield2.svg b/1-js/12-generators-iterators/1-generators/genYield2.svg new file mode 100644 index 00000000..423e41af --- /dev/null +++ b/1-js/12-generators-iterators/1-generators/genYield2.svg @@ -0,0 +1,41 @@ + + + + genYield2.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + question = "2 + 2?" + + + + + Generator + + + Calling code + + + .next(4) + + + + \ No newline at end of file diff --git a/1-js/12-generators-iterators/1-generators/genYield2@2x.png b/1-js/12-generators-iterators/1-generators/genYield2@2x.png deleted file mode 100644 index de51a3c9..00000000 Binary files a/1-js/12-generators-iterators/1-generators/genYield2@2x.png and /dev/null differ diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-1.png b/1-js/12-generators-iterators/1-generators/generateSequence-1.png deleted file mode 100644 index f6c1cfb5..00000000 Binary files a/1-js/12-generators-iterators/1-generators/generateSequence-1.png and /dev/null differ diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-1.svg b/1-js/12-generators-iterators/1-generators/generateSequence-1.svg new file mode 100644 index 00000000..b6d69c85 --- /dev/null +++ b/1-js/12-generators-iterators/1-generators/generateSequence-1.svg @@ -0,0 +1,27 @@ + + + + generateSequence-1.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-1@2x.png b/1-js/12-generators-iterators/1-generators/generateSequence-1@2x.png deleted file mode 100644 index 74f2f1b9..00000000 Binary files a/1-js/12-generators-iterators/1-generators/generateSequence-1@2x.png and /dev/null differ diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-2.png b/1-js/12-generators-iterators/1-generators/generateSequence-2.png deleted file mode 100644 index 1978a864..00000000 Binary files a/1-js/12-generators-iterators/1-generators/generateSequence-2.png and /dev/null differ diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-2.svg b/1-js/12-generators-iterators/1-generators/generateSequence-2.svg new file mode 100644 index 00000000..7532f7d1 --- /dev/null +++ b/1-js/12-generators-iterators/1-generators/generateSequence-2.svg @@ -0,0 +1,30 @@ + + + + generateSequence-2.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + {value: 1, done: false} + + + + \ No newline at end of file diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-2@2x.png b/1-js/12-generators-iterators/1-generators/generateSequence-2@2x.png deleted file mode 100644 index f26afaf9..00000000 Binary files a/1-js/12-generators-iterators/1-generators/generateSequence-2@2x.png and /dev/null differ diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-3.png b/1-js/12-generators-iterators/1-generators/generateSequence-3.png deleted file mode 100644 index b32d91ea..00000000 Binary files a/1-js/12-generators-iterators/1-generators/generateSequence-3.png and /dev/null differ diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-3.svg b/1-js/12-generators-iterators/1-generators/generateSequence-3.svg new file mode 100644 index 00000000..47ff73e9 --- /dev/null +++ b/1-js/12-generators-iterators/1-generators/generateSequence-3.svg @@ -0,0 +1,30 @@ + + + + generateSequence-3.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + {value: 2, done: false} + + + + \ No newline at end of file diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-3@2x.png b/1-js/12-generators-iterators/1-generators/generateSequence-3@2x.png deleted file mode 100644 index 42dd4a2d..00000000 Binary files a/1-js/12-generators-iterators/1-generators/generateSequence-3@2x.png and /dev/null differ diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-4.png b/1-js/12-generators-iterators/1-generators/generateSequence-4.png deleted file mode 100644 index 428b4226..00000000 Binary files a/1-js/12-generators-iterators/1-generators/generateSequence-4.png and /dev/null differ diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-4.svg b/1-js/12-generators-iterators/1-generators/generateSequence-4.svg new file mode 100644 index 00000000..bdda840c --- /dev/null +++ b/1-js/12-generators-iterators/1-generators/generateSequence-4.svg @@ -0,0 +1,30 @@ + + + + generateSequence-4.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + {value: 3, done: true} + + + + \ No newline at end of file diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-4@2x.png b/1-js/12-generators-iterators/1-generators/generateSequence-4@2x.png deleted file mode 100644 index fc9f286a..00000000 Binary files a/1-js/12-generators-iterators/1-generators/generateSequence-4@2x.png and /dev/null differ diff --git a/1-js/99-js-misc/01-proxy/article.md b/1-js/99-js-misc/01-proxy/article.md index 1bdbaf1a..56ddf7bd 100644 --- a/1-js/99-js-misc/01-proxy/article.md +++ b/1-js/99-js-misc/01-proxy/article.md @@ -37,7 +37,7 @@ As there are no traps, all operations on `proxy` are forwarded to `target`. As we can see, without any traps, `proxy` is a transparent wrapper around `target`. -![](proxy.png) +![](proxy.svg) The proxy is a special "exotic object". It doesn't have "own" properties. With an empty handler it transparently forwards operations to `target`. @@ -564,7 +564,7 @@ alert(admin.name); // Guest (?!?) As you can see, the result is incorrect! The `admin.name` is expected to be `"Admin"`, not `"Guest"`! Without the proxy, it would be `"Admin"`, looks like the proxying "broke" our object. -![](proxy-inherit.png) +![](proxy-inherit.svg) Why this happens? That's easy to understand if we explore what's going on during the call in the last line of the code. diff --git a/1-js/99-js-misc/01-proxy/proxy-inherit.png b/1-js/99-js-misc/01-proxy/proxy-inherit.png deleted file mode 100644 index f4ce4582..00000000 Binary files a/1-js/99-js-misc/01-proxy/proxy-inherit.png and /dev/null differ diff --git a/1-js/99-js-misc/01-proxy/proxy-inherit.svg b/1-js/99-js-misc/01-proxy/proxy-inherit.svg new file mode 100644 index 00000000..3caf32ac --- /dev/null +++ b/1-js/99-js-misc/01-proxy/proxy-inherit.svg @@ -0,0 +1,27 @@ + + + + proxy-inherit.svg + Created with sketchtool. + + + + + + _name: "Guest" + name: getter + + + + _name: "Admin" + + + user (proxied) + + + original user + + + + + \ No newline at end of file diff --git a/1-js/99-js-misc/01-proxy/proxy-inherit@2x.png b/1-js/99-js-misc/01-proxy/proxy-inherit@2x.png deleted file mode 100644 index 13d760d4..00000000 Binary files a/1-js/99-js-misc/01-proxy/proxy-inherit@2x.png and /dev/null differ diff --git a/1-js/99-js-misc/01-proxy/proxy.png b/1-js/99-js-misc/01-proxy/proxy.png deleted file mode 100644 index 429d1f3a..00000000 Binary files a/1-js/99-js-misc/01-proxy/proxy.png and /dev/null differ diff --git a/1-js/99-js-misc/01-proxy/proxy.svg b/1-js/99-js-misc/01-proxy/proxy.svg new file mode 100644 index 00000000..d33ac850 --- /dev/null +++ b/1-js/99-js-misc/01-proxy/proxy.svg @@ -0,0 +1,31 @@ + + + + proxy.svg + Created with sketchtool. + + + + + test: 5 + + + proxy + + + target + + + + + + + get proxy.test + + + 5 + + + + + \ No newline at end of file diff --git a/1-js/99-js-misc/01-proxy/proxy@2x.png b/1-js/99-js-misc/01-proxy/proxy@2x.png deleted file mode 100644 index 06fbfa4a..00000000 Binary files a/1-js/99-js-misc/01-proxy/proxy@2x.png and /dev/null differ diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 80582abd..a608a442 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -8,7 +8,7 @@ A host environment provides platform-specific objects and functions additional t Here's a bird's-eye view of what we have when JavaScript runs in a web-browser: -![](windowObjects.png) +![](windowObjects.svg) There's a "root" object called `window`. It has two roles: diff --git a/2-ui/1-document/01-browser-environment/windowObjects.png b/2-ui/1-document/01-browser-environment/windowObjects.png deleted file mode 100644 index 70cab0c1..00000000 Binary files a/2-ui/1-document/01-browser-environment/windowObjects.png and /dev/null differ diff --git a/2-ui/1-document/01-browser-environment/windowObjects.svg b/2-ui/1-document/01-browser-environment/windowObjects.svg new file mode 100644 index 00000000..69c295bb --- /dev/null +++ b/2-ui/1-document/01-browser-environment/windowObjects.svg @@ -0,0 +1,72 @@ + + + + windowObjects.svg + Created with sketchtool. + + + + + window + + + + + + document + + + + Object + + + + navigator + + + + screen + + + + location + + + + frames + + + + history + + + Array + + + + Function + + + XMLHttpRequest + + + BOM + + + JavaScript + + + DOM + + + + + … + + + … + + + + + \ No newline at end of file diff --git a/2-ui/1-document/01-browser-environment/windowObjects@2x.png b/2-ui/1-document/01-browser-environment/windowObjects@2x.png deleted file mode 100644 index 8cd2dddf..00000000 Binary files a/2-ui/1-document/01-browser-environment/windowObjects@2x.png and /dev/null differ diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index be5a6531..645d0ab6 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -13,7 +13,7 @@ All operations on the DOM start with the `document` object. From it we can acces Here's a picture of links that allow for travel between DOM nodes: -![](dom-links.png) +![](dom-links.svg) Let's discuss them in more detail. @@ -216,7 +216,7 @@ But for many tasks we don't want text or comment nodes. We want to manipulate el So let's see more navigation links that only take *element nodes* into account: -![](dom-links-elements.png) +![](dom-links-elements.svg) The links are similar to those given above, just with `Element` word inside: diff --git a/2-ui/1-document/03-dom-navigation/dom-links-elements.png b/2-ui/1-document/03-dom-navigation/dom-links-elements.png deleted file mode 100644 index 2dcc3491..00000000 Binary files a/2-ui/1-document/03-dom-navigation/dom-links-elements.png and /dev/null differ diff --git a/2-ui/1-document/03-dom-navigation/dom-links-elements.svg b/2-ui/1-document/03-dom-navigation/dom-links-elements.svg new file mode 100644 index 00000000..3f843b26 --- /dev/null +++ b/2-ui/1-document/03-dom-navigation/dom-links-elements.svg @@ -0,0 +1,63 @@ + + + + dom-links-elements.svg + Created with sketchtool. + + + + + document.documentElement + + + <HTML> + + + + document.body + + + (if inside body) + + + + parent + Element + + + + <DIV> + + + + + next + Element + Sibling + + + + previous + Element + Sibling + + + + + children + + + first + Element + Child + + + last + Element + Child + + + + + + \ No newline at end of file diff --git a/2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png b/2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png deleted file mode 100644 index 654cd6dc..00000000 Binary files a/2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png and /dev/null differ diff --git a/2-ui/1-document/03-dom-navigation/dom-links.png b/2-ui/1-document/03-dom-navigation/dom-links.png deleted file mode 100644 index 44835b38..00000000 Binary files a/2-ui/1-document/03-dom-navigation/dom-links.png and /dev/null differ diff --git a/2-ui/1-document/03-dom-navigation/dom-links.svg b/2-ui/1-document/03-dom-navigation/dom-links.svg new file mode 100644 index 00000000..b1116b00 --- /dev/null +++ b/2-ui/1-document/03-dom-navigation/dom-links.svg @@ -0,0 +1,59 @@ + + + + dom-links.svg + Created with sketchtool. + + + + + + + document + + + document.documentElement + + + <HTML> + + + document.body + + + (if inside body) + + + + + + parentNode + + + + <DIV> + + + + + + nextSibling + + + + previousSibling + + + + + childNodes + + + firstChild + + + lastChild + + + + \ No newline at end of file diff --git a/2-ui/1-document/03-dom-navigation/dom-links@2x.png b/2-ui/1-document/03-dom-navigation/dom-links@2x.png deleted file mode 100644 index 75d830fd..00000000 Binary files a/2-ui/1-document/03-dom-navigation/dom-links@2x.png and /dev/null differ diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md index 25705c88..8620ca0c 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/article.md +++ b/2-ui/1-document/05-basic-dom-node-properties/article.md @@ -14,7 +14,7 @@ The root of the hierarchy is [EventTarget](https://dom.spec.whatwg.org/#eventtar Here's the picture, explanations to follow: -![](dom-class-hierarchy.png) +![](dom-class-hierarchy.svg) The classes are: diff --git a/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy.png b/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy.png deleted file mode 100644 index 3f7f7c03..00000000 Binary files a/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy.png and /dev/null differ diff --git a/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy.svg b/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy.svg new file mode 100644 index 00000000..b06ad3be --- /dev/null +++ b/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy.svg @@ -0,0 +1,85 @@ + + + + dom-class-hierarchy.svg + Created with sketchtool. + + + + + + EventTarget + + + Node + + + + + Element + + + + + HTMLElement + + + + + HTMLBodyElement + + + + + HTMLInputElement + + + + + HTMLAnchorElement + + + + + Text + + + + + Comment + + + + + + SVGElement + + + <div> + Text + </div> + + + <input type="…"> + + + <body> + + + <a href="…"> + + + < + div + > + Text + </ + div + > + + + <!--comment--> + + + + \ No newline at end of file diff --git a/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy@2x.png b/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy@2x.png deleted file mode 100644 index b23acb3c..00000000 Binary files a/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy@2x.png and /dev/null differ diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md index a418a052..86f5b4b2 100644 --- a/2-ui/1-document/07-modifying-document/article.md +++ b/2-ui/1-document/07-modifying-document/article.md @@ -189,7 +189,7 @@ Here's an example of using these methods to add more items to a list and the tex Here's a small picture what methods do: -![](before-prepend-append-after.png) +![](before-prepend-append-after.svg) So the final list will be: @@ -269,7 +269,7 @@ That's how we can append an arbitrary HTML to our page. Here's the picture of insertion variants: -![](insert-adjacent.png) +![](insert-adjacent.svg) We can easily notice similarities between this and the previous picture. The insertion points are actually the same, but this method inserts HTML. diff --git a/2-ui/1-document/07-modifying-document/before-prepend-append-after.png b/2-ui/1-document/07-modifying-document/before-prepend-append-after.png deleted file mode 100644 index 858056f7..00000000 Binary files a/2-ui/1-document/07-modifying-document/before-prepend-append-after.png and /dev/null differ diff --git a/2-ui/1-document/07-modifying-document/before-prepend-append-after.svg b/2-ui/1-document/07-modifying-document/before-prepend-append-after.svg new file mode 100644 index 00000000..11d7e0e2 --- /dev/null +++ b/2-ui/1-document/07-modifying-document/before-prepend-append-after.svg @@ -0,0 +1,70 @@ + + + + before-prepend-append-after.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ol.after + + + ol.append + + + ol.prepend + + + + + + ol.before + + + ol.*(…nodes or strings) + + + + \ No newline at end of file diff --git a/2-ui/1-document/07-modifying-document/before-prepend-append-after@2x.png b/2-ui/1-document/07-modifying-document/before-prepend-append-after@2x.png deleted file mode 100644 index 9d689431..00000000 Binary files a/2-ui/1-document/07-modifying-document/before-prepend-append-after@2x.png and /dev/null differ diff --git a/2-ui/1-document/07-modifying-document/insert-adjacent.png b/2-ui/1-document/07-modifying-document/insert-adjacent.png deleted file mode 100644 index 7cf2f597..00000000 Binary files a/2-ui/1-document/07-modifying-document/insert-adjacent.png and /dev/null differ diff --git a/2-ui/1-document/07-modifying-document/insert-adjacent.svg b/2-ui/1-document/07-modifying-document/insert-adjacent.svg new file mode 100644 index 00000000..a95e0bf4 --- /dev/null +++ b/2-ui/1-document/07-modifying-document/insert-adjacent.svg @@ -0,0 +1,70 @@ + + + + insert-adjacent.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ol.insertAdjacentHTML(*, html) + + + + + + + + + + + + + + + + + + + + afterend + + + beforeend + + + afterbegin + + + + + + beforebegin + + + + \ No newline at end of file diff --git a/2-ui/1-document/07-modifying-document/insert-adjacent@2x.png b/2-ui/1-document/07-modifying-document/insert-adjacent@2x.png deleted file mode 100644 index fcb14017..00000000 Binary files a/2-ui/1-document/07-modifying-document/insert-adjacent@2x.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png deleted file mode 100644 index 67b9019a..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.svg b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.svg new file mode 100644 index 00000000..920e7974 --- /dev/null +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.svg @@ -0,0 +1,20 @@ + + + + field.svg + Created with sketchtool. + + + + + (0,0) + + + + clientWidth + + + + + + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png deleted file mode 100644 index cdd67985..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md index eaf7a02a..c6fe6c3b 100644 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md @@ -2,7 +2,7 @@ The ball has `position:absolute`. It means that its `left/top` coordinates are m The coordinates start from the inner left-upper corner of the field: -![](field.png) +![](field.svg) The inner field width/height is `clientWidth/clientHeight`. So the field center has coordinates `(clientWidth/2, clientHeight/2)`. diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md index c9957f71..c0df4579 100644 --- a/2-ui/1-document/09-size-and-scroll/article.md +++ b/2-ui/1-document/09-size-and-scroll/article.md @@ -28,7 +28,7 @@ It has the border, padding and scrolling. The full set of features. There are no The element looks like this: -![](metric-css.png) +![](metric-css.svg) You can [open the document in the sandbox](sandbox:metric). @@ -48,7 +48,7 @@ That's a note to avoid confusion, as `padding-bottom` is set in further examples Here's the overall picture: -![](metric-all.png) +![](metric-all.svg) Values of these properties are technically numbers, but these numbers are "of pixels", so these are pixel measurements. @@ -85,7 +85,7 @@ In the example below the inner `
` has `
` as `offsetParent` and `offse ``` -![](metric-offset-parent.png) +![](metric-offset-parent.svg) There are several occasions when `offsetParent` is `null`: @@ -100,7 +100,7 @@ Now let's move on to the element itself. These two properties are the simplest ones. They provide the "outer" width/height of the element. Or, in other words, its full size including borders. -![](metric-offset-width-height.png) +![](metric-offset-width-height.svg) For our sample element: @@ -136,7 +136,7 @@ In our example: - `clientLeft = 25` -- left border width - `clientTop = 25` -- top border width -![](metric-client-left-top.png) +![](metric-client-left-top.svg) ...But to be precise -- these properties are not border width/height, but rather relative coordinates of the inner side from the outer side. @@ -146,7 +146,7 @@ It becomes visible when the document is right-to-left (the operating system is i In that case, `clientLeft` would be not `25`, but with the scrollbar width `25 + 16 = 41`: -![](metric-client-left-top-rtl.png) +![](metric-client-left-top-rtl.svg) ## clientWidth/Height @@ -154,7 +154,7 @@ These properties provide the size of the area inside the element borders. They include the content width together with paddings, but without the scrollbar: -![](metric-client-width-height.png) +![](metric-client-width-height.svg) On the picture above let's first consider `clientHeight`: it's easier to evaluate. There's no horizontal scrollbar, so it's exactly the sum of what's inside the borders: CSS-height `200px` plus top and bottom paddings (`2 * 20px`) total `240px`. @@ -162,7 +162,7 @@ Now `clientWidth` -- here the content width is not `300px`, but `284px`, because **If there are no paddings, then `clientWidth/Height` is exactly the content area, inside the borders and the scrollbar (if any).** -![](metric-client-width-nopadding.png) +![](metric-client-width-nopadding.svg) So when there's no padding we can use `clientWidth/clientHeight` to get the content area size. @@ -171,7 +171,7 @@ So when there's no padding we can use `clientWidth/clientHeight` to get the cont - Properties `clientWidth/clientHeight` only account for the visible part of the element. - Properties `scrollWidth/scrollHeight` also include the scrolled out (hidden) parts: -![](metric-scroll-width-height.png) +![](metric-scroll-width-height.svg) On the picture above: @@ -201,7 +201,7 @@ Properties `scrollLeft/scrollTop` are the width/height of the hidden, scrolled o On the picture below we can see `scrollHeight` and `scrollTop` for a block with a vertical scroll. -![](metric-scroll-top.png) +![](metric-scroll-top.svg) In other words, `scrollTop` is "how much is scrolled up". diff --git a/2-ui/1-document/09-size-and-scroll/metric-all.png b/2-ui/1-document/09-size-and-scroll/metric-all.png deleted file mode 100644 index 6060b989..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-all.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-all.svg b/2-ui/1-document/09-size-and-scroll/metric-all.svg new file mode 100644 index 00000000..4640d3f4 --- /dev/null +++ b/2-ui/1-document/09-size-and-scroll/metric-all.svg @@ -0,0 +1,136 @@ + + + + metric-all.svg + Created with sketchtool. + + + + + + + + + + + + + + Introduction + + This Ecma Standard is based on several + originating technologies, the most well + known being JavaScript (Netscape) and + JScript (Microsoft). The language was + invented by Brendan Eich at Netscape and + first appeared in that company’s Navigator + 2.0 browser. It has appeared in all + subsequent browsers from Netscape and + in all browsers from Microsoft starting with + Internet Explorer 3.0. + The development of this Standard started + in November 1996. The first edition of this + Ecma Standard was adopted by the Ecma + General Assembly of June 1997. + That Ecma Standard was submitted to ISO/ + IEC JTC 1 for adoption under the fast-track + procedure, and approved as international + standard ISO/IEC 16262, in April 1998. The + Ecma General Assembly of June 1998 + approved the second edition of ECMA-262 + to keep it fully aligned with ISO/IEC 16262. + Changes between the first and the second + edition are editorial in nature. + + + + + scrollHeight + + + offsetHeight + + + scrollTop + + + + + + + + + + + clientHeight + + + + offsetTop + + + clientLeft + + + + + + + + + + clientWidth + + + + clientTop + + + offsetLeft + + + + + + offsetWidth + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-all@2x.png b/2-ui/1-document/09-size-and-scroll/metric-all@2x.png deleted file mode 100644 index 3c53be1d..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-all@2x.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.png deleted file mode 100644 index efcc9440..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.svg b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.svg new file mode 100644 index 00000000..0ba4de36 --- /dev/null +++ b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.svg @@ -0,0 +1,70 @@ + + + + metric-client-left-top-rtl.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + clientTop: + 25px + = border + + + clientLeft: + 41px + + + + + + + + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl@2x.png deleted file mode 100644 index 9b7edcf5..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl@2x.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top.png deleted file mode 100644 index 78755720..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-left-top.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top.svg b/2-ui/1-document/09-size-and-scroll/metric-client-left-top.svg new file mode 100644 index 00000000..1aa898ff --- /dev/null +++ b/2-ui/1-document/09-size-and-scroll/metric-client-left-top.svg @@ -0,0 +1,59 @@ + + + + metric-client-left-top.svg + Created with sketchtool. + + + + + + + + + + + + + Introduction + + This Ecma Standard is based on + several originating technologies, + the most well known being + JavaScript (Netscape) and JScript + (Microsoft). The language was + invented by Brendan Eich at + Netscape and first appeared in + that company’s Navigator 2.0 + browser. It has appeared in all + subsequent browsers from + Netscape and in all browsers + from Microsoft starting with + Internet Explorer 3.0. + The development of this + Standard started in November + 1996. The first edition of this + Ecma Standard was adopted by + the Ecma General Assembly of + June 1997. + + + + + + + clientTop: + 25px + = border + + + clientLeft: + 25px + + + + + + + + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top@2x.png deleted file mode 100644 index 8034c7af..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-left-top@2x.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-height.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-height.png deleted file mode 100644 index d50d1186..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-width-height.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-height.svg b/2-ui/1-document/09-size-and-scroll/metric-client-width-height.svg new file mode 100644 index 00000000..83d72d6c --- /dev/null +++ b/2-ui/1-document/09-size-and-scroll/metric-client-width-height.svg @@ -0,0 +1,112 @@ + + + + metric-client-width-height.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + border + 25px + + + padding + 20px + + + content width: + 284px + + + + + + border + 25px + + + padding + 20px + + + scrollbar + 16px + + + + + + + + clientWidth = + 20+284+20 + = + 324px + + + + + + clientHeight: + 240px + + + + + + height: + 200px + + + + + + Introduction + + This Ecma Standard is based on several + originating technologies, the most well + known being JavaScript (Netscape) and + JScript (Microsoft). The language was + invented by Brendan Eich at Netscape and + first appeared in that company’s Navigator + 2.0 browser. It has appeared in all + subsequent browsers from Netscape and + in all browsers from Microsoft starting with + + + + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-height@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-height@2x.png deleted file mode 100644 index 76017b9e..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-width-height@2x.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.png deleted file mode 100644 index 173bf152..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.svg b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.svg new file mode 100644 index 00000000..12bd2c7d --- /dev/null +++ b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.svg @@ -0,0 +1,77 @@ + + + + metric-client-width-nopadding.svg + Created with sketchtool. + + + + + + + + + + + + + + + + clientWidth: + 284px + = content width + + + + CSS width: + 300px + + + + Introduction + + This Ecma Standard is based on several + originating technologies, the most well + known being JavaScript (Netscape) and + JScript (Microsoft). The language was + invented by Brendan Eich at Netscape and + first appeared in that company’s Navigator + 2.0 browser. It has appeared in all + subsequent browsers from Netscape and + in all browsers from Microsoft starting with + + + + + padding: 0; + width: 300px; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding@2x.png deleted file mode 100644 index 2d145d77..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding@2x.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-css.png b/2-ui/1-document/09-size-and-scroll/metric-css.png deleted file mode 100644 index 5579b4ab..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-css.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-css.svg b/2-ui/1-document/09-size-and-scroll/metric-css.svg new file mode 100644 index 00000000..482d6192 --- /dev/null +++ b/2-ui/1-document/09-size-and-scroll/metric-css.svg @@ -0,0 +1,109 @@ + + + + metric-css.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + padding: + 20px + + + height: + 200px + + + + + + + + padding: + 20px + + + + + border + 25px + + + padding + 20px + + + content width: + 284px + + + + + + border + 25px + + + padding + 20px + + + scrollbar + 16px + + + Introduction + + This Ecma Standard is based on several + originating technologies, the most well + known being JavaScript (Netscape) and + JScript (Microsoft). The language was + invented by Brendan Eich at Netscape and + first appeared in that company’s Navigator + 2.0 browser. It has appeared in all + subsequent browsers from Netscape and in + all browsers from Microsoft starting with + + + + + + + + + + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-css@2x.png b/2-ui/1-document/09-size-and-scroll/metric-css@2x.png deleted file mode 100644 index c4df7706..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-css@2x.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-parent.png b/2-ui/1-document/09-size-and-scroll/metric-offset-parent.png deleted file mode 100644 index 059ef13e..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-offset-parent.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-parent.svg b/2-ui/1-document/09-size-and-scroll/metric-offset-parent.svg new file mode 100644 index 00000000..6af608e1 --- /dev/null +++ b/2-ui/1-document/09-size-and-scroll/metric-offset-parent.svg @@ -0,0 +1,88 @@ + + + + metric-offset-parent.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + offsetTop: + 180px + + + offsetLeft: + 180px + + + Introduction + + This Ecma Standard is based on several + originating technologies, the most well + known being JavaScript (Netscape) and + JScript (Microsoft). The language was + invented by Brendan Eich at Netscape + and first appeared in that company’s + Navigator 2.0 browser. It has appeared + in all subsequent browsers from + Netscape and in all browsers from + Microsoft + + + + + + + + + position: absolute; + left: 180px; + top: 180px; + + + offsetParent <MAIN> + + + <DIV> + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-parent@2x.png b/2-ui/1-document/09-size-and-scroll/metric-offset-parent@2x.png deleted file mode 100644 index 0f86b4f8..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-offset-parent@2x.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.png b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.png deleted file mode 100644 index 82551b8e..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.svg b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.svg new file mode 100644 index 00000000..1a2384a1 --- /dev/null +++ b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.svg @@ -0,0 +1,112 @@ + + + + metric-offset-width-height.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + border + 25px + + + padding + 20px + + + content width: + 284px + + + height: + 200px + + + + + + + + + border + 25px + + + padding + 20px + + + scrollbar + 16px + + + + + + + + offsetWidth = + 25+20+284+20+16+25 + = + 390px + + + + + + offsetHeight: + 290px + + + + + + Introduction + + This Ecma Standard is based on several + originating technologies, the most well + known being JavaScript (Netscape) and + JScript (Microsoft). The language was + invented by Brendan Eich at Netscape and + first appeared in that company’s Navigator + 2.0 browser. It has appeared in all + subsequent browsers from Netscape and + in all browsers from Microsoft starting with + + + + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-offset-width-height@2x.png b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height@2x.png deleted file mode 100644 index 805687cd..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-offset-width-height@2x.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-top.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-top.png deleted file mode 100644 index 83f41083..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-scroll-top.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-top.svg b/2-ui/1-document/09-size-and-scroll/metric-scroll-top.svg new file mode 100644 index 00000000..d06963b5 --- /dev/null +++ b/2-ui/1-document/09-size-and-scroll/metric-scroll-top.svg @@ -0,0 +1,87 @@ + + + + metric-scroll-top.svg + Created with sketchtool. + + + + + + + + + + + + + + + Introduction + + This Ecma Standard is based on several + originating technologies, the most well + known being JavaScript (Netscape) and + JScript (Microsoft). The language was + invented by Brendan Eich at Netscape and + first appeared in that company’s Navigator + 2.0 browser. It has appeared in all + subsequent browsers from Netscape and + in all browsers from Microsoft starting with + Internet Explorer 3.0. + The development of this Standard started + in November 1996. The first edition of this + Ecma Standard was adopted by the Ecma + General Assembly of June 1997. + That Ecma Standard was submitted to ISO/ + IEC JTC 1 for adoption under the fast-track + procedure, and approved as international + standard ISO/IEC 16262, in April 1998. The + Ecma General Assembly of June 1998 + approved the second edition of ECMA-262 + to keep it fully aligned with ISO/IEC 16262. + Changes between the first and the second + edition are editorial in nature. + + + + + scrollTop + + + + + + + + scrollHeight: + 723px + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-top@2x.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-top@2x.png deleted file mode 100644 index 1ef15502..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-scroll-top@2x.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.png deleted file mode 100644 index 54e6b963..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.png and /dev/null differ diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.svg b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.svg new file mode 100644 index 00000000..0525ac51 --- /dev/null +++ b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.svg @@ -0,0 +1,91 @@ + + + + metric-scroll-width-height.svg + Created with sketchtool. + + + + + + + + + + + + + + + Introduction + + This Ecma Standard is based on several + originating technologies, the most well + known being JavaScript (Netscape) and + JScript (Microsoft). The language was + invented by Brendan Eich at Netscape + and first appeared in that company’s + Navigator 2.0 browser. It has appeared + in all subsequent browsers from + Netscape and in all browsers from + Microsoft starting with Internet Explorer + 3.0. + The development of this Standard + started in November 1996. The first + edition of this Ecma Standard was + adopted by the Ecma General Assembly + of June 1997. + That Ecma Standard was submitted to + ISO/IEC JTC 1 for adoption under the + fast-track procedure, and approved as + international standard ISO/IEC 16262, in + April 1998. The Ecma General Assembly + of June 1998 approved the second + edition of ECMA-262 to keep it fully + aligned with ISO/IEC 16262. Changes + between the first and the second + edition are editorial in nature. + + + + + + + scrollHeight: + 723px + + + + + + + + + scrollWidth = + 324px + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height@2x.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height@2x.png deleted file mode 100644 index d57c5c19..00000000 Binary files a/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height@2x.png and /dev/null differ 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 3ab5a7b5..09ae198c 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 @@ -8,7 +8,7 @@ From the DOM point of view, the root document element is `document.documentEleme Properties `clientWidth/clientHeight` of `document.documentElement` is exactly what we want here: -![](document-client-width-height.png) +![](document-client-width-height.svg) ```online For instance, this button shows the height of your window: diff --git a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.png b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.png deleted file mode 100644 index a3cf95f1..00000000 Binary files a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.png and /dev/null differ diff --git a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg new file mode 100644 index 00000000..7c1cd805 --- /dev/null +++ b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg @@ -0,0 +1,28 @@ + + + + document-client-width-height.svg + Created with sketchtool. + + + + + + + + + + + + + + documentElement.clientHeight + + + documentElement.clientWidth + + + + + + \ No newline at end of file diff --git a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height@2x.png b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height@2x.png deleted file mode 100644 index 868dc8a2..00000000 Binary files a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height@2x.png and /dev/null differ diff --git a/2-ui/1-document/11-coordinates/article.md b/2-ui/1-document/11-coordinates/article.md index 5cc892fd..7812e736 100644 --- a/2-ui/1-document/11-coordinates/article.md +++ b/2-ui/1-document/11-coordinates/article.md @@ -13,7 +13,7 @@ When the page is scrolled to the top, so that the top/left corner of the window Here's the picture, the left part is before the scroll, and the right part - after scrolling the page up: -![](document-and-window-coordinates-scrolled.png) +![](document-and-window-coordinates-scrolled.svg) As the document moved up: - `pageY` - document-relative coordinate of the same point stayed the same, it's counted from the document top (now scrolled out). @@ -60,7 +60,7 @@ If you scroll the page and repeat, you'll notice that as window-relative button Here's the picture of `elem.getBoundingClientRect()` output: -![](coordinates.png) +![](coordinates.svg) As you can see, `x/y` and `width/height` fully describe the rectangle. Derived properties can be easily calculated: - `left = x` @@ -80,7 +80,7 @@ Technically it's possible for `width/height` to be negative, that's useful for Here's a rectangle with negative `width` and `height` (e.g. `width=-200`, `height=-100`): -![](coordinates-negative.png) +![](coordinates-negative.svg) The rectangle starts at its bottom-right corner and then spans left/up, as negative `width/height` lead it backwards by coordinates. diff --git a/2-ui/1-document/11-coordinates/coordinates-negative.png b/2-ui/1-document/11-coordinates/coordinates-negative.png deleted file mode 100644 index 8e587b1a..00000000 Binary files a/2-ui/1-document/11-coordinates/coordinates-negative.png and /dev/null differ diff --git a/2-ui/1-document/11-coordinates/coordinates-negative.svg b/2-ui/1-document/11-coordinates/coordinates-negative.svg new file mode 100644 index 00000000..18241c8b --- /dev/null +++ b/2-ui/1-document/11-coordinates/coordinates-negative.svg @@ -0,0 +1,64 @@ + + + + coordinates-negative.svg + Created with sketchtool. + + + + + + + + + + + + + + + + bottom + + + + + (x,y) + + + (x,y) + + + left + + + + right + + + + + Introduction + + This Ecma Standard is based on + several originating technologies, + the most well known being + JavaScript (Netscape) and JScript + (Microsoft). The language was + invented by Brendan Eich at + + + top + + + + + + + + (width,height) + + + + + \ No newline at end of file diff --git a/2-ui/1-document/11-coordinates/coordinates-negative@2x.png b/2-ui/1-document/11-coordinates/coordinates-negative@2x.png deleted file mode 100644 index e3341881..00000000 Binary files a/2-ui/1-document/11-coordinates/coordinates-negative@2x.png and /dev/null differ diff --git a/2-ui/1-document/11-coordinates/coordinates.png b/2-ui/1-document/11-coordinates/coordinates.png deleted file mode 100644 index 8ec6ea9b..00000000 Binary files a/2-ui/1-document/11-coordinates/coordinates.png and /dev/null differ diff --git a/2-ui/1-document/11-coordinates/coordinates.svg b/2-ui/1-document/11-coordinates/coordinates.svg new file mode 100644 index 00000000..cbe7e790 --- /dev/null +++ b/2-ui/1-document/11-coordinates/coordinates.svg @@ -0,0 +1,62 @@ + + + + coordinates.svg + Created with sketchtool. + + + + + + + + + + + height + + + bottom + + + + + + + x + + + left + + + y + + + width + + + + + + + right + + + + + + Introduction + + This Ecma Standard is based on + several originating technologies, + the most well known being + JavaScript (Netscape) and JScript + (Microsoft). The language was + invented by Brendan Eich at + + + top + + + + \ No newline at end of file diff --git a/2-ui/1-document/11-coordinates/coordinates@2x.png b/2-ui/1-document/11-coordinates/coordinates@2x.png deleted file mode 100644 index dacf7859..00000000 Binary files a/2-ui/1-document/11-coordinates/coordinates@2x.png and /dev/null differ diff --git a/2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled.png b/2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled.png deleted file mode 100644 index b531b88a..00000000 Binary files a/2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled.png and /dev/null differ diff --git a/2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled.svg b/2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled.svg new file mode 100644 index 00000000..5e378c34 --- /dev/null +++ b/2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled.svg @@ -0,0 +1,113 @@ + + + + document-and-window-coordinates-scrolled.svg + Created with sketchtool. + + + + + Introduction + + This Ecma Standard is based on several + originating technologies, the most well + known being JavaScript (Netscape) and + JScript (Microsoft). The language was + invented by Brendan Eich at Netscape and + first appeared in that company’s Navigator + 2.0 browser. + + It has appeared in all subsequent browsers + from Netscape and in all browsers from + Microsoft starting with Internet Explorer + 3.0. The development of this Standard + started in November 1996. + The first edition of this Ecma Standard was + adopted by the Ecma General Assembly of + June 1997. + That Ecma Standard was submitted to ISO/ + IEC JTC 1 for adoption under the fast-track + procedure, and approved as international + standard ISO/IEC 16262, in April 1998. The + Ecma General Assembly of June 1998 + approved the second edition of ECMA-262 + to keep it fully aligned with ISO/IEC 16262. + Changes between the first and the second + edition are editorial in nature. + + + 😍 + + + + pageY + + + clientY + + + + pageX + + + clientX + + + + + + Introduction + + This Ecma Standard is based on several + originating technologies, the most well + known being JavaScript (Netscape) and + JScript (Microsoft). The language was + invented by Brendan Eich at Netscape and + first appeared in that company’s Navigator + 2.0 browser. + + It has appeared in all subsequent browsers + from Netscape and in all browsers from + Microsoft starting with Internet Explorer + 3.0. The development of this Standard + started in November 1996. + The first edition of this Ecma Standard was + adopted by the Ecma General Assembly of + June 1997. + That Ecma Standard was submitted to ISO/ + IEC JTC 1 for adoption under the fast-track + procedure, and approved as international + standard ISO/IEC 16262, in April 1998. The + Ecma General Assembly of June 1998 + approved the second edition of ECMA-262 + to keep it fully aligned with ISO/IEC 16262. + Changes between the first and the second + edition are editorial in nature. + + + + + + + + + + + pageY + + + clientY + + + + pageX + + + clientX + + + 😍 + + + + \ No newline at end of file diff --git a/2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled@2x.png b/2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled@2x.png deleted file mode 100644 index 7f034459..00000000 Binary files a/2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled@2x.png and /dev/null differ diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.png b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.png deleted file mode 100644 index 4a054958..00000000 Binary files a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.png and /dev/null differ diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.svg b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.svg new file mode 100644 index 00000000..d03066ea --- /dev/null +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.svg @@ -0,0 +1,51 @@ + + + + move-ball-coords.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + ball.style.position.left + + + ? + + + fieldCoords.left + + + event.clientX + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords@2x.png b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords@2x.png deleted file mode 100644 index ecf4e5d2..00000000 Binary files a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords@2x.png and /dev/null differ diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md index 00de6400..24f454a2 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md @@ -26,7 +26,7 @@ Next we need to assign the correct `ball.style.position.left/top`. They contain Here's the picture: -![](move-ball-coords.png) +![](move-ball-coords.svg) We have `event.clientX/clientY` -- window-relative coordinates of the click. diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.png b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.png deleted file mode 100644 index 93defb0b..00000000 Binary files a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.png and /dev/null differ diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.svg b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.svg new file mode 100644 index 00000000..09906f12 --- /dev/null +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.svg @@ -0,0 +1,31 @@ + + + + carousel1.svg + Created with sketchtool. + + + + + + + + + + … + + + + + div (container) + + + 130x130 + + + ul (width: 9999px) + + + + + \ No newline at end of file diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1@2x.png b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1@2x.png deleted file mode 100644 index 7aa0d0f8..00000000 Binary files a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1@2x.png and /dev/null differ diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.png b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.png deleted file mode 100644 index a61bf5e5..00000000 Binary files a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.png and /dev/null differ diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.svg b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.svg new file mode 100644 index 00000000..d254b82d --- /dev/null +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.svg @@ -0,0 +1,33 @@ + + + + carousel2.svg + Created with sketchtool. + + + + + + + + + + + + … + + + + + div (container) + + + 130x130 + + + ul (margin-left: -350px) + + + + + \ No newline at end of file diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2@2x.png b/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2@2x.png deleted file mode 100644 index 4742579d..00000000 Binary files a/2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2@2x.png and /dev/null differ diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md index 25d83ab6..41de7e1f 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md @@ -2,7 +2,7 @@ The images ribbon can be represented as `ul/li` list of images ``. Normally, such a ribbon is wide, but we put a fixed-size `
` around to "cut" it, so that only a part of the ribbon is visibble: -![](carousel1.png) +![](carousel1.svg) To make the list show horizontally we need to apply correct CSS properties for `
  • `, like `display: inline-block`. @@ -10,7 +10,7 @@ For `` we should also adjust `display`, because by default it's `inline`. T To do the scrolling, we can shift `
      `. There are many ways to do it, for instance by changing `margin-left` or (better performance) use `transform: translateX()`: -![](carousel2.png) +![](carousel2.svg) The outer `
      ` has a fixed width, so "extra" images are cut. diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md index 7db8399e..51599d4a 100644 --- a/2-ui/2-events/02-bubbling-and-capturing/article.md +++ b/2-ui/2-events/02-bubbling-and-capturing/article.md @@ -41,7 +41,7 @@ A click on the inner `

      ` first runs `onclick`: 3. Then on the outer `

      `. 4. And so on upwards till the `document` object. -![](event-order-bubbling.png) +![](event-order-bubbling.svg) So if we click on `

      `, then we'll see 3 alerts: `p` -> `div` -> `form`. @@ -128,7 +128,7 @@ The standard [DOM Events](http://www.w3.org/TR/DOM-Level-3-Events/) describes 3 Here's the picture of a click on `` inside a table, taken from the specification: -![](eventflow.png) +![](eventflow.svg) That is: for a click on `` the event first goes through the ancestors chain down to the element (capturing phase), then it reaches the target and triggers there (target phase), and then it goes up (bubbling phase), calling handlers on its way. diff --git a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.png b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.png deleted file mode 100644 index 9de1f204..00000000 Binary files a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.png and /dev/null differ diff --git a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg new file mode 100644 index 00000000..bed1a88d --- /dev/null +++ b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg @@ -0,0 +1,28 @@ + + + + event-order-bubbling.svg + Created with sketchtool. + + + + + + + + 1 + + + 2 + + + 3 + + + Most deeply + nested element + + + + + \ No newline at end of file diff --git a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling@2x.png b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling@2x.png deleted file mode 100644 index 81bb24c7..00000000 Binary files a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling@2x.png and /dev/null differ diff --git a/2-ui/2-events/02-bubbling-and-capturing/eventflow.png b/2-ui/2-events/02-bubbling-and-capturing/eventflow.png deleted file mode 100644 index 56fa230a..00000000 Binary files a/2-ui/2-events/02-bubbling-and-capturing/eventflow.png and /dev/null differ diff --git a/2-ui/2-events/02-bubbling-and-capturing/eventflow.svg b/2-ui/2-events/02-bubbling-and-capturing/eventflow.svg new file mode 100644 index 00000000..6dc43d6c --- /dev/null +++ b/2-ui/2-events/02-bubbling-and-capturing/eventflow.svg @@ -0,0 +1,198 @@ + + + + eventflow.svg + Created with sketchtool. + + + + + + + + + Window + + + + + + + + Document + + + + + + + <html> + + + + + + <body> + + + + + + <table> + + + + + + <tbody> + + + + + + <tr> + + + + + + <tr> + + + + + + <td> + + + + + + Shady Grove + + + + + + <td> + + + + + + Aeolian + + + + + + <td> + + + + + + + Over the River, + + + Charlie + + + + + + + <td> + + + + + + Dorian + + + + + + + + + + + + + + + + + + + + + + + + Target + + + Phase + + + (2) + + + + + + Capture + + + Phase + + + (1) + + + + + + + + + + + + + + + + + + + + Bubbling + + + Phase + + + (3) + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/2-ui/2-events/02-bubbling-and-capturing/eventflow@2x.png b/2-ui/2-events/02-bubbling-and-capturing/eventflow@2x.png deleted file mode 100644 index 17ab1bf8..00000000 Binary files a/2-ui/2-events/02-bubbling-and-capturing/eventflow@2x.png and /dev/null differ diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index 60b7561b..ec6f4be9 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -81,7 +81,7 @@ In our case if we take a look inside the HTML, we can see nested tags inside `` then it becomes the value of `event.target`. -![](bagua-bubble.png) +![](bagua-bubble.svg) In the handler `table.onclick` we should take such `event.target` and find out whether the click was inside `` or not. diff --git a/2-ui/2-events/03-event-delegation/bagua-bubble.png b/2-ui/2-events/03-event-delegation/bagua-bubble.png deleted file mode 100644 index 55adbd0c..00000000 Binary files a/2-ui/2-events/03-event-delegation/bagua-bubble.png and /dev/null differ diff --git a/2-ui/2-events/03-event-delegation/bagua-bubble.svg b/2-ui/2-events/03-event-delegation/bagua-bubble.svg new file mode 100644 index 00000000..21408f82 --- /dev/null +++ b/2-ui/2-events/03-event-delegation/bagua-bubble.svg @@ -0,0 +1,27 @@ + + + + bagua-bubble.svg + Created with sketchtool. + + + + + + + + <table> + + + <td> + + + <strong> + + + event.target + + + + + \ No newline at end of file diff --git a/2-ui/2-events/03-event-delegation/bagua-bubble@2x.png b/2-ui/2-events/03-event-delegation/bagua-bubble@2x.png deleted file mode 100644 index 86b6d680..00000000 Binary files a/2-ui/2-events/03-event-delegation/bagua-bubble@2x.png and /dev/null differ diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md index 6812d99a..0665772c 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md @@ -6,7 +6,7 @@ Let's dive into more details about events that happen when mouse moves between e The `mouseover` event occurs when a mouse pointer comes over an element, and `mouseout` -- when it leaves. -![](mouseover-mouseout.png) +![](mouseover-mouseout.svg) These events are special, because they have a `relatedTarget`. @@ -46,7 +46,7 @@ The browser checks the mouse position from time to time. And if it notices chang That means that if the visitor is moving the mouse very fast then DOM-elements may be skipped: -![](mouseover-mouseout-over-elems.png) +![](mouseover-mouseout-over-elems.svg) If the mouse moves very fast from `#FROM` to `#TO` elements as painted above, then intermediate `

      ` (or some of them) may be skipped. The `mouseout` event may trigger on `#FROM` and then immediately `mouseover` on `#TO`. @@ -56,7 +56,7 @@ On the other hand, we should keep in mind that we can't assume that the mouse sl In particular it's possible that the cursor jumps right inside the middle of the page from out of the window. And `relatedTarget=null`, because it came from "nowhere": -![](mouseover-mouseout-from-outside.png) +![](mouseover-mouseout-from-outside.svg)
      In case of a fast move, intermediate elements may trigger no events. But if the mouse enters the element (`mouseover`), when we're guaranteed to have `mouseout` when it leaves it. @@ -76,7 +76,7 @@ Also try to move the pointer over the red `div`, and then move it out quickly do Imagine -- a mouse pointer entered an element. The `mouseover` triggered. Then the cursor goes into a child element. The interesting fact is that `mouseout` triggers in that case. The cursor is still in the element, but we have a `mouseout` from it! -![](mouseover-to-child.png) +![](mouseover-to-child.svg) That seems strange, but can be easily explained. diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.png deleted file mode 100644 index a9d76beb..00000000 Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.png and /dev/null differ diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.svg b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.svg new file mode 100644 index 00000000..63114af0 --- /dev/null +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.svg @@ -0,0 +1,35 @@ + + + + mouseover-mouseout-from-outside.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + #TO + + + + target + + + relatedTarget = null + + + + \ No newline at end of file diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside@2x.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside@2x.png deleted file mode 100644 index 8ef27b83..00000000 Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside@2x.png and /dev/null differ diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.png deleted file mode 100644 index b421342b..00000000 Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.png and /dev/null differ diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.svg b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.svg new file mode 100644 index 00000000..93cb217b --- /dev/null +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.svg @@ -0,0 +1,51 @@ + + + + mouseover-mouseout-over-elems.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + #TO + + + + #FROM + + + + <DIV> + + + + <DIV> + + + + <DIV> + + + + mouseover + + + mouseout + + + + \ No newline at end of file diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems@2x.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems@2x.png deleted file mode 100644 index 8a4c8672..00000000 Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems@2x.png and /dev/null differ diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.png deleted file mode 100644 index 688dcb48..00000000 Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.png and /dev/null differ diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.svg b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.svg new file mode 100644 index 00000000..e2979f1b --- /dev/null +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.svg @@ -0,0 +1,22 @@ + + + + mouseover-mouseout.svg + Created with sketchtool. + + + + + <DIV> + + + + mouseover + + + + mouseout + + + + \ No newline at end of file diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout@2x.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout@2x.png deleted file mode 100644 index 6cb3c78a..00000000 Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout@2x.png and /dev/null differ diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.png deleted file mode 100644 index 975acf4a..00000000 Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.png and /dev/null differ diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.svg b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.svg new file mode 100644 index 00000000..860c6bfb --- /dev/null +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.svg @@ -0,0 +1,25 @@ + + + + mouseover-to-child.svg + Created with sketchtool. + + + + + #FROM + + + + #TO + + + + mouseover + + + mouseout + + + + \ No newline at end of file diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child@2x.png b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child@2x.png deleted file mode 100644 index 50725f39..00000000 Binary files a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child@2x.png and /dev/null differ diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/field.svg b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/field.svg index 81ecde02..920e7974 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/field.svg +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/field.svg @@ -1,32 +1,20 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + field.svg + Created with sketchtool. + + + + + (0,0) + + + + clientWidth + + + + + \ No newline at end of file diff --git a/2-ui/4-forms-controls/1-form-elements/article.md b/2-ui/4-forms-controls/1-form-elements/article.md index 7ee472a9..03118e5c 100644 --- a/2-ui/4-forms-controls/1-form-elements/article.md +++ b/2-ui/4-forms-controls/1-form-elements/article.md @@ -128,7 +128,7 @@ reference the form. Here's the picture: -![](form-navigation.png) +![](form-navigation.svg) For instance: diff --git a/2-ui/4-forms-controls/1-form-elements/form-navigation.png b/2-ui/4-forms-controls/1-form-elements/form-navigation.png deleted file mode 100644 index 883d5956..00000000 Binary files a/2-ui/4-forms-controls/1-form-elements/form-navigation.png and /dev/null differ diff --git a/2-ui/4-forms-controls/1-form-elements/form-navigation.svg b/2-ui/4-forms-controls/1-form-elements/form-navigation.svg new file mode 100644 index 00000000..6634e1b9 --- /dev/null +++ b/2-ui/4-forms-controls/1-form-elements/form-navigation.svg @@ -0,0 +1,41 @@ + + + + form-navigation.svg + Created with sketchtool. + + + + + form + + + + elements[0] + + + + elements[1] + + + + elements[n] + + + ... + + + + + + + form + + + form + + + + + + \ No newline at end of file diff --git a/2-ui/4-forms-controls/1-form-elements/form-navigation@2x.png b/2-ui/4-forms-controls/1-form-elements/form-navigation@2x.png deleted file mode 100644 index bd96c1c2..00000000 Binary files a/2-ui/4-forms-controls/1-form-elements/form-navigation@2x.png and /dev/null differ 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 8f9fc383..fd2989c1 100644 --- a/2-ui/99-ui-misc/02-selection-range/article.md +++ b/2-ui/99-ui-misc/02-selection-range/article.md @@ -74,7 +74,7 @@ drawHtmlTree(selectPDomtree, 'div.select-p-domtree', 690, 320); Let's select `"Example: italic"`. That's two first children of `

      ` (counting text nodes): -![](range-example-p-0-1.png) +![](range-example-p-0-1.svg) ```html run

      Example: italic and bold

      @@ -123,7 +123,7 @@ From – To + + + range-example-p-0-1.svg + Created with sketchtool. + + + + + + + + + + <p>Example: <i>italic</i> and <b>bold</b></p> + + + + + + 0 + + + 1 + + + 2 + + + 3 + + + + + + \ No newline at end of file diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1@2x.png b/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1@2x.png deleted file mode 100644 index b9e0bb33..00000000 Binary files a/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1@2x.png and /dev/null differ diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.png b/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.png deleted file mode 100644 index 756efe6f..00000000 Binary files a/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.png and /dev/null differ 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 new file mode 100644 index 00000000..4f8f1f94 --- /dev/null +++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg @@ -0,0 +1,36 @@ + + + + range-example-p-1-3.svg + Created with sketchtool. + + + + + + + + + + <p>Example: <i>italic</i> and <b>bold</b></p> + + + + + + 0 + + + 1 + + + 2 + + + 3 + + + + + + \ No newline at end of file diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3@2x.png b/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3@2x.png deleted file mode 100644 index 6f6e4960..00000000 Binary files a/2-ui/99-ui-misc/02-selection-range/range-example-p-1-3@2x.png and /dev/null differ diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.png b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.png deleted file mode 100644 index 0d4c110e..00000000 Binary files a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.png and /dev/null differ 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 new file mode 100644 index 00000000..82d7b373 --- /dev/null +++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg @@ -0,0 +1,47 @@ + + + + range-example-p-2-b-3-range.svg + Created with sketchtool. + + + + + + + + + + <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 diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range@2x.png b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range@2x.png deleted file mode 100644 index 32179cd7..00000000 Binary files a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range@2x.png and /dev/null differ diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.png b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.png deleted file mode 100644 index 265db829..00000000 Binary files a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.png and /dev/null differ 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 new file mode 100644 index 00000000..68b777fb --- /dev/null +++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg @@ -0,0 +1,36 @@ + + + + range-example-p-2-b-3.svg + Created with sketchtool. + + + + + + + + + + <p>Example: <i>italic</i> and <b>bold</b></p> + + + + + + 0 + + + 1 + + + 2 + + + 3 + + + + + + \ No newline at end of file diff --git a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3@2x.png b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3@2x.png deleted file mode 100644 index e87b8347..00000000 Binary files a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3@2x.png and /dev/null differ diff --git a/2-ui/99-ui-misc/02-selection-range/selection-direction-backward.png b/2-ui/99-ui-misc/02-selection-range/selection-direction-backward.png deleted file mode 100644 index 1ed287cb..00000000 Binary files a/2-ui/99-ui-misc/02-selection-range/selection-direction-backward.png and /dev/null differ 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 new file mode 100644 index 00000000..281b1224 --- /dev/null +++ b/2-ui/99-ui-misc/02-selection-range/selection-direction-backward.svg @@ -0,0 +1,46 @@ + + + + selection-direction-backward.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + <p>Example: <i>italic</i> and <b>bold</b></p> + + + + focus + + + anchor + + + + + + + + + + + + \ No newline at end of file diff --git a/2-ui/99-ui-misc/02-selection-range/selection-direction-backward@2x.png b/2-ui/99-ui-misc/02-selection-range/selection-direction-backward@2x.png deleted file mode 100644 index 1f4964e0..00000000 Binary files a/2-ui/99-ui-misc/02-selection-range/selection-direction-backward@2x.png and /dev/null differ diff --git a/2-ui/99-ui-misc/02-selection-range/selection-direction-forward.png b/2-ui/99-ui-misc/02-selection-range/selection-direction-forward.png deleted file mode 100644 index ace0c278..00000000 Binary files a/2-ui/99-ui-misc/02-selection-range/selection-direction-forward.png and /dev/null differ 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 new file mode 100644 index 00000000..88de84a7 --- /dev/null +++ b/2-ui/99-ui-misc/02-selection-range/selection-direction-forward.svg @@ -0,0 +1,46 @@ + + + + selection-direction-forward.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + <p>Example: <i>italic</i> and <b>bold</b></p> + + + + anchor + + + focus + + + + + + + + + + + \ No newline at end of file diff --git a/2-ui/99-ui-misc/02-selection-range/selection-direction-forward@2x.png b/2-ui/99-ui-misc/02-selection-range/selection-direction-forward@2x.png deleted file mode 100644 index ec15a69d..00000000 Binary files a/2-ui/99-ui-misc/02-selection-range/selection-direction-forward@2x.png and /dev/null differ diff --git a/2-ui/99-ui-misc/02-selection-range/selection-firefox.png b/2-ui/99-ui-misc/02-selection-range/selection-firefox.png deleted file mode 100644 index 75fdc1de..00000000 Binary files a/2-ui/99-ui-misc/02-selection-range/selection-firefox.png and /dev/null differ diff --git a/2-ui/99-ui-misc/02-selection-range/selection-firefox.svg b/2-ui/99-ui-misc/02-selection-range/selection-firefox.svg new file mode 100644 index 00000000..89cdac88 --- /dev/null +++ b/2-ui/99-ui-misc/02-selection-range/selection-firefox.svg @@ -0,0 +1,23 @@ + + + + selection-firefox.svg + Created with sketchtool. + + + + + + + + + + + + + + selection + + + + \ No newline at end of file diff --git a/2-ui/99-ui-misc/02-selection-range/selection-firefox@2x.png b/2-ui/99-ui-misc/02-selection-range/selection-firefox@2x.png deleted file mode 100644 index 8fea5be4..00000000 Binary files a/2-ui/99-ui-misc/02-selection-range/selection-firefox@2x.png and /dev/null differ diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md index e701b6ed..ece54610 100644 --- a/2-ui/99-ui-misc/03-event-loop/article.md +++ b/2-ui/99-ui-misc/03-event-loop/article.md @@ -30,7 +30,7 @@ It may happen that a task comes while the engine is busy, then it's enqueued. The tasks form a queue, so-called "macrotask queue" (v8 term): -![](eventLoop.png) +![](eventLoop.svg) For instance, while the engine is busy executing a `script`, a user may move their mouse causing `mousemove`, and `setTimeout` may be due and so on, these tasks form a queue, as illustrated on the picture above. @@ -309,7 +309,7 @@ So, microtasks are asynchronous from the point of code execution, but they don't The richer event loop picture may look like this: -![](eventLoop-full.png) +![](eventLoop-full.svg) The more detailed algorithm of the event loop (though still simplified compare to the [specification](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)): diff --git a/2-ui/99-ui-misc/03-event-loop/eventLoop-full.png b/2-ui/99-ui-misc/03-event-loop/eventLoop-full.png deleted file mode 100644 index 20192e8c..00000000 Binary files a/2-ui/99-ui-misc/03-event-loop/eventLoop-full.png and /dev/null differ diff --git a/2-ui/99-ui-misc/03-event-loop/eventLoop-full.svg b/2-ui/99-ui-misc/03-event-loop/eventLoop-full.svg new file mode 100644 index 00000000..cb806d5b --- /dev/null +++ b/2-ui/99-ui-misc/03-event-loop/eventLoop-full.svg @@ -0,0 +1,58 @@ + + + + eventLoop-full.svg + Created with sketchtool. + + + + ... + + + + setTimeout + + + + mousemove + + + + script + + + event + loop + + + + + + + + microtasks + + + render + + + microtasks + + + render + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/2-ui/99-ui-misc/03-event-loop/eventLoop-full@2x.png b/2-ui/99-ui-misc/03-event-loop/eventLoop-full@2x.png deleted file mode 100644 index cc960052..00000000 Binary files a/2-ui/99-ui-misc/03-event-loop/eventLoop-full@2x.png and /dev/null differ diff --git a/2-ui/99-ui-misc/03-event-loop/eventLoop.png b/2-ui/99-ui-misc/03-event-loop/eventLoop.png deleted file mode 100644 index 8d8210b0..00000000 Binary files a/2-ui/99-ui-misc/03-event-loop/eventLoop.png and /dev/null differ diff --git a/2-ui/99-ui-misc/03-event-loop/eventLoop.svg b/2-ui/99-ui-misc/03-event-loop/eventLoop.svg new file mode 100644 index 00000000..22bbcb5a --- /dev/null +++ b/2-ui/99-ui-misc/03-event-loop/eventLoop.svg @@ -0,0 +1,36 @@ + + + + eventLoop.svg + Created with sketchtool. + + + + + ... + + + + setTimeout + + + + mousemove + + + + script + + + event + loop + + + macrotask + queue + + + + + + \ No newline at end of file diff --git a/2-ui/99-ui-misc/03-event-loop/eventLoop@2x.png b/2-ui/99-ui-misc/03-event-loop/eventLoop@2x.png deleted file mode 100644 index c02575e9..00000000 Binary files a/2-ui/99-ui-misc/03-event-loop/eventLoop@2x.png and /dev/null differ diff --git a/2-ui/99-ui-misc/03-event-loop/promiseQueue.png b/2-ui/99-ui-misc/03-event-loop/promiseQueue.png deleted file mode 100644 index f8a972d3..00000000 Binary files a/2-ui/99-ui-misc/03-event-loop/promiseQueue.png and /dev/null differ diff --git a/2-ui/99-ui-misc/03-event-loop/promiseQueue.svg b/2-ui/99-ui-misc/03-event-loop/promiseQueue.svg new file mode 100644 index 00000000..0e6d51d5 --- /dev/null +++ b/2-ui/99-ui-misc/03-event-loop/promiseQueue.svg @@ -0,0 +1,43 @@ + + + + promiseQueue.svg + Created with sketchtool. + + + + promise + . + then + ( + handler + ); + + + ... + + + alert + ( + "code finished" + ); + + + + handler enqueued + + + queued handler runs + + + + + + + + script execution finished + + + + + \ No newline at end of file diff --git a/2-ui/99-ui-misc/03-event-loop/promiseQueue@2x.png b/2-ui/99-ui-misc/03-event-loop/promiseQueue@2x.png deleted file mode 100644 index f7b49e2b..00000000 Binary files a/2-ui/99-ui-misc/03-event-loop/promiseQueue@2x.png and /dev/null differ diff --git a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256.png b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256.png deleted file mode 100644 index 3c9bebde..00000000 Binary files a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256.png and /dev/null differ diff --git a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256.svg b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256.svg new file mode 100644 index 00000000..6238f60b --- /dev/null +++ b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256.svg @@ -0,0 +1,22 @@ + + + + 8bit-integer-256.svg + Created with sketchtool. + + + + + 10000000 + 0 + + + 8-bit intege + r + + + 256 + + + + \ No newline at end of file diff --git a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256@2x.png b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256@2x.png deleted file mode 100644 index 0a6e4a24..00000000 Binary files a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-256@2x.png and /dev/null differ diff --git a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257.png b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257.png deleted file mode 100644 index 7be333e0..00000000 Binary files a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257.png and /dev/null differ diff --git a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257.svg b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257.svg new file mode 100644 index 00000000..f4c0a02e --- /dev/null +++ b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257.svg @@ -0,0 +1,22 @@ + + + + 8bit-integer-257.svg + Created with sketchtool. + + + + + 10000000 + 1 + + + 8-bit intege + r + + + 257 + + + + \ No newline at end of file diff --git a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257@2x.png b/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257@2x.png deleted file mode 100644 index a0b02dbb..00000000 Binary files a/4-binary/01-arraybuffer-binary-arrays/8bit-integer-257@2x.png and /dev/null differ diff --git a/4-binary/01-arraybuffer-binary-arrays/arraybuffer-view-buffersource.png b/4-binary/01-arraybuffer-binary-arrays/arraybuffer-view-buffersource.png deleted file mode 100644 index c2f3783d..00000000 Binary files a/4-binary/01-arraybuffer-binary-arrays/arraybuffer-view-buffersource.png and /dev/null differ diff --git a/4-binary/01-arraybuffer-binary-arrays/arraybuffer-view-buffersource.svg b/4-binary/01-arraybuffer-binary-arrays/arraybuffer-view-buffersource.svg new file mode 100644 index 00000000..dc3474cc --- /dev/null +++ b/4-binary/01-arraybuffer-binary-arrays/arraybuffer-view-buffersource.svg @@ -0,0 +1,171 @@ + + + + arraybuffer-view-buffersource.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + 0 + + + 2 + + + 1 + + + + 3 + + + + + + + 4 + + + 5 + + + 6 + + + 7 + + + + + + 0 + + + 1 + + + + + 2 + + + 3 + + + + 0 + + + + 1 + + + new ArrayBuffer(16) + + + ArrayBufferView + + + Uint16Array + Int16Array + + + + Uint8Array + Int8Array + Uint8ClampedArray + + + Uint32Array + Int32Array + Float32Array + + + + + + Float64Array + + + DataView + + + get/setUint8(offset) get/setFloat32(offset)... + + + BufferSource + + + + + 1 + + + 0 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + + + 8 + + + 9 + + + 10 + + + 11 + + + 12 + + + 13 + + + 14 + + + 15 + + + + \ No newline at end of file diff --git a/4-binary/01-arraybuffer-binary-arrays/arraybuffer-view-buffersource@2x.png b/4-binary/01-arraybuffer-binary-arrays/arraybuffer-view-buffersource@2x.png deleted file mode 100644 index b70757f4..00000000 Binary files a/4-binary/01-arraybuffer-binary-arrays/arraybuffer-view-buffersource@2x.png and /dev/null differ diff --git a/4-binary/01-arraybuffer-binary-arrays/arraybuffer-views.png b/4-binary/01-arraybuffer-binary-arrays/arraybuffer-views.png deleted file mode 100644 index 7c1f5bbb..00000000 Binary files a/4-binary/01-arraybuffer-binary-arrays/arraybuffer-views.png and /dev/null differ diff --git a/4-binary/01-arraybuffer-binary-arrays/arraybuffer-views.svg b/4-binary/01-arraybuffer-binary-arrays/arraybuffer-views.svg new file mode 100644 index 00000000..eddf7e68 --- /dev/null +++ b/4-binary/01-arraybuffer-binary-arrays/arraybuffer-views.svg @@ -0,0 +1,150 @@ + + + + arraybuffer-views.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + 1 + + + 0 + + + 0 + + + 2 + + + 1 + + + + 3 + + + + + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + + + 8 + + + 9 + + + 10 + + + 11 + + + 12 + + + 13 + + + 14 + + + 15 + + + 4 + + + 5 + + + 6 + + + 7 + + + + + + 0 + + + 1 + + + + + 2 + + + 3 + + + + 0 + + + + 1 + + + new ArrayBuffer(16) + + + Uint16Array + + + + Uint8Array + + + Uint32Array + + + + Float64Array + + + + \ No newline at end of file diff --git a/4-binary/01-arraybuffer-binary-arrays/arraybuffer-views@2x.png b/4-binary/01-arraybuffer-binary-arrays/arraybuffer-views@2x.png deleted file mode 100644 index ebaef188..00000000 Binary files a/4-binary/01-arraybuffer-binary-arrays/arraybuffer-views@2x.png and /dev/null differ diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md index 9de9ee4d..b1d0bbb0 100644 --- a/4-binary/01-arraybuffer-binary-arrays/article.md +++ b/4-binary/01-arraybuffer-binary-arrays/article.md @@ -41,7 +41,7 @@ For instance: So, the binary data in an `ArrayBuffer` of 16 bytes can be interpreted as 16 "tiny numbers", or 8 bigger numbers (2 bytes each), or 4 even bigger (4 bytes each), or 2 floating-point values with high precision (8 bytes each). -![](arraybuffer-views.png) +![](arraybuffer-views.svg) `ArrayBuffer` is the core object, the root of everything, the raw binary data. @@ -157,13 +157,13 @@ For instance, let's try to put 256 into `Uint8Array`. In binary form, 256 is `10 For bigger numbers, only the rightmost (less significant) 8 bits are stored, and the rest is cut off: -![](8bit-integer-256.png) +![](8bit-integer-256.svg) So we'll get zero. For 257, the binary form is `100000001` (9 bits), the rightmost 8 get stored, so we'll have `1` in the array: -![](8bit-integer-257.png) +![](8bit-integer-257.svg) In other words, the number modulo 28 is saved. @@ -266,4 +266,4 @@ We'll see these terms in the next chapters. `BufferSource` is one of the most co Here's a cheatsheet: -![](arraybuffer-view-buffersource.png) +![](arraybuffer-view-buffersource.svg) diff --git a/4-binary/03-blob/article.md b/4-binary/03-blob/article.md index 3f2d9350..880bc6d8 100644 --- a/4-binary/03-blob/article.md +++ b/4-binary/03-blob/article.md @@ -6,7 +6,7 @@ In the browser, there are additional higher-level objects, described in [File AP `Blob` consists of an optional string `type` (a MIME-type usually), plus `blobParts` -- a sequence of other `Blob` objects, strings and `BufferSources`. -![](blob.png) +![](blob.svg) The constructor syntax is: diff --git a/4-binary/03-blob/blob.png b/4-binary/03-blob/blob.png deleted file mode 100644 index cd0974f4..00000000 Binary files a/4-binary/03-blob/blob.png and /dev/null differ diff --git a/4-binary/03-blob/blob.svg b/4-binary/03-blob/blob.svg new file mode 100644 index 00000000..14f5ce85 --- /dev/null +++ b/4-binary/03-blob/blob.svg @@ -0,0 +1,51 @@ + + + + blob.svg + Created with sketchtool. + + + + + image/pn + g + + + + blob1 + + + + blob2 + + + + str + + + + buffer + + + + ... + + + type + + + Blob + + + blobParts + + + + + + + = + + + + + \ No newline at end of file diff --git a/4-binary/03-blob/blob@2x.png b/4-binary/03-blob/blob@2x.png deleted file mode 100644 index 519bdf88..00000000 Binary files a/4-binary/03-blob/blob@2x.png and /dev/null differ diff --git a/5-network/05-fetch-crossorigin/article.md b/5-network/05-fetch-crossorigin/article.md index 5c355834..e88dcc25 100644 --- a/5-network/05-fetch-crossorigin/article.md +++ b/5-network/05-fetch-crossorigin/article.md @@ -149,7 +149,7 @@ The browser plays the role of a trusted mediator here: 1. It ensures that the corrent `Origin` is sent with a cross-domain request. 2. If checks for correct `Access-Control-Allow-Origin` in the response, if it is so, then JavaScript access, otherwise forbids with an error. -![](xhr-another-domain.png) +![](xhr-another-domain.svg) Here's an example of a permissive server response: ``` @@ -215,7 +215,7 @@ If the server agrees to serve the requests, then it should respond with status 2 - The response header `Access-Control-Allow-Headers` must have a list of allowed headers. - Additionally, the header `Access-Control-Max-Age` may specify a number of seconds to cache the permissions. So the browser won't have to send a preflight for subsequent requests that satisfy given permissions. -![](xhr-preflight.png) +![](xhr-preflight.svg) Let's see how it works step-by-step on example, for a cross-domain `PATCH` request (this method is often used to update data): diff --git a/5-network/05-fetch-crossorigin/cors-gmail-messages.png b/5-network/05-fetch-crossorigin/cors-gmail-messages.png deleted file mode 100644 index 768eaf5f..00000000 Binary files a/5-network/05-fetch-crossorigin/cors-gmail-messages.png and /dev/null differ diff --git a/5-network/05-fetch-crossorigin/cors-gmail-messages.svg b/5-network/05-fetch-crossorigin/cors-gmail-messages.svg new file mode 100644 index 00000000..cfe15d7a --- /dev/null +++ b/5-network/05-fetch-crossorigin/cors-gmail-messages.svg @@ -0,0 +1,54 @@ + + + + cors-gmail-messages.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + evil.com + + + + got the cookie? + okay! + + + gmail.com + + + + + GET /messages + + + cookie: user=John + + + {"messages": [...]} + + + + \ No newline at end of file diff --git a/5-network/05-fetch-crossorigin/cors-gmail-messages@2x.png b/5-network/05-fetch-crossorigin/cors-gmail-messages@2x.png deleted file mode 100644 index e9f02047..00000000 Binary files a/5-network/05-fetch-crossorigin/cors-gmail-messages@2x.png and /dev/null differ diff --git a/5-network/05-fetch-crossorigin/xhr-another-domain.png b/5-network/05-fetch-crossorigin/xhr-another-domain.png deleted file mode 100644 index 0be23b1e..00000000 Binary files a/5-network/05-fetch-crossorigin/xhr-another-domain.png and /dev/null differ diff --git a/5-network/05-fetch-crossorigin/xhr-another-domain.svg b/5-network/05-fetch-crossorigin/xhr-another-domain.svg new file mode 100644 index 00000000..3525652b --- /dev/null +++ b/5-network/05-fetch-crossorigin/xhr-another-domain.svg @@ -0,0 +1,51 @@ + + + + xhr-another-domain.svg + Created with sketchtool. + + + + + JavaScript + + + + Browser + + + + Server + + + + + + + Origin: https://javascript.info + + + HTTP-request + + + fetch() + + + HTTP-response + + + Access-Control-Allow-Origin: + * OR https://javascript.info + + + if the header allows, success, + + + otherwise fail + + + + + + + \ No newline at end of file diff --git a/5-network/05-fetch-crossorigin/xhr-another-domain@2x.png b/5-network/05-fetch-crossorigin/xhr-another-domain@2x.png deleted file mode 100644 index 030606b2..00000000 Binary files a/5-network/05-fetch-crossorigin/xhr-another-domain@2x.png and /dev/null differ diff --git a/5-network/05-fetch-crossorigin/xhr-preflight.png b/5-network/05-fetch-crossorigin/xhr-preflight.png deleted file mode 100644 index a11a7092..00000000 Binary files a/5-network/05-fetch-crossorigin/xhr-preflight.png and /dev/null differ diff --git a/5-network/05-fetch-crossorigin/xhr-preflight.svg b/5-network/05-fetch-crossorigin/xhr-preflight.svg new file mode 100644 index 00000000..5ec17688 --- /dev/null +++ b/5-network/05-fetch-crossorigin/xhr-preflight.svg @@ -0,0 +1,82 @@ + + + + xhr-preflight.svg + Created with sketchtool. + + + + + JavaScript + + + + Browser + + + + Server + + + + + + + fetch() + + + OPTIONS + Origin + Access-Control-Request-Method + Access-Control-Request-Headers + + + + 200 OK + Access-Control-Allow-Method + Access-Control-Allow-Headers + Access-Control-Max-Age + + + + + + Access-Control-Allow-Origin + + + Main HTTP-response + + + otherwise error + + + if allowed: success, + + + + Origin + + + Main HTTP-request + + + preflight + + + if allowed + + + 1 + + + 2 + + + 3 + + + 4 + + + + \ No newline at end of file diff --git a/5-network/05-fetch-crossorigin/xhr-preflight@2x.png b/5-network/05-fetch-crossorigin/xhr-preflight@2x.png deleted file mode 100644 index 1333ec37..00000000 Binary files a/5-network/05-fetch-crossorigin/xhr-preflight@2x.png and /dev/null differ diff --git a/5-network/07-url/article.md b/5-network/07-url/article.md index 89ef425e..4630751f 100644 --- a/5-network/07-url/article.md +++ b/5-network/07-url/article.md @@ -48,7 +48,7 @@ alert(url.pathname); // /url Here's the cheatsheet: -![](url-object.png) +![](url-object.svg) - `href` is the full url, same as `url.toString()` - `protocol` ends with the colon character `:` diff --git a/5-network/07-url/url-object.png b/5-network/07-url/url-object.png deleted file mode 100644 index 3cef766c..00000000 Binary files a/5-network/07-url/url-object.png and /dev/null differ diff --git a/5-network/07-url/url-object.svg b/5-network/07-url/url-object.svg new file mode 100644 index 00000000..36d8b0af --- /dev/null +++ b/5-network/07-url/url-object.svg @@ -0,0 +1,54 @@ + + + + url-object.svg + Created with sketchtool. + + + + + + + + + + + + + + + href + + + origin + + + + host + + + proto + col + + + http://site.com:8080/path/page?p1=v1&p2=v2… #has + h + + + hostname + + + port + + + pathname + + + search + + + hash + + + + \ No newline at end of file diff --git a/5-network/07-url/url-object@2x.png b/5-network/07-url/url-object@2x.png deleted file mode 100644 index d9a325ad..00000000 Binary files a/5-network/07-url/url-object@2x.png and /dev/null differ diff --git a/5-network/10-long-polling/article.md b/5-network/10-long-polling/article.md index 19624e09..e456a38d 100644 --- a/5-network/10-long-polling/article.md +++ b/5-network/10-long-polling/article.md @@ -33,7 +33,7 @@ The flow: The situation when the browser sent a request and has a pending connection with the server, is standard for this method. Only when a message is delivered, the connection is reestablished. -![](long-polling.png) +![](long-polling.svg) If the connection is lost, because of, say, a network error, the browser immediately sends a new request. diff --git a/5-network/10-long-polling/long-polling.png b/5-network/10-long-polling/long-polling.png deleted file mode 100644 index 433e159f..00000000 Binary files a/5-network/10-long-polling/long-polling.png and /dev/null differ diff --git a/5-network/10-long-polling/long-polling.svg b/5-network/10-long-polling/long-polling.svg new file mode 100644 index 00000000..1632ed62 --- /dev/null +++ b/5-network/10-long-polling/long-polling.svg @@ -0,0 +1,56 @@ + + + + long-polling.svg + Created with sketchtool. + + + + Browser + + + Server + + + + + request + + + connection + hangs + + + connection breaks + end of request + + + + data + + + + + request + + + connection + hangs + + + + request + + + + data + + + + connection breaks + end of request + + + + + \ No newline at end of file diff --git a/5-network/10-long-polling/long-polling@2x.png b/5-network/10-long-polling/long-polling@2x.png deleted file mode 100644 index 9d4da477..00000000 Binary files a/5-network/10-long-polling/long-polling@2x.png and /dev/null differ diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md index e52b75e9..091d6d12 100644 --- a/5-network/11-websocket/article.md +++ b/5-network/11-websocket/article.md @@ -75,7 +75,7 @@ When `new WebSocket(url)` is created, it starts connecting immediately. During the connection the browser (using headers) asks the server: "Do you support Websocket?" And if the server replies "yes", then the talk continues in WebSocket protocol, which is not HTTP at all. -![](websocket-handshake.png) +![](websocket-handshake.svg) Here's an example of browser request for `new WebSocket("wss://javascript.info/chat")`. diff --git a/5-network/11-websocket/websocket-handshake.png b/5-network/11-websocket/websocket-handshake.png deleted file mode 100644 index 74ca4252..00000000 Binary files a/5-network/11-websocket/websocket-handshake.png and /dev/null differ diff --git a/5-network/11-websocket/websocket-handshake.svg b/5-network/11-websocket/websocket-handshake.svg new file mode 100644 index 00000000..b0571374 --- /dev/null +++ b/5-network/11-websocket/websocket-handshake.svg @@ -0,0 +1,34 @@ + + + + websocket-handshake.svg + Created with sketchtool. + + + + + Browser + + + + Server + + + + + + HTTP-request + "Hey, server, let's talk WebSocket?" + + + + HTTP-response + "Okay!" + + + + WebSocket protocol + + + + \ No newline at end of file diff --git a/5-network/11-websocket/websocket-handshake@2x.png b/5-network/11-websocket/websocket-handshake@2x.png deleted file mode 100644 index 34a26102..00000000 Binary files a/5-network/11-websocket/websocket-handshake@2x.png and /dev/null differ diff --git a/6-data-storage/01-cookie/article.md b/6-data-storage/01-cookie/article.md index b85a7787..048831cc 100644 --- a/6-data-storage/01-cookie/article.md +++ b/6-data-storage/01-cookie/article.md @@ -196,7 +196,7 @@ Now, while browsing the web in another window, you occasionally come to another The form is submitted from `evil.com` directly to the bank site, and your cookie is also sent, just because it's sent every time you visit `bank.com`. So the bank recognizes you and actually performs the payment. -![](cookie-xsrf.png) +![](cookie-xsrf.svg) That's called a cross-site request forgery (or XSRF) attack. @@ -358,15 +358,15 @@ For instance: 1. A page at `site.com` loads a banner from another site: ``. 2. Along with the banner, the remote server at `ads.com` may set `Set-Cookie` header with cookie like `id=1234`. Such cookie originates from `ads.com` domain, and will only be visible at `ads.com`: - ![](cookie-third-party.png) + ![](cookie-third-party.svg) 3. Next time when `ads.com` is accessed, the remote server gets the `id` cookie and recognizes the user: - ![](cookie-third-party-2.png) + ![](cookie-third-party-2.svg) 4. What's even more important, when the users moves from `site.com` to another site `other.com` that also has a banner, then `ads.com` gets the cookie, as it belongs to `ads.com`, thus recognizing the visitor and tracking him as he moves between sites: - ![](cookie-third-party-3.png) + ![](cookie-third-party-3.svg) Third-party cookies are traditionally used for tracking and ads services, due to their nature. They are bound to the originating domain, so `ads.com` can track the same user between different sites, if they all access it. diff --git a/6-data-storage/01-cookie/cookie-third-party-2.png b/6-data-storage/01-cookie/cookie-third-party-2.png deleted file mode 100644 index c46aa2a6..00000000 Binary files a/6-data-storage/01-cookie/cookie-third-party-2.png and /dev/null differ diff --git a/6-data-storage/01-cookie/cookie-third-party-2.svg b/6-data-storage/01-cookie/cookie-third-party-2.svg new file mode 100644 index 00000000..78b6ba93 --- /dev/null +++ b/6-data-storage/01-cookie/cookie-third-party-2.svg @@ -0,0 +1,28 @@ + + + + cookie-third-party-2.svg + Created with sketchtool. + + + + + <img src="https://ads.com/banner.png"> + + + site.com + + + + ads.com + + + + GET /banner.png + + + cookie: id=123 + + + + \ No newline at end of file diff --git a/6-data-storage/01-cookie/cookie-third-party-2@2x.png b/6-data-storage/01-cookie/cookie-third-party-2@2x.png deleted file mode 100644 index f7bfd732..00000000 Binary files a/6-data-storage/01-cookie/cookie-third-party-2@2x.png and /dev/null differ diff --git a/6-data-storage/01-cookie/cookie-third-party-3.png b/6-data-storage/01-cookie/cookie-third-party-3.png deleted file mode 100644 index ec7f0ae0..00000000 Binary files a/6-data-storage/01-cookie/cookie-third-party-3.png and /dev/null differ diff --git a/6-data-storage/01-cookie/cookie-third-party-3.svg b/6-data-storage/01-cookie/cookie-third-party-3.svg new file mode 100644 index 00000000..91082edb --- /dev/null +++ b/6-data-storage/01-cookie/cookie-third-party-3.svg @@ -0,0 +1,29 @@ + + + + cookie-third-party-3.svg + Created with sketchtool. + + + + + <img src="https://ads.com/banner.png"> + + + other.com + + + + ads.com + + + + GET /banner.png + + + cookie: id=123 + + + + + \ No newline at end of file diff --git a/6-data-storage/01-cookie/cookie-third-party-3@2x.png b/6-data-storage/01-cookie/cookie-third-party-3@2x.png deleted file mode 100644 index 1f730ceb..00000000 Binary files a/6-data-storage/01-cookie/cookie-third-party-3@2x.png and /dev/null differ diff --git a/6-data-storage/01-cookie/cookie-third-party.png b/6-data-storage/01-cookie/cookie-third-party.png deleted file mode 100644 index 0a857e63..00000000 Binary files a/6-data-storage/01-cookie/cookie-third-party.png and /dev/null differ diff --git a/6-data-storage/01-cookie/cookie-third-party.svg b/6-data-storage/01-cookie/cookie-third-party.svg new file mode 100644 index 00000000..9dbb61d5 --- /dev/null +++ b/6-data-storage/01-cookie/cookie-third-party.svg @@ -0,0 +1,29 @@ + + + + cookie-third-party.svg + Created with sketchtool. + + + + + <img src="https://ads.com/banner.png"> + + + site.com + + + + ads.com + + + + + GET /banner.png + + + Set-Cookie: id=123 + + + + \ No newline at end of file diff --git a/6-data-storage/01-cookie/cookie-third-party@2x.png b/6-data-storage/01-cookie/cookie-third-party@2x.png deleted file mode 100644 index e6bd026b..00000000 Binary files a/6-data-storage/01-cookie/cookie-third-party@2x.png and /dev/null differ diff --git a/6-data-storage/01-cookie/cookie-xsrf.png b/6-data-storage/01-cookie/cookie-xsrf.png deleted file mode 100644 index 4290546a..00000000 Binary files a/6-data-storage/01-cookie/cookie-xsrf.png and /dev/null differ diff --git a/6-data-storage/01-cookie/cookie-xsrf.svg b/6-data-storage/01-cookie/cookie-xsrf.svg new file mode 100644 index 00000000..2938b75f --- /dev/null +++ b/6-data-storage/01-cookie/cookie-xsrf.svg @@ -0,0 +1,34 @@ + + + + cookie-xsrf.svg + Created with sketchtool. + + + + + <form action="https://bank.com/pay"> + .... + </form> + + + evil.com + + + + got the cookie? + okay! + + + bank.com + + + + POST /pay + + + cookie: user=John + + + + \ No newline at end of file diff --git a/6-data-storage/01-cookie/cookie-xsrf@2x.png b/6-data-storage/01-cookie/cookie-xsrf@2x.png deleted file mode 100644 index 7d25559e..00000000 Binary files a/6-data-storage/01-cookie/cookie-xsrf@2x.png and /dev/null differ diff --git a/6-data-storage/03-indexeddb/article.md b/6-data-storage/03-indexeddb/article.md index ab33d0cf..f73be4d2 100644 --- a/6-data-storage/03-indexeddb/article.md +++ b/6-data-storage/03-indexeddb/article.md @@ -174,7 +174,7 @@ An example of object that can't be stored: an object with circular references. S A key must have a type one of: number, date, string, binary, or array. It's an unique identifier: we can search/remove/update values by the key. -![](indexeddb-structure.png) +![](indexeddb-structure.svg) As we'll see very soon, we can provide a key when we add a value to the store, similar to `localStorage`. But when we store objects, IndexedDB allows to setup an object property as the key, that's much more convenient. Or we can auto-generate keys. @@ -551,7 +551,7 @@ openRequest.onupgradeneeded = function() { Imagine that our `inventory` has 4 books. Here's the picture that shows exactly what the `index` is: -![](indexeddb-index.png) +![](indexeddb-index.svg) As said, the index for each value of `price` (second argument) keeps the list of keys that have that price. diff --git a/6-data-storage/03-indexeddb/indexeddb-cursor.png b/6-data-storage/03-indexeddb/indexeddb-cursor.png deleted file mode 100644 index 1d69d647..00000000 Binary files a/6-data-storage/03-indexeddb/indexeddb-cursor.png and /dev/null differ diff --git a/6-data-storage/03-indexeddb/indexeddb-cursor.svg b/6-data-storage/03-indexeddb/indexeddb-cursor.svg new file mode 100644 index 00000000..c41ac75d --- /dev/null +++ b/6-data-storage/03-indexeddb/indexeddb-cursor.svg @@ -0,0 +1,45 @@ + + + + indexeddb-cursor.svg + Created with sketchtool. + + + + + + id: 'html' + price: 3 + + + + id: 'css' + price: 5 + + + + id: 'js' + price: 10 + + + + id: 'nodejs' + price: 10 + + + books + + + cursor + + + + + primaryKey + + + key + + + + \ No newline at end of file diff --git a/6-data-storage/03-indexeddb/indexeddb-cursor@2x.png b/6-data-storage/03-indexeddb/indexeddb-cursor@2x.png deleted file mode 100644 index 6dbb30b8..00000000 Binary files a/6-data-storage/03-indexeddb/indexeddb-cursor@2x.png and /dev/null differ diff --git a/6-data-storage/03-indexeddb/indexeddb-index.png b/6-data-storage/03-indexeddb/indexeddb-index.png deleted file mode 100644 index 228e7e46..00000000 Binary files a/6-data-storage/03-indexeddb/indexeddb-index.png and /dev/null differ diff --git a/6-data-storage/03-indexeddb/indexeddb-index.svg b/6-data-storage/03-indexeddb/indexeddb-index.svg new file mode 100644 index 00000000..f1ff5901 --- /dev/null +++ b/6-data-storage/03-indexeddb/indexeddb-index.svg @@ -0,0 +1,46 @@ + + + + indexeddb-index.svg + Created with sketchtool. + + + + + + id: 'html' + price: 3 + + + + id: 'css' + price: 5 + + + 3: ['html'] + 5: ['css'] + 10: ['js','nodejs'] + + + + id: 'js' + price: 10 + + + + id: 'nodejs' + price: 10 + + + books + + + index + + + + + + + + \ No newline at end of file diff --git a/6-data-storage/03-indexeddb/indexeddb-index@2x.png b/6-data-storage/03-indexeddb/indexeddb-index@2x.png deleted file mode 100644 index 21168c06..00000000 Binary files a/6-data-storage/03-indexeddb/indexeddb-index@2x.png and /dev/null differ diff --git a/6-data-storage/03-indexeddb/indexeddb-structure.png b/6-data-storage/03-indexeddb/indexeddb-structure.png deleted file mode 100644 index 642e4d74..00000000 Binary files a/6-data-storage/03-indexeddb/indexeddb-structure.png and /dev/null differ diff --git a/6-data-storage/03-indexeddb/indexeddb-structure.svg b/6-data-storage/03-indexeddb/indexeddb-structure.svg new file mode 100644 index 00000000..9fc1eb6e --- /dev/null +++ b/6-data-storage/03-indexeddb/indexeddb-structure.svg @@ -0,0 +1,82 @@ + + + + indexeddb-structure.svg + Created with sketchtool. + + + + + key1: value1 + + + + + + + Database + + + objectStore + + + + + + + + objectStore + + + + + + key3: value3 + + + key2: value2 + + + key4: value4 + + + key5: value5 + + + + + objectStore + + + key1: value1 + + + key3: value3 + + + key2: value2 + + + key4: value4 + + + key5: value5 + + + key1: value1 + + + key3: value3 + + + key2: value2 + + + key4: value4 + + + key5: value5 + + + + \ No newline at end of file diff --git a/6-data-storage/03-indexeddb/indexeddb-structure@2x.png b/6-data-storage/03-indexeddb/indexeddb-structure@2x.png deleted file mode 100644 index 2e4f389f..00000000 Binary files a/6-data-storage/03-indexeddb/indexeddb-structure@2x.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/article.md b/7-animation/1-bezier-curve/article.md index 4a806514..10a047bf 100644 --- a/7-animation/1-bezier-curve/article.md +++ b/7-animation/1-bezier-curve/article.md @@ -12,15 +12,15 @@ There may be 2, 3, 4 or more. For instance, two points curve: -![](bezier2.png) +![](bezier2.svg) Three points curve: -![](bezier3.png) +![](bezier3.svg) Four points curve: -![](bezier4.png) +![](bezier4.svg) If you look closely at these curves, you can immediately notice: @@ -29,7 +29,7 @@ If you look closely at these curves, you can immediately notice: For two points we have a linear curve (that's a straight line), for three points -- quadratic curve (parabolic), for four points -- cubic curve. 3. **A curve is always inside the [convex hull](https://en.wikipedia.org/wiki/Convex_hull) of control points:** - ![](bezier4-e.png) ![](bezier3-e.png) + ![](bezier4-e.svg) ![](bezier3-e.svg) Because of that last property, in computer graphics it's possible to optimize intersection tests. If convex hulls do not intersect, then curves do not either. So checking for the convex hulls intersection first can give a very fast "no intersection" result. Checking the intersection or convex hulls is much easier, because they are rectangles, triangles and so on (see the picture above), much simpler figures than the curve. @@ -45,7 +45,7 @@ After some practice it becomes obvious how to place points to get the needed cur Here are some examples: -![](bezier-car.png) ![](bezier-letter.png) ![](bezier-vase.png) +![](bezier-car.svg) ![](bezier-letter.svg) ![](bezier-vase.svg) ## De Casteljau's algorithm @@ -77,7 +77,7 @@ Control points (1,2 and 3) can be moved by the mouse. Press the "play" button to | For `t=0.25` | For `t=0.5` | | ------------------------ | ---------------------- | -| ![](bezier3-draw1.png) | ![](bezier3-draw2.png) | +| ![](bezier3-draw1.svg) | ![](bezier3-draw2.svg) | 4. Now in the blue segment take a point on the distance proportional to the same value of `t`. That is, for `t=0.25` (the left picture) we have a point at the end of the left quarter of the segment, and for `t=0.5` (the right picture) -- in the middle of the segment. On pictures above that point is red. diff --git a/7-animation/1-bezier-curve/bezier-car.png b/7-animation/1-bezier-curve/bezier-car.png deleted file mode 100644 index 32d95965..00000000 Binary files a/7-animation/1-bezier-curve/bezier-car.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier-car.svg b/7-animation/1-bezier-curve/bezier-car.svg new file mode 100644 index 00000000..b6b1ea4d --- /dev/null +++ b/7-animation/1-bezier-curve/bezier-car.svg @@ -0,0 +1,31 @@ + + + + bezier-car.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/7-animation/1-bezier-curve/bezier-car@2x.png b/7-animation/1-bezier-curve/bezier-car@2x.png deleted file mode 100644 index 9debd3ba..00000000 Binary files a/7-animation/1-bezier-curve/bezier-car@2x.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier-letter.png b/7-animation/1-bezier-curve/bezier-letter.png deleted file mode 100644 index fa9d2322..00000000 Binary files a/7-animation/1-bezier-curve/bezier-letter.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier-letter.svg b/7-animation/1-bezier-curve/bezier-letter.svg new file mode 100644 index 00000000..0951a38b --- /dev/null +++ b/7-animation/1-bezier-curve/bezier-letter.svg @@ -0,0 +1,49 @@ + + + + bezier-letter.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/7-animation/1-bezier-curve/bezier-letter@2x.png b/7-animation/1-bezier-curve/bezier-letter@2x.png deleted file mode 100644 index e7e59ffd..00000000 Binary files a/7-animation/1-bezier-curve/bezier-letter@2x.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier-vase.png b/7-animation/1-bezier-curve/bezier-vase.png deleted file mode 100644 index 6c92f246..00000000 Binary files a/7-animation/1-bezier-curve/bezier-vase.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier-vase.svg b/7-animation/1-bezier-curve/bezier-vase.svg new file mode 100644 index 00000000..046bb46b --- /dev/null +++ b/7-animation/1-bezier-curve/bezier-vase.svg @@ -0,0 +1,48 @@ + + + + bezier-vase.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/7-animation/1-bezier-curve/bezier-vase@2x.png b/7-animation/1-bezier-curve/bezier-vase@2x.png deleted file mode 100644 index ccb977d7..00000000 Binary files a/7-animation/1-bezier-curve/bezier-vase@2x.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier2.png b/7-animation/1-bezier-curve/bezier2.png deleted file mode 100644 index 50df5096..00000000 Binary files a/7-animation/1-bezier-curve/bezier2.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier2.svg b/7-animation/1-bezier-curve/bezier2.svg new file mode 100644 index 00000000..a6ebe591 --- /dev/null +++ b/7-animation/1-bezier-curve/bezier2.svg @@ -0,0 +1,19 @@ + + + + bezier2.svg + Created with sketchtool. + + + + + + 1 + + + + 2 + + + + \ No newline at end of file diff --git a/7-animation/1-bezier-curve/bezier2@2x.png b/7-animation/1-bezier-curve/bezier2@2x.png deleted file mode 100644 index 66cb9a21..00000000 Binary files a/7-animation/1-bezier-curve/bezier2@2x.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier3-draw1.png b/7-animation/1-bezier-curve/bezier3-draw1.png deleted file mode 100644 index 2f3b3f8e..00000000 Binary files a/7-animation/1-bezier-curve/bezier3-draw1.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier3-draw1.svg b/7-animation/1-bezier-curve/bezier3-draw1.svg new file mode 100644 index 00000000..cbf82784 --- /dev/null +++ b/7-animation/1-bezier-curve/bezier3-draw1.svg @@ -0,0 +1,36 @@ + + + + bezier3-draw1.svg + Created with sketchtool. + + + + + + + 1 + + + + 3 + + + + + 2 + + + 0.25 + + + t = 0.25 + + + 0.25 + + + + + + \ No newline at end of file diff --git a/7-animation/1-bezier-curve/bezier3-draw1@2x.png b/7-animation/1-bezier-curve/bezier3-draw1@2x.png deleted file mode 100644 index bd9ff640..00000000 Binary files a/7-animation/1-bezier-curve/bezier3-draw1@2x.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier3-draw2.png b/7-animation/1-bezier-curve/bezier3-draw2.png deleted file mode 100644 index aead6cea..00000000 Binary files a/7-animation/1-bezier-curve/bezier3-draw2.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier3-draw2.svg b/7-animation/1-bezier-curve/bezier3-draw2.svg new file mode 100644 index 00000000..25f2d099 --- /dev/null +++ b/7-animation/1-bezier-curve/bezier3-draw2.svg @@ -0,0 +1,37 @@ + + + + bezier3-draw2.svg + Created with sketchtool. + + + + + + + + 1 + + + + 3 + + + + + + 2 + + + 0.5 + + + t = 0.5 + + + 0.5 + + + + + \ No newline at end of file diff --git a/7-animation/1-bezier-curve/bezier3-draw2@2x.png b/7-animation/1-bezier-curve/bezier3-draw2@2x.png deleted file mode 100644 index 8d03793e..00000000 Binary files a/7-animation/1-bezier-curve/bezier3-draw2@2x.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier3-e.png b/7-animation/1-bezier-curve/bezier3-e.png deleted file mode 100644 index 0e9b8d37..00000000 Binary files a/7-animation/1-bezier-curve/bezier3-e.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier3-e.svg b/7-animation/1-bezier-curve/bezier3-e.svg new file mode 100644 index 00000000..4828e9d1 --- /dev/null +++ b/7-animation/1-bezier-curve/bezier3-e.svg @@ -0,0 +1,24 @@ + + + + bezier3-e.svg + Created with sketchtool. + + + + + + + 1 + + + + 3 + + + + 3 + + + + \ No newline at end of file diff --git a/7-animation/1-bezier-curve/bezier3-e@2x.png b/7-animation/1-bezier-curve/bezier3-e@2x.png deleted file mode 100644 index 21ad2bb1..00000000 Binary files a/7-animation/1-bezier-curve/bezier3-e@2x.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier3.png b/7-animation/1-bezier-curve/bezier3.png deleted file mode 100644 index 0af6c479..00000000 Binary files a/7-animation/1-bezier-curve/bezier3.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier3.svg b/7-animation/1-bezier-curve/bezier3.svg new file mode 100644 index 00000000..ea44532e --- /dev/null +++ b/7-animation/1-bezier-curve/bezier3.svg @@ -0,0 +1,23 @@ + + + + bezier3.svg + Created with sketchtool. + + + + + + 1 + + + + 3 + + + + 2 + + + + \ No newline at end of file diff --git a/7-animation/1-bezier-curve/bezier3@2x.png b/7-animation/1-bezier-curve/bezier3@2x.png deleted file mode 100644 index 1390cbaa..00000000 Binary files a/7-animation/1-bezier-curve/bezier3@2x.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier4-e.png b/7-animation/1-bezier-curve/bezier4-e.png deleted file mode 100644 index 4f0bcae5..00000000 Binary files a/7-animation/1-bezier-curve/bezier4-e.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier4-e.svg b/7-animation/1-bezier-curve/bezier4-e.svg new file mode 100644 index 00000000..7a4253cf --- /dev/null +++ b/7-animation/1-bezier-curve/bezier4-e.svg @@ -0,0 +1,28 @@ + + + + bezier4-e.svg + Created with sketchtool. + + + + + + + + + + 1 + + + 2 + + + 3 + + + 4 + + + + \ No newline at end of file diff --git a/7-animation/1-bezier-curve/bezier4-e@2x.png b/7-animation/1-bezier-curve/bezier4-e@2x.png deleted file mode 100644 index 34e89e63..00000000 Binary files a/7-animation/1-bezier-curve/bezier4-e@2x.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier4.png b/7-animation/1-bezier-curve/bezier4.png deleted file mode 100644 index f4ebc4a3..00000000 Binary files a/7-animation/1-bezier-curve/bezier4.png and /dev/null differ diff --git a/7-animation/1-bezier-curve/bezier4.svg b/7-animation/1-bezier-curve/bezier4.svg new file mode 100644 index 00000000..24a1f0fd --- /dev/null +++ b/7-animation/1-bezier-curve/bezier4.svg @@ -0,0 +1,27 @@ + + + + bezier4.svg + Created with sketchtool. + + + + + + + + + 1 + + + 2 + + + 3 + + + 4 + + + + \ No newline at end of file diff --git a/7-animation/1-bezier-curve/bezier4@2x.png b/7-animation/1-bezier-curve/bezier4@2x.png deleted file mode 100644 index ddf3c2ec..00000000 Binary files a/7-animation/1-bezier-curve/bezier4@2x.png and /dev/null differ diff --git a/7-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up.png b/7-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up.png deleted file mode 100644 index 2318e2c0..00000000 Binary files a/7-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up.png and /dev/null differ diff --git a/7-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up.svg b/7-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up.svg new file mode 100644 index 00000000..d42c3df1 --- /dev/null +++ b/7-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up.svg @@ -0,0 +1,30 @@ + + + + bezier-up.svg + Created with sketchtool. + + + + + + + + + + + + 1 + + + 2 + + + 3 + + + 4 + + + + \ No newline at end of file diff --git a/7-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up@2x.png b/7-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up@2x.png deleted file mode 100644 index 91155c09..00000000 Binary files a/7-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up@2x.png and /dev/null differ diff --git a/7-animation/2-css-animations/2-animate-logo-bezier-css/solution.md b/7-animation/2-css-animations/2-animate-logo-bezier-css/solution.md index 7f26d570..88105399 100644 --- a/7-animation/2-css-animations/2-animate-logo-bezier-css/solution.md +++ b/7-animation/2-css-animations/2-animate-logo-bezier-css/solution.md @@ -4,4 +4,4 @@ For instance, we can take both control points with `y>1`, like: `cubic-bezier(0. The graph: -![](bezier-up.png) +![](bezier-up.svg) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 0d3e4005..844a2758 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -154,7 +154,7 @@ The simplest variant is when the animation goes uniformly, with the same linear Here's how that curve looks: -![](bezier-linear.png) +![](bezier-linear.svg) ...As we can see, it's just a straight line. As the time (`x`) passes, the completion (`y`) of the animation steadily goes from `0` to `1`. @@ -178,7 +178,7 @@ We can use another Bezier curve: `cubic-bezier(0.0, 0.5, 0.5 ,1.0)`. The graph: -![](train-curve.png) +![](train-curve.svg) As we can see, the process starts fast: the curve soars up high, and then slower and slower. @@ -204,7 +204,7 @@ Other names are shorthands for the following `cubic-bezier`: | ease* | ease-in | ease-out | ease-in-out | |-------------------------------|----------------------|-----------------------|--------------------------| | (0.25, 0.1, 0.25, 1.0) | (0.42, 0, 1.0, 1.0) | (0, 0, 0.58, 1.0) | (0.42, 0, 0.58, 1.0) | -| ![ease, figure](ease.png) | ![ease-in, figure](ease-in.png) | ![ease-out, figure](ease-out.png) | ![ease-in-out, figure](ease-in-out.png) | +| ![ease, figure](ease.svg) | ![ease-in, figure](ease-in.svg) | ![ease-out, figure](ease-out.svg) | ![ease-in-out, figure](ease-in-out.svg) | `*` -- by default, if there's no timing function, `ease` is used. @@ -246,7 +246,7 @@ But if you click the train, you'll see that: Why it happens -- pretty obvious if we look at the graph of the given Bezier curve: -![](bezier-train-over.png) +![](bezier-train-over.svg) We moved the `y` coordinate of the 2nd point below zero, and for the 3rd point we made put it over `1`, so the curve goes out of the "regular" quadrant. The `y` is out of the "standard" range `0..1`. diff --git a/7-animation/2-css-animations/bezier-linear.png b/7-animation/2-css-animations/bezier-linear.png deleted file mode 100644 index 0b1e53bb..00000000 Binary files a/7-animation/2-css-animations/bezier-linear.png and /dev/null differ diff --git a/7-animation/2-css-animations/bezier-linear.svg b/7-animation/2-css-animations/bezier-linear.svg new file mode 100644 index 00000000..a2c90d70 --- /dev/null +++ b/7-animation/2-css-animations/bezier-linear.svg @@ -0,0 +1,23 @@ + + + + bezier-linear.svg + Created with sketchtool. + + + + + + + + 1 + + + + 2 + + + + + + \ No newline at end of file diff --git a/7-animation/2-css-animations/bezier-linear@2x.png b/7-animation/2-css-animations/bezier-linear@2x.png deleted file mode 100644 index fa796391..00000000 Binary files a/7-animation/2-css-animations/bezier-linear@2x.png and /dev/null differ diff --git a/7-animation/2-css-animations/bezier-train-over.png b/7-animation/2-css-animations/bezier-train-over.png deleted file mode 100644 index ebe51a8a..00000000 Binary files a/7-animation/2-css-animations/bezier-train-over.png and /dev/null differ diff --git a/7-animation/2-css-animations/bezier-train-over.svg b/7-animation/2-css-animations/bezier-train-over.svg new file mode 100644 index 00000000..fe093413 --- /dev/null +++ b/7-animation/2-css-animations/bezier-train-over.svg @@ -0,0 +1,50 @@ + + + + bezier-train-over.svg + Created with sketchtool. + + + + + + + + + + + + (1,1) + + + (0,0) + + + (0,1) + + + (1,0) + + + + + + + 1 + + + + 2 + + + + + 4 + + + + 3 + + + + \ No newline at end of file diff --git a/7-animation/2-css-animations/bezier-train-over@2x.png b/7-animation/2-css-animations/bezier-train-over@2x.png deleted file mode 100644 index 2b444d66..00000000 Binary files a/7-animation/2-css-animations/bezier-train-over@2x.png and /dev/null differ diff --git a/7-animation/2-css-animations/ease-in-out.png b/7-animation/2-css-animations/ease-in-out.png deleted file mode 100644 index e0b179b6..00000000 Binary files a/7-animation/2-css-animations/ease-in-out.png and /dev/null differ diff --git a/7-animation/2-css-animations/ease-in-out.svg b/7-animation/2-css-animations/ease-in-out.svg new file mode 100644 index 00000000..bb79b59b --- /dev/null +++ b/7-animation/2-css-animations/ease-in-out.svg @@ -0,0 +1,29 @@ + + + + ease-in-out.svg + Created with sketchtool. + + + + + + + + + + + 1 + + + 2 + + + 3 + + + 4 + + + + \ No newline at end of file diff --git a/7-animation/2-css-animations/ease-in-out@2x.png b/7-animation/2-css-animations/ease-in-out@2x.png deleted file mode 100644 index 14726b33..00000000 Binary files a/7-animation/2-css-animations/ease-in-out@2x.png and /dev/null differ diff --git a/7-animation/2-css-animations/ease-in.png b/7-animation/2-css-animations/ease-in.png deleted file mode 100644 index df182377..00000000 Binary files a/7-animation/2-css-animations/ease-in.png and /dev/null differ diff --git a/7-animation/2-css-animations/ease-in.svg b/7-animation/2-css-animations/ease-in.svg new file mode 100644 index 00000000..909fff50 --- /dev/null +++ b/7-animation/2-css-animations/ease-in.svg @@ -0,0 +1,27 @@ + + + + ease-in.svg + Created with sketchtool. + + + + + + + + + 1 + + + 2 + + + 3 + + + 4 + + + + \ No newline at end of file diff --git a/7-animation/2-css-animations/ease-in@2x.png b/7-animation/2-css-animations/ease-in@2x.png deleted file mode 100644 index 2d6e7ddb..00000000 Binary files a/7-animation/2-css-animations/ease-in@2x.png and /dev/null differ diff --git a/7-animation/2-css-animations/ease-out.png b/7-animation/2-css-animations/ease-out.png deleted file mode 100644 index c07ed123..00000000 Binary files a/7-animation/2-css-animations/ease-out.png and /dev/null differ diff --git a/7-animation/2-css-animations/ease-out.svg b/7-animation/2-css-animations/ease-out.svg new file mode 100644 index 00000000..88e81912 --- /dev/null +++ b/7-animation/2-css-animations/ease-out.svg @@ -0,0 +1,27 @@ + + + + ease-out.svg + Created with sketchtool. + + + + + + + + + 1 + + + 2 + + + 3 + + + 4 + + + + \ No newline at end of file diff --git a/7-animation/2-css-animations/ease-out@2x.png b/7-animation/2-css-animations/ease-out@2x.png deleted file mode 100644 index b49506a1..00000000 Binary files a/7-animation/2-css-animations/ease-out@2x.png and /dev/null differ diff --git a/7-animation/2-css-animations/ease.png b/7-animation/2-css-animations/ease.png deleted file mode 100644 index 37f5376b..00000000 Binary files a/7-animation/2-css-animations/ease.png and /dev/null differ diff --git a/7-animation/2-css-animations/ease.svg b/7-animation/2-css-animations/ease.svg new file mode 100644 index 00000000..43110839 --- /dev/null +++ b/7-animation/2-css-animations/ease.svg @@ -0,0 +1,29 @@ + + + + ease.svg + Created with sketchtool. + + + + + + + + + + + 1 + + + 2 + + + 3 + + + 4 + + + + \ No newline at end of file diff --git a/7-animation/2-css-animations/ease@2x.png b/7-animation/2-css-animations/ease@2x.png deleted file mode 100644 index a77eb103..00000000 Binary files a/7-animation/2-css-animations/ease@2x.png and /dev/null differ diff --git a/7-animation/2-css-animations/train-curve.png b/7-animation/2-css-animations/train-curve.png deleted file mode 100644 index 97b72294..00000000 Binary files a/7-animation/2-css-animations/train-curve.png and /dev/null differ diff --git a/7-animation/2-css-animations/train-curve.svg b/7-animation/2-css-animations/train-curve.svg new file mode 100644 index 00000000..c613cbaa --- /dev/null +++ b/7-animation/2-css-animations/train-curve.svg @@ -0,0 +1,29 @@ + + + + train-curve.svg + Created with sketchtool. + + + + + + + 1 + + + + 2 + + + + + 4 + + + + 3 + + + + \ No newline at end of file diff --git a/7-animation/2-css-animations/train-curve@2x.png b/7-animation/2-css-animations/train-curve@2x.png deleted file mode 100644 index 40e8947f..00000000 Binary files a/7-animation/2-css-animations/train-curve@2x.png and /dev/null differ diff --git a/7-animation/3-js-animation/article.md b/7-animation/3-js-animation/article.md index d3e12fca..00495434 100644 --- a/7-animation/3-js-animation/article.md +++ b/7-animation/3-js-animation/article.md @@ -160,7 +160,7 @@ Function `animate` accepts 3 parameters that essentially describes the animation ``` It's graph: - ![](linear.png) + ![](linear.svg) That's just like `transition-timing-function: linear`. There are more interesting variants shown below. @@ -221,7 +221,7 @@ function quad(timeFraction) { The graph: -![](quad.png) +![](quad.svg) See in action (click to activate): @@ -231,7 +231,7 @@ See in action (click to activate): Here's the graph for `progress` in the power `5`: -![](quint.png) +![](quint.svg) In action: @@ -249,7 +249,7 @@ function circ(timeFraction) { The graph: -![](circ.png) +![](circ.svg) [iframe height=40 src="circ" link] @@ -269,7 +269,7 @@ function back(x, timeFraction) { **The graph for `x = 1.5`:** -![](back.png) +![](back.svg) For animation we use it with a specific value of `x`. Example for `x = 1.5`: @@ -306,7 +306,7 @@ function elastic(x, timeFraction) { ``` **The graph for `x=1.5`:** -![](elastic.png) +![](elastic.svg) In action for `x=1.5`: @@ -349,7 +349,7 @@ Then the bounce will be not in the beginning, but at the end of the animation. L Here we can see how the transform changes the behavior of the function: -![](bounce-inout.png) +![](bounce-inout.svg) If there's an animation effect in the beginning, like bouncing -- it will be shown at the end. @@ -395,7 +395,7 @@ The "easeInOut" transform joins two graphs into one: `easeIn` (regular) for the The effect is clearly seen if we compare the graphs of `easeIn`, `easeOut` and `easeInOut` of the `circ` timing function: -![](circ-ease.png) +![](circ-ease.svg) - Red is the regular variantof `circ` (`easeIn`). - Green -- `easeOut`. diff --git a/7-animation/3-js-animation/back.png b/7-animation/3-js-animation/back.png deleted file mode 100644 index 7a5d9a6f..00000000 Binary files a/7-animation/3-js-animation/back.png and /dev/null differ diff --git a/7-animation/3-js-animation/back.svg b/7-animation/3-js-animation/back.svg new file mode 100644 index 00000000..2fcdd0f8 --- /dev/null +++ b/7-animation/3-js-animation/back.svg @@ -0,0 +1,22 @@ + + + + back.svg + Created with sketchtool. + + + + + + + 0 + + + 1 + + + 1 + + + + \ No newline at end of file diff --git a/7-animation/3-js-animation/back@2x.png b/7-animation/3-js-animation/back@2x.png deleted file mode 100644 index dc90e1fc..00000000 Binary files a/7-animation/3-js-animation/back@2x.png and /dev/null differ diff --git a/7-animation/3-js-animation/bezier-linear.png b/7-animation/3-js-animation/bezier-linear.png deleted file mode 100644 index 0b1e53bb..00000000 Binary files a/7-animation/3-js-animation/bezier-linear.png and /dev/null differ diff --git a/7-animation/3-js-animation/bezier-linear.svg b/7-animation/3-js-animation/bezier-linear.svg new file mode 100644 index 00000000..a2c90d70 --- /dev/null +++ b/7-animation/3-js-animation/bezier-linear.svg @@ -0,0 +1,23 @@ + + + + bezier-linear.svg + Created with sketchtool. + + + + + + + + 1 + + + + 2 + + + + + + \ No newline at end of file diff --git a/7-animation/3-js-animation/bezier-linear@2x.png b/7-animation/3-js-animation/bezier-linear@2x.png deleted file mode 100644 index fa796391..00000000 Binary files a/7-animation/3-js-animation/bezier-linear@2x.png and /dev/null differ diff --git a/7-animation/3-js-animation/bounce-inout.png b/7-animation/3-js-animation/bounce-inout.png deleted file mode 100644 index 5c867fd7..00000000 Binary files a/7-animation/3-js-animation/bounce-inout.png and /dev/null differ diff --git a/7-animation/3-js-animation/bounce-inout.svg b/7-animation/3-js-animation/bounce-inout.svg new file mode 100644 index 00000000..487f4e85 --- /dev/null +++ b/7-animation/3-js-animation/bounce-inout.svg @@ -0,0 +1,23 @@ + + + + bounce-inout.svg + Created with sketchtool. + + + + + + + 0 + + + 1 + + + 1 + + + + + \ No newline at end of file diff --git a/7-animation/3-js-animation/bounce-inout@2x.png b/7-animation/3-js-animation/bounce-inout@2x.png deleted file mode 100644 index 0527e459..00000000 Binary files a/7-animation/3-js-animation/bounce-inout@2x.png and /dev/null differ diff --git a/7-animation/3-js-animation/circ-ease.png b/7-animation/3-js-animation/circ-ease.png deleted file mode 100644 index 2d3c6772..00000000 Binary files a/7-animation/3-js-animation/circ-ease.png and /dev/null differ diff --git a/7-animation/3-js-animation/circ-ease.svg b/7-animation/3-js-animation/circ-ease.svg new file mode 100644 index 00000000..f3151226 --- /dev/null +++ b/7-animation/3-js-animation/circ-ease.svg @@ -0,0 +1,24 @@ + + + + circ-ease.svg + Created with sketchtool. + + + + + + + + 0 + + + 1 + + + 1 + + + + + \ No newline at end of file diff --git a/7-animation/3-js-animation/circ-ease@2x.png b/7-animation/3-js-animation/circ-ease@2x.png deleted file mode 100644 index 5984fdb6..00000000 Binary files a/7-animation/3-js-animation/circ-ease@2x.png and /dev/null differ diff --git a/7-animation/3-js-animation/circ.png b/7-animation/3-js-animation/circ.png deleted file mode 100644 index 51663c43..00000000 Binary files a/7-animation/3-js-animation/circ.png and /dev/null differ diff --git a/7-animation/3-js-animation/circ.svg b/7-animation/3-js-animation/circ.svg new file mode 100644 index 00000000..20c4a173 --- /dev/null +++ b/7-animation/3-js-animation/circ.svg @@ -0,0 +1,22 @@ + + + + circ.svg + Created with sketchtool. + + + + + + + 0 + + + 1 + + + 1 + + + + \ No newline at end of file diff --git a/7-animation/3-js-animation/circ@2x.png b/7-animation/3-js-animation/circ@2x.png deleted file mode 100644 index 55fdbf37..00000000 Binary files a/7-animation/3-js-animation/circ@2x.png and /dev/null differ diff --git a/7-animation/3-js-animation/elastic.png b/7-animation/3-js-animation/elastic.png deleted file mode 100644 index db9c112a..00000000 Binary files a/7-animation/3-js-animation/elastic.png and /dev/null differ diff --git a/7-animation/3-js-animation/elastic.svg b/7-animation/3-js-animation/elastic.svg new file mode 100644 index 00000000..8f5234da --- /dev/null +++ b/7-animation/3-js-animation/elastic.svg @@ -0,0 +1,22 @@ + + + + elastic.svg + Created with sketchtool. + + + + + + + 0 + + + 1 + + + 1 + + + + \ No newline at end of file diff --git a/7-animation/3-js-animation/elastic@2x.png b/7-animation/3-js-animation/elastic@2x.png deleted file mode 100644 index 46c50779..00000000 Binary files a/7-animation/3-js-animation/elastic@2x.png and /dev/null differ diff --git a/7-animation/3-js-animation/linear.png b/7-animation/3-js-animation/linear.png deleted file mode 100644 index e19711c3..00000000 Binary files a/7-animation/3-js-animation/linear.png and /dev/null differ diff --git a/7-animation/3-js-animation/linear.svg b/7-animation/3-js-animation/linear.svg new file mode 100644 index 00000000..7d371bc6 --- /dev/null +++ b/7-animation/3-js-animation/linear.svg @@ -0,0 +1,22 @@ + + + + linear.svg + Created with sketchtool. + + + + + + + 0 + + + 1 + + + 1 + + + + \ No newline at end of file diff --git a/7-animation/3-js-animation/linear@2x.png b/7-animation/3-js-animation/linear@2x.png deleted file mode 100644 index 652dd175..00000000 Binary files a/7-animation/3-js-animation/linear@2x.png and /dev/null differ diff --git a/7-animation/3-js-animation/quad.png b/7-animation/3-js-animation/quad.png deleted file mode 100644 index c757cb0e..00000000 Binary files a/7-animation/3-js-animation/quad.png and /dev/null differ diff --git a/7-animation/3-js-animation/quad.svg b/7-animation/3-js-animation/quad.svg new file mode 100644 index 00000000..8bf1d218 --- /dev/null +++ b/7-animation/3-js-animation/quad.svg @@ -0,0 +1,22 @@ + + + + quad.svg + Created with sketchtool. + + + + + + + 0 + + + 1 + + + 1 + + + + \ No newline at end of file diff --git a/7-animation/3-js-animation/quad@2x.png b/7-animation/3-js-animation/quad@2x.png deleted file mode 100644 index b170e320..00000000 Binary files a/7-animation/3-js-animation/quad@2x.png and /dev/null differ diff --git a/7-animation/3-js-animation/quint.png b/7-animation/3-js-animation/quint.png deleted file mode 100644 index a71b91ba..00000000 Binary files a/7-animation/3-js-animation/quint.png and /dev/null differ diff --git a/7-animation/3-js-animation/quint.svg b/7-animation/3-js-animation/quint.svg new file mode 100644 index 00000000..dd762029 --- /dev/null +++ b/7-animation/3-js-animation/quint.svg @@ -0,0 +1,22 @@ + + + + quint.svg + Created with sketchtool. + + + + + + + 0 + + + 1 + + + 1 + + + + \ No newline at end of file diff --git a/7-animation/3-js-animation/quint@2x.png b/7-animation/3-js-animation/quint@2x.png deleted file mode 100644 index 0e6a305b..00000000 Binary files a/7-animation/3-js-animation/quint@2x.png and /dev/null differ diff --git a/8-web-components/1-webcomponents-intro/article.md b/8-web-components/1-webcomponents-intro/article.md index a69cc3fc..f9427462 100644 --- a/8-web-components/1-webcomponents-intro/article.md +++ b/8-web-components/1-webcomponents-intro/article.md @@ -44,7 +44,7 @@ Let's take a look at a website, for example Twitter. It naturally splits into components: -![](web-components-twitter.png) +![](web-components-twitter.svg) 1. Top navigation. 2. User info. diff --git a/8-web-components/1-webcomponents-intro/web-components-twitter.png b/8-web-components/1-webcomponents-intro/web-components-twitter.png deleted file mode 100644 index 9d59650c..00000000 Binary files a/8-web-components/1-webcomponents-intro/web-components-twitter.png and /dev/null differ diff --git a/8-web-components/1-webcomponents-intro/web-components-twitter.svg b/8-web-components/1-webcomponents-intro/web-components-twitter.svg new file mode 100644 index 00000000..ba16dbcd --- /dev/null +++ b/8-web-components/1-webcomponents-intro/web-components-twitter.svg @@ -0,0 +1,46 @@ + + + + web-components-twitter.svg + Created with sketchtool. + + + + + + + + + + + + + 1 + + + + 2 + + + + 4 + + + + 3 + + + + 5 + + + + 6 + + + + 7 + + + + \ No newline at end of file diff --git a/8-web-components/1-webcomponents-intro/web-components-twitter@2x.png b/8-web-components/1-webcomponents-intro/web-components-twitter@2x.png deleted file mode 100644 index 5abd4a2d..00000000 Binary files a/8-web-components/1-webcomponents-intro/web-components-twitter@2x.png and /dev/null differ diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md index 2c60bf06..78f23fbb 100644 --- a/8-web-components/5-slots-composition/article.md +++ b/8-web-components/5-slots-composition/article.md @@ -80,7 +80,7 @@ We created the shadow DOM, so here it is, under `#shadow-root`. Now the element For rendering purposes, for each `` in shadow DOM, the browser looks for `slot="..."` with the same name in the light DOM. These elements are rendered inside the slots: -![](shadow-dom-user-card.png) +![](shadow-dom-user-card.svg) The result is called "flattened" DOM: diff --git a/8-web-components/5-slots-composition/shadow-dom-user-card.png b/8-web-components/5-slots-composition/shadow-dom-user-card.png deleted file mode 100644 index 8b9983b3..00000000 Binary files a/8-web-components/5-slots-composition/shadow-dom-user-card.png and /dev/null differ diff --git a/8-web-components/5-slots-composition/shadow-dom-user-card.svg b/8-web-components/5-slots-composition/shadow-dom-user-card.svg new file mode 100644 index 00000000..90cbf5bc --- /dev/null +++ b/8-web-components/5-slots-composition/shadow-dom-user-card.svg @@ -0,0 +1,75 @@ + + + + shadow-dom-user-card.svg + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/8-web-components/5-slots-composition/shadow-dom-user-card@2x.png b/8-web-components/5-slots-composition/shadow-dom-user-card@2x.png deleted file mode 100644 index 83e12d44..00000000 Binary files a/8-web-components/5-slots-composition/shadow-dom-user-card@2x.png and /dev/null differ diff --git a/9-regular-expressions/03-regexp-character-classes/article.md b/9-regular-expressions/03-regexp-character-classes/article.md index 2f415afd..91162216 100644 --- a/9-regular-expressions/03-regexp-character-classes/article.md +++ b/9-regular-expressions/03-regexp-character-classes/article.md @@ -66,7 +66,7 @@ alert( "I love HTML5!".match(/\s\w\w\w\w\d/) ); // ' HTML5' The match (each character class corresponds to one result character): -![](love-html5-classes.png) +![](love-html5-classes.svg) ## Word boundary: \b @@ -95,7 +95,7 @@ When the pattern contains `pattern:\b`, it tests that the position in string is For instance, in the string `subject:Hello, Java!` the following positions match `\b`: -![](hello-java-boundaries.png) +![](hello-java-boundaries.svg) So it matches `pattern:\bHello\b`, because: diff --git a/9-regular-expressions/03-regexp-character-classes/hello-java-boundaries.png b/9-regular-expressions/03-regexp-character-classes/hello-java-boundaries.png deleted file mode 100644 index 46fc686b..00000000 Binary files a/9-regular-expressions/03-regexp-character-classes/hello-java-boundaries.png and /dev/null differ 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 new file mode 100644 index 00000000..65714ef7 --- /dev/null +++ b/9-regular-expressions/03-regexp-character-classes/hello-java-boundaries.svg @@ -0,0 +1,18 @@ + + + + hello-java-boundaries.svg + Created with sketchtool. + + + + Hello, Java + ! + + + + + + + + \ No newline at end of file diff --git a/9-regular-expressions/03-regexp-character-classes/hello-java-boundaries@2x.png b/9-regular-expressions/03-regexp-character-classes/hello-java-boundaries@2x.png deleted file mode 100644 index 9beafe70..00000000 Binary files a/9-regular-expressions/03-regexp-character-classes/hello-java-boundaries@2x.png and /dev/null differ diff --git a/9-regular-expressions/03-regexp-character-classes/love-html5-classes.png b/9-regular-expressions/03-regexp-character-classes/love-html5-classes.png deleted file mode 100644 index 8f9daefd..00000000 Binary files a/9-regular-expressions/03-regexp-character-classes/love-html5-classes.png and /dev/null differ 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 new file mode 100644 index 00000000..4b9f4d29 --- /dev/null +++ b/9-regular-expressions/03-regexp-character-classes/love-html5-classes.svg @@ -0,0 +1,18 @@ + + + + love-html5-classes.svg + Created with sketchtool. + + + + I love HTML + 5 + + + \s \w \w \w \w \ + d + + + + \ No newline at end of file diff --git a/9-regular-expressions/03-regexp-character-classes/love-html5-classes@2x.png b/9-regular-expressions/03-regexp-character-classes/love-html5-classes@2x.png deleted file mode 100644 index 438c6bc2..00000000 Binary files a/9-regular-expressions/03-regexp-character-classes/love-html5-classes@2x.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/article.md b/9-regular-expressions/08-regexp-greedy-and-lazy/article.md index 1147f0ec..5670e57b 100644 --- a/9-regular-expressions/08-regexp-greedy-and-lazy/article.md +++ b/9-regular-expressions/08-regexp-greedy-and-lazy/article.md @@ -46,19 +46,19 @@ These common words do not make it obvious why the regexp fails, so let's elabora Then it advances: goes to the next positions in the source string and tries to find the first character of the pattern there, and finally finds the quote at the 3rd position: - ![](witch_greedy1.png) + ![](witch_greedy1.svg) 2. The quote is detected, and then the engine tries to find a match for the rest of the pattern. It tries to see if the rest of the subject string conforms to `pattern:.+"`. In our case the next pattern character is `pattern:.` (a dot). It denotes "any character except a newline", so the next string letter `match:'w'` fits: - ![](witch_greedy2.png) + ![](witch_greedy2.svg) 3. Then the dot repeats because of the quantifier `pattern:.+`. The regular expression engine builds the match by taking characters one by one while it is possible. ...When does it become impossible? All characters match the dot, so it only stops when it reaches the end of the string: - ![](witch_greedy3.png) + ![](witch_greedy3.svg) 4. Now the engine finished repeating for `pattern:.+` and tries to find the next character of the pattern. It's the quote `pattern:"`. But there's a problem: the string has finished, there are no more characters! @@ -66,7 +66,7 @@ These common words do not make it obvious why the regexp fails, so let's elabora In other words, it shortens the match for the quantifier by one character: - ![](witch_greedy4.png) + ![](witch_greedy4.svg) Now it assumes that `pattern:.+` ends one character before the end and tries to match the rest of the pattern from that position. @@ -74,13 +74,13 @@ These common words do not make it obvious why the regexp fails, so let's elabora 5. ...So the engine decreases the number of repetitions of `pattern:.+` by one more character: - ![](witch_greedy5.png) + ![](witch_greedy5.svg) The quote `pattern:'"'` does not match `subject:'n'`. 6. The engine keep backtracking: it decreases the count of repetition for `pattern:'.'` until the rest of the pattern (in our case `pattern:'"'`) matches: - ![](witch_greedy6.png) + ![](witch_greedy6.svg) 7. The match is complete. @@ -116,29 +116,29 @@ To clearly understand the change, let's trace the search step by step. 1. The first step is the same: it finds the pattern start `pattern:'"'` at the 3rd position: - ![](witch_greedy1.png) + ![](witch_greedy1.svg) 2. The next step is also similar: the engine finds a match for the dot `pattern:'.'`: - ![](witch_greedy2.png) + ![](witch_greedy2.svg) 3. And now the search goes differently. Because we have a lazy mode for `pattern:+?`, the engine doesn't try to match a dot one more time, but stops and tries to match the rest of the pattern `pattern:'"'` right now: - ![](witch_lazy3.png) + ![](witch_lazy3.svg) If there were a quote there, then the search would end, but there's `'i'`, so there's no match. 4. Then the regular expression engine increases the number of repetitions for the dot and tries one more time: - ![](witch_lazy4.png) + ![](witch_lazy4.svg) Failure again. Then the number of repetitions is increased again and again... 5. ...Till the match for the rest of the pattern is found: - ![](witch_lazy5.png) + ![](witch_lazy5.svg) 6. The next search starts from the end of the current match and yield one more result: - ![](witch_lazy6.png) + ![](witch_lazy6.svg) In this example we saw how the lazy mode works for `pattern:+?`. Quantifiers `pattern:+?` and `pattern:??` work the similar way -- the regexp engine increases the number of repetitions only if the rest of the pattern can't match on the given position. diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy1.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy1.png deleted file mode 100644 index d2ed3d55..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy1.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy1.svg b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy1.svg new file mode 100644 index 00000000..65e490e9 --- /dev/null +++ b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy1.svg @@ -0,0 +1,16 @@ + + + + witch_greedy1.svg + Created with sketchtool. + + + + a "witch" and her "broom" is one + + + + + + + \ No newline at end of file diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy1@2x.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy1@2x.png deleted file mode 100644 index e1e6076d..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy1@2x.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy2.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy2.png deleted file mode 100644 index 175636ce..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy2.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy2.svg b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy2.svg new file mode 100644 index 00000000..1ee35158 --- /dev/null +++ b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy2.svg @@ -0,0 +1,16 @@ + + + + witch_greedy2.svg + Created with sketchtool. + + + + a "witch" and her "broom" is one + + + + + + + \ No newline at end of file diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy2@2x.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy2@2x.png deleted file mode 100644 index e3c3d759..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy2@2x.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy3.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy3.png deleted file mode 100644 index d879244a..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy3.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy3.svg b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy3.svg new file mode 100644 index 00000000..e60ed161 --- /dev/null +++ b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy3.svg @@ -0,0 +1,16 @@ + + + + witch_greedy3.svg + Created with sketchtool. + + + + a "witch" and her "broom" is one + + + + + + + \ No newline at end of file diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy3@2x.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy3@2x.png deleted file mode 100644 index 3594f91b..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy3@2x.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy4.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy4.png deleted file mode 100644 index 2a571b0d..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy4.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy4.svg b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy4.svg new file mode 100644 index 00000000..630a6223 --- /dev/null +++ b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy4.svg @@ -0,0 +1,19 @@ + + + + witch_greedy4.svg + Created with sketchtool. + + + + a "witch" and her "broom" is one + + + + + + + + + + \ No newline at end of file diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy4@2x.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy4@2x.png deleted file mode 100644 index 9fd709e8..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy4@2x.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy5.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy5.png deleted file mode 100644 index ae1528aa..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy5.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy5.svg b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy5.svg new file mode 100644 index 00000000..fa8db584 --- /dev/null +++ b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy5.svg @@ -0,0 +1,19 @@ + + + + witch_greedy5.svg + Created with sketchtool. + + + + a "witch" and her "broom" is one + + + + + + + + + + \ No newline at end of file diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy5@2x.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy5@2x.png deleted file mode 100644 index f17edceb..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy5@2x.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy6.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy6.png deleted file mode 100644 index 5fd767c6..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy6.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy6.svg b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy6.svg new file mode 100644 index 00000000..c0165e88 --- /dev/null +++ b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy6.svg @@ -0,0 +1,17 @@ + + + + witch_greedy6.svg + Created with sketchtool. + + + + a "witch" and her "broom" is one + + + + + + + + \ No newline at end of file diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy6@2x.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy6@2x.png deleted file mode 100644 index 10bdfb8c..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_greedy6@2x.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy3.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy3.png deleted file mode 100644 index af5416a7..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy3.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy3.svg b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy3.svg new file mode 100644 index 00000000..61506bb5 --- /dev/null +++ b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy3.svg @@ -0,0 +1,18 @@ + + + + witch_lazy3.svg + Created with sketchtool. + + + + a "witch" and her "broom" is one + + + + + + + + + \ No newline at end of file diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy3@2x.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy3@2x.png deleted file mode 100644 index 27e27259..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy3@2x.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy4.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy4.png deleted file mode 100644 index c6dbdc92..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy4.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy4.svg b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy4.svg new file mode 100644 index 00000000..fecc1a5a --- /dev/null +++ b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy4.svg @@ -0,0 +1,18 @@ + + + + witch_lazy4.svg + Created with sketchtool. + + + + a "witch" and her "broom" is one + + + + + + + + + \ No newline at end of file diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy4@2x.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy4@2x.png deleted file mode 100644 index 4fdbd99a..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy4@2x.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy5.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy5.png deleted file mode 100644 index 04f91fbb..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy5.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy5.svg b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy5.svg new file mode 100644 index 00000000..b75a9d7b --- /dev/null +++ b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy5.svg @@ -0,0 +1,16 @@ + + + + witch_lazy5.svg + Created with sketchtool. + + + + a "witch" and her "broom" is one + + + + + + + \ No newline at end of file diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy5@2x.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy5@2x.png deleted file mode 100644 index 7a286431..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy5@2x.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy6.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy6.png deleted file mode 100644 index d2e41d45..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy6.png and /dev/null differ diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy6.svg b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy6.svg new file mode 100644 index 00000000..867e30c8 --- /dev/null +++ b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy6.svg @@ -0,0 +1,18 @@ + + + + witch_lazy6.svg + Created with sketchtool. + + + + a "witch" and her "broom" is one + + + + + + + + + \ No newline at end of file diff --git a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy6@2x.png b/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy6@2x.png deleted file mode 100644 index 49dc2cd8..00000000 Binary files a/9-regular-expressions/08-regexp-greedy-and-lazy/witch_lazy6@2x.png and /dev/null differ diff --git a/9-regular-expressions/09-regexp-groups/article.md b/9-regular-expressions/09-regexp-groups/article.md index a0d9bd12..141d0300 100644 --- a/9-regular-expressions/09-regexp-groups/article.md +++ b/9-regular-expressions/09-regexp-groups/article.md @@ -103,7 +103,7 @@ alert(result); // , span class="my", span, class="my" Here's how groups look: -![](regexp-nested-groups.png) +![](regexp-nested-groups.svg) At the zero index of the `result` is always the full match. diff --git a/9-regular-expressions/09-regexp-groups/regexp-nested-groups.png b/9-regular-expressions/09-regexp-groups/regexp-nested-groups.png deleted file mode 100644 index 4949237a..00000000 Binary files a/9-regular-expressions/09-regexp-groups/regexp-nested-groups.png and /dev/null differ diff --git a/9-regular-expressions/09-regexp-groups/regexp-nested-groups.svg b/9-regular-expressions/09-regexp-groups/regexp-nested-groups.svg new file mode 100644 index 00000000..75ced6ff --- /dev/null +++ b/9-regular-expressions/09-regexp-groups/regexp-nested-groups.svg @@ -0,0 +1,48 @@ + + + + regexp-nested-groups.svg + Created with sketchtool. + + + + < + (( + [a-z]+ + ) + \s* + ( + [^>]* + )) + > + + + + + + + + + 1 + + + span class="my" + + + 2 + + + span + + + + + + 3 + + + class="my" + + + + \ No newline at end of file diff --git a/9-regular-expressions/09-regexp-groups/regexp-nested-groups@2x.png b/9-regular-expressions/09-regexp-groups/regexp-nested-groups@2x.png deleted file mode 100644 index 6dcdfe40..00000000 Binary files a/9-regular-expressions/09-regexp-groups/regexp-nested-groups@2x.png and /dev/null differ diff --git a/figures.sketch b/figures.sketch index 23e539a6..f68d360a 100644 Binary files a/figures.sketch and b/figures.sketch differ