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

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-04-03 00:23:05 +03:00
parent 150d92f10f
commit 8f221d05c4
18 changed files with 227 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

1
1-js/2-first-steps/5-variables/variable-brown.svg
View file

@ -1 +0,0 @@
<svg width="148" height="128" viewBox="0 0 148 128" xmlns="http://www.w3.org/2000/svg"><title>noun_1211_cc + Message</title><desc>Created with Sketch.</desc><g fill="none" fill-rule="evenodd"><path d="M17 37.196h112.558v42.95c0 .373-.08.862-.28 1.294-.2.433-16.573 35.56-16.573 35.56V62.64l16.854-25.444L148 9H35.44L17 37.196zM17 66V38L2 66" fill="#D1C4B1"/><path d="M33.91.395l54.505 58.45L70.09 75.93 15.584 17.484 33.91.394z" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"/><text transform="matrix(.682 .731 -.731 .682 15 0)" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="10.393" y="46.282">&amp;quot;Hello!&amp;quot;</tspan></text><path d="M0 68v54.73c0 3.42 1.484 5.27 4.387 5.27h100.086c3.122 0 5.527-2.548 5.527-3.476V68H0z" fill="#D1C4B1"/><text font-family="Open Sans" font-size="18" font-weight="526" fill="#fff" transform="translate(-161 -71) translate(161 71)"><tspan x="17" y="105">Message</tspan></text></g></svg>
Side by side

Before

Width:  |  Height:  |  Size: 965 B

1
1-js/2-first-steps/5-variables/variable-gray.svg
View file

@ -1 +0,0 @@
<svg width="148" height="128" viewBox="0 0 148 128" xmlns="http://www.w3.org/2000/svg"><title>noun_1211_cc + Message</title><desc>Created with Sketch.</desc><g fill="none" fill-rule="evenodd"><path d="M17 37.196h112.558v42.95c0 .373-.08.862-.28 1.294-.2.433-16.573 35.56-16.573 35.56V62.64l16.854-25.444L148 9H35.44L17 37.196zM17 66V38L2 66" fill="#C7C7C7"/><path d="M33.91.395l54.505 58.45L70.09 75.93 15.584 17.484 33.91.394z" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"/><text transform="matrix(.682 .731 -.731 .682 15 0)" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="10.393" y="46.282">&amp;quot;Hello!&amp;quot;</tspan></text><path d="M0 68v54.73c0 3.42 1.484 5.27 4.387 5.27h100.086c3.122 0 5.527-2.548 5.527-3.476V68H0z" fill="#C7C7C7"/><text font-family="Open Sans" font-size="18" font-weight="526" fill="#fff" transform="translate(-161 -71) translate(161 71)"><tspan x="17" y="105">Message</tspan></text></g></svg>
Side by side

Before

Width:  |  Height:  |  Size: 965 B

1
1-js/2-first-steps/5-variables/variable-green.svg
View file

@ -1 +0,0 @@
<svg width="148" height="128" viewBox="0 0 148 128" xmlns="http://www.w3.org/2000/svg"><title>noun_1211_cc + Message</title><desc>Created with Sketch.</desc><g fill="none" fill-rule="evenodd"><path d="M17 37.196h112.558v42.95c0 .373-.08.862-.28 1.294-.2.433-16.573 35.56-16.573 35.56V62.64l16.854-25.444L148 9H35.44L17 37.196zM17 66V38L2 66" fill="#CFCE95"/><path d="M33.91.395l54.505 58.45L70.09 75.93 15.584 17.484 33.91.394z" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"/><text transform="matrix(.682 .731 -.731 .682 15 0)" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="10.393" y="46.282">&amp;quot;Hello!&amp;quot;</tspan></text><path d="M0 68v54.73c0 3.42 1.484 5.27 4.387 5.27h100.086c3.122 0 5.527-2.548 5.527-3.476V68H0z" fill="#CFCE95"/><text font-family="Open Sans" font-size="18" font-weight="526" fill="#fff" transform="translate(-161 -71) translate(161 71)"><tspan x="17" y="105">Message</tspan></text></g></svg>
Side by side

Before

Width:  |  Height:  |  Size: 965 B

2
2-ui/1-document/1-browser-environment/article.md
View file

@ -9,7 +9,7 @@
На рисунке ниже схематически отображена структура, которая получается если посмотреть на совокупность браузерных объектов с "высоты птичьего полёта".
<img src="windowObjects.png">
<img src="windowObjects.svg">
Как видно из рисунка, на вершине стоит `window`.

BIN
2-ui/1-document/1-browser-environment/windowObjects.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.1 KiB

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

@ -0,0 +1,76 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="354px" height="308px" viewBox="0 0 354 308" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>windowObjects.svg</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="windowObjects.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="135" y="9" width="80" height="30"></rect>
<text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#707175">
<tspan x="152" y="28">window</tspan>
</text>
<rect id="Rectangle-2" stroke="#CFCE95" stroke-width="2" fill="#F5F5D9" sketch:type="MSShapeGroup" x="17" y="79" width="80" height="28"></rect>
<rect id="Rectangle-2" stroke="#C74A6C" stroke-width="2" fill="#FCDFE1" sketch:type="MSShapeGroup" x="254" y="117" width="80" height="28"></rect>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EEFDFE" sketch:type="MSShapeGroup" x="109" y="269" width="134" height="28"></rect>
<text id="document" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#727155">
<tspan x="26" y="97">document</tspan>
</text>
<rect id="Rectangle-2" stroke="#C74A6C" stroke-width="2" fill="#FCDFE1" sketch:type="MSShapeGroup" x="254" y="79" width="80" height="28"></rect>
<text id="Object" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#924565">
<tspan x="271.408203" y="97">Object</tspan>
</text>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EEFDFE" sketch:type="MSShapeGroup" x="134" y="79" width="80" height="28"></rect>
<text id="navigator" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#366378">
<tspan x="139.862305" y="97">navigator</tspan>
</text>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EEFDFE" sketch:type="MSShapeGroup" x="134" y="117" width="80" height="28"></rect>
<text id="screen" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#366378">
<tspan x="151.408203" y="135">screen</tspan>
</text>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EEFDFE" sketch:type="MSShapeGroup" x="134" y="155" width="80" height="28"></rect>
<text id="location" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#366378">
<tspan x="143.710938" y="173">location</tspan>
</text>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EEFDFE" sketch:type="MSShapeGroup" x="134" y="193" width="80" height="28"></rect>
<text id="frames" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#366378">
<tspan x="151.408203" y="211">frames</tspan>
</text>
<rect id="Rectangle-2" stroke="#99C0C3" stroke-width="2" fill="#EEFDFE" sketch:type="MSShapeGroup" x="134" y="231" width="80" height="28"></rect>
<text id="history" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#366378">
<tspan x="147.55957" y="249">history</tspan>
</text>
<text id="Array" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#924565">
<tspan x="275.256836" y="135">Array</tspan>
</text>
<rect id="Rectangle-3" stroke="#C74A6C" stroke-width="2" fill="#FCDFE1" sketch:type="MSShapeGroup" x="254" y="155" width="80" height="28"></rect>
<text id="Function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#924565">
<tspan x="263.710938" y="173">Function</tspan>
</text>
<text id="XMLHttpRequest" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#366378">
<tspan x="122.119141" y="287">XMLHttpRequest</tspan>
</text>
<text id="BOM" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#99C0C3">
<tspan x="135" y="73">BOM</tspan>
</text>
<text id="JavaScript" sketch:type="MSTextLayer" font-family="Consolas" font-size="10" font-weight="normal" fill="#C74A6C">
<tspan x="280" y="71">JavaScript</tspan>
</text>
<text id="DOM" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#CFCE95">
<tspan x="17" y="73">DOM</tspan>
</text>
<path d="M174.5,41.5 L174.5,72.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M174.5,72.5 C175.55,68.72 176.45,65.48 177.5,61.7 C175.4,61.7 173.6,61.7 171.5,61.7 C172.55,65.48 173.45,68.72 174.5,72.5 C174.5,72.5 174.5,72.5 174.5,72.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M132.5,41.5 L86.5,73.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-2-decoration-1" d="M86.5293087,73.4796113 C90.2319481,72.182938 93.405639,71.0715038 97.1082783,69.7748305 C95.9090429,68.0509295 94.8811268,66.5733002 93.6818914,64.8493993 C91.1784875,67.8699735 89.0327127,70.4590371 86.5293087,73.4796113 C86.5293087,73.4796113 86.5293087,73.4796113 86.5293087,73.4796113 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M263.5,41.5 L217.5,73.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(240.500000, 57.500000) scale(-1, 1) translate(-240.500000, -57.500000) "></path>
<path id="Line-3-decoration-1" d="M217.529309,73.4796113 C221.231948,72.182938 224.405639,71.0715038 228.108278,69.7748305 C226.909043,68.0509295 225.881127,66.5733002 224.681891,64.8493993 C222.178487,67.8699735 220.032713,70.4590371 217.529309,73.4796113 C217.529309,73.4796113 217.529309,73.4796113 217.529309,73.4796113 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="…" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#727155">
<tspan x="50" y="122">…</tspan>
</text>
<text id="…-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#924565">
<tspan x="287" y="201">…</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.9 KiB

32
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1.svg Normal file
View file

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="488px" height="246px" viewBox="0 0 488 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>carousel1.svg</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="carousel1.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="40" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="108" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="176" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="244" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="312" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="380" y="97" width="66" height="66" rx="10"></rect>
<text id="…-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="406" y="131">…</tspan>
</text>
<rect id="Rectangle-24" stroke="#EE6B47" stroke-width="2" sketch:type="MSShapeGroup" x="39" y="96" width="410" height="68"></rect>
<path d="M244,59 L244,196 L36,196 L36,59 L244,59 Z M19,42 L261,42 L261,213 L19,213 L19,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="div-(контейнер)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="82.5" y="32">div (контейнер)</tspan>
</text>
<text id="130x130" sketch:type="MSTextLayer" font-family="Consolas" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="48" y="133">130x130</tspan>
</text>
<text id="ul-(width:-9999px)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="71.5" y="82">ul (width: 9999px)</tspan>
</text>
<rect id="Rectangle-36" fill="#FFFFFF" sketch:type="MSShapeGroup" x="447" y="90" width="16" height="84"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.3 KiB

34
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2.svg Normal file
View file

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="639px" height="246px" viewBox="0 0 639 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>carousel2.svg</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="carousel2.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="40" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="108" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="176" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="244" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="312" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="380" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-26" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="448" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-25" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="516" y="97" width="66" height="66" rx="10"></rect>
<text id="…-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="542" y="131">…</tspan>
</text>
<rect id="Rectangle-24" stroke="#EE6B47" stroke-width="2" sketch:type="MSShapeGroup" x="39" y="96" width="544" height="68"></rect>
<path d="M450,59 L450,196 L242,196 L242,59 L450,59 Z M225,42 L467,42 L467,213 L225,213 L225,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="div-(контейнер)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="288.5" y="32">div (контейнер)</tspan>
</text>
<text id="130x130" sketch:type="MSTextLayer" font-family="Consolas" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="252" y="133">130x130</tspan>
</text>
<text id="ul-(margin-left:--35" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="254.5" y="82">ul (margin-left: -350px)</tspan>
</text>
<rect id="Rectangle-36" fill="#FFFFFF" sketch:type="MSShapeGroup" x="582" y="83" width="16" height="84"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

6
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.md
View file

@ -2,7 +2,7 @@
Нужно расположить его внутри `<div>` фиксированного размера, так чтобы в один момент была видна только нужная часть списка:
<img src="carousel1.png">
<img src="carousel1.svg">
Чтобы список был длинный и элементы не переходили вниз, ему ставится `width: 9999px`, а элементам `<li>`, соответственно, `float:left`, либо для элементов используется `display: inline-block`, как в этом решении.
@ -10,9 +10,9 @@
В частности, для `<img>` нужно поставить в стилях явно `display:block`, чтобы пространства под ними не оставалось.
Для "прокрутки" будем сдвигать `<ul>`. Это можно делать по-разному, например, назначением `margin-left`:
Для "прокрутки" будем сдвигать `<ul>`. Это можно делать по-разному, например, назначением CSS-свойства `transform: translateX()` или `margin-left`:
<img src="carousel2.png">
<img src="carousel2.svg">
У внешнего `<div>` фиксированная ширина, поэтому "лишние" изображения обрезаются.

2
6-optimize/1-memory-leaks/article.md
View file

@ -164,7 +164,7 @@ function leak() {
Посмотрим, какая структура памяти создается при каждом запуске:
<img src="xhr.png">
<img src="leak-xhr.svg">
Когда запускается асинхронный запрос `xhr`, браузер создаёт специальную внутреннюю ссылку (internal reference) на этот объект. находится в процессе коммуникации. Именно поэтому объект `xhr` будет жив после окончания работы функции.

37
6-optimize/1-memory-leaks/leak-xhr-2.svg Normal file
View file

@ -0,0 +1,37 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="488px" height="246px" viewBox="0 0 488 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>leak-xhr-2.svg</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="leak-xhr-2.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-2" stroke="#CFCE95" stroke-width="2" fill="#F5F5D9" sketch:type="MSShapeGroup" x="50" y="39" width="117" height="38"></rect>
<rect id="Rectangle-2" stroke="#C74A6C" stroke-width="2" fill="#FCDFE1" sketch:type="MSShapeGroup" x="331" y="39" width="117" height="38"></rect>
<rect id="Rectangle-2" stroke="#C74A6C" stroke-width="2" fill="#FCDFE1" sketch:type="MSShapeGroup" x="50" y="167" width="398" height="38"></rect>
<text id="xhr" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#727155">
<tspan x="97" y="63">xhr</tspan>
</text>
<text id="function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#727155">
<tspan x="359.210938" y="63">function</tspan>
</text>
<text id="LexicalEnvironment" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#924565">
<tspan x="180.224609" y="190">LexicalEnvironment</tspan>
</text>
<path d="M110.5,93.5 L110.5,144.5" id="Line" stroke="#B8BAC1" stroke-width="2" stroke-linecap="square" fill="#B8BAC1" sketch:type="MSShapeGroup" transform="translate(110.500000, 119.000000) scale(1, -1) translate(-110.500000, -119.000000) "></path>
<path id="Line-decoration-1" d="M110.5,144.5 C111.55,140.72 112.45,137.48 113.5,133.7 C111.4,133.7 109.6,133.7 107.5,133.7 C108.55,137.48 109.45,140.72 110.5,144.5 C110.5,144.5 110.5,144.5 110.5,144.5 Z" stroke="#B8BAC1" stroke-width="2" stroke-linecap="square" fill="#B8BAC1"></path>
<path d="M187,61 L311.169243,61" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M311,61 C307.22,59.95 303.98,59.05 300.2,58 C300.2,60.1 300.2,61.9 300.2,64 C303.98,62.95 307.22,62.05 311,61 C311,61 311,61 311,61 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M381.5,113.5 L381.5,144.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M381.5,144.5 C382.55,140.72 383.45,137.48 384.5,133.7 C382.4,133.7 380.6,133.7 378.5,133.7 C379.55,137.48 380.45,140.72 381.5,144.5 C381.5,144.5 381.5,144.5 381.5,144.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="onreadystatechange" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="181.5" y="48">onreadystatechange</tspan>
</text>
<text id="[[Scope]]" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="346" y="102">[[Scope]]</tspan>
</text>
<path d="M99.5,110.5 L122.845236,133.845236" id="Line" stroke="#CB1E31" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M122,110.5 L98.6547642,133.845236" id="Line-2" stroke="#CB1E31" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

43
6-optimize/1-memory-leaks/leak-xhr.svg Normal file
View file

@ -0,0 +1,43 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="488px" height="308px" viewBox="0 0 488 308" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>leak-xhr.svg</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="leak-xhr.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-2" stroke="#CFCE95" stroke-width="2" fill="#F5F5D9" sketch:type="MSShapeGroup" x="50" y="101" width="117" height="38"></rect>
<rect id="Rectangle-2" stroke="#C74A6C" stroke-width="2" fill="#FCDFE1" sketch:type="MSShapeGroup" x="331" y="101" width="117" height="38"></rect>
<rect id="Rectangle-2" stroke="#C74A6C" stroke-width="2" fill="#FCDFE1" sketch:type="MSShapeGroup" x="50" y="229" width="398" height="38"></rect>
<text id="xhr" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#727155">
<tspan x="97" y="125">xhr</tspan>
</text>
<text id="function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#727155">
<tspan x="359.210938" y="125">function</tspan>
</text>
<text id="LexicalEnvironment" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" sketch:alignment="middle" fill="#924565">
<tspan x="180.224609" y="252">LexicalEnvironment</tspan>
</text>
<path d="M110.5,154.5 L110.5,185.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(110.500000, 170.000000) scale(1, -1) translate(-110.500000, -170.000000) "></path>
<path id="Line-decoration-1" d="M110.5,185.5 C111.55,181.72 112.45,178.48 113.5,174.7 C111.4,174.7 109.6,174.7 107.5,174.7 C108.55,178.48 109.45,181.72 110.5,185.5 C110.5,185.5 110.5,185.5 110.5,185.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M187,123 L311.169243,123" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M311,123 C307.22,121.95 303.98,121.05 300.2,120 C300.2,122.1 300.2,123.9 300.2,126 C303.98,124.95 307.22,124.05 311,123 C311,123 311,123 311,123 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M381.5,175.5 L381.5,206.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M381.5,206.5 C382.55,202.72 383.45,199.48 384.5,195.7 C382.4,195.7 380.6,195.7 378.5,195.7 C379.55,199.48 380.45,202.72 381.5,206.5 C381.5,206.5 381.5,206.5 381.5,206.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M112.5,46.5 L112.5,77.5" id="Line" stroke="#8A704D" stroke-width="2" stroke-linecap="square" fill="#8A704D" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M112.5,77.5 C113.55,73.72 114.45,70.48 115.5,66.7 C113.4,66.7 111.6,66.7 109.5,66.7 C110.55,70.48 111.45,73.72 112.5,77.5 C112.5,77.5 112.5,77.5 112.5,77.5 Z" stroke="#8A704D" stroke-width="2" stroke-linecap="square" fill="#8A704D"></path>
<text id="property" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="78" y="208">property</tspan>
</text>
<text id="onreadystatechange" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="181.5" y="110">onreadystatechange</tspan>
</text>
<text id="internal-reference" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="39" y="31">internal reference</tspan>
</text>
<text id="[[Scope]]" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="346" y="164">[[Scope]]</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
6-optimize/1-memory-leaks/xhr.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.4 KiB

BIN
6-optimize/1-memory-leaks/xhr2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.6 KiB

BIN
changes.sketch
View file

Binary file not shown.

BIN
figures.sketch
View file

Binary file not shown.