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

Embed font to SVG

Browse source
This commit is contained in:
Ilya Kantor 2019-08-11 14:17:38 +03:00
parent 1310171dd7
commit 4d44df6a3a
226 changed files with 225 additions and 11893 deletions
Download patch file Download diff file Expand all files Collapse all files

57
1-js/04-object-basics/02-garbage-collection/family-delete-refs.svg
View file

@ -1,56 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="337px" height="204px" viewBox="0 0 337 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>family-delete-refs.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family-delete-refs.svg">
<path id="Line" d="M147.5,189.5 L193.5,189.5 L193.5,191.5 L147.5,191.5 L147.5,197.5 L133.5,190.5 L147.5,183.5 L147.5,189.5 Z" fill="#9B9B9B" fill-rule="nonzero" opacity="0.6"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="88" y="13" width="151" height="26"></rect>
<text id="&lt;global-variable&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="92" y="30">&lt;global variable&gt;</tspan>
</text>
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="123" y="80" width="78" height="26"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="139" y="96">Object</tspan>
</text>
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="5" y="148" width="118" height="48"></rect>
<text id="Object-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="39" y="165">Object</tspan>
</text>
<text id="wife" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="147" y="148">wife</tspan>
</text>
<text id="family" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="106" y="63">family</tspan>
</text>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="19" y="185">name: "John"</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="214" y="148" width="118" height="48"></rect>
<text id="name:-&quot;Ann&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="230" y="185">name: "Ann"</tspan>
</text>
<text id="mother" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="242" y="127">mother</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="244" y="165">Object</tspan>
</text>
<path id="Line" d="M162.5,61.5 L162.5,43.5 L164.5,43.5 L164.5,61.5 L170.5,61.5 L163.5,75.5 L156.5,61.5 L162.5,61.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M79.4216083,135.684192 L114.749841,111.10803 L115.89197,112.749841 L80.5637373,137.326002 L83.9901242,142.251434 L68.5,144.5 L75.9952214,130.758761 L79.4216083,135.684192 Z" fill="#9B9B9B" fill-rule="nonzero" opacity="0.6"></path>
<path id="Line" d="M180.5,157.5 L132.5,157.5 L132.5,155.5 L180.5,155.5 L180.5,149.5 L194.5,156.5 L180.5,163.5 L180.5,157.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M243.36482,137.447526 L207.11061,112.763808 L208.236192,111.11061 L244.490402,135.794327 L247.867147,130.834732 L255.5,144.5 L239.988074,142.407121 L243.36482,137.447526 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path d="M89.5,118.5 L100.5,132.5" id="Line-Copy" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" transform="translate(95.000000, 125.500000) scale(-1, 1) translate(-95.000000, -125.500000) "></path>
<path d="M89.5,118.5 L100.5,132.5" id="Line-Copy-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<path d="M161.5,183.5 L172.5,197.5" id="Line-Copy-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" transform="translate(167.000000, 190.500000) scale(-1, 1) translate(-167.000000, -190.500000) "></path>
<path d="M161.5,183.5 L172.5,197.5" id="Line-Copy-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
<text id="father" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#9B9B9B">
<tspan x="35" y="127">father</tspan>
</text>
<text id="husband" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#9B9B9B">
<tspan x="136" y="181">husband</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="337" height="204" viewBox="0 0 337 204"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family-delete-refs.svg"><path id="Line" fill="#9B9B9B" fill-rule="nonzero" d="M147.5 189.5h46v2h-46v6l-14-7 14-7v6z" opacity=".6"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M88 13h151v26H88z"/><text id="&lt;global-variable&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="92" y="30">&lt;global variable&gt;</tspan></text><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M123 80h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="139" y="96">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M5 148h118v48H5z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="39" y="165">Object</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="147" y="148">wife</tspan></text><text id="family" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="106" y="63">family</tspan></text><text id="name:-&quot;John&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="19" y="185">name: &quot;John&quot;</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M214 148h118v48H214z"/><text id="name:-&quot;Ann&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="230" y="185">name: &quot;Ann&quot;</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="242" y="127">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="244" y="165">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M162.5 61.5v-18h2v18h6l-7 14-7-14h6z"/><path id="Line-2" fill="#9B9B9B" fill-rule="nonzero" d="M79.422 135.684l35.328-24.576 1.142 1.642-35.328 24.576 3.426 4.925L68.5 144.5l7.495-13.741 3.427 4.925z" opacity=".6"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M180.5 157.5h-48v-2h48v-6l14 7-14 7v-6zM243.365 137.448l-36.254-24.684 1.125-1.653 36.254 24.683 3.377-4.96L255.5 144.5l-15.512-2.093 3.377-4.96z"/><path id="Line-Copy" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M100.5 118.5l-11 14"/><path id="Line-Copy-2" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M89.5 118.5l11 14"/><path id="Line-Copy-4" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M172.5 183.5l-11 14"/><path id="Line-Copy-3" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M161.5 183.5l11 14"/><text id="father" fill="#9B9B9B" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="35" y="127">father</tspan></text><text id="husband" fill="#9B9B9B" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="136" y="181">husband</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Before After
Before After

58
1-js/04-object-basics/02-garbage-collection/family-no-family.svg
View file

@ -1,57 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>family-no-family.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family-no-family.svg">
<path id="Line" d="M211.5,234.5 L257.5,234.5 L257.5,236.5 L211.5,236.5 L211.5,242.5 L197.5,235.5 L211.5,228.5 L211.5,234.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="153" y="25" width="153" height="48"></rect>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="199" y="43">&lt;global&gt;</tspan>
</text>
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="187" y="123" width="78" height="26"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" 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="69" y="193" width="118" height="48"></rect>
<text id="Object-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="103" y="210">Object</tspan>
</text>
<text id="father" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="99" y="170">father</tspan>
</text>
<text id="wife" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="211" y="193">wife</tspan>
</text>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="83" y="230">name: "John"</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="278" y="193" width="118" height="48"></rect>
<text id="name:-&quot;Ann&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="294" y="230">name: "Ann"</tspan>
</text>
<text id="mother" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="306" y="170">mother</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="308" y="210">Object</tspan>
</text>
<path id="Line-2" d="M143.421608,178.684192 L178.749841,154.10803 L179.89197,155.749841 L144.563737,180.326002 L147.990124,185.251434 L132.5,187.5 L139.995221,173.758761 L143.421608,178.684192 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M244.5,202.5 L196.5,202.5 L196.5,200.5 L244.5,200.5 L244.5,194.5 L258.5,201.5 L244.5,208.5 L244.5,202.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="husband" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="200" y="226">husband</tspan>
</text>
<path id="Line" d="M307.36482,180.447526 L271.11061,155.763808 L272.236192,154.11061 L308.490402,178.794327 L311.867147,173.834732 L319.5,187.5 L303.988074,185.407121 L307.36482,180.447526 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-5" stroke="#D0021B" stroke-width="2" x="48" y="112" width="364" height="150"></rect>
<text id="family:-null" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="183" 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>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="420" height="279" viewBox="0 0 420 279"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family-no-family.svg"><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M211.5 234.5h46v2h-46v6l-14-7 14-7v6z"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M153 25h153v48H153z"/><text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="199" y="43">&lt;global&gt;</tspan></text><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M187 123h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="203" y="139">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M69 193h118v48H69z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="103" y="210">Object</tspan></text><text id="father" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="99" y="170">father</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="211" y="193">wife</tspan></text><text id="name:-&quot;John&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="83" y="230">name: &quot;John&quot;</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M278 193h118v48H278z"/><text id="name:-&quot;Ann&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="294" y="230">name: &quot;Ann&quot;</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="306" y="170">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="308" y="210">Object</tspan></text><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M143.422 178.684l35.328-24.576 1.142 1.642-35.328 24.576 3.426 4.925-15.49 2.249 7.495-13.741 3.427 4.925z"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M244.5 202.5h-48v-2h48v-6l14 7-14 7v-6z"/><text id="husband" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="200" y="226">husband</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M307.365 180.448l-36.254-24.684 1.125-1.653 36.254 24.683 3.377-4.96L319.5 187.5l-15.512-2.093 3.377-4.96z"/><path id="Rectangle-5" stroke="#D0021B" stroke-width="2" d="M48 112h364v150H48z"/><text id="family:-null" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="183" y="66">family: null</tspan></text><g id="noun_48910_cc" transform="translate(8 110)"><path id="Shape" d="M17.503 1.75h-5.006a.341.341 0 00-.34.342v1.125h5.686V2.092a.341.341 0 00-.34-.341z"/><path id="Shape" fill="#D0021B" d="M28.364 3.217H19.59V2.092A2.09 2.09 0 0017.503 0h-5.006c-1.15 0-2.087.938-2.087 2.092v1.125H1.637c-.7 0-1.266.568-1.266 1.269v.09c0 .7.567 1.267 1.266 1.267h26.727c.699 0 1.266-.567 1.266-1.268v-.09c0-.7-.567-1.268-1.266-1.268zm-10.52 0h-5.687V2.092c0-.188.153-.341.34-.341h5.006a.34.34 0 01.34.34v1.126zM26.054 6.281H3.728c-1.298 0-2.35-.224-2.35 1.077L3.14 33.196c0 1.3 1.052 2.409 2.35 2.409h18.802c1.298 0 2.35-1.11 2.35-2.409l1.763-25.838c0-1.301-1.053-1.077-2.35-1.077zM9.637 32.193c-.377.012-.691-.261-.704-.612l-.694-19.917c-.012-.351.283-.647.66-.66.376-.013.69.261.703.613l.694 19.916c.013.351-.283.647-.659.66zm6.044-.63c0 .352-.306.637-.682.637-.377 0-.682-.286-.682-.637V11.634c0-.351.305-.636.682-.636.376 0 .682.285.682.636v19.93zm5.384.018c-.012.351-.327.625-.704.612-.376-.013-.672-.308-.66-.66l.695-19.916c.012-.352.326-.626.703-.613.377.014.672.309.66.66l-.694 19.917z"/></g></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Before After
Before After

34
1-js/04-object-basics/02-garbage-collection/family-no-father-2.svg
View file

@ -1,33 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>family-no-father-2.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family-no-father-2.svg">
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="34" y="91" width="78" height="26"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="50" y="107">Object</tspan>
</text>
<text id="family" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="15" y="67">family</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="16" y="166" width="118" height="48"></rect>
<text id="name:-&quot;Ann&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="34" y="203">name: "Ann"</tspan>
</text>
<text id="mother" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="16" y="142">mother</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="48" y="183">Object</tspan>
</text>
<path id="Line" d="M73.5,65.5 L73.5,47.5 L75.5,47.5 L75.5,65.5 L81.5,65.5 L74.5,79.5 L67.5,65.5 L73.5,65.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M72.5,141.5 L72.5,122.5 L74.5,122.5 L74.5,141.5 L80.5,141.5 L73.5,155.5 L66.5,141.5 L72.5,141.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="27" y="16" width="93" height="26"></rect>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="43" y="33">&lt;global&gt;</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="144" height="225" viewBox="0 0 144 225"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family-no-father-2.svg"><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M34 91h78v26H34z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="50" y="107">Object</tspan></text><text id="family" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="15" y="67">family</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M16 166h118v48H16z"/><text id="name:-&quot;Ann&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="34" y="203">name: &quot;Ann&quot;</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="16" y="142">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="48" y="183">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M73.5 65.5v-18h2v18h6l-7 14-7-14h6zM72.5 141.5v-19h2v19h6l-7 14-7-14h6z"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M27 16h93v26H27z"/><text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="43" y="33">&lt;global&gt;</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2 KiB

Before After
Before After

51
1-js/04-object-basics/02-garbage-collection/family-no-father.svg
View file

@ -1,50 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="399px" height="225px" viewBox="0 0 399 225" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>family-no-father.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family-no-father.svg">
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="187" y="78" width="78" height="26"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="203" y="94">Object</tspan>
</text>
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="69" y="146" width="118" height="48"></rect>
<text id="Object-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="103" y="163">Object</tspan>
</text>
<text id="wife" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="211" y="146">wife</tspan>
</text>
<text id="family" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="171" y="61">family</tspan>
</text>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="83" y="183">name: "John"</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="278" y="146" width="118" height="48"></rect>
<text id="name:-&quot;Ann&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="299" y="183">name: "Ann"</tspan>
</text>
<text id="mother" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="306" y="125">mother</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="308" y="163">Object</tspan>
</text>
<path id="Line" d="M226.5,59.5 L226.5,41.5 L228.5,41.5 L228.5,59.5 L234.5,59.5 L227.5,73.5 L220.5,59.5 L226.5,59.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M244.5,155.5 L196.5,155.5 L196.5,153.5 L244.5,153.5 L244.5,147.5 L258.5,154.5 L244.5,161.5 L244.5,155.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M307.36482,135.447526 L271.11061,110.763808 L272.236192,109.11061 L308.490402,133.794327 L311.867147,128.834732 L319.5,142.5 L303.988074,140.407121 L307.36482,135.447526 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-5" stroke="#D0021B" stroke-width="2" x="48" y="117" width="217" height="99"></rect>
<g id="noun_48910_cc" transform="translate(7.000000, 114.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>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="181" y="13" width="93" height="26"></rect>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="197" y="30">&lt;global&gt;</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="399" height="225" viewBox="0 0 399 225"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family-no-father.svg"><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M187 78h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="203" y="94">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M69 146h118v48H69z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="103" y="163">Object</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="211" y="146">wife</tspan></text><text id="family" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="171" y="61">family</tspan></text><text id="name:-&quot;John&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="83" y="183">name: &quot;John&quot;</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M278 146h118v48H278z"/><text id="name:-&quot;Ann&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="299" y="183">name: &quot;Ann&quot;</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="306" y="125">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="308" y="163">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M226.5 59.5v-18h2v18h6l-7 14-7-14h6zM244.5 155.5h-48v-2h48v-6l14 7-14 7v-6zM307.365 135.448l-36.254-24.684 1.125-1.653 36.254 24.683 3.377-4.96L319.5 142.5l-15.512-2.093 3.377-4.96z"/><path id="Rectangle-5" stroke="#D0021B" stroke-width="2" d="M48 117h217v99H48z"/><g id="noun_48910_cc" transform="translate(7 114)"><path id="Shape" d="M17.503 1.75h-5.006a.341.341 0 00-.34.342v1.125h5.686V2.092a.341.341 0 00-.34-.341z"/><path id="Shape" fill="#D0021B" d="M28.364 3.217H19.59V2.092A2.09 2.09 0 0017.503 0h-5.006c-1.15 0-2.087.938-2.087 2.092v1.125H1.637c-.7 0-1.266.568-1.266 1.269v.09c0 .7.567 1.267 1.266 1.267h26.727c.699 0 1.266-.567 1.266-1.268v-.09c0-.7-.567-1.268-1.266-1.268zm-10.52 0h-5.687V2.092c0-.188.153-.341.34-.341h5.006a.34.34 0 01.34.34v1.126zM26.054 6.281H3.728c-1.298 0-2.35-.224-2.35 1.077L3.14 33.196c0 1.3 1.052 2.409 2.35 2.409h18.802c1.298 0 2.35-1.11 2.35-2.409l1.763-25.838c0-1.301-1.053-1.077-2.35-1.077zM9.637 32.193c-.377.012-.691-.261-.704-.612l-.694-19.917c-.012-.351.283-.647.66-.66.376-.013.69.261.703.613l.694 19.916c.013.351-.283.647-.659.66zm6.044-.63c0 .352-.306.637-.682.637-.377 0-.682-.286-.682-.637V11.634c0-.351.305-.636.682-.636.376 0 .682.285.682.636v19.93zm5.384.018c-.012.351-.327.625-.704.612-.376-.013-.672-.308-.66-.66l.695-19.916c.012-.352.326-.626.703-.613.377.014.672.309.66.66l-.694 19.917z"/></g><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M181 13h93v26h-93z"/><text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="197" y="30">&lt;global&gt;</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

Before After
Before After

53
1-js/04-object-basics/02-garbage-collection/family.svg
View file

@ -1,52 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="337px" height="204px" viewBox="0 0 337 204" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>family.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="family.svg">
<path id="Line" d="M147.5,189.5 L193.5,189.5 L193.5,191.5 L147.5,191.5 L147.5,197.5 L133.5,190.5 L147.5,183.5 L147.5,189.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-2" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="123" y="80" width="78" height="26"></rect>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="139" y="96">Object</tspan>
</text>
<rect id="Rectangle-3" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="5" y="148" width="118" height="48"></rect>
<text id="Object-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="39" y="165">Object</tspan>
</text>
<text id="father" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="35" y="127">father</tspan>
</text>
<text id="wife" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="147" y="148">wife</tspan>
</text>
<text id="family" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="107" y="63">family</tspan>
</text>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="19" y="185">name: "John"</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="214" y="148" width="118" height="48"></rect>
<text id="name:-&quot;Ann&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="230" y="185">name: "Ann"</tspan>
</text>
<text id="mother" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="242" y="127">mother</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="244" y="165">Object</tspan>
</text>
<path id="Line" d="M162.5,61.5 L162.5,43.5 L164.5,43.5 L164.5,61.5 L170.5,61.5 L163.5,75.5 L156.5,61.5 L162.5,61.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M79.4216083,135.684192 L114.749841,111.10803 L115.89197,112.749841 L80.5637373,137.326002 L83.9901242,142.251434 L68.5,144.5 L75.9952214,130.758761 L79.4216083,135.684192 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line" d="M180.5,157.5 L132.5,157.5 L132.5,155.5 L180.5,155.5 L180.5,149.5 L194.5,156.5 L180.5,163.5 L180.5,157.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="husband" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="136" y="181">husband</tspan>
</text>
<path id="Line" d="M243.36482,137.447526 L207.11061,112.763808 L208.236192,111.11061 L244.490402,135.794327 L247.867147,130.834732 L255.5,144.5 L239.988074,142.407121 L243.36482,137.447526 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="88" y="13" width="151" height="26"></rect>
<text id="&lt;global-variable&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="92" y="30">&lt;global variable&gt;</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="337" height="204" viewBox="0 0 337 204"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family.svg"><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M147.5 189.5h46v2h-46v6l-14-7 14-7v6z"/><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M123 80h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="139" y="96">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M5 148h118v48H5z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="39" y="165">Object</tspan></text><text id="father" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="35" y="127">father</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="147" y="148">wife</tspan></text><text id="family" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="107" y="63">family</tspan></text><text id="name:-&quot;John&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="19" y="185">name: &quot;John&quot;</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M214 148h118v48H214z"/><text id="name:-&quot;Ann&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="230" y="185">name: &quot;Ann&quot;</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="242" y="127">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="244" y="165">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M162.5 61.5v-18h2v18h6l-7 14-7-14h6z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M79.422 135.684l35.328-24.576 1.142 1.642-35.328 24.576 3.426 4.925L68.5 144.5l7.495-13.741 3.427 4.925z"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M180.5 157.5h-48v-2h48v-6l14 7-14 7v-6z"/><text id="husband" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="136" y="181">husband</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M243.365 137.448l-36.254-24.684 1.125-1.653 36.254 24.683 3.377-4.96L255.5 144.5l-15.512-2.093 3.377-4.96z"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M88 13h151v26H88z"/><text id="&lt;global-variable&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="92" y="30">&lt;global variable&gt;</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Before After
Before After

163
1-js/04-object-basics/02-garbage-collection/garbage-collection-1.svg
View file

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

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

Before After
Before After

179
1-js/04-object-basics/02-garbage-collection/garbage-collection-2.svg
View file

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

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 9 KiB

Before After
Before After

191
1-js/04-object-basics/02-garbage-collection/garbage-collection-3.svg
View file

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

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

195
1-js/04-object-basics/02-garbage-collection/garbage-collection-4.svg
View file

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

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

213
1-js/04-object-basics/02-garbage-collection/garbage-collection-5.svg
View file

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

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Before After
Before After

30
1-js/04-object-basics/02-garbage-collection/memory-user-john-admin.svg
View file

@ -1,29 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="144px" height="159px" viewBox="0 0 144 159" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>memory-user-john-admin.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="memory-user-john-admin.svg">
<text id="user" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="12" y="67">user</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="16" y="93" width="118" height="48"></rect>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="30" y="130">name: "John"</tspan>
</text>
<text id="Object" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="44" y="110">Object</tspan>
</text>
<path id="Line" d="M53.5,65.5 L53.5,47.5 L55.5,47.5 L55.5,65.5 L61.5,65.5 L54.5,79.5 L47.5,65.5 L53.5,65.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="admin" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="92" y="67">admin</tspan>
</text>
<path id="Line-Copy" d="M81.5,65.5 L81.5,47.5 L83.5,47.5 L83.5,65.5 L89.5,65.5 L82.5,79.5 L75.5,65.5 L81.5,65.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="27" y="16" width="93" height="26"></rect>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="43" y="33">&lt;global&gt;</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="144" height="159" viewBox="0 0 144 159"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="memory-user-john-admin.svg"><text id="user" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="12" y="67">user</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M16 93h118v48H16z"/><text id="name:-&quot;John&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="30" y="130">name: &quot;John&quot;</tspan></text><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="44" y="110">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M53.5 65.5v-18h2v18h6l-7 14-7-14h6z"/><text id="admin" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="92" y="67">admin</tspan></text><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M81.5 65.5v-18h2v18h6l-7 14-7-14h6z"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M27 16h93v26H27z"/><text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="43" y="33">&lt;global&gt;</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

31
1-js/04-object-basics/02-garbage-collection/memory-user-john-lost.svg
View file

@ -1,30 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="225px" height="159px" viewBox="0 0 225 159" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>memory-user-john-lost.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="memory-user-john-lost.svg">
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="61" y="89" width="118" height="48"></rect>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="83" y="126">name: "John"</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="97" y="106">Object</tspan>
</text>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="65" y="4" width="104" height="42"></rect>
<text id="user:-null" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="79" y="40">user: null</tspan>
</text>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="86" y="23">&lt;global&gt;</tspan>
</text>
<rect id="Rectangle-5" stroke="#D0021B" stroke-width="2" x="47" y="69" width="154" height="86"></rect>
<g id="noun_48910_cc" transform="translate(8.000000, 65.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>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="225" height="159" viewBox="0 0 225 159"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="memory-user-john-lost.svg"><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M61 89h118v48H61z"/><text id="name:-&quot;John&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="83" y="126">name: &quot;John&quot;</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="97" y="106">Object</tspan></text><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M65 4h104v42H65z"/><text id="user:-null" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="79" y="40">user: null</tspan></text><text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="86" y="23">&lt;global&gt;</tspan></text><path id="Rectangle-5" stroke="#D0021B" stroke-width="2" d="M47 69h154v86H47z"/><g id="noun_48910_cc" transform="translate(8 65)"><path id="Shape" d="M17.503 1.75h-5.006a.341.341 0 00-.34.342v1.125h5.686V2.092a.341.341 0 00-.34-.341z"/><path id="Shape" fill="#D0021B" d="M28.364 3.217H19.59V2.092A2.09 2.09 0 0017.503 0h-5.006c-1.15 0-2.087.938-2.087 2.092v1.125H1.637c-.7 0-1.266.568-1.266 1.269v.09c0 .7.567 1.267 1.266 1.267h26.727c.699 0 1.266-.567 1.266-1.268v-.09c0-.7-.567-1.268-1.266-1.268zm-10.52 0h-5.687V2.092c0-.188.153-.341.34-.341h5.006a.34.34 0 01.34.34v1.126zM26.054 6.281H3.728c-1.298 0-2.35-.224-2.35 1.077L3.14 33.196c0 1.3 1.052 2.409 2.35 2.409h18.802c1.298 0 2.35-1.11 2.35-2.409l1.763-25.838c0-1.301-1.053-1.077-2.35-1.077zM9.637 32.193c-.377.012-.691-.261-.704-.612l-.694-19.917c-.012-.351.283-.647.66-.66.376-.013.69.261.703.613l.694 19.916c.013.351-.283.647-.659.66zm6.044-.63c0 .352-.306.637-.682.637-.377 0-.682-.286-.682-.637V11.634c0-.351.305-.636.682-.636.376 0 .682.285.682.636v19.93zm5.384.018c-.012.351-.327.625-.704.612-.376-.013-.672-.308-.66-.66l.695-19.916c.012-.352.326-.626.703-.613.377.014.672.309.66.66l-.694 19.917z"/></g></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

Before After
Before After

26
1-js/04-object-basics/02-garbage-collection/memory-user-john.svg
View file

@ -1,25 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="144px" height="150px" viewBox="0 0 144 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>memory-user-john.svg</title>
<desc>Created with sketchtool.</desc>
<g id="garbage-collection" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="memory-user-john.svg">
<text id="user" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="31" y="69">user</tspan>
</text>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="2" fill="#FFF9EB" x="16" y="95" width="118" height="48"></rect>
<text id="name:-&quot;John&quot;" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" fill="#8A704D">
<tspan x="32" y="132">name: "John"</tspan>
</text>
<text id="Object-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="46" y="112">Object</tspan>
</text>
<path id="Line" d="M73.5,67.5 L73.5,49.5 L75.5,49.5 L75.5,67.5 L81.5,67.5 L74.5,81.5 L67.5,67.5 L73.5,67.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="27" y="12" width="93" height="26"></rect>
<text id="&lt;global&gt;" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="43" y="29">&lt;global&gt;</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="144" height="150" viewBox="0 0 144 150"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="memory-user-john.svg"><text id="user" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="31" y="69">user</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M16 95h118v48H16z"/><text id="name:-&quot;John&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="32" y="132">name: &quot;John&quot;</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="46" y="112">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M73.5 67.5v-18h2v18h6l-7 14-7-14h6z"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M27 12h93v26H27z"/><text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="43" y="29">&lt;global&gt;</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Before After
Before After