draft

Author: iliakan

2-ui/1-document/11-coordinates/document-window-coordinates-scroll.png

@@ -181,11 +181,11 @@ They exist for historical reasons, to get either a string or XML document. Nowad
 All states, as in [the specification](http://www.w3.org/TR/XMLHttpRequest/#states):
 
 ```js
-const unsigned short UNSENT = 0; // initial state
-const unsigned short OPENED = 1; // open called
-const unsigned short HEADERS_RECEIVED = 2; // response headers received
-const unsigned short LOADING = 3; // response is loading (a data packed is received)
-const unsigned short DONE = 4; // request complete
+UNSENT = 0; // initial state
+OPENED = 1; // open called
+HEADERS_RECEIVED = 2; // response headers received
+LOADING = 3; // response is loading (a data packed is received)
+DONE = 4; // request complete
 ```
 
 An `XMLHttpRequest` object travels them in the order `0` -> `1` -> `2` -> `3` -> ... -> `3` -> `4`. State `3` repeats every time a data packet is received over the network.

2-ui/1-document/11-coordinates/[email protected]

@@ -0,0 +1,76 @@
+# From the orbital height
+
+This section describes a set of modern standards for "web components".
+
+As of now, these standards are under development. Some features are well-supported and integrated into the modern HTML/DOM standard, while others are yet in draft stage. You can try examples in any browser, Google Chrome is probably the most up to date with these features. Guess, that's because Google fellows are behind many of the related specifications.
+
+The whole component idea is nothing new. It's used in many frameworks and elsewhere.
+
+## What's common between...
+
+Before we move to implementation details, take a look at this great achievement of humanity:
+
+![](satellite.jpg)
+
+That's the International Space Station (ISS).
+
+And this is how it's made inside (approximately):
+
+![](satellite-expanded.jpg)
+
+The International Space Station:
+- Consists of many components.
+- Each component, in its turn, has many smaller details inside.
+- The components are very complex, much more complicated than most websites.
+- Components are developed internationally, by teams from different countries, speaking different languages.
+
+...And this thing is flying, keeping humans alive in space!
+
+How such complex devices are created?
+
+Which principles we could borrow, to make our development same-level reliable and scalable? Or, at least, close to it.
+
+## Component architecture
+
+The well known rule for developing complex software is: don't make complex software.
+
+If something becomes complex -- split it into simpler parts and connect in the most obvious way.
+
+**A good architect is the one who can make the complex simple.**
+
+We can split a user interface into components -- visual entities, each of them has own place on the page, can "do" a well-described task, and is separate from the others.
+
+Let's take a look at a website, for example Twitter.
+
+It naturally splits into components:
+
+![](web-components-twitter.png)
+
+1. Top navigation.
+2. User info.
+3. Follow suggestions.
+4. Submit form.
+5. And also 6, 7 - messages.
+
+Components may have subcomponents, e.g. messages may be parts of a higher-level "message list" component. A clickable user picture itself may be a component, and so on.
+
+How do we decide, what is a component? That comes from intuition, experience and common sense. In the case above, the page has blocks, each of them plays its own role.
+
+So, what comprises a component?
+
+- A component has its own JavaScript class.
+- DOM structure, managed solely by its class, outside code doesn't access it ("encapsulation" principle).
+- CSS styles, applied to the component.
+- API: events, class methods etc, to interact with other components.
+
+"Web components" provide built-in browser capabilities for components:
+
+- [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 component.
+
+There exist many frameworks and development methodologies that aim to do the similar thing, each one with its own bells and whistles. Usually, special CSS classes and conventions are used to provide "component feel" -- CSS scoping and DOM encapsulation.
+
+Web components provide built-in browser capabilities for that, so we don't have to emulate them any more.
+
+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.

7-network/07-xmlhttprequest/article.md

@@ -0,0 +1,32 @@
+class LiveTimer extends HTMLElement {
+
+  render() {
+    this.innerHTML = `
+    <time-formatted hour="numeric" minute="numeric" second="numeric">
+    </time-formatted>
+    `;
+
+    this.timerElem = this.firstElementChild;
+  }
+
+  connectedCallback() { // (2)
+    if (!this.rendered) {
+      this.render();
+      this.rendered = true;
+    }
+    this.timer = setInterval(() => this.update(), 1000);
+  }
+
+  update() {
+    this.date = new Date();
+    this.timerElem.setAttribute('datetime', this.date);
+    this.dispatchEvent(new CustomEvent('tick', { detail: this.date }));
+  }
+
+  disconnectedCallback() {
+    clearInterval(this.timer); // important to let the element be garbage-collected
+  }
+
+}
+
+customElements.define("live-timer", LiveTimer);

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

@@ -0,0 +1,34 @@
+class TimeFormatted extends HTMLElement {
+
+  render() {
+    let date = new Date(this.getAttribute('datetime') || Date.now());
+
+    this.innerHTML = new Intl.DateTimeFormat("default", {
+      year: this.getAttribute('year') || undefined,
+      month: this.getAttribute('month') || undefined,
+      day: this.getAttribute('day') || undefined,
+      hour: this.getAttribute('hour') || undefined,
+      minute: this.getAttribute('minute') || undefined,
+      second: this.getAttribute('second') || undefined,
+      timeZoneName: this.getAttribute('time-zone-name') || undefined,
+    }).format(date);
+  }
+
+  connectedCallback() { // (2)
+    if (!this.rendered) {
+      this.render();
+      this.rendered = true;
+    }
+  }
+
+  static get observedAttributes() { // (3)
+    return ['datetime', 'year', 'month', 'day', 'hour', 'minute', 'second', 'time-zone-name'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) { // (4)
+    this.render();
+  }
+
+}
+
+customElements.define("time-formatted", TimeFormatted);