components

1-js/05-data-types/05-array-methods/8-sort-objects/solution.md

@@ -1,17 +1,18 @@
 ```js run no-beautify
-function sortByName(arr) {
+function sortByAge(arr) {
   arr.sort((a, b) => a.age > b.age ? 1 : -1);
 }
 
 let john = { name: "John", age: 25 };
 let pete = { name: "Pete", age: 30 };
 let mary = { name: "Mary", age: 28 };
 
-let arr = [ john, pete, mary ];
+let arr = [ pete, john, mary ];
 
-sortByName(arr);
+sortByAge(arr);
 
 // now sorted is: [john, mary, pete]
 alert(arr[0].name); // John
+alert(arr[1].name); // Mary
 alert(arr[2].name); // Pete
 ```

1-js/05-data-types/05-array-methods/8-sort-objects/task.md

@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Sort objects
+# Sort users by age
 
-Write the function `sortByName(users)` that gets an array of objects with the `age` property and sorts them by `age`.
+Write the function `sortByAge(users)` that gets an array of objects with the `age` property and sorts them by `age`.
 
 For instance:
 
@@ -13,11 +13,12 @@ let john = { name: "John", age: 25 };
 let pete = { name: "Pete", age: 30 };
 let mary = { name: "Mary", age: 28 };
 
-let arr = [ john, pete, mary ];
+let arr = [ pete, john, mary ];
 
-sortByName(arr);
+sortByAge(arr);
 
 // now: [john, mary, pete]
 alert(arr[0].name); // John
+alert(arr[1].name); // Mary
 alert(arr[2].name); // Pete
 ```

2-ui/1-document/07-modifying-document/article.md

@@ -136,7 +136,7 @@ Here's a brief list of methods to insert a node into a parent element (`parentEl
     </script>
     ```
     To insert `newLi` as the first element, we can do it like this:
-    
+
     ```js
     list.insertBefore(newLi, list.firstChild);
     ```
@@ -335,6 +335,74 @@ An example of copying the message:
 </script>
 ```
 
+
+## DocumentFragment [#document-fragment]
+
+`DocumentFragment` is a special DOM node that serves as a wrapper to pass around groups of nodes.
+
+We can append other nodes to it, but when we insert it somewhere, then it "disappears", leaving its content inserted instead.
+
+For example, `getListContent` below generates a fragment with `<li>` items, that are later inserted into `<ul>`:
+
+```html run
+<ul id="ul"></ul>
+
+<script>
+function getListContent() {
+  let fragment = new DocumentFragment();
+
+  for(let i=1; i<=3; i++) {
+    let li = document.createElement('li');
+    li.append(i);
+    fragment.append(li);
+  }
+
+  return fragment;
+}
+
+*!*
+ul.append(getListContent()); // (*)
+*/!*
+</script>
+```
+
+Please note, at the last line `(*)` we append `DocumentFragment`, but it "blends in", so the resulting structure will be:
+
+```html
+<ul>
+  <li>1</li>
+  <li>2</li>
+  <li>3</li>
+</ul>
+```
+
+`DocumentFragment` is rarely used explicitly. Why append to a special kind of node, if we can return an array of nodes instead? Rewritten example:
+
+```html run
+<ul id="ul"></ul>
+
+<script>
+function getListContent() {
+  let result = [];
+
+  for(let i=1; i<=3; i++) {
+    let li = document.createElement('li');
+    li.append(i);
+    result.push(li);
+  }
+
+  return result;
+}
+
+*!*
+ul.append(...getListContent()); // append + "..." operator = friends!
+*/!*
+</script>
+```
+
+We mention `DocumentFragment` mainly because there are some concepts on top of it, like [template](info:template-element) element, that we'll cover much later.
+
+
 ## Removal methods
 
 To remove nodes, there are the following methods:

5-network/index.md

@@ -0,0 +1,2 @@
+
+# Network requests

8-web-components/1-webcomponents-intro/article.md

@@ -70,5 +70,6 @@ There exist many frameworks and development methodologies to build them, each on
 - [Custom elements](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) -- to define custom HTML elements.
 - [Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees) -- to create an internal DOM for the component, hidden from the others.
 - [CSS Scoping](https://drafts.csswg.org/css-scoping/) -- to declare styles that only apply inside the Shadow DOM of the component.
+- [Event retargeting](https://dom.spec.whatwg.org/#retarget) and other minor stuff to make custom components better fit the development.
 
 In the next chapter we'll go into details of "Custom Elements" -- the fundamental and well-supported feature of web components, good on its own.

8-web-components/2-custom-elements/article.md

@@ -361,11 +361,39 @@ customElements.define('hello-button', HelloButton, {extends: 'button'});
 
 Our new button extends the built-in one. So it keeps the same styles and standard features like `disabled` attribute.
 
-## Итого
+## References
 
-Мы рассмотрели, как создавать свои DOM-элементы при помощи стандарта [Custom Elements](http://www.w3.org/TR/custom-elements/).
+- HTML Living Standard: <https://html.spec.whatwg.org/#custom-elements>.
+- Compatiblity: <https://caniuse.com/#feat=custom-elements>.
 
-POLYFILL
-Edge is a bit lagging behind, but there's a polyfill <https://github.com/webcomponents/webcomponentsjs> that covers
+## Summary
 
-Далее мы перейдём к изучению дополнительных возможностей по работе с DOM.
+Custom elements can be of two types:
+
+1. "Autonomous" -- new tags, extending `HTMLElement`.
+
+    Definition scheme:
+
+    ```js
+    class MyElement extends HTMLElement {
+      constructor() { super(); /* ... */ }
+      connectedCallback() { /* ... */ }
+      disconnectedCallback() { /* ... */  }
+      static get observedAttributes() { return [/* ... */]; }
+      attributeChangedCallback(name, oldValue, newValue) { /* ... */ }
+      adoptedCallback() { /* ... */ }
+     }
+    customElements.define('my-element', MyElement);
+    /* <my-element> */
+    ```
+
+2. "Customized built-in elements" -- extensions of existing elements.
+
+    Requires one more `.define` argument, and `is="..."` in HTML:
+    ```js
+    class MyButton extends HTMLButtonElement { /*...*/ }
+    customElements.define('my-button', MyElement, {extends: 'button'});
+    /* <button is="my-button"> */
+    ```
+
+Custom elements are well-supported among browsers. Edge is a bit behind, but there's a polyfill <https://github.com/webcomponents/webcomponentsjs>.