`:
-
-```html
-
-```
-
-The `#digit` div has a fixed width and a border, so it looks like a red window.
-
-We'll make a timer: the digits will appear one by one, in a discrete way.
-
-To achieve that, we'll hide the `#stripe` outside of `#digit` using `overflow: hidden`, and then shift the `#stripe` to the left step-by-step.
+We'll make the digits appear in a discrete way by making the part of the list outside of the red "window" invisible and shifting the list to the left with each step.
There will be 9 steps, a step-move for each digit:
@@ -297,60 +277,58 @@ There will be 9 steps, a step-move for each digit:
}
```
-The first argument of `steps(9, start)` is the number of steps. The transform will be split into 9 parts (10% each). The time interval is automatically divided into 9 parts as well, so `transition: 9s` gives us 9 seconds for the whole animation – 1 second per digit.
-
-The second argument is one of two words: `start` or `end`.
-
-The `start` means that in the beginning of animation we need to make the first step immediately.
-
In action:
[codetabs src="step"]
-A click on the digit changes it to `1` (the first step) immediately, and then changes in the beginning of the next second.
+The first argument of `steps(9, start)` is the number of steps. The transform will be split into 9 parts (10% each). The time interval is automatically divided into 9 parts as well, so `transition: 9s` gives us 9 seconds for the whole animation – 1 second per digit.
+
+The second argument is one of two words: `start` or `end`.
+
+The `start` means that in the beginning of animation we need to do make the first step immediately.
+
+We can observe that during the animation: when we click on the digit it changes to `1` (the first step) immediately, and then changes in the beginning of the next second.
The process is progressing like this:
- `0s` -- `-10%` (first change in the beginning of the 1st second, immediately)
- `1s` -- `-20%`
- ...
-- `8s` -- `-90%`
+- `8s` -- `-80%`
- (the last second shows the final value).
-Here, the first change was immediate because of `start` in the `steps`.
-
The alternative value `end` would mean that the change should be applied not in the beginning, but at the end of each second.
-So the process for `steps(9, end)` would go like this:
+So the process would go like this:
-- `0s` -- `0` (during the first second nothing changes)
+- `0s` -- `0`
- `1s` -- `-10%` (first change at the end of the 1st second)
- `2s` -- `-20%`
- ...
- `9s` -- `-90%`
-Here's `steps(9, end)` in action (note the pause before the first digit change):
+Here's `step(9, end)` in action (note the pause between the first digit change):
[codetabs src="step-end"]
-There are also some pre-defined shorthands for `steps(...)`:
+There are also shorthand values:
- `step-start` -- is the same as `steps(1, start)`. That is, the animation starts immediately and takes 1 step. So it starts and finishes immediately, as if there were no animation.
- `step-end` -- the same as `steps(1, end)`: make the animation in a single step at the end of `transition-duration`.
-These values are rarely used, as they represent not a real animation, but rather a single-step change. We mention them here for completeness.
+These values are rarely used, because that's not really animation, but rather a single-step change.
-## Event: "transitionend"
+## Event transitionend
-When the CSS animation finishes, the `transitionend` event triggers.
+When the CSS animation finishes the `transitionend` event triggers.
It is widely used to do an action after the animation is done. Also we can join animations.
-For instance, the ship in the example below starts to sail there and back when clicked, each time farther and farther to the right:
+For instance, the ship in the example below starts to swim there and back on click, each time farther and farther to the right:
[iframe src="boat" height=300 edit link]
-The animation is initiated by the function `go` that re-runs each time the transition finishes, and flips the direction:
+The animation is initiated by the function `go` that re-runs each time when the transition finishes and flips the direction:
```js
boat.onclick = function() {
@@ -359,11 +337,11 @@ boat.onclick = function() {
function go() {
if (times % 2) {
- // sail to the right
+ // swim to the right
boat.classList.remove('back');
boat.style.marginLeft = 100 * times + 200 + 'px';
} else {
- // sail to the left
+ // swim to the left
boat.classList.add('back');
boat.style.marginLeft = 100 * times - 200 + 'px';
}
@@ -379,7 +357,7 @@ boat.onclick = function() {
};
```
-The event object for `transitionend` has a few specific properties:
+The event object for `transitionend` has few specific properties:
`event.propertyName`
: The property that has finished animating. Can be good if we animate multiple properties simultaneously.
@@ -391,7 +369,7 @@ The event object for `transitionend` has a few specific properties:
We can join multiple simple animations together using the `@keyframes` CSS rule.
-It specifies the "name" of the animation and rules - what, when and where to animate. Then using the `animation` property, we can attach the animation to the element and specify additional parameters for it.
+It specifies the "name" of the animation and rules: what, when and where to animate. Then using the `animation` property we attach the animation to the element and specify additional parameters for it.
Here's an example with explanations:
@@ -427,92 +405,11 @@ Here's an example with explanations:
There are many articles about `@keyframes` and a [detailed specification](https://drafts.csswg.org/css-animations/).
-You probably won't need `@keyframes` often, unless everything is in constant motion on your sites.
-
-## Performance
-
-Most CSS properties can be animated, because most of them are numeric values. For instance, `width`, `color`, `font-size` are all numbers. When you animate them, the browser gradually changes these numbers frame by frame, creating a smooth effect.
-
-However, not all animations will look as smooth as you'd like, because different CSS properties cost differently to change.
-
-In more technical details, when there's a style change, the browser goes through 3 steps to render the new look:
-
-1. **Layout**: re-compute the geometry and position of each element, then
-2. **Paint**: re-compute how everything should look like at their places, including background, colors,
-3. **Composite**: render the final results into pixels on screen, apply CSS transforms if they exist.
-
-During a CSS animation, this process repeats every frame. However, CSS properties that never affect geometry or position, such as `color`, may skip the Layout step. If a `color` changes, the browser doesn't calculate any new geometry, it goes to Paint -> Composite. And there are few properties that directly go to Composite. You can find a longer list of CSS properties and which stages they trigger at
.
-
-The calculations may take time, especially on pages with many elements and a complex layout. And the delays are actually visible on most devices, leading to "jittery", less fluid animations.
-
-Animations of properties that skip the Layout step are faster. It's even better if Paint is skipped too.
-
-The `transform` property is a great choice, because:
-- CSS transforms affect the target element box as a whole (rotate, flip, stretch, shift it).
-- CSS transforms never affect neighbour elements.
-
-...So browsers apply `transform` "on top" of existing Layout and Paint calculations, in the Composite stage.
-
-In other words, the browser calculates the Layout (sizes, positions), paints it with colors, backgrounds, etc at the Paint stage, and then applies `transform` to element boxes that need it.
-
-Changes (animations) of the `transform` property never trigger Layout and Paint steps. More than that, the browser leverages the graphics accelerator (a special chip on the CPU or graphics card) for CSS transforms, thus making them very efficient.
-
-Luckily, the `transform` property is very powerful. By using `transform` on an element, you could rotate and flip it, stretch and shrink it, move it around, and [much more](https://developer.mozilla.org/docs/Web/CSS/transform#syntax). So instead of `left/margin-left` properties we can use `transform: translateX(…)`, use `transform: scale` for increasing element size, etc.
-
-The `opacity` property also never triggers Layout (also skips Paint in Mozilla Gecko). We can use it for show/hide or fade-in/fade-out effects.
-
-Paring `transform` with `opacity` can usually solve most of our needs, providing fluid, good-looking animations.
-
-For example, here clicking on the `#boat` element adds the class with `transform: translateX(300)` and `opacity: 0`, thus making it move `300px` to the right and disappear:
-
-```html run height=260 autorun no-beautify
-click me to start / stop
-
-```
+Probably you won't need `@keyframes` often, unless everything is in the constant move on your sites.
## Summary
-CSS animations allow smoothly (or step-by-step) animated changes of one or multiple CSS properties.
+CSS animations allow to smoothly (or not) animate changes of one or multiple CSS properties.
They are good for most animation tasks. We're also able to use JavaScript for animations, the next chapter is devoted to that.
@@ -522,11 +419,9 @@ Limitations of CSS animations compared to JavaScript animations:
+ Simple things done simply.
+ Fast and lightweight for CPU.
- JavaScript animations are flexible. They can implement any animation logic, like an "explosion" of an element.
-- Not just property changes. We can create new elements in JavaScript as part of the animation.
+- Not just property changes. We can create new elements in JavaScript for purposes of animation.
```
-In early examples in this chapter, we animate `font-size`, `left`, `width`, `height`, etc. In real life projects, we should use `transform: scale()` and `transform: translate()` for better performance.
-
-The majority of animations can be implemented using CSS as described in this chapter. And the `transitionend` event allows JavaScript to be run after the animation, so it integrates fine with the code.
+The majority of animations can be implemented using CSS as described in this chapter. And `transitionend` event allows to run JavaScript after the animation, so it integrates fine with the code.
But in the next chapter we'll do some JavaScript animations to cover more complex cases.
diff --git a/7-animation/2-css-animations/bezier-linear.svg b/7-animation/2-css-animations/bezier-linear.svg
index 0c2e970f..34949d61 100644
--- a/7-animation/2-css-animations/bezier-linear.svg
+++ b/7-animation/2-css-animations/bezier-linear.svg
@@ -1 +1 @@
-1 2 1 2 (1,1) (0,0) (0,1) (1,0) 1 2 4 3 (1,1) (0,0) (0,1) (1,0) 1 2 4 3 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 4 3 1 2 4 3 Red is the regular variant of `circ` (`easeIn`).
+- Red is the regular variantof `circ` (`easeIn`).
- Green -- `easeOut`.
- Blue -- `easeInOut`.
@@ -405,7 +405,7 @@ As we can see, the graph of the first half of the animation is the scaled down `
## More interesting "draw"
-Instead of moving the element we can do something else. All we need is to write the proper `draw`.
+Instead of moving the element we can do something else. All we need is to write the write the proper `draw`.
Here's the animated "bouncing" text typing:
diff --git a/7-animation/3-js-animation/back.svg b/7-animation/3-js-animation/back.svg
index fcef09ad..836a72cc 100644
--- a/7-animation/3-js-animation/back.svg
+++ b/7-animation/3-js-animation/back.svg
@@ -1 +1 @@
-0 1 1 0 1 1 1 2 1 2 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 ` element is added to page (or when HTML parser detects it), and it uses the built-in [Intl.DateTimeFormat](mdn:/JavaScript/Reference/Global_Objects/DateTimeFormat) data formatter, well-supported across the browsers, to show a nicely formatted time.
+1. The class has only one method `connectedCallback()` -- the browser calls it when `` element is added to page (or when HTML parser detects it), and it uses the built-in [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) data formatter, well-supported across the browsers, to show a nicely formatted time.
2. We need to register our new element by `customElements.define(tag, class)`.
3. And then we can use it everywhere.
@@ -149,7 +149,7 @@ The `connectedCallback` triggers when the element is added to the document. Not
In the current implementation of ``, after the element is rendered, further attribute changes don't have any effect. That's strange for an HTML element. Usually, when we change an attribute, like `a.href`, we expect the change to be immediately visible. So let's fix this.
-We can observe attributes by providing their list in `observedAttributes()` static getter. For such attributes, `attributeChangedCallback` is called when they are modified. It doesn't trigger for other, unlisted attributes (that's for performance reasons).
+We can observe attributes by providing their list in `observedAttributes()` static getter. For such attributes, `attributeChangedCallback` is called when they are modified. It doesn't trigger for an attribute for performance reasons.
Here's a new ``, that auto-updates when attributes change:
@@ -320,7 +320,7 @@ For example, buttons are instances of `HTMLButtonElement`, let's build upon it.
class HelloButton extends HTMLButtonElement { /* custom element methods */ }
```
-2. Provide the third argument to `customElements.define`, that specifies the tag:
+2. Provide an third argument to `customElements.define`, that specifies the tag:
```js
customElements.define('hello-button', HelloButton, *!*{extends: 'button'}*/!*);
```
@@ -365,7 +365,7 @@ Our new button extends the built-in one. So it keeps the same styles and standar
## References
- HTML Living Standard: .
-- Compatiblity: .
+- Compatiblity: .
## Summary
@@ -397,4 +397,4 @@ Custom elements can be of two types:
/* */
```
-Custom elements are well-supported among browsers. There's a polyfill .
+Custom elements are well-supported among browsers. Edge is a bit behind, but there's a polyfill .
diff --git a/8-web-components/3-shadow-dom/article.md b/8-web-components/3-shadow-dom/article.md
index 92614f77..fafc4754 100644
--- a/8-web-components/3-shadow-dom/article.md
+++ b/8-web-components/3-shadow-dom/article.md
@@ -37,7 +37,7 @@ input::-webkit-slider-runnable-track {
Once again, `pseudo` is a non-standard attribute. Chronologically, browsers first started to experiment with internal DOM structures to implement controls, and then, after time, shadow DOM was standardized to allow us, developers, to do the similar thing.
-Further on, we'll use the modern shadow DOM standard, covered by [DOM spec](https://dom.spec.whatwg.org/#shadow-trees) and other related specifications.
+Further on, we'll use the modern shadow DOM standard, covered by [DOM spec](https://dom.spec.whatwg.org/#shadow-trees) other related specifications.
## Shadow tree
diff --git a/8-web-components/4-template-element/article.md b/8-web-components/4-template-element/article.md
index 5499c4ed..d0fe12af 100644
--- a/8-web-components/4-template-element/article.md
+++ b/8-web-components/4-template-element/article.md
@@ -1,7 +1,7 @@
# Template element
-A built-in `` element serves as a storage for HTML markup templates. The browser ignores its contents, only checks for syntax validity, but we can access and use it in JavaScript, to create other elements.
+A built-in `` element serves as a storage for HTML markup templates. The browser ignores it contents, only checks for syntax validity, but we can access and use it in JavaScript, to create other elements.
In theory, we could create any invisible element somewhere in HTML for HTML markup storage purposes. What's special about ``?
diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index c41e26e0..78f23fbb 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -103,11 +103,11 @@ The result is called "flattened" DOM:
...But the flattened DOM exists only for rendering and event-handling purposes. It's kind of "virtual". That's how things are shown. But the nodes in the document are actually not moved around!
-That can be easily checked if we run `querySelectorAll`: nodes are still at their places.
+That can be easily checked if we run `querySelector`: nodes are still at their places.
```js
// light DOM nodes are still at the same place, under ``
-alert( document.querySelectorAll('user-card span').length ); // 2
+alert( document.querySelector('user-card span').length ); // 2
```
So, the flattened DOM is derived from shadow DOM by inserting slots. The browser renders it and uses for style inheritance, event propagation (more about that later). But JavaScript still sees the document "as is", before flattening.
@@ -130,7 +130,6 @@ For example, the second `` here is ignored (as it's not a top-level child
If there are multiple elements in light DOM with the same slot name, they are appended into the slot, one after another.
For example, this:
-
```html
John
@@ -228,11 +227,11 @@ The flattened DOM looks like this:
```
-````
When the browser does not know the width/height of an image (from tag attributes or CSS), then it assumes them to equal `0` until the image finishes loading.
-So the value of `ball.offsetWidth` will be `0` until the image loads. That leads to wrong coordinates in the code above.
-
-After the first load, the browser usually caches the image, and on reloads it will have the size immediately. But on the first load the value of `ball.offsetWidth` is `0`.
+After the first load browser usually caches the image, and on next loads it will have the size immediately. But on the first load the value of `ball.offsetWidth` is `0`. That leads to wrong coordinates.
We should fix that by adding `width/height` to `
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+