jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

minor

Browse source
This commit is contained in:
Ilya Kantor 2019-08-19 11:41:22 +03:00
parent 077fd8498f
commit 42603c01ba
11 changed files with 13 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
1-js/99-js-misc/01-proxy/article.md
View file

@ -43,7 +43,7 @@ As we can see, without any traps, `proxy` is a transparent wrapper around `targe
To activate more capabilities, let's add traps. To activate more capabilities, let's add traps.
What can we intercept by them? What can we intercept with them?
For most operations on objects, there's a so-called "internal method" in JavaScript specificaiton, that describes on the lowest level, how it works. For instance, `[[Get]]` - the internal method to read a property, `[[Set]]` -- the internal method to write a property, and so on. These methods are only used in the specification, we can't call them directly by name. For most operations on objects, there's a so-called "internal method" in JavaScript specificaiton, that describes on the lowest level, how it works. For instance, `[[Get]]` - the internal method to read a property, `[[Set]]` -- the internal method to write a property, and so on. These methods are only used in the specification, we can't call them directly by name.

2
2-ui/1-document/01-browser-environment/windowObjects.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="367" height="308" viewBox="0 0 367 308"><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="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="windowObjects.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M136 10h78v28h-78z"/><text id="window" fill="#707175" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="152" y="28">window</tspan></text><path id="Rectangle-2" fill="#F5F4D8" stroke="#CFCE95" stroke-width="2" d="M18 80h78v26H18z"/><path id="Rectangle-2" fill="#FCDFE1" stroke="#C74A6C" stroke-width="2" d="M255 118h83v26h-83z"/><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M110 270h132v26H110z"/><text id="document" fill="#727155" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="26" y="97">document</tspan></text><path id="Rectangle-2" fill="#FCDFE1" stroke="#C74A6C" stroke-width="2" d="M255 80h83v26h-83z"/><text id="Object" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="271" y="97">Object</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 80h85v26h-85z"/><text id="navigator" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="138" y="97">navigator</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 118h85v26h-85z"/><text id="screen" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="151" y="135">screen</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 156h85v26h-85z"/><text id="location" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="142" y="173">location</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 194h85v26h-85z"/><text id="frames" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="151" y="211">frames</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 232h85v26h-85z"/><text id="history" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="147" y="249">history</tspan></text><text id="Array" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="275" y="135">Array</tspan></text><path id="Rectangle-3" fill="#FCDFE1" stroke="#C74A6C" stroke-width="2" d="M255 156h83v26h-83z"/><text id="Function" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="264" y="173">Function</tspan></text><text id="XMLHttpRequest" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="117" y="287">XMLHttpRequest</tspan></text><text id="BOM" fill="#99C0C3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="135" y="73">BOM</tspan></text><text id="JavaScript" fill="#C74A6C" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="271" y="73">JavaScript</tspan></text><text id="DOM" fill="#CFCE95" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="17" y="73">DOM</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M175.5 58.5v-18h2v18h6l-7 14-7-14h6z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M97.422 64.684l35.328-24.576 1.142 1.642-35.328 24.576 3.426 4.925L86.5 73.5l7.495-13.741 3.427 4.925z"/><text id="…" fill="#727155" font-family="PTMono-Regular, PT Mono" font-size="24" font-weight="normal"><tspan x="50" y="122">…</tspan></text><text id="…-2" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="24" font-weight="normal"><tspan x="287" y="201">…</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M255.372 67.466l-39.27-26.716 1.124-1.653 39.27 26.715 3.376-4.96 7.638 13.662-15.513-2.087 3.375-4.961z"/></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="367" height="308" viewBox="0 0 367 308"><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="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="windowObjects.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M136 10h78v28h-78z"/><text id="window" fill="#707175" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="152" y="28">window</tspan></text><path id="Rectangle-2" fill="#F5F4D8" stroke="#FFDE99" stroke-width="2" d="M18 80h78v26H18z"/><path id="Rectangle-2" fill="#FCDFE1" stroke="#C74A6C" stroke-width="2" d="M255 118h83v26h-83z"/><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M110 270h132v26H110z"/><text id="document" fill="#727155" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="26" y="97">document</tspan></text><path id="Rectangle-2" fill="#FCDFE1" stroke="#C74A6C" stroke-width="2" d="M255 80h83v26h-83z"/><text id="Object" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="271" y="97">Object</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 80h85v26h-85z"/><text id="navigator" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="138" y="97">navigator</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 118h85v26h-85z"/><text id="screen" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="151" y="135">screen</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 156h85v26h-85z"/><text id="location" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="142" y="173">location</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 194h85v26h-85z"/><text id="frames" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="151" y="211">frames</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 232h85v26h-85z"/><text id="history" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="147" y="249">history</tspan></text><text id="Array" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="275" y="135">Array</tspan></text><path id="Rectangle-3" fill="#FCDFE1" stroke="#C74A6C" stroke-width="2" d="M255 156h83v26h-83z"/><text id="Function" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="264" y="173">Function</tspan></text><text id="XMLHttpRequest" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="117" y="287">XMLHttpRequest</tspan></text><text id="BOM" fill="#99C0C3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="135" y="73">BOM</tspan></text><text id="JavaScript" fill="#C74A6C" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="271" y="73">JavaScript</tspan></text><text id="DOM" fill="#FFDE99" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="17" y="73">DOM</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M175.5 58.5v-18h2v18h6l-7 14-7-14h6z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M97.422 64.684l35.328-24.576 1.142 1.642-35.328 24.576 3.426 4.925L86.5 73.5l7.495-13.741 3.427 4.925z"/><text id="…" fill="#727155" font-family="PTMono-Regular, PT Mono" font-size="24" font-weight="normal"><tspan x="50" y="122">…</tspan></text><text id="…-2" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="24" font-weight="normal"><tspan x="287" y="201">…</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M255.372 67.466l-39.27-26.716 1.124-1.653 39.27 26.715 3.376-4.96 7.638 13.662-15.513-2.087 3.375-4.961z"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Before After
Before After

2
2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="353" height="216" viewBox="0 0 353 216"><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="event-order-bubbling.svg"><path id="Rectangle-210" fill="#FFDE99" d="M159.488 140L174 186H60l14.512-46z"/><path id="Rectangle-209" stroke="#CFCE95" stroke-width="18" d="M173.634 81H59.366l-16.09 51h146.447l-16.09-51z"/><path id="Rectangle-208" stroke="#99C0C3" stroke-width="18" d="M193.014 29H39.986l-22.71 72h198.448l-22.71-72z"/><path id="Fill-46" fill="#5A4739" d="M121.5 123h-9v-13h9v13zm0 18v13.816a4.5 4.5 0 11-9 0V141h9zm0-49h-9V35.698l-10.138 10.137a4.5 4.5 0 11-6.363-6.364l17.639-17.64a4.477 4.477 0 013.363-1.3 4.471 4.471 0 013.36 1.3l17.64 17.64a4.5 4.5 0 01-6.363 6.364L121.5 35.698V92z"/><text id="1" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="210" y="105">1</tspan></text><text id="2" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="185" y="136">2</tspan></text><text id="3" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="157" y="181">3</tspan></text><text id="Most-deeply-nested-e" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="233.48" y="175">Most deeply</tspan> <tspan x="221.306" y="194">nested element</tspan></text><path id="Line-30" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M179.5 177.5h30"/></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="353" height="216" viewBox="0 0 353 216"><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="event-order-bubbling.svg"><path id="Rectangle-210" fill="#FFDE99" d="M159.488 140L174 186H60l14.512-46z"/><path id="Rectangle-209" stroke="#FFDE99" stroke-width="18" d="M173.634 81H59.366l-16.09 51h146.447l-16.09-51z"/><path id="Rectangle-208" stroke="#99C0C3" stroke-width="18" d="M193.014 29H39.986l-22.71 72h198.448l-22.71-72z"/><path id="Fill-46" fill="#5A4739" d="M121.5 123h-9v-13h9v13zm0 18v13.816a4.5 4.5 0 11-9 0V141h9zm0-49h-9V35.698l-10.138 10.137a4.5 4.5 0 11-6.363-6.364l17.639-17.64a4.477 4.477 0 013.363-1.3 4.471 4.471 0 013.36 1.3l17.64 17.64a4.5 4.5 0 01-6.363 6.364L121.5 35.698V92z"/><text id="1" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="210" y="105">1</tspan></text><text id="2" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="185" y="136">2</tspan></text><text id="3" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="157" y="181">3</tspan></text><text id="Most-deeply-nested-e" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="233.48" y="175">Most deeply</tspan> <tspan x="221.306" y="194">nested element</tspan></text><path id="Line-30" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M179.5 177.5h30"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Before After
Before After

2
2-ui/2-events/03-event-delegation/bagua-bubble.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="369" height="216" viewBox="0 0 369 216"><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="bagua-bubble.svg"><path id="Rectangle-210" fill="#FFDE99" d="M202.488 140L217 186H103l14.512-46z"/><path id="Rectangle-209" stroke="#CFCE95" stroke-width="18" d="M216.634 81H102.366l-16.09 51h146.447l-16.09-51z"/><path id="Rectangle-208" stroke="#99C0C3" stroke-width="18" d="M236.014 29H82.986l-22.71 72h198.448l-22.71-72z"/><path id="Fill-46" fill="#5A4739" d="M164.5 123h-9v-13h9v13zm0 18v13.816a4.5 4.5 0 11-9 0V141h9zm0-49h-9V35.698l-10.138 10.137a4.5 4.5 0 11-6.363-6.364l17.639-17.64a4.477 4.477 0 013.363-1.3 4.471 4.471 0 013.36 1.3l17.64 17.64a4.5 4.5 0 01-6.363 6.364L164.5 35.698V92z"/><text id="&lt;table&gt;" fill="#99C0C3" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="9" y="30">&lt;table&gt;</tspan></text><text id="&lt;td&gt;" fill="#CFCE95" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="36" y="136">&lt;td&gt;</tspan></text><text id="&lt;strong&gt;" fill="#E8C48E" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="35" y="181">&lt;strong&gt;</tspan></text><text id="event.target" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="271.746" y="181">event.target</tspan></text><path id="Line-30" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M229.5 177.5h30"/></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="369" height="216" viewBox="0 0 369 216"><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="bagua-bubble.svg"><path id="Rectangle-210" fill="#FFDE99" d="M202.488 140L217 186H103l14.512-46z"/><path id="Rectangle-209" stroke="#FFDE99" stroke-width="18" d="M216.634 81H102.366l-16.09 51h146.447l-16.09-51z"/><path id="Rectangle-208" stroke="#99C0C3" stroke-width="18" d="M236.014 29H82.986l-22.71 72h198.448l-22.71-72z"/><path id="Fill-46" fill="#5A4739" d="M164.5 123h-9v-13h9v13zm0 18v13.816a4.5 4.5 0 11-9 0V141h9zm0-49h-9V35.698l-10.138 10.137a4.5 4.5 0 11-6.363-6.364l17.639-17.64a4.477 4.477 0 013.363-1.3 4.471 4.471 0 013.36 1.3l17.64 17.64a4.5 4.5 0 01-6.363 6.364L164.5 35.698V92z"/><text id="&lt;table&gt;" fill="#99C0C3" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="9" y="30">&lt;table&gt;</tspan></text><text id="&lt;td&gt;" fill="#FFDE99" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="36" y="136">&lt;td&gt;</tspan></text><text id="&lt;strong&gt;" fill="#E8C48E" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="35" y="181">&lt;strong&gt;</tspan></text><text id="event.target" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="271.746" y="181">event.target</tspan></text><path id="Line-30" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M229.5 177.5h30"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Before After
Before After

2
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/style.css
View file

@ -6,7 +6,7 @@
} }
#child { #child {
background: #CFCE95; background: #FFDE99;
width: 50%; width: 50%;
height: 50%; height: 50%;
position: absolute; position: absolute;

2
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-bubble-nested.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="258" height="143" viewBox="0 0 258 143"><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><defs><filter id="filter-2" width="212.1%" height="203.6%" x="-52.6%" y="-43.3%" filterUnits="objectBoundingBox"><feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"/><feOffset dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/></filter><path id="path-1" d="M7.84 8.516l4.647-1.651L0 0l3.64 13.776 2.726-4.108 3.264 4.177 1.474-1.152z"/></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="mouseover-bubble-nested.svg"><path id="Rectangle-210" fill="#CFCE95" d="M184.47 57L200 119H78l15.53-62z"/><path id="Rectangle-209" stroke="#99C0C3" stroke-width="18" d="M207.628 30H70.372L50.167 96h177.666l-20.205-66z"/><path id="Fill-54" fill="#EE6B47" d="M109.435 50l-.683 3.884c-15.408-.725-31.056.348-45.752 3.22l5.647 7.733c12.417-2.427 25.638-3.334 38.656-2.721L106.62 66c7.56-2.333 26.38-5.03 26.38-5.03S118.836 53.132 109.435 50z" transform="rotate(33 98 58)"/><g id="Cursor-/-Default-White" transform="translate(122 81)"><g id="Rectangle-237"><use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/><path fill="#FFF" stroke="#000" stroke-opacity=".8" d="M8.662 8.755l3.144 4.025-2.262 1.767-3.145-4.025-2.958 4.459L-.78-1l14.484 7.963-5.041 1.792z"/></g></g><text id="mouseout" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="21" y="33">mouseout</tspan></text><text id="mouseover" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="144" y="81">mouseover</tspan></text><text id="#parent" fill="#99C0C3" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="4" y="18">#parent</tspan></text><text id="#child" fill="#CFCE95" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="4" y="124">#child</tspan></text><path id="Fill-46" fill="#5A4739" d="M124.709 37.276a2.456 2.456 0 000 3.452 2.404 2.404 0 003.42 0l5.452-5.499v40.33a2.43 2.43 0 002.42 2.441 2.43 2.43 0 002.418-2.441v-40.33l5.451 5.5a2.405 2.405 0 003.422 0c.944-.954.944-2.5 0-3.453l-9.485-9.569a2.392 2.392 0 00-1.807-.705 2.395 2.395 0 00-1.808.705l-9.483 9.569z"/></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="258" height="143" viewBox="0 0 258 143"><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><defs><filter id="filter-2" width="212.1%" height="203.6%" x="-52.6%" y="-43.3%" filterUnits="objectBoundingBox"><feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"/><feOffset dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/></filter><path id="path-1" d="M7.84 8.516l4.647-1.651L0 0l3.64 13.776 2.726-4.108 3.264 4.177 1.474-1.152z"/></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="mouseover-bubble-nested.svg"><path id="Rectangle-210" fill="#FFDE99" d="M184.47 57L200 119H78l15.53-62z"/><path id="Rectangle-209" stroke="#99C0C3" stroke-width="18" d="M207.628 30H70.372L50.167 96h177.666l-20.205-66z"/><path id="Fill-54" fill="#EE6B47" d="M109.435 50l-.683 3.884c-15.408-.725-31.056.348-45.752 3.22l5.647 7.733c12.417-2.427 25.638-3.334 38.656-2.721L106.62 66c7.56-2.333 26.38-5.03 26.38-5.03S118.836 53.132 109.435 50z" transform="rotate(33 98 58)"/><g id="Cursor-/-Default-White" transform="translate(122 81)"><g id="Rectangle-237"><use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/><path fill="#FFF" stroke="#000" stroke-opacity=".8" d="M8.662 8.755l3.144 4.025-2.262 1.767-3.145-4.025-2.958 4.459L-.78-1l14.484 7.963-5.041 1.792z"/></g></g><text id="mouseout" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="21" y="33">mouseout</tspan></text><text id="mouseover" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="144" y="81">mouseover</tspan></text><text id="#parent" fill="#99C0C3" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="4" y="18">#parent</tspan></text><text id="#child" fill="#FFDE99" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="4" y="124">#child</tspan></text><path id="Fill-46" fill="#5A4739" d="M124.709 37.276a2.456 2.456 0 000 3.452 2.404 2.404 0 003.42 0l5.452-5.499v40.33a2.43 2.43 0 002.42 2.441 2.43 2.43 0 002.418-2.441v-40.33l5.451 5.5a2.405 2.405 0 003.422 0c.944-.954.944-2.5 0-3.453l-9.485-9.569a2.392 2.392 0 00-1.807-.705 2.395 2.395 0 00-1.808.705l-9.483 9.569z"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

Before After
Before After

2
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="274" height="143" viewBox="0 0 274 143"><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><defs><filter id="filter-2" width="212.1%" height="203.6%" x="-52.6%" y="-43.3%" filterUnits="objectBoundingBox"><feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"/><feOffset dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/></filter><path id="path-1" d="M7.84 8.516l4.647-1.651L0 0l3.64 13.776 2.726-4.108 3.264 4.177 1.474-1.152z"/></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="mouseover-to-child.svg"><path id="Rectangle-210" fill="#CFCE95" d="M200.47 59L216 121H94l15.53-62z"/><path id="Rectangle-209" stroke="#99C0C3" stroke-width="18" d="M223.628 32H86.372L66.167 98h177.666l-20.205-66z"/><path id="Fill-54" fill="#EE6B47" d="M125.435 52l-.683 3.884c-15.408-.725-31.056.348-45.752 3.22l5.647 7.733c12.417-2.427 25.638-3.334 38.656-2.721L122.62 68c7.56-2.333 26.38-5.03 26.38-5.03S134.836 55.132 125.435 52z" transform="rotate(33 114 60)"/><g id="Cursor-/-Default-White" transform="translate(145 82)"><g id="Rectangle-237"><use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/><path fill="#FFF" stroke="#000" stroke-opacity=".8" d="M8.662 8.755l3.144 4.025-2.262 1.767-3.145-4.025-2.958 4.459L-.78-1l14.484 7.963-5.041 1.792z"/></g></g><text id="mouseout" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="80" y="37">mouseout</tspan></text><text id="mouseover" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="145" y="77">mouseover</tspan></text><text id="#parent" fill="#99C0C3" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="14" y="21">#parent</tspan></text><text id="#child" fill="#CFCE95" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="14" y="126">#child</tspan></text></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="274" height="143" viewBox="0 0 274 143"><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><defs><filter id="filter-2" width="212.1%" height="203.6%" x="-52.6%" y="-43.3%" filterUnits="objectBoundingBox"><feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"/><feOffset dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/></filter><path id="path-1" d="M7.84 8.516l4.647-1.651L0 0l3.64 13.776 2.726-4.108 3.264 4.177 1.474-1.152z"/></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="mouseover-to-child.svg"><path id="Rectangle-210" fill="#FFDE99" d="M200.47 59L216 121H94l15.53-62z"/><path id="Rectangle-209" stroke="#99C0C3" stroke-width="18" d="M223.628 32H86.372L66.167 98h177.666l-20.205-66z"/><path id="Fill-54" fill="#EE6B47" d="M125.435 52l-.683 3.884c-15.408-.725-31.056.348-45.752 3.22l5.647 7.733c12.417-2.427 25.638-3.334 38.656-2.721L122.62 68c7.56-2.333 26.38-5.03 26.38-5.03S134.836 55.132 125.435 52z" transform="rotate(33 114 60)"/><g id="Cursor-/-Default-White" transform="translate(145 82)"><g id="Rectangle-237"><use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/><path fill="#FFF" stroke="#000" stroke-opacity=".8" d="M8.662 8.755l3.144 4.025-2.262 1.767-3.145-4.025-2.958 4.459L-.78-1l14.484 7.963-5.041 1.792z"/></g></g><text id="mouseout" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="80" y="37">mouseout</tspan></text><text id="mouseover" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="145" y="77">mouseover</tspan></text><text id="#parent" fill="#99C0C3" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="14" y="21">#parent</tspan></text><text id="#child" fill="#FFDE99" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="14" y="126">#child</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

Before After
Before After

2
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-child.view/style.css
View file

@ -6,7 +6,7 @@
} }
#child { #child {
background: #CFCE95; background: #FFDE99;
width: 50%; width: 50%;
height: 50%; height: 50%;
position: absolute; position: absolute;

2
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/style.css
View file

@ -6,7 +6,7 @@
} }
#child { #child {
background: #CFCE95; background: #FFDE99;
width: 50%; width: 50%;
height: 50%; height: 50%;
position: absolute; position: absolute;

6
2-ui/4-forms-controls/1-form-elements/article.md
View file

@ -51,11 +51,13 @@ let form = document.forms[0];
let ageElems = form.elements.age; let ageElems = form.elements.age;
alert(ageElems[0].value); // 10, the first input value *!*
alert(ageElems[0].value); // 10, the value of the first input name="age"
*/!*
</script> </script>
``` ```
These navigation properties do not depend on the tag structure. All elements, no matter how deep they are in the form, are available in `form.elements`. These navigation properties do not depend on the tag structure. All control elements, no matter how deep they are in the form, are available in `form.elements`.
````smart header="Fieldsets as \"subforms\"" ````smart header="Fieldsets as \"subforms\""

BIN
figures.sketch
View file

Binary file not shown.