closes #3039, #3082

2022-06-26 10:32:16 +04:00 · 2022-06-26 10:32:16 +04:00 · 7d9ca8bc5e
commit 7d9ca8bc5e
parent 45ba0d173c
37 changed files with 74 additions and 46 deletions
--- a/.gitattributes
+++ b/.gitattributes
@ -1,2 +1,2 @@
 * text=auto eol=lf
-*.svg       binary
+*.svg       text
--- a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg
+++ b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg
--- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg
+++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg
--- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console.svg
+++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-console.svg
--- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg
+++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg
--- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg
+++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg
--- a/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.svg
+++ b/1-js/03-code-quality/01-debugging-chrome/chrome-tabs.svg
--- a/1-js/03-code-quality/02-coding-style/code-style.svg
+++ b/1-js/03-code-quality/02-coding-style/code-style.svg
--- a/1-js/99-js-misc/01-proxy/proxy.svg
+++ b/1-js/99-js-misc/01-proxy/proxy.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="292" height="180" viewBox="0 0 292 180"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="misc" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="proxy.svg"><path id="Rectangle-2" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M191 81h73v26h-73z"/><text id="test:-5" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="198" y="98">test: 5</tspan></text><text id="proxy" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="186" y="17">proxy</tspan></text><text id="target" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="198" y="74">target</tspan></text><path id="Line" fill="#C06334" fill-rule="nonzero" d="M116.537 72.5l19 9.5-19 9.5-.001-8H4.463v-3h112.073v-8z"/><path id="Line-Copy-4" fill="#C06334" fill-rule="nonzero" d="M22 98.5v8h114.574v3H22v8L3 108l19-9.5z"/><path id="Line-Copy" fill="#C06334" fill-rule="nonzero" d="M176.478 82l14 7-14 7V82zM146 88v2h-4v-2h4zm7 0v2h-4v-2h4zm7 0v2h-4v-2h4zm7 0v2h-4v-2h4zm7 0v2h-4v-2h4z"/><path id="Line-Copy-2" fill="#C06334" fill-rule="nonzero" d="M157 93v6h2v2h-2v6l-14-7 14-7zm9 6v2h-4v-2h4zm7 0v2h-4v-2h4zm7 0v2h-4v-2h4zm7 0v2h-4v-2h4z"/><text id="get-proxy.test" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="7" y="70">get proxy.test</tspan></text><text id="5" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="71" y="128">5</tspan></text><path id="Oval" stroke="#DBAF88" stroke-dasharray="5" stroke-width="2" d="M207 160c36.45 0 66-29.55 66-66s-29.55-66-66-66-66 29.55-66 66 29.55 66 66 66z"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="292" height="180" viewBox="0 0 292 180"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="misc" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="proxy.svg"><path id="Rectangle-2" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M191 81h73v26h-73z"/><text id="test:-5" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="198" y="98">test: 5</tspan></text><text id="proxy" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="186" y="17">proxy</tspan></text><text id="target" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="198" y="74">target</tspan></text><path id="Line" fill="#C06334" fill-rule="nonzero" d="M116.537 72.5l19 9.5-19 9.5-.001-8H4.463v-3h112.073v-8z"/><path id="Line-Copy-4" fill="#C06334" fill-rule="nonzero" d="M22 98.5v8h114.574v3H22v8L3 108l19-9.5z"/><path id="Line-Copy" fill="#C06334" fill-rule="nonzero" d="M190.478 89l-14-7v14l14-7zM146 88v2h-4v-2h4zm7 0v2h-4v-2h4zm7 0v2h-4v-2h4zm7 0v2h-4v-2h4zm7 0v2h-4v-2h4z"/><path id="Line-Copy-2" fill="#C06334" fill-rule="nonzero" d="M157 93v6h2v2h-2v6l-14-7 14-7zm9 6v2h-4v-2h4zm7 0v2h-4v-2h4zm7 0v2h-4v-2h4zm7 0v2h-4v-2h4z"/><text id="get-proxy.test" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="7" y="70">get proxy.test</tspan></text><text id="5" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="71" y="128">5</tspan></text><path id="Oval" stroke="#DBAF88" stroke-dasharray="5" stroke-width="2" d="M207 160c36.45 0 66-29.55 66-66s-29.55-66-66-66-66 29.55-66 66 29.55 66 66 66z"/></g></g></svg>
--- a/2-ui/1-document/02-dom-nodes/domconsole0.svg
+++ b/2-ui/1-document/02-dom-nodes/domconsole0.svg
--- a/2-ui/1-document/02-dom-nodes/domconsole1.svg
+++ b/2-ui/1-document/02-dom-nodes/domconsole1.svg
--- a/2-ui/1-document/02-dom-nodes/elk.svg
+++ b/2-ui/1-document/02-dom-nodes/elk.svg
--- a/2-ui/1-document/02-dom-nodes/inspect.svg
+++ b/2-ui/1-document/02-dom-nodes/inspect.svg
--- 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
--- a/2-ui/1-document/09-size-and-scroll/metric-all.svg
+++ b/2-ui/1-document/09-size-and-scroll/metric-all.svg
--- 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
--- a/2-ui/1-document/09-size-and-scroll/metric-css.svg
+++ b/2-ui/1-document/09-size-and-scroll/metric-css.svg
--- 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
--- 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
--- 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
--- 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
--- 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
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="508" height="203" viewBox="0 0 508 203"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="document-client-width-height.svg"><g id="noun_69008_cc" fill="#DBAF88" transform="translate(275 8)"><path id="Shape" d="M179.188 145H3.813C1.708 145 0 143.369 0 141.375V3.625C0 1.631 1.708 0 3.813 0h175.375C181.284 0 183 1.631 183 3.625v137.75c0 1.994-1.716 3.625-3.813 3.625zM7.625 137.75h167.75V7.25H7.625v130.5z"/><path id="Shape" d="M175.375 36.25H7.625c-2.104 0-3.813-1.631-3.813-3.625S5.521 29 7.626 29h167.75c2.097 0 3.813 1.631 3.813 3.625s-1.716 3.625-3.813 3.625zM61.32 126.578c-1.266 0-2.508-.595-3.233-1.682L34.892 89.849a3.486 3.486 0 01.16-4.082l23.195-29.906c1.25-1.631 3.63-1.964 5.33-.746 1.693 1.188 2.059 3.458.8 5.067l-21.646 27.92 21.807 32.951c1.12 1.69.587 3.937-1.197 4.988a3.936 3.936 0 01-2.02.537zM122 126.578a3.802 3.802 0 01-2.028-.559c-1.784-1.058-2.326-3.298-1.197-4.988l21.807-32.95-21.655-27.928c-1.25-1.617-.892-3.878.8-5.067 1.694-1.197 4.08-.849 5.33.76l23.188 29.907a3.462 3.462 0 01.16 4.082L125.21 124.88c-.709 1.102-1.944 1.697-3.21 1.697zM76.25 119.937a4.07 4.07 0 01-1.86-.457c-1.838-.979-2.494-3.183-1.465-4.959l30.18-51.359c1.03-1.755 3.34-2.385 5.2-1.37 1.83.978 2.486 3.175 1.457 4.937l-30.18 51.359c-.701 1.182-1.998 1.849-3.332 1.849zM22.875 18.125c0 2.003-1.706 3.625-3.813 3.625-2.106 0-3.812-1.622-3.812-3.625s1.706-3.625 3.813-3.625c2.106 0 3.812 1.622 3.812 3.625zM38.125 18.125c0 2.003-1.706 3.625-3.813 3.625-2.106 0-3.812-1.622-3.812-3.625s1.706-3.625 3.813-3.625c2.106 0 3.812 1.622 3.812 3.625zM53.375 18.125c0 2.003-1.706 3.625-3.813 3.625-2.106 0-3.812-1.622-3.812-3.625s1.706-3.625 3.813-3.625c2.106 0 3.812 1.622 3.812 3.625z"/></g><text id="documentElement.clie" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="12" y="101">documentElement.clientHeight</tspan></text><text id="documentElement.clie" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="257" y="195">documentElement.clientWidth</tspan></text><path id="Line-3-Copy" fill="#C06334" fill-rule="nonzero" d="M431.025 158.653l19 9.5-19 9.5-.001-8h-132v8l-19-9.5 19-9.5v8h132v-8z" transform="matrix(-1 0 0 1 730.025 0)"/><path id="Line" fill="#C06334" fill-rule="nonzero" d="M256.5 45l9.5 19-8-.001v64l8 .001-9.5 19-9.5-19 8-.001v-64L247 64l9.5-19z"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="508" height="203" viewBox="0 0 508 203"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="document-client-width-height.svg"><g id="noun_69008_cc" fill="#DBAF88" transform="translate(275 8)"><path id="Shape" d="M179.188 145H3.813C1.708 145 0 143.369 0 141.375V3.625C0 1.631 1.708 0 3.813 0h175.375C181.284 0 183 1.631 183 3.625v137.75c0 1.994-1.716 3.625-3.813 3.625zM7.625 137.75h167.75V7.25H7.625v130.5z"/><path id="Shape" d="M175.375 36.25H7.625c-2.104 0-3.813-1.631-3.813-3.625S5.521 29 7.626 29h167.75c2.097 0 3.813 1.631 3.813 3.625s-1.716 3.625-3.813 3.625zM61.32 126.578c-1.266 0-2.508-.595-3.233-1.682L34.892 89.849a3.486 3.486 0 01.16-4.082l23.195-29.906c1.25-1.631 3.63-1.964 5.33-.746 1.693 1.188 2.059 3.458.8 5.067l-21.646 27.92 21.807 32.951c1.12 1.69.587 3.937-1.197 4.988a3.936 3.936 0 01-2.02.537zM122 126.578a3.802 3.802 0 01-2.028-.559c-1.784-1.058-2.326-3.298-1.197-4.988l21.807-32.95-21.655-27.928c-1.25-1.617-.892-3.878.8-5.067 1.694-1.197 4.08-.849 5.33.76l23.188 29.907a3.462 3.462 0 01.16 4.082L125.21 124.88c-.709 1.102-1.944 1.697-3.21 1.697zM76.25 119.937a4.07 4.07 0 01-1.86-.457c-1.838-.979-2.494-3.183-1.465-4.959l30.18-51.359c1.03-1.755 3.34-2.385 5.2-1.37 1.83.978 2.486 3.175 1.457 4.937l-30.18 51.359c-.701 1.182-1.998 1.849-3.332 1.849zM22.875 18.125c0 2.003-1.706 3.625-3.813 3.625-2.106 0-3.812-1.622-3.812-3.625s1.706-3.625 3.813-3.625c2.106 0 3.812 1.622 3.812 3.625zM38.125 18.125c0 2.003-1.706 3.625-3.813 3.625-2.106 0-3.812-1.622-3.812-3.625s1.706-3.625 3.813-3.625c2.106 0 3.812 1.622 3.812 3.625zM53.375 18.125c0 2.003-1.706 3.625-3.813 3.625-2.106 0-3.812-1.622-3.812-3.625s1.706-3.625 3.813-3.625c2.106 0 3.812 1.622 3.812 3.625z"/></g><text id="documentElement.clie" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="12" y="101">documentElement.clientHeight</tspan></text><text id="documentElement.clie" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="257" y="195">documentElement.clientWidth</tspan></text><path id="Line-3-Copy" fill="#C06334" fill-rule="nonzero" d="M299.025 177.653l-19-9.5 19-9.5-.001 8h132v-8l19 9.5-19 9.5v-8h-132v8z" transform="matrix(-1 0 0 1 730.025 0)"/><path id="Line" fill="#C06334" fill-rule="nonzero" d="M256.5 45l9.5 19-8-.001v64l8 .001-9.5 19-9.5-19 8-.001v-64L247 64l9.5-19z"/></g></g></svg>
--- 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
--- 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
--- a/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg
+++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg
--- 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
--- 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
--- 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
--- 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
--- 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
--- a/2-ui/99-ui-misc/02-selection-range/selection-firefox.svg
+++ b/2-ui/99-ui-misc/02-selection-range/selection-firefox.svg
--- a/5-network/11-websocket/websocket-handshake.svg
+++ b/5-network/11-websocket/websocket-handshake.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="429" height="348" viewBox="0 0 429 348"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="network" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="websocket-handshake.svg"><path id="Rectangle-227" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M2 16h128v64H2z"/><text id="Browser" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="40" y="49">Browser</tspan></text><path id="Rectangle-228" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M298 16h128v64H298z"/><text id="Server" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="340" y="49">Server</tspan></text><path id="Line" stroke="#7E7C7B" stroke-linecap="square" d="M67 81v250.5M363 81v251.5"/><path id="Line" fill="#C06334" fill-rule="nonzero" d="M349 133l14 7-14 7v-6H68v-2h281v-6z"/><path id="Line-Copy" fill="#C06334" fill-rule="nonzero" d="M83 204v6h281v2H83v6l-14-7 14-7z"/><text id="HTTP-request" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="172.015" y="130">HTTP-request</tspan></text><text id="&quot;Hey,-server,-let's" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="102.605" y="161">&quot;Hey, server, let&apos;s talk WebSocket?&quot;</tspan></text><text id="HTTP-response-&quot;Okay!" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="166.419" y="204">HTTP-response</tspan> <tspan x="191.972" y="226">&quot;Okay!&quot;</tspan></text><path id="Line-Copy-2" fill="#C06334" fill-rule="nonzero" d="M81 272v6h2v2h-2v6l-14-7 14-7zm268 0l14 7-14 7v-14zm-260 6v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4z" transform="matrix(-1 0 0 1 430 0)"/><text id="WebSocket-protocol" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="151.604" y="272">WebSocket protocol</tspan></text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="429" height="348" viewBox="0 0 429 348"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="network" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="websocket-handshake.svg"><path id="Rectangle-227" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M2 16h128v64H2z"/><text id="Browser" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="40" y="49">Browser</tspan></text><path id="Rectangle-228" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M298 16h128v64H298z"/><text id="Server" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="340" y="49">Server</tspan></text><path id="Line" stroke="#7E7C7B" stroke-linecap="square" d="M67 81v250.5M363 81v251.5"/><path id="Line" fill="#C06334" fill-rule="nonzero" d="M349 133l14 7-14 7v-6H68v-2h281v-6z"/><path id="Line-Copy" fill="#C06334" fill-rule="nonzero" d="M83 204v6h281v2H83v6l-14-7 14-7z"/><text id="HTTP-request" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="172.015" y="130">HTTP-request</tspan></text><text id="&quot;Hey,-server,-let's" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="102.605" y="161">&quot;Hey, server, let&apos;s talk WebSocket?&quot;</tspan></text><text id="HTTP-response-&quot;Okay!" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="166.419" y="204">HTTP-response</tspan> <tspan x="191.972" y="226">&quot;Okay!&quot;</tspan></text><path id="Line-Copy-2" fill="#C06334" fill-rule="nonzero" d="M81 272v6h2v2h-2v6l-14-7 14-7zm268 0l14 7-14 7v-14zm-254 6v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm-126 0v2h-4v-2h4zm138 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm-126 0v2h-4v-2h4z" transform="matrix(-1 0 0 1 430 0)"/><text id="WebSocket-protocol" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="151.604" y="272">WebSocket protocol</tspan></text></g></g></svg>
--- a/7-animation/1-bezier-curve/article.md
+++ b/7-animation/1-bezier-curve/article.md
@ -4,6 +4,12 @@ Bezier curves are used in computer graphics to draw shapes, for CSS animation an

 They are a very simple thing, worth to study once and then feel comfortable in the world of vector graphics and advanced animations.

+```smart header="Some theory, please"
+This article provides a theoretical, but very needed insight into what Bezier curves are, while [the next one](info:css-animations#bezier-curve) shows how we can use them for CSS animations.
+
+Please take your time to read and understand the concept, it'll serve you well.
+```
+
 ## Control points

 A [bezier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) is defined by control points.
--- a/7-animation/1-bezier-curve/bezier3-draw1.svg
+++ b/7-animation/1-bezier-curve/bezier3-draw1.svg
--- a/7-animation/2-css-animations/article.md
+++ b/7-animation/2-css-animations/article.md
@ -254,7 +254,15 @@ As we know, `y` measures "the completion of the animation process". The value `y

 That's a "soft" variant for sure. If we put `y` values like `-99` and `99` then the train would jump out of the range much more.

-But how do we make a Bezier curve for a specific task? There are many tools. For instance, we can do it on the site <http://cubic-bezier.com/>.
+But how do we make a Bezier curve for a specific task? There are many tools.
+
+- For instance, we can do it on the site <https://cubic-bezier.com>.
+- Browser developer tools also have special support for Bezier curves in CSS:
+    1. Open the developer tools with `key:F12` (Mac: `key:Cmd+Opt+I`).
+    2. Select the `Elements` tab, then pay attention to the `Styles` sub-panel at the right side.
+    3. CSS properties with a word `cubic-bezier` will have an icon before this word.
+    4. Click this icon to edit the curve.
+

 ### Steps

@ -266,7 +274,19 @@ Here's a list of digits, without any animations, just as a source:

 [codetabs src="step-list"]

-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.
+In the HTML, a stripe of digits is enclosed into a fixed-length `<div id="digits">`:
+
+```html
+<div id="digit">
+  <div id="stripe">0123456789</div>
+</div>
+```
+
+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.

 There will be 9 steps, a step-move for each digit:

@ -277,17 +297,17 @@ There will be 9 steps, a step-move for each digit:
 }
 ```

-In action:
-
-[codetabs src="step"]
-
 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.

-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.
+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 process is progressing like this:

@ -297,6 +317,8 @@ The process is progressing like this:
 - `8s` -- `-90%`
 - (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:
@ -307,20 +329,20 @@ So the process for `steps(9, end)` would go like this:
 - ...
 - `9s` -- `-90%`

-Here's `steps(9, end)` in action (note the pause between the first digit change):
+Here's `steps(9, end)` in action (note the pause before the first digit change):

 [codetabs src="step-end"]

-There are also shorthand values:
+There are also some pre-defined shorthands for `steps(...)`:

 - `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, because that's not really animation, but rather a single-step change.
+These values are rarely used, as they represent not a real animation, but rather a single-step change. We mention them here for completeness.

-## 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.

--- a/8-web-components/1-webcomponents-intro/web-components-twitter.svg
+++ b/8-web-components/1-webcomponents-intro/web-components-twitter.svg
--- a/figures.sketch
+++ b/figures.sketch