```
+<<<<<<< HEAD
攻撃の完全がデモがこちらです:
[codetabs src="clickjacking-visible" height=160]
@@ -74,6 +110,37 @@ iframe { /* 被害サイト からの iframe */
最も古い防御策は、フレーム内でページを開くことを禁止する JavaScript です(いわゆる "フレームバスティング(framebusting)")。
このようになります:
+=======
+The full demo of the attack:
+
+[codetabs src="clickjacking-visible" height=160]
+
+Here we have a half-transparent `
```
+<<<<<<< HEAD
この単純な防御を回避する方法は他にもあります。
## X-Frame-Options
@@ -141,11 +243,38 @@ window.onbeforeunload = function() {
````online
動作確認:
+=======
+There are other ways to work around that simple protection too.
+
+## X-Frame-Options
+
+The server-side header `X-Frame-Options` can permit or forbid displaying the page inside a frame.
+
+It must be sent exactly as HTTP-header: the browser will ignore it if found in HTML `` tag. So, `` won't do anything.
+
+The header may have 3 values:
+
+
+`DENY`
+: Never ever show the page inside a frame.
+
+`SAMEORIGIN`
+: Allow inside a frame if the parent document comes from the same origin.
+
+`ALLOW-FROM domain`
+: Allow inside a frame if the parent document is from the given domain.
+
+For instance, Twitter uses `X-Frame-Options: SAMEORIGIN`.
+
+````online
+Here's the result:
+>>>>>>> d35baee32dcce127a69325c274799bb81db1afd8
```html
```
+<<<<<<< HEAD
利用しているブラウザによって、上の `iframe` は空、またはブラウザがそのページをこの方法では移動することを許可しないことを警告するものになります。
@@ -158,6 +287,21 @@ window.onbeforeunload = function() {
そのため、他の解決策もあります。例えば、すべてのクリックを遮断するよう、`height: 100%; width: 100%;` を持つ `
` は消えるようにします。
このようなものです:
+=======
+
+
+
+Depending on your browser, the `iframe` above is either empty or alerting you that the browser won't permit that page to be navigating in this way.
+````
+
+## Showing with disabled functionality
+
+The `X-Frame-Options` header has a side-effect. Other sites won't be able to show our page in a frame, even if they have good reasons to do so.
+
+So there are other solutions... For instance, we can "cover" the page with a `
` with styles `height: 100%; width: 100%;`, so that it will intercept all clicks. That `
` is to be removed if `window == top` or if we figure out that we don't need the protection.
+
+Something like this:
+>>>>>>> d35baee32dcce127a69325c274799bb81db1afd8
```html
```
-`@keyframes` や [詳細な仕様](https://drafts.csswg.org/css-animations/) について多くの記事があります。
+There are many articles about `@keyframes` and a [detailed specification](https://drafts.csswg.org/css-animations/).
-ただし、あなたのサイト上で常に動いているものがない限り、恐らく `@keyframes` を頻繁に必要とはしないでしょう。
+Probably you won't need `@keyframes` often, unless everything is in the constant move on your sites.
-## サマリ
+## Summary
-CSS アニメーションは、1つ以上の CSS プロパティの変更をなめらかにアニメーション化できます。
+CSS animations allow to smoothly (or not) animate changes of one or multiple CSS properties.
-これはほとんどのアニメーションのタスクに適しています。なお、アニメーションに JavaScript を使うこともできます。次のチャプターではそれを見ていきます。
+They are good for most animation tasks. We're also able to use JavaScript for animations, the next chapter is devoted to that.
-JavaScript アニメーションと比較した場合の CSS アニメーションの制限は次の通りです:
+Limitations of CSS animations compared to JavaScript animations:
```compare plus="CSS animations" minus="JavaScript animations"
-+ 簡単なことは簡単にできます。
-+ CPU に対し高速であり軽量です。
-- JavaScript アニメーションは柔軟です。 要素の "爆発" のような任意のアニメーションロジックを実装することができます。
-- 単なるプロパティの変更ではありません。JavaScript ではアニメーション目的で新しい要素を作成すると言ったことが可能です。
++ 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 for purposes of animation.
```
-大部分のアニメーションはこのチャプターで説明した CSS を使用して実装することができます。そして `transitionend` イベントはアニメーションの後に JavaScript を実行することができるので、コードともうまく統合できます。
+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.
-しかし、次のチャプターではより複雑なケースを取り扱うため、 JavaScript アニメーションをいくつか見ていきます。
+But in the next chapter we'll do some JavaScript animations to cover more complex cases.
diff --git a/7-animation/2-css-animations/step-list.view/index.html b/7-animation/2-css-animations/step-list.view/index.html
new file mode 100644
index 0000000000..d7931f5e28
--- /dev/null
+++ b/7-animation/2-css-animations/step-list.view/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
0123456789
+
+
+
diff --git a/7-animation/2-css-animations/step-list.view/style.css b/7-animation/2-css-animations/step-list.view/style.css
new file mode 100644
index 0000000000..a934e83406
--- /dev/null
+++ b/7-animation/2-css-animations/step-list.view/style.css
@@ -0,0 +1,9 @@
+#digit {
+ border: 1px solid red;
+ width: 1.2em;
+}
+
+#stripe {
+ display: inline-block;
+ font: 32px monospace;
+}
diff --git a/7-animation/3-js-animation/1-animate-ball/solution.md b/7-animation/3-js-animation/1-animate-ball/solution.md
index 4e2dfd8279..db0eb17310 100644
--- a/7-animation/3-js-animation/1-animate-ball/solution.md
+++ b/7-animation/3-js-animation/1-animate-ball/solution.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
バウンドさせるには、`position:relative` をもつフィールド内のボールに対して、CSS プロパティ `top` と `position:absolute` を使うことで実現できます。
フィールドの下部の座標は `field.clientHeight` です。しかし、`top` プロパティはボール上部の座標のため、下端の位置は `field.clientHeight - ball.clientHeight` になります。
@@ -7,6 +8,15 @@
あとは、"バウンド" 効果を行うためにタイミング関数 `bounce` を `easeOut` モードで使います。
これがアニメーションの最終的なコードです:
+=======
+To bounce we can use CSS property `top` and `position:absolute` for the ball inside the field with `position:relative`.
+
+The bottom coordinate of the field is `field.clientHeight`. The CSS `top` property refers to the upper edge of the ball. So it should go from `0` till `field.clientHeight - ball.clientHeight`, that's the final lowest position of the upper edge of the ball.
+
+To to get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
+
+Here's the final code for the animation:
+>>>>>>> d35baee32dcce127a69325c274799bb81db1afd8
```js
let to = field.clientHeight - ball.clientHeight;
diff --git a/7-animation/3-js-animation/1-animate-ball/task.md b/7-animation/3-js-animation/1-animate-ball/task.md
index bb98a8063e..903e823843 100644
--- a/7-animation/3-js-animation/1-animate-ball/task.md
+++ b/7-animation/3-js-animation/1-animate-ball/task.md
@@ -2,8 +2,8 @@ importance: 5
---
-# バウンドするボールのアニメーション
+# Animate the bouncing ball
-バウンドするボールを作ってください。ボールをクリックすると動きを確認できます。:
+Make a bouncing ball. Click to see how it should look:
[iframe height=250 src="solution"]
diff --git a/7-animation/3-js-animation/2-animate-ball-hops/solution.md b/7-animation/3-js-animation/2-animate-ball-hops/solution.md
index eeb255b53f..d47387e30a 100644
--- a/7-animation/3-js-animation/2-animate-ball-hops/solution.md
+++ b/7-animation/3-js-animation/2-animate-ball-hops/solution.md
@@ -1,12 +1,12 @@
-タスク では、アニメーションするプロパティは1つだけでした。ここではもう1つ必要です。:`elem.style.left`.
+In the task we had only one property to animate. Now we need one more: `elem.style.left`.
-水平座標は別の法則("バウンド" ではなく、徐々にボールを右にシフトする)で変化します。
+The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
-そのため、もう一つの `animate` を記述します。
+We can write one more `animate` for it.
-時間関数として `linear` も使えますが、`makeEaseOut(quad)` などの方がはるかによく見えます。
+As the time function we could use `linear`, but something like `makeEaseOut(quad)` looks much better.
-コード:
+The code:
```js
let height = field.clientHeight - ball.clientHeight;
diff --git a/7-animation/3-js-animation/2-animate-ball-hops/task.md b/7-animation/3-js-animation/2-animate-ball-hops/task.md
index 8436e9889b..216f3dcda1 100644
--- a/7-animation/3-js-animation/2-animate-ball-hops/task.md
+++ b/7-animation/3-js-animation/2-animate-ball-hops/task.md
@@ -2,6 +2,7 @@ importance: 5
---
+<<<<<<< HEAD
# 右にバウンドするボールのアニメーション
次のように、ボールを右にバウンドさせます。:
@@ -11,3 +12,14 @@ importance: 5
アニメーションコードを記述してください。右への距離は `100px` です。
前のタスク の答えをソースとして使ってください。
+=======
+# Animate the ball bouncing to the right
+
+Make the ball bounce to the right. Like this:
+
+[iframe height=250 src="solution"]
+
+Write the animation code. The distance to the left is `100px`.
+
+Take the solution of the previous task as the source.
+>>>>>>> d35baee32dcce127a69325c274799bb81db1afd8
diff --git a/7-animation/3-js-animation/article.md b/7-animation/3-js-animation/article.md
index 9f67c05c0a..0049543401 100644
--- a/7-animation/3-js-animation/article.md
+++ b/7-animation/3-js-animation/article.md
@@ -1,68 +1,63 @@
-# JavaScript アニメーション
+# JavaScript animations
-JavaScript アニメーションは CSS ではできないことを扱うことができます。
+JavaScript animations can handle things that CSS can't.
-例えば、ベジェ曲線とは異なるタイミング関数を用いて複雑な経路に沿って移動したり、canvas 上でのアニメーションなどです。
+For instance, moving along a complex path, with a timing function different from Bezier curves, or an animation on a canvas.
-[cut]
+## Using setInterval
-## setInterval
+An animation can be implemented as a sequence of frames -- usually small changes to HTML/CSS properties.
-HTML/CSS の観点からは、アニメーションはスタイルプロパティの段階的な変更です。例えば、`style.left` を `0px` から `100px` に変更すると、要素が移動します。
+For instance, changing `style.left` from `0px` to `100px` moves the element. And if we increase it in `setInterval`, changing by `2px` with a tiny delay, like 50 times per second, then it looks smooth. That's the same principle as in the cinema: 24 frames per second is enough to make it look smooth.
-そして、もしそれを `setInterval` の中で増加させるとき、毎秒 50 回の小さな変更を加えることによって、その変化はなめらかに見えます。これは映画館と同じ原理です。: 毎秒 24 以上のフレームがあれば十分に滑らかに見えます。
-
-疑似コードは次のようになります:
+The pseudo-code can look like this:
```js
-let delay = 1000 / 50; // 1 秒で 50 フレーム
let timer = setInterval(function() {
if (animation complete) clearInterval(timer);
- else increase style.left
-}, delay)
+ else increase style.left by 2px
+}, 20); // change by 2px every 20ms, about 50 frames per second
```
-より複雑なアニメーションの例:
+More complete example of the animation:
```js
-let start = Date.now(); // 開始時間を覚える
+let start = Date.now(); // remember start time
let timer = setInterval(function() {
- // 開始からの経過時間は？
+ // how much time passed from the start?
let timePassed = Date.now() - start;
if (timePassed >= 2000) {
- clearInterval(timer); // 2秒後にアニメーションが終了
+ clearInterval(timer); // finish the animation after 2 seconds
return;
}
- // timePassed 時点のアニメーションを描画
+ // draw the animation at the moment timePassed
draw(timePassed);
}, 20);
-// timePassed は 0 から 2000 まで進む
-// なので、left は 0px から 400px になります
+// as timePassed goes from 0 to 2000
+// left gets values from 0px to 400px
function draw(timePassed) {
train.style.left = timePassed / 5 + 'px';
}
```
-デモです。電車をクリックしてみてください:
+Click for the demo:
[codetabs height=200 src="move"]
-## requestAnimationFrame
-
-複数のアニメーションが同時に実行されているとしましょう。
+## Using requestAnimationFrame
-もしそれらを別々に実行し、それぞれが個別に `setInterval(..., 20)` を持っていると、ブラウザは `20ms` 間隔よりもっと頻繁に再描画をする必要があります。
+Let's imagine we have several animations running simultaneously.
-各 `setInterval` は `20ms` 毎に一回トリガしますが、独立しているので `20ms` の中に複数の独立した実行があることになります。
+If we run them separately, then even though each one has `setInterval(..., 20)`, then the browser would have to repaint much more often than every `20ms`.
-これらの複数の独立した再描画は、ブラウザの再描画を簡単にし、CPUの負荷を減らしてよりなめらかに見せるためにグループ化すべきです。
+That's because they have different starting time, so "every 20ms" differs between different animations. The intervals are not aligned. So we'll have several independent runs within `20ms`.
-言い換えると、次のコード:
+In other words, this:
```js
setInterval(function() {
@@ -72,39 +67,40 @@ setInterval(function() {
}, 20)
```
-...は以下のコードよりも軽量です:
+...Is lighter than three independent calls:
```js
-setInterval(animate1, 20);
-setInterval(animate2, 20);
+setInterval(animate1, 20); // independent animations
+setInterval(animate2, 20); // in different places of the script
setInterval(animate3, 20);
```
-心に留めておくべきことがもう一つあります。CPUが過負荷になっている場合や、その他再描画をあまりしなくて良い場合があります(ブラウザタブが非表示になっているようなとき）。そのため、本当は20ms毎に実行すべきではありません。
+These several independent redraws should be grouped together, to make the redraw easier for the browser and hence load less CPU load and look smoother.
+
+There's one more thing to keep in mind. Sometimes when CPU is overloaded, or there are other reasons to redraw less often (like when the browser tab is hidden), so we really shouldn't run it every `20ms`.
-しかし、それを JavaScript ではどうやってしるのでしょう？ 関数 `requestAnimationFrame` を提供する標準の [アニメーションタイミング](http://www.w3.org/TR/animation-timing/) があります。この関数は、これらすべての問題及び、その他多くのことに対応しています。
+But how do we know about that in JavaScript? There's a specification [Animation timing](http://www.w3.org/TR/animation-timing/) that provides the function `requestAnimationFrame`. It addresses all these issues and even more.
-構文:
+The syntax:
```js
let requestId = requestAnimationFrame(callback)
```
-これは、ブラウザがアニメーションをしたい最も近い時間に `callback` 関数を実行するようスケジューリングします。
+That schedules the `callback` function to run in the closest time when the browser wants to do animation.
-もし `callback` の中で要素を変更すると、他の `requestAnimationFrame` コールバックや CSS アニメーションと一緒にグループ化されます。これにより、配置の再計算と再描画がそれぞれではなく1回でまとめて行われます。
+If we do changes in elements in `callback` then they will be grouped together with other `requestAnimationFrame` callbacks and with CSS animations. So there will be one geometry recalculation and repaint instead of many.
-返却値 `requestId` は呼び出しをキャンセルするのに使うことができます:
+The returned value `requestId` can be used to cancel the call:
```js
-// スケジューリングされたコールバックの実行をキャンセルする
+// cancel the scheduled execution of callback
cancelAnimationFrame(requestId);
```
-`callback` は1つの引数を取ります -- ページロードの開始からの経過時間のマイクロ秒です。
-この時間は [performance.now()](mdn:api/Performance/now) を呼び出すことでも得ることができます。
+The `callback` gets one argument -- the time passed from the beginning of the page load in microseconds. This time can also be obtained by calling [performance.now()](mdn:api/Performance/now).
-通常 `callback` は CPU が過負荷状態になったり、ノートPCのバッテリーがほとんどなかったり、その他別の理由がある場合を除きすぐに実行されます。
+Usually `callback` runs very soon, unless the CPU is overloaded or the laptop battery is almost discharged, or there's another reason.
-下のコードは `requestAnimationFrame` での最初の10回の実行時間を表示します。通常は 10-20ms です。
+The code below shows the time between first 10 runs for `requestAnimationFrame`. Usually it's 10-20ms:
```html run height=40 refresh
```
+<<<<<<< HEAD
1. レンダリングロジックは `render` ヘルパーメソッドに移動しました。
2. 要素がページに挿入されたときに1回だけ呼び出します。
3. `observedAttributes()` にリストされた属性の変更に対し、`attributeChangedCallback` がトリガーされます。
@@ -220,6 +340,21 @@ HTML パーサーが DOM を構築するとき、要素は次々に処理され
これはカスタム要素に対して重要な結果をもたらします。
例えば、カスタム要素が `connectedCallback` の中で `innerHTML` にアクセスしようとしても、何も得られません。:
+=======
+1. The rendering logic is moved to `render()` helper method.
+2. We call it once when the element is inserted into page.
+3. For a change of an attribute, listed in `observedAttributes()`, `attributeChangedCallback` triggers.
+4. ...and re-renders the element.
+5. At the end, we can easily make a live timer.
+
+## Rendering order
+
+When HTML parser builds the DOM, elements are processed one after another, parents before children. E.g. if we have ``, then `` element is created and connected to DOM first, and then ``.
+
+That leads to important consequences for custom elements.
+
+For example, if a custom element tries to access `innerHTML` in `connectedCallback`, it gets nothing:
+>>>>>>> d35baee32dcce127a69325c274799bb81db1afd8
```html run height=40
```
+<<<<<<< HEAD
1. ドキュメントのスタイルは shadow tree には影響しません。
2. ...ですが、内部のスタイルは機能します。
3. shadow tree 内で要素を取得するには、ツリーの内側からクエリーを行う必要があります。
@@ -155,4 +253,30 @@ Shadow DOM 要素:
- メインのドキュメントからの JavaScript セレクタ(e.g. `querySelector`)には見えません
- shadow tree 内のスタイルのみを使用し、メインドキュメントのスタイルは適用されません
-Shadow DOM が存在する場合、いわゆる "light DOM" (通常の子)の代わりに、ブラウザによってレンダリングされます。チャプター でこれらを構成する方法を見ていきます。
\ No newline at end of file
+Shadow DOM が存在する場合、いわゆる "light DOM" (通常の子)の代わりに、ブラウザによってレンダリングされます。チャプター でこれらを構成する方法を見ていきます。
+=======
+1. The style from the document does not affect the shadow tree.
+2. ...But the style from the inside works.
+3. To get elements in shadow tree, we must query from inside the tree.
+
+## References
+
+- DOM:
+- Compatibility:
+- Shadow DOM is mentioned in many other specifications, e.g. [DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) specifies that shadow root has `innerHTML`.
+
+
+## Summary
+
+Shadow DOM is a way to create a component-local DOM.
+
+1. `shadowRoot = elem.attachShadow({mode: open|closed})` -- creates shadow DOM for `elem`. If `mode="open"`, then it's accessible as `elem.shadowRoot` property.
+2. We can populate `shadowRoot` using `innerHTML` or other DOM methods.
+
+Shadow DOM elements:
+- Have their own ids space,
+- Invisible to JavaScript selectors from the main document, such as `querySelector`,
+- Use styles only from the shadow tree, not from the main document.
+
+Shadow DOM, if exists, is rendered by the browser instead of so-called "light DOM" (regular children). In the chapter we'll see how to compose them.
+>>>>>>> d35baee32dcce127a69325c274799bb81db1afd8
diff --git a/8-web-components/4-template-element/article.md b/8-web-components/4-template-element/article.md
index d1a5d08468..495ca81740 100644
--- a/8-web-components/4-template-element/article.md
+++ b/8-web-components/4-template-element/article.md
@@ -1,4 +1,5 @@
+<<<<<<< HEAD
# Template 要素
組み込みの `` 要素は HTML マークアップテンプレートの格納場所として機能します。ブラウザはこれらのコンテンツは無視します(構文のチェックのみ行います)が、JavaScript ではアクセスし、他の要素を作るのに使うことができます。
@@ -8,6 +9,17 @@
第一に、`template` 内のコンテンツは、通常適切な囲みタグを必要とする場合でも有効なHTMLになります。
例えば、テーブルの行 `
` を置くことができます:
+=======
+# Template element
+
+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 ``?
+
+First, its content can be any valid HTML, even if it normally requires a proper enclosing tag.
+
+For example, we can put there a table row `
` を置こうとすると、ブラウザは無効な DOM 構造であることを検知し、それを "修正" しようとして前後に `
` タグを追加します。場合によっては、これはしてほしいことではありません。一方、`` はそこに置いたものを正確に維持します。
同様に、スタイルやスクリプトを `` に入れることもできます:
+=======
+Usually, if we try to put `
` inside, say, a `
`, the browser detects the invalid DOM structure and "fixes" it, adds `
` around. That's not what we want. On the other hand, `` keeps exactly what we place there.
+
+We can put styles and scripts into `` as well:
+>>>>>>> d35baee32dcce127a69325c274799bb81db1afd8
```html
@@ -31,6 +49,7 @@
```
+<<<<<<< HEAD
ブラウザは `` のコンテンツは "ドキュメント外" とみなします。: コンテンツにあるスタイルは適用されず、スクリプトも実行されません。`