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-02-02 00:49:12 +03:00
parent 8868e87ced
commit 4734796ca0
57 changed files with 998 additions and 749 deletions
Download patch file Download diff file Expand all files Collapse all files

94
1-js/1-getting-started/1-intro/limitations.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Before After
Before After

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

@ -1,34 +1,37 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="392px" height="192px" viewBox="0 0 392 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="392px" height="192px" viewBox="0 0 392 192" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>variable-change.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-change">
<g id="noun_1211_cc" transform="translate(52.000000, -5.000000)">
<path d="M25,94.1960457 L137.557785,94.1960457 L137.557785,137.145664 C137.557785,137.518573 137.479295,138.008386 137.279367,138.440486 C137.07944,138.872587 120.704625,174 120.704625,174 L120.704625,119.63967 L137.559266,94.1960457 L156,66 L43.4407339,66 L25,94.1960457 L25,94.1960457 Z" id="Shape" fill="#E8C48F"></path>
<path d="M25,123 L25,95 L10,123" id="Shape" fill="#E8C48F"></path>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="variable-change.svg" sketch:type="MSArtboardGroup">
<g id="noun_1211_cc" sketch:type="MSLayerGroup" transform="translate(52.000000, -5.000000)">
<path d="M25,94.1960457 L137.557785,94.1960457 L137.557785,137.145664 C137.557785,137.518573 137.479295,138.008386 137.279367,138.440486 C137.07944,138.872587 120.704625,174 120.704625,174 L120.704625,119.63967 L137.559266,94.1960457 L156,66 L43.4407339,66 L25,94.1960457 L25,94.1960457 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M25,123 L25,95 L10,123" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(0.000000, 57.000000)">
<path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;World!&quot;" transform="translate(39.885486, 40.782373) rotate(47.000000) translate(-39.885486, -40.782373) " font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path>
<text id="&quot;World!&quot;" sketch:type="MSTextLayer" transform="translate(39.885486, 40.782373) rotate(47.000000) translate(-39.885486, -40.782373) " font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<tspan x="10.392998" y="46.2823729">"World!"</tspan>
</text>
</g>
<g id="Rectangle-5-+-&quot;World!&quot;-2" transform="translate(139.643781, 49.254803) rotate(293.000000) translate(-139.643781, -49.254803) translate(102.643781, 11.254803)">
<path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;Hello!&quot;" transform="translate(39.885486, 40.782373) rotate(47.000000) translate(-39.885486, -40.782373) " font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path>
<text id="&quot;Hello!&quot;" sketch:type="MSTextLayer" transform="translate(39.885486, 40.782373) rotate(47.000000) translate(-39.885486, -40.782373) " font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<tspan x="10.392998" y="46.2823729">"Hello!"</tspan>
</text>
</g>
<path d="M8,125 L8,179.729971 C8,183.150501 9.4836395,185 12.387122,185 L112.473443,185 C115.59502,185 118,182.4521 118,181.524372 L118,125 L8,125 L8,125 Z" id="Shape" fill="#E8C48F"></path>
<path d="M8,125 L8,179.729971 C8,183.150501 9.4836395,185 12.387122,185 L112.473443,185 C115.59502,185 118,182.4521 118,181.524372 L118,125 L8,125 L8,125 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
</g>
<text id="Message" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<text id="Message" sketch:type="MSTextLayer" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<tspan x="77" y="157">Message</tspan>
</text>
<path d="M58.1116321,51.8083441 C58.1116321,51.8083441 47.657459,40.6232618 40.718887,36.1553077 C40.5505125,38.0030849 40.3826205,39.8498971 40.2142461,41.6967094 C28.8419738,40.6618577 17.2921606,42.1936311 6.44527455,46.2920298 C7.83472576,49.9697335 9.22417698,53.6469547 10.6136282,57.324176 C19.7782168,53.8616442 29.5366994,52.5677178 39.1451405,53.4419142 C38.9767661,55.2896913 38.8083916,57.1365036 38.6404996,58.9837982 C44.221462,55.6553872 58.1116321,51.8083441 58.1116321,51.8083441" id="Fill-54" fill="#E8C48F" transform="translate(32.278453, 47.569553) rotate(11.000000) translate(-32.278453, -47.569553) "></path>
<path d="M287.796688,28.1860236 C287.796688,28.1860236 277.342515,17.0009413 270.403943,12.5329872 C270.235568,14.3807644 270.067676,16.2275766 269.899302,18.0743889 C258.527029,17.0395372 246.977216,18.5713106 236.13033,22.6697093 C237.519781,26.347413 238.909232,30.0246342 240.298684,33.7018555 C249.463272,30.2393237 259.221755,28.9453973 268.830196,29.8195937 C268.661822,31.6673708 268.493447,33.5141831 268.325555,35.3614778 C273.906517,32.0330667 287.796688,28.1860236 287.796688,28.1860236" id="Fill-54" fill="#E8C48F" transform="translate(261.963509, 23.947232) rotate(2.000000) translate(-261.963509, -23.947232) "></path>
<g id="noun_48910_cc" transform="translate(298.000000, 5.000000)">
<path d="M50.9827143,6 L36.0161055,6 C35.4567164,6 35,6.62621359 35,7.39482201 L35,12 L52,12 L52,7.39482201 C52,6.62621359 51.5432836,6 50.9827143,6 L50.9827143,6 Z" id="Shape"></path>
<path d="M84.1925988,9.36030059 L57.803165,9.36030059 L57.803165,6.08482838 C57.803165,2.72879291 54.9894635,0 51.5275421,0 L36.4712707,0 C33.0105365,0 30.1956478,2.72879291 30.1956478,6.08482838 L30.1956478,9.36030059 L3.80740121,9.36030059 C1.70484195,9.36030059 0,11.0118475 0,13.0500982 L0,13.3102024 C0,15.348453 1.70484195,17 3.80740121,17 L84.1925988,17 C86.295158,17 88,15.348453 88,13.3102024 L88,13.0500982 C88,11.0118475 86.2939708,9.36030059 84.1925988,9.36030059 L84.1925988,9.36030059 Z M53,12 L36,12 L36,7.39482201 C36,6.62621359 36.4567164,6 37.0161055,6 L51.9838945,6 C52.5444637,6 53,6.62621359 53,7.39482201 L53,12 L53,12 Z" id="Shape" fill="#E8C48F"></path>
<path d="M74.9552359,20.0447289 L8.04358113,20.0447289 C4.15387761,20.0447289 1,19.3642794 1,23.3113665 L6.28209435,101.692668 C6.28209435,105.636155 9.43715496,109 13.3268585,109 L69.6743245,109 C73.564028,109 76.7179057,105.636155 76.7179057,101.692668 L82,23.3113665 C81.998817,19.3642794 78.8449394,20.0447289 74.9552359,20.0447289 L74.9552359,20.0447289 Z M26.7566501,98.9987039 C25.4744903,99.0375373 24.4044574,98.1989795 24.361495,97.1213538 L22.0012467,36.0255616 C21.9596269,34.947936 22.9652161,34.0414198 24.2433483,34.0013729 C25.5255081,33.961326 26.595541,34.8023109 26.6385035,35.8799365 L28.9987517,96.9757287 C29.0403715,98.0521408 28.0361248,98.9598706 26.7566501,98.9987039 L26.7566501,98.9987039 Z M43,97.0485689 C43,98.1255551 42.328125,99 41.5,99 C40.671875,99 40,98.1243423 40,97.0485689 L40,35.9514311 C40,34.8732321 40.671875,34 41.5,34 C42.328125,34 43,34.8732321 43,35.9514311 L43,97.0485689 L43,97.0485689 Z M61.6385051,97.1213889 C61.5968852,98.1989944 60.5255097,99.0375366 59.2433499,98.9987039 C57.9638752,98.9598713 56.9596285,98.0521585 57.0012483,96.974553 L59.3614965,35.8799014 C59.4031164,34.8022959 60.4731493,33.9613267 61.7553091,34.0013729 C63.0347839,34.0426325 64.0403731,34.9479183 63.9987533,36.0255238 L61.6385051,97.1213889 L61.6385051,97.1213889 Z" id="Shape" fill="#E8C48F"></path>
<path d="M58.1116321,51.8083441 C58.1116321,51.8083441 47.657459,40.6232618 40.718887,36.1553077 C40.5505125,38.0030849 40.3826205,39.8498971 40.2142461,41.6967094 C28.8419738,40.6618577 17.2921606,42.1936311 6.44527455,46.2920298 C7.83472576,49.9697335 9.22417698,53.6469547 10.6136282,57.324176 C19.7782168,53.8616442 29.5366994,52.5677178 39.1451405,53.4419142 C38.9767661,55.2896913 38.8083916,57.1365036 38.6404996,58.9837982 C44.221462,55.6553872 58.1116321,51.8083441 58.1116321,51.8083441" id="Fill-54" fill="#E8C48F" sketch:type="MSShapeGroup" transform="translate(32.278453, 47.569553) rotate(11.000000) translate(-32.278453, -47.569553) "></path>
<path d="M287.796688,28.1860236 C287.796688,28.1860236 277.342515,17.0009413 270.403943,12.5329872 C270.235568,14.3807644 270.067676,16.2275766 269.899302,18.0743889 C258.527029,17.0395372 246.977216,18.5713106 236.13033,22.6697093 C237.519781,26.347413 238.909232,30.0246342 240.298684,33.7018555 C249.463272,30.2393237 259.221755,28.9453973 268.830196,29.8195937 C268.661822,31.6673708 268.493447,33.5141831 268.325555,35.3614778 C273.906517,32.0330667 287.796688,28.1860236 287.796688,28.1860236" id="Fill-54" fill="#E8C48F" sketch:type="MSShapeGroup" transform="translate(261.963509, 23.947232) rotate(2.000000) translate(-261.963509, -23.947232) "></path>
<g id="noun_48910_cc" sketch:type="MSLayerGroup" transform="translate(298.000000, 5.000000)">
<path d="M50.9827143,6 L36.0161055,6 C35.4567164,6 35,6.62621359 35,7.39482201 L35,12 L52,12 L52,7.39482201 C52,6.62621359 51.5432836,6 50.9827143,6 L50.9827143,6 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M84.1925988,9.36030059 L57.803165,9.36030059 L57.803165,6.08482838 C57.803165,2.72879291 54.9894635,0 51.5275421,0 L36.4712707,0 C33.0105365,0 30.1956478,2.72879291 30.1956478,6.08482838 L30.1956478,9.36030059 L3.80740121,9.36030059 C1.70484195,9.36030059 0,11.0118475 0,13.0500982 L0,13.3102024 C0,15.348453 1.70484195,17 3.80740121,17 L84.1925988,17 C86.295158,17 88,15.348453 88,13.3102024 L88,13.0500982 C88,11.0118475 86.2939708,9.36030059 84.1925988,9.36030059 L84.1925988,9.36030059 Z M53,12 L36,12 L36,7.39482201 C36,6.62621359 36.4567164,6 37.0161055,6 L51.9838945,6 C52.5444637,6 53,6.62621359 53,7.39482201 L53,12 L53,12 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M74.9552359,20.0447289 L8.04358113,20.0447289 C4.15387761,20.0447289 1,19.3642794 1,23.3113665 L6.28209435,101.692668 C6.28209435,105.636155 9.43715496,109 13.3268585,109 L69.6743245,109 C73.564028,109 76.7179057,105.636155 76.7179057,101.692668 L82,23.3113665 C81.998817,19.3642794 78.8449394,20.0447289 74.9552359,20.0447289 L74.9552359,20.0447289 Z M26.7566501,98.9987039 C25.4744903,99.0375373 24.4044574,98.1989795 24.361495,97.1213538 L22.0012467,36.0255616 C21.9596269,34.947936 22.9652161,34.0414198 24.2433483,34.0013729 C25.5255081,33.961326 26.595541,34.8023109 26.6385035,35.8799365 L28.9987517,96.9757287 C29.0403715,98.0521408 28.0361248,98.9598706 26.7566501,98.9987039 L26.7566501,98.9987039 Z M43,97.0485689 C43,98.1255551 42.328125,99 41.5,99 C40.671875,99 40,98.1243423 40,97.0485689 L40,35.9514311 C40,34.8732321 40.671875,34 41.5,34 C42.328125,34 43,34.8732321 43,35.9514311 L43,97.0485689 L43,97.0485689 Z M61.6385051,97.1213889 C61.5968852,98.1989944 60.5255097,99.0375366 59.2433499,98.9987039 C57.9638752,98.9598713 56.9596285,98.0521585 57.0012483,96.974553 L59.3614965,35.8799014 C59.4031164,34.8022959 60.4731493,33.9613267 61.7553091,34.0013729 C63.0347839,34.0426325 64.0403731,34.9479183 63.9987533,36.0255238 L61.6385051,97.1213889 L61.6385051,97.1213889 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

Before After
Before After

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

@ -1,21 +1,24 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="166px" height="145px" viewBox="0 0 166 145" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="166px" height="145px" viewBox="0 0 166 145" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>variable.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable">
<g id="noun_1211_cc-+-Message" transform="translate(13.000000, 3.000000)">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="variable.svg" sketch:type="MSArtboardGroup">
<g id="noun_1211_cc-+-Message" sketch:type="MSLayerGroup" transform="translate(13.000000, 3.000000)">
<g id="noun_1211_cc">
<path d="M17,37.1960457 L129.557785,37.1960457 L129.557785,80.1456641 C129.557785,80.5185728 129.479295,81.0083855 129.279367,81.4404861 C129.07944,81.8725868 112.704625,117 112.704625,117 L112.704625,62.6396695 L129.559266,37.1960457 L148,9 L35.4407339,9 L17,37.1960457 L17,37.1960457 Z" id="Shape" fill="#E8C48F"></path>
<path d="M17,66 L17,38 L2,66" id="Shape" fill="#E8C48F"></path>
<path d="M17,37.1960457 L129.557785,37.1960457 L129.557785,80.1456641 C129.557785,80.5185728 129.479295,81.0083855 129.279367,81.4404861 C129.07944,81.8725868 112.704625,117 112.704625,117 L112.704625,62.6396695 L129.559266,37.1960457 L148,9 L35.4407339,9 L17,37.1960457 L17,37.1960457 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M17,66 L17,38 L2,66" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)">
<path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;Hello!&quot;" transform="translate(39.885486, 40.782373) rotate(47.000000) translate(-39.885486, -40.782373) " font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path>
<text id="&quot;Hello!&quot;" sketch:type="MSTextLayer" transform="translate(39.885486, 40.782373) rotate(47.000000) translate(-39.885486, -40.782373) " font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<tspan x="10.392998" y="46.2823729">"Hello!"</tspan>
</text>
</g>
<path d="M0,68 L0,122.729971 C0,126.150501 1.4836395,128 4.38712201,128 L104.473443,128 C107.59502,128 110,125.4521 110,124.524372 L110,68 L0,68 L0,68 Z" id="Shape" fill="#E8C48F"></path>
<path d="M0,68 L0,122.729971 C0,126.150501 1.4836395,128 4.38712201,128 L104.473443,128 C107.59502,128 110,125.4521 110,124.524372 L110,68 L0,68 L0,68 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
</g>
<text id="Message" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<text id="Message" sketch:type="MSTextLayer" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<tspan x="17" y="105">Message</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before After
Before After

77
1-js/3-writing-js/2-coding-style/code-style.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 124 KiB

After

Width:  |  Height:  |  Size: 126 KiB

Before After
Before After

33
1-js/3-writing-js/2-coding-style/figure-bracket-style.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 72 KiB

Before After
Before After

19
1-js/4-data-structures/4-object/object-person-1.svg
View file

@ -1,15 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="125px" height="165px" viewBox="0 0 125 165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="125px" height="165px" viewBox="0 0 125 165" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>object-person-1.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-person-1">
<path d="M113.73776,8.35434 L10.26472,8.35434 C8.22368,8.35434 6.56952,9.43488 6.56952,10.76814 L6.56952,151.23186 C6.56952,152.56512 8.22368,153.64566 10.26472,153.64566 L113.73776,153.64566 C115.7788,153.64566 117.43296,152.56512 117.43296,151.23186 L117.43296,10.76814 C117.43296,9.43488 115.7788,8.35434 113.73776,8.35434 L113.73776,8.35434 Z M107.7312,147.35434 L16.2688,147.35434 L16.2688,85.8023 L107.7312,85.8023 L107.7312,147.35434 L107.7312,147.35434 Z M107.7312,76.43266 L16.2688,76.43266 L16.2688,14.88062 L107.7312,14.88062 L107.7312,76.43266 L107.7312,76.43266 Z" id="Shape" fill="#E8C48F"></path>
<path d="M75.34488,19.44254 L71.58024,19.44254 L71.58024,24.96674 C71.58024,25.40252 71.03712,25.75568 70.36752,25.75568 L53.39192,25.75568 C52.72232,25.75568 52.1792,25.40252 52.1792,24.96674 L52.1792,19.44254 L48.6576,19.44254 C47.99048,19.44254 47.44984,19.79246 47.44984,20.225 L47.44984,28.12898 C47.44984,28.56152 47.99048,28.91144 48.6576,28.91144 L75.34488,28.91144 C76.012,28.91144 76.55264,28.56152 76.55264,28.12898 L76.55264,20.225 C76.55264,19.79246 76.00952,19.44254 75.34488,19.44254 L75.34488,19.44254 Z" id="Shape" fill="#E8C48F"></path>
<path d="M75.34488,91.44254 L71.58024,91.44254 L71.58024,96.96674 C71.58024,97.40252 71.03712,97.75568 70.36752,97.75568 L53.39192,97.75568 C52.72232,97.75568 52.1792,97.40252 52.1792,96.96674 L52.1792,91.44254 L48.6576,91.44254 C47.99048,91.44254 47.44984,91.79246 47.44984,92.225 L47.44984,100.12898 C47.44984,100.56152 47.99048,100.91144 48.6576,100.91144 L75.34488,100.91144 C76.012,100.91144 76.55264,100.56152 76.55264,100.12898 L76.55264,92.225 C76.55264,91.79246 76.00952,91.44254 75.34488,91.44254 L75.34488,91.44254 Z" id="Shape-2" fill="#E8C48F"></path>
<text id="name" font-family="Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="object-person-1.svg" sketch:type="MSArtboardGroup">
<path d="M113.73776,8.35434 L10.26472,8.35434 C8.22368,8.35434 6.56952,9.43488 6.56952,10.76814 L6.56952,151.23186 C6.56952,152.56512 8.22368,153.64566 10.26472,153.64566 L113.73776,153.64566 C115.7788,153.64566 117.43296,152.56512 117.43296,151.23186 L117.43296,10.76814 C117.43296,9.43488 115.7788,8.35434 113.73776,8.35434 L113.73776,8.35434 Z M107.7312,147.35434 L16.2688,147.35434 L16.2688,85.8023 L107.7312,85.8023 L107.7312,147.35434 L107.7312,147.35434 Z M107.7312,76.43266 L16.2688,76.43266 L16.2688,14.88062 L107.7312,14.88062 L107.7312,76.43266 L107.7312,76.43266 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M75.34488,19.44254 L71.58024,19.44254 L71.58024,24.96674 C71.58024,25.40252 71.03712,25.75568 70.36752,25.75568 L53.39192,25.75568 C52.72232,25.75568 52.1792,25.40252 52.1792,24.96674 L52.1792,19.44254 L48.6576,19.44254 C47.99048,19.44254 47.44984,19.79246 47.44984,20.225 L47.44984,28.12898 C47.44984,28.56152 47.99048,28.91144 48.6576,28.91144 L75.34488,28.91144 C76.012,28.91144 76.55264,28.56152 76.55264,28.12898 L76.55264,20.225 C76.55264,19.79246 76.00952,19.44254 75.34488,19.44254 L75.34488,19.44254 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M75.34488,91.44254 L71.58024,91.44254 L71.58024,96.96674 C71.58024,97.40252 71.03712,97.75568 70.36752,97.75568 L53.39192,97.75568 C52.72232,97.75568 52.1792,97.40252 52.1792,96.96674 L52.1792,91.44254 L48.6576,91.44254 C47.99048,91.44254 47.44984,91.79246 47.44984,92.225 L47.44984,100.12898 C47.44984,100.56152 47.99048,100.91144 48.6576,100.91144 L75.34488,100.91144 C76.012,100.91144 76.55264,100.56152 76.55264,100.12898 L76.55264,92.225 C76.55264,91.79246 76.00952,91.44254 75.34488,91.44254 L75.34488,91.44254 Z" id="Shape-2" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="name" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="41.6621094" y="54">name</tspan>
</text>
<text id="age" font-family="Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<text id="age" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="48.6816406" y="127">age</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

Before After
Before After

15
1-js/4-data-structures/4-object/object-person-2.svg
View file

@ -1,11 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="134px" height="165px" viewBox="0 0 134 165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="134px" height="165px" viewBox="0 0 134 165" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>object-person-2.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-person-2">
<path d="M117.73776,8.35434 L14.26472,8.35434 C12.22368,8.35434 10.56952,9.43488 10.56952,10.76814 L10.56952,151.23186 C10.56952,152.56512 12.22368,153.64566 14.26472,153.64566 L117.73776,153.64566 C119.7788,153.64566 121.43296,152.56512 121.43296,151.23186 L121.43296,10.76814 C121.43296,9.43488 119.7788,8.35434 117.73776,8.35434 L117.73776,8.35434 Z M111.7312,145.35434 L20.2688,145.35434 L20.2688,14.88062 L111.7312,14.88062 L111.7312,145.35434 L111.7312,145.35434 Z" id="Shape" fill="#E8C48F"></path>
<path d="M79.34488,17.44254 L75.58024,17.44254 L75.58024,22.96674 C75.58024,23.40252 75.03712,23.75568 74.36752,23.75568 L57.39192,23.75568 C56.72232,23.75568 56.1792,23.40252 56.1792,22.96674 L56.1792,17.44254 L52.6576,17.44254 C51.99048,17.44254 51.44984,17.79246 51.44984,18.225 L51.44984,26.12898 C51.44984,26.56152 51.99048,26.91144 52.6576,26.91144 L79.34488,26.91144 C80.012,26.91144 80.55264,26.56152 80.55264,26.12898 L80.55264,18.225 C80.55264,17.79246 80.00952,17.44254 79.34488,17.44254 L79.34488,17.44254 Z" id="Shape" fill="#E8C48F"></path>
<text id="name" font-family="Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="object-person-2.svg" sketch:type="MSArtboardGroup">
<path d="M117.73776,8.35434 L14.26472,8.35434 C12.22368,8.35434 10.56952,9.43488 10.56952,10.76814 L10.56952,151.23186 C10.56952,152.56512 12.22368,153.64566 14.26472,153.64566 L117.73776,153.64566 C119.7788,153.64566 121.43296,152.56512 121.43296,151.23186 L121.43296,10.76814 C121.43296,9.43488 119.7788,8.35434 117.73776,8.35434 L117.73776,8.35434 Z M111.7312,145.35434 L20.2688,145.35434 L20.2688,14.88062 L111.7312,14.88062 L111.7312,145.35434 L111.7312,145.35434 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M79.34488,17.44254 L75.58024,17.44254 L75.58024,22.96674 C75.58024,23.40252 75.03712,23.75568 74.36752,23.75568 L57.39192,23.75568 C56.72232,23.75568 56.1792,23.40252 56.1792,22.96674 L56.1792,17.44254 L52.6576,17.44254 C51.99048,17.44254 51.44984,17.79246 51.44984,18.225 L51.44984,26.12898 C51.44984,26.56152 51.99048,26.91144 52.6576,26.91144 L79.34488,26.91144 C80.012,26.91144 80.55264,26.56152 80.55264,26.12898 L80.55264,18.225 C80.55264,17.79246 80.00952,17.44254 79.34488,17.44254 L79.34488,17.44254 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="name" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="45.1621094" y="81.5">name</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 2 KiB

Before After
Before After

17
1-js/4-data-structures/4-object/object-person-empty.svg
View file

@ -1,16 +1,19 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="128px" height="207px" viewBox="0 0 128 207" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="128px" height="207px" viewBox="0 0 128 207" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>object-person-empty.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-person-empty">
<path d="M117.16824,54 L13.6952,54 C11.65416,54 10,55.08054 10,56.4138 L10,196.87752 C10,198.21078 11.65416,199.29132 13.6952,199.29132 L117.16824,199.29132 C119.20928,199.29132 120.86344,198.21078 120.86344,196.87752 L120.86344,56.4138 C120.86344,55.08054 119.20928,54 117.16824,54 L117.16824,54 Z M111.16168,194.76666 L19.69928,194.76666 L19.69928,58.52628 L111.16168,58.52628 L111.16168,194.76666 L111.16168,194.76666 Z" id="Shape" fill="#E8C48F"></path>
<text id="пусто" font-family="Open Sans" font-size="14" font-weight="bold" fill="#D1C4B1">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="object-person-empty.svg" sketch:type="MSArtboardGroup">
<path d="M117.16824,54 L13.6952,54 C11.65416,54 10,55.08054 10,56.4138 L10,196.87752 C10,198.21078 11.65416,199.29132 13.6952,199.29132 L117.16824,199.29132 C119.20928,199.29132 120.86344,198.21078 120.86344,196.87752 L120.86344,56.4138 C120.86344,55.08054 119.20928,54 117.16824,54 L117.16824,54 Z M111.16168,194.76666 L19.69928,194.76666 L19.69928,58.52628 L111.16168,58.52628 L111.16168,194.76666 L111.16168,194.76666 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="пусто" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#D1C4B1">
<tspan x="45.2177734" y="130.535308">пусто</tspan>
</text>
<text id="person" font-family="Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<text id="person" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="41.3417969" y="17">person</tspan>
</text>
<path d="M66,26 L66,45" id="Line-8" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M66,26 L66,45" id="Line-8" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-8-decoration-1" d="M66,45 C67.05,41.22 67.95,37.98 69,34.2 C66.9,34.2 65.1,34.2 63,34.2 C64.05,37.98 64.95,41.22 66,45 C66,45 66,45 66,45 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
</g>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 2 KiB

Before After
Before After

23
1-js/4-data-structures/4-object/object.svg
View file

@ -1,19 +1,22 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="134px" height="168px" viewBox="0 0 134 168" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="134px" height="168px" viewBox="0 0 134 168" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>object.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object">
<path d="M117.73776,11.35434 L14.26472,11.35434 C12.22368,11.35434 10.56952,12.43488 10.56952,13.76814 L10.56952,154.23186 C10.56952,155.56512 12.22368,156.64566 14.26472,156.64566 L117.73776,156.64566 C119.7788,156.64566 121.43296,155.56512 121.43296,154.23186 L121.43296,13.76814 C121.43296,12.43488 119.7788,11.35434 117.73776,11.35434 L117.73776,11.35434 Z M111.7312,152.121 L20.2688,152.121 L20.2688,109.7256 L111.7312,109.7256 L111.7312,152.121 L111.7312,152.121 Z M111.7312,105.1977 L20.2688,105.1977 L20.2688,62.8023 L111.7312,62.8023 L111.7312,105.1977 L111.7312,105.1977 Z M111.7312,58.27602 L20.2688,58.27602 L20.2688,15.88062 L111.7312,15.88062 L111.7312,58.27602 L111.7312,58.27602 Z" id="Shape" fill="#E8C48F"></path>
<path d="M79.11424,114.28428 L75.3496,114.28428 L75.3496,119.8101 C75.3496,120.24588 74.80648,120.59904 74.13688,120.59904 L57.1588,120.59904 C56.4892,120.59904 55.94608,120.24588 55.94608,119.8101 L55.94608,114.28428 L52.42448,114.28428 C51.75736,114.28428 51.21672,114.63582 51.21672,115.06836 L51.21672,122.97234 C51.21672,123.40488 51.75736,123.7548 52.42448,123.7548 L79.11176,123.7548 C79.77888,123.7548 80.31952,123.40488 80.31952,122.97234 L80.31952,115.06836 C80.31952,114.63582 79.78136,114.28428 79.11424,114.28428 L79.11424,114.28428 Z" id="Shape" fill="#E8C48F"></path>
<path d="M79.34488,67.3626 L75.58024,67.3626 L75.58024,72.8868 C75.58024,73.32258 75.03712,73.67574 74.36752,73.67574 L57.39192,73.67574 C56.72232,73.67574 56.1792,73.32258 56.1792,72.8868 L56.1792,67.3626 L52.6576,67.3626 C51.99048,67.3626 51.44984,67.71252 51.44984,68.14506 L51.44984,76.04904 C51.44984,76.48158 51.99048,76.8315 52.6576,76.8315 L79.34488,76.8315 C80.012,76.8315 80.55264,76.48158 80.55264,76.04904 L80.55264,68.14506 C80.55264,67.71414 80.00952,67.3626 79.34488,67.3626 L79.34488,67.3626 Z" id="Shape" fill="#E8C48F"></path>
<path d="M79.34488,20.44254 L75.58024,20.44254 L75.58024,25.96674 C75.58024,26.40252 75.03712,26.75568 74.36752,26.75568 L57.39192,26.75568 C56.72232,26.75568 56.1792,26.40252 56.1792,25.96674 L56.1792,20.44254 L52.6576,20.44254 C51.99048,20.44254 51.44984,20.79246 51.44984,21.225 L51.44984,29.12898 C51.44984,29.56152 51.99048,29.91144 52.6576,29.91144 L79.34488,29.91144 C80.012,29.91144 80.55264,29.56152 80.55264,29.12898 L80.55264,21.225 C80.55264,20.79246 80.00952,20.44254 79.34488,20.44254 L79.34488,20.44254 Z" id="Shape" fill="#E8C48F"></path>
<text id="ключ1" font-family="Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="object.svg" sketch:type="MSArtboardGroup">
<path d="M117.73776,11.35434 L14.26472,11.35434 C12.22368,11.35434 10.56952,12.43488 10.56952,13.76814 L10.56952,154.23186 C10.56952,155.56512 12.22368,156.64566 14.26472,156.64566 L117.73776,156.64566 C119.7788,156.64566 121.43296,155.56512 121.43296,154.23186 L121.43296,13.76814 C121.43296,12.43488 119.7788,11.35434 117.73776,11.35434 L117.73776,11.35434 Z M111.7312,152.121 L20.2688,152.121 L20.2688,109.7256 L111.7312,109.7256 L111.7312,152.121 L111.7312,152.121 Z M111.7312,105.1977 L20.2688,105.1977 L20.2688,62.8023 L111.7312,62.8023 L111.7312,105.1977 L111.7312,105.1977 Z M111.7312,58.27602 L20.2688,58.27602 L20.2688,15.88062 L111.7312,15.88062 L111.7312,58.27602 L111.7312,58.27602 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M79.11424,114.28428 L75.3496,114.28428 L75.3496,119.8101 C75.3496,120.24588 74.80648,120.59904 74.13688,120.59904 L57.1588,120.59904 C56.4892,120.59904 55.94608,120.24588 55.94608,119.8101 L55.94608,114.28428 L52.42448,114.28428 C51.75736,114.28428 51.21672,114.63582 51.21672,115.06836 L51.21672,122.97234 C51.21672,123.40488 51.75736,123.7548 52.42448,123.7548 L79.11176,123.7548 C79.77888,123.7548 80.31952,123.40488 80.31952,122.97234 L80.31952,115.06836 C80.31952,114.63582 79.78136,114.28428 79.11424,114.28428 L79.11424,114.28428 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M79.34488,67.3626 L75.58024,67.3626 L75.58024,72.8868 C75.58024,73.32258 75.03712,73.67574 74.36752,73.67574 L57.39192,73.67574 C56.72232,73.67574 56.1792,73.32258 56.1792,72.8868 L56.1792,67.3626 L52.6576,67.3626 C51.99048,67.3626 51.44984,67.71252 51.44984,68.14506 L51.44984,76.04904 C51.44984,76.48158 51.99048,76.8315 52.6576,76.8315 L79.34488,76.8315 C80.012,76.8315 80.55264,76.48158 80.55264,76.04904 L80.55264,68.14506 C80.55264,67.71414 80.00952,67.3626 79.34488,67.3626 L79.34488,67.3626 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M79.34488,20.44254 L75.58024,20.44254 L75.58024,25.96674 C75.58024,26.40252 75.03712,26.75568 74.36752,26.75568 L57.39192,26.75568 C56.72232,26.75568 56.1792,26.40252 56.1792,25.96674 L56.1792,20.44254 L52.6576,20.44254 C51.99048,20.44254 51.44984,20.79246 51.44984,21.225 L51.44984,29.12898 C51.44984,29.56152 51.99048,29.91144 52.6576,29.91144 L79.34488,29.91144 C80.012,29.91144 80.55264,29.56152 80.55264,29.12898 L80.55264,21.225 C80.55264,20.79246 80.00952,20.44254 79.34488,20.44254 L79.34488,20.44254 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="ключ1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="42.9946289" y="47">ключ1</tspan>
</text>
<text id="ключ2" font-family="Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<text id="ключ2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="42.9946289" y="93">ключ2</tspan>
</text>
<text id="ключ3" font-family="Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<text id="ключ3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="41.9946289" y="140">ключ3</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

Before After
Before After

35
1-js/4-data-structures/6-object-reference/variable-contains-reference.svg
View file

@ -1,26 +1,29 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="337px" height="142px" viewBox="0 0 337 142" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="337px" height="142px" viewBox="0 0 337 142" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>variable-contains-reference.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-contains-reference">
<g id="noun_1211_cc" transform="translate(12.000000, 12.000000)" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape"></path>
<path d="M17,57 L17,29 L2,57" id="Shape"></path>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape"></path>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="variable-contains-reference.svg" sketch:type="MSArtboardGroup">
<g id="noun_1211_cc" sketch:type="MSLayerGroup" transform="translate(12.000000, 12.000000)" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M17,57 L17,29 L2,57" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
<text id="User" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<text id="User" sketch:type="MSTextLayer" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<tspan x="47" y="108">User</tspan>
</text>
<path d="M222.26472,6.85877813 C220.22368,6.85877813 218.56952,7.93931813 218.56952,9.27257813 L218.56952,89.7362981 C218.56952,91.0695581 220.22368,92.1500981 222.26472,92.1500981 L325.73776,92.1500981 C327.7788,92.1500981 329.43296,91.0695581 329.43296,89.7362981 L329.43296,9.27257813 C329.43296,7.93931813 327.7788,6.85877813 325.73776,6.85877813 L222.26472,6.85877813 Z M319.7312,83.8850581 L228.2688,83.8850581 L228.2688,13.3850581 L319.7312,13.3850581 L319.7312,83.8850581 L319.7312,83.8850581 Z" id="Shape" fill="#E8C48F"></path>
<rect id="Rectangle-4" fill="#FFFFFF" x="116" y="46" width="44" height="6"></rect>
<path d="M123.854043,47.3219293 L137.633029,33.8463492 C139.246288,32.5716063 142.818195,29.4189579 141.204936,28.1444036 C139.591676,26.8689065 138.540503,27.6719962 136.929629,28.9474933 L118.43143,47.3219299 C116.818171,48.5966728 116.818171,50.1666601 118.43143,51.4412144 C118.43143,51.4412144 139.913731,71.5088763 141.204935,71.5088763 C144.209997,71.5088763 143.882164,69.6878208 142.268905,68.4132665 L123.854043,50.5870439 L158.842523,50.5870439 L182.224064,50.5870439 L201.028364,50.5870439 C203.308965,50.5870439 204.778514,50.8657087 204.778514,49.0625887 C204.778514,47.2594687 203.308964,47.3219293 201.028364,47.3219293 L123.854043,47.3219293 Z" id="Shape-3" fill="#EE6B47" transform="translate(161.000000, 49.504438) scale(-1, 1) translate(-161.000000, -49.504438) "></path>
<path d="M287.34488,15.9469781 L283.58024,15.9469781 L283.58024,21.4711781 C283.58024,21.9069581 283.03712,22.2601181 282.36752,22.2601181 L265.39192,22.2601181 C264.72232,22.2601181 264.1792,21.9069581 264.1792,21.4711781 L264.1792,15.9469781 L260.6576,15.9469781 C259.99048,15.9469781 259.44984,16.2968981 259.44984,16.7294381 L259.44984,24.6334181 C259.44984,25.0659581 259.99048,25.4158781 260.6576,25.4158781 L287.34488,25.4158781 C288.012,25.4158781 288.55264,25.0659581 288.55264,24.6334181 L288.55264,16.7294381 C288.55264,16.2968981 288.00952,15.9469781 287.34488,15.9469781 L287.34488,15.9469781 Z" id="Shape" fill="#E8C48F"></path>
<text id="name" font-family="Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<path d="M222.26472,6.85877813 C220.22368,6.85877813 218.56952,7.93931813 218.56952,9.27257813 L218.56952,89.7362981 C218.56952,91.0695581 220.22368,92.1500981 222.26472,92.1500981 L325.73776,92.1500981 C327.7788,92.1500981 329.43296,91.0695581 329.43296,89.7362981 L329.43296,9.27257813 C329.43296,7.93931813 327.7788,6.85877813 325.73776,6.85877813 L222.26472,6.85877813 Z M319.7312,83.8850581 L228.2688,83.8850581 L228.2688,13.3850581 L319.7312,13.3850581 L319.7312,83.8850581 L319.7312,83.8850581 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-4" fill="#FFFFFF" sketch:type="MSShapeGroup" x="116" y="46" width="44" height="6"></rect>
<path d="M123.854043,47.3219293 L137.633029,33.8463492 C139.246288,32.5716063 142.818195,29.4189579 141.204936,28.1444036 C139.591676,26.8689065 138.540503,27.6719962 136.929629,28.9474933 L118.43143,47.3219299 C116.818171,48.5966728 116.818171,50.1666601 118.43143,51.4412144 C118.43143,51.4412144 139.913731,71.5088763 141.204935,71.5088763 C144.209997,71.5088763 143.882164,69.6878208 142.268905,68.4132665 L123.854043,50.5870439 L158.842523,50.5870439 L182.224064,50.5870439 L201.028364,50.5870439 C203.308965,50.5870439 204.778514,50.8657087 204.778514,49.0625887 C204.778514,47.2594687 203.308964,47.3219293 201.028364,47.3219293 L123.854043,47.3219293 Z" id="Shape-3" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(161.000000, 49.504438) scale(-1, 1) translate(-161.000000, -49.504438) "></path>
<path d="M287.34488,15.9469781 L283.58024,15.9469781 L283.58024,21.4711781 C283.58024,21.9069581 283.03712,22.2601181 282.36752,22.2601181 L265.39192,22.2601181 C264.72232,22.2601181 264.1792,21.9069581 264.1792,21.4711781 L264.1792,15.9469781 L260.6576,15.9469781 C259.99048,15.9469781 259.44984,16.2968981 259.44984,16.7294381 L259.44984,24.6334181 C259.44984,25.0659581 259.99048,25.4158781 260.6576,25.4158781 L287.34488,25.4158781 C288.012,25.4158781 288.55264,25.0659581 288.55264,24.6334181 L288.55264,16.7294381 C288.55264,16.2968981 288.00952,15.9469781 287.34488,15.9469781 L287.34488,15.9469781 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="name" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="253.162109" y="57.0044381">name</tspan>
</text>
<g id="Rectangle-3-+-Shape" transform="translate(58.000000, 28.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47"></path>
<g id="Rectangle-3-+-Shape" sketch:type="MSLayerGroup" transform="translate(58.000000, 28.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Before After
Before After

47
1-js/4-data-structures/6-object-reference/variable-copy-reference.svg
View file

@ -1,46 +1,49 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="546px" height="150px" viewBox="0 0 546 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="546px" height="150px" viewBox="0 0 546 150" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>variable-copy-reference.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-copy-reference">
<path d="M221.26472,9.85877813 C219.22368,9.85877813 217.56952,10.9393181 217.56952,12.2725781 L217.56952,92.7362981 C217.56952,94.0695581 219.22368,95.1500981 221.26472,95.1500981 L324.73776,95.1500981 C326.7788,95.1500981 328.43296,94.0695581 328.43296,92.7362981 L328.43296,12.2725781 C328.43296,10.9393181 326.7788,9.85877813 324.73776,9.85877813 L221.26472,9.85877813 Z M318.7312,86.8850581 L227.2688,86.8850581 L227.2688,16.3850581 L318.7312,16.3850581 L318.7312,86.8850581 L318.7312,86.8850581 Z" id="Shape" fill="#E8C48F"></path>
<path d="M286.34488,18.9469781 L282.58024,18.9469781 L282.58024,24.4711781 C282.58024,24.9069581 282.03712,25.2601181 281.36752,25.2601181 L264.39192,25.2601181 C263.72232,25.2601181 263.1792,24.9069581 263.1792,24.4711781 L263.1792,18.9469781 L259.6576,18.9469781 C258.99048,18.9469781 258.44984,19.2968981 258.44984,19.7294381 L258.44984,27.6334181 C258.44984,28.0659581 258.99048,28.4158781 259.6576,28.4158781 L286.34488,28.4158781 C287.012,28.4158781 287.55264,28.0659581 287.55264,27.6334181 L287.55264,19.7294381 C287.55264,19.2968981 287.00952,18.9469781 286.34488,18.9469781 L286.34488,18.9469781 Z" id="Shape" fill="#E8C48F"></path>
<text id="name" font-family="Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="variable-copy-reference.svg" sketch:type="MSArtboardGroup">
<path d="M221.26472,9.85877813 C219.22368,9.85877813 217.56952,10.9393181 217.56952,12.2725781 L217.56952,92.7362981 C217.56952,94.0695581 219.22368,95.1500981 221.26472,95.1500981 L324.73776,95.1500981 C326.7788,95.1500981 328.43296,94.0695581 328.43296,92.7362981 L328.43296,12.2725781 C328.43296,10.9393181 326.7788,9.85877813 324.73776,9.85877813 L221.26472,9.85877813 Z M318.7312,86.8850581 L227.2688,86.8850581 L227.2688,16.3850581 L318.7312,16.3850581 L318.7312,86.8850581 L318.7312,86.8850581 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M286.34488,18.9469781 L282.58024,18.9469781 L282.58024,24.4711781 C282.58024,24.9069581 282.03712,25.2601181 281.36752,25.2601181 L264.39192,25.2601181 C263.72232,25.2601181 263.1792,24.9069581 263.1792,24.4711781 L263.1792,18.9469781 L259.6576,18.9469781 C258.99048,18.9469781 258.44984,19.2968981 258.44984,19.7294381 L258.44984,27.6334181 C258.44984,28.0659581 258.99048,28.4158781 259.6576,28.4158781 L286.34488,28.4158781 C287.012,28.4158781 287.55264,28.0659581 287.55264,27.6334181 L287.55264,19.7294381 C287.55264,19.2968981 287.00952,18.9469781 286.34488,18.9469781 L286.34488,18.9469781 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="name" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="252.162109" y="60.0044381">name</tspan>
</text>
<g id="Group" transform="translate(11.000000, 15.000000)">
<g id="noun_1211_cc" fill="#E8C48F">
<g id="Group" sketch:type="MSLayerGroup" transform="translate(11.000000, 15.000000)">
<g id="noun_1211_cc" fill="#E8C48F" sketch:type="MSShapeGroup">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape"></path>
<path d="M17,57 L17,29 L2,57" id="Shape"></path>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape"></path>
</g>
<text id="User" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<text id="User" sketch:type="MSTextLayer" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<tspan x="35" y="96">User</tspan>
</text>
<g id="Rectangle-4-+-Shape-3" transform="translate(104.000000, 15.000000)">
<g id="Rectangle-4-+-Shape-3" transform="translate(104.000000, 15.000000)" sketch:type="MSShapeGroup">
<rect id="Rectangle-4" fill="#FFFFFF" x="0" y="19" width="44" height="6"></rect>
<path d="M7.85404284,20.3219293 L21.6330289,6.84634915 C23.2462881,5.57160629 26.8181947,2.41895793 25.2049355,1.14440364 C23.5916764,-0.131093502 22.5405033,0.671996159 20.9296292,1.9474933 L2.43143016,20.3219299 C0.818170998,21.5966728 0.818171047,23.1666601 2.43143021,24.4412144 C2.43143021,24.4412144 23.9137313,44.5088763 25.2049351,44.5088763 C28.2099969,44.5088763 27.882164,42.6878208 26.2689048,41.4132665 L7.8540433,23.5870439 L42.8425234,23.5870439 L66.2240642,23.5870439 L85.0283644,23.5870439 C87.3089653,23.5870439 88.7785142,23.8657087 88.7785142,22.0625887 C88.7785142,20.2594687 87.3089645,20.3219293 85.0283637,20.3219293 L7.85404284,20.3219293 Z" id="Shape-3" fill="#EE6B47" transform="translate(45.000000, 22.504438) scale(-1, 1) translate(-45.000000, -22.504438) "></path>
</g>
<g id="Rectangle-3-+-Shape" transform="translate(46.000000, 16.000000)">
<g id="Rectangle-3-+-Shape" transform="translate(46.000000, 16.000000)" sketch:type="MSShapeGroup">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47"></path>
</g>
</g>
<g id="noun_1211_cc" transform="translate(396.000000, 15.000000)" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape"></path>
<path d="M17,57 L17,29 L2,57" id="Shape"></path>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape"></path>
<g id="noun_1211_cc" sketch:type="MSLayerGroup" transform="translate(396.000000, 15.000000)" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M17,57 L17,29 L2,57" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
<text id="Admin" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<text id="Admin" sketch:type="MSTextLayer" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<tspan x="424" y="111">Admin</tspan>
</text>
<g id="Rectangle-4-+-Shape-3" transform="translate(384.500000, 52.500000) scale(-1, 1) translate(-384.500000, -52.500000) translate(340.000000, 30.000000)">
<rect id="Rectangle-4" fill="#FFFFFF" x="0" y="19" width="44" height="6"></rect>
<path d="M7.85404284,20.3219293 L21.6330289,6.84634915 C23.2462881,5.57160629 26.8181947,2.41895793 25.2049355,1.14440364 C23.5916764,-0.131093502 22.5405033,0.671996159 20.9296292,1.9474933 L2.43143016,20.3219299 C0.818170998,21.5966728 0.818171047,23.1666601 2.43143021,24.4412144 C2.43143021,24.4412144 23.9137313,44.5088763 25.2049351,44.5088763 C28.2099969,44.5088763 27.882164,42.6878208 26.2689048,41.4132665 L7.8540433,23.5870439 L42.8425234,23.5870439 L66.2240642,23.5870439 L85.0283644,23.5870439 C87.3089653,23.5870439 88.7785142,23.8657087 88.7785142,22.0625887 C88.7785142,20.2594687 87.3089645,20.3219293 85.0283637,20.3219293 L7.85404284,20.3219293 Z" id="Shape-3" fill="#EE6B47" transform="translate(45.000000, 22.504438) scale(-1, 1) translate(-45.000000, -22.504438) "></path>
<g id="Rectangle-4-+-Shape-3" sketch:type="MSLayerGroup" transform="translate(384.500000, 52.500000) scale(-1, 1) translate(-384.500000, -52.500000) translate(340.000000, 30.000000)">
<rect id="Rectangle-4" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="19" width="44" height="6"></rect>
<path d="M7.85404284,20.3219293 L21.6330289,6.84634915 C23.2462881,5.57160629 26.8181947,2.41895793 25.2049355,1.14440364 C23.5916764,-0.131093502 22.5405033,0.671996159 20.9296292,1.9474933 L2.43143016,20.3219299 C0.818170998,21.5966728 0.818171047,23.1666601 2.43143021,24.4412144 C2.43143021,24.4412144 23.9137313,44.5088763 25.2049351,44.5088763 C28.2099969,44.5088763 27.882164,42.6878208 26.2689048,41.4132665 L7.8540433,23.5870439 L42.8425234,23.5870439 L66.2240642,23.5870439 L85.0283644,23.5870439 C87.3089653,23.5870439 88.7785142,23.8657087 88.7785142,22.0625887 C88.7785142,20.2594687 87.3089645,20.3219293 85.0283637,20.3219293 L7.85404284,20.3219293 Z" id="Shape-3" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(45.000000, 22.504438) scale(-1, 1) translate(-45.000000, -22.504438) "></path>
</g>
<g id="Rectangle-3-+-Shape" transform="translate(442.000000, 31.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47"></path>
<g id="Rectangle-3-+-Shape" sketch:type="MSLayerGroup" transform="translate(442.000000, 31.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Before After
Before After

37
1-js/4-data-structures/6-object-reference/variable-copy-value.svg
View file

@ -1,35 +1,38 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="359px" height="143px" viewBox="0 0 359 143" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="359px" height="143px" viewBox="0 0 359 143" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>variable-copy-value.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-copy-value">
<g id="noun_1211_cc-+-Message" transform="translate(11.000000, 6.000000)">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="variable-copy-value.svg" sketch:type="MSArtboardGroup">
<g id="noun_1211_cc-+-Message" sketch:type="MSLayerGroup" transform="translate(11.000000, 6.000000)">
<g id="noun_1211_cc">
<path d="M17,37.1960457 L129.557785,37.1960457 L129.557785,80.1456641 C129.557785,80.5185728 129.479295,81.0083855 129.279367,81.4404861 C129.07944,81.8725868 112.704625,117 112.704625,117 L112.704625,62.6396695 L129.559266,37.1960457 L148,9 L35.4407339,9 L17,37.1960457 L17,37.1960457 Z" id="Shape" fill="#E8C48F"></path>
<path d="M17,66 L17,38 L2,66" id="Shape" fill="#E8C48F"></path>
<path d="M17,37.1960457 L129.557785,37.1960457 L129.557785,80.1456641 C129.557785,80.5185728 129.479295,81.0083855 129.279367,81.4404861 C129.07944,81.8725868 112.704625,117 112.704625,117 L112.704625,62.6396695 L129.559266,37.1960457 L148,9 L35.4407339,9 L17,37.1960457 L17,37.1960457 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M17,66 L17,38 L2,66" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)">
<path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;Привет!&quot;" transform="translate(40.359759, 40.417209) rotate(47.000000) translate(-40.359759, -40.417209) " font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<path d="M18.9106925,0.395208397 L73.4146415,58.8435379 L55.0893075,75.9321883 L0.585358502,17.4838588 L18.9106925,0.395208397 L18.9106925,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path>
<text id="&quot;Привет!&quot;" sketch:type="MSTextLayer" transform="translate(40.359759, 40.417209) rotate(47.000000) translate(-40.359759, -40.417209) " font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<tspan x="3.68215005" y="45.9172093">"Привет!"</tspan>
</text>
</g>
<path d="M0,68 L0,122.729971 C0,126.150501 1.4836395,128 4.38712201,128 L104.473443,128 C107.59502,128 110,125.4521 110,124.524372 L110,68 L0,68 L0,68 Z" id="Shape" fill="#E8C48F"></path>
<path d="M0,68 L0,122.729971 C0,126.150501 1.4836395,128 4.38712201,128 L104.473443,128 C107.59502,128 110,125.4521 110,124.524372 L110,68 L0,68 L0,68 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
</g>
<text id="Message" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<text id="Message" sketch:type="MSTextLayer" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<tspan x="17" y="105">Message</tspan>
</text>
</g>
<g id="Group" transform="translate(210.000000, 6.000000)">
<path d="M17,37.1960457 L130.417005,37.1960457 L130.417005,80.1456641 C130.417005,80.5185728 130.337916,81.0083855 130.136462,81.4404861 C129.935008,81.8725868 113.435195,117 113.435195,117 L113.435195,62.6396695 L130.418497,37.1960457 L149,9 L35.5815029,9 L17,37.1960457 L17,37.1960457 Z" id="Shape" fill="#E8C48F"></path>
<path d="M18,66 L18,38 L2,66" id="Shape" fill="#E8C48F"></path>
<g id="Group" sketch:type="MSLayerGroup" transform="translate(210.000000, 6.000000)">
<path d="M17,37.1960457 L130.417005,37.1960457 L130.417005,80.1456641 C130.417005,80.5185728 130.337916,81.0083855 130.136462,81.4404861 C129.935008,81.8725868 113.435195,117 113.435195,117 L113.435195,62.6396695 L130.418497,37.1960457 L149,9 L35.5815029,9 L17,37.1960457 L17,37.1960457 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M18,66 L18,38 L2,66" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)">
<path d="M19.1662424,0.395208397 L74.4067312,58.8435379 L55.8337576,75.9321883 L0.593268752,17.4838588 L19.1662424,0.395208397 L19.1662424,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;Привет!&quot;" transform="translate(39.891647, 38.685856) rotate(47.000000) translate(-39.891647, -38.685856) " font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<path d="M19.1662424,0.395208397 L74.4067312,58.8435379 L55.8337576,75.9321883 L0.593268752,17.4838588 L19.1662424,0.395208397 L19.1662424,0.395208397 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup"></path>
<text id="&quot;Привет!&quot;" sketch:type="MSTextLayer" transform="translate(39.891647, 38.685856) rotate(47.000000) translate(-39.891647, -38.685856) " font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<tspan x="3.40960987" y="44.1858556">"Привет!"</tspan>
</text>
</g>
<path d="M0,68 L0,122.729971 C0,126.150501 1.49712713,128 4.42700494,128 L105.423201,128 C108.573157,128 111,125.4521 111,124.524372 L111,68 L0,68 L0,68 Z" id="Shape" fill="#E8C48F"></path>
<text id="Phrase" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<path d="M0,68 L0,122.729971 C0,126.150501 1.49712713,128 4.42700494,128 L105.423201,128 C108.573157,128 111,125.4521 111,124.524372 L111,68 L0,68 L0,68 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="Phrase" sketch:type="MSTextLayer" font-family="Open Sans" font-size="18" font-weight="526" fill="#FFFFFF">
<tspan x="25" y="105">Phrase</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

Before After
Before After

59
1-js/4-data-structures/7-array/array-pop.svg
View file

@ -1,65 +1,68 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="479px" height="148px" viewBox="0 0 479 148" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="479px" height="148px" viewBox="0 0 479 148" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>array-pop.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="array-pop">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="102" y="81" width="37" height="54"></rect>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="2" x="138" y="81" width="37" height="54"></rect>
<text id="0" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="array-pop.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="102" y="81" width="37" height="54"></rect>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="138" y="81" width="37" height="54"></rect>
<text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="117" y="112">0</tspan>
</text>
<text id="1" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="154" y="112">1</tspan>
</text>
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="2" x="174" y="81" width="37" height="54"></rect>
<text id="2" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="174" y="81" width="37" height="54"></rect>
<text id="2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="190" y="112">2</tspan>
</text>
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="2" x="210" y="81" width="37" height="54"></rect>
<text id="3" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="210" y="81" width="37" height="54"></rect>
<text id="3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="226" y="112">3</tspan>
</text>
<text id="&quot;Яблоко&quot;" transform="translate(121.000000, 47.000000) rotate(-89.000000) translate(-121.000000, -47.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="&quot;Яблоко&quot;" sketch:type="MSTextLayer" transform="translate(121.000000, 47.000000) rotate(-89.000000) translate(-121.000000, -47.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="90" y="49">"Яблоко"</tspan>
</text>
<text id="&quot;Апельсин&quot;" transform="translate(161.500000, 40.000000) rotate(-89.000000) translate(-161.500000, -40.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="&quot;Апельсин&quot;" sketch:type="MSTextLayer" transform="translate(161.500000, 40.000000) rotate(-89.000000) translate(-161.500000, -40.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="123" y="42">"Апельсин"</tspan>
</text>
<text id="&quot;Груша&quot;" transform="translate(194.000000, 52.000000) rotate(-89.000000) translate(-194.000000, -52.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="&quot;Груша&quot;" sketch:type="MSTextLayer" transform="translate(194.000000, 52.000000) rotate(-89.000000) translate(-194.000000, -52.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="167" y="54">"Груша"</tspan>
</text>
<text id="&quot;Лимон&quot;" transform="translate(232.000000, 51.000000) rotate(-89.000000) translate(-232.000000, -51.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="&quot;Лимон&quot;" sketch:type="MSTextLayer" transform="translate(232.000000, 51.000000) rotate(-89.000000) translate(-232.000000, -51.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="205" y="53">"Лимон"</tspan>
</text>
<text id="length-=-4" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="length-=-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="8" y="59">length = 4</tspan>
</text>
<path d="M306,137 L315,120.393834 L309,120.393834 L309,78 L303,78 L303,120.393834 L297,120.393834 L306,137 Z" id="Shape" fill="#EE6B47" transform="translate(306.000000, 107.500000) rotate(-90.000000) translate(-306.000000, -107.500000) "></path>
<text id="очистить" font-family="Open Sans" font-size="14" font-weight="normal" fill="#EE6B47">
<path d="M306,137 L315,120.393834 L309,120.393834 L309,78 L303,78 L303,120.393834 L297,120.393834 L306,137 Z" id="Shape" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(306.000000, 107.500000) rotate(-90.000000) translate(-306.000000, -107.500000) "></path>
<text id="очистить" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="272" y="97">очистить</tspan>
</text>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" x="362" y="81" width="37" height="54"></rect>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="2" x="398" y="81" width="37" height="54"></rect>
<text id="-1" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="362" y="81" width="37" height="54"></rect>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="398" y="81" width="37" height="54"></rect>
<text id="-1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="377" y="112">0</tspan>
</text>
<text id="-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="414" y="112">1</tspan>
</text>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" x="434" y="81" width="37" height="54"></rect>
<text id="-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="434" y="81" width="37" height="54"></rect>
<text id="-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="450" y="112">2</tspan>
</text>
<text id="&quot;Яблоко&quot;-2" transform="translate(381.000000, 47.000000) rotate(-89.000000) translate(-381.000000, -47.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="&quot;Яблоко&quot;-2" sketch:type="MSTextLayer" transform="translate(381.000000, 47.000000) rotate(-89.000000) translate(-381.000000, -47.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="350" y="49">"Яблоко"</tspan>
</text>
<text id="&quot;Апельсин&quot;-2" transform="translate(421.500000, 40.000000) rotate(-89.000000) translate(-421.500000, -40.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="&quot;Апельсин&quot;-2" sketch:type="MSTextLayer" transform="translate(421.500000, 40.000000) rotate(-89.000000) translate(-421.500000, -40.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="383" y="42">"Апельсин"</tspan>
</text>
<text id="&quot;Груша&quot;-2" transform="translate(454.000000, 52.000000) rotate(-89.000000) translate(-454.000000, -52.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="&quot;Груша&quot;-2" sketch:type="MSTextLayer" transform="translate(454.000000, 52.000000) rotate(-89.000000) translate(-454.000000, -52.000000) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="427" y="54">"Груша"</tspan>
</text>
<text id="length-=-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="length-=-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="263" y="59">length = 3</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

Before After
Before After

87
1-js/4-data-structures/7-array/array-shift.svg
View file

@ -1,100 +1,103 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="610px" height="175px" viewBox="0 0 610 175" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="610px" height="175px" viewBox="0 0 610 175" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>array-shift.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="array-shift">
<text id="1" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="array-shift.svg" sketch:type="MSArtboardGroup">
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="63" y="116.973154">1</tspan>
</text>
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="2" x="83" y="85.973154" width="37" height="54"></rect>
<text id="2" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="83" y="85.973154" width="37" height="54"></rect>
<text id="2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="99" y="116.973154">2</tspan>
</text>
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="2" x="119" y="85.973154" width="37" height="54"></rect>
<text id="3" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="119" y="85.973154" width="37" height="54"></rect>
<text id="3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="135" y="116.973154">3</tspan>
</text>
<text id="&quot;Апельсин&quot;" transform="translate(70.500000, 44.973154) rotate(-89.000000) translate(-70.500000, -44.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="&quot;Апельсин&quot;" sketch:type="MSTextLayer" transform="translate(70.500000, 44.973154) rotate(-89.000000) translate(-70.500000, -44.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="32" y="46.973154">"Апельсин"</tspan>
</text>
<text id="&quot;Груша&quot;" transform="translate(103.000000, 56.973154) rotate(-89.000000) translate(-103.000000, -56.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="&quot;Груша&quot;" sketch:type="MSTextLayer" transform="translate(103.000000, 56.973154) rotate(-89.000000) translate(-103.000000, -56.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="76" y="58.973154">"Груша"</tspan>
</text>
<text id="&quot;Лимон&quot;" transform="translate(141.000000, 55.973154) rotate(-89.000000) translate(-141.000000, -55.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="&quot;Лимон&quot;" sketch:type="MSTextLayer" transform="translate(141.000000, 55.973154) rotate(-89.000000) translate(-141.000000, -55.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="114" y="57.973154">"Лимон"</tspan>
</text>
<text id="length-=-4" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="length-=-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="172" y="63.973154">length = 4</tspan>
</text>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="2" x="229" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="2" x="265" y="85.973154" width="37" height="54"></rect>
<text id="-1" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="229" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="265" y="85.973154" width="37" height="54"></rect>
<text id="-1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="244" y="116.973154">0</tspan>
</text>
<text id="-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="281" y="116.973154">1</tspan>
</text>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" x="301" y="85.973154" width="37" height="54"></rect>
<text id="-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="301" y="85.973154" width="37" height="54"></rect>
<text id="-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="317" y="116.973154">2</tspan>
</text>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" x="337" y="85.973154" width="37" height="54"></rect>
<text id="-4" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="337" y="85.973154" width="37" height="54"></rect>
<text id="-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="353" y="116.973154">3</tspan>
</text>
<text id="&quot;Апельсин&quot;-2" transform="translate(288.500000, 44.973154) rotate(-89.000000) translate(-288.500000, -44.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="&quot;Апельсин&quot;-2" sketch:type="MSTextLayer" transform="translate(288.500000, 44.973154) rotate(-89.000000) translate(-288.500000, -44.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="250" y="46.973154">"Апельсин"</tspan>
</text>
<text id="&quot;Груша&quot;-2" transform="translate(321.000000, 56.973154) rotate(-89.000000) translate(-321.000000, -56.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="&quot;Груша&quot;-2" sketch:type="MSTextLayer" transform="translate(321.000000, 56.973154) rotate(-89.000000) translate(-321.000000, -56.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="294" y="58.973154">"Груша"</tspan>
</text>
<text id="&quot;Лимон&quot;-2" transform="translate(359.000000, 55.973154) rotate(-89.000000) translate(-359.000000, -55.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="&quot;Лимон&quot;-2" sketch:type="MSTextLayer" transform="translate(359.000000, 55.973154) rotate(-89.000000) translate(-359.000000, -55.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="332" y="57.973154">"Лимон"</tspan>
</text>
<text id="length-=-5" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="length-=-5" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="390" y="63.973154">length = 4</tspan>
</text>
<path d="M195,141.973154 L204,125.366988 L198,125.366988 L198,82.973154 L192,82.973154 L192,125.366988 L186,125.366988 L195,141.973154 Z" id="Shape" fill="#EE6B47" transform="translate(195.000000, 112.473154) rotate(-90.000000) translate(-195.000000, -112.473154) "></path>
<text id="очистить" font-family="Open Sans" font-size="14" font-weight="normal" fill="#EE6B47">
<path d="M195,141.973154 L204,125.366988 L198,125.366988 L198,82.973154 L192,82.973154 L192,125.366988 L186,125.366988 L195,141.973154 Z" id="Shape" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(195.000000, 112.473154) rotate(-90.000000) translate(-195.000000, -112.473154) "></path>
<text id="очистить" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="161" y="101.973154">очистить</tspan>
</text>
<text id="переместить" font-family="Open Sans" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="переместить" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="393" y="99.973154">переместить</tspan>
<tspan x="393" y="118.973154"></tspan>
<tspan x="393" y="137.973154">элементы</tspan>
<tspan x="393" y="156.973154">влево</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="11" y="86" width="37" height="54"></rect>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="2" x="47" y="85.973154" width="37" height="54"></rect>
<text id="0" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="11" y="86" width="37" height="54"></rect>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="47" y="85.973154" width="37" height="54"></rect>
<text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="26" y="116.973154">0</tspan>
</text>
<text id="&quot;Яблоко&quot;" transform="translate(30.000000, 51.973154) rotate(-89.000000) translate(-30.000000, -51.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="&quot;Яблоко&quot;" sketch:type="MSTextLayer" transform="translate(30.000000, 51.973154) rotate(-89.000000) translate(-30.000000, -51.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="-1" y="53.973154">"Яблоко"</tspan>
</text>
<path d="M437,158.519052 L446,141.912886 L440,141.912886 L440,69.973154 L433.442871,69.973154 L434,141.912886 L428,141.912886 L437,158.519052 Z" id="Shape-2" fill="#EE6B47" transform="translate(437.000000, 114.246103) rotate(-90.000000) translate(-437.000000, -114.246103) "></path>
<rect id="Rectangle-12" stroke="#E8C48E" stroke-width="2" x="495" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-9" stroke="#E8C48E" stroke-width="2" x="531" y="85.973154" width="37" height="54"></rect>
<text id="-5" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<path d="M437,158.519052 L446,141.912886 L440,141.912886 L440,69.973154 L433.442871,69.973154 L434,141.912886 L428,141.912886 L437,158.519052 Z" id="Shape-2" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(437.000000, 114.246103) rotate(-90.000000) translate(-437.000000, -114.246103) "></path>
<rect id="Rectangle-12" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="495" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-9" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="531" y="85.973154" width="37" height="54"></rect>
<text id="-5" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="510" y="116.973154">0</tspan>
</text>
<text id="-6" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="-6" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="547" y="116.973154">1</tspan>
</text>
<rect id="Rectangle-10" stroke="#E8C48E" stroke-width="2" x="567" y="85.973154" width="37" height="54"></rect>
<text id="-7" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-10" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="567" y="85.973154" width="37" height="54"></rect>
<text id="-7" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="583" y="116.973154">2</tspan>
</text>
<text id="&quot;Апельсин&quot;-3" transform="translate(516.500000, 44.973154) rotate(-89.000000) translate(-516.500000, -44.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="&quot;Апельсин&quot;-3" sketch:type="MSTextLayer" transform="translate(516.500000, 44.973154) rotate(-89.000000) translate(-516.500000, -44.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="478" y="46.973154">"Апельсин"</tspan>
</text>
<text id="&quot;Груша&quot;-3" transform="translate(549.000000, 56.973154) rotate(-89.000000) translate(-549.000000, -56.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="&quot;Груша&quot;-3" sketch:type="MSTextLayer" transform="translate(549.000000, 56.973154) rotate(-89.000000) translate(-549.000000, -56.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="522" y="58.973154">"Груша"</tspan>
</text>
<text id="&quot;Лимон&quot;-3" transform="translate(587.000000, 55.973154) rotate(-89.000000) translate(-587.000000, -55.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="&quot;Лимон&quot;-3" sketch:type="MSTextLayer" transform="translate(587.000000, 55.973154) rotate(-89.000000) translate(-587.000000, -55.973154) " font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="560" y="57.973154">"Лимон"</tspan>
</text>
<text id="length-=-3" font-family="Consolas" font-size="14" font-weight="normal">
<text id="length-=-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal">
<tspan x="495" y="161.973154" fill="#8A704D">length = </tspan>
<tspan x="564.275391" y="161.973154" fill="#EE6B47">3</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 9.7 KiB

Before After
Before After

53
1-js/4-data-structures/7-array/array-speed.svg
View file

@ -1,46 +1,49 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="354px" height="173px" viewBox="0 0 354 173" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="354px" height="173px" viewBox="0 0 354 173" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>array-speed.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="array-speed">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="108" y="92" width="37" height="64"></rect>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="2" x="144" y="92" width="37" height="64"></rect>
<text id="0" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="array-speed.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="108" y="92" width="37" height="64"></rect>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="144" y="92" width="37" height="64"></rect>
<text id="0" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<tspan x="122.5" y="128.5">0</tspan>
</text>
<text id="1" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<tspan x="159.5" y="128.5">1</tspan>
</text>
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="2" x="180" y="92" width="37" height="64"></rect>
<text id="2" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="180" y="92" width="37" height="64"></rect>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<tspan x="195.5" y="128.5">2</tspan>
</text>
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="2" x="216" y="92" width="37" height="64"></rect>
<text id="3" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="216" y="92" width="37" height="64"></rect>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<tspan x="231.5" y="128.5">3</tspan>
</text>
<path d="M326.5,117.5 L331,111.30787 L328,111.30787 L328,95.5 L325,95.5 L325,111.30787 L322,111.30787 L326.5,117.5 Z" id="Shape-5" fill="#EE6B47" transform="translate(326.500000, 106.500000) rotate(-90.000000) translate(-326.500000, -106.500000) "></path>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="2" x="263" y="94" width="48" height="24"></rect>
<text id="pop" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<path d="M326.5,117.5 L331,111.30787 L328,111.30787 L328,95.5 L325,95.5 L325,111.30787 L322,111.30787 L326.5,117.5 Z" id="Shape-5" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(326.500000, 106.500000) rotate(-90.000000) translate(-326.500000, -106.500000) "></path>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="263" y="94" width="48" height="24"></rect>
<text id="pop" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="274.001465" y="110">pop</tspan>
</text>
<path d="M94.5,117.5 L99,111.30787 L96,111.30787 L96,95.5 L93,95.5 L93,111.30787 L90,111.30787 L94.5,117.5 Z" id="Shape-2" fill="#EE6B47" transform="translate(94.500000, 106.500000) rotate(-90.000000) translate(-94.500000, -106.500000) "></path>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" x="18" y="95" width="63" height="24"></rect>
<text id="unshift" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<path d="M94.5,117.5 L99,111.30787 L96,111.30787 L96,95.5 L93,95.5 L93,111.30787 L90,111.30787 L94.5,117.5 Z" id="Shape-2" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(94.500000, 106.500000) rotate(-90.000000) translate(-94.500000, -106.500000) "></path>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="18" y="95" width="63" height="24"></rect>
<text id="unshift" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="25.0195312" y="112">unshift</tspan>
</text>
<path d="M326.5,152.5 L331,146.30787 L328,146.30787 L328,130.5 L325,130.5 L325,146.30787 L322,146.30787 L326.5,152.5 Z" id="Shape-3" fill="#EE6B47" transform="translate(326.500000, 141.500000) scale(-1, 1) rotate(-90.000000) translate(-326.500000, -141.500000) "></path>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" transform="translate(287.000000, 141.000000) scale(-1, 1) translate(-287.000000, -141.000000) " x="263" y="129" width="48" height="24"></rect>
<text id="push" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<path d="M326.5,152.5 L331,146.30787 L328,146.30787 L328,130.5 L325,130.5 L325,146.30787 L322,146.30787 L326.5,152.5 Z" id="Shape-3" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(326.500000, 141.500000) scale(-1, 1) rotate(-90.000000) translate(-326.500000, -141.500000) "></path>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" transform="translate(287.000000, 141.000000) scale(-1, 1) translate(-287.000000, -141.000000) " x="263" y="129" width="48" height="24"></rect>
<text id="push" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="270.344238" y="146">push</tspan>
</text>
<path d="M93.5,152.5 L98,146.30787 L95,146.30787 L95,130.5 L92,130.5 L92,146.30787 L89,146.30787 L93.5,152.5 Z" id="Shape-4" fill="#EE6B47" transform="translate(93.500000, 141.500000) scale(-1, 1) rotate(-90.000000) translate(-93.500000, -141.500000) "></path>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="2" transform="translate(48.500000, 142.000000) scale(-1, 1) translate(-48.500000, -142.000000) " x="17" y="130" width="63" height="24"></rect>
<text id="shift" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<path d="M93.5,152.5 L98,146.30787 L95,146.30787 L95,130.5 L92,130.5 L92,146.30787 L89,146.30787 L93.5,152.5 Z" id="Shape-4" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(93.500000, 141.500000) scale(-1, 1) rotate(-90.000000) translate(-93.500000, -141.500000) "></path>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" transform="translate(48.500000, 142.000000) scale(-1, 1) translate(-48.500000, -142.000000) " x="17" y="130" width="63" height="24"></rect>
<text id="shift" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="33.40625" y="147">shift</tspan>
</text>
<path d="M329.692702,35.9208538 C328.741159,33.4418996 322.380448,25.276771 321.06325,24.8393085 C319.747733,24.402684 316.967917,24.5476668 316.967917,24.5476668 C315.724691,10.6226153 312.654031,9.09233456 310.534075,7.5612158 C308.413277,6.0309351 308.631829,12.0824997 308.631829,12.0824997 C307.90052,9.53063511 304.170841,5.37474135 301.611258,6.0309351 C299.051675,6.68712885 300.442004,15.0718268 300.807658,17.403284 C301.174994,19.7372554 304.464206,23.0894585 305.705751,24.9122189 C306.948977,26.7341413 306.291639,28.3381704 306.291639,28.3381704 C305.267806,29.7972168 305.414068,33.4662031 305.414068,33.4662031 C302.856166,33.052206 300.369713,35.9937642 300.369713,35.9937642 C294.591528,33.5164861 291.284664,33.4662031 291.284664,33.4662031 C273.750048,33.6405177 271.518293,50.2808537 271.260234,55.8002561 C270.633997,55.5287276 269.763991,55.5362701 268.640969,56.4178995 C266.05953,58.4451443 267.901253,60.9291268 267.901253,60.9291268 C267.174147,60.7296707 266.453765,57.3883623 266.453765,57.3883623 C264.803696,60.9064994 267.803746,63.3091909 267.803746,63.3091909 C266.685767,63.5480354 264.836478,62.2985017 264.836478,62.2985017 C265.01132,62.533994 266.168807,64.3316129 268.417373,66.6789931 C271.25519,69.6389884 275.440466,69.0012318 277.504104,68.9216169 C277.578075,68.9367018 277.641119,68.9299974 277.69996,68.9132364 C277.718453,68.9132364 277.741149,68.9115603 277.759642,68.9115603 L277.769729,68.8864188 C278.094195,68.7422741 278.351414,68.2838603 279.698873,68.7338936 L281.430479,69.8200074 C281.430479,69.8200074 296.731659,69.9616379 299.127328,69.8200074 C300.426873,69.7429067 297.810971,66.0295037 297.810971,66.0295037 C302.563642,65.737024 305.123225,63.987174 305.123225,63.987174 L312.46574,69.9616379 L320.168867,69.9616379 C321.682762,69.9616379 320.754755,68.3442 320.754755,68.3442 L313.531603,61.7998615 L314.335203,60.4154016 C317.114179,59.8321183 319.088714,57.1344329 319.379557,56.624898 C319.673762,56.1145251 319.454369,52.3240215 319.454369,52.3240215 C319.454369,52.3240215 319.747733,52.6885736 320.989278,51.1566168 C322.233345,49.625498 320.843857,47.2202923 320.479043,46.7090813 C320.114229,46.2003845 319.382079,42.989812 319.382079,42.989812 C319.382079,42.989812 324.280171,42.6981704 325.451107,42.114887 C326.61868,41.5341178 330.642564,38.3989699 329.692702,35.9208538 L329.692702,35.9208538 Z" id="Shape" fill="#E8C48F"></path>
<path d="M85.866,34.289 C81.305,36.924 81.449,43.361 70.284,51.976 C67.566,54.073 73.161,65.079 70.738,67.532 C68.27,70.031 58.388,70.155 55.999,68.792 C52.482,66.785 55.239,61.549 56.026,53.906 C48.82,54.641 46.485,54.521 39.243,54.219 C40.347,60.018 41.962,66.465 39.62,68.589 C37.711,70.32 28.422,70.508 25.517,68.611 C21.882,66.237 28.151,52.736 26.026,52.518 C23.581,52.268 8.673,52.852 11.31,36.676 C14.099,40.752 18.87,44.588 24.342,42.864 C25.088,29.141 33.413,16.796 46.7,16.796 C59.987,16.796 69.384,27.103 69.454,39.875 C77.321,33.967 71.538,19.449 80.968,14.018 C87.68,10.152 95.531,12.149 99.275,18.275 C101.23,21.474 101.84,27.115 99.416,30.213 C95.809,34.823 88.995,32.481 85.866,34.289 L85.866,34.289 Z" id="Shape" fill="#E8C48F"></path>
<path d="M329.692702,35.9208538 C328.741159,33.4418996 322.380448,25.276771 321.06325,24.8393085 C319.747733,24.402684 316.967917,24.5476668 316.967917,24.5476668 C315.724691,10.6226153 312.654031,9.09233456 310.534075,7.5612158 C308.413277,6.0309351 308.631829,12.0824997 308.631829,12.0824997 C307.90052,9.53063511 304.170841,5.37474135 301.611258,6.0309351 C299.051675,6.68712885 300.442004,15.0718268 300.807658,17.403284 C301.174994,19.7372554 304.464206,23.0894585 305.705751,24.9122189 C306.948977,26.7341413 306.291639,28.3381704 306.291639,28.3381704 C305.267806,29.7972168 305.414068,33.4662031 305.414068,33.4662031 C302.856166,33.052206 300.369713,35.9937642 300.369713,35.9937642 C294.591528,33.5164861 291.284664,33.4662031 291.284664,33.4662031 C273.750048,33.6405177 271.518293,50.2808537 271.260234,55.8002561 C270.633997,55.5287276 269.763991,55.5362701 268.640969,56.4178995 C266.05953,58.4451443 267.901253,60.9291268 267.901253,60.9291268 C267.174147,60.7296707 266.453765,57.3883623 266.453765,57.3883623 C264.803696,60.9064994 267.803746,63.3091909 267.803746,63.3091909 C266.685767,63.5480354 264.836478,62.2985017 264.836478,62.2985017 C265.01132,62.533994 266.168807,64.3316129 268.417373,66.6789931 C271.25519,69.6389884 275.440466,69.0012318 277.504104,68.9216169 C277.578075,68.9367018 277.641119,68.9299974 277.69996,68.9132364 C277.718453,68.9132364 277.741149,68.9115603 277.759642,68.9115603 L277.769729,68.8864188 C278.094195,68.7422741 278.351414,68.2838603 279.698873,68.7338936 L281.430479,69.8200074 C281.430479,69.8200074 296.731659,69.9616379 299.127328,69.8200074 C300.426873,69.7429067 297.810971,66.0295037 297.810971,66.0295037 C302.563642,65.737024 305.123225,63.987174 305.123225,63.987174 L312.46574,69.9616379 L320.168867,69.9616379 C321.682762,69.9616379 320.754755,68.3442 320.754755,68.3442 L313.531603,61.7998615 L314.335203,60.4154016 C317.114179,59.8321183 319.088714,57.1344329 319.379557,56.624898 C319.673762,56.1145251 319.454369,52.3240215 319.454369,52.3240215 C319.454369,52.3240215 319.747733,52.6885736 320.989278,51.1566168 C322.233345,49.625498 320.843857,47.2202923 320.479043,46.7090813 C320.114229,46.2003845 319.382079,42.989812 319.382079,42.989812 C319.382079,42.989812 324.280171,42.6981704 325.451107,42.114887 C326.61868,41.5341178 330.642564,38.3989699 329.692702,35.9208538 L329.692702,35.9208538 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M85.866,34.289 C81.305,36.924 81.449,43.361 70.284,51.976 C67.566,54.073 73.161,65.079 70.738,67.532 C68.27,70.031 58.388,70.155 55.999,68.792 C52.482,66.785 55.239,61.549 56.026,53.906 C48.82,54.641 46.485,54.521 39.243,54.219 C40.347,60.018 41.962,66.465 39.62,68.589 C37.711,70.32 28.422,70.508 25.517,68.611 C21.882,66.237 28.151,52.736 26.026,52.518 C23.581,52.268 8.673,52.852 11.31,36.676 C14.099,40.752 18.87,44.588 24.342,42.864 C25.088,29.141 33.413,16.796 46.7,16.796 C59.987,16.796 69.384,27.103 69.454,39.875 C77.321,33.967 71.538,19.449 80.968,14.018 C87.68,10.152 95.531,12.149 99.275,18.275 C101.23,21.474 101.84,27.115 99.416,30.213 C95.809,34.823 88.995,32.481 85.866,34.289 L85.866,34.289 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

Before After
Before After

21
1-js/4-data-structures/7-array/queue.svg
View file

@ -1,14 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="187px" height="108px" viewBox="0 0 187 108" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="187px" height="108px" viewBox="0 0 187 108" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>queue.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="queue">
<path d="M90.795,43.15 C89.575,43.15 88.455,42.343 88.111,41.11 C87.696,39.626 88.563,38.088 90.047,37.674 L112.439,31.421 C113.922,31.006 115.46,31.874 115.876,33.357 C116.29,34.841 115.423,36.379 113.939,36.793 L91.547,43.046 C91.296,43.117 91.043,43.15 90.795,43.15 L90.795,43.15 Z" id="Shape" fill="#E8C48F"></path>
<path d="M90.795,54.188 C89.575,54.188 88.455,53.381 88.111,52.148 C87.696,50.664 88.563,49.126 90.047,48.712 L112.439,42.459 C113.922,42.045 115.46,42.912 115.876,44.395 C116.29,45.879 115.423,47.417 113.939,47.831 L91.547,54.084 C91.296,54.155 91.043,54.188 90.795,54.188 L90.795,54.188 Z" id="Shape" fill="#E8C48F"></path>
<path d="M90.795,64.557 C89.575,64.557 88.455,63.75 88.111,62.517 C87.696,61.034 88.563,59.496 90.047,59.081 L112.439,52.828 C113.922,52.414 115.46,53.281 115.876,54.764 C116.29,56.248 115.423,57.786 113.939,58.2 L91.547,64.453 C91.296,64.523 91.043,64.557 90.795,64.557 L90.795,64.557 Z" id="Shape" fill="#E8C48F"></path>
<path d="M114.837,17.439 L114.837,15.655 C114.837,12.042 111.816,8.331 108.286,9.104 C98.874,11.164 77.568,18.063 66.433,20.457 C62.902,21.216 59.881,24.193 59.881,27.806 L59.881,88.758 C59.881,92.371 62.857,95.819 66.433,95.31 C68.432,95.026 70.7,94.563 73.161,93.97 L73.161,95.398 C73.161,99.011 76.136,102.459 79.712,101.95 C83.888,101.356 106.391999,94.5499983 112.194999,92.8389983 L112.194999,87.4649977 C106.627999,89.1029977 84.161,95.773 79.712,96.814 C78.951,96.993 78.296,96.179 78.296,95.398 L78.296,35.74 C78.218,33.948 78.915,32.453 81.011,31.893 C87.081,30.27 102.963,25.948 112.955,23.225 L114.836,22.713 C118.871,21.613 121.564,20.879 121.564,20.879 C122.345,20.879 122.98,21.514 122.98,22.295 L122.98,83.248 C122.98,84.029 122.315,84.451 121.564,84.664 C118.968,85.402 115.744,86.377 112.182,87.465 L112.195,92.839 C115.6,91.72 118.797,90.669 121.564,89.8 C125.01,88.717 128.116,87.431 128.116,83.248 L128.116,22.294 C128.117,18.682 125.095,14.97 121.565,15.743 C119.724,16.146 117.423,16.736 114.837,17.439 Z M79.713,27.096 C76.182,27.856 73.162,30.833 73.162,34.445 L73.162,88.46 C70.772,89.108 68.511,89.689 66.434,90.175 C65.673,90.353 65.018,89.539 65.018,88.758 L65.018,29.1 C64.94,27.308 65.637,25.813 67.733,25.253 C76.876,22.81 108.287,14.239 108.287,14.239 C109.068,14.239 109.703,14.874 109.703,15.655 L109.703,18.872 C99.644,21.732 87.312,25.462 79.713,27.096 L79.713,27.096 Z" id="Shape" fill="#E8C48F"></path>
<path d="M158,71.8173828 L170,59.8173828 L162,59.8173828 L162,29.1826172 L154,29.1826172 L154,59.8173828 L146,59.8173828 L158,71.8173828 Z" id="Shape-3" fill="#EE6B47" transform="translate(158.000000, 50.500000) rotate(-90.000000) translate(-158.000000, -50.500000) "></path>
<path d="M30,71.8173828 L42,59.8173828 L34,59.8173828 L34,29.1826172 L26,29.1826172 L26,59.8173828 L18,59.8173828 L30,71.8173828 Z" id="Shape-2" fill="#EE6B47" transform="translate(30.000000, 50.500000) rotate(-90.000000) translate(-30.000000, -50.500000) "></path>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="queue.svg" sketch:type="MSArtboardGroup">
<path d="M90.795,43.15 C89.575,43.15 88.455,42.343 88.111,41.11 C87.696,39.626 88.563,38.088 90.047,37.674 L112.439,31.421 C113.922,31.006 115.46,31.874 115.876,33.357 C116.29,34.841 115.423,36.379 113.939,36.793 L91.547,43.046 C91.296,43.117 91.043,43.15 90.795,43.15 L90.795,43.15 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M90.795,54.188 C89.575,54.188 88.455,53.381 88.111,52.148 C87.696,50.664 88.563,49.126 90.047,48.712 L112.439,42.459 C113.922,42.045 115.46,42.912 115.876,44.395 C116.29,45.879 115.423,47.417 113.939,47.831 L91.547,54.084 C91.296,54.155 91.043,54.188 90.795,54.188 L90.795,54.188 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M90.795,64.557 C89.575,64.557 88.455,63.75 88.111,62.517 C87.696,61.034 88.563,59.496 90.047,59.081 L112.439,52.828 C113.922,52.414 115.46,53.281 115.876,54.764 C116.29,56.248 115.423,57.786 113.939,58.2 L91.547,64.453 C91.296,64.523 91.043,64.557 90.795,64.557 L90.795,64.557 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M114.837,17.439 L114.837,15.655 C114.837,12.042 111.816,8.331 108.286,9.104 C98.874,11.164 77.568,18.063 66.433,20.457 C62.902,21.216 59.881,24.193 59.881,27.806 L59.881,88.758 C59.881,92.371 62.857,95.819 66.433,95.31 C68.432,95.026 70.7,94.563 73.161,93.97 L73.161,95.398 C73.161,99.011 76.136,102.459 79.712,101.95 C83.888,101.356 106.391999,94.5499983 112.194999,92.8389983 L112.194999,87.4649977 C106.627999,89.1029977 84.161,95.773 79.712,96.814 C78.951,96.993 78.296,96.179 78.296,95.398 L78.296,35.74 C78.218,33.948 78.915,32.453 81.011,31.893 C87.081,30.27 102.963,25.948 112.955,23.225 L114.836,22.713 C118.871,21.613 121.564,20.879 121.564,20.879 C122.345,20.879 122.98,21.514 122.98,22.295 L122.98,83.248 C122.98,84.029 122.315,84.451 121.564,84.664 C118.968,85.402 115.744,86.377 112.182,87.465 L112.195,92.839 C115.6,91.72 118.797,90.669 121.564,89.8 C125.01,88.717 128.116,87.431 128.116,83.248 L128.116,22.294 C128.117,18.682 125.095,14.97 121.565,15.743 C119.724,16.146 117.423,16.736 114.837,17.439 Z M79.713,27.096 C76.182,27.856 73.162,30.833 73.162,34.445 L73.162,88.46 C70.772,89.108 68.511,89.689 66.434,90.175 C65.673,90.353 65.018,89.539 65.018,88.758 L65.018,29.1 C64.94,27.308 65.637,25.813 67.733,25.253 C76.876,22.81 108.287,14.239 108.287,14.239 C109.068,14.239 109.703,14.874 109.703,15.655 L109.703,18.872 C99.644,21.732 87.312,25.462 79.713,27.096 L79.713,27.096 Z" id="Shape" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M158,71.8173828 L170,59.8173828 L162,59.8173828 L162,29.1826172 L154,29.1826172 L154,59.8173828 L146,59.8173828 L158,71.8173828 Z" id="Shape-3" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(158.000000, 50.500000) rotate(-90.000000) translate(-158.000000, -50.500000) "></path>
<path d="M30,71.8173828 L42,59.8173828 L34,59.8173828 L34,29.1826172 L26,29.1826172 L26,59.8173828 L18,59.8173828 L30,71.8173828 Z" id="Shape-2" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(30.000000, 50.500000) rotate(-90.000000) translate(-30.000000, -50.500000) "></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Before After
Before After

21
1-js/4-data-structures/7-array/stack.svg
View file

@ -1,14 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="145px" height="149px" viewBox="0 0 145 149" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="145px" height="149px" viewBox="0 0 145 149" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>stack.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="stack">
<path d="M40.3897441,83.61658 C38.9407258,84.172806 37.3961151,84.1250015 36.6600162,83.4286119 C35.7731815,82.5915945 36.3943939,81.1320243 38.0467333,80.1682576 L62.9811663,65.6321994 C64.6325837,64.6695806 66.6895992,64.5683288 67.5776217,65.4048903 C68.4635344,66.2430555 67.8423219,67.7026257 66.1897169,68.6657004 L41.2552839,83.2017587 C40.9757603,83.3646349 40.6842986,83.5035111 40.3897441,83.61658 L40.3897441,83.61658 Z" id="Shape-3" fill="#E8C48F"></path>
<path d="M49.8614911,90.3821136 C48.4124728,90.9383396 46.8678621,90.8905351 46.1317632,90.1941454 C45.2449284,89.3571281 45.8661409,87.8975579 47.5184803,86.9337912 L72.4529133,72.3977329 C74.1043307,71.4351141 76.1613461,71.3338624 77.0493686,72.1704238 C77.9352813,73.0085891 77.3140689,74.4681593 75.6614638,75.431234 L50.7270308,89.9672923 C50.4475073,90.1301684 50.1560456,90.2690447 49.8614911,90.3821136 L49.8614911,90.3821136 Z" id="Shape-4" fill="#E8C48F"></path>
<path d="M59.333238,95.7945404 C57.8842197,96.3507664 56.3396091,96.3029619 55.6035102,95.6065723 C54.7166754,94.7695549 55.3378878,93.3099847 56.9902273,92.346218 L81.9246603,77.8101597 C83.5760776,76.847541 85.6330931,76.7462892 86.5211156,77.5828507 C87.4070283,78.4210159 86.7858159,79.8805861 85.1332108,80.8436608 L60.1987778,95.3797191 C59.9192543,95.5425953 59.6277926,95.6814715 59.333238,95.7945404 L59.333238,95.7945404 Z" id="Shape-5" fill="#E8C48F"></path>
<path d="M135.388449,102.355616 C135.388449,101.821139 135.10159,101.328608 134.638828,101.062046 L129.704048,98.2137566 L134.638828,95.3627608 C135.10159,95.0961988 135.388449,94.6023148 135.388449,94.0691908 C135.388449,93.5333605 135.10159,93.0421828 134.638828,92.7756208 L65.0553152,52.5978233 C64.5925527,52.3312612 64.0228948,52.3312612 63.5601323,52.5978233 L14.357113,81.0062986 C13.8943505,81.2728606 13.6101981,81.7667446 13.6101981,82.3012217 C13.6101981,82.8356989 13.8943505,83.3282297 14.357113,83.5947917 L19.2932463,86.4457876 L14.357113,89.2954303 C13.8943505,89.5619923 13.6101981,90.0558763 13.6101981,90.5890003 C13.6101981,91.1248306 13.8943505,91.6173614 14.357113,91.8852766 L19.2945994,94.7349193 L14.357113,97.584562 C13.8943505,97.851124 13.6101981,98.345008 13.6101981,98.8794851 C13.6101981,99.4139623 13.8943505,99.9064931 14.357113,100.173055 L83.9433317,140.348146 C84.174713,140.482104 84.4318032,140.548406 84.6902466,140.548406 C84.94869,140.548406 85.2071334,140.480751 85.4385146,140.348146 L134.640181,111.941024 C135.102943,111.674462 135.389802,111.180578 135.389802,110.646101 C135.389802,110.111624 135.102943,109.61774 134.640181,109.352531 L129.704048,106.501535 L134.640181,103.651893 C135.10159,103.383977 135.388449,102.890093 135.388449,102.355616 L135.388449,102.355616 Z M64.3070472,55.6179574 L130.9029,94.0678377 L84.6902466,120.751102 L18.0930406,82.3012217 L64.3070472,55.6179574 L64.3070472,55.6179574 Z M126.915295,108.343113 L130.9029,110.646101 L84.6902466,137.329365 L18.0930406,98.8794851 L22.282259,96.4601303 L83.9433317,132.060368 C84.174713,132.194325 84.4318032,132.259275 84.6902466,132.259275 C84.94869,132.259275 85.2071334,132.192972 85.4385146,132.060368 L126.736685,108.214568 C126.792162,108.260574 126.850345,108.30658 126.915295,108.343113 L126.915295,108.343113 Z M84.6902466,129.038881 L18.1688146,90.6336529 L18.0930406,90.5890003 L22.282259,88.1709986 L83.9433317,123.771236 C84.174713,123.905194 84.4318032,123.971496 84.6902466,123.971496 C84.94869,123.971496 85.2071334,123.903841 85.4385146,123.771236 L126.844933,99.8645468 C126.96536,100.028273 127.116907,100.171702 127.303636,100.279951 L130.904253,102.356969 L84.6902466,129.038881 L84.6902466,129.038881 Z" id="Shape-6" fill="#E8C48F"></path>
<path d="M63.0458601,64.9371416 C62.7513542,65.2686528 62.3912905,65.4256131 62.009038,65.4256131 C61.2455417,65.4256131 60.3912729,64.7991247 59.7851153,63.6733399 L50.5384378,46.5267717 C49.7295553,45.0248233 50.2479663,43.259019 51.3412689,43.259019 C51.4774274,43.259019 51.6236718,43.2860812 51.7769762,43.3442647 L56.2671822,45.0803007 L56.3337485,10.4515938 L68.6424804,18.5385228 L68.6424802,49.8865357 L73.1347033,51.6252778 C74.5104088,52.1584018 74.9158586,53.4059662 74.0313324,54.4004997 L63.0458601,64.9371416 Z" id="Shape" fill="#EE6B47"></path>
<path d="M94.1673144,33.9428793 C93.8728085,33.6113682 93.5127448,33.4544078 93.1304923,33.4544078 C92.366996,33.4544078 91.5127272,34.0808962 90.9065696,35.206681 L81.6598921,52.3532492 C80.8510096,53.8551977 81.3694206,55.6210019 82.4627232,55.6210019 C82.5988818,55.6210019 82.7451261,55.5939398 82.8984305,55.5357562 L87.3886365,53.7997203 L87.4552029,88.4284272 L99.7639347,95.9946299 L99.7639345,48.9934853 L104.256158,47.2547431 C105.631863,46.7216191 106.037313,45.4740547 105.152787,44.4795213 L94.1673144,33.9428793 Z" id="Shape-2" fill="#EE6B47"></path>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="stack.svg" sketch:type="MSArtboardGroup">
<path d="M40.3897441,83.61658 C38.9407258,84.172806 37.3961151,84.1250015 36.6600162,83.4286119 C35.7731815,82.5915945 36.3943939,81.1320243 38.0467333,80.1682576 L62.9811663,65.6321994 C64.6325837,64.6695806 66.6895992,64.5683288 67.5776217,65.4048903 C68.4635344,66.2430555 67.8423219,67.7026257 66.1897169,68.6657004 L41.2552839,83.2017587 C40.9757603,83.3646349 40.6842986,83.5035111 40.3897441,83.61658 L40.3897441,83.61658 Z" id="Shape-3" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M49.8614911,90.3821136 C48.4124728,90.9383396 46.8678621,90.8905351 46.1317632,90.1941454 C45.2449284,89.3571281 45.8661409,87.8975579 47.5184803,86.9337912 L72.4529133,72.3977329 C74.1043307,71.4351141 76.1613461,71.3338624 77.0493686,72.1704238 C77.9352813,73.0085891 77.3140689,74.4681593 75.6614638,75.431234 L50.7270308,89.9672923 C50.4475073,90.1301684 50.1560456,90.2690447 49.8614911,90.3821136 L49.8614911,90.3821136 Z" id="Shape-4" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M59.333238,95.7945404 C57.8842197,96.3507664 56.3396091,96.3029619 55.6035102,95.6065723 C54.7166754,94.7695549 55.3378878,93.3099847 56.9902273,92.346218 L81.9246603,77.8101597 C83.5760776,76.847541 85.6330931,76.7462892 86.5211156,77.5828507 C87.4070283,78.4210159 86.7858159,79.8805861 85.1332108,80.8436608 L60.1987778,95.3797191 C59.9192543,95.5425953 59.6277926,95.6814715 59.333238,95.7945404 L59.333238,95.7945404 Z" id="Shape-5" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M135.388449,102.355616 C135.388449,101.821139 135.10159,101.328608 134.638828,101.062046 L129.704048,98.2137566 L134.638828,95.3627608 C135.10159,95.0961988 135.388449,94.6023148 135.388449,94.0691908 C135.388449,93.5333605 135.10159,93.0421828 134.638828,92.7756208 L65.0553152,52.5978233 C64.5925527,52.3312612 64.0228948,52.3312612 63.5601323,52.5978233 L14.357113,81.0062986 C13.8943505,81.2728606 13.6101981,81.7667446 13.6101981,82.3012217 C13.6101981,82.8356989 13.8943505,83.3282297 14.357113,83.5947917 L19.2932463,86.4457876 L14.357113,89.2954303 C13.8943505,89.5619923 13.6101981,90.0558763 13.6101981,90.5890003 C13.6101981,91.1248306 13.8943505,91.6173614 14.357113,91.8852766 L19.2945994,94.7349193 L14.357113,97.584562 C13.8943505,97.851124 13.6101981,98.345008 13.6101981,98.8794851 C13.6101981,99.4139623 13.8943505,99.9064931 14.357113,100.173055 L83.9433317,140.348146 C84.174713,140.482104 84.4318032,140.548406 84.6902466,140.548406 C84.94869,140.548406 85.2071334,140.480751 85.4385146,140.348146 L134.640181,111.941024 C135.102943,111.674462 135.389802,111.180578 135.389802,110.646101 C135.389802,110.111624 135.102943,109.61774 134.640181,109.352531 L129.704048,106.501535 L134.640181,103.651893 C135.10159,103.383977 135.388449,102.890093 135.388449,102.355616 L135.388449,102.355616 Z M64.3070472,55.6179574 L130.9029,94.0678377 L84.6902466,120.751102 L18.0930406,82.3012217 L64.3070472,55.6179574 L64.3070472,55.6179574 Z M126.915295,108.343113 L130.9029,110.646101 L84.6902466,137.329365 L18.0930406,98.8794851 L22.282259,96.4601303 L83.9433317,132.060368 C84.174713,132.194325 84.4318032,132.259275 84.6902466,132.259275 C84.94869,132.259275 85.2071334,132.192972 85.4385146,132.060368 L126.736685,108.214568 C126.792162,108.260574 126.850345,108.30658 126.915295,108.343113 L126.915295,108.343113 Z M84.6902466,129.038881 L18.1688146,90.6336529 L18.0930406,90.5890003 L22.282259,88.1709986 L83.9433317,123.771236 C84.174713,123.905194 84.4318032,123.971496 84.6902466,123.971496 C84.94869,123.971496 85.2071334,123.903841 85.4385146,123.771236 L126.844933,99.8645468 C126.96536,100.028273 127.116907,100.171702 127.303636,100.279951 L130.904253,102.356969 L84.6902466,129.038881 L84.6902466,129.038881 Z" id="Shape-6" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<path d="M63.0458601,64.9371416 C62.7513542,65.2686528 62.3912905,65.4256131 62.009038,65.4256131 C61.2455417,65.4256131 60.3912729,64.7991247 59.7851153,63.6733399 L50.5384378,46.5267717 C49.7295553,45.0248233 50.2479663,43.259019 51.3412689,43.259019 C51.4774274,43.259019 51.6236718,43.2860812 51.7769762,43.3442647 L56.2671822,45.0803007 L56.3337485,10.4515938 L68.6424804,18.5385228 L68.6424802,49.8865357 L73.1347033,51.6252778 C74.5104088,52.1584018 74.9158586,53.4059662 74.0313324,54.4004997 L63.0458601,64.9371416 Z" id="Shape" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M94.1673144,33.9428793 C93.8728085,33.6113682 93.5127448,33.4544078 93.1304923,33.4544078 C92.366996,33.4544078 91.5127272,34.0808962 90.9065696,35.206681 L81.6598921,52.3532492 C80.8510096,53.8551977 81.3694206,55.6210019 82.4627232,55.6210019 C82.5988818,55.6210019 82.7451261,55.5939398 82.8984305,55.5357562 L87.3886365,53.7997203 L87.4552029,88.4284272 L99.7639347,95.9946299 L99.7639345,48.9934853 L104.256158,47.2547431 C105.631863,46.7216191 106.037313,45.4740547 105.152787,44.4795213 L94.1673144,33.9428793 Z" id="Shape-2" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

Before After
Before After

51
1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list.svg
View file

@ -1,57 +1,60 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="615px" height="77px" viewBox="0 0 615 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="615px" height="77px" viewBox="0 0 615 77" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>linked-list.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="linked-list">
<rect id="Rectangle-15" stroke="#E8C48E" stroke-width="2" x="10" y="29" width="80" height="34"></rect>
<text id="value" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="linked-list.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-15" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="10" y="29" width="80" height="34"></rect>
<text id="value" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="13" y="20">value</tspan>
</text>
<text id="-8" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="-8" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="45" y="50">1</tspan>
</text>
<path d="M75.73,45 L147.27,45" id="Line-21" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M75.73,45 L147.27,45" id="Line-21" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-21-decoration-1" d="M146.73,45 C142.95,43.95 139.71,43.05 135.93,42 C135.93,44.1 135.93,45.9 135.93,48 C139.71,46.95 142.95,46.05 146.73,45 C146.73,45 146.73,45 146.73,45 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="next" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="next" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="99" y="34">next</tspan>
</text>
<rect id="Rectangle-11" stroke="#E8C48E" stroke-width="2" x="150" y="29" width="80" height="34"></rect>
<text id="value-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-11" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="150" y="29" width="80" height="34"></rect>
<text id="value-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="153" y="20">value</tspan>
</text>
<text id="-9" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="-9" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="185" y="50">2</tspan>
</text>
<path d="M215.73,45 L287.27,45" id="Line-22" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M215.73,45 L287.27,45" id="Line-22" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-22-decoration-1" d="M286.73,45 C282.95,43.95 279.71,43.05 275.93,42 C275.93,44.1 275.93,45.9 275.93,48 C279.71,46.95 282.95,46.05 286.73,45 C286.73,45 286.73,45 286.73,45 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="next-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="next-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="239" y="34">next</tspan>
</text>
<rect id="Rectangle-13" stroke="#E8C48E" stroke-width="2" x="289" y="29" width="80" height="34"></rect>
<text id="value-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-13" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="289" y="29" width="80" height="34"></rect>
<text id="value-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="292" y="20">value</tspan>
</text>
<text id="-10" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="-10" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="324" y="50">3</tspan>
</text>
<path d="M354.73,45 L426.27,45" id="Line-23" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M354.73,45 L426.27,45" id="Line-23" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-23-decoration-1" d="M425.73,45 C421.95,43.95 418.71,43.05 414.93,42 C414.93,44.1 414.93,45.9 414.93,48 C418.71,46.95 421.95,46.05 425.73,45 C425.73,45 425.73,45 425.73,45 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="next-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="next-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="378" y="34">next</tspan>
</text>
<rect id="Rectangle-14" stroke="#E8C48E" stroke-width="2" x="429" y="29" width="80" height="34"></rect>
<text id="value-4" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-14" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="429" y="29" width="80" height="34"></rect>
<text id="value-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="432" y="20">value</tspan>
</text>
<text id="4" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="464" y="50">4</tspan>
</text>
<path d="M494.73,45 L566.27,45" id="Line-24" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M494.73,45 L566.27,45" id="Line-24" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-24-decoration-1" d="M565.73,45 C561.95,43.95 558.71,43.05 554.93,42 C554.93,44.1 554.93,45.9 554.93,48 C558.71,46.95 561.95,46.05 565.73,45 C565.73,45 565.73,45 565.73,45 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="next-4" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="next-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="518" y="34">next</tspan>
</text>
<text id="null" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="null" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="574" y="49">null</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

Before After
Before After

43
1-js/4-data-structures/9-array-iteration/reduce.svg
View file

@ -1,61 +1,64 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="613px" height="129px" viewBox="0 0 613 129" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="613px" height="129px" viewBox="0 0 613 129" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>reduce.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="reduce">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="8" y="74" width="80" height="40"></rect>
<text id="1" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="reduce.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="8" y="74" width="80" height="40"></rect>
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="44" y="99">1</tspan>
</text>
<text id="sum" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="sum" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="15" y="17">sum</tspan>
<tspan x="15" y="33">0</tspan>
<tspan x="15" y="49">current</tspan>
<tspan x="15" y="65">1</tspan>
</text>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="2" x="87" y="74" width="80" height="40"></rect>
<text id="2" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="87" y="74" width="80" height="40"></rect>
<text id="2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="123" y="99">2</tspan>
</text>
<text id="sum" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="sum" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="94" y="17">sum</tspan>
<tspan x="94" y="33">0+1</tspan>
<tspan x="94" y="49">current</tspan>
<tspan x="94" y="65">2</tspan>
</text>
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="2" x="166" y="74" width="80" height="40"></rect>
<text id="3" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="166" y="74" width="80" height="40"></rect>
<text id="3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="202" y="99">3</tspan>
</text>
<text id="sum" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="sum" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="173" y="17">sum</tspan>
<tspan x="173" y="33">0+1+2</tspan>
<tspan x="173" y="49">current</tspan>
<tspan x="173" y="65">3</tspan>
</text>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="2" x="245" y="74" width="80" height="40"></rect>
<text id="4" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="245" y="74" width="80" height="40"></rect>
<text id="4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="281" y="99">4</tspan>
</text>
<text id="sum" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="sum" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="252" y="17">sum</tspan>
<tspan x="252" y="33">0+1+2+3</tspan>
<tspan x="252" y="49">current</tspan>
<tspan x="252" y="65">4</tspan>
</text>
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="2" x="324" y="74" width="80" height="40"></rect>
<text id="5" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="324" y="74" width="80" height="40"></rect>
<text id="5" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="360" y="99">5</tspan>
</text>
<text id="sum" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="sum" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="331" y="17">sum</tspan>
<tspan x="331" y="33">0+1+2+3+4</tspan>
<tspan x="331" y="49">current</tspan>
<tspan x="331" y="65">5</tspan>
</text>
<path d="M420.5,92 L470.5,92" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M420.5,92 L470.5,92" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M470.5,92 C466.72,90.95 463.48,90.05 459.7,89 C459.7,91.1 459.7,92.9 459.7,95 C463.48,93.95 466.72,93.05 470.5,92 C470.5,92 470.5,92 470.5,92 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="0+1+2+3+4+5-=-15" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="0+1+2+3+4+5-=-15" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="485" y="96">0+1+2+3+4+5 = 15</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Before After
Before After

59
1-js/5-functions-closures/6-memory-management/family-no-family.svg
View file

@ -1,61 +1,64 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="420px" height="279px" viewBox="0 0 420 279" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="420px" height="279px" viewBox="0 0 420 279" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>family-no-family.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family-no-family">
<path d="M256.5,233.5 L197.5,233.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="family-no-family.svg" sketch:type="MSArtboardGroup">
<path d="M256.5,233.5 L197.5,233.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M197.5,233.5 C201.28,234.55 204.52,235.45 208.3,236.5 C208.3,234.4 208.3,232.6 208.3,230.5 C204.52,231.55 201.28,232.45 197.5,233.5 C197.5,233.5 197.5,233.5 197.5,233.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="167" y="24" width="120" height="50"></rect>
<text id="window" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="167" y="24" width="120" height="50"></rect>
<text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="201" y="17">window</tspan>
</text>
<text id="Корень" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="Корень" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="202" y="43">Корень</tspan>
</text>
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="186" y="122" width="80" height="28"></rect>
<text id="Object" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" x="186" y="122" width="80" height="28"></rect>
<text id="Object" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="203" y="139">Object</tspan>
</text>
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="68" y="190" width="120" height="50"></rect>
<text id="Object-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" x="68" y="190" width="120" height="50"></rect>
<text id="Object-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="103" y="208">Object</tspan>
</text>
<text id="father" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="father" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="99" y="170">father</tspan>
</text>
<text id="wife" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="wife" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="211" y="191">wife</tspan>
</text>
<text id="name:-&quot;Василий&quot;" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
<text id="name:-&quot;Василий&quot;" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="83" y="228">name: "Василий"</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="277" y="190" width="120" height="50"></rect>
<text id="name:-&quot;Мария&quot;" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" x="277" y="190" width="120" height="50"></rect>
<text id="name:-&quot;Мария&quot;" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="294" y="228">name: "Мария"</tspan>
</text>
<text id="mother" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="mother" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="306" y="170">mother</tspan>
</text>
<text id="Object-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="Object-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="308" y="208">Object</tspan>
</text>
<path d="M178.5,155.5 L132.5,187.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M178.5,155.5 L132.5,187.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="M132.529309,187.479611 C136.231948,186.182938 139.405639,185.071504 143.108278,183.77483 C141.909043,182.05093 140.881127,180.5733 139.681891,178.849399 C137.178487,181.869973 135.032713,184.459037 132.529309,187.479611 C132.529309,187.479611 132.529309,187.479611 132.529309,187.479611 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M197.5,199.5 L258.5,199.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M197.5,199.5 L258.5,199.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M258.5,199.5 C254.72,198.45 251.48,197.55 247.7,196.5 C247.7,198.6 247.7,200.4 247.7,202.5 C251.48,201.45 254.72,200.55 258.5,199.5 C258.5,199.5 258.5,199.5 258.5,199.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="husband" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="husband" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="200" y="224">husband</tspan>
</text>
<path d="M272.5,155.5 L319.5,187.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M272.5,155.5 L319.5,187.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M318.789558,187.016295 C316.255943,184.021016 314.084274,181.453634 311.550659,178.458354 C310.368798,180.194213 309.355774,181.682091 308.173913,183.41795 C311.889389,184.677371 315.074082,185.756874 318.789558,187.016295 C318.789558,187.016295 318.789558,187.016295 318.789558,187.016295 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<rect id="Rectangle-5" stroke="#D0011B" stroke-width="2" x="47" y="111" width="366" height="152"></rect>
<text id="family:-null" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-5" stroke="#D0011B" stroke-width="2" sketch:type="MSShapeGroup" x="47" y="111" width="366" height="152"></rect>
<text id="family:-null" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="181" y="66">family: null</tspan>
</text>
<g id="noun_48910_cc" transform="translate(8.000000, 110.000000)">
<path d="M17.5030263,1.75054945 L12.4969737,1.75054945 C12.3098684,1.75054945 12.1571053,1.90364835 12.1571053,2.09156044 L12.1571053,3.21745055 L17.8432895,3.21745055 L17.8432895,2.09156044 C17.8432895,1.90364835 17.6905263,1.75054945 17.5030263,1.75054945 L17.5030263,1.75054945 Z" id="Shape"></path>
<path d="M28.3638158,3.21745055 L19.5896053,3.21745055 L19.5896053,2.09156044 C19.5896053,0.937978022 18.6540789,4.4408921e-16 17.5030263,4.4408921e-16 L12.4969737,4.4408921e-16 C11.3463158,4.4408921e-16 10.4103947,0.937978022 10.4103947,2.09156044 L10.4103947,3.21745055 L1.63657895,3.21745055 C0.9375,3.21745055 0.370657895,3.78514286 0.370657895,4.48575824 L0.370657895,4.57516484 C0.370657895,5.27578022 0.9375,5.84347253 1.63657895,5.84347253 L28.3638158,5.84347253 C29.0628947,5.84347253 29.6297368,5.27578022 29.6297368,4.57516484 L29.6297368,4.48575824 C29.6297368,3.78514286 29.0625,3.21745055 28.3638158,3.21745055 L28.3638158,3.21745055 Z M17.8432895,3.21745055 L12.1571053,3.21745055 L12.1571053,2.09156044 C12.1571053,1.90364835 12.3098684,1.75054945 12.4969737,1.75054945 L17.5034211,1.75054945 C17.6909211,1.75054945 17.8432895,1.90364835 17.8432895,2.09156044 L17.8432895,3.21745055 L17.8432895,3.21745055 Z" id="Shape" fill="#D0021B"></path>
<path d="M26.0542105,6.28101099 L3.7275,6.28101099 C2.42960526,6.28101099 1.37723684,6.0567033 1.37723684,7.35784615 L3.13973684,33.195956 C3.13973684,34.4959121 4.1925,35.6047912 5.49039474,35.6047912 L24.2921053,35.6047912 C25.59,35.6047912 26.6423684,34.4959121 26.6423684,33.195956 L28.4048684,7.35784615 C28.4044737,6.0567033 27.3521053,6.28101099 26.0542105,6.28101099 L26.0542105,6.28101099 Z M9.63710526,32.1927033 C9.26013158,32.2053626 8.94552632,31.932 8.93289474,31.5807033 L8.23894737,11.664 C8.22671053,11.3127033 8.52236842,11.0171868 8.89815789,11.0041319 C9.27513158,10.9910769 9.58973684,11.2652308 9.60236842,11.6165275 L10.2963158,31.5332308 C10.3085526,31.8841319 10.0132895,32.180044 9.63710526,32.1927033 L9.63710526,32.1927033 Z M15.6809211,31.5632967 C15.6809211,31.9145934 15.3753947,32.1998242 14.9988158,32.1998242 C14.6222368,32.1998242 14.3167105,31.9141978 14.3167105,31.5632967 L14.3167105,11.6343297 C14.3167105,11.2826374 14.6222368,10.9978022 14.9988158,10.9978022 C15.3753947,10.9978022 15.6809211,11.2826374 15.6809211,11.6343297 L15.6809211,31.5632967 L15.6809211,31.5632967 Z M21.0651316,31.5810989 C21.0528947,31.9323956 20.7378947,32.2057582 20.3609211,32.1930989 C19.9847368,32.1804396 19.6894737,31.8845275 19.7017105,31.5332308 L20.3956579,11.6165275 C20.4078947,11.2652308 20.7225,10.9910769 21.0994737,11.0041319 C21.4756579,11.0175824 21.7713158,11.3127033 21.7590789,11.664 L21.0651316,31.5810989 L21.0651316,31.5810989 Z" id="Shape" fill="#D0021B"></path>
<g id="noun_48910_cc" sketch:type="MSLayerGroup" transform="translate(8.000000, 110.000000)">
<path d="M17.5030263,1.75054945 L12.4969737,1.75054945 C12.3098684,1.75054945 12.1571053,1.90364835 12.1571053,2.09156044 L12.1571053,3.21745055 L17.8432895,3.21745055 L17.8432895,2.09156044 C17.8432895,1.90364835 17.6905263,1.75054945 17.5030263,1.75054945 L17.5030263,1.75054945 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M28.3638158,3.21745055 L19.5896053,3.21745055 L19.5896053,2.09156044 C19.5896053,0.937978022 18.6540789,4.4408921e-16 17.5030263,4.4408921e-16 L12.4969737,4.4408921e-16 C11.3463158,4.4408921e-16 10.4103947,0.937978022 10.4103947,2.09156044 L10.4103947,3.21745055 L1.63657895,3.21745055 C0.9375,3.21745055 0.370657895,3.78514286 0.370657895,4.48575824 L0.370657895,4.57516484 C0.370657895,5.27578022 0.9375,5.84347253 1.63657895,5.84347253 L28.3638158,5.84347253 C29.0628947,5.84347253 29.6297368,5.27578022 29.6297368,4.57516484 L29.6297368,4.48575824 C29.6297368,3.78514286 29.0625,3.21745055 28.3638158,3.21745055 L28.3638158,3.21745055 Z M17.8432895,3.21745055 L12.1571053,3.21745055 L12.1571053,2.09156044 C12.1571053,1.90364835 12.3098684,1.75054945 12.4969737,1.75054945 L17.5034211,1.75054945 C17.6909211,1.75054945 17.8432895,1.90364835 17.8432895,2.09156044 L17.8432895,3.21745055 L17.8432895,3.21745055 Z" id="Shape" fill="#D0021B" sketch:type="MSShapeGroup"></path>
<path d="M26.0542105,6.28101099 L3.7275,6.28101099 C2.42960526,6.28101099 1.37723684,6.0567033 1.37723684,7.35784615 L3.13973684,33.195956 C3.13973684,34.4959121 4.1925,35.6047912 5.49039474,35.6047912 L24.2921053,35.6047912 C25.59,35.6047912 26.6423684,34.4959121 26.6423684,33.195956 L28.4048684,7.35784615 C28.4044737,6.0567033 27.3521053,6.28101099 26.0542105,6.28101099 L26.0542105,6.28101099 Z M9.63710526,32.1927033 C9.26013158,32.2053626 8.94552632,31.932 8.93289474,31.5807033 L8.23894737,11.664 C8.22671053,11.3127033 8.52236842,11.0171868 8.89815789,11.0041319 C9.27513158,10.9910769 9.58973684,11.2652308 9.60236842,11.6165275 L10.2963158,31.5332308 C10.3085526,31.8841319 10.0132895,32.180044 9.63710526,32.1927033 L9.63710526,32.1927033 Z M15.6809211,31.5632967 C15.6809211,31.9145934 15.3753947,32.1998242 14.9988158,32.1998242 C14.6222368,32.1998242 14.3167105,31.9141978 14.3167105,31.5632967 L14.3167105,11.6343297 C14.3167105,11.2826374 14.6222368,10.9978022 14.9988158,10.9978022 C15.3753947,10.9978022 15.6809211,11.2826374 15.6809211,11.6343297 L15.6809211,31.5632967 L15.6809211,31.5632967 Z M21.0651316,31.5810989 C21.0528947,31.9323956 20.7378947,32.2057582 20.3609211,32.1930989 C19.9847368,32.1804396 19.6894737,31.8845275 19.7017105,31.5332308 L20.3956579,11.6165275 C20.4078947,11.2652308 20.7225,10.9910769 21.0994737,11.0041319 C21.4756579,11.0175824 21.7713158,11.3127033 21.7590789,11.664 L21.0651316,31.5810989 L21.0651316,31.5810989 Z" id="Shape" fill="#D0021B" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

Before After
Before After

33
1-js/5-functions-closures/6-memory-management/family-no-father-2.svg
View file

@ -1,35 +1,38 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="144px" height="225px" viewBox="0 0 144 225" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="144px" height="225px" viewBox="0 0 144 225" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>family-no-father-2.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family-no-father-2">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="33" y="24" width="80" height="30"></rect>
<text id="window" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="family-no-father-2.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="33" y="24" width="80" height="30"></rect>
<text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="33" y="17">window</tspan>
</text>
<text id="Корень" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="Корень" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="50" y="43">Корень</tspan>
</text>
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="33" y="91" width="80" height="28"></rect>
<text id="Object" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" x="33" y="91" width="80" height="28"></rect>
<text id="Object" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="50" y="108">Object</tspan>
</text>
<text id="family" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="family" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="18" y="75">family</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="15" y="159" width="120" height="50"></rect>
<text id="name:-&quot;Мария&quot;" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" x="15" y="159" width="120" height="50"></rect>
<text id="name:-&quot;Мария&quot;" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="38" y="197">name: "Мария"</tspan>
</text>
<text id="mother" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="mother" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="20" y="142">mother</tspan>
</text>
<text id="Object-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="Object-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="52" y="177">Object</tspan>
</text>
<path d="M74.5,56.5 L74.5,87.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M74.5,56.5 L74.5,87.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M74.5,87.5 C75.55,83.72 76.45,80.48 77.5,76.7 C75.4,76.7 73.6,76.7 71.5,76.7 C72.55,80.48 73.45,83.72 74.5,87.5 C74.5,87.5 74.5,87.5 74.5,87.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M73.5,123.5 L73.5,155.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M73.5,123.5 L73.5,155.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M73.5,155.5 C74.55,151.72 75.45,148.48 76.5,144.7 C74.4,144.7 72.6,144.7 70.5,144.7 C71.55,148.48 72.45,151.72 73.5,155.5 C73.5,155.5 73.5,155.5 73.5,155.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
</g>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Before After
Before After

53
1-js/5-functions-closures/6-memory-management/family-no-father.svg
View file

@ -1,53 +1,56 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="399px" height="242px" viewBox="0 0 399 242" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="399px" height="242px" viewBox="0 0 399 242" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>family-no-father.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family-no-father">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="186" y="27" width="80" height="30"></rect>
<text id="window" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="family-no-father.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="186" y="27" width="80" height="30"></rect>
<text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="186" y="20">window</tspan>
</text>
<text id="Корень" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="Корень" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="203" y="46">Корень</tspan>
</text>
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="186" y="94" width="80" height="28"></rect>
<text id="Object" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" x="186" y="94" width="80" height="28"></rect>
<text id="Object" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="203" y="111">Object</tspan>
</text>
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="68" y="162" width="120" height="50"></rect>
<text id="Object-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" x="68" y="162" width="120" height="50"></rect>
<text id="Object-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="103" y="180">Object</tspan>
</text>
<text id="wife" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="wife" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="211" y="163">wife</tspan>
</text>
<text id="family" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="family" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="171" y="78">family</tspan>
</text>
<text id="name:-&quot;Василий&quot;" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
<text id="name:-&quot;Василий&quot;" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="83" y="200">name: "Василий"</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="277" y="162" width="120" height="50"></rect>
<text id="name:-&quot;Мария&quot;" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" x="277" y="162" width="120" height="50"></rect>
<text id="name:-&quot;Мария&quot;" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="294" y="200">name: "Мария"</tspan>
</text>
<text id="mother" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="mother" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="306" y="142">mother</tspan>
</text>
<text id="Object-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="Object-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="308" y="180">Object</tspan>
</text>
<path d="M227.5,59.5 L227.5,90.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M227.5,59.5 L227.5,90.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M227.5,90.5 C228.55,86.72 229.45,83.48 230.5,79.7 C228.4,79.7 226.6,79.7 224.5,79.7 C225.55,83.48 226.45,86.72 227.5,90.5 C227.5,90.5 227.5,90.5 227.5,90.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M197.5,171.5 L258.5,171.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M197.5,171.5 L258.5,171.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M258.5,171.5 C254.72,170.45 251.48,169.55 247.7,168.5 C247.7,170.6 247.7,172.4 247.7,174.5 C251.48,173.45 254.72,172.55 258.5,171.5 C258.5,171.5 258.5,171.5 258.5,171.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M272.5,127.5 L319.5,159.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M272.5,127.5 L319.5,159.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M318.789558,159.016295 C316.255943,156.021016 314.084274,153.453634 311.550659,150.458354 C310.368798,152.194213 309.355774,153.682091 308.173913,155.41795 C311.889389,156.677371 315.074082,157.756874 318.789558,159.016295 C318.789558,159.016295 318.789558,159.016295 318.789558,159.016295 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<rect id="Rectangle-5" stroke="#D0011B" stroke-width="2" x="47" y="133" width="219" height="101"></rect>
<g id="noun_48910_cc" transform="translate(7.000000, 131.000000)">
<path d="M17.5030263,1.75054945 L12.4969737,1.75054945 C12.3098684,1.75054945 12.1571053,1.90364835 12.1571053,2.09156044 L12.1571053,3.21745055 L17.8432895,3.21745055 L17.8432895,2.09156044 C17.8432895,1.90364835 17.6905263,1.75054945 17.5030263,1.75054945 L17.5030263,1.75054945 Z" id="Shape"></path>
<path d="M28.3638158,3.21745055 L19.5896053,3.21745055 L19.5896053,2.09156044 C19.5896053,0.937978022 18.6540789,4.4408921e-16 17.5030263,4.4408921e-16 L12.4969737,4.4408921e-16 C11.3463158,4.4408921e-16 10.4103947,0.937978022 10.4103947,2.09156044 L10.4103947,3.21745055 L1.63657895,3.21745055 C0.9375,3.21745055 0.370657895,3.78514286 0.370657895,4.48575824 L0.370657895,4.57516484 C0.370657895,5.27578022 0.9375,5.84347253 1.63657895,5.84347253 L28.3638158,5.84347253 C29.0628947,5.84347253 29.6297368,5.27578022 29.6297368,4.57516484 L29.6297368,4.48575824 C29.6297368,3.78514286 29.0625,3.21745055 28.3638158,3.21745055 L28.3638158,3.21745055 Z M17.8432895,3.21745055 L12.1571053,3.21745055 L12.1571053,2.09156044 C12.1571053,1.90364835 12.3098684,1.75054945 12.4969737,1.75054945 L17.5034211,1.75054945 C17.6909211,1.75054945 17.8432895,1.90364835 17.8432895,2.09156044 L17.8432895,3.21745055 L17.8432895,3.21745055 Z" id="Shape" fill="#D0021B"></path>
<path d="M26.0542105,6.28101099 L3.7275,6.28101099 C2.42960526,6.28101099 1.37723684,6.0567033 1.37723684,7.35784615 L3.13973684,33.195956 C3.13973684,34.4959121 4.1925,35.6047912 5.49039474,35.6047912 L24.2921053,35.6047912 C25.59,35.6047912 26.6423684,34.4959121 26.6423684,33.195956 L28.4048684,7.35784615 C28.4044737,6.0567033 27.3521053,6.28101099 26.0542105,6.28101099 L26.0542105,6.28101099 Z M9.63710526,32.1927033 C9.26013158,32.2053626 8.94552632,31.932 8.93289474,31.5807033 L8.23894737,11.664 C8.22671053,11.3127033 8.52236842,11.0171868 8.89815789,11.0041319 C9.27513158,10.9910769 9.58973684,11.2652308 9.60236842,11.6165275 L10.2963158,31.5332308 C10.3085526,31.8841319 10.0132895,32.180044 9.63710526,32.1927033 L9.63710526,32.1927033 Z M15.6809211,31.5632967 C15.6809211,31.9145934 15.3753947,32.1998242 14.9988158,32.1998242 C14.6222368,32.1998242 14.3167105,31.9141978 14.3167105,31.5632967 L14.3167105,11.6343297 C14.3167105,11.2826374 14.6222368,10.9978022 14.9988158,10.9978022 C15.3753947,10.9978022 15.6809211,11.2826374 15.6809211,11.6343297 L15.6809211,31.5632967 L15.6809211,31.5632967 Z M21.0651316,31.5810989 C21.0528947,31.9323956 20.7378947,32.2057582 20.3609211,32.1930989 C19.9847368,32.1804396 19.6894737,31.8845275 19.7017105,31.5332308 L20.3956579,11.6165275 C20.4078947,11.2652308 20.7225,10.9910769 21.0994737,11.0041319 C21.4756579,11.0175824 21.7713158,11.3127033 21.7590789,11.664 L21.0651316,31.5810989 L21.0651316,31.5810989 Z" id="Shape" fill="#D0021B"></path>
<rect id="Rectangle-5" stroke="#D0011B" stroke-width="2" sketch:type="MSShapeGroup" x="47" y="133" width="219" height="101"></rect>
<g id="noun_48910_cc" sketch:type="MSLayerGroup" transform="translate(7.000000, 131.000000)">
<path d="M17.5030263,1.75054945 L12.4969737,1.75054945 C12.3098684,1.75054945 12.1571053,1.90364835 12.1571053,2.09156044 L12.1571053,3.21745055 L17.8432895,3.21745055 L17.8432895,2.09156044 C17.8432895,1.90364835 17.6905263,1.75054945 17.5030263,1.75054945 L17.5030263,1.75054945 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M28.3638158,3.21745055 L19.5896053,3.21745055 L19.5896053,2.09156044 C19.5896053,0.937978022 18.6540789,4.4408921e-16 17.5030263,4.4408921e-16 L12.4969737,4.4408921e-16 C11.3463158,4.4408921e-16 10.4103947,0.937978022 10.4103947,2.09156044 L10.4103947,3.21745055 L1.63657895,3.21745055 C0.9375,3.21745055 0.370657895,3.78514286 0.370657895,4.48575824 L0.370657895,4.57516484 C0.370657895,5.27578022 0.9375,5.84347253 1.63657895,5.84347253 L28.3638158,5.84347253 C29.0628947,5.84347253 29.6297368,5.27578022 29.6297368,4.57516484 L29.6297368,4.48575824 C29.6297368,3.78514286 29.0625,3.21745055 28.3638158,3.21745055 L28.3638158,3.21745055 Z M17.8432895,3.21745055 L12.1571053,3.21745055 L12.1571053,2.09156044 C12.1571053,1.90364835 12.3098684,1.75054945 12.4969737,1.75054945 L17.5034211,1.75054945 C17.6909211,1.75054945 17.8432895,1.90364835 17.8432895,2.09156044 L17.8432895,3.21745055 L17.8432895,3.21745055 Z" id="Shape" fill="#D0021B" sketch:type="MSShapeGroup"></path>
<path d="M26.0542105,6.28101099 L3.7275,6.28101099 C2.42960526,6.28101099 1.37723684,6.0567033 1.37723684,7.35784615 L3.13973684,33.195956 C3.13973684,34.4959121 4.1925,35.6047912 5.49039474,35.6047912 L24.2921053,35.6047912 C25.59,35.6047912 26.6423684,34.4959121 26.6423684,33.195956 L28.4048684,7.35784615 C28.4044737,6.0567033 27.3521053,6.28101099 26.0542105,6.28101099 L26.0542105,6.28101099 Z M9.63710526,32.1927033 C9.26013158,32.2053626 8.94552632,31.932 8.93289474,31.5807033 L8.23894737,11.664 C8.22671053,11.3127033 8.52236842,11.0171868 8.89815789,11.0041319 C9.27513158,10.9910769 9.58973684,11.2652308 9.60236842,11.6165275 L10.2963158,31.5332308 C10.3085526,31.8841319 10.0132895,32.180044 9.63710526,32.1927033 L9.63710526,32.1927033 Z M15.6809211,31.5632967 C15.6809211,31.9145934 15.3753947,32.1998242 14.9988158,32.1998242 C14.6222368,32.1998242 14.3167105,31.9141978 14.3167105,31.5632967 L14.3167105,11.6343297 C14.3167105,11.2826374 14.6222368,10.9978022 14.9988158,10.9978022 C15.3753947,10.9978022 15.6809211,11.2826374 15.6809211,11.6343297 L15.6809211,31.5632967 L15.6809211,31.5632967 Z M21.0651316,31.5810989 C21.0528947,31.9323956 20.7378947,32.2057582 20.3609211,32.1930989 C19.9847368,32.1804396 19.6894737,31.8845275 19.7017105,31.5332308 L20.3956579,11.6165275 C20.4078947,11.2652308 20.7225,10.9910769 21.0994737,11.0041319 C21.4756579,11.0175824 21.7713158,11.3127033 21.7590789,11.664 L21.0651316,31.5810989 L21.0651316,31.5810989 Z" id="Shape" fill="#D0021B" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

Before After
Before After

51
1-js/5-functions-closures/6-memory-management/family.svg
View file

@ -1,57 +1,60 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="337px" height="215px" viewBox="0 0 337 215" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="337px" height="215px" viewBox="0 0 337 215" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>family.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family">
<path d="M192.5,201.5 L133.5,201.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="family.svg" sketch:type="MSArtboardGroup">
<path d="M192.5,201.5 L133.5,201.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M133.5,201.5 C137.28,202.55 140.52,203.45 144.3,204.5 C144.3,202.4 144.3,200.6 144.3,198.5 C140.52,199.55 137.28,200.45 133.5,201.5 C133.5,201.5 133.5,201.5 133.5,201.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="122" y="23" width="80" height="30"></rect>
<text id="window" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="122" y="23" width="80" height="30"></rect>
<text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="122" y="16">window</tspan>
</text>
<text id="Корень" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="Корень" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="139" y="42">Корень</tspan>
</text>
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="122" y="90" width="80" height="28"></rect>
<text id="Object" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" x="122" y="90" width="80" height="28"></rect>
<text id="Object" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="139" y="107">Object</tspan>
</text>
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="4" y="158" width="120" height="50"></rect>
<text id="Object-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" x="4" y="158" width="120" height="50"></rect>
<text id="Object-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="39" y="176">Object</tspan>
</text>
<text id="father" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="father" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="35" y="138">father</tspan>
</text>
<text id="wife" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="wife" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="147" y="159">wife</tspan>
</text>
<text font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="family" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="107" y="74">family</tspan>
</text>
<text id="name:-&quot;Василий&quot;" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
<text id="name:-&quot;Василий&quot;" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="19" y="196">name: "Василий"</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="213" y="158" width="120" height="50"></rect>
<text id="name:-&quot;Мария&quot;" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" sketch:type="MSShapeGroup" x="213" y="158" width="120" height="50"></rect>
<text id="name:-&quot;Мария&quot;" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="230" y="196">name: "Мария"</tspan>
</text>
<text id="mother" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="mother" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="242" y="138">mother</tspan>
</text>
<text id="Object-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="Object-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="244" y="176">Object</tspan>
</text>
<path d="M163.5,55.5 L163.5,86.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M163.5,55.5 L163.5,86.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M163.5,86.5 C164.55,82.72 165.45,79.48 166.5,75.7 C164.4,75.7 162.6,75.7 160.5,75.7 C161.55,79.48 162.45,82.72 163.5,86.5 C163.5,86.5 163.5,86.5 163.5,86.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M114.5,123.5 L68.5,155.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M114.5,123.5 L68.5,155.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="M68.5293087,155.479611 C72.2319481,154.182938 75.405639,153.071504 79.1082783,151.77483 C77.9090429,150.05093 76.8811268,148.5733 75.6818914,146.849399 C73.1784875,149.869973 71.0327127,152.459037 68.5293087,155.479611 C68.5293087,155.479611 68.5293087,155.479611 68.5293087,155.479611 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M133.5,167.5 L194.5,167.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M133.5,167.5 L194.5,167.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M194.5,167.5 C190.72,166.45 187.48,165.55 183.7,164.5 C183.7,166.6 183.7,168.4 183.7,170.5 C187.48,169.45 190.72,168.55 194.5,167.5 C194.5,167.5 194.5,167.5 194.5,167.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="husband" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="husband" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="136" y="192">husband</tspan>
</text>
<path d="M208.5,123.5 L255.5,155.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M208.5,123.5 L255.5,155.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M254.789558,155.016295 C252.255943,152.021016 250.084274,149.453634 247.550659,146.458354 C246.368798,148.194213 245.355774,149.682091 244.173913,151.41795 C247.889389,152.677371 251.074082,153.756874 254.789558,155.016295 C254.789558,155.016295 254.789558,155.016295 254.789558,155.016295 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
</g>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

Before After
Before After

45
1-js/7-js-misc/3-setTimeout-setInterval/setinterval-interval.svg
View file

@ -1,38 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="570px" height="183px" viewBox="0 0 570 183" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="570px" height="183px" viewBox="0 0 570 183" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>setinterval-interval.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setinterval-interval">
<path d="M10.5,109 L560.5,109" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="109" y="88" width="90" height="40"></rect>
<text id="func(1)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="setinterval-interval.svg" sketch:type="MSArtboardGroup">
<path d="M10.5,109 L560.5,109" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="109" y="88" width="90" height="40"></rect>
<text id="func(1)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="131" y="112">func(1)</tspan>
</text>
<path d="M128.581818,34.3424658 L118.911364,31.4383562 L126.490909,15.2739726 L106.470455,36.0958904 L116.193182,39 L110.286364,54.890411 L128.581818,34.3424658 L128.581818,34.3424658 Z M108.195455,35.6575342 L123.302273,19.9315068 L117.604545,32.0410959 L126.856818,34.7808219 L112.9,50.6164384 L117.447727,38.3972603 L108.195455,35.6575342 L108.195455,35.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M109,142.5 L109,72.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="252" y="88" width="90" height="40"></rect>
<text id="func(2)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<path d="M128.581818,34.3424658 L118.911364,31.4383562 L126.490909,15.2739726 L106.470455,36.0958904 L116.193182,39 L110.286364,54.890411 L128.581818,34.3424658 L128.581818,34.3424658 Z M108.195455,35.6575342 L123.302273,19.9315068 L117.604545,32.0410959 L126.856818,34.7808219 L112.9,50.6164384 L117.447727,38.3972603 L108.195455,35.6575342 L108.195455,35.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M109,142.5 L109,72.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="252" y="88" width="90" height="40"></rect>
<text id="func(2)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="274" y="112">func(2)</tspan>
</text>
<path d="M271.581818,34.3424658 L261.911364,31.4383562 L269.490909,15.2739726 L249.470455,36.0958904 L259.193182,39 L253.286364,54.890411 L271.581818,34.3424658 L271.581818,34.3424658 Z M251.195455,35.6575342 L266.302273,19.9315068 L260.604545,32.0410959 L269.856818,34.7808219 L255.9,50.6164384 L260.447727,38.3972603 L251.195455,35.6575342 L251.195455,35.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M252,142.5 L252,72.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="386" y="88" width="90" height="40"></rect>
<text id="func(3)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<path d="M271.581818,34.3424658 L261.911364,31.4383562 L269.490909,15.2739726 L249.470455,36.0958904 L259.193182,39 L253.286364,54.890411 L271.581818,34.3424658 L271.581818,34.3424658 Z M251.195455,35.6575342 L266.302273,19.9315068 L260.604545,32.0410959 L269.856818,34.7808219 L255.9,50.6164384 L260.447727,38.3972603 L251.195455,35.6575342 L251.195455,35.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M252,142.5 L252,72.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="386" y="88" width="90" height="40"></rect>
<text id="func(3)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="408" y="112">func(3)</tspan>
</text>
<path d="M405.581818,34.3424658 L395.911364,31.4383562 L403.490909,15.2739726 L383.470455,36.0958904 L393.193182,39 L387.286364,54.890411 L405.581818,34.3424658 L405.581818,34.3424658 Z M385.195455,35.6575342 L400.302273,19.9315068 L394.604545,32.0410959 L403.856818,34.7808219 L389.9,50.6164384 L394.447727,38.3972603 L385.195455,35.6575342 L385.195455,35.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M386,142.5 L386,72.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<text id="100" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
<path d="M405.581818,34.3424658 L395.911364,31.4383562 L403.490909,15.2739726 L383.470455,36.0958904 L393.193182,39 L387.286364,54.890411 L405.581818,34.3424658 L405.581818,34.3424658 Z M385.195455,35.6575342 L400.302273,19.9315068 L394.604545,32.0410959 L403.856818,34.7808219 L389.9,50.6164384 L394.447727,38.3972603 L385.195455,35.6575342 L385.195455,35.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M386,142.5 L386,72.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<text id="100" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="93" y="170">100</tspan>
</text>
<text id="200" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
<text id="200" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="237" y="170">200</tspan>
</text>
<text id="300" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
<text id="300" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="372" y="170">300</tspan>
</text>
<path d="M199.5,109.5 L249.5,109.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"></path>
<path d="M342.5,109.5 L383.5,109.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"></path>
<path d="M199.5,109.5 L249.5,109.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M342.5,109.5 L383.5,109.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Before After
Before After

63
1-js/7-js-misc/3-setTimeout-setInterval/settimeout-interval.svg
View file

@ -1,45 +1,48 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="574px" height="204px" viewBox="0 0 574 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="574px" height="204px" viewBox="0 0 574 204" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>settimeout-interval.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="settimeout-interval">
<path d="M11.5,108 L561.5,108" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="60" y="87" width="90" height="40"></rect>
<text id="func(1)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="settimeout-interval.svg" sketch:type="MSArtboardGroup">
<path d="M11.5,108 L561.5,108" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="60" y="87" width="90" height="40"></rect>
<text id="func(1)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="82" y="111">func(1)</tspan>
</text>
<path d="M79.5818182,33.3424658 L69.9113636,30.4383562 L77.4909091,14.2739726 L57.4704545,35.0958904 L67.1931818,38 L61.2863636,53.890411 L79.5818182,33.3424658 L79.5818182,33.3424658 Z M59.1954545,34.6575342 L74.3022727,18.9315068 L68.6045455,31.0410959 L77.8568182,33.7808219 L63.9,49.6164384 L68.4477273,37.3972603 L59.1954545,34.6575342 L59.1954545,34.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M60,141.5 L60,71.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="253" y="87" width="90" height="40"></rect>
<text id="func(2)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<path d="M79.5818182,33.3424658 L69.9113636,30.4383562 L77.4909091,14.2739726 L57.4704545,35.0958904 L67.1931818,38 L61.2863636,53.890411 L79.5818182,33.3424658 L79.5818182,33.3424658 Z M59.1954545,34.6575342 L74.3022727,18.9315068 L68.6045455,31.0410959 L77.8568182,33.7808219 L63.9,49.6164384 L68.4477273,37.3972603 L59.1954545,34.6575342 L59.1954545,34.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M60,141.5 L60,71.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="253" y="87" width="90" height="40"></rect>
<text id="func(2)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="275" y="111">func(2)</tspan>
</text>
<path d="M272.581818,33.3424658 L262.911364,30.4383562 L270.490909,14.2739726 L250.470455,35.0958904 L260.193182,38 L254.286364,53.890411 L272.581818,33.3424658 L272.581818,33.3424658 Z M252.195455,34.6575342 L267.302273,18.9315068 L261.604545,31.0410959 L270.856818,33.7808219 L256.9,49.6164384 L261.447727,37.3972603 L252.195455,34.6575342 L252.195455,34.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M253,141.5 L253,71.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="446" y="87" width="90" height="40"></rect>
<text id="func(3)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<path d="M272.581818,33.3424658 L262.911364,30.4383562 L270.490909,14.2739726 L250.470455,35.0958904 L260.193182,38 L254.286364,53.890411 L272.581818,33.3424658 L272.581818,33.3424658 Z M252.195455,34.6575342 L267.302273,18.9315068 L261.604545,31.0410959 L270.856818,33.7808219 L256.9,49.6164384 L261.447727,37.3972603 L252.195455,34.6575342 L252.195455,34.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M253,141.5 L253,71.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" x="446" y="87" width="90" height="40"></rect>
<text id="func(3)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="468" y="111">func(3)</tspan>
</text>
<path d="M465.581818,33.3424658 L455.911364,30.4383562 L463.490909,14.2739726 L443.470455,35.0958904 L453.193182,38 L447.286364,53.890411 L465.581818,33.3424658 L465.581818,33.3424658 Z M445.195455,34.6575342 L460.302273,18.9315068 L454.604545,31.0410959 L463.856818,33.7808219 L449.9,49.6164384 L454.447727,37.3972603 L445.195455,34.6575342 L445.195455,34.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M446,141.5 L446,71.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<path d="M150.5,108.5 L250.5,108.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"></path>
<path d="M343.5,108.5 L443.5,108.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"></path>
<text id="100" font-family="Consolas" font-size="18" font-weight="normal" fill="#000000">
<path d="M465.581818,33.3424658 L455.911364,30.4383562 L463.490909,14.2739726 L443.470455,35.0958904 L453.193182,38 L447.286364,53.890411 L465.581818,33.3424658 L465.581818,33.3424658 Z M445.195455,34.6575342 L460.302273,18.9315068 L454.604545,31.0410959 L463.856818,33.7808219 L449.9,49.6164384 L454.447727,37.3972603 L445.195455,34.6575342 L445.195455,34.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M446,141.5 L446,71.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M150.5,108.5 L250.5,108.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M343.5,108.5 L443.5,108.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<text id="100" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="normal" fill="#000000">
<tspan x="187" y="190">100</tspan>
</text>
<text id="100" font-family="Consolas" font-size="18" font-weight="normal" fill="#000000">
<text id="100" sketch:type="MSTextLayer" font-family="Consolas" font-size="18" font-weight="normal" fill="#000000">
<tspan x="380" y="190">100</tspan>
</text>
<path d="M150.5,165.5 L250.5,165.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M242.5,165.5 L250.5,160.5" id="Line-5" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" transform="translate(246.500000, 163.000000) scale(-1, 1) translate(-246.500000, -163.000000) "></path>
<path d="M150.5,170.5 L158.5,165.5" id="Line-6" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" transform="translate(154.500000, 168.000000) scale(-1, 1) translate(-154.500000, -168.000000) "></path>
<path d="M242.5,170.5 L250.5,165.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M150.5,165.5 L158.5,160.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M344.5,165.5 L444.5,165.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M436.5,165.5 L444.5,160.5" id="Line-5" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" transform="translate(440.500000, 163.000000) scale(-1, 1) translate(-440.500000, -163.000000) "></path>
<path d="M344.5,170.5 L352.5,165.5" id="Line-6" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" transform="translate(348.500000, 168.000000) scale(-1, 1) translate(-348.500000, -168.000000) "></path>
<path d="M436.5,170.5 L444.5,165.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M344.5,165.5 L352.5,160.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M150.5,165.5 L250.5,165.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M242.5,165.5 L250.5,160.5" id="Line-5" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(246.500000, 163.000000) scale(-1, 1) translate(-246.500000, -163.000000) "></path>
<path d="M150.5,170.5 L158.5,165.5" id="Line-6" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(154.500000, 168.000000) scale(-1, 1) translate(-154.500000, -168.000000) "></path>
<path d="M242.5,170.5 L250.5,165.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M150.5,165.5 L158.5,160.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M344.5,165.5 L444.5,165.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M436.5,165.5 L444.5,160.5" id="Line-5" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(440.500000, 163.000000) scale(-1, 1) translate(-440.500000, -163.000000) "></path>
<path d="M344.5,170.5 L352.5,165.5" id="Line-6" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(348.500000, 168.000000) scale(-1, 1) translate(-348.500000, -168.000000) "></path>
<path d="M436.5,170.5 L444.5,165.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M344.5,165.5 L352.5,160.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

Before After
Before After

25
1-js/9-prototypes/1-prototype/proto-animal-rabbit.svg
View file

@ -1,25 +1,28 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="161px" height="150px" viewBox="0 0 161 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="161px" height="150px" viewBox="0 0 161 150" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>proto-animal-rabbit.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="proto-animal-rabbit">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="13" y="22" width="120" height="30"></rect>
<text id="eats:-true" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="proto-animal-rabbit.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="13" y="22" width="120" height="30"></rect>
<text id="eats:-true" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="24" y="40">eats: true</tspan>
</text>
<text id="animal" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="animal" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="15">animal</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="13" y="110" width="120" height="30"></rect>
<text id="jumps:-true" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="13" y="110" width="120" height="30"></rect>
<text id="jumps:-true" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="24" y="128">jumps: true</tspan>
</text>
<text id="rabbit" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="rabbit" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="103">rabbit</tspan>
</text>
<path d="M73.5,101.5 L73.5,60.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M73.5,101.5 L73.5,60.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M73.5,60.5 C72.45,64.28 71.55,67.52 70.5,71.3 C72.6,71.3 74.4,71.3 76.5,71.3 C75.45,67.52 74.55,64.28 73.5,60.5 C73.5,60.5 73.5,60.5 73.5,60.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="83" y="82">__proto__</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

35
1-js/9-prototypes/3-native-prototypes/native-prototypes-array-tostring.svg
View file

@ -1,37 +1,40 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="233px" height="320px" viewBox="0 0 233 320" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="233px" height="320px" viewBox="0 0 233 320" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>native-prototypes-array-tostring.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="native-prototypes-array-tostring">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="16" y="160" width="200" height="60"></rect>
<text id="toString:-function" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="native-prototypes-array-tostring.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="16" y="160" width="200" height="60"></rect>
<text id="toString:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="27" y="184">toString: function</tspan>
<tspan x="27" y="200">...</tspan>
</text>
<text id="Array.prototype" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="Array.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="16" y="153">Array.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="16" y="27" width="200" height="60"></rect>
<text id="toString:-function" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="16" y="27" width="200" height="60"></rect>
<text id="toString:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="27" y="51">toString: function</tspan>
<tspan x="27" y="67">...</tspan>
</text>
<text id="Object.prototype" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="Object.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="16" y="20">Object.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="16" y="277" width="200" height="30"></rect>
<path d="M76.5,268.5 L76.5,227.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="16" y="277" width="200" height="30"></rect>
<path d="M76.5,268.5 L76.5,227.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M76.5,227.5 C75.45,231.28 74.55,234.52 73.5,238.3 C75.6,238.3 77.4,238.3 79.5,238.3 C78.45,234.52 77.55,231.28 76.5,227.5 C76.5,227.5 76.5,227.5 76.5,227.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="86" y="249">__proto__</tspan>
</text>
<path d="M76.5,136.5 L76.5,95.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M76.5,136.5 L76.5,95.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="M76.5,95.5 C75.45,99.28 74.55,102.52 73.5,106.3 C75.6,106.3 77.4,106.3 79.5,106.3 C78.45,102.52 77.55,99.28 76.5,95.5 C76.5,95.5 76.5,95.5 76.5,95.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="86" y="117">__proto__</tspan>
</text>
<ellipse id="Oval-1" stroke="#EE6B47" stroke-width="2" cx="60" cy="180" rx="42" ry="16"></ellipse>
<text id="[1,-2,-3]" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<ellipse id="Oval-1" stroke="#EE6B47" stroke-width="2" sketch:type="MSShapeGroup" cx="60" cy="180" rx="42" ry="16"></ellipse>
<text id="[1,-2,-3]" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="24" y="296">[1, 2, 3]</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Before After
Before After

75
1-js/9-prototypes/3-native-prototypes/native-prototypes-classes.svg
View file

@ -1,90 +1,93 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="682px" height="411px" viewBox="0 0 682 411" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="682px" height="411px" viewBox="0 0 682 411" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>native-prototypes-classes.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="native-prototypes-classes">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="239" y="92" width="200" height="60"></rect>
<text id="toString:-function" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="native-prototypes-classes.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="239" y="92" width="200" height="60"></rect>
<text id="toString:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="250" y="116">toString: function</tspan>
<tspan x="250" y="132">другие методы объектов</tspan>
</text>
<text id="Object.prototype" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="Object.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="239" y="85">Object.prototype</tspan>
</text>
<path d="M299.5,68.5 L299.5,27.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M299.5,68.5 L299.5,27.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="M299.5,27.5 C298.45,31.28 297.55,34.52 296.5,38.3 C298.6,38.3 300.4,38.3 302.5,38.3 C301.45,34.52 300.55,31.28 299.5,27.5 C299.5,27.5 299.5,27.5 299.5,27.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="309" y="49">__proto__</tspan>
</text>
<path d="M299.5,201.5 L299.5,160.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M299.5,201.5 L299.5,160.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-3-decoration-1" d="M299.5,160.5 C298.45,164.28 297.55,167.52 296.5,171.3 C298.6,171.3 300.4,171.3 302.5,171.3 C301.45,167.52 300.55,164.28 299.5,160.5 C299.5,160.5 299.5,160.5 299.5,160.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="null" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="null" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="285" y="16">null</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="13" y="223" width="200" height="60"></rect>
<text id="slice:-function" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="13" y="223" width="200" height="60"></rect>
<text id="slice:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="24" y="247">slice: function</tspan>
<tspan x="24" y="263">другие методы массивов</tspan>
</text>
<text id="__proto__-3" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="__proto__-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="81" y="182">__proto__</tspan>
</text>
<text id="Array.prototype" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="Array.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="216">Array.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="242" y="223" width="200" height="60"></rect>
<text id="__proto__" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="242" y="223" width="200" height="60"></rect>
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="309" y="182">__proto__</tspan>
</text>
<text id="apply:-function" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="apply:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="253" y="247">apply: function</tspan>
<tspan x="253" y="263">другие методы функций</tspan>
</text>
<text id="Function.prototype" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="Function.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="242" y="216">Function.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="473" y="223" width="200" height="60"></rect>
<text id="toFixed:-function" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="473" y="223" width="200" height="60"></rect>
<text id="toFixed:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="484" y="247">toFixed: function</tspan>
<tspan x="484" y="263">другие методы чисел</tspan>
</text>
<text id="Number.prototype" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="Number.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="473" y="216">Number.prototype</tspan>
</text>
<text id="__proto__-4" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="__proto__-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="541" y="182">__proto__</tspan>
</text>
<path d="M142.5,193.5 L220.5,157.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M142.5,193.5 L220.5,157.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M219.676548,157.880055 C215.80445,158.510737 212.485509,159.051323 208.613412,159.682005 C209.493434,161.58872 210.247739,163.223047 211.127761,165.129761 C214.119836,162.592364 216.684472,160.417452 219.676548,157.880055 C219.676548,157.880055 219.676548,157.880055 219.676548,157.880055 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M539.5,193.5 L462.5,157.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M539.5,193.5 L462.5,157.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M462.5,157.5 C465.479529,160.052118 468.033412,162.239647 471.012941,164.791765 C471.902353,162.889412 472.664706,161.258824 473.554118,159.356471 C469.685176,158.706706 466.368941,158.149765 462.5,157.5 C462.5,157.5 462.5,157.5 462.5,157.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="2" x="47" y="338" width="119" height="25"></rect>
<text id="[1,-2,-3]" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="47" y="338" width="119" height="25"></rect>
<text id="[1,-2,-3]" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="71" y="354">[1, 2, 3]</tspan>
</text>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" x="250" y="338" width="181" height="67"></rect>
<text id="function-f(args)-{" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="250" y="338" width="181" height="67"></rect>
<text id="function-f(args)-{" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="264" y="358">function f(args) {</tspan>
<tspan x="264" y="374"> ...</tspan>
<tspan x="264" y="390">}</tspan>
</text>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" x="540" y="338" width="71" height="25"></rect>
<text id="5" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="540" y="338" width="71" height="25"></rect>
<text id="5" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="573" y="355">5</tspan>
</text>
<path d="M299.5,331.5 L299.5,290.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M299.5,331.5 L299.5,290.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-4-decoration-1" d="M299.5,290.5 C298.45,294.28 297.55,297.52 296.5,301.3 C298.6,301.3 300.4,301.3 302.5,301.3 C301.45,297.52 300.55,294.28 299.5,290.5 C299.5,290.5 299.5,290.5 299.5,290.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-5" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="__proto__-5" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="309" y="312">__proto__</tspan>
</text>
<path d="M576.5,331.5 L576.5,290.5" id="Line-5" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M576.5,331.5 L576.5,290.5" id="Line-5" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-5-decoration-1" d="M576.5,290.5 C575.45,294.28 574.55,297.52 573.5,301.3 C575.6,301.3 577.4,301.3 579.5,301.3 C578.45,297.52 577.55,294.28 576.5,290.5 C576.5,290.5 576.5,290.5 576.5,290.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-6" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="__proto__-6" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="586" y="312">__proto__</tspan>
</text>
<path d="M106.5,331.5 L106.5,290.5" id="Line-6" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M106.5,331.5 L106.5,290.5" id="Line-6" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-6-decoration-1" d="M106.5,290.5 C105.45,294.28 104.55,297.52 103.5,301.3 C105.6,301.3 107.4,301.3 109.5,301.3 C108.45,297.52 107.55,294.28 106.5,290.5 C106.5,290.5 106.5,290.5 106.5,290.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-7" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="__proto__-7" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="116" y="312">__proto__</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

Before After
Before After

29
1-js/9-prototypes/3-native-prototypes/native-prototypes-object.svg
View file

@ -1,31 +1,34 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="225px" height="249px" viewBox="0 0 225 249" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="225px" height="249px" viewBox="0 0 225 249" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>native-prototypes-object.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="native-prototypes-object">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="13" y="95" width="200" height="60"></rect>
<text id="toString:-function" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="native-prototypes-object.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="13" y="95" width="200" height="60"></rect>
<text id="toString:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="24" y="119">toString: function</tspan>
<tspan x="24" y="135">другие методы объектов</tspan>
</text>
<text id="Object.prototype" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="Object.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="88">Object.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="13" y="212" width="200" height="30"></rect>
<text id="obj" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="13" y="212" width="200" height="30"></rect>
<text id="obj" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="205">obj</tspan>
</text>
<path d="M73.5,203.5 L73.5,162.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M73.5,203.5 L73.5,162.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M73.5,162.5 C72.45,166.28 71.55,169.52 70.5,173.3 C72.6,173.3 74.4,173.3 76.5,173.3 C75.45,169.52 74.55,166.28 73.5,162.5 C73.5,162.5 73.5,162.5 73.5,162.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="83" y="184">__proto__</tspan>
</text>
<path d="M73.5,71.5 L73.5,30.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M73.5,71.5 L73.5,30.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="M73.5,30.5 C72.45,34.28 71.55,37.52 70.5,41.3 C72.6,41.3 74.4,41.3 76.5,41.3 C75.45,37.52 74.55,34.28 73.5,30.5 C73.5,30.5 73.5,30.5 73.5,30.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="83" y="52">__proto__</tspan>
</text>
<text id="null" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="null" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="59" y="19">null</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

Before After
Before After

35
1-js/9-prototypes/5-class-inheritance/class-inheritance-array-object.svg
View file

@ -1,39 +1,42 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="223px" height="316px" viewBox="0 0 223 316" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="223px" height="316px" viewBox="0 0 223 316" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>class-inheritance-array-object.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="class-inheritance-array-object">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="12" y="157.109589" width="200" height="60"></rect>
<text id="slice:-function" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="class-inheritance-array-object.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="12" y="157.109589" width="200" height="60"></rect>
<text id="slice:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="23" y="181.109589">slice: function</tspan>
<tspan x="23" y="197.109589">...</tspan>
</text>
<text id="Array.prototype" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="Array.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="12" y="150.109589">Array.prototype</tspan>
</text>
<text id="arr" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="arr" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="12" y="267.109589">arr</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="12" y="24.109589" width="200" height="60"></rect>
<text id="hasOwnProperty:-func" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="12" y="24.109589" width="200" height="60"></rect>
<text id="hasOwnProperty:-func" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="23" y="48.109589">hasOwnProperty: function</tspan>
<tspan x="23" y="64.109589">...</tspan>
</text>
<text id="Object.prototype" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="Object.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="12" y="17.109589">Object.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="12" y="274.109589" width="200" height="30"></rect>
<path d="M72.5,265.609589 L72.5,224.609589" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="12" y="274.109589" width="200" height="30"></rect>
<path d="M72.5,265.609589 L72.5,224.609589" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M72.5,224.609589 C71.45,228.389589 70.55,231.629589 69.5,235.409589 C71.6,235.409589 73.4,235.409589 75.5,235.409589 C74.45,231.629589 73.55,228.389589 72.5,224.609589 C72.5,224.609589 72.5,224.609589 72.5,224.609589 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="82" y="246.109589">__proto__</tspan>
</text>
<path d="M72.5,133.609589 L72.5,92.609589" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M72.5,133.609589 L72.5,92.609589" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-2-decoration-1" d="M72.5,92.609589 C71.45,96.389589 70.55,99.629589 69.5,103.409589 C71.6,103.409589 73.4,103.409589 75.5,103.409589 C74.45,99.629589 73.55,96.389589 72.5,92.609589 C72.5,92.609589 72.5,92.609589 72.5,92.609589 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="82" y="114.109589">__proto__</tspan>
</text>
<text id="[1,-2,-3]" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="[1,-2,-3]" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="20" y="293.109589">[1, 2, 3]</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 4 KiB

Before After
Before After

35
1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-animal.svg
View file

@ -1,38 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="226px" height="324px" viewBox="0 0 226 324" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="226px" height="324px" viewBox="0 0 226 324" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>class-inheritance-rabbit-animal.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="class-inheritance-rabbit-animal">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="14" y="160" width="200" height="30"></rect>
<text id="jump:-function" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="class-inheritance-rabbit-animal.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="14" y="160" width="200" height="30"></rect>
<text id="jump:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="25" y="179">jump: function</tspan>
</text>
<text id="Rabbit.prototype" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="Rabbit.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="14" y="153">Rabbit.prototype</tspan>
</text>
<text id="rabbit" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="rabbit" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="14" y="249">rabbit</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="14" y="27" width="200" height="50"></rect>
<text id="run:-function" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="14" y="27" width="200" height="50"></rect>
<text id="run:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="25" y="48">run: function</tspan>
<tspan x="25" y="64">stop: function</tspan>
</text>
<text id="Animal.prototype" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="Animal.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="14" y="20">Animal.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="14" y="257" width="200" height="50"></rect>
<path d="M74.5,244.5 L74.5,203.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="14" y="257" width="200" height="50"></rect>
<path d="M74.5,244.5 L74.5,203.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M74.5,203.5 C73.45,207.28 72.55,210.52 71.5,214.3 C73.6,214.3 75.4,214.3 77.5,214.3 C76.45,210.52 75.55,207.28 74.5,203.5 C74.5,203.5 74.5,203.5 74.5,203.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="84" y="225">__proto__</tspan>
</text>
<path d="M74.5,136.5 L74.5,95.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M74.5,136.5 L74.5,95.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="M74.5,95.5 C73.45,99.28 72.55,102.52 71.5,106.3 C73.6,106.3 75.4,106.3 77.5,106.3 C76.45,102.52 75.55,99.28 74.5,95.5 C74.5,95.5 74.5,95.5 74.5,95.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="84" y="117">__proto__</tspan>
</text>
<text id="name:-&quot;Кроль&quot;" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="name:-&quot;Кроль&quot;" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="22" y="278">name: "Кроль"</tspan>
<tspan x="22" y="294">speed: 0</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

Before After
Before After

35
1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-run-animal.svg
View file

@ -1,40 +1,43 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="225px" height="331px" viewBox="0 0 225 331" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="225px" height="331px" viewBox="0 0 225 331" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>class-inheritance-rabbit-run-animal.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="class-inheritance-rabbit-run-animal">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="13" y="156" width="200" height="50"></rect>
<text id="jump:-function" font-family="Consolas" font-size="14" font-weight="normal">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="class-inheritance-rabbit-run-animal.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="13" y="156" width="200" height="50"></rect>
<text id="jump:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal">
<tspan x="24" y="175" fill="#8A704D">jump: function</tspan>
<tspan x="131.761719" y="175" fill="#999647"></tspan>
<tspan x="24" y="191" fill="#7ED321">run: function</tspan>
</text>
<text id="Rabbit.prototype" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="Rabbit.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="149">Rabbit.prototype</tspan>
</text>
<text id="rabbit" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="rabbit" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="264">rabbit</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="13" y="23" width="200" height="50"></rect>
<text id="run:-function" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="13" y="23" width="200" height="50"></rect>
<text id="run:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="24" y="44">run: function</tspan>
<tspan x="24" y="60">stop: function</tspan>
</text>
<text id="Animal.prototype" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<text id="Animal.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="16">Animal.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" x="13" y="272" width="200" height="50"></rect>
<path d="M73.5,259.5 L73.5,218.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="13" y="272" width="200" height="50"></rect>
<path d="M73.5,259.5 L73.5,218.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M73.5,218.5 C72.45,222.28 71.55,225.52 70.5,229.3 C72.6,229.3 74.4,229.3 76.5,229.3 C75.45,225.52 74.55,222.28 73.5,218.5 C73.5,218.5 73.5,218.5 73.5,218.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="83" y="240">__proto__</tspan>
</text>
<path d="M73.5,132.5 L73.5,91.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M73.5,132.5 L73.5,91.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="M73.5,91.5 C72.45,95.28 71.55,98.52 70.5,102.3 C72.6,102.3 74.4,102.3 76.5,102.3 C75.45,98.52 74.55,95.28 73.5,91.5 C73.5,91.5 73.5,91.5 73.5,91.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__-2" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<text id="__proto__-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="83" y="113">__proto__</tspan>
</text>
<text id="name:-&quot;Кроль&quot;" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<text id="name:-&quot;Кроль&quot;" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="21" y="293">name: "Кроль"</tspan>
<tspan x="21" y="309">speed: 0</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 4 KiB

Before After
Before After

186
2-ui/1-document/15-metrics/article.md
View file

@ -6,9 +6,9 @@
[cut]
## Метрики: образец документа
## Образец документа
Мы будем использовать для примера вот такой элемент, у которого есть рамка (border), поля (padding), отступы (margin) и прокрутка:
Мы будем использовать для примера вот такой элемент, у которого есть рамка (border), поля (padding), и прокрутка:
```html
<div id="example">
@ -17,23 +17,45 @@
<style>
#example {
width: 300px;
height: 200px;
border: 25px solid #F0E68C; /* рамка 25px */
border: 25px solid #E8C48F; /* рамка 25px */
padding: 20px; /* поля 20px */
margin: 20px; /* отступы 20px */
overflow: auto; /* прокрутка */
}
</style>
```
У него нет отступов `margin`, в этой главе они не важны, так как метрики касаются именно размеров самого элемента, отступы в них не учитываются.
Результат выглядит так:
<img src="css.png">
<img src="metric-css.png">
Вы можете открыть этот документ [edit src="metric"]в песочнице[/edit].
Вы можете открыть [edit src="metric"]этот документ в песочнице[/edit].
[smart header="Внимание, полоса прокрутки!"]
В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки.
В этом случае полоса прокрутки "отодвигает" содержимое вместе с `padding` влево, отбирая у него место.
Именно поэтому ширина содержимого обозначена как `content width` и равна `284px`, а не `300px`, как в CSS.
Точное значение получено в предположении, что ширина полосы прокрутки равна `16px`, то есть после её вычитания на содержимое остаётся `300 - 16 = 284px`. Конечно, она сильно зависит от браузера, устройства, ОС.
Мы должны в точности понимать, что происходит с размерами элемента при наличии полосы прокрутки, поэтому на картинке выше это отражено.
[/smart]
[smart header="Поле `padding` заполнено текстом"]
Обычно поля `padding` изображают пустыми, но так как текста много, то он заполняет нижнее поле `padding-bottom` в примере выше.
Во избежание путаницы заметим, что `padding` там, всё же, есть. Поля `padding` по CSS в элементе выше одинаковы со всех сторон. А такое заполнение -- нормальное поведение браузера.
[/smart]
## Метрики
У элементов существует ряд свойств, содержащих их внешние и внутренние размеры. Мы будем называть их "метриками".
@ -41,55 +63,57 @@
Вот общая картина:
<img src="summary2.png">
На картинке все они с трудом помещаются, но, как мы увидим далее, их значения просты и понятны.
Будем исследовать их снаружи элемента и вовнутрь.
## offsetWidth/Height
Эти свойства дают "внешнюю" ширину/высоту элемента, то есть его полный размер, включая рамки `border`, но исключая внешние отступы `margin`.
В примере выше:
<ul>
<li>`offsetWidth = 390` -- внешняя ширина блока</li>
<li>`offsetHeight = 290` -- внешняя высота блока</li>
</ul>
<img src="offsetWidth.png">
## offsetParent, offsetLeft/Top
[warn header="Используются редко..."]
Ситуации, когда эти свойства нужны, можно перечислить по пальцам. Они возникают действительно редко. Как правило, эти свойства используют по ошибке, потому что не знают средств правильной работы с координатами, о которых мы поговорим позже.
[/warn]
Ситуации, когда эти свойства нужны, можно перечислить по пальцам. Они возникают действительно редко. Как правило, эти свойства используют, потому что не знают средств правильной работы с координатами, о которых мы поговорим позже.
В `offsetParent` -- ссылка родительский элемент в смысле отображения на странице.
Несмотря на то, что эти свойства нужны реже всего, они -- самые "внешние", поэтому начнём с них.
**В `offsetParent` находится ссылка родительский элемент в смысле отображения на странице.**
Уточним, что имеется в виду.
Когда браузер рисует страницу, то он высчитывает дерево расположения элементов, иначе говоря "дерево геометрии" или "дерево рендеринга".
Когда браузер рисует страницу, то он высчитывает дерево расположения элементов, иначе говоря "дерево геометрии" или "дерево рендеринга", которое содержит всю информацию о размерах.
Обычно элементы вложены друг в друга и структура дерева рендеринга повторяет DOM.
При этом одни элементы естественным образом рисуются внутри других. Но, к примеру, если у элемента стоит `position:absolute`, то его расположение вычисляется уже не относительно непосредственного родителя `parentNode`, а относительно ближайшего <a href="http://www.w3.org/TR/CSS21/visuren.html#position-props">позиционированного элемента</a> (т.е. свойство `position` которого не равно `static`), или `BODY`, если такой отсутствует.
Но, к примеру, если у элемента стоит `position: absolute`, то его расположение вычисляется уже не относительно непосредственного родителя `parentNode`, а относительно ближайшего <a href="http://www.w3.org/TR/CSS21/visuren.html#position-props">позиционированного элемента</a> (т.е. свойство `position` которого не равно `static`), или `BODY`, если таковой отсутствует.
Получается, что элемент имеет в дополнение к обычному родителю в DOM -- ещё одного "родителя по позиционированию", то есть относительно которого он рисуется. Этот элемент и будет в свойстве `offsetParent`.
Получается, что элемент имеет в дополнение к родителю в DOM -- ещё одного "родителя" в плане позиционирования, то есть относительно которого он рисуется. Этот элемент и будет в свойстве `offsetParent`.
**Свойства `offsetLeft/Top` задают смещение относительно `offsetParent`.**
Свойства `offsetLeft/Top` задают смещение относительно `offsetParent`.
В примере ниже внешний `<div>` является родителем внутреннего по позиционированию, и отступ от него будет в `offsetLeft/Top`:
В примере ниже внутренний `<div>` имеет DOM-родителя `<form>`, но `offsetParent` у него `<main>`, и сдвиги относительно его верхнего-левого угла будут в `offsetLeft/Top`:
```html
<div style="position: relative">
<main style="position: relative">
<form>
<div style="position: absolute; left: 180px; top: 180px">...</div>
<div id="example" style="position: absolute; left: 180px; top: 180px">...</div>
</form>
</div>
</main>
```
<img src="offsetLeft.png">
<img src="metric-offset-parent.png">
## offsetWidth/Height
Теперь переходим к самому элементу.
Эти два свойства -- самые простые. Они содержат "внешнюю" ширину/высоту элемента, то есть его полный размер, включая рамки `border`.
<img src="metric-offset-width-height.png">
Для нашего элемента:
<ul>
<li>`offsetWidth = 390` -- внешняя ширина блока, её можно получить сложением CSS-ширины (`300px`, но её часть на рисунке выше отнимает прокрутка, поэтому `284 + 16`), полей(`2*20px`) и рамок (`2*25px`).</li>
<li>`offsetHeight = 290` -- внешняя высота блока.</li>
</ul>
[smart header="Метрики для невидимых элементов равны нулю."]
@ -98,7 +122,7 @@
Для элементов с `display:none` или находящихся вне документа дерево рендеринга не строится. Для них метрики равны нулю. Кстати, и `offsetParent` для таких элементов тоже `null`.
Это дает нам **замечательный способ для проверки, виден ли элемент**:
**Это дает нам замечательный способ для проверки, виден ли элемент**:
```js
function isHidden(elem)
@ -116,11 +140,11 @@ function isHidden(elem)
### clientTop/Left
## clientTop/Left
Отступ внутренней части элемента от внешней.
Далее внутри элемента у нас рамки `border`.
Другими словами, это ширина верхней/левой рамки(border) в пикселях.
Для них есть свойства-метрики `clientTop` и `clientLeft`.
В нашем примере:
<ul>
@ -128,28 +152,38 @@ function isHidden(elem)
<li>`clientTop = 25` -- ширина верхней рамки</li>
</ul>
<img src="clientLeft.png">
<img src="metric-client-left-top.png">
Казалось бы, зачем еще какие-то свойства, если ширину рамки можно получить напрямую из CSS? Да, можно. Обычно они действительно не нужны.
...Но на самом деле они -- вовсе не рамки, а отступ внутренней части элемента от внешней.
В чём же разница?
Она возникает тогда, когда документ располагается *справа налево* (операционная система на арабском языке или иврите). Полоса прокрутки в этом случае находится слева, и тогда свойство `clientLeft` включает в себя еще и ширину полосы прокрутки.
Получится так:
<img src="metric-client-left-top-rtl.png">
Но в случае, когда документ располагается *справа налево* (арабский язык, иврит), полоса прокрутки находится слева, и тогда свойство `clientLeft` включает в себя еще и ширину полосы прокрутки.
## clientWidth/Height
Эти свойства -- размер внутренней зоны элемента внутри рамок `border`.
Эти свойства -- размер элемента внутри рамок `border`.
Она включает в себя как ширину содержимого `width`, так и поля `padding`:
Они включают в себя ширину содержимого `width` вместе с полями `padding`, но без прокрутки.
<img src="clientWidth.png">
<img src="metric-client-width-height.png">
Как видно на рисунке выше, `clientWidth` в нашем документе складывается из ширины области содержимого (`284px`) плюс левый и правый `padding` (по `20px`), то есть всего `324px`.
На рисунке выше посмотрим вначале на `clientHeight`, её посчитать проще всего. Прокрутки нет, так что это в точности то, что внутри рамок: CSS-ширина `200px` плюс верхнее и нижнее поля `padding` (по `20px`), итого `240px`.
Аналогично, `clientHeight` -- это высота области содержимого (`200px`) плюс верхний и нижний `padding` (по `20px`), то есть `240px`. На рисунке выше нижний `padding` заполнен текстом, но это неважно: по правилам он всегда входит в `clientHeight`.
На рисунке нижний `padding` заполнен текстом, но это неважно: по правилам он всегда входит в `clientHeight`.
Теперь `clientWidth` -- ширина содержимого здесь не равна CSS-ширине, её часть "съедает" полоса прокрутки.
Поэтому в `clientWidth` входит не CSS-ширина, а реальная ширина содержимого `284px` плюс левое и правое поля `padding` (по `20px`), итого `324px`.
**Если `padding` нет, то `clientWidth/Height` в точности равны размеру области содержимого, внутри рамок и полосы прокрутки.**
<img src="clientWidthNoPadding.png">
<img src="metric-client-width-nopadding.png">
Поэтому в тех случаях, когда мы точно знаем, что `padding` нет, их используют для определения внутренних размеров элемента.
@ -157,17 +191,17 @@ function isHidden(elem)
Эти свойства -- аналоги `clientWidth/clientHeight`, но с учетом прокрутки.
Свойства `clientWidth/clientHeight` относятся только к видимой области элемента, а `scrollWidth/scrollHeight` добавляют к ней прокрученную по горизонтали/вертикали.
Свойства `clientWidth/clientHeight` относятся только к видимой области элемента, а `scrollWidth/scrollHeight` добавляют к ней прокрученную (которую не видно) по горизонтали/вертикали.
<img src="metric-scroll-width-height.png">
На рисунке выше:
<ul>
<li>`scrollHeight = 723` -- полная высота, включая прокрученную область</li>
<li>`scrollWidth = 324` -- полная ширина, включая прокрученную область</li>
<li>`scrollHeight = 723` -- полная внутренняя высота, включая прокрученную область.</li>
<li>`scrollWidth = 324` -- полная внутренняя ширина, в данном случае прокрутки нет, поэтому она равна `clientWidth`.</li>
</ul>
<img src="scrollWidth.png">
Эти свойства можно использовать, чтобы "распахнуть" элемент на всю ширину/высоту:
Эти свойства можно использовать, чтобы "распахнуть" элемент на всю ширину/высоту, таким кодом:
```js
element.style.height = element.scrollHeight + 'px';
@ -183,14 +217,13 @@ element.style.height = element.scrollHeight + 'px';
[/pre]
[/online]
## scrollLeft/scrollTop
Свойства `scrollLeft/scrollTop` -- ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.
Следующее иллюстрация показывает значения `scrollHeight` и `scrollTop` для блока с вертикальной прокруткой.
<img src="scrollTop.png">
<img src="metric-scroll-top.png">
[smart header="`scrollLeft/scrollTop` можно изменять"]
В отличие от большинства свойств, которые доступны только для чтения, значения `scrollLeft/scrollTop` можно изменить, и браузер выполнит прокрутку элемента.
@ -205,7 +238,9 @@ element.style.height = element.scrollHeight + 'px';
## Не стоит брать width/height из CSS
Теперь несколько слов о том, как не надо делать.
Мы рассмотрели метрики -- свойства, которые есть у DOM-элементов. Их обычно используют для получения их различных высот, ширин и прочих расстояний.
Теперь несколько слов о том, как *не* надо делать.
Как мы знаем, CSS-высоту и ширину можно установить с помощью `elem.style` и извлечь, используя `getComputedStyle`, которые в подробностях обсуждаются в главе [](/styles-and-classes).
@ -218,11 +253,11 @@ var elem = document.body;
alert( getComputedStyle(elem).width ); // вывести CSS-ширину для elem
```
Всегда ли такой подход сработает? Увы, нет!
Не лучше ли получать ширину так, вместо метрик? Вовсе нет!
<ol>
<li>Во-первых, CSS-свойства `width/height` зависят от другого свойства -- `box-sizing`, которое определяет, что такое, собственно, эти ширина и высота. Получается, что изменение этого свойства, к примеру, для более удобной вёрстки, может сломать JavaScript.</li>
<li>Во-вторых, свойства `width/height` могут быть равны `auto`, например, для инлайн-элемента:
<li>Во-первых, CSS-свойства `width/height` зависят от другого свойства -- `box-sizing`, которое определяет, что такое, собственно, эти ширина и высота. Получается, что изменение `box-sizing`, к примеру, для более удобной вёрстки, сломает такой JavaScript.</li>
<li>Во-вторых, в CSS свойства `width/height` могут быть равны `auto`, например, для инлайн-элемента:
```html
<!--+ run -->
@ -234,48 +269,45 @@ alert( getComputedStyle(elem).width ); // вывести CSS-ширину для
*/!*
</script>
```
Конечно, с точки зрения CSS размер `auto` -- совершенно нормально, но нам-то в JavaScript нужен конкретный размер в пикселях, который мы могли бы использовать для вычислений. Получается, что в данном случае ширина `width` из CSS вообще бесполезна.
</li>
</ol>
Конечно, с точки зрения CSS размер `auto` -- совершенно нормально, но нам-то в JavaScript нужен конкретный размер в пикселях, который мы могли бы использовать для вычислений. Получается, что в данном случае ширина `width` из CSS вообще бесполезна.
## Полоса прокрутки и содержимое
Есть и ещё одна причина.
Полоса прокрутки -- причина многих проблем и недопониманий. Как говорится, "дьявол кроется в деталях". Недопустимо, чтобы наш код работал на элементах без прокрутки и начинал "глючить" с ней.
При наличии вертикальной полосы прокрутки, она как правило забирает себе место из "области содержимого" элемента.
Как мы говорили ранее, при наличии вертикальной полосы прокрутки, в зависимости от браузера, устройства и операционной системы, она может сдвинуть содержимое.
И это учитывают свойства `clientWidth/clientHeight`.
Получается, что реальная ширина содержимого меньше CSS-ширины. И это учитывают свойства `clientWidth/clientHeight`.
...Но при этом некоторые браузеры отражают реальное уменьшение ширины в результате `getComputedStyle(elem).width`, а некоторые -- нет.
В примере ниже у элемента с текстом в стилях указано `width:300px`. А вот `getComputedStyle` возвращает значение от `280px` до `300px`, в зависимости от ОС и браузера.
...Но при этом некоторые браузеры также учитывают это в результате `getComputedStyle(elem).width`, то есть возвращают реальную внутреннюю ширину, а некоторые -- именно CSS-свойство. Эти кросс-браузерные отличия -- ещё один повод не использовать такой подход, а использовать свойства-метрики.
[online]
Если ваш браузер в принципе показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже:
[/online]
Если ваш браузер показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже.
[iframe src="cssWidthScroll" link border=1]
Описанные разночтения касаются только чтения свойства `getComputedStyle(...).width` из JavaScript, визуальное отображение корректно в обоих случаях -- ширина текста при наличии прокрутки в обоих случаях уменьшается.
У элемента с текстом в стилях указано `width:300px`.
Этот пример важен, чтобы ещё лучше понять: CSS-свойство `width` не следует использовать в JavaScript. А стоит использовать метрики, которые мы разобрали в этом разделе.
На момент написания этой главы при тестировании в Chrome под Windows `alert` выводил `283px`, а в Firefox -- `300px`. При этом оба браузера показывали прокрутку. Это из-за того, что Firefox возвращал именно CSS-ширину, а Chrome -- реальную ширину, за вычетом прокрутки.
[/online]
Описанные разночтения касаются только чтения свойства `getComputedStyle(...).width` из JavaScript, визуальное отображение корректно в обоих случаях.
## Итого
У элементов есть следующие метрики:
<ul>
<li>`clientWidth/clientHeight` -- ширина/высота видимой области, включая поля, но не полосы прокрутки.</li>
<li>`clientLeft/clientTop` -- ширина левой/верхней рамки или, точнее, сдвиг клиентской области, относительно верхнего левого угла блока.
Используется, преимущественно, в IE<8 для вычисления сдвига `document.body`.
</li>
<li>`scrollWidth/scrollHeight` -- ширина/высота прокручиваемой области. Включает в себя `padding` и не включает полосы прокрутки.</li>
<li>`scrollLeft/scrollTop` -- ширина/высота прокрученной части документа, считается от верхнего левого угла.</li>
<li>`offsetWidth/offsetHeight` -- "внешняя" ширина/высота блока, не считая отступов.</li>
<li>`offsetParent` -- "родитель по дереву рендеринга" -- ближайшая ячейка таблицы, body для статического позиционирования или ближайший позиционированный элемент для других типов позиционирования.</li>
<li>`offsetLeft/offsetTop` -- позиция в пикселях левого верхнего угла блока, относительно его `offsetParent`.</li>
<li>`offsetWidth/offsetHeight` -- "внешняя" ширина/высота блока, включая рамки.</li>
<li>`clientLeft/clientTop` -- отступ области содержимого от левого-верхнего угла элемента. Если операционная система располагает вертикальную прокрутку справа, то равны ширинам левой/верхней рамки, если же слева (ОС на иврите, арабском), то `clientLeft` включает в себя прокрутку.
</li>
<li>`clientWidth/clientHeight` -- ширина/высота содержимого вместе с полями `padding`, но без полосы прокрутки.</li>
<li>`scrollWidth/scrollHeight` -- ширина/высота содержимого, включая прокручиваемую область. Включает в себя `padding` и не включает полосы прокрутки.</li>
<li>`scrollLeft/scrollTop` -- ширина/высота прокрученной части документа, считается от верхнего левого угла.</li>
</ul>
Все свойства, доступны только для чтения, кроме `scrollLeft/scrollTop`. Изменение этих свойств заставляет браузер прокручивать элемент.

7
2-ui/1-document/15-metrics/cssWidthScroll.view/index.html
View file

@ -13,17 +13,12 @@
</div>
<script>
function getWidth() {
var style = window.getComputedStyle ? getComputedStyle(elem, '') : elem.currentStyle;
return style.width;
}
// FF: 200, Ch/Sa: 184, Op: 200, IE9: 184, IE7,8:200
</script>
У элемента стоит <code>style="width:300px"</code><br>
<button onclick="alert(getWidth())">alert(width из getComputedStyle/currentStyle)</button>
<button onclick="alert( getComputedStyle(elem).width )">alert( getComputedStyle(elem).width )</button>
</body>
</html>

BIN
2-ui/1-document/15-metrics/metric-client-left-top-rtl.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
2-ui/1-document/15-metrics/metric-client-left-top-rtl@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
2-ui/1-document/15-metrics/metric-client-left-top.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
2-ui/1-document/15-metrics/metric-client-left-top@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 179 KiB

BIN
2-ui/1-document/15-metrics/metric-client-width-height.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
2-ui/1-document/15-metrics/metric-client-width-height@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 182 KiB

BIN
2-ui/1-document/15-metrics/metric-client-width-nopadding.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
2-ui/1-document/15-metrics/metric-client-width-nopadding@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 153 KiB

BIN
2-ui/1-document/15-metrics/metric-css.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
2-ui/1-document/15-metrics/metric-css@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 174 KiB

BIN
2-ui/1-document/15-metrics/metric-offset-parent.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
2-ui/1-document/15-metrics/metric-offset-width-height.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
2-ui/1-document/15-metrics/metric-offset-width-height@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 186 KiB

BIN
2-ui/1-document/15-metrics/metric-scroll-top.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 117 KiB

BIN
2-ui/1-document/15-metrics/metric-scroll-top@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 258 KiB

BIN
2-ui/1-document/15-metrics/metric-scroll-width-height.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
2-ui/1-document/15-metrics/metric-scroll-width-height@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 259 KiB

7
2-ui/1-document/15-metrics/metric.view/index.html
View file

@ -13,9 +13,8 @@
width: 300px;
height: 200px;
overflow: auto;
border: 25px solid #F0E68C;
border: 25px solid #E8C48F;
padding: 20px;
margin: 20px;
}
.key {
cursor: pointer;
@ -29,9 +28,7 @@
<div id="example">
<h3>Introduction</h3>
<p>This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company's Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0.</p>
<p>The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997.</p>
<p>This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company's Navigator 2.0 browser. It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997.</p>
<p>That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.</p>

35
2-ui/1-document/16-metrics-window/document-client-width-height.svg
View file

@ -1,24 +1,27 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="550px" height="203px" viewBox="0 0 550 203" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="550px" height="203px" viewBox="0 0 550 203" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>document-client-width-height.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="document-client-width-height">
<g id="noun_69008_cc" transform="translate(236.000000, 8.000000)" fill="#E8C48E">
<path d="M179.1875,145 L3.8125,145 C1.708,145 0,143.36875 0,141.375 L0,3.625 C0,1.63125 1.708,0 3.8125,0 L179.1875,0 C181.284375,0 183,1.63125 183,3.625 L183,141.375 C183,143.36875 181.284375,145 179.1875,145 L179.1875,145 Z M7.625,137.75 L175.375,137.75 L175.375,7.25 L7.625,7.25 L7.625,137.75 L7.625,137.75 Z" id="Shape"></path>
<path d="M175.375,36.25 L7.625,36.25 C5.5205,36.25 3.8125,34.61875 3.8125,32.625 C3.8125,30.63125 5.5205,29 7.625,29 L175.375,29 C177.471875,29 179.1875,30.63125 179.1875,32.625 C179.1875,34.61875 177.471875,36.25 175.375,36.25 L175.375,36.25 Z" id="Shape"></path>
<path d="M61.32025,126.57775 C60.0545,126.57775 58.811625,125.98325 58.08725,124.89575 L34.892,89.84925 C34.060875,88.57325 34.121875,86.97825 35.052125,85.7675 L58.247375,55.86125 C59.497875,54.23 61.876875,53.8965 63.57725,55.1145 C65.27,56.3035 65.636,58.57275 64.377875,60.18225 L42.7305,88.102 L64.538,121.05325 C65.658875,122.7425 65.125125,124.99 63.340875,126.04125 C62.72325,126.411 62.014125,126.57775 61.32025,126.57775 L61.32025,126.57775 Z" id="Shape"></path>
<path d="M122,126.57775 C121.306125,126.57775 120.597,126.411 119.97175,126.0195 C118.1875,124.961 117.646125,122.72075 118.774625,121.0315 L140.582125,88.08025 L118.927125,60.15325 C117.676625,58.5365 118.035,56.2745 119.72775,55.0855 C121.4205,53.88925 123.807125,54.23725 125.057625,55.84675 L148.24525,85.753 C149.183125,86.9565 149.244125,88.57325 148.405375,89.83475 L125.210125,124.88125 C124.501,125.98325 123.26575,126.57775 122,126.57775 L122,126.57775 Z" id="Shape"></path>
<path d="M76.25,119.93675 C75.617125,119.93675 74.98425,119.7845 74.3895,119.48 C72.551875,118.50125 71.896125,116.29725 72.9255,114.521 L103.10525,63.162 C104.134625,61.4075 106.445,60.77675 108.3055,61.79175 C110.1355,62.7705 110.79125,64.96725 109.761875,66.729 L79.582125,118.088 C78.880625,119.26975 77.584375,119.93675 76.25,119.93675 L76.25,119.93675 Z" id="Shape"></path>
<path d="M22.875,18.125 C22.875,20.1278125 21.1689062,21.75 19.0625,21.75 C16.9560938,21.75 15.25,20.1278125 15.25,18.125 C15.25,16.1221875 16.9560938,14.5 19.0625,14.5 C21.1689062,14.5 22.875,16.1221875 22.875,18.125 L22.875,18.125 Z" id="Shape"></path>
<path d="M38.125,18.125 C38.125,20.1278125 36.4189062,21.75 34.3125,21.75 C32.2060938,21.75 30.5,20.1278125 30.5,18.125 C30.5,16.1221875 32.2060938,14.5 34.3125,14.5 C36.4189062,14.5 38.125,16.1221875 38.125,18.125 L38.125,18.125 Z" id="Shape"></path>
<path d="M53.375,18.125 C53.375,20.1278125 51.6689062,21.75 49.5625,21.75 C47.4560938,21.75 45.75,20.1278125 45.75,18.125 C45.75,16.1221875 47.4560938,14.5 49.5625,14.5 C51.6689062,14.5 53.375,16.1221875 53.375,18.125 L53.375,18.125 Z" id="Shape"></path>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="document-client-width-height.svg" sketch:type="MSArtboardGroup">
<g id="noun_69008_cc" sketch:type="MSLayerGroup" transform="translate(236.000000, 8.000000)" fill="#E8C48E">
<path d="M179.1875,145 L3.8125,145 C1.708,145 0,143.36875 0,141.375 L0,3.625 C0,1.63125 1.708,0 3.8125,0 L179.1875,0 C181.284375,0 183,1.63125 183,3.625 L183,141.375 C183,143.36875 181.284375,145 179.1875,145 L179.1875,145 Z M7.625,137.75 L175.375,137.75 L175.375,7.25 L7.625,7.25 L7.625,137.75 L7.625,137.75 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M175.375,36.25 L7.625,36.25 C5.5205,36.25 3.8125,34.61875 3.8125,32.625 C3.8125,30.63125 5.5205,29 7.625,29 L175.375,29 C177.471875,29 179.1875,30.63125 179.1875,32.625 C179.1875,34.61875 177.471875,36.25 175.375,36.25 L175.375,36.25 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M61.32025,126.57775 C60.0545,126.57775 58.811625,125.98325 58.08725,124.89575 L34.892,89.84925 C34.060875,88.57325 34.121875,86.97825 35.052125,85.7675 L58.247375,55.86125 C59.497875,54.23 61.876875,53.8965 63.57725,55.1145 C65.27,56.3035 65.636,58.57275 64.377875,60.18225 L42.7305,88.102 L64.538,121.05325 C65.658875,122.7425 65.125125,124.99 63.340875,126.04125 C62.72325,126.411 62.014125,126.57775 61.32025,126.57775 L61.32025,126.57775 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M122,126.57775 C121.306125,126.57775 120.597,126.411 119.97175,126.0195 C118.1875,124.961 117.646125,122.72075 118.774625,121.0315 L140.582125,88.08025 L118.927125,60.15325 C117.676625,58.5365 118.035,56.2745 119.72775,55.0855 C121.4205,53.88925 123.807125,54.23725 125.057625,55.84675 L148.24525,85.753 C149.183125,86.9565 149.244125,88.57325 148.405375,89.83475 L125.210125,124.88125 C124.501,125.98325 123.26575,126.57775 122,126.57775 L122,126.57775 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M76.25,119.93675 C75.617125,119.93675 74.98425,119.7845 74.3895,119.48 C72.551875,118.50125 71.896125,116.29725 72.9255,114.521 L103.10525,63.162 C104.134625,61.4075 106.445,60.77675 108.3055,61.79175 C110.1355,62.7705 110.79125,64.96725 109.761875,66.729 L79.582125,118.088 C78.880625,119.26975 77.584375,119.93675 76.25,119.93675 L76.25,119.93675 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M22.875,18.125 C22.875,20.1278125 21.1689062,21.75 19.0625,21.75 C16.9560938,21.75 15.25,20.1278125 15.25,18.125 C15.25,16.1221875 16.9560938,14.5 19.0625,14.5 C21.1689062,14.5 22.875,16.1221875 22.875,18.125 L22.875,18.125 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M38.125,18.125 C38.125,20.1278125 36.4189062,21.75 34.3125,21.75 C32.2060938,21.75 30.5,20.1278125 30.5,18.125 C30.5,16.1221875 32.2060938,14.5 34.3125,14.5 C36.4189062,14.5 38.125,16.1221875 38.125,18.125 L38.125,18.125 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M53.375,18.125 C53.375,20.1278125 51.6689062,21.75 49.5625,21.75 C47.4560938,21.75 45.75,20.1278125 45.75,18.125 C45.75,16.1221875 47.4560938,14.5 49.5625,14.5 C51.6689062,14.5 53.375,16.1221875 53.375,18.125 L53.375,18.125 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
<path d="M274.078672,96.0852289 L254.783869,88.4952289 C254.041565,88.2042289 253.073012,88.0582289 252.099374,88.0582289 C251.128279,88.0582289 250.154641,88.2042289 249.41488,88.4952289 C247.932815,89.0792289 247.932815,90.0242289 249.41488,90.6072289 L263.343236,96.0852289 L218.459304,96.0852289 C218.451678,96.0852289 218.444051,96.0862289 218.433883,96.0862289 L185.561537,96.0862289 L199.489894,90.6082289 C200.971959,90.0242289 200.971959,89.0792289 199.489894,88.4962289 C198.005287,87.9132289 195.60297,87.9132289 194.120905,88.4962289 L171.030695,97.5792289 L174.826102,99.0732289 L194.120905,106.663229 C194.863209,106.954229 195.831762,107.101229 196.8054,107.101229 C197.776495,107.101229 198.750133,106.954229 199.489894,106.663229 C200.971959,106.079229 200.971959,105.134229 199.489894,104.551229 L185.561537,99.0732289 L230.44547,99.0732289 C230.453096,99.0732289 230.460723,99.0722289 230.470891,99.0722289 L263.343236,99.0722289 L249.41488,104.550229 C247.932815,105.134229 247.932815,106.079229 249.41488,106.662229 C250.899486,107.245229 253.301804,107.245229 254.783869,106.662229 L277.874079,97.5792289 L274.078672,96.0852289" id="Fill-25" fill="#EE6B47" transform="translate(224.452387, 97.579729) rotate(-91.000000) translate(-224.452387, -97.579729) "></path>
<path d="M408.414472,164.793761 L375.121164,157.203761 C373.840315,156.912761 372.16907,156.766761 370.489052,156.766761 C368.81342,156.766761 367.133402,156.912761 365.856939,157.203761 C363.299627,157.787761 363.299627,158.732761 365.856939,159.315761 L389.890409,164.793761 L312.442893,164.793761 C312.429734,164.793761 312.416574,164.794761 312.399028,164.794761 L255.677584,164.794761 L279.711053,159.316761 C282.268365,158.732761 282.268365,157.787761 279.711053,157.204761 C277.149355,156.621761 273.00414,156.621761 270.446828,157.204761 L230.604521,166.287761 L237.15352,167.781761 L270.446828,175.371761 C271.727678,175.662761 273.398923,175.809761 275.078941,175.809761 C276.754572,175.809761 278.43459,175.662761 279.711053,175.371761 C282.268365,174.787761 282.268365,173.842761 279.711053,173.259761 L255.677584,167.781761 L333.125099,167.781761 C333.138259,167.781761 333.151418,167.780761 333.168964,167.780761 L389.890409,167.780761 L365.856939,173.258761 C363.299627,173.842761 363.299627,174.787761 365.856939,175.370761 C368.418638,175.953761 372.563852,175.953761 375.121164,175.370761 L414.963472,166.287761 L408.414472,164.793761" id="Fill-26" fill="#EE6B47" transform="translate(322.783996, 166.288261) rotate(-179.000000) translate(-322.783996, -166.288261) "></path>
<text id="documentElement.clie" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<path d="M274.078672,96.0852289 L254.783869,88.4952289 C254.041565,88.2042289 253.073012,88.0582289 252.099374,88.0582289 C251.128279,88.0582289 250.154641,88.2042289 249.41488,88.4952289 C247.932815,89.0792289 247.932815,90.0242289 249.41488,90.6072289 L263.343236,96.0852289 L218.459304,96.0852289 C218.451678,96.0852289 218.444051,96.0862289 218.433883,96.0862289 L185.561537,96.0862289 L199.489894,90.6082289 C200.971959,90.0242289 200.971959,89.0792289 199.489894,88.4962289 C198.005287,87.9132289 195.60297,87.9132289 194.120905,88.4962289 L171.030695,97.5792289 L174.826102,99.0732289 L194.120905,106.663229 C194.863209,106.954229 195.831762,107.101229 196.8054,107.101229 C197.776495,107.101229 198.750133,106.954229 199.489894,106.663229 C200.971959,106.079229 200.971959,105.134229 199.489894,104.551229 L185.561537,99.0732289 L230.44547,99.0732289 C230.453096,99.0732289 230.460723,99.0722289 230.470891,99.0722289 L263.343236,99.0722289 L249.41488,104.550229 C247.932815,105.134229 247.932815,106.079229 249.41488,106.662229 C250.899486,107.245229 253.301804,107.245229 254.783869,106.662229 L277.874079,97.5792289 L274.078672,96.0852289" id="Fill-25" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(224.452387, 97.579729) rotate(-91.000000) translate(-224.452387, -97.579729) "></path>
<path d="M408.414472,164.793761 L375.121164,157.203761 C373.840315,156.912761 372.16907,156.766761 370.489052,156.766761 C368.81342,156.766761 367.133402,156.912761 365.856939,157.203761 C363.299627,157.787761 363.299627,158.732761 365.856939,159.315761 L389.890409,164.793761 L312.442893,164.793761 C312.429734,164.793761 312.416574,164.794761 312.399028,164.794761 L255.677584,164.794761 L279.711053,159.316761 C282.268365,158.732761 282.268365,157.787761 279.711053,157.204761 C277.149355,156.621761 273.00414,156.621761 270.446828,157.204761 L230.604521,166.287761 L237.15352,167.781761 L270.446828,175.371761 C271.727678,175.662761 273.398923,175.809761 275.078941,175.809761 C276.754572,175.809761 278.43459,175.662761 279.711053,175.371761 C282.268365,174.787761 282.268365,173.842761 279.711053,173.259761 L255.677584,167.781761 L333.125099,167.781761 C333.138259,167.781761 333.151418,167.780761 333.168964,167.780761 L389.890409,167.780761 L365.856939,173.258761 C363.299627,173.842761 363.299627,174.787761 365.856939,175.370761 C368.418638,175.953761 372.563852,175.953761 375.121164,175.370761 L414.963472,166.287761 L408.414472,164.793761" id="Fill-26" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(322.783996, 166.288261) rotate(-179.000000) translate(-322.783996, -166.288261) "></path>
<text id="documentElement.clie" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="4" y="99">documentElement.clientHeight</tspan>
</text>
<text id="document.documentEle" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<text id="document.documentEle" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="253" y="198">document.documentElement.clientWidth</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

Before After
Before After

41
2-ui/1-document/17-coordinates/coords.svg
View file

@ -1,33 +1,36 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="370px" height="280px" viewBox="0 0 370 280" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="370px" height="280px" viewBox="0 0 370 280" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>coords.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="coords">
<g id="noun_69008_cc" transform="translate(13.000000, 11.000000)" fill="#E8C48E">
<path d="M339.770833,256 L7.22916667,256 C3.23866667,256 0,253.12 0,249.6 L0,6.4 C0,2.88 3.23866667,0 7.22916667,0 L339.770833,0 C343.746875,0 347,2.88 347,6.4 L347,249.6 C347,253.12 343.746875,256 339.770833,256 L339.770833,256 Z M14.4583333,243.2 L332.541667,243.2 L332.541667,12.8 L14.4583333,12.8 L14.4583333,243.2 L14.4583333,243.2 Z" id="Shape"></path>
<path d="M332.541667,64 L14.4583333,64 C10.4678333,64 7.22916667,61.12 7.22916667,57.6 C7.22916667,54.08 10.4678333,51.2 14.4583333,51.2 L332.541667,51.2 C336.517708,51.2 339.770833,54.08 339.770833,57.6 C339.770833,61.12 336.517708,64 332.541667,64 L332.541667,64 Z" id="Shape"></path>
<path d="M43.375,32 C43.375,35.536 40.1399479,38.4 36.1458333,38.4 C32.1517188,38.4 28.9166667,35.536 28.9166667,32 C28.9166667,28.464 32.1517188,25.6 36.1458333,25.6 C40.1399479,25.6 43.375,28.464 43.375,32 L43.375,32 Z" id="Shape"></path>
<path d="M72.2916667,32 C72.2916667,35.536 69.0566146,38.4 65.0625,38.4 C61.0683854,38.4 57.8333333,35.536 57.8333333,32 C57.8333333,28.464 61.0683854,25.6 65.0625,25.6 C69.0566146,25.6 72.2916667,28.464 72.2916667,32 L72.2916667,32 Z" id="Shape"></path>
<path d="M101.208333,32 C101.208333,35.536 97.9732812,38.4 93.9791667,38.4 C89.9850521,38.4 86.75,35.536 86.75,32 C86.75,28.464 89.9850521,25.6 93.9791667,25.6 C97.9732812,25.6 101.208333,28.464 101.208333,32 L101.208333,32 Z" id="Shape"></path>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="coords.svg" sketch:type="MSArtboardGroup">
<g id="noun_69008_cc" sketch:type="MSLayerGroup" transform="translate(13.000000, 11.000000)" fill="#E8C48E">
<path d="M339.770833,256 L7.22916667,256 C3.23866667,256 0,253.12 0,249.6 L0,6.4 C0,2.88 3.23866667,0 7.22916667,0 L339.770833,0 C343.746875,0 347,2.88 347,6.4 L347,249.6 C347,253.12 343.746875,256 339.770833,256 L339.770833,256 Z M14.4583333,243.2 L332.541667,243.2 L332.541667,12.8 L14.4583333,12.8 L14.4583333,243.2 L14.4583333,243.2 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M332.541667,64 L14.4583333,64 C10.4678333,64 7.22916667,61.12 7.22916667,57.6 C7.22916667,54.08 10.4678333,51.2 14.4583333,51.2 L332.541667,51.2 C336.517708,51.2 339.770833,54.08 339.770833,57.6 C339.770833,61.12 336.517708,64 332.541667,64 L332.541667,64 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M43.375,32 C43.375,35.536 40.1399479,38.4 36.1458333,38.4 C32.1517188,38.4 28.9166667,35.536 28.9166667,32 C28.9166667,28.464 32.1517188,25.6 36.1458333,25.6 C40.1399479,25.6 43.375,28.464 43.375,32 L43.375,32 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M72.2916667,32 C72.2916667,35.536 69.0566146,38.4 65.0625,38.4 C61.0683854,38.4 57.8333333,35.536 57.8333333,32 C57.8333333,28.464 61.0683854,25.6 65.0625,25.6 C69.0566146,25.6 72.2916667,28.464 72.2916667,32 L72.2916667,32 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M101.208333,32 C101.208333,35.536 97.9732812,38.4 93.9791667,38.4 C89.9850521,38.4 86.75,35.536 86.75,32 C86.75,28.464 89.9850521,25.6 93.9791667,25.6 C97.9732812,25.6 101.208333,28.464 101.208333,32 L101.208333,32 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
<path d="M183.778498,109.408418 L171.15957,101.818418 C170.674099,101.527418 170.040659,101.381418 169.403893,101.381418 C168.76879,101.381418 168.132025,101.527418 167.648216,101.818418 C166.678936,102.402418 166.678936,103.347418 167.648216,103.930418 L176.757453,109.408418 L147.403067,109.408418 C147.398079,109.408418 147.393092,109.409418 147.386441,109.409418 L125.887712,109.409418 L134.996949,103.931418 C135.966229,103.347418 135.966229,102.402418 134.996949,101.819418 C134.026006,101.236418 132.454875,101.236418 131.485595,101.819418 L116.384446,110.902418 L118.866667,112.396418 L131.485595,119.986418 C131.971066,120.277418 132.604506,120.424418 133.241272,120.424418 C133.876375,120.424418 134.51314,120.277418 134.996949,119.986418 C135.966229,119.402418 135.966229,118.457418 134.996949,117.874418 L125.887712,112.396418 L155.242098,112.396418 C155.247086,112.396418 155.252073,112.395418 155.258724,112.395418 L176.757453,112.395418 L167.648216,117.873418 C166.678936,118.457418 166.678936,119.402418 167.648216,119.985418 C168.619159,120.568418 170.19029,120.568418 171.15957,119.985418 L186.260719,110.902418 L183.778498,109.408418" id="Fill-25" fill="#EE6B47" transform="translate(151.322583, 110.902918) rotate(-91.000000) translate(-151.322583, -110.902918) "></path>
<path d="M217.647832,123.004454 L200.11755,115.414454 C199.443131,115.123454 198.563153,114.977454 197.678555,114.977454 C196.796267,114.977454 195.911669,115.123454 195.239559,115.414454 C193.89303,115.998454 193.89303,116.943454 195.239559,117.526454 L207.894159,123.004454 L167.114891,123.004454 C167.107962,123.004454 167.101033,123.005454 167.091794,123.005454 L137.225646,123.005454 L149.880245,117.527454 C151.226774,116.943454 151.226774,115.998454 149.880245,115.415454 C148.531407,114.832454 146.348783,114.832454 145.002254,115.415454 L124.023658,124.498454 L127.471973,125.992454 L145.002254,133.582454 C145.676673,133.873454 146.556652,134.020454 147.44125,134.020454 C148.323538,134.020454 149.208136,133.873454 149.880245,133.582454 C151.226774,132.998454 151.226774,132.053454 149.880245,131.470454 L137.225646,125.992454 L178.004914,125.992454 C178.011843,125.992454 178.018772,125.991454 178.02801,125.991454 L207.894159,125.991454 L195.239559,131.469454 C193.89303,132.053454 193.89303,132.998454 195.239559,133.581454 C196.588398,134.164454 198.771022,134.164454 200.11755,133.581454 L221.096146,124.498454 L217.647832,123.004454" id="Fill-27" fill="#EE6B47" transform="translate(172.559902, 124.498954) rotate(-91.000000) translate(-172.559902, -124.498954) "></path>
<path d="M147.699419,172.81504 L125.29081,165.22504 C124.428713,164.93404 123.303854,164.78804 122.173091,164.78804 C121.045279,164.78804 119.914515,164.93404 119.055371,165.22504 C117.33413,165.80904 117.33413,166.75404 119.055371,167.33704 L135.231494,172.81504 L83.1041674,172.81504 C83.0953102,172.81504 83.0864531,172.81604 83.0746435,172.81604 L44.8973409,172.81604 L61.0734635,167.33804 C62.7947045,166.75404 62.7947045,165.80904 61.0734635,165.22604 C59.3492701,164.64304 56.5592654,164.64304 54.8380244,165.22604 L28.0215029,174.30904 L32.4294151,175.80304 L54.8380244,183.39304 C55.7001211,183.68404 56.8249801,183.83104 57.9557439,183.83104 C59.0835554,183.83104 60.2143192,183.68404 61.0734635,183.39304 C62.7947045,182.80904 62.7947045,181.86404 61.0734635,181.28104 L44.8973409,175.80304 L97.0246671,175.80304 C97.0335242,175.80304 97.0423814,175.80204 97.0541909,175.80204 L135.231494,175.80204 L119.055371,181.28004 C117.33413,181.86404 117.33413,182.80904 119.055371,183.39204 C120.779564,183.97504 123.569569,183.97504 125.29081,183.39204 L152.107332,174.30904 L147.699419,172.81504" id="Fill-26" fill="#EE6B47" transform="translate(90.064417, 174.309540) rotate(-179.000000) translate(-90.064417, -174.309540) "></path>
<path d="M222.034748,195.487649 L185.706421,187.897649 C184.308809,187.606649 182.485213,187.460649 180.652045,187.460649 C178.823663,187.460649 176.990494,187.606649 175.597669,187.897649 C172.807232,188.481649 172.807232,189.426649 175.597669,190.009649 L201.822031,195.487649 L117.314396,195.487649 C117.300037,195.487649 117.285678,195.488649 117.266532,195.488649 L55.3743578,195.488649 L81.5987197,190.010649 C84.3891564,189.426649 84.3891564,188.481649 81.5987197,187.898649 C78.8034966,187.315649 74.2804044,187.315649 71.4899677,187.898649 L28.0156331,196.981649 L35.1616401,198.475649 L71.4899677,206.065649 C72.8875792,206.356649 74.7111751,206.503649 76.5443437,206.503649 C78.3727259,206.503649 80.2058945,206.356649 81.5987197,206.065649 C84.3891564,205.481649 84.3891564,204.536649 81.5987197,203.953649 L55.3743578,198.475649 L139.881993,198.475649 C139.896352,198.475649 139.910711,198.474649 139.929856,198.474649 L201.822031,198.474649 L175.597669,203.952649 C172.807232,204.536649 172.807232,205.481649 175.597669,206.064649 C178.392892,206.647649 182.915984,206.647649 185.706421,206.064649 L229.180755,196.981649 L222.034748,195.487649" id="Fill-28" fill="#EE6B47" transform="translate(128.598194, 196.982149) rotate(-179.000000) translate(-128.598194, -196.982149) "></path>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" x="151" y="145.957" width="75" height="29.043"></rect>
<text id="&lt;DIV&gt;" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<path d="M183.778498,109.408418 L171.15957,101.818418 C170.674099,101.527418 170.040659,101.381418 169.403893,101.381418 C168.76879,101.381418 168.132025,101.527418 167.648216,101.818418 C166.678936,102.402418 166.678936,103.347418 167.648216,103.930418 L176.757453,109.408418 L147.403067,109.408418 C147.398079,109.408418 147.393092,109.409418 147.386441,109.409418 L125.887712,109.409418 L134.996949,103.931418 C135.966229,103.347418 135.966229,102.402418 134.996949,101.819418 C134.026006,101.236418 132.454875,101.236418 131.485595,101.819418 L116.384446,110.902418 L118.866667,112.396418 L131.485595,119.986418 C131.971066,120.277418 132.604506,120.424418 133.241272,120.424418 C133.876375,120.424418 134.51314,120.277418 134.996949,119.986418 C135.966229,119.402418 135.966229,118.457418 134.996949,117.874418 L125.887712,112.396418 L155.242098,112.396418 C155.247086,112.396418 155.252073,112.395418 155.258724,112.395418 L176.757453,112.395418 L167.648216,117.873418 C166.678936,118.457418 166.678936,119.402418 167.648216,119.985418 C168.619159,120.568418 170.19029,120.568418 171.15957,119.985418 L186.260719,110.902418 L183.778498,109.408418" id="Fill-25" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(151.322583, 110.902918) rotate(-91.000000) translate(-151.322583, -110.902918) "></path>
<path d="M217.647832,123.004454 L200.11755,115.414454 C199.443131,115.123454 198.563153,114.977454 197.678555,114.977454 C196.796267,114.977454 195.911669,115.123454 195.239559,115.414454 C193.89303,115.998454 193.89303,116.943454 195.239559,117.526454 L207.894159,123.004454 L167.114891,123.004454 C167.107962,123.004454 167.101033,123.005454 167.091794,123.005454 L137.225646,123.005454 L149.880245,117.527454 C151.226774,116.943454 151.226774,115.998454 149.880245,115.415454 C148.531407,114.832454 146.348783,114.832454 145.002254,115.415454 L124.023658,124.498454 L127.471973,125.992454 L145.002254,133.582454 C145.676673,133.873454 146.556652,134.020454 147.44125,134.020454 C148.323538,134.020454 149.208136,133.873454 149.880245,133.582454 C151.226774,132.998454 151.226774,132.053454 149.880245,131.470454 L137.225646,125.992454 L178.004914,125.992454 C178.011843,125.992454 178.018772,125.991454 178.02801,125.991454 L207.894159,125.991454 L195.239559,131.469454 C193.89303,132.053454 193.89303,132.998454 195.239559,133.581454 C196.588398,134.164454 198.771022,134.164454 200.11755,133.581454 L221.096146,124.498454 L217.647832,123.004454" id="Fill-27" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(172.559902, 124.498954) rotate(-91.000000) translate(-172.559902, -124.498954) "></path>
<path d="M147.699419,172.81504 L125.29081,165.22504 C124.428713,164.93404 123.303854,164.78804 122.173091,164.78804 C121.045279,164.78804 119.914515,164.93404 119.055371,165.22504 C117.33413,165.80904 117.33413,166.75404 119.055371,167.33704 L135.231494,172.81504 L83.1041674,172.81504 C83.0953102,172.81504 83.0864531,172.81604 83.0746435,172.81604 L44.8973409,172.81604 L61.0734635,167.33804 C62.7947045,166.75404 62.7947045,165.80904 61.0734635,165.22604 C59.3492701,164.64304 56.5592654,164.64304 54.8380244,165.22604 L28.0215029,174.30904 L32.4294151,175.80304 L54.8380244,183.39304 C55.7001211,183.68404 56.8249801,183.83104 57.9557439,183.83104 C59.0835554,183.83104 60.2143192,183.68404 61.0734635,183.39304 C62.7947045,182.80904 62.7947045,181.86404 61.0734635,181.28104 L44.8973409,175.80304 L97.0246671,175.80304 C97.0335242,175.80304 97.0423814,175.80204 97.0541909,175.80204 L135.231494,175.80204 L119.055371,181.28004 C117.33413,181.86404 117.33413,182.80904 119.055371,183.39204 C120.779564,183.97504 123.569569,183.97504 125.29081,183.39204 L152.107332,174.30904 L147.699419,172.81504" id="Fill-26" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(90.064417, 174.309540) rotate(-179.000000) translate(-90.064417, -174.309540) "></path>
<path d="M222.034748,195.487649 L185.706421,187.897649 C184.308809,187.606649 182.485213,187.460649 180.652045,187.460649 C178.823663,187.460649 176.990494,187.606649 175.597669,187.897649 C172.807232,188.481649 172.807232,189.426649 175.597669,190.009649 L201.822031,195.487649 L117.314396,195.487649 C117.300037,195.487649 117.285678,195.488649 117.266532,195.488649 L55.3743578,195.488649 L81.5987197,190.010649 C84.3891564,189.426649 84.3891564,188.481649 81.5987197,187.898649 C78.8034966,187.315649 74.2804044,187.315649 71.4899677,187.898649 L28.0156331,196.981649 L35.1616401,198.475649 L71.4899677,206.065649 C72.8875792,206.356649 74.7111751,206.503649 76.5443437,206.503649 C78.3727259,206.503649 80.2058945,206.356649 81.5987197,206.065649 C84.3891564,205.481649 84.3891564,204.536649 81.5987197,203.953649 L55.3743578,198.475649 L139.881993,198.475649 C139.896352,198.475649 139.910711,198.474649 139.929856,198.474649 L201.822031,198.474649 L175.597669,203.952649 C172.807232,204.536649 172.807232,205.481649 175.597669,206.064649 C178.392892,206.647649 182.915984,206.647649 185.706421,206.064649 L229.180755,196.981649 L222.034748,195.487649" id="Fill-28" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(128.598194, 196.982149) rotate(-179.000000) translate(-128.598194, -196.982149) "></path>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="151" y="145.957" width="75" height="29.043"></rect>
<text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="169.051859" y="165.543917">&lt;DIV&gt;</tspan>
</text>
<text id="top" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<text id="top" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="119" y="112">top</tspan>
</text>
<text id="bottom" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<text id="bottom" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="185" y="112">bottom</tspan>
</text>
<text id="left" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<text id="left" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="73" y="162">left</tspan>
</text>
<text id="right" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<text id="right" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="109" y="216">right</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

Before After
Before After

49
2-ui/1-document/4-traversing-dom/dom-links-elements.svg
View file

@ -1,55 +1,58 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="440px" height="309px" viewBox="0 0 440 309" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="440px" height="309px" viewBox="0 0 440 309" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>dom-links-elements.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="dom-links-elements">
<text id="document.documentEle" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="dom-links-elements.svg" sketch:type="MSArtboardGroup">
<text id="document.documentEle" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="137.692383" y="22">document.documentElement &lt;HTML&gt;</tspan>
</text>
<text id="document.body-(если-" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<text id="document.body-(если-" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="172.84375" y="90">document.body (если внутри body)</tspan>
</text>
<path d="M221.5,67.5 L221.5,37.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M221.5,67.5 L221.5,37.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-4-decoration-1" d="M221.5,37.5 C220.45,41.28 219.55,44.52 218.5,48.3 C220.6,48.3 222.4,48.3 224.5,48.3 C223.45,44.52 222.55,41.28 221.5,37.5 C221.5,37.5 221.5,37.5 221.5,37.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M233.2715,132.2195 C233.9275,132.2195 234.4565,132.7755 234.4565,133.4575 C234.4565,134.1385 233.9275,134.6935 233.2455,134.6935 C232.5895,134.6935 232.0595,134.1385 232.0595,133.4575 C232.0595,132.7755 232.5895,132.2195 233.2715,132.2195 L233.2715,132.2195 Z M231.1755,137.6715 C230.4935,137.6715 229.9645,137.1165 229.9645,136.4345 C229.9645,135.7535 230.4935,135.1985 231.1515,135.1985 C231.8325,135.1985 232.3625,135.7535 232.3625,136.4345 C232.3625,137.1165 231.8325,137.6715 231.1755,137.6715 L231.1755,137.6715 Z M231.1755,129.2415 C231.8325,129.2415 232.3625,129.7975 232.3625,130.4785 C232.3625,131.1605 231.8325,131.7155 231.1515,131.7155 C230.4935,131.7155 229.9645,131.1605 229.9645,130.4785 C229.9645,129.7975 230.4935,129.2415 231.1755,129.2415 L231.1755,129.2415 Z M229.6615,132.2955 C230.3185,132.2955 230.8475,132.8505 230.8475,133.5325 C230.8475,134.1885 230.3185,134.7435 229.6365,134.7435 C228.9805,134.7435 228.4495,134.1885 228.4495,133.5075 C228.4495,132.8505 228.9805,132.2955 229.6615,132.2955 L229.6615,132.2955 Z M229.0815,140.6495 C228.4245,140.6495 227.8695,140.0945 227.8695,139.4135 C227.8695,138.7315 228.4005,138.2015 229.0565,138.2015 C229.7375,138.2015 230.2675,138.7315 230.2675,139.4135 C230.2675,140.0945 229.7375,140.6495 229.0815,140.6495 L229.0815,140.6495 Z M229.0815,126.2635 C229.7375,126.2635 230.2675,126.8195 230.2675,127.5005 C230.2675,128.1815 229.7375,128.7375 229.0565,128.7375 C228.4005,128.7375 227.8695,128.1815 227.8695,127.5005 C227.8695,126.8195 228.4245,126.2635 229.0815,126.2635 L229.0815,126.2635 Z M226.9875,143.6275 C226.3305,143.6275 225.7755,143.0725 225.7755,142.3905 C225.7755,141.7105 226.3045,141.1795 226.9605,141.1795 C227.6425,141.1795 228.1725,141.7105 228.1725,142.3905 C228.1725,143.0725 227.6425,143.6275 226.9875,143.6275 L226.9875,143.6275 Z M226.9875,123.2855 C227.6425,123.2855 228.1725,123.8415 228.1725,124.5225 C228.1725,125.2035 227.6425,125.7595 226.9605,125.7595 C226.3045,125.7595 225.7755,125.2035 225.7755,124.5225 C225.7755,123.8415 226.3305,123.2855 226.9875,123.2855 L226.9875,123.2855 Z M226.0015,132.2955 C226.6575,132.2955 227.1885,132.8505 227.1885,133.5325 C227.1885,134.1885 226.6575,134.7435 225.9775,134.7435 C225.3215,134.7435 224.7905,134.1885 224.7905,133.5075 C224.7905,132.8505 225.3465,132.2955 226.0015,132.2955 L226.0015,132.2955 Z M222.3675,132.2955 C223.0245,132.2955 223.5545,132.8505 223.5545,133.5325 C223.5545,134.1885 222.9985,134.7435 222.3425,134.7435 C221.6865,134.7435 221.1305,134.1885 221.1305,133.5075 C221.1305,132.8505 221.6865,132.2955 222.3675,132.2955 L222.3675,132.2955 Z M218.7085,132.2955 C219.3645,132.2955 219.8945,132.8505 219.8945,133.5325 C219.8945,134.1885 219.3645,134.7435 218.6835,134.7435 C218.0275,134.7435 217.4965,134.1885 217.4965,133.5075 C217.4965,132.8505 218.0275,132.2955 218.7085,132.2955 L218.7085,132.2955 Z M215.0485,132.2955 C215.7045,132.2955 216.2355,132.8505 216.2355,133.5325 C216.2355,134.1885 215.7045,134.7435 215.0235,134.7435 C214.3665,134.7435 213.8365,134.1885 213.8365,133.5075 C213.8365,132.8505 214.3925,132.2955 215.0485,132.2955 L215.0485,132.2955 Z M211.4145,132.2955 C212.0705,132.2955 212.6005,132.8505 212.6005,133.5325 C212.6005,134.1885 212.0455,134.7435 211.3885,134.7435 C210.7335,134.7435 210.1775,134.1885 210.1775,133.5075 C210.1775,132.8505 210.7335,132.2955 211.4145,132.2955 L211.4145,132.2955 Z M207.7545,132.2955 C208.4105,132.2955 208.9415,132.8505 208.9415,133.5325 C208.9415,134.1885 208.4105,134.7435 207.7295,134.7435 C207.0735,134.7435 206.5435,134.1885 206.5435,133.5075 C206.5435,132.8505 207.0735,132.2955 207.7545,132.2955 L207.7545,132.2955 Z" id="Fill-7" fill="#EE6B47" transform="translate(220.500000, 133.456500) rotate(-90.000000) translate(-220.500000, -133.456500) "></path>
<path d="M14.5,108 L427,108" id="Line-5" stroke="#8A704D" stroke-width="2" stroke-linecap="square"></path>
<text id="parentElement" font-family="Consolas" font-size="14" font-weight="bold">
<path d="M233.2715,132.2195 C233.9275,132.2195 234.4565,132.7755 234.4565,133.4575 C234.4565,134.1385 233.9275,134.6935 233.2455,134.6935 C232.5895,134.6935 232.0595,134.1385 232.0595,133.4575 C232.0595,132.7755 232.5895,132.2195 233.2715,132.2195 L233.2715,132.2195 Z M231.1755,137.6715 C230.4935,137.6715 229.9645,137.1165 229.9645,136.4345 C229.9645,135.7535 230.4935,135.1985 231.1515,135.1985 C231.8325,135.1985 232.3625,135.7535 232.3625,136.4345 C232.3625,137.1165 231.8325,137.6715 231.1755,137.6715 L231.1755,137.6715 Z M231.1755,129.2415 C231.8325,129.2415 232.3625,129.7975 232.3625,130.4785 C232.3625,131.1605 231.8325,131.7155 231.1515,131.7155 C230.4935,131.7155 229.9645,131.1605 229.9645,130.4785 C229.9645,129.7975 230.4935,129.2415 231.1755,129.2415 L231.1755,129.2415 Z M229.6615,132.2955 C230.3185,132.2955 230.8475,132.8505 230.8475,133.5325 C230.8475,134.1885 230.3185,134.7435 229.6365,134.7435 C228.9805,134.7435 228.4495,134.1885 228.4495,133.5075 C228.4495,132.8505 228.9805,132.2955 229.6615,132.2955 L229.6615,132.2955 Z M229.0815,140.6495 C228.4245,140.6495 227.8695,140.0945 227.8695,139.4135 C227.8695,138.7315 228.4005,138.2015 229.0565,138.2015 C229.7375,138.2015 230.2675,138.7315 230.2675,139.4135 C230.2675,140.0945 229.7375,140.6495 229.0815,140.6495 L229.0815,140.6495 Z M229.0815,126.2635 C229.7375,126.2635 230.2675,126.8195 230.2675,127.5005 C230.2675,128.1815 229.7375,128.7375 229.0565,128.7375 C228.4005,128.7375 227.8695,128.1815 227.8695,127.5005 C227.8695,126.8195 228.4245,126.2635 229.0815,126.2635 L229.0815,126.2635 Z M226.9875,143.6275 C226.3305,143.6275 225.7755,143.0725 225.7755,142.3905 C225.7755,141.7105 226.3045,141.1795 226.9605,141.1795 C227.6425,141.1795 228.1725,141.7105 228.1725,142.3905 C228.1725,143.0725 227.6425,143.6275 226.9875,143.6275 L226.9875,143.6275 Z M226.9875,123.2855 C227.6425,123.2855 228.1725,123.8415 228.1725,124.5225 C228.1725,125.2035 227.6425,125.7595 226.9605,125.7595 C226.3045,125.7595 225.7755,125.2035 225.7755,124.5225 C225.7755,123.8415 226.3305,123.2855 226.9875,123.2855 L226.9875,123.2855 Z M226.0015,132.2955 C226.6575,132.2955 227.1885,132.8505 227.1885,133.5325 C227.1885,134.1885 226.6575,134.7435 225.9775,134.7435 C225.3215,134.7435 224.7905,134.1885 224.7905,133.5075 C224.7905,132.8505 225.3465,132.2955 226.0015,132.2955 L226.0015,132.2955 Z M222.3675,132.2955 C223.0245,132.2955 223.5545,132.8505 223.5545,133.5325 C223.5545,134.1885 222.9985,134.7435 222.3425,134.7435 C221.6865,134.7435 221.1305,134.1885 221.1305,133.5075 C221.1305,132.8505 221.6865,132.2955 222.3675,132.2955 L222.3675,132.2955 Z M218.7085,132.2955 C219.3645,132.2955 219.8945,132.8505 219.8945,133.5325 C219.8945,134.1885 219.3645,134.7435 218.6835,134.7435 C218.0275,134.7435 217.4965,134.1885 217.4965,133.5075 C217.4965,132.8505 218.0275,132.2955 218.7085,132.2955 L218.7085,132.2955 Z M215.0485,132.2955 C215.7045,132.2955 216.2355,132.8505 216.2355,133.5325 C216.2355,134.1885 215.7045,134.7435 215.0235,134.7435 C214.3665,134.7435 213.8365,134.1885 213.8365,133.5075 C213.8365,132.8505 214.3925,132.2955 215.0485,132.2955 L215.0485,132.2955 Z M211.4145,132.2955 C212.0705,132.2955 212.6005,132.8505 212.6005,133.5325 C212.6005,134.1885 212.0455,134.7435 211.3885,134.7435 C210.7335,134.7435 210.1775,134.1885 210.1775,133.5075 C210.1775,132.8505 210.7335,132.2955 211.4145,132.2955 L211.4145,132.2955 Z M207.7545,132.2955 C208.4105,132.2955 208.9415,132.8505 208.9415,133.5325 C208.9415,134.1885 208.4105,134.7435 207.7295,134.7435 C207.0735,134.7435 206.5435,134.1885 206.5435,133.5075 C206.5435,132.8505 207.0735,132.2955 207.7545,132.2955 L207.7545,132.2955 Z" id="Fill-7" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(220.500000, 133.456500) rotate(-90.000000) translate(-220.500000, -133.456500) "></path>
<path d="M14.5,108 L427,108" id="Line-5" stroke="#8A704D" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<text id="parentElement" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
<tspan x="175" y="165" fill="#8A704D">parent</tspan>
<tspan x="221.183594" y="165" fill="#EE6B47">Element</tspan>
</text>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" x="183" y="208" width="75" height="24"></rect>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" x="165" y="73" width="113" height="24"></rect>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="2" x="131" y="5" width="194" height="24"></rect>
<text id="&lt;DIV&gt;" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="183" y="208" width="75" height="24"></rect>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="165" y="73" width="113" height="24"></rect>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="131" y="5" width="194" height="24"></rect>
<text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="201.051859" y="225">&lt;DIV&gt;</tspan>
</text>
<path d="M220.5,200.5 L220.5,174.5" id="Line-6" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M220.5,200.5 L220.5,174.5" id="Line-6" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-6-decoration-1" d="M220.5,174.5 C219.45,178.28 218.55,181.52 217.5,185.3 C219.6,185.3 221.4,185.3 223.5,185.3 C222.45,181.52 221.55,178.28 220.5,174.5 C220.5,174.5 220.5,174.5 220.5,174.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M267.5,219.5 L427,219.5" id="Line-7" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M267.5,219.5 L427,219.5" id="Line-7" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-7-decoration-1" d="M426.5,219.5 C422.72,218.45 419.48,217.55 415.7,216.5 C415.7,218.6 415.7,220.4 415.7,222.5 C419.48,221.45 422.72,220.55 426.5,219.5 C426.5,219.5 426.5,219.5 426.5,219.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="nextElementSibling" font-family="Consolas" font-size="14" font-weight="bold">
<text id="nextElementSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
<tspan x="276" y="205" fill="#8A704D">next</tspan>
<tspan x="306.789062" y="205" fill="#EE6B47">Element</tspan>
<tspan x="360.669922" y="205" fill="#8A704D">Sibling</tspan>
</text>
<path d="M168,219.5 L12,219.5" id="Line-8" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M168,219.5 L12,219.5" id="Line-8" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-8-decoration-1" d="M12,219.5 C15.78,220.55 19.02,221.45 22.8,222.5 C22.8,220.4 22.8,218.6 22.8,216.5 C19.02,217.55 15.78,218.45 12,219.5 C12,219.5 12,219.5 12,219.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="previousElementSibli" font-family="Consolas" font-size="14" font-weight="bold">
<text id="previousElementSibli" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
<tspan x="6" y="205" fill="#8A704D">previous</tspan>
<tspan x="67.578125" y="205" fill="#EE6B47">Element</tspan>
<tspan x="121.458984" y="205" fill="#8A704D">Sibling</tspan>
</text>
<path d="M116.5,278.5 L174.5,242.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M325,279 L269.5,242.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="children" font-family="Consolas" font-size="14" font-weight="bold" fill="#EE6B47">
<path d="M116.5,278.5 L174.5,242.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M325,279 L269.5,242.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<text id="children" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="188" y="266">children</tspan>
</text>
<text id="firstElementChild--" font-family="Consolas" font-size="14" font-weight="bold">
<text id="firstElementChild--" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
<tspan x="43" y="300" fill="#8A704D">first</tspan>
<tspan x="81.4863281" y="300" fill="#EE6B47">Element</tspan>
<tspan x="135.367188" y="300" fill="#8A704D">Child </tspan>
</text>
<text id="lastElementChild" font-family="Consolas" font-size="14" font-weight="bold">
<text id="lastElementChild" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
<tspan x="273" y="300" fill="#8A704D">last</tspan>
<tspan x="303.789062" y="300" fill="#EE6B47">Element</tspan>
<tspan x="357.669922" y="300" fill="#8A704D">Child</tspan>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 9.7 KiB

Before After
Before After

55
2-ui/1-document/4-traversing-dom/dom-links.svg
View file

@ -1,54 +1,57 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="420px" height="368px" viewBox="0 0 420 368" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="420px" height="368px" viewBox="0 0 420 368" 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: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>dom-links.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="dom-links">
<text id="document" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="dom-links.svg" sketch:type="MSArtboardGroup">
<text id="document" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="177.710938" y="18">document</tspan>
</text>
<text id="document.documentEle" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<text id="document.documentEle" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="125.692383" y="85">document.documentElement &lt;HTML&gt;</tspan>
</text>
<text id="document.body-(если-" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<text id="document.body-(если-" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="160.84375" y="153">document.body (если внутри body)</tspan>
</text>
<path d="M209.5,130.5 L209.5,100.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M209.5,130.5 L209.5,100.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M209.5,100.5 C208.45,104.28 207.55,107.52 206.5,111.3 C208.6,111.3 210.4,111.3 212.5,111.3 C211.45,107.52 210.55,104.28 209.5,100.5 C209.5,100.5 209.5,100.5 209.5,100.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M221.2715,195.2195 C221.9275,195.2195 222.4565,195.7755 222.4565,196.4575 C222.4565,197.1385 221.9275,197.6935 221.2455,197.6935 C220.5895,197.6935 220.0595,197.1385 220.0595,196.4575 C220.0595,195.7755 220.5895,195.2195 221.2715,195.2195 L221.2715,195.2195 Z M219.1755,200.6715 C218.4935,200.6715 217.9645,200.1165 217.9645,199.4345 C217.9645,198.7535 218.4935,198.1985 219.1515,198.1985 C219.8325,198.1985 220.3625,198.7535 220.3625,199.4345 C220.3625,200.1165 219.8325,200.6715 219.1755,200.6715 L219.1755,200.6715 Z M219.1755,192.2415 C219.8325,192.2415 220.3625,192.7975 220.3625,193.4785 C220.3625,194.1605 219.8325,194.7155 219.1515,194.7155 C218.4935,194.7155 217.9645,194.1605 217.9645,193.4785 C217.9645,192.7975 218.4935,192.2415 219.1755,192.2415 L219.1755,192.2415 Z M217.6615,195.2955 C218.3185,195.2955 218.8475,195.8505 218.8475,196.5325 C218.8475,197.1885 218.3185,197.7435 217.6365,197.7435 C216.9805,197.7435 216.4495,197.1885 216.4495,196.5075 C216.4495,195.8505 216.9805,195.2955 217.6615,195.2955 L217.6615,195.2955 Z M217.0815,203.6495 C216.4245,203.6495 215.8695,203.0945 215.8695,202.4135 C215.8695,201.7315 216.4005,201.2015 217.0565,201.2015 C217.7375,201.2015 218.2675,201.7315 218.2675,202.4135 C218.2675,203.0945 217.7375,203.6495 217.0815,203.6495 L217.0815,203.6495 Z M217.0815,189.2635 C217.7375,189.2635 218.2675,189.8195 218.2675,190.5005 C218.2675,191.1815 217.7375,191.7375 217.0565,191.7375 C216.4005,191.7375 215.8695,191.1815 215.8695,190.5005 C215.8695,189.8195 216.4245,189.2635 217.0815,189.2635 L217.0815,189.2635 Z M214.9875,206.6275 C214.3305,206.6275 213.7755,206.0725 213.7755,205.3905 C213.7755,204.7105 214.3045,204.1795 214.9605,204.1795 C215.6425,204.1795 216.1725,204.7105 216.1725,205.3905 C216.1725,206.0725 215.6425,206.6275 214.9875,206.6275 L214.9875,206.6275 Z M214.9875,186.2855 C215.6425,186.2855 216.1725,186.8415 216.1725,187.5225 C216.1725,188.2035 215.6425,188.7595 214.9605,188.7595 C214.3045,188.7595 213.7755,188.2035 213.7755,187.5225 C213.7755,186.8415 214.3305,186.2855 214.9875,186.2855 L214.9875,186.2855 Z M214.0015,195.2955 C214.6575,195.2955 215.1885,195.8505 215.1885,196.5325 C215.1885,197.1885 214.6575,197.7435 213.9775,197.7435 C213.3215,197.7435 212.7905,197.1885 212.7905,196.5075 C212.7905,195.8505 213.3465,195.2955 214.0015,195.2955 L214.0015,195.2955 Z M210.3675,195.2955 C211.0245,195.2955 211.5545,195.8505 211.5545,196.5325 C211.5545,197.1885 210.9985,197.7435 210.3425,197.7435 C209.6865,197.7435 209.1305,197.1885 209.1305,196.5075 C209.1305,195.8505 209.6865,195.2955 210.3675,195.2955 L210.3675,195.2955 Z M206.7085,195.2955 C207.3645,195.2955 207.8945,195.8505 207.8945,196.5325 C207.8945,197.1885 207.3645,197.7435 206.6835,197.7435 C206.0275,197.7435 205.4965,197.1885 205.4965,196.5075 C205.4965,195.8505 206.0275,195.2955 206.7085,195.2955 L206.7085,195.2955 Z M203.0485,195.2955 C203.7045,195.2955 204.2355,195.8505 204.2355,196.5325 C204.2355,197.1885 203.7045,197.7435 203.0235,197.7435 C202.3665,197.7435 201.8365,197.1885 201.8365,196.5075 C201.8365,195.8505 202.3925,195.2955 203.0485,195.2955 L203.0485,195.2955 Z M199.4145,195.2955 C200.0705,195.2955 200.6005,195.8505 200.6005,196.5325 C200.6005,197.1885 200.0455,197.7435 199.3885,197.7435 C198.7335,197.7435 198.1775,197.1885 198.1775,196.5075 C198.1775,195.8505 198.7335,195.2955 199.4145,195.2955 L199.4145,195.2955 Z M195.7545,195.2955 C196.4105,195.2955 196.9415,195.8505 196.9415,196.5325 C196.9415,197.1885 196.4105,197.7435 195.7295,197.7435 C195.0735,197.7435 194.5435,197.1885 194.5435,196.5075 C194.5435,195.8505 195.0735,195.2955 195.7545,195.2955 L195.7545,195.2955 Z" id="Fill-7" fill="#EE6B47" transform="translate(208.500000, 196.456500) rotate(-90.000000) translate(-208.500000, -196.456500) "></path>
<path d="M209.5,62.5 L209.5,32.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M221.2715,195.2195 C221.9275,195.2195 222.4565,195.7755 222.4565,196.4575 C222.4565,197.1385 221.9275,197.6935 221.2455,197.6935 C220.5895,197.6935 220.0595,197.1385 220.0595,196.4575 C220.0595,195.7755 220.5895,195.2195 221.2715,195.2195 L221.2715,195.2195 Z M219.1755,200.6715 C218.4935,200.6715 217.9645,200.1165 217.9645,199.4345 C217.9645,198.7535 218.4935,198.1985 219.1515,198.1985 C219.8325,198.1985 220.3625,198.7535 220.3625,199.4345 C220.3625,200.1165 219.8325,200.6715 219.1755,200.6715 L219.1755,200.6715 Z M219.1755,192.2415 C219.8325,192.2415 220.3625,192.7975 220.3625,193.4785 C220.3625,194.1605 219.8325,194.7155 219.1515,194.7155 C218.4935,194.7155 217.9645,194.1605 217.9645,193.4785 C217.9645,192.7975 218.4935,192.2415 219.1755,192.2415 L219.1755,192.2415 Z M217.6615,195.2955 C218.3185,195.2955 218.8475,195.8505 218.8475,196.5325 C218.8475,197.1885 218.3185,197.7435 217.6365,197.7435 C216.9805,197.7435 216.4495,197.1885 216.4495,196.5075 C216.4495,195.8505 216.9805,195.2955 217.6615,195.2955 L217.6615,195.2955 Z M217.0815,203.6495 C216.4245,203.6495 215.8695,203.0945 215.8695,202.4135 C215.8695,201.7315 216.4005,201.2015 217.0565,201.2015 C217.7375,201.2015 218.2675,201.7315 218.2675,202.4135 C218.2675,203.0945 217.7375,203.6495 217.0815,203.6495 L217.0815,203.6495 Z M217.0815,189.2635 C217.7375,189.2635 218.2675,189.8195 218.2675,190.5005 C218.2675,191.1815 217.7375,191.7375 217.0565,191.7375 C216.4005,191.7375 215.8695,191.1815 215.8695,190.5005 C215.8695,189.8195 216.4245,189.2635 217.0815,189.2635 L217.0815,189.2635 Z M214.9875,206.6275 C214.3305,206.6275 213.7755,206.0725 213.7755,205.3905 C213.7755,204.7105 214.3045,204.1795 214.9605,204.1795 C215.6425,204.1795 216.1725,204.7105 216.1725,205.3905 C216.1725,206.0725 215.6425,206.6275 214.9875,206.6275 L214.9875,206.6275 Z M214.9875,186.2855 C215.6425,186.2855 216.1725,186.8415 216.1725,187.5225 C216.1725,188.2035 215.6425,188.7595 214.9605,188.7595 C214.3045,188.7595 213.7755,188.2035 213.7755,187.5225 C213.7755,186.8415 214.3305,186.2855 214.9875,186.2855 L214.9875,186.2855 Z M214.0015,195.2955 C214.6575,195.2955 215.1885,195.8505 215.1885,196.5325 C215.1885,197.1885 214.6575,197.7435 213.9775,197.7435 C213.3215,197.7435 212.7905,197.1885 212.7905,196.5075 C212.7905,195.8505 213.3465,195.2955 214.0015,195.2955 L214.0015,195.2955 Z M210.3675,195.2955 C211.0245,195.2955 211.5545,195.8505 211.5545,196.5325 C211.5545,197.1885 210.9985,197.7435 210.3425,197.7435 C209.6865,197.7435 209.1305,197.1885 209.1305,196.5075 C209.1305,195.8505 209.6865,195.2955 210.3675,195.2955 L210.3675,195.2955 Z M206.7085,195.2955 C207.3645,195.2955 207.8945,195.8505 207.8945,196.5325 C207.8945,197.1885 207.3645,197.7435 206.6835,197.7435 C206.0275,197.7435 205.4965,197.1885 205.4965,196.5075 C205.4965,195.8505 206.0275,195.2955 206.7085,195.2955 L206.7085,195.2955 Z M203.0485,195.2955 C203.7045,195.2955 204.2355,195.8505 204.2355,196.5325 C204.2355,197.1885 203.7045,197.7435 203.0235,197.7435 C202.3665,197.7435 201.8365,197.1885 201.8365,196.5075 C201.8365,195.8505 202.3925,195.2955 203.0485,195.2955 L203.0485,195.2955 Z M199.4145,195.2955 C200.0705,195.2955 200.6005,195.8505 200.6005,196.5325 C200.6005,197.1885 200.0455,197.7435 199.3885,197.7435 C198.7335,197.7435 198.1775,197.1885 198.1775,196.5075 C198.1775,195.8505 198.7335,195.2955 199.4145,195.2955 L199.4145,195.2955 Z M195.7545,195.2955 C196.4105,195.2955 196.9415,195.8505 196.9415,196.5325 C196.9415,197.1885 196.4105,197.7435 195.7295,197.7435 C195.0735,197.7435 194.5435,197.1885 194.5435,196.5075 C194.5435,195.8505 195.0735,195.2955 195.7545,195.2955 L195.7545,195.2955 Z" id="Fill-7" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(208.500000, 196.456500) rotate(-90.000000) translate(-208.500000, -196.456500) "></path>
<path d="M209.5,62.5 L209.5,32.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="M209.5,32.5 C208.45,36.28 207.55,39.52 206.5,43.3 C208.6,43.3 210.4,43.3 212.5,43.3 C211.45,39.52 210.55,36.28 209.5,32.5 C209.5,32.5 209.5,32.5 209.5,32.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M2.5,171 L415,171" id="Line" stroke="#8A704D" stroke-width="2" stroke-linecap="square"></path>
<text id="parentNode" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<path d="M2.5,171 L415,171" id="Line" stroke="#8A704D" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<text id="parentNode" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="172" y="228">parentNode</tspan>
</text>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" x="171" y="271" width="75" height="24"></rect>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" x="153" y="136" width="113" height="24"></rect>
<rect id="Rectangle-9" stroke="#E8C48E" stroke-width="2" x="153" y="2" width="113" height="24"></rect>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="2" x="119" y="68" width="194" height="24"></rect>
<text id="&lt;DIV&gt;" font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D">
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="171" y="271" width="75" height="24"></rect>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="153" y="136" width="113" height="24"></rect>
<rect id="Rectangle-9" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="153" y="2" width="113" height="24"></rect>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="2" sketch:type="MSShapeGroup" x="119" y="68" width="194" height="24"></rect>
<text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="189.051859" y="288">&lt;DIV&gt;</tspan>
</text>
<path d="M208.5,263.5 L208.5,237.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M208.5,263.5 L208.5,237.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M208.5,237.5 C207.45,241.28 206.55,244.52 205.5,248.3 C207.6,248.3 209.4,248.3 211.5,248.3 C210.45,244.52 209.55,241.28 208.5,237.5 C208.5,237.5 208.5,237.5 208.5,237.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M255.5,282.5 L368,282.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M255.5,282.5 L368,282.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M367.5,282.5 C363.72,281.45 360.48,280.55 356.7,279.5 C356.7,281.6 356.7,283.4 356.7,285.5 C360.48,284.45 363.72,283.55 367.5,282.5 C367.5,282.5 367.5,282.5 367.5,282.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="nextSibling" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<text id="nextSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="264" y="268">nextSibling</tspan>
</text>
<path d="M164.5,282.5 L50,282.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M164.5,282.5 L50,282.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M50.5,282.5 C54.28,283.55 57.52,284.45 61.3,285.5 C61.3,283.4 61.3,281.6 61.3,279.5 C57.52,280.55 54.28,281.45 50.5,282.5 C50.5,282.5 50.5,282.5 50.5,282.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<text id="previousSibling" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<text id="previousSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="50" y="268">previousSibling</tspan>
</text>
<path d="M104.5,341.5 L162.5,305.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M313,342 L257.5,305.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="childNodes" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<path d="M104.5,341.5 L162.5,305.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M313,342 L257.5,305.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<text id="childNodes" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="170" y="323">childNodes</tspan>
</text>
<text id="firstChild--" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<text id="firstChild--" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="64" y="359">firstChild </tspan>
</text>
<text id="Type-something" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<text id="Type-something" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="279" y="359">lastChild</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

Before After
Before After

BIN
figures.sketch
View file

Binary file not shown.