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-03-04 23:09:07 +03:00
parent 05d35d0d16
commit 951cf3f2ec
152 changed files with 2527 additions and 2179 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,13 +11,13 @@
<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" sketch:type="MSShapeGroup"></path>
<text id="&quot;World!&quot;" sketch:type="MSTextLayer" transform="translate(39.885486, 39.782373) rotate(47.000000) translate(-39.885486, -39.782373) " font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D">
<text id="&quot;World!&quot;" sketch:type="MSTextLayer" transform="translate(39.885486, 39.782373) rotate(47.000000) translate(-39.885486, -39.782373) " font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" 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" sketch:type="MSShapeGroup"></path>
<text id="&quot;Hello!&quot;" sketch:type="MSTextLayer" transform="translate(39.885486, 39.782373) rotate(47.000000) translate(-39.885486, -39.782373) " font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D">
<text id="&quot;Hello!&quot;" sketch:type="MSTextLayer" transform="translate(39.885486, 39.782373) rotate(47.000000) translate(-39.885486, -39.782373) " font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="10.392998" y="46.2823729">"Hello!"</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 7 KiB

Before After
Before After

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

@ -12,7 +12,7 @@
<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" sketch:type="MSShapeGroup"></path>
<text id="&quot;Hello!&quot;" sketch:type="MSTextLayer" transform="translate(39.885486, 39.782373) rotate(47.000000) translate(-39.885486, -39.782373) " font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D">
<text id="&quot;Hello!&quot;" sketch:type="MSTextLayer" transform="translate(39.885486, 39.782373) rotate(47.000000) translate(-39.885486, -39.782373) " font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="10.392998" y="46.2823729">"Hello!"</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before After
Before After

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

@ -22,65 +22,65 @@
<tspan x="122.139648" y="89">Между именем функции</tspan>
<tspan x="126.559082" y="108">и скобкой ( нет пробела</tspan>
</text>
<path d="M270.5,118.5 L326.5,174.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M326.361436,174.361436 C324.431034,170.94611 322.776404,168.018688 320.846003,164.603362 C319.361079,166.088286 318.088286,167.361079 316.603362,168.846003 C320.018688,170.776404 322.94611,172.431034 326.361436,174.361436 C326.361436,174.361436 326.361436,174.361436 326.361436,174.361436 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M270.5,118.5 L326.5,174.5" id="Line" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M326.361436,174.361436 C324.431034,170.94611 322.776404,168.018688 320.846003,164.603362 C319.361079,166.088286 318.088286,167.361079 316.603362,168.846003 C320.018688,170.776404 322.94611,172.431034 326.361436,174.361436 C326.361436,174.361436 326.361436,174.361436 326.361436,174.361436 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="Отступ-" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="104.10791" y="192">Отступ </tspan>
<tspan x="93.1259766" y="211">2 пробела</tspan>
</text>
<path d="M169.5,201.5 L229,201.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="M228.5,201.5 C224.72,200.45 221.48,199.55 217.7,198.5 C217.7,200.6 217.7,202.4 217.7,204.5 C221.48,203.45 224.72,202.55 228.5,201.5 C228.5,201.5 228.5,201.5 228.5,201.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M169.5,201.5 L229,201.5" id="Line-4" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-4-decoration-1" d="M228.5,201.5 C224.72,200.45 221.48,199.55 217.7,198.5 C217.7,200.6 217.7,202.4 217.7,204.5 C221.48,203.45 224.72,202.55 228.5,201.5 C228.5,201.5 228.5,201.5 228.5,201.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="Пробел-после-for" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="36.5083008" y="238">Пробел после for</tspan>
</text>
<path d="M169.5,234.5 L229,234.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="M228.5,234.5 C224.72,233.45 221.48,232.55 217.7,231.5 C217.7,233.6 217.7,235.4 217.7,237.5 C221.48,236.45 224.72,235.55 228.5,234.5 C228.5,234.5 228.5,234.5 228.5,234.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M169.5,234.5 L229,234.5" id="Line-6" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-6-decoration-1" d="M228.5,234.5 C224.72,233.45 221.48,232.55 217.7,231.5 C217.7,233.6 217.7,235.4 217.7,237.5 C221.48,236.45 224.72,235.55 228.5,234.5 C228.5,234.5 228.5,234.5 228.5,234.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="}-else-{-без-перевод" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="503.068359" y="479">} else { без перевода строки</tspan>
</text>
<path d="M487,470 L407,459.5" id="Line-14" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-14-decoration-1" d="M407.680286,459.589288 C411.291502,461.122265 414.38683,462.436246 417.998045,463.969223 C418.271327,461.88708 418.505568,460.102387 418.778849,458.020244 C414.894352,458.569409 411.564783,459.040122 407.680286,459.589288 C407.680286,459.589288 407.680286,459.589288 407.680286,459.589288 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M487,470 L407,459.5" id="Line-14" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-14-decoration-1" d="M407.680286,459.589288 C411.291502,461.122265 414.38683,462.436246 417.998045,463.969223 C418.271327,461.88708 418.505568,460.102387 418.778849,458.020244 C414.894352,458.569409 411.564783,459.040122 407.680286,459.589288 C407.680286,459.589288 407.680286,459.589288 407.680286,459.589288 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="Пробелы-вокруг" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="284.414551" y="525">Пробелы вокруг</tspan>
<tspan x="270.329102" y="544">вложенного вызова</tspan>
</text>
<path d="M326,507 L300,481.565217" id="Line-15" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-15-decoration-1" d="M300.265975,481.82541 C302.233789,485.219318 303.920486,488.128382 305.8883,491.522289 C307.356818,490.021138 308.615547,488.734437 310.084065,487.233285 C306.647734,485.340529 303.702307,483.718167 300.265975,481.82541 C300.265975,481.82541 300.265975,481.82541 300.265975,481.82541 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M375,507 L349,481.565217" id="Line-16" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(362.000000, 494.000000) scale(-1, 1) translate(-362.000000, -494.000000) "></path>
<path id="Line-16-decoration-1" d="M349.265975,481.82541 C351.233789,485.219318 352.920486,488.128382 354.8883,491.522289 C356.356818,490.021138 357.615547,488.734437 359.084065,487.233285 C355.647734,485.340529 352.702307,483.718167 349.265975,481.82541 C349.265975,481.82541 349.265975,481.82541 349.265975,481.82541 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M326,507 L300,481.565217" id="Line-15" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-15-decoration-1" d="M300.265975,481.82541 C302.233789,485.219318 303.920486,488.128382 305.8883,491.522289 C307.356818,490.021138 308.615547,488.734437 310.084065,487.233285 C306.647734,485.340529 303.702307,483.718167 300.265975,481.82541 C300.265975,481.82541 300.265975,481.82541 300.265975,481.82541 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M375,507 L349,481.565217" id="Line-16" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(362.000000, 494.000000) scale(-1, 1) translate(-362.000000, -494.000000) "></path>
<path id="Line-16-decoration-1" d="M349.265975,481.82541 C351.233789,485.219318 352.920486,488.128382 354.8883,491.522289 C356.356818,490.021138 357.615547,488.734437 359.084065,487.233285 C355.647734,485.340529 352.702307,483.718167 349.265975,481.82541 C349.265975,481.82541 349.265975,481.82541 349.265975,481.82541 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="пустая-строка" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="51.4902344" y="374">пустая строка</tspan>
<tspan x="77.7128906" y="393">между </tspan>
<tspan x="18.0761719" y="412">логическими блоками</tspan>
</text>
<path d="M170.441667,385.5 L223,385.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="M222.441667,385.5 C218.661667,384.45 215.421667,383.55 211.641667,382.5 C211.641667,384.6 211.641667,386.4 211.641667,388.5 C215.421667,387.45 218.661667,386.55 222.441667,385.5 C222.441667,385.5 222.441667,385.5 222.441667,385.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M170.441667,385.5 L223,385.5" id="Line-7" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-7-decoration-1" d="M222.441667,385.5 C218.661667,384.45 215.421667,383.55 211.641667,382.5 C211.641667,384.6 211.641667,386.4 211.641667,388.5 C215.421667,387.45 218.661667,386.55 222.441667,385.5 C222.441667,385.5 222.441667,385.5 222.441667,385.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="длина-строки" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="569.00293" y="380">длина строки</tspan>
<tspan x="539.126465" y="399">не более 80 символов</tspan>
</text>
<path d="M534.441667,385.5 L443,420" id="Line-13" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-13-decoration-1" d="M443.686238,419.741089 C447.593544,419.38915 450.942663,419.087488 454.849969,418.735548 C454.108667,416.77074 453.473265,415.086619 452.731964,413.121811 C449.56596,415.438558 446.852242,417.424342 443.686238,419.741089 C443.686238,419.741089 443.686238,419.741089 443.686238,419.741089 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M534.441667,385.5 L443,420" id="Line-13" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-13-decoration-1" d="M443.686238,419.741089 C447.593544,419.38915 450.942663,419.087488 454.849969,418.735548 C454.108667,416.77074 453.473265,415.086619 452.731964,413.121811 C449.56596,415.438558 446.852242,417.424342 443.686238,419.741089 C443.686238,419.741089 443.686238,419.741089 443.686238,419.741089 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="точка-с-запятой-;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="593.187012" y="247">точка с запятой ;</tspan>
<tspan x="608.933594" y="266">обязательна</tspan>
</text>
<path d="M591,252.5 L386,252.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="M386,252.5 C389.78,253.55 393.02,254.45 396.8,255.5 C396.8,253.4 396.8,251.6 396.8,249.5 C393.02,250.55 389.78,251.45 386,252.5 C386,252.5 386,252.5 386,252.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M591,252.5 L386,252.5" id="Line-8" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-8-decoration-1" d="M386,252.5 C389.78,253.55 393.02,254.45 396.8,255.5 C396.8,253.4 396.8,251.6 396.8,249.5 C393.02,250.55 389.78,251.45 386,252.5 C386,252.5 386,252.5 386,252.5 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="Фигурная-скобка-{" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="525.230957" y="85">Фигурная скобка {</tspan>
<tspan x="477.153809" y="104">на той же строке, через пробел</tspan>
</text>
<path d="M518,123 L400,178" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-3-decoration-1" d="M400.170694,177.920439 C404.040396,177.27522 407.357283,176.722175 411.226985,176.076956 C410.339809,174.173559 409.579372,172.542077 408.692195,170.63868 C405.70967,173.187296 403.153219,175.371824 400.170694,177.920439 C400.170694,177.920439 400.170694,177.920439 400.170694,177.920439 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M354.5,61 L354.5,170" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-2-decoration-1" d="M354.5,170 C355.55,166.22 356.45,162.98 357.5,159.2 C355.4,159.2 353.6,159.2 351.5,159.2 C352.55,162.98 353.45,166.22 354.5,170 C354.5,170 354.5,170 354.5,170 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M518,123 L400,178" id="Line-3" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-3-decoration-1" d="M400.170694,177.920439 C404.040396,177.27522 407.357283,176.722175 411.226985,176.076956 C410.339809,174.173559 409.579372,172.542077 408.692195,170.63868 C405.70967,173.187296 403.153219,175.371824 400.170694,177.920439 C400.170694,177.920439 400.170694,177.920439 400.170694,177.920439 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M354.5,61 L354.5,170" id="Line-2" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-2-decoration-1" d="M354.5,170 C355.55,166.22 356.45,162.98 357.5,159.2 C355.4,159.2 353.6,159.2 351.5,159.2 C352.55,162.98 353.45,166.22 354.5,170 C354.5,170 354.5,170 354.5,170 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="Пробел-между-" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="434.909668" y="303">Пробел между </tspan>
<tspan x="437.524414" y="322">параметрами </tspan>
</text>
<path d="M426,311 L392,348" id="Line-9" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-9-decoration-1" d="M392.168736,347.816376 C395.499523,345.743515 398.354484,343.966776 401.685271,341.893915 C400.138983,340.473002 398.813594,339.255076 397.267306,337.834163 C395.482806,341.327938 393.953235,344.322601 392.168736,347.816376 C392.168736,347.816376 392.168736,347.816376 392.168736,347.816376 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M426,311 L392,348" id="Line-9" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-9-decoration-1" d="M392.168736,347.816376 C395.499523,345.743515 398.354484,343.966776 401.685271,341.893915 C400.138983,340.473002 398.813594,339.255076 397.267306,337.834163 C395.482806,341.327938 393.953235,344.322601 392.168736,347.816376 C392.168736,347.816376 392.168736,347.816376 392.168736,347.816376 Z" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47"></path>
<text id="Пробел-между--2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#EE6B47">
<tspan x="306.909668" y="35">Пробел между </tspan>
<tspan x="309.524414" y="54">параметрами</tspan>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 82 KiB

Before After
Before After

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

@ -13,8 +13,8 @@
<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" 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>
<path d="M66,26 L66,45" id="Line-8" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 2 KiB

Before After
Before After

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

@ -12,7 +12,7 @@
<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" sketch:type="MSShapeGroup"></path>
<text id="&quot;Привет!&quot;" sketch:type="MSTextLayer" transform="translate(40.359759, 39.417209) rotate(47.000000) translate(-40.359759, -39.417209) " font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D">
<text id="&quot;Привет!&quot;" sketch:type="MSTextLayer" transform="translate(40.359759, 39.417209) rotate(47.000000) translate(-40.359759, -39.417209) " font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="3.68215005" y="45.9172093">"Привет!"</tspan>
</text>
</g>
@ -27,7 +27,7 @@
<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" sketch:type="MSShapeGroup"></path>
<text id="&quot;Привет!&quot;" sketch:type="MSTextLayer" transform="translate(39.891647, 37.685856) rotate(47.000000) translate(-39.891647, -37.685856) " font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D">
<text id="&quot;Привет!&quot;" sketch:type="MSTextLayer" transform="translate(39.891647, 37.685856) rotate(47.000000) translate(-39.891647, -37.685856) " font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="3.40960987" y="44.1858556">"Привет!"</tspan>
</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Before After
Before After

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

@ -8,18 +8,18 @@
<g id="array-speed.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="108" y="92" width="37" height="64"></rect>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" 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" line-spacing="17" fill="#8A704D">
<text id="0" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="122.5" y="128.5">0</tspan>
</text>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D">
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="159.5" y="128.5">1</tspan>
</text>
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" 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" line-spacing="17" fill="#8A704D">
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="195.5" y="128.5">2</tspan>
</text>
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" 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" line-spacing="17" fill="#8A704D">
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" 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" sketch:type="MSShapeGroup" transform="translate(326.500000, 106.500000) rotate(-90.000000) translate(-326.500000, -106.500000) "></path>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

Before After
Before After

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

@ -13,8 +13,8 @@
<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" 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>
<path d="M75.73,45 L147.27,45" id="Line-21" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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>
@ -25,8 +25,8 @@
<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" 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>
<path d="M215.73,45 L287.27,45" id="Line-22" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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>
@ -37,8 +37,8 @@
<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" 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>
<path d="M354.73,45 L426.27,45" id="Line-23" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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>
@ -49,8 +49,8 @@
<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" 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>
<path d="M494.73,45 L566.27,45" id="Line-24" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

Before After
Before After

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

@ -56,8 +56,8 @@
<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" 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>
<path d="M420.5,92 L470.5,92" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Before After
Before After

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

@ -6,8 +6,8 @@
<defs></defs>
<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>
<path d="M256.5,233.5 L197.5,233.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" 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>
@ -42,15 +42,15 @@
<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" 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" 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>
<path d="M178.5,155.5 L132.5,187.5" id="Line-2" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<path d="M197.5,199.5 L258.5,199.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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" 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>
<path d="M272.5,155.5 L319.5,187.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

Before After
Before After

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

@ -30,10 +30,10 @@
<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" 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" 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>
<path d="M74.5,56.5 L74.5,87.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<path d="M73.5,123.5 L73.5,155.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Before After
Before After

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

@ -40,12 +40,12 @@
<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" 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" 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" 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>
<path d="M227.5,59.5 L227.5,90.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<path d="M197.5,171.5 L258.5,171.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<path d="M272.5,127.5 L319.5,159.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

Before After
Before After

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

@ -6,8 +6,8 @@
<defs></defs>
<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>
<path d="M192.5,201.5 L133.5,201.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" 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>
@ -45,17 +45,17 @@
<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" 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" 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" 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>
<path d="M163.5,55.5 L163.5,86.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<path d="M114.5,123.5 L68.5,155.5" id="Line-2" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<path d="M133.5,167.5 L194.5,167.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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" 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>
<path d="M208.5,123.5 L255.5,155.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6 KiB

Before After
Before After

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

@ -11,19 +11,19 @@
<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" sketch:type="MSShapeGroup"></path>
<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-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" sketch:type="MSShapeGroup"></path>
<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-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" sketch:type="MSShapeGroup"></path>
<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-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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Before After
Before After

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

@ -11,19 +11,19 @@
<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" sketch:type="MSShapeGroup"></path>
<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-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" sketch:type="MSShapeGroup"></path>
<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-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" sketch:type="MSShapeGroup"></path>
<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-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>
@ -33,16 +33,16 @@
<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" 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>
<path d="M150.5,165.5 L250.5,165.5" id="Line-3" stroke="#EE6B47" 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-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-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-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M150.5,165.5 L158.5,160.5" id="Line-4" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M436.5,165.5 L444.5,160.5" id="Line-5" stroke="#EE6B47" 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-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-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path d="M344.5,165.5 L352.5,160.5" id="Line-4" stroke="#EE6B47" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

Before After
Before After

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

@ -20,8 +20,8 @@
<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" 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>
<path d="M73.5,101.5 L73.5,60.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

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

@ -23,13 +23,13 @@
<tspan x="16" y="20">Object.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" 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>
<path d="M76.5,268.5 L76.5,227.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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" 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>
<path d="M76.5,136.5 L76.5,95.5" id="Line-2" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Before After
Before After

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

@ -14,13 +14,13 @@
<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" 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>
<path d="M299.5,68.5 L299.5,27.5" id="Line-2" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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" 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>
<path d="M299.5,201.5 L299.5,160.5" id="Line-3" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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>
@ -57,10 +57,10 @@
<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" 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" 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>
<path d="M142.5,193.5 L220.5,157.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<path d="M539.5,193.5 L462.5,157.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" 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>
@ -75,18 +75,18 @@
<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" 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>
<path d="M299.5,331.5 L299.5,290.5" id="Line-4" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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" 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>
<path d="M576.5,331.5 L576.5,290.5" id="Line-5" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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" 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>
<path d="M106.5,331.5 L106.5,290.5" id="Line-6" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

Before After
Before After

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

@ -18,13 +18,13 @@
<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" 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>
<path d="M73.5,203.5 L73.5,162.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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" 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>
<path d="M73.5,71.5 L73.5,30.5" id="Line-2" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

Before After
Before After

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

@ -26,13 +26,13 @@
<tspan x="12" y="17.109589">Object.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" 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>
<path d="M72.5,265.609589 L72.5,224.609589" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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" 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>
<path d="M72.5,133.609589 L72.5,92.609589" id="Line-2" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4 KiB

Before After
Before After

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

@ -25,13 +25,13 @@
<tspan x="14" y="20">Animal.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" 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>
<path d="M74.5,244.5 L74.5,203.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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" 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>
<path d="M74.5,136.5 L74.5,95.5" id="Line-2" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

Before After
Before After

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

@ -27,13 +27,13 @@
<tspan x="13" y="16">Animal.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" 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>
<path d="M73.5,259.5 L73.5,218.5" id="Line" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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" 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>
<path d="M73.5,132.5 L73.5,91.5" id="Line-2" stroke="#EE6B47" 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-linecap="square" fill="#EE6B47"></path>
<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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4 KiB

After

Width:  |  Height:  |  Size: 4 KiB

Before After
Before After