diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 000000000..490051876
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: iliakan
diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md
index 60fca285f..7994ec133 100644
--- a/1-js/01-getting-started/3-code-editors/article.md
+++ b/1-js/01-getting-started/3-code-editors/article.md
@@ -29,6 +29,7 @@ Windows үчүн Visual Studio да бар (Visual Studio Code менен чат
Иш жүзүндө "жеңил" редакторлор көптөгөн плагиндерге, анын ичинде директория деңгээлиндеги синтаксис анализаторлору жана автокошумчалоолору ээ болушу мүмкүн, ошондуктан "жеңил" редактор менен IDE ортосунда катуу чеги жок.
+<<<<<<< HEAD
Төмөнкү варианттар сиздин көңүлүңүздү бурууга татыктуу:
- [Atom](https://atom.io) (кроссплатформалуу, акысыз)
- [Sublime Text](http://www.sublimetext.com) (кроссплатформалуу, шарттуу акысыз).
@@ -36,9 +37,27 @@ Windows үчүн Visual Studio да бар (Visual Studio Code менен чат
- [Vim](http://www.vim.org/) жана [Emacs](https://www.gnu.org/software/emacs/) кантип колдонгонун билсеңиз, алар да жакшы.
## Жаңжалдашпайлы
+=======
+There are many options, for instance:
+
+- [Sublime Text](https://www.sublimetext.com/) (cross-platform, shareware).
+- [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
+- [Vim](https://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
Жогоруда саналган редакторлор авторго көптөн бери белгилүү жана кесиптештеринин көптөгөн жакшы пикирлерине ээ болушкан.
Албетте, башка көптөгөн сонун редакторлор бар. Сизге эң жактырганын тандаңыз.
+<<<<<<< HEAD
Башка куралды сыяктуу эле редакторду тандоо жеке иш болуп саналат жана долбоорлоруңузга, адаттарыңызга жана жеке каалоолоруңузга жараша болот.
+=======
+There are other great editors in our big world. Please choose the one you like the most.
+
+The choice of an editor, like any other tool, is individual and depends on your projects, habits, and personal preferences.
+
+The author's personal opinion:
+
+- I'd use [Visual Studio Code](https://code.visualstudio.com/) if I develop mostly frontend.
+- Otherwise, if it's mostly another language/platform and partially frontend, then consider other editors, such as XCode (Mac), Visual Studio (Windows) or Jetbrains family (Webstorm, PHPStorm, RubyMine etc, depending on the language).
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
diff --git a/1-js/01-getting-started/4-devtools/article.md b/1-js/01-getting-started/4-devtools/article.md
index ff7f1b270..4ca84b242 100644
--- a/1-js/01-getting-started/4-devtools/article.md
+++ b/1-js/01-getting-started/4-devtools/article.md
@@ -22,7 +22,7 @@
Көрүнүшү:
-
+
Иштеп чыгуучу куралдардын так көрүнүшү Chrome версияңыздан көз каранды. Анда-санда өзгөрүп турат, бирок, жалпысынан, көрүнүшү мурунку версияларга окшош бойдон калууда.
@@ -48,9 +48,13 @@
## Safari
+<<<<<<< HEAD
Safari (Mac браузери, Windows/Linux тарабынан колдоого алынбайт) бул жерде бир аз өзгөчө. Адегенде "Иштеп чыгуу менюсун" ("Developer menu") күйгүзүшүбүз керек.
Орнотууларды (Preferences) ачып, "Өркүндөтүлгөндөр" (Advanced) панелине өтүңүз. Төмөндө чекбокс бар:
+=======
+Open Settings and go to the "Advanced" pane. There's a checkbox at the bottom:
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
diff --git a/1-js/01-getting-started/4-devtools/chrome.png b/1-js/01-getting-started/4-devtools/chrome.png
deleted file mode 100644
index 4cb3ea2f4..000000000
Binary files a/1-js/01-getting-started/4-devtools/chrome.png and /dev/null differ
diff --git a/1-js/01-getting-started/4-devtools/chrome.webp b/1-js/01-getting-started/4-devtools/chrome.webp
new file mode 100644
index 000000000..bdf067079
Binary files /dev/null and b/1-js/01-getting-started/4-devtools/chrome.webp differ
diff --git a/1-js/01-getting-started/4-devtools/chrome@2.webp b/1-js/01-getting-started/4-devtools/chrome@2.webp
new file mode 100644
index 000000000..2aeca5898
Binary files /dev/null and b/1-js/01-getting-started/4-devtools/chrome@2.webp differ
diff --git a/1-js/01-getting-started/4-devtools/chrome@2x.png b/1-js/01-getting-started/4-devtools/chrome@2x.png
deleted file mode 100644
index b87404a8f..000000000
Binary files a/1-js/01-getting-started/4-devtools/chrome@2x.png and /dev/null differ
diff --git a/1-js/01-getting-started/4-devtools/safari.png b/1-js/01-getting-started/4-devtools/safari.png
index 64c7a3f6c..4538827eb 100644
Binary files a/1-js/01-getting-started/4-devtools/safari.png and b/1-js/01-getting-started/4-devtools/safari.png differ
diff --git a/1-js/01-getting-started/4-devtools/safari@2x.png b/1-js/01-getting-started/4-devtools/safari@2x.png
index 27def4d09..1561b2bd9 100644
Binary files a/1-js/01-getting-started/4-devtools/safari@2x.png and b/1-js/01-getting-started/4-devtools/safari@2x.png differ
diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md
index 597e99265..25dacb26e 100644
--- a/1-js/02-first-steps/04-variables/article.md
+++ b/1-js/02-first-steps/04-variables/article.md
@@ -88,16 +88,26 @@ let user = 'Жакыя'
*!*var*/!* message = 'Салам';
```
+<<<<<<< HEAD
`var` ачкыч сөзү `let` менен *дээрлик* бирдей. Ал өзгөрмөнү жарыялайт, бирок бир аз башкача, "эскирген" жол менен.
`let` жана `var` ортосунда назик айырмачылыктар бар, бирок алар биз үчүн азырынча маанилүү эмес. Биз аларды <info:var> бөлүмүндө кененирээк карап чыгабыз.
+=======
+The `var` keyword is *almost* the same as `let`. It also declares a variable but in a slightly different, "old-school" way.
+
+There are subtle differences between `let` and `var`, but they do not matter to us yet. We'll cover them in detail in the chapter <info:var>.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
````
## Жашоодогу аналогия
Эгерде өзгөрмөнү берилмелер үчүн уникалдуу аталышы бар "куту" катары элестетсек, биз "өзгөрмө" түшүнүгүн оңой эле түшүнө алабыз.
+<<<<<<< HEAD
Мисалы үчүн, `message` өзгөрмөсүн `"билдирүү"` деп аталган жана анын ичиндеги `"Салам!"` мааниси бар куту катары элестетүүгө болот.
+=======
+For instance, the variable `message` can be imagined as a box labelled `"message"` with the value `"Hello!"` in it:
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
@@ -150,12 +160,21 @@ let message = "Ошол"; // SyntaxError: 'message' has already been declared
Ошондуктан, биз өзгөрмөнү бир гана жолу жарыялап, ага `let`'сиз кайрылышыбыз керек.
````
+<<<<<<< HEAD
```smart header="Функционалдуу тилдер"
Өзгөрмө маанилерин өзгөртүүгө тыюу салган [Scala](http://www.scala-lang.org/) же [Erlang](http://www.erlang.org/) сыяктуу [функционалдуу](https://en.wikipedia.org/wiki/Functional_programming) программалоо тилдери бар экенин белгилей кетүү кызык.
+=======
+```smart header="Functional languages"
+It's interesting to note that there exist so-called [pure functional](https://en.wikipedia.org/wiki/Purely_functional_programming) programming languages, such as [Haskell](https://en.wikipedia.org/wiki/Haskell), that forbid changing variable values.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
Мындай тилдерде бир жолу "кутуда" сакталган маани түбөлүккө ошол жерде калат. Эгер башка нерсени сактоо керек болсо, тил бизди жаңы кутуча түзүүгө (жаңы өзгөрмө жарыялоого) мажбурлайт. Биз эски өзгөрмөнү колдоно албайбыз.
+<<<<<<< HEAD
Бир караганда бул бир аз кызыктай көрүнгөнү менен, бул тилдер олуттуу иштеп чыгууга жөндөмдүү. Мындан тышкары, бул чектөө кээ бир артыкчылыктарды берген параллелдүү эсептөөлөр сыяктуу аймактар бар. Мындай тилди үйрөнүү (сиз аны жакында колдонууну пландабасаңыз да) акыл-эсти кеңейтүү үчүн сунушталат.
+=======
+Though it may seem a little odd at first sight, these languages are quite capable of serious development. More than that, there are areas like parallel computations where this limitation confers certain benefits.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
```
## Өзгөрмөлөрдү атоо [#variable-naming]
@@ -197,15 +216,24 @@ let my-name; // атта '-' дефисти коюуга болбойт
`apple` жана `APPLE` деп аталган өзгөрмөлөр -- бул эки башка өзгөрмө.
```
+<<<<<<< HEAD
````smart header="Латын эмес тамгаларга уруксат берилет, бирок сунушталбайт"
Каалаган тилди, анын ичинде кирил тамгаларын же жадаганда иероглифтерди колдонууга болот:
+=======
+````smart header="Non-Latin letters are allowed, but not recommended"
+It is possible to use any language, including Cyrillic letters, Chinese logograms and so on, like this:
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
```js
let аталыш = '...';
let 我 = '...';
```
+<<<<<<< HEAD
Техникалык жактан бул жерде ката жок. Мындай аттарга уруксат берилген, бирок өзгөрмө аттарында англис тилин колдонуу боюнча эл аралык келишим бар. Кичинекей скрипт жазып жатсак да, анын алдында өмүрү узун болушу мүмкүн. Башка өлкөлөрдөн келгендер аны бир нече жолу окууга туура келиши мүмкүн.
+=======
+Technically, there is no error here. Such names are allowed, but there is an international convention to use English in variable names. Even if we're writing a small script, it may have a long life ahead. People from other countries may need to read it sometime.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
````
````warn header="Резервделген аттар"
@@ -260,11 +288,19 @@ const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // ката, константаны өзгөртүүгө болбойт!
```
+<<<<<<< HEAD
Эгерде программист өзгөрмө эч качан өзгөрбөйт деп ишенсе, ал муну кепилдей алат жана аны `const` аркылуу жарыялоо менен ар бирине так кабарлай алат.
+=======
+When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
### Баш тамгадагы константалар
+<<<<<<< HEAD
Скрипт аткарылганга чейин белгилүү болгон эстеп калууга кыйын маанилер үчүн константаларды тергеме ат катары колдонуу тажрыйбасы кеңири таралган.
+=======
+There is a widespread practice to use constants as aliases for difficult-to-remember values that are known before execution.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
Мындай константалардын аталыштары баш тамгалар жана ылдыйкы сызыкчалар менен жазылат.
@@ -289,7 +325,11 @@ alert(color); // #FF7F00
Качан константа үчүн баш тамгаларды колдонушубуз керек жана качан аны кадимкидей аташыбыз керек? Келгиле, бул маселени чечели.
+<<<<<<< HEAD
"Константа" болуу жөн гана өзгөрмөнүн мааниси эч качан өзгөрбөй турганын билдирет. Бирок аткарылганга чейин белгилүү болгон константалар бар (кызыл түстүн он алтылык мааниси сыяктуу) жана скрипттин аткарылышы учурунда *эсептелүүчү*, бирок алар башында жарыялангандан кийин өзгөрбөй турган константалар да бар.
+=======
+Being a "constant" just means that a variable's value never changes. But some constants are known before execution (like a hexadecimal value for red) and some constants are *calculated* in run-time, during the execution, but do not change after their initial assignment.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
Мисалы үчүн:
@@ -297,7 +337,11 @@ alert(color); // #FF7F00
const pageLoadTime = /* веб-баракчаны жүктөөгө сарпталган убакыт */;
```
+<<<<<<< HEAD
`pageLoadTime` константасынын мааниси баракчаны жүктөөдөн мурун белгилүү эмес, андыктан ал кадимкидей аталат. Бирок ал дагы эле константа, анткени жарыялангандан кийин өзгөрбөйт.
+=======
+The value of `pageLoadTime` is not known before the page load, so it's named normally. But it's still a constant because it doesn't change after the assignment.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
Башкача айтканда, баш тамгалар менен аталган константалар "катуу коддолгон" маанилер үчүн тергеме ат катары гана колдонулат.
@@ -307,18 +351,31 @@ const pageLoadTime = /* веб-баракчаны жүктөөгө сарпта
Өзгөрмөнүн аталышы ал сактаган берилмелерди сыпаттаган таза, анык мааниге ээ болушу керек.
+<<<<<<< HEAD
Өзгөрмөлөрдү атоо -- бул программалоодогу эң маанилүү жана татаал көндүмдөрдүн бири. Өзгөрмөлөрдүн аттарына тез караш кайсы кодду башталгыч же тажрыйбалуу иштеп чыгуучу жазганын көрсөтө алат.
Чыныгы долбоордо көп убакыт нөлдөн толугу менен өзүнчө бир нерсени жазууга эмес, учурдагы код базасын өзгөртүүгө жана кеңейтүүгө жумшалат. Бир аз убакытка башка бир нерсе кылгандан кийин кодго кайтып келгенде, жакшы белгиленген маалыматты табуу далай жеңил болот. Же, башкача айтканда, өзгөрмөлөр жакшы аттарга ээ болгондо.
+=======
+Variable naming is one of the most important and complex skills in programming. A glance at variable names can reveal which code was written by a beginner versus an experienced developer.
+
+In a real project, most of the time is spent modifying and extending an existing code base rather than writing something completely separate from scratch. When we return to some code after doing something else for a while, it's much easier to find information that is well-labelled. Or, in other words, when the variables have good names.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
Сураныч, өзгөрмөнү жарыялоодон мурун анын туура аталышы жөнүндө ойлонууга убакыт бөлүңүз. Ушундай кылыңыз, ошондо сиз сыйланасыз.
Бир нече жакшы эрежелер:
+<<<<<<< HEAD
- `userName` же `shoppingCart` сыяктуу окууга оңой аттарды колдонуңуз.
- Эмне кылып жатканыңызды так билбесеңиз, `a`, `b`, `c` сыяктуу кыскартуулардан же кыска аталыштардан алыс болуңуз.
- Аттарды максималдуу түрдө сыпаттоочу жана кыска кылыңыз. Жаман аттардын мисалдары: `data` жана `value`. Мындай ысымдар эч нерсени айтпайт. Аларды коддун контекстинен өзгөрмө кандай маалыматтарды сактай турганы анык болсо гана колдонсо болот.
- Колдонулган терминдер боюнча командаңыз менен макулдашыңыз. Эгер сайтка кирүүчү "user" деп аталса, анда аны менен байланышкан өзгөрмөлөрдү, мисалы, `currentVisitor` же `newManInTown` эмес, `currentUser` же `newUser` деп аташыбыз керек.
+=======
+- Use human-readable names like `userName` or `shoppingCart`.
+- Stay away from abbreviations or short names like `a`, `b`, and `c`, unless you know what you're doing.
+- Make names maximally descriptive and concise. Examples of bad names are `data` and `value`. Such names say nothing. It's only okay to use them if the context of the code makes it exceptionally obvious which data or value the variable is referencing.
+- Agree on terms within your team and in your mind. If a site visitor is called a "user" then we should name related variables `currentUser` or `newUser` instead of `currentVisitor` or `newManInTown`.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
Жөнөкөй угулабы? Чынында эле ошондой, бирок тажрыйбада түшүнүктүү жана кыска өзгөрмө аттарын түзүү -- бул сейректик. Алга.
diff --git a/1-js/02-first-steps/05-types/article.md b/1-js/02-first-steps/05-types/article.md
index d52ac9885..be1ac31e1 100644
--- a/1-js/02-first-steps/05-types/article.md
+++ b/1-js/02-first-steps/05-types/article.md
@@ -92,6 +92,7 @@ const bigInt = 1234567890123456789012345678901234567890n;
`BigInt` сандары сейрек талап кылынгандыктан, биз аларды бөлөк <info:bigint> бөлүмүндө караштырабыз. Ушунчалык чоң сандар керек болгондо аны окуңуз.
+<<<<<<< HEAD
```smart header="Шайкештик көйгөйлөрү"
Азыркы учурда `BigInt` Firefox/Chrome/Edge/Safari браузерлеринде колдоого алынат, бирок IE'де - жок.
```
@@ -99,6 +100,9 @@ const bigInt = 1234567890123456789012345678901234567890n;
я Браузердин кайсы версиялары колдоого алынарын билүү үчүн [*MDN* BigInt шайкештик жадыбалын](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#Browser_compatibility) карап көрсөңүз болот.
## Сап (string)
+=======
+## String
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
JavaScript'те сап тырмакчага алынышы керек.
@@ -222,7 +226,11 @@ alert(age); // "undefined"
## typeof оператору [#type-typeof]
+<<<<<<< HEAD
`typeof` оператору аргументинин түрүн кайтарат. Бул ар кандай түрдөгү маанилерди башкача иштеткибиз келгенде же жөн гана тез текшерүүнү каалаганыбызда пайдалуу.
+=======
+The `typeof` operator returns the type of the operand. It's useful when we want to process values of different types differently or just want to do a quick check.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
`typeof x` чалуусу түрү аталышы менен сапты кайтарат:
diff --git a/1-js/02-first-steps/07-type-conversions/article.md b/1-js/02-first-steps/07-type-conversions/article.md
index 8de0a2322..224e80ad9 100644
--- a/1-js/02-first-steps/07-type-conversions/article.md
+++ b/1-js/02-first-steps/07-type-conversions/article.md
@@ -34,7 +34,11 @@ alert(typeof value); // string
## Санга айландыруу
+<<<<<<< HEAD
Сандарга айландыруу математикалык функцияларда жана туюнтмаларда автоматтык түрдө ишке ашат.
+=======
+Numeric conversion in mathematical functions and expressions happens automatically.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
Мисалы, бөлүү `/` сандар эместерге колдонулганда:
diff --git a/1-js/02-first-steps/08-operators/article.md b/1-js/02-first-steps/08-operators/article.md
index 045a0920f..e90bcfd56 100644
--- a/1-js/02-first-steps/08-operators/article.md
+++ b/1-js/02-first-steps/08-operators/article.md
@@ -50,8 +50,14 @@
Мисалы үчүн:
```js run
+<<<<<<< HEAD
alert( 5 % 2 ); // 1, 5ти 2ге бөлүүнүн калдыгы
alert( 8 % 3 ); // 2, 8ди 3кө бөлүүнүн калдыгы
+=======
+alert( 5 % 2 ); // 1, the remainder of 5 divided by 2
+alert( 8 % 3 ); // 2, the remainder of 8 divided by 3
+alert( 8 % 4 ); // 0, the remainder of 8 divided by 4
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
```
### Даражага көтөрүү **
@@ -68,7 +74,11 @@ alert( 2 ** 3 ); // 2³ = 8
alert( 2 ** 4 ); // 2⁴ = 16
```
+<<<<<<< HEAD
Математикадагыдай эле, даражага көтөрүү операторун бөлчөктүк сандар үчүн да колдонууга болот.
+=======
+Just like in maths, the exponentiation operator is defined for non-integer numbers as well.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
Мисалы, чарчы тамыр бул ½ даражага көтөрүүсү:
@@ -80,7 +90,11 @@ alert( 8 ** (1/3) ); // 2 (1/3 даражасы кубдук тамыр мене
## Бинардык + менен саптарды кошуу
+<<<<<<< HEAD
Келгиле, мектеп арифметикасынын алкагына кирбеген JavaScript операторлорунун өзгөчөлүктөрү менен таанышалы.
+=======
+Let's meet the features of JavaScript operators that are beyond school arithmetics.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
Адатта, плюс оператору `+` сандарды кошот.
@@ -308,7 +322,7 @@ let n = 2;
n *= 3 + 5; // алгач оң бөлүгү эсептелинет, n *= 8 менен бирдей
-alert( n ); // 16
+alert( n ); // 16
```
## Инкремент/декремент
diff --git a/1-js/02-first-steps/10-ifelse/article.md b/1-js/02-first-steps/10-ifelse/article.md
index 8b947dfe6..e7be340d2 100644
--- a/1-js/02-first-steps/10-ifelse/article.md
+++ b/1-js/02-first-steps/10-ifelse/article.md
@@ -68,7 +68,11 @@ if (cond) {
## "else" пункту
+<<<<<<< HEAD
`if` нускамасы кошумча "else" блогун камтышы мүмкүн. Шарт жалган болгондо ал аткарылат.
+=======
+The `if` statement may contain an optional `else` block. It executes when the condition is falsy.
+>>>>>>> 540d753e90789205fc6e75c502f68382c87dea9b
Мисалы:
```js run
@@ -181,9 +185,9 @@ alert( message );
It may be difficult at first to grasp what's going on. But after a closer look, we can see that it's just an ordinary sequence of tests:
1. The first question mark checks whether `age < 3`.
-2. If true -- it returns `'Hi, baby!'`. Otherwise, it continues to the expression after the colon '":"', checking `age < 18`.
-3. If that's true -- it returns `'Hello!'`. Otherwise, it continues to the expression after the next colon '":"', checking `age < 100`.
-4. If that's true -- it returns `'Greetings!'`. Otherwise, it continues to the expression after the last colon '":"', returning `'What an unusual age!'`.
+2. If true -- it returns `'Hi, baby!'`. Otherwise, it continues to the expression after the colon ":", checking `age < 18`.
+3. If that's true -- it returns `'Hello!'`. Otherwise, it continues to the expression after the next colon ":", checking `age < 100`.
+4. If that's true -- it returns `'Greetings!'`. Otherwise, it continues to the expression after the last colon ":", returning `'What an unusual age!'`.
Here's how this looks using `if..else`:
Мында `if..else` колдонгондон кийинки көрүнүшү:
diff --git a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md
index ec0ffe788..0b2f092ab 100644
--- a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md
+++ b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md
@@ -29,7 +29,7 @@ For example, here we show `user` if its value isn't `null/undefined`, otherwise
```js run
let user;
-alert(user ?? "Anonymous"); // Anonymous (user not defined)
+alert(user ?? "Anonymous"); // Anonymous (user is undefined)
```
Here's the example with `user` assigned to a name:
@@ -37,7 +37,7 @@ Here's the example with `user` assigned to a name:
```js run
let user = "John";
-alert(user ?? "Anonymous"); // John (user defined)
+alert(user ?? "Anonymous"); // John (user is not null/undefined)
```
We can also use a sequence of `??` to select the first value from a list that isn't `null/undefined`.
@@ -76,7 +76,7 @@ alert(firstName || lastName || nickName || "Anonymous"); // Supercoder
*/!*
```
-Historically, the OR `||` operator was there first. It exists since the beginning of JavaScript, so developers were using it for such purposes for a long time.
+Historically, the OR `||` operator was there first. It's been there since the beginning of JavaScript, so developers were using it for such purposes for a long time.
On the other hand, the nullish coalescing operator `??` was added to JavaScript only recently, and the reason for that was that people weren't quite happy with `||`.
diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md
index 5806b2caf..3c5631a3c 100644
--- a/1-js/02-first-steps/15-function-basics/article.md
+++ b/1-js/02-first-steps/15-function-basics/article.md
@@ -460,7 +460,7 @@ These examples assume common meanings of prefixes. You and your team are free to
```smart header="Ultrashort function names"
Functions that are used *very often* sometimes have ultrashort names.
-For example, the [jQuery](http://jquery.com) framework defines a function with `$`. The [Lodash](http://lodash.com/) library has its core function named `_`.
+For example, the [jQuery](https://jquery.com/) framework defines a function with `$`. The [Lodash](https://lodash.com/) library has its core function named `_`.
These are exceptions. Generally function names should be concise and descriptive.
```
diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md
index b952d5943..c6dd891bd 100644
--- a/1-js/02-first-steps/16-function-expressions/article.md
+++ b/1-js/02-first-steps/16-function-expressions/article.md
@@ -82,7 +82,7 @@ let sayHi = function() { // (1) create
alert( "Hello" );
};
-let func = sayHi;
+let func = sayHi; //(2)
// ...
```
diff --git a/1-js/02-first-steps/18-javascript-specials/article.md b/1-js/02-first-steps/18-javascript-specials/article.md
index 016214e3b..e7ddacac4 100644
--- a/1-js/02-first-steps/18-javascript-specials/article.md
+++ b/1-js/02-first-steps/18-javascript-specials/article.md
@@ -103,13 +103,13 @@ More in: <info:variables> and <info:types>.
We're using a browser as a working environment, so basic UI functions will be:
-[`prompt(question, [default])`](mdn:api/Window/prompt)
+[`prompt(question, [default])`](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt)
: Ask a `question`, and return either what the visitor entered or `null` if they clicked "cancel".
-[`confirm(question)`](mdn:api/Window/confirm)
+[`confirm(question)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm)
: Ask a `question` and suggest to choose between Ok and Cancel. The choice is returned as `true/false`.
-[`alert(message)`](mdn:api/Window/alert)
+[`alert(message)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert)
: Output a `message`.
All these functions are *modal*, they pause the code execution and prevent the visitor from interacting with the page until they answer.
@@ -144,7 +144,7 @@ Assignments
: There is a simple assignment: `a = b` and combined ones like `a *= 2`.
Bitwise
-: Bitwise operators work with 32-bit integers at the lowest, bit-level: see the [docs](mdn:/JavaScript/Guide/Expressions_and_Operators#bitwise_operators) when they are needed.
+: Bitwise operators work with 32-bit integers at the lowest, bit-level: see the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise_operators) when they are needed.
Conditional
: The only operator with three parameters: `cond ? resultA : resultB`. If `cond` is truthy, returns `resultA`, otherwise `resultB`.
diff --git a/1-js/03-code-quality/05-testing-mocha/article.md b/1-js/03-code-quality/05-testing-mocha/article.md
index 558263370..4c2b1aa5e 100644
--- a/1-js/03-code-quality/05-testing-mocha/article.md
+++ b/1-js/03-code-quality/05-testing-mocha/article.md
@@ -69,7 +69,7 @@ The flow of development usually looks like this:
1. An initial spec is written, with tests for the most basic functionality.
2. An initial implementation is created.
-3. To check whether it works, we run the testing framework [Mocha](http://mochajs.org/) (more details soon) that runs the spec. While the functionality is not complete, errors are displayed. We make corrections until everything works.
+3. To check whether it works, we run the testing framework [Mocha](https://mochajs.org/) (more details soon) that runs the spec. While the functionality is not complete, errors are displayed. We make corrections until everything works.
4. Now we have a working initial implementation with tests.
5. We add more use cases to the spec, probably not yet supported by the implementations. Tests start to fail.
6. Go to 3, update the implementation till tests give no errors.
@@ -85,9 +85,9 @@ The first step is already complete: we have an initial spec for `pow`. Now, befo
Here in the tutorial we'll be using the following JavaScript libraries for tests:
-- [Mocha](http://mochajs.org/) -- the core framework: it provides common testing functions including `describe` and `it` and the main function that runs tests.
-- [Chai](http://chaijs.com) -- the library with many assertions. It allows to use a lot of different assertions, for now we need only `assert.equal`.
-- [Sinon](http://sinonjs.org/) -- a library to spy over functions, emulate built-in functions and more, we'll need it much later.
+- [Mocha](https://mochajs.org/) -- the core framework: it provides common testing functions including `describe` and `it` and the main function that runs tests.
+- [Chai](https://www.chaijs.com/) -- the library with many assertions. It allows to use a lot of different assertions, for now we need only `assert.equal`.
+- [Sinon](https://sinonjs.org/) -- a library to spy over functions, emulate built-in functions and more, we'll need it much later.
These libraries are suitable for both in-browser and server-side testing. Here we'll consider the browser variant.
@@ -338,14 +338,14 @@ The newly added tests fail, because our implementation does not support them. Th
```smart header="Other assertions"
Please note the assertion `assert.isNaN`: it checks for `NaN`.
-There are other assertions in [Chai](http://chaijs.com) as well, for instance:
+There are other assertions in [Chai](https://www.chaijs.com/) as well, for instance:
- `assert.equal(value1, value2)` -- checks the equality `value1 == value2`.
- `assert.strictEqual(value1, value2)` -- checks the strict equality `value1 === value2`.
- `assert.notEqual`, `assert.notStrictEqual` -- inverse checks to the ones above.
- `assert.isTrue(value)` -- checks that `value === true`
- `assert.isFalse(value)` -- checks that `value === false`
-- ...the full list is in the [docs](http://chaijs.com/api/assert/)
+- ...the full list is in the [docs](https://www.chaijs.com/api/assert/)
```
So we should add a couple of lines to `pow`:
diff --git a/1-js/03-code-quality/06-polyfills/article.md b/1-js/03-code-quality/06-polyfills/article.md
index 83a12fb10..5ca123908 100644
--- a/1-js/03-code-quality/06-polyfills/article.md
+++ b/1-js/03-code-quality/06-polyfills/article.md
@@ -1,13 +1,13 @@
# Polyfills and transpilers
-The JavaScript language steadily evolves. New proposals to the language appear regularly, they are analyzed and, if considered worthy, are appended to the list at <https://tc39.github.io/ecma262/> and then progress to the [specification](http://www.ecma-international.org/publications/standards/Ecma-262.htm).
+The JavaScript language steadily evolves. New proposals to the language appear regularly, they are analyzed and, if considered worthy, are appended to the list at <https://tc39.github.io/ecma262/> and then progress to the [specification](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/).
Teams behind JavaScript engines have their own ideas about what to implement first. They may decide to implement proposals that are in draft and postpone things that are already in the spec, because they are less interesting or just harder to do.
So it's quite common for an engine to implement only part of the standard.
-A good page to see the current state of support for language features is <https://kangax.github.io/compat-table/es6/> (it's big, we have a lot to study yet).
+A good page to see the current state of support for language features is <https://compat-table.github.io/compat-table/es6/> (it's big, we have a lot to study yet).
As programmers, we'd like to use most recent features. The more good stuff - the better!
@@ -71,10 +71,7 @@ if (!Math.trunc) { // if no such function
JavaScript is a highly dynamic language. Scripts may add/modify any function, even built-in ones.
-Two interesting polyfill libraries are:
-- [core js](https://github.com/zloirock/core-js) that supports a lot, allows to include only needed features.
-- [polyfill.io](http://polyfill.io) service that provides a script with polyfills, depending on the features and user's browser.
-
+One interesting polyfill library is [core-js](https://github.com/zloirock/core-js), which supports a wide range of features and allows you to include only the ones you need.
## Summary
@@ -85,7 +82,7 @@ Just don't forget to use a transpiler (if using modern syntax or operators) and
For example, later when you're familiar with JavaScript, you can setup a code build system based on [webpack](https://webpack.js.org/) with the [babel-loader](https://github.com/babel/babel-loader) plugin.
Good resources that show the current state of support for various features:
-- <https://kangax.github.io/compat-table/es6/> - for pure JavaScript.
+- <https://compat-table.github.io/compat-table/es6/> - for pure JavaScript.
- <https://caniuse.com/> - for browser-related functions.
P.S. Google Chrome is usually the most up-to-date with language features, try it if a tutorial demo fails. Most tutorial demos work with any modern browser though.
diff --git a/1-js/04-object-basics/03-garbage-collection/article.md b/1-js/04-object-basics/03-garbage-collection/article.md
index 50ada6713..1b576d629 100644
--- a/1-js/04-object-basics/03-garbage-collection/article.md
+++ b/1-js/04-object-basics/03-garbage-collection/article.md
@@ -205,8 +205,8 @@ Modern engines implement advanced algorithms of garbage collection.
A general book "The Garbage Collection Handbook: The Art of Automatic Memory Management" (R. Jones et al) covers some of them.
-If you are familiar with low-level programming, more detailed information about V8's garbage collector is in the article [A tour of V8: Garbage Collection](http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection).
+If you are familiar with low-level programming, more detailed information about V8's garbage collector is in the article [A tour of V8: Garbage Collection](https://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection).
-The [V8 blog](https://v8.dev/) also publishes articles about changes in memory management from time to time. Naturally, to learn more about garbage collection, you'd better prepare by learning about V8 internals in general and read the blog of [Vyacheslav Egorov](http://mrale.ph) who worked as one of the V8 engineers. I'm saying: "V8", because it is best covered by articles on the internet. For other engines, many approaches are similar, but garbage collection differs in many aspects.
+The [V8 blog](https://v8.dev/) also publishes articles about changes in memory management from time to time. Naturally, to learn more about garbage collection, you'd better prepare by learning about V8 internals in general and read the blog of [Vyacheslav Egorov](https://mrale.ph) who worked as one of the V8 engineers. I'm saying: "V8", because it is best covered by articles on the internet. For other engines, many approaches are similar, but garbage collection differs in many aspects.
In-depth knowledge of engines is good when you need low-level optimizations. It would be wise to plan that as the next step after you're familiar with the language.
diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md
index a2a19c620..7d2ef8c15 100644
--- a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md
+++ b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md
@@ -4,7 +4,7 @@ importance: 2
# Chaining
-There's a `ladder` object that allows to go up and down:
+There's a `ladder` object that allows you to go up and down:
```js
let ladder = {
@@ -21,7 +21,7 @@ let ladder = {
};
```
-Now, if we need to make several calls in sequence, can do it like this:
+Now, if we need to make several calls in sequence, we can do it like this:
```js
ladder.up();
@@ -32,10 +32,10 @@ ladder.down();
ladder.showStep(); // 0
```
-Modify the code of `up`, `down` and `showStep` to make the calls chainable, like this:
+Modify the code of `up`, `down`, and `showStep` to make the calls chainable, like this:
```js
ladder.up().up().down().showStep().down().showStep(); // shows 1 then 0
```
-Such approach is widely used across JavaScript libraries.
+Such an approach is widely used across JavaScript libraries.
diff --git a/1-js/04-object-basics/09-object-toprimitive/article.md b/1-js/04-object-basics/09-object-toprimitive/article.md
index 8b0008b11..fa68da583 100644
--- a/1-js/04-object-basics/09-object-toprimitive/article.md
+++ b/1-js/04-object-basics/09-object-toprimitive/article.md
@@ -226,7 +226,7 @@ As we know already, many operators and functions perform type conversions, e.g.
If we pass an object as an argument, then there are two stages of calculations:
1. The object is converted to a primitive (using the rules described above).
-2. If the necessary for further calculations, the resulting primitive is also converted.
+2. If necessary for further calculations, the resulting primitive is also converted.
For instance:
@@ -253,7 +253,7 @@ let obj = {
}
};
-alert(obj + 2); // 22 ("2" + 2), conversion to primitive returned a string => concatenation
+alert(obj + 2); // "22" ("2" + 2), conversion to primitive returned a string => concatenation
```
## Summary
diff --git a/1-js/05-data-types/02-number/article.md b/1-js/05-data-types/02-number/article.md
index c704bd980..8e41f673d 100644
--- a/1-js/05-data-types/02-number/article.md
+++ b/1-js/05-data-types/02-number/article.md
@@ -4,7 +4,7 @@ In modern JavaScript, there are two types of numbers:
1. Regular numbers in JavaScript are stored in 64-bit format [IEEE-754](https://en.wikipedia.org/wiki/IEEE_754), also known as "double precision floating point numbers". These are numbers that we're using most of the time, and we'll talk about them in this chapter.
-2. BigInt numbers represent integers of arbitrary length. They are sometimes needed because a regular integer number can't safely exceed <code>(2<sup>53</sup>-1)</code> or be less than <code>-(2<sup>53</sup>-1)</code>, as we mentioned earlier in the chapter <info:types>. As bigints are used in few special areas, we devote them a special chapter <info:bigint>.
+2. BigInt numbers represent integers of arbitrary length. They are sometimes needed because a regular integer number can't safely exceed <code>(2<sup>53</sup>-1)</code> or be less than <code>-(2<sup>53</sup>-1)</code>, as we mentioned earlier in the chapter <info:types>. As bigints are used in a few special areas, we devote them to a special chapter <info:bigint>.
So here we'll talk about regular numbers. Let's expand our knowledge of them.
@@ -41,7 +41,7 @@ In other words, `e` multiplies the number by `1` with the given zeroes count.
1.23e6 === 1.23 * 1000000; // e6 means *1000000
```
-Now let's write something very small. Say, 1 microsecond (one millionth of a second):
+Now let's write something very small. Say, 1 microsecond (one-millionth of a second):
```js
let mсs = 0.000001;
@@ -103,13 +103,13 @@ alert( num.toString(16) ); // ff
alert( num.toString(2) ); // 11111111
```
-The `base` can vary from `2` to `36`. By default it's `10`.
+The `base` can vary from `2` to `36`. By default, it's `10`.
Common use cases for this are:
- **base=16** is used for hex colors, character encodings etc, digits can be `0..9` or `A..F`.
- **base=2** is mostly for debugging bitwise operations, digits can be `0` or `1`.
-- **base=36** is the maximum, digits can be `0..9` or `A..Z`. The whole latin alphabet is used to represent a number. A funny, but useful case for `36` is when we need to turn a long numeric identifier into something shorter, for example to make a short url. Can simply represent it in the numeral system with base `36`:
+- **base=36** is the maximum, digits can be `0..9` or `A..Z`. The whole Latin alphabet is used to represent a number. A funny, but useful case for `36` is when we need to turn a long numeric identifier into something shorter, for example, to make a short url. Can simply represent it in the numeral system with base `36`:
```js run
alert( 123456..toString(36) ); // 2n9c
@@ -118,7 +118,7 @@ Common use cases for this are:
```warn header="Two dots to call a method"
Please note that two dots in `123456..toString(36)` is not a typo. If we want to call a method directly on a number, like `toString` in the example above, then we need to place two dots `..` after it.
-If we placed a single dot: `123456.toString(36)`, then there would be an error, because JavaScript syntax implies the decimal part after the first dot. And if we place one more dot, then JavaScript knows that the decimal part is empty and now goes the method.
+If we placed a single dot: `123456.toString(36)`, then there would be an error, because JavaScript syntax implies the decimal part after the first dot. And if we place one more dot, then JavaScript knows that the decimal part is empty and now uses the method.
Also could write `(123456).toString(36)`.
@@ -137,7 +137,7 @@ There are several built-in functions for rounding:
: Rounds up: `3.1` becomes `4`, and `-1.1` becomes `-1`.
`Math.round`
-: Rounds to the nearest integer: `3.1` becomes `3`, `3.6` becomes `4`, the middle case: `3.5` rounds up to `4` too.
+: Rounds to the nearest integer: `3.1` becomes `3`, `3.6` becomes `4`. In the middle cases `3.5` rounds up to `4`, and `-3.5` rounds up to `-3`.
`Math.trunc` (not supported by Internet Explorer)
: Removes anything after the decimal point without rounding: `3.1` becomes `3`, `-1.1` becomes `-1`.
@@ -147,8 +147,10 @@ Here's the table to summarize the differences between them:
| | `Math.floor` | `Math.ceil` | `Math.round` | `Math.trunc` |
|---|---------|--------|---------|---------|
|`3.1`| `3` | `4` | `3` | `3` |
+|`3.5`| `3` | `4` | `4` | `3` |
|`3.6`| `3` | `4` | `4` | `3` |
|`-1.1`| `-2` | `-1` | `-1` | `-1` |
+|`-1.5`| `-2` | `-1` | `-1` | `-1` |
|`-1.6`| `-2` | `-1` | `-2` | `-1` |
@@ -188,7 +190,7 @@ There are two ways to do so:
alert( num.toFixed(5) ); // "12.34000", added zeroes to make exactly 5 digits
```
- We can convert it to a number using the unary plus or a `Number()` call, e.g write `+num.toFixed(5)`.
+ We can convert it to a number using the unary plus or a `Number()` call, e.g. write `+num.toFixed(5)`.
## Imprecise calculations
@@ -222,7 +224,13 @@ But why does this happen?
A number is stored in memory in its binary form, a sequence of bits - ones and zeroes. But fractions like `0.1`, `0.2` that look simple in the decimal numeric system are actually unending fractions in their binary form.
-What is `0.1`? It is one divided by ten `1/10`, one-tenth. In decimal numeral system such numbers are easily representable. Compare it to one-third: `1/3`. It becomes an endless fraction `0.33333(3)`.
+```js run
+alert(0.1.toString(2)); // 0.0001100110011001100110011001100110011001100110011001101
+alert(0.2.toString(2)); // 0.001100110011001100110011001100110011001100110011001101
+alert((0.1 + 0.2).toString(2)); // 0.0100110011001100110011001100110011001100110011001101
+```
+
+What is `0.1`? It is one divided by ten `1/10`, one-tenth. In the decimal numeral system, such numbers are easily representable. Compare it to one-third: `1/3`. It becomes an endless fraction `0.33333(3)`.
So, division by powers `10` is guaranteed to work well in the decimal system, but division by `3` is not. For the same reason, in the binary numeral system, the division by powers of `2` is guaranteed to work, but `1/10` becomes an endless binary fraction.
@@ -242,7 +250,7 @@ That's why `0.1 + 0.2` is not exactly `0.3`.
```smart header="Not only JavaScript"
The same issue exists in many other programming languages.
-PHP, Java, C, Perl, Ruby give exactly the same result, because they are based on the same numeric format.
+PHP, Java, C, Perl, and Ruby give exactly the same result, because they are based on the same numeric format.
```
Can we work around the problem? Sure, the most reliable method is to round the result with the help of a method [toFixed(n)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed):
@@ -266,7 +274,7 @@ alert( (0.1 * 10 + 0.2 * 10) / 10 ); // 0.3
alert( (0.28 * 100 + 0.14 * 100) / 100); // 0.4200000000000001
```
-So, multiply/divide approach reduces the error, but doesn't remove it totally.
+So, the multiply/divide approach reduces the error, but doesn't remove it totally.
Sometimes we could try to evade fractions at all. Like if we're dealing with a shop, then we can store prices in cents instead of dollars. But what if we apply a discount of 30%? In practice, totally evading fractions is rarely possible. Just round them to cut "tails" when needed.
@@ -288,7 +296,7 @@ Another funny consequence of the internal representation of numbers is the exist
That's because a sign is represented by a single bit, so it can be set or not set for any number including a zero.
-In most cases the distinction is unnoticeable, because operators are suited to treat them as the same.
+In most cases, the distinction is unnoticeable, because operators are suited to treat them as the same.
```
## Tests: isFinite and isNaN
@@ -337,7 +345,7 @@ Please note that an empty or a space-only string is treated as `0` in all numeri
````smart header="`Number.isNaN` and `Number.isFinite`"
[Number.isNaN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN) and [Number.isFinite](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isFinite) methods are the more "strict" versions of `isNaN` and `isFinite` functions. They do not autoconvert their argument into a number, but check if it belongs to the `number` type instead.
-- `Number.isNaN(value)` returns `true` if the argument belongs to the `number` type and it is `NaN`. In any other case it returns `false`.
+- `Number.isNaN(value)` returns `true` if the argument belongs to the `number` type and it is `NaN`. In any other case, it returns `false`.
```js run
alert( Number.isNaN(NaN) ); // true
@@ -348,7 +356,7 @@ Please note that an empty or a space-only string is treated as `0` in all numeri
alert( isNaN("str") ); // true, because isNaN converts string "str" into a number and gets NaN as a result of this conversion
```
-- `Number.isFinite(value)` returns `true` if the argument belongs to the `number` type and it is not `NaN/Infinity/-Infinity`. In any other case it returns `false`.
+- `Number.isFinite(value)` returns `true` if the argument belongs to the `number` type and it is not `NaN/Infinity/-Infinity`. In any other case, it returns `false`.
```js run
alert( Number.isFinite(123) ); // true
@@ -367,7 +375,7 @@ In a way, `Number.isNaN` and `Number.isFinite` are simpler and more straightforw
There is a special built-in method `Object.is` that compares values like `===`, but is more reliable for two edge cases:
1. It works with `NaN`: `Object.is(NaN, NaN) === true`, that's a good thing.
-2. Values `0` and `-0` are different: `Object.is(0, -0) === false`, technically that's correct, because internally the number has a sign bit that may be different even if all other bits are zeroes.
+2. Values `0` and `-0` are different: `Object.is(0, -0) === false`, technically that's correct because internally the number has a sign bit that may be different even if all other bits are zeroes.
In all other cases, `Object.is(a, b)` is the same as `a === b`.
@@ -385,7 +393,7 @@ alert( +"100px" ); // NaN
The sole exception is spaces at the beginning or at the end of the string, as they are ignored.
-But in real life we often have values in units, like `"100px"` or `"12pt"` in CSS. Also in many countries the currency symbol goes after the amount, so we have `"19€"` and would like to extract a numeric value out of that.
+But in real life, we often have values in units, like `"100px"` or `"12pt"` in CSS. Also in many countries, the currency symbol goes after the amount, so we have `"19€"` and would like to extract a numeric value out of that.
That's what `parseInt` and `parseFloat` are for.
@@ -479,4 +487,4 @@ For fractions:
More mathematical functions:
-- See the [Math](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Math) object when you need them. The library is very small, but can cover basic needs.
+- See the [Math](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Math) object when you need them. The library is very small but can cover basic needs.
diff --git a/1-js/05-data-types/03-string/3-truncate/task.md b/1-js/05-data-types/03-string/3-truncate/task.md
index 6382029f4..c99a5f15a 100644
--- a/1-js/05-data-types/03-string/3-truncate/task.md
+++ b/1-js/05-data-types/03-string/3-truncate/task.md
@@ -11,7 +11,7 @@ The result of the function should be the truncated (if needed) string.
For instance:
```js
-truncate("What I'd like to tell on this topic is:", 20) = "What I'd like to te…"
+truncate("What I'd like to tell on this topic is:", 20) == "What I'd like to te…"
-truncate("Hi everyone!", 20) = "Hi everyone!"
+truncate("Hi everyone!", 20) == "Hi everyone!"
```
diff --git a/1-js/05-data-types/03-string/article.md b/1-js/05-data-types/03-string/article.md
index 618f8ef3b..60ce2b6f0 100644
--- a/1-js/05-data-types/03-string/article.md
+++ b/1-js/05-data-types/03-string/article.md
@@ -505,7 +505,7 @@ This method actually has two additional arguments specified in [the documentatio
- There are 3 types of quotes. Backticks allow a string to span multiple lines and embed expressions `${…}`.
- We can use special characters, such as a line break `\n`.
-- To get a character, use: `[]`.
+- To get a character, use: `[]` or `at` method.
- To get a substring, use: `slice` or `substring`.
- To lowercase/uppercase a string, use: `toLowerCase/toUpperCase`.
- To look for a substring, use: `indexOf`, or `includes/startsWith/endsWith` for simple checks.
@@ -519,4 +519,4 @@ There are several other helpful methods in strings:
Strings also have methods for doing search/replace with regular expressions. But that's big topic, so it's explained in a separate tutorial section <info:regular-expressions>.
-Also, as of now it's important to know that strings are based on Unicode encoding, and hence there're issues with comparisons. There's more about Unicode in the chapter <info:unicode>.
\ No newline at end of file
+Also, as of now it's important to know that strings are based on Unicode encoding, and hence there're issues with comparisons. There's more about Unicode in the chapter <info:unicode>.
diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md
index 4bcab0bc9..e71e86a5b 100644
--- a/1-js/05-data-types/04-array/article.md
+++ b/1-js/05-data-types/04-array/article.md
@@ -98,7 +98,7 @@ The "trailing comma" style makes it easier to insert/remove items, because all l
Let's say we want the last element of the array.
-Some programming languages allow to use negative indexes for the same purpose, like `fruits[-1]`.
+Some programming languages allow the use of negative indexes for the same purpose, like `fruits[-1]`.
Although, in JavaScript it won't work. The result will be `undefined`, because the index in square brackets is treated literally.
@@ -426,7 +426,7 @@ let matrix = [
[7, 8, 9]
];
-alert( matrix[1][1] ); // 5, the central element
+alert( matrix[0][1] ); // 2, the second value of the first inner array
```
## toString
diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md
index feb626f95..853645958 100644
--- a/1-js/05-data-types/05-array-methods/article.md
+++ b/1-js/05-data-types/05-array-methods/article.md
@@ -1,6 +1,6 @@
# Array methods
-Arrays provide a lot of methods. To make things easier, in this chapter they are split into groups.
+Arrays provide a lot of methods. To make things easier, in this chapter, they are split into groups.
## Add/remove items
@@ -32,11 +32,11 @@ alert( arr.length ); // 3
The element was removed, but the array still has 3 elements, we can see that `arr.length == 3`.
-That's natural, because `delete obj.key` removes a value by the `key`. It's all it does. Fine for objects. But for arrays we usually want the rest of elements to shift and occupy the freed place. We expect to have a shorter array now.
+That's natural, because `delete obj.key` removes a value by the `key`. It's all it does. Fine for objects. But for arrays we usually want the rest of the elements to shift and occupy the freed place. We expect to have a shorter array now.
So, special methods should be used.
-The [arr.splice](mdn:js/Array/splice) method is a swiss army knife for arrays. It can do everything: insert, remove and replace elements.
+The [arr.splice](mdn:js/Array/splice) method is a Swiss army knife for arrays. It can do everything: insert, remove and replace elements.
The syntax is:
@@ -62,7 +62,7 @@ alert( arr ); // ["I", "JavaScript"]
Easy, right? Starting from the index `1` it removed `1` element.
-In the next example we remove 3 elements and replace them with the other two:
+In the next example, we remove 3 elements and replace them with the other two:
```js run
let arr = [*!*"I", "study", "JavaScript",*/!* "right", "now"];
@@ -84,7 +84,7 @@ let removed = arr.splice(0, 2);
alert( removed ); // "I", "study" <-- array of removed elements
```
-The `splice` method is also able to insert the elements without any removals. For that we need to set `deleteCount` to `0`:
+The `splice` method is also able to insert the elements without any removals. For that, we need to set `deleteCount` to `0`:
```js run
let arr = ["I", "study", "JavaScript"];
@@ -114,7 +114,7 @@ alert( arr ); // 1,2,3,4,5
### slice
-The method [arr.slice](mdn:js/Array/slice) is much simpler than similar-looking `arr.splice`.
+The method [arr.slice](mdn:js/Array/slice) is much simpler than the similar-looking `arr.splice`.
The syntax is:
@@ -124,7 +124,7 @@ arr.slice([start], [end])
It returns a new array copying to it all items from index `start` to `end` (not including `end`). Both `start` and `end` can be negative, in that case position from array end is assumed.
-It's similar to a string method `str.slice`, but instead of substrings it makes subarrays.
+It's similar to a string method `str.slice`, but instead of substrings, it makes subarrays.
For instance:
@@ -206,7 +206,7 @@ The [arr.forEach](mdn:js/Array/forEach) method allows to run a function for ever
The syntax:
```js
arr.forEach(function(item, index, array) {
- // ... do something with item
+ // ... do something with an item
});
```
@@ -239,7 +239,7 @@ The methods [arr.indexOf](mdn:js/Array/indexOf) and [arr.includes](mdn:js/Array/
- `arr.indexOf(item, from)` -- looks for `item` starting from index `from`, and returns the index where it was found, otherwise `-1`.
- `arr.includes(item, from)` -- looks for `item` starting from index `from`, returns `true` if found.
-Usually these methods are used with only one argument: the `item` to search. By default, the search is from the beginning.
+Usually, these methods are used with only one argument: the `item` to search. By default, the search is from the beginning.
For instance:
@@ -255,7 +255,7 @@ alert( arr.includes(1) ); // true
Please note that `indexOf` uses the strict equality `===` for comparison. So, if we look for `false`, it finds exactly `false` and not the zero.
-If we want to check if `item` exists in the array, and don't need the exact index, then `arr.includes` is preferred.
+If we want to check if `item` exists in the array and don't need the index, then `arr.includes` is preferred.
The method [arr.lastIndexOf](mdn:js/Array/lastIndexOf) is the same as `indexOf`, but looks for from right to left.
@@ -274,12 +274,12 @@ const arr = [NaN];
alert( arr.indexOf(NaN) ); // -1 (wrong, should be 0)
alert( arr.includes(NaN) );// true (correct)
```
-That's because `includes` was added to JavaScript much later and uses the more up to date comparison algorithm internally.
+That's because `includes` was added to JavaScript much later and uses the more up-to-date comparison algorithm internally.
````
### find and findIndex/findLastIndex
-Imagine we have an array of objects. How do we find an object with the specific condition?
+Imagine we have an array of objects. How do we find an object with a specific condition?
Here the [arr.find(fn)](mdn:js/Array/find) method comes in handy.
@@ -297,7 +297,7 @@ The function is called for elements of the array, one after another:
- `index` is its index.
- `array` is the array itself.
-If it returns `true`, the search is stopped, the `item` is returned. If nothing found, `undefined` is returned.
+If it returns `true`, the search is stopped, the `item` is returned. If nothing is found, `undefined` is returned.
For example, we have an array of users, each with the fields `id` and `name`. Let's find the one with `id == 1`:
@@ -313,11 +313,11 @@ let user = users.find(item => item.id == 1);
alert(user.name); // John
```
-In real life arrays of objects is a common thing, so the `find` method is very useful.
+In real life, arrays of objects are a common thing, so the `find` method is very useful.
Note that in the example we provide to `find` the function `item => item.id == 1` with one argument. That's typical, other arguments of this function are rarely used.
-The [arr.findIndex](mdn:js/Array/findIndex) method has the same syntax, but returns the index where the element was found instead of the element itself. The value of `-1` is returned if nothing is found.
+The [arr.findIndex](mdn:js/Array/findIndex) method has the same syntax but returns the index where the element was found instead of the element itself. The value of `-1` is returned if nothing is found.
The [arr.findLastIndex](mdn:js/Array/findLastIndex) method is like `findIndex`, but searches from right to left, similar to `lastIndexOf`.
@@ -338,8 +338,6 @@ alert(users.findIndex(user => user.name == 'John')); // 0
alert(users.findLastIndex(user => user.name == 'John')); // 3
```
-
-
### filter
The `find` method looks for a single (first) element that makes the function return `true`.
@@ -452,11 +450,11 @@ alert(arr); // *!*1, 2, 15*/!*
Now it works as intended.
-Let's step aside and think what's happening. The `arr` can be array of anything, right? It may contain numbers or strings or objects or whatever. We have a set of *some items*. To sort it, we need an *ordering function* that knows how to compare its elements. The default is a string order.
+Let's step aside and think about what's happening. The `arr` can be an array of anything, right? It may contain numbers or strings or objects or whatever. We have a set of *some items*. To sort it, we need an *ordering function* that knows how to compare its elements. The default is a string order.
The `arr.sort(fn)` method implements a generic sorting algorithm. We don't need to care how it internally works (an optimized [quicksort](https://en.wikipedia.org/wiki/Quicksort) or [Timsort](https://en.wikipedia.org/wiki/Timsort) most of the time). It will walk the array, compare its elements using the provided function and reorder them, all we need is to provide the `fn` which does the comparison.
-By the way, if we ever want to know which elements are compared -- nothing prevents from alerting them:
+By the way, if we ever want to know which elements are compared -- nothing prevents us from alerting them:
```js run
[1, -2, 15, 2, 0, 8].sort(function(a, b) {
@@ -528,7 +526,7 @@ Here's the situation from real life. We are writing a messaging app, and the per
The [str.split(delim)](mdn:js/String/split) method does exactly that. It splits the string into an array by the given delimiter `delim`.
-In the example below, we split by a comma followed by space:
+In the example below, we split by a comma followed by a space:
```js run
let names = 'Bilbo, Gandalf, Nazgul';
@@ -595,9 +593,9 @@ Arguments:
- `index` -- is its position.
- `array` -- is the array.
-As function is applied, the result of the previous function call is passed to the next one as the first argument.
+As the function is applied, the result of the previous function call is passed to the next one as the first argument.
-So, the first argument is essentially the accumulator that stores the combined result of all previous executions. And at the end it becomes the result of `reduce`.
+So, the first argument is essentially the accumulator that stores the combined result of all previous executions. And at the end, it becomes the result of `reduce`.
Sounds complicated?
@@ -666,7 +664,7 @@ arr.reduce((sum, current) => sum + current);
So it's advised to always specify the initial value.
-The method [arr.reduceRight](mdn:js/Array/reduceRight) does the same, but goes from right to left.
+The method [arr.reduceRight](mdn:js/Array/reduceRight) does the same but goes from right to left.
## Array.isArray
@@ -691,7 +689,7 @@ alert(Array.isArray([])); // true
Almost all array methods that call functions -- like `find`, `filter`, `map`, with a notable exception of `sort`, accept an optional additional parameter `thisArg`.
-That parameter is not explained in the sections above, because it's rarely used. But for completeness we have to cover it.
+That parameter is not explained in the sections above, because it's rarely used. But for completeness, we have to cover it.
Here's the full syntax of these methods:
@@ -751,7 +749,7 @@ A cheat sheet of array methods:
- `concat(...items)` -- returns a new array: copies all members of the current one and adds `items` to it. If any of `items` is an array, then its elements are taken.
- To search among elements:
- - `indexOf/lastIndexOf(item, pos)` -- look for `item` starting from position `pos`, return the index or `-1` if not found.
+ - `indexOf/lastIndexOf(item, pos)` -- look for `item` starting from position `pos`, and return the index or `-1` if not found.
- `includes(value)` -- returns `true` if the array has `value`, otherwise `false`.
- `find/filter(func)` -- filter elements through the function, return first/all values that make it return `true`.
- `findIndex` is like `find`, but returns the index instead of a value.
@@ -797,7 +795,7 @@ These methods are the most used ones, they cover 99% of use cases. But there are
For the full list, see the [manual](mdn:js/Array).
-From the first sight it may seem that there are so many methods, quite difficult to remember. But actually that's much easier.
+At first sight, it may seem that there are so many methods, quite difficult to remember. But actually, that's much easier.
Look through the cheat sheet just to be aware of them. Then solve the tasks of this chapter to practice, so that you have experience with array methods.
diff --git a/1-js/05-data-types/06-iterable/article.md b/1-js/05-data-types/06-iterable/article.md
index 76f74036c..e2c0d4f97 100644
--- a/1-js/05-data-types/06-iterable/article.md
+++ b/1-js/05-data-types/06-iterable/article.md
@@ -174,7 +174,7 @@ When we use JavaScript for practical tasks in a browser or any other environment
For instance, strings are both iterable (`for..of` works on them) and array-like (they have numeric indexes and `length`).
-But an iterable may be not array-like. And vice versa an array-like may be not iterable.
+But an iterable may not be array-like. And vice versa an array-like may not be iterable.
For example, the `range` in the example above is iterable, but not array-like, because it does not have indexed properties and `length`.
diff --git a/1-js/05-data-types/07-map-set/article.md b/1-js/05-data-types/07-map-set/article.md
index 354070888..37f5e48c2 100644
--- a/1-js/05-data-types/07-map-set/article.md
+++ b/1-js/05-data-types/07-map-set/article.md
@@ -10,17 +10,17 @@ But that's not enough for real life. That's why `Map` and `Set` also exist.
## Map
-[Map](mdn:js/Map) is a collection of keyed data items, just like an `Object`. But the main difference is that `Map` allows keys of any type.
+[Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) is a collection of keyed data items, just like an `Object`. But the main difference is that `Map` allows keys of any type.
Methods and properties are:
-- `new Map()` -- creates the map.
-- [`map.set(key, value)`](mdn:js/Map/set) -- stores the value by the key.
-- [`map.get(key)`](mdn:js/Map/get) -- returns the value by the key, `undefined` if `key` doesn't exist in map.
-- [`map.has(key)`](mdn:js/Map/has) -- returns `true` if the `key` exists, `false` otherwise.
-- [`map.delete(key)`](mdn:js/Map/delete) -- removes the value by the key.
-- [`map.clear()`](mdn:js/Map/clear) -- removes everything from the map.
-- [`map.size`](mdn:js/Map/size) -- returns the current element count.
+- [`new Map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/Map) -- creates the map.
+- [`map.set(key, value)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/set) -- stores the value by the key.
+- [`map.get(key)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/get) -- returns the value by the key, `undefined` if `key` doesn't exist in map.
+- [`map.has(key)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/has) -- returns `true` if the `key` exists, `false` otherwise.
+- [`map.delete(key)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/delete) -- removes the element (the key/value pair) by the key.
+- [`map.clear()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/clear) -- removes everything from the map.
+- [`map.size`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/size) -- returns the current element count.
For instance:
@@ -100,14 +100,13 @@ map.set('1', 'str1')
```
````
-
## Iteration over Map
For looping over a `map`, there are 3 methods:
-- [`map.keys()`](mdn:js/Map/keys) -- returns an iterable for keys,
-- [`map.values()`](mdn:js/Map/values) -- returns an iterable for values,
-- [`map.entries()`](mdn:js/Map/entries) -- returns an iterable for entries `[key, value]`, it's used by default in `for..of`.
+- [`map.keys()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/keys) -- returns an iterable for keys,
+- [`map.values()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/values) -- returns an iterable for values,
+- [`map.entries()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries) -- returns an iterable for entries `[key, value]`, it's used by default in `for..of`.
For instance:
@@ -162,7 +161,7 @@ let map = new Map([
alert( map.get('1') ); // str1
```
-If we have a plain object, and we'd like to create a `Map` from it, then we can use built-in method [Object.entries(obj)](mdn:js/Object/entries) that returns an array of key/value pairs for an object exactly in that format.
+If we have a plain object, and we'd like to create a `Map` from it, then we can use built-in method [Object.entries(obj)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries) that returns an array of key/value pairs for an object exactly in that format.
So we can create a map from an object like this:
@@ -233,16 +232,16 @@ That's the same, because `Object.fromEntries` expects an iterable object as the
## Set
-A `Set` is a special type collection - "set of values" (without keys), where each value may occur only once.
+A [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) is a special type collection - "set of values" (without keys), where each value may occur only once.
Its main methods are:
-- `new Set(iterable)` -- creates the set, and if an `iterable` object is provided (usually an array), copies values from it into the set.
-- [`set.add(value)`](mdn:js/Set/add) -- adds a value, returns the set itself.
-- [`set.delete(value)`](mdn:js/Set/delete) -- removes the value, returns `true` if `value` existed at the moment of the call, otherwise `false`.
-- [`set.has(value)`](mdn:js/Set/has) -- returns `true` if the value exists in the set, otherwise `false`.
-- [`set.clear()`](mdn:js/Set/clear) -- removes everything from the set.
-- [`set.size`](mdn:js/Set/size) -- is the elements count.
+- [`new Set([iterable])`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set) -- creates the set, and if an `iterable` object is provided (usually an array), copies values from it into the set.
+- [`set.add(value)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/add) -- adds a value, returns the set itself.
+- [`set.delete(value)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/delete) -- removes the value, returns `true` if `value` existed at the moment of the call, otherwise `false`.
+- [`set.has(value)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/has) -- returns `true` if the value exists in the set, otherwise `false`.
+- [`set.clear()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/clear) -- removes everything from the set.
+- [`set.size`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/size) -- is the elements count.
The main feature is that repeated calls of `set.add(value)` with the same value don't do anything. That's the reason why each value appears in a `Set` only once.
@@ -272,7 +271,7 @@ for (let user of set) {
}
```
-The alternative to `Set` could be an array of users, and the code to check for duplicates on every insertion using [arr.find](mdn:js/Array/find). But the performance would be much worse, because this method walks through the whole array checking every element. `Set` is much better optimized internally for uniqueness checks.
+The alternative to `Set` could be an array of users, and the code to check for duplicates on every insertion using [arr.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find). But the performance would be much worse, because this method walks through the whole array checking every element. `Set` is much better optimized internally for uniqueness checks.
## Iteration over Set
@@ -295,38 +294,38 @@ That's for compatibility with `Map` where the callback passed `forEach` has thre
The same methods `Map` has for iterators are also supported:
-- [`set.keys()`](mdn:js/Set/keys) -- returns an iterable object for values,
-- [`set.values()`](mdn:js/Set/values) -- same as `set.keys()`, for compatibility with `Map`,
-- [`set.entries()`](mdn:js/Set/entries) -- returns an iterable object for entries `[value, value]`, exists for compatibility with `Map`.
+- [`set.keys()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/keys) -- returns an iterable object for values,
+- [`set.values()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/values) -- same as `set.keys()`, for compatibility with `Map`,
+- [`set.entries()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/entries) -- returns an iterable object for entries `[value, value]`, exists for compatibility with `Map`.
## Summary
-`Map` -- is a collection of keyed values.
+[`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) -- is a collection of keyed values.
Methods and properties:
-- `new Map([iterable])` -- creates the map, with optional `iterable` (e.g. array) of `[key,value]` pairs for initialization.
-- [`map.set(key, value)`](mdn:js/Map/set) -- stores the value by the key, returns the map itself.
-- [`map.get(key)`](mdn:js/Map/get) -- returns the value by the key, `undefined` if `key` doesn't exist in map.
-- [`map.has(key)`](mdn:js/Map/has) -- returns `true` if the `key` exists, `false` otherwise.
-- [`map.delete(key)`](mdn:js/Map/delete) -- removes the value by the key, returns `true` if `key` existed at the moment of the call, otherwise `false`.
-- [`map.clear()`](mdn:js/Map/clear) -- removes everything from the map.
-- [`map.size`](mdn:js/Map/size) -- returns the current element count.
+- [`new Map([iterable])`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/Map) -- creates the map, with optional `iterable` (e.g. array) of `[key,value]` pairs for initialization.
+- [`map.set(key, value)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/set) -- stores the value by the key, returns the map itself.
+- [`map.get(key)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/get) -- returns the value by the key, `undefined` if `key` doesn't exist in map.
+- [`map.has(key)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/has) -- returns `true` if the `key` exists, `false` otherwise.
+- [`map.delete(key)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/delete) -- removes the element by the key, returns `true` if `key` existed at the moment of the call, otherwise `false`.
+- [`map.clear()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/clear) -- removes everything from the map.
+- [`map.size`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/size) -- returns the current element count.
The differences from a regular `Object`:
- Any keys, objects can be keys.
- Additional convenient methods, the `size` property.
-`Set` -- is a collection of unique values.
+[`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) -- is a collection of unique values.
Methods and properties:
-- `new Set([iterable])` -- creates the set, with optional `iterable` (e.g. array) of values for initialization.
-- [`set.add(value)`](mdn:js/Set/add) -- adds a value (does nothing if `value` exists), returns the set itself.
-- [`set.delete(value)`](mdn:js/Set/delete) -- removes the value, returns `true` if `value` existed at the moment of the call, otherwise `false`.
-- [`set.has(value)`](mdn:js/Set/has) -- returns `true` if the value exists in the set, otherwise `false`.
-- [`set.clear()`](mdn:js/Set/clear) -- removes everything from the set.
-- [`set.size`](mdn:js/Set/size) -- is the elements count.
+- [`new Set([iterable])`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set) -- creates the set, with optional `iterable` (e.g. array) of values for initialization.
+- [`set.add(value)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/add) -- adds a value (does nothing if `value` exists), returns the set itself.
+- [`set.delete(value)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/delete) -- removes the value, returns `true` if `value` existed at the moment of the call, otherwise `false`.
+- [`set.has(value)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/has) -- returns `true` if the value exists in the set, otherwise `false`.
+- [`set.clear()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/clear) -- removes everything from the set.
+- [`set.size`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/size) -- is the elements count.
Iteration over `Map` and `Set` is always in the insertion order, so we can't say that these collections are unordered, but we can't reorder elements or directly get an element by its number.
diff --git a/1-js/05-data-types/08-weakmap-weakset/article.md b/1-js/05-data-types/08-weakmap-weakset/article.md
index 8d5a86981..9795017d4 100644
--- a/1-js/05-data-types/08-weakmap-weakset/article.md
+++ b/1-js/05-data-types/08-weakmap-weakset/article.md
@@ -1,8 +1,10 @@
+
# WeakMap and WeakSet
As we know from the chapter <info:garbage-collection>, JavaScript engine keeps a value in memory while it is "reachable" and can potentially be used.
For instance:
+
```js
let john = { name: "John" };
@@ -54,13 +56,13 @@ john = null; // overwrite the reference
*/!*
```
-`WeakMap` is fundamentally different in this aspect. It doesn't prevent garbage-collection of key objects.
+[`WeakMap`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap) is fundamentally different in this aspect. It doesn't prevent garbage-collection of key objects.
Let's see what it means on examples.
## WeakMap
-The first difference between `Map` and `WeakMap` is that keys must be objects, not primitive values:
+The first difference between [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [`WeakMap`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap) is that keys must be objects, not primitive values:
```js run
let weakMap = new WeakMap();
@@ -94,10 +96,10 @@ Compare it with the regular `Map` example above. Now if `john` only exists as th
`WeakMap` has only the following methods:
-- `weakMap.get(key)`
-- `weakMap.set(key, value)`
-- `weakMap.delete(key)`
-- `weakMap.has(key)`
+- [`weakMap.set(key, value)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/set)
+- [`weakMap.get(key)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/get)
+- [`weakMap.delete(key)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/delete)
+- [`weakMap.has(key)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/has)
Why such a limitation? That's for technical reasons. If an object has lost all other references (like `john` in the code above), then it is to be garbage-collected automatically. But technically it's not exactly specified *when the cleanup happens*.
@@ -182,6 +184,7 @@ function process(obj) {
let result = /* calculations of the result for */ obj;
cache.set(obj, result);
+ return result;
}
return cache.get(obj);
@@ -221,6 +224,7 @@ function process(obj) {
let result = /* calculate the result for */ obj;
cache.set(obj, result);
+ return result;
}
return cache.get(obj);
@@ -242,11 +246,11 @@ obj = null;
## WeakSet
-`WeakSet` behaves similarly:
+[`WeakSet`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet) behaves similarly:
- It is analogous to `Set`, but we may only add objects to `WeakSet` (not primitives).
- An object exists in the set while it is reachable from somewhere else.
-- Like `Set`, it supports `add`, `has` and `delete`, but not `size`, `keys()` and no iterations.
+- Like `Set`, it supports [`add`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Weakset/add), [`has`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Weakset/has) and [`delete`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Weakset/delete), but not `size`, `keys()` and no iterations.
Being "weak", it also serves as additional storage. But not for arbitrary data, rather for "yes/no" facts. A membership in `WeakSet` may mean something about the object.
@@ -280,9 +284,9 @@ The most notable limitation of `WeakMap` and `WeakSet` is the absence of iterati
## Summary
-`WeakMap` is `Map`-like collection that allows only objects as keys and removes them together with associated value once they become inaccessible by other means.
+[`WeakMap`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap) is `Map`-like collection that allows only objects as keys and removes them together with associated value once they become inaccessible by other means.
-`WeakSet` is `Set`-like collection that stores only objects and removes them once they become inaccessible by other means.
+[`WeakSet`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet) is `Set`-like collection that stores only objects and removes them once they become inaccessible by other means.
Their main advantages are that they have weak reference to objects, so they can easily be removed by garbage collector.
diff --git a/1-js/05-data-types/10-destructuring-assignment/article.md b/1-js/05-data-types/10-destructuring-assignment/article.md
index 41e36db2c..0c52741d1 100644
--- a/1-js/05-data-types/10-destructuring-assignment/article.md
+++ b/1-js/05-data-types/10-destructuring-assignment/article.md
@@ -5,18 +5,18 @@ The two most used data structures in JavaScript are `Object` and `Array`.
- Objects allow us to create a single entity that stores data items by key.
- Arrays allow us to gather data items into an ordered list.
-Although, when we pass those to a function, it may need not be an object/array as a whole. It may need individual pieces.
+However, when we pass these to a function, we may not need all of it. The function might only require certain elements or properties.
*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes that's more convenient.
-Destructuring also works great with complex functions that have a lot of parameters, default values, and so on. Soon we'll see that.
+Destructuring also works well with complex functions that have a lot of parameters, default values, and so on. Soon we'll see that.
## Array destructuring
Here's an example of how an array is destructured into variables:
```js
-// we have an array with the name and surname
+// we have an array with a name and surname
let arr = ["John", "Smith"]
*!*
@@ -40,10 +40,10 @@ alert(firstName); // John
alert(surname); // Smith
```
-As you can see, the syntax is simple. There are several peculiar details though. Let's see more examples, to better understand it.
+As you can see, the syntax is simple. There are several peculiar details though. Let's see more examples to understand it better.
````smart header="\"Destructuring\" does not mean \"destructive\"."
-It's called "destructuring assignment," because it "destructurizes" by copying items into variables. But the array itself is not modified.
+It's called "destructuring assignment," because it "destructurizes" by copying items into variables. However, the array itself is not modified.
It's just a shorter way to write:
```js
@@ -65,7 +65,7 @@ let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic
alert( title ); // Consul
```
-In the code above, the second element of the array is skipped, the third one is assigned to `title`, and the rest of the array items is also skipped (as there are no variables for them).
+In the code above, the second element of the array is skipped, the third one is assigned to `title`, and the rest of the array items are also skipped (as there are no variables for them).
````
````smart header="Works with any iterable on the right-side"
@@ -95,9 +95,9 @@ alert(user.surname); // Smith
````
````smart header="Looping with .entries()"
-In the previous chapter we saw the [Object.entries(obj)](mdn:js/Object/entries) method.
+In the previous chapter, we saw the [Object.entries(obj)](mdn:js/Object/entries) method.
-We can use it with destructuring to loop over keys-and-values of an object:
+We can use it with destructuring to loop over the keys-and-values of an object:
```js run
let user = {
@@ -105,7 +105,7 @@ let user = {
age: 30
};
-// loop over keys-and-values
+// loop over the keys-and-values
*!*
for (let [key, value] of Object.entries(user)) {
*/!*
@@ -169,7 +169,7 @@ If we'd like also to gather all that follows -- we can add one more parameter th
let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Consul", "of the Roman Republic"*/!*];
*!*
-// rest is array of items, starting from the 3rd one
+// rest is an array of items, starting from the 3rd one
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2
@@ -187,7 +187,7 @@ let [name1, name2, *!*...titles*/!*] = ["Julius", "Caesar", "Consul", "of the Ro
### Default values
-If the array is shorter than the list of variables at the left, there'll be no errors. Absent values are considered undefined:
+If the array is shorter than the list of variables on the left, there will be no errors. Absent values are considered undefined:
```js run
*!*
@@ -418,7 +418,7 @@ alert( title ); // Menu
## Nested destructuring
-If an object or an array contain other nested objects and arrays, we can use more complex left-side patterns to extract deeper portions.
+If an object or an array contains other nested objects and arrays, we can use more complex left-side patterns to extract deeper portions.
In the code below `options` has another object in the property `size` and an array in the property `items`. The pattern on the left side of the assignment has the same structure to extract values from them:
@@ -449,7 +449,7 @@ alert(item1); // Cake
alert(item2); // Donut
```
-All properties of `options` object except `extra` that is absent in the left part, are assigned to corresponding variables:
+All properties of `options` object except `extra` which is absent in the left part, are assigned to corresponding variables:
@@ -459,9 +459,9 @@ Note that there are no variables for `size` and `items`, as we take their conten
## Smart function parameters
-There are times when a function has many parameters, most of which are optional. That's especially true for user interfaces. Imagine a function that creates a menu. It may have a width, a height, a title, items list and so on.
+There are times when a function has many parameters, most of which are optional. That's especially true for user interfaces. Imagine a function that creates a menu. It may have a width, a height, a title, an item list and so on.
-Here's a bad way to write such function:
+Here's a bad way to write such a function:
```js
function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
@@ -469,7 +469,7 @@ function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
}
```
-In real-life, the problem is how to remember the order of arguments. Usually IDEs try to help us, especially if the code is well-documented, but still... Another problem is how to call a function when most parameters are ok by default.
+In real-life, the problem is how to remember the order of arguments. Usually, IDEs try to help us, especially if the code is well-documented, but still... Another problem is how to call a function when most parameters are ok by default.
Like this?
@@ -534,7 +534,7 @@ function({
})
```
-Then, for an object of parameters, there will be a variable `varName` for property `incomingProperty`, with `defaultValue` by default.
+Then, for an object of parameters, there will be a variable `varName` for the property `incomingProperty`, with `defaultValue` by default.
Please note that such destructuring assumes that `showMenu()` does have an argument. If we want all values by default, then we should specify an empty object:
@@ -561,7 +561,7 @@ In the code above, the whole arguments object is `{}` by default, so there's alw
- Destructuring assignment allows for instantly mapping an object or array onto many variables.
- The full object syntax:
```js
- let {prop : varName = default, ...rest} = object
+ let {prop : varName = defaultValue, ...rest} = object
```
This means that property `prop` should go into the variable `varName` and, if no such property exists, then the `default` value should be used.
@@ -571,9 +571,9 @@ In the code above, the whole arguments object is `{}` by default, so there's alw
- The full array syntax:
```js
- let [item1 = default, item2, ...rest] = array
+ let [item1 = defaultValue, item2, ...rest] = array
```
- The first item goes to `item1`; the second goes into `item2`, all the rest makes the array `rest`.
+ The first item goes to `item1`; the second goes into `item2`, and all the rest makes the array `rest`.
- It's possible to extract data from nested arrays/objects, for that the left side must have the same structure as the right one.
diff --git a/1-js/05-data-types/11-date/article.md b/1-js/05-data-types/11-date/article.md
index 2266c0779..6958a3a97 100644
--- a/1-js/05-data-types/11-date/article.md
+++ b/1-js/05-data-types/11-date/article.md
@@ -376,7 +376,7 @@ for (let i = 0; i < 10; i++) {
```warn header="Be careful doing microbenchmarking"
Modern JavaScript engines perform many optimizations. They may tweak results of "artificial tests" compared to "normal usage", especially when we benchmark something very small, such as how an operator works, or a built-in function. So if you seriously want to understand performance, then please study how the JavaScript engine works. And then you probably won't need microbenchmarks at all.
-The great pack of articles about V8 can be found at <http://mrale.ph>.
+The great pack of articles about V8 can be found at <https://mrale.ph>.
```
## Date.parse from a string
diff --git a/1-js/05-data-types/12-json/article.md b/1-js/05-data-types/12-json/article.md
index 503745356..133ffb353 100644
--- a/1-js/05-data-types/12-json/article.md
+++ b/1-js/05-data-types/12-json/article.md
@@ -405,7 +405,7 @@ To decode a JSON-string, we need another method named [JSON.parse](mdn:js/JSON/p
The syntax:
```js
-let value = JSON.parse(str, [reviver]);
+let value = JSON.parse(str[, reviver]);
```
str
@@ -451,7 +451,7 @@ let json = `{
Besides, JSON does not support comments. Adding a comment to JSON makes it invalid.
-There's another format named [JSON5](http://json5.org/), which allows unquoted keys, comments etc. But this is a standalone library, not in the specification of the language.
+There's another format named [JSON5](https://json5.org/), which allows unquoted keys, comments etc. But this is a standalone library, not in the specification of the language.
The regular JSON is that strict not because its developers are lazy, but to allow easy, reliable and very fast implementations of the parsing algorithm.
diff --git a/1-js/06-advanced-functions/02-rest-parameters-spread/article.md b/1-js/06-advanced-functions/02-rest-parameters-spread/article.md
index c63fe70cd..dbdfbd6c0 100644
--- a/1-js/06-advanced-functions/02-rest-parameters-spread/article.md
+++ b/1-js/06-advanced-functions/02-rest-parameters-spread/article.md
@@ -23,7 +23,7 @@ function sum(a, b) {
alert( sum(1, 2, 3, 4, 5) );
```
-There will be no error because of "excessive" arguments. But of course in the result only the first two will be counted.
+There will be no error because of "excessive" arguments. But of course in the result only the first two will be counted, so the result in the code above is `3`.
The rest of the parameters can be included in the function definition by using three dots `...` followed by the name of the array that will contain them. The dots literally mean "gather the remaining parameters into an array".
diff --git a/1-js/06-advanced-functions/04-var/article.md b/1-js/06-advanced-functions/04-var/article.md
index 1579afb62..28d7a76ec 100644
--- a/1-js/06-advanced-functions/04-var/article.md
+++ b/1-js/06-advanced-functions/04-var/article.md
@@ -58,7 +58,7 @@ alert(test); // ReferenceError: test is not defined
The same thing for loops: `var` cannot be block- or loop-local:
-```js
+```js run
for (var i = 0; i < 10; i++) {
var one = 1;
// ...
@@ -170,7 +170,7 @@ That's best demonstrated with an example:
```js run
function sayHi() {
- alert(phrase);
+ alert(phrase);
*!*
var phrase = "Hello";
diff --git a/1-js/06-advanced-functions/06-function-object/article.md b/1-js/06-advanced-functions/06-function-object/article.md
index c84f4e52f..8419ae763 100644
--- a/1-js/06-advanced-functions/06-function-object/article.md
+++ b/1-js/06-advanced-functions/06-function-object/article.md
@@ -326,7 +326,7 @@ welcome(); // Hello, Guest (nested call works)
Now it works, because the name `"func"` is function-local. It is not taken from outside (and not visible there). The specification guarantees that it will always reference the current function.
-The outer code still has its variable `sayHi` or `welcome`. And `func` is an "internal function name", the way for the function to can call itself reliably.
+The outer code still has its variable `sayHi` or `welcome`. And `func` is an "internal function name", the way for the function to call itself reliably.
```smart header="There's no such thing for Function Declaration"
The "internal name" feature described here is only available for Function Expressions, not for Function Declarations. For Function Declarations, there is no syntax for adding an "internal" name.
diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/article.md b/1-js/06-advanced-functions/08-settimeout-setinterval/article.md
index 5a40238b1..f96959988 100644
--- a/1-js/06-advanced-functions/08-settimeout-setinterval/article.md
+++ b/1-js/06-advanced-functions/08-settimeout-setinterval/article.md
@@ -27,7 +27,7 @@ Usually, that's a function. For historical reasons, a string of code can be pass
: The delay before run, in milliseconds (1000 ms = 1 second), by default 0.
`arg1`, `arg2`...
-: Arguments for the function (not supported in IE9-)
+: Arguments for the function
For instance, this code calls `sayHi()` after one second:
diff --git a/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md b/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md
index 403107ca6..4a381c0b4 100644
--- a/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md
+++ b/1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md
@@ -1,5 +1,5 @@
-The error occurs because `ask` gets functions `loginOk/loginFail` without the object.
+The error occurs because `askPassword` gets functions `loginOk/loginFail` without the object.
When it calls them, they naturally assume `this=undefined`.
diff --git a/1-js/06-advanced-functions/10-bind/article.md b/1-js/06-advanced-functions/10-bind/article.md
index 9d705cdcd..7a6e47b90 100644
--- a/1-js/06-advanced-functions/10-bind/article.md
+++ b/1-js/06-advanced-functions/10-bind/article.md
@@ -125,7 +125,7 @@ funcUser(); // John
*/!*
```
-Here `func.bind(user)` as a "bound variant" of `func`, with fixed `this=user`.
+Here `func.bind(user)` is a "bound variant" of `func`, with fixed `this=user`.
All arguments are passed to the original `func` "as is", for instance:
@@ -202,7 +202,7 @@ for (let key in user) {
}
```
-JavaScript libraries also provide functions for convenient mass binding , e.g. [_.bindAll(object, methodNames)](http://lodash.com/docs#bindAll) in lodash.
+JavaScript libraries also provide functions for convenient mass binding , e.g. [_.bindAll(object, methodNames)](https://lodash.com/docs#bindAll) in lodash.
````
## Partial functions
diff --git a/1-js/07-object-properties/01-property-descriptors/article.md b/1-js/07-object-properties/01-property-descriptors/article.md
index bdc693418..0a945b377 100644
--- a/1-js/07-object-properties/01-property-descriptors/article.md
+++ b/1-js/07-object-properties/01-property-descriptors/article.md
@@ -123,7 +123,7 @@ user.name = "Pete"; // Error: Cannot assign to read only property 'name'
Now no one can change the name of our user, unless they apply their own `defineProperty` to override ours.
```smart header="Errors appear only in strict mode"
-In the non-strict mode, no errors occur when writing to non-writable properties and such. But the operation still won't succeed. Flag-violating actions are just silently ignored in non-strict.
+In non-strict mode, no errors occur when writing to non-writable properties and such. But the operation still won't succeed. Flag-violating actions are just silently ignored in non-strict.
```
Here's the same example, but the property is created from scratch:
diff --git a/1-js/08-prototypes/04-prototype-methods/article.md b/1-js/08-prototypes/04-prototype-methods/article.md
index 71f118e1b..9c5f1eb3d 100644
--- a/1-js/08-prototypes/04-prototype-methods/article.md
+++ b/1-js/08-prototypes/04-prototype-methods/article.md
@@ -14,7 +14,7 @@ The only usage of `__proto__`, that's not frowned upon, is as a property when cr
Although, there's a special method for this too:
-- [Object.create(proto, [descriptors])](mdn:js/Object/create) -- creates an empty object with given `proto` as `[[Prototype]]` and optional property descriptors.
+- [Object.create(proto[, descriptors])](mdn:js/Object/create) -- creates an empty object with given `proto` as `[[Prototype]]` and optional property descriptors.
For instance:
@@ -116,7 +116,7 @@ alert(obj[key]); // [object Object], not "some value"!
Here, if the user types in `__proto__`, the assignment in line 4 is ignored!
-That could surely be surprising for a non-developer, but pretty understandable for us. The `__proto__` property is special: it must be either an object or `null`. A string can not become a prototype. That's why an assignment a string to `__proto__` is ignored.
+That could surely be surprising for a non-developer, but pretty understandable for us. The `__proto__` property is special: it must be either an object or `null`. A string can not become a prototype. That's why assigning a string to `__proto__` is ignored.
But we didn't *intend* to implement such behavior, right? We want to store key/value pairs, and the key named `"__proto__"` was not properly saved. So that's a bug!
@@ -201,7 +201,7 @@ alert(Object.keys(chineseDictionary)); // hello,bye
- To create an object with the given prototype, use:
- literal syntax: `{ __proto__: ... }`, allows to specify multiple properties
- - or [Object.create(proto, [descriptors])](mdn:js/Object/create), allows to specify property descriptors.
+ - or [Object.create(proto[, descriptors])](mdn:js/Object/create), allows to specify property descriptors.
The `Object.create` provides an easy way to shallow-copy an object with all descriptors:
diff --git a/1-js/10-error-handling/1-try-catch/article.md b/1-js/10-error-handling/1-try-catch/article.md
index a928da289..cad2e1a3e 100644
--- a/1-js/10-error-handling/1-try-catch/article.md
+++ b/1-js/10-error-handling/1-try-catch/article.md
@@ -632,7 +632,7 @@ For instance:
The role of the global handler `window.onerror` is usually not to recover the script execution -- that's probably impossible in case of programming errors, but to send the error message to developers.
-There are also web-services that provide error-logging for such cases, like <https://errorception.com> or <http://www.muscula.com>.
+There are also web-services that provide error-logging for such cases, like <https://muscula.com> or <https://www.sentry.io>.
They work like this:
diff --git a/1-js/10-error-handling/2-custom-errors/article.md b/1-js/10-error-handling/2-custom-errors/article.md
index 918289319..d28b07439 100644
--- a/1-js/10-error-handling/2-custom-errors/article.md
+++ b/1-js/10-error-handling/2-custom-errors/article.md
@@ -38,7 +38,7 @@ class Error {
Now let's inherit `ValidationError` from it and try it in action:
-```js run untrusted
+```js run
*!*
class ValidationError extends Error {
*/!*
diff --git a/1-js/11-async/02-promise-basics/article.md b/1-js/11-async/02-promise-basics/article.md
index 207fb2c8c..66d9538fc 100644
--- a/1-js/11-async/02-promise-basics/article.md
+++ b/1-js/11-async/02-promise-basics/article.md
@@ -46,7 +46,7 @@ Later we'll see how "fans" can subscribe to these changes.
Here's an example of a promise constructor and a simple executor function with "producing code" that takes time (via `setTimeout`):
-```js run
+```js
let promise = new Promise(function(resolve, reject) {
// the function is executed automatically when the promise is constructed
@@ -222,7 +222,7 @@ The idea of `finally` is to set up a handler for performing cleanup/finalizing a
E.g. stopping loading indicators, closing no longer needed connections, etc.
-Think of it as a party finisher. No matter was a party good or bad, how many friends were in it, we still need (or at least should) do a cleanup after it.
+Think of it as a party finisher. Irresepective of whether a party was good or bad, how many friends were in it, we still need (or at least should) do a cleanup after it.
The code may look like this:
diff --git a/1-js/11-async/03-promise-chaining/article.md b/1-js/11-async/03-promise-chaining/article.md
index aa6025401..a33ca258c 100644
--- a/1-js/11-async/03-promise-chaining/article.md
+++ b/1-js/11-async/03-promise-chaining/article.md
@@ -72,7 +72,7 @@ promise.then(function(result) {
});
```
-What we did here is just several handlers to one promise. They don't pass the result to each other; instead they process it independently.
+What we did here is just adding several handlers to one promise. They don't pass the result to each other; instead they process it independently.
Here's the picture (compare it with the chaining above):
diff --git a/1-js/11-async/06-promisify/article.md b/1-js/11-async/06-promisify/article.md
index 1d81b31a6..855678e5b 100644
--- a/1-js/11-async/06-promisify/article.md
+++ b/1-js/11-async/06-promisify/article.md
@@ -25,7 +25,7 @@ function loadScript(src, callback) {
The function loads a script with the given `src`, and then calls `callback(err)` in case of an error, or `callback(null, script)` in case of successful loading. That's a widespread agreement for using callbacks, we saw it before.
-Let's promisify it.
+Let's promisify it.
We'll make a new function `loadScriptPromise(src)`, that does the same (loads the script), but returns a promise instead of using callbacks.
@@ -124,7 +124,7 @@ For more exotic callback formats, like those without `err` at all: `callback(res
There are also modules with a bit more flexible promisification functions, e.g. [es6-promisify](https://github.com/digitaldesignlabs/es6-promisify). In Node.js, there's a built-in `util.promisify` function for that.
```smart
-Promisification is a great approach, especially when you use `async/await` (see the next chapter), but not a total replacement for callbacks.
+Promisification is a great approach, especially when you use `async/await` (covered later in the chapter <info:async-await>), but not a total replacement for callbacks.
Remember, a promise may have only one result, but a callback may technically be called many times.
diff --git a/1-js/11-async/08-async-await/04-promise-all-failure/solution.md b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md
new file mode 100644
index 000000000..9fda8e000
--- /dev/null
+++ b/1-js/11-async/08-async-await/04-promise-all-failure/solution.md
@@ -0,0 +1,113 @@
+
+The root of the problem is that `Promise.all` immediately rejects when one of its promises rejects, but it do nothing to cancel the other promises.
+
+In our case, the second query fails, so `Promise.all` rejects, and the `try...catch` block catches this error.Meanwhile, other promises are *not affected* - they independently continue their execution. In our case, the third query throws an error of its own after a bit of time. And that error is never caught, we can see it in the console.
+
+The problem is especially dangerous in server-side environments, such as Node.js, when an uncaught error may cause the process to crash.
+
+How to fix it?
+
+An ideal solution would be to cancel all unfinished queries when one of them fails. This way we avoid any potential errors.
+
+However, the bad news is that service calls (such as `database.query`) are often implemented by a 3rd-party library which doesn't support cancellation. Then there's no way to cancel a call.
+
+As an alternative, we can write our own wrapper function around `Promise.all` which adds a custom `then/catch` handler to each promise to track them: results are gathered and, if an error occurs, all subsequent promises are ignored.
+
+```js
+function customPromiseAll(promises) {
+ return new Promise((resolve, reject) => {
+ const results = [];
+ let resultsCount = 0;
+ let hasError = false; // we'll set it to true upon first error
+
+ promises.forEach((promise, index) => {
+ promise
+ .then(result => {
+ if (hasError) return; // ignore the promise if already errored
+ results[index] = result;
+ resultsCount++;
+ if (resultsCount === promises.length) {
+ resolve(results); // when all results are ready - successs
+ }
+ })
+ .catch(error => {
+ if (hasError) return; // ignore the promise if already errored
+ hasError = true; // wops, error!
+ reject(error); // fail with rejection
+ });
+ });
+ });
+}
+```
+
+This approach has an issue of its own - it's often undesirable to `disconnect()` when queries are still in the process.
+
+It may be important that all queries complete, especially if some of them make important updates.
+
+So we should wait until all promises are settled before going further with the execution and eventually disconnecting.
+
+Here's another implementation. It behaves similar to `Promise.all` - also resolves with the first error, but waits until all promises are settled.
+
+```js
+function customPromiseAllWait(promises) {
+ return new Promise((resolve, reject) => {
+ const results = new Array(promises.length);
+ let settledCount = 0;
+ let firstError = null;
+
+ promises.forEach((promise, index) => {
+ Promise.resolve(promise)
+ .then(result => {
+ results[index] = result;
+ })
+ .catch(error => {
+ if (firstError === null) {
+ firstError = error;
+ }
+ })
+ .finally(() => {
+ settledCount++;
+ if (settledCount === promises.length) {
+ if (firstError !== null) {
+ reject(firstError);
+ } else {
+ resolve(results);
+ }
+ }
+ });
+ });
+ });
+}
+```
+
+Now `await customPromiseAllWait(...)` will stall the execution until all queries are processed.
+
+This is a more reliable approach, as it guarantees a predictable execution flow.
+
+Lastly, if we'd like to process all errors, we can use either use `Promise.allSettled` or write a wrapper around it to gathers all errors in a single [AggregateError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError) object and rejects with it.
+
+```js
+// wait for all promises to settle
+// return results if no errors
+// throw AggregateError with all errors if any
+function allOrAggregateError(promises) {
+ return Promise.allSettled(promises).then(results => {
+ const errors = [];
+ const values = [];
+
+ results.forEach((res, i) => {
+ if (res.status === 'fulfilled') {
+ values[i] = res.value;
+ } else {
+ errors.push(res.reason);
+ }
+ });
+
+ if (errors.length > 0) {
+ throw new AggregateError(errors, 'One or more promises failed');
+ }
+
+ return values;
+ });
+}
+```
diff --git a/1-js/11-async/08-async-await/04-promise-all-failure/task.md b/1-js/11-async/08-async-await/04-promise-all-failure/task.md
new file mode 100644
index 000000000..74571c43e
--- /dev/null
+++ b/1-js/11-async/08-async-await/04-promise-all-failure/task.md
@@ -0,0 +1,79 @@
+
+# Dangerous Promise.all
+
+`Promise.all` is a great way to parallelize multiple operations. It's especially useful when we need to make parallel requests to multiple services.
+
+However, there's a hidden danger. We'll see an example in this task and explore how to avoid it.
+
+Let's say we have a connection to a remote service, such as a database.
+
+There're two functions: `connect()` and `disconnect()`.
+
+When connected, we can send requests using `database.query(...)` - an async function which usually returns the result but also may throw an error.
+
+Here's a simple implementation:
+
+```js
+let database;
+
+function connect() {
+ database = {
+ async query(isOk) {
+ if (!isOk) throw new Error('Query failed');
+ }
+ };
+}
+
+function disconnect() {
+ database = null;
+}
+
+// intended usage:
+// connect()
+// ...
+// database.query(true) to emulate a successful call
+// database.query(false) to emulate a failed call
+// ...
+// disconnect()
+```
+
+Now here's the problem.
+
+We wrote the code to connect and send 3 queries in parallel (all of them take different time, e.g. 100, 200 and 300ms), then disconnect:
+
+```js
+// Helper function to call async function `fn` after `ms` milliseconds
+function delay(fn, ms) {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => fn().then(resolve, reject), ms);
+ });
+}
+
+async function run() {
+ connect();
+
+ try {
+ await Promise.all([
+ // these 3 parallel jobs take different time: 100, 200 and 300 ms
+ // we use the `delay` helper to achieve this effect
+*!*
+ delay(() => database.query(true), 100),
+ delay(() => database.query(false), 200),
+ delay(() => database.query(false), 300)
+*/!*
+ ]);
+ } catch(error) {
+ console.log('Error handled (or was it?)');
+ }
+
+ disconnect();
+}
+
+run();
+```
+
+Two of these queries happen to be unsuccessful, but we're smart enough to wrap the `Promise.all` call into a `try..catch` block.
+
+However, this doesn't help! This script actually leads to an uncaught error in console!
+
+Why? How to avoid it?
\ No newline at end of file
diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md
index 5267d0dfd..5ad70d151 100644
--- a/1-js/13-modules/01-modules-intro/article.md
+++ b/1-js/13-modules/01-modules-intro/article.md
@@ -9,8 +9,8 @@ But eventually scripts became more and more complex, so the community invented a
To name some (for historical reasons):
-- [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) -- one of the most ancient module systems, initially implemented by the library [require.js](http://requirejs.org/).
-- [CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1) -- the module system created for Node.js server.
+- [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) -- one of the most ancient module systems, initially implemented by the library [require.js](https://requirejs.org/).
+- [CommonJS](https://wiki.commonjs.org/wiki/Modules/1.1) -- the module system created for Node.js server.
- [UMD](https://github.com/umdjs/umd) -- one more module system, suggested as a universal one, compatible with AMD and CommonJS.
Now these all slowly became a part of history, but we still can find them in old scripts.
diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md
index ccbf18cf5..1b5649c69 100644
--- a/1-js/13-modules/02-import-export/article.md
+++ b/1-js/13-modules/02-import-export/article.md
@@ -97,9 +97,9 @@ Well, there are few reasons.
2. Explicit list of imports gives better overview of the code structure: what is used and where. It makes code support and refactoring easier.
```smart header="Don't be afraid to import too much"
-Modern build tools, such as [webpack](https://webpack.js.org/) and others, bundle modules together and optimize them to speedup loading. They also removed unused imports.
+Modern build tools, such as [webpack](https://webpack.js.org/) and others, bundle modules together and optimize them to speedup loading. They also remove unused imports.
-For instance, if you `import * as library` from a huge code library, and then use only few methods, then unused ones [will not be included](https://github.com/webpack/webpack/tree/main/examples/harmony-unused#examplejs) into the optimzed bundle.
+For instance, if you `import * as library` from a huge code library, and then use only few methods, then unused ones [will not be included](https://github.com/webpack/webpack/tree/main/examples/harmony-unused#examplejs) into the optimized bundle.
```
## Import "as"
diff --git a/1-js/99-js-misc/06-unicode/article.md b/1-js/99-js-misc/06-unicode/article.md
index 2396fcfaf..4f144f824 100644
--- a/1-js/99-js-misc/06-unicode/article.md
+++ b/1-js/99-js-misc/06-unicode/article.md
@@ -2,7 +2,7 @@
# Unicode, String internals
```warn header="Advanced knowledge"
-The section goes deeper into string internals. This knowledge will be useful for you if you plan to deal with emoji, rare mathematical or hieroglyphic characters or other rare symbols.
+The section goes deeper into string internals. This knowledge will be useful for you if you plan to deal with emoji, rare mathematical or hieroglyphic characters, or other rare symbols.
```
As we already know, JavaScript strings are based on [Unicode](https://en.wikipedia.org/wiki/Unicode): each character is represented by a byte sequence of 1-4 bytes.
@@ -11,11 +11,11 @@ JavaScript allows us to insert a character into a string by specifying its hexad
- `\xXX`
- `XX` must be two hexadecimal digits with value between `00` and `FF`, then it's character whose Unicode code is `XX`.
+ `XX` must be two hexadecimal digits with a value between `00` and `FF`, then `\xXX` is the character whose Unicode code is `XX`.
- Because the `\xXX` notation supports only two digits, it can be used only for the first 256 Unicode characters.
+ Because the `\xXX` notation supports only two hexadecimal digits, it can be used only for the first 256 Unicode characters.
- These first 256 characters include latin alphabet, most basic syntax characters and some others. For example, `"\x7A"` is the same as `"z"` (Unicode `U+007A`).
+ These first 256 characters include the Latin alphabet, most basic syntax characters, and some others. For example, `"\x7A"` is the same as `"z"` (Unicode `U+007A`).
```js run
alert( "\x7A" ); // z
@@ -23,13 +23,13 @@ JavaScript allows us to insert a character into a string by specifying its hexad
```
- `\uXXXX`
- `XXXX` must be exactly 4 hex digits with the value between `0000` and `FFFF`, then `\uXXXX` is a character whose Unicode code is `XXXX` .
+ `XXXX` must be exactly 4 hex digits with the value between `0000` and `FFFF`, then `\uXXXX` is the character whose Unicode code is `XXXX`.
- Characters with Unicode value greater than `U+FFFF` can also be represented with this notation, but in this case we will need to use a so called surrogate pair (we will talk about surrogate pairs later in this chapter).
+ Characters with Unicode values greater than `U+FFFF` can also be represented with this notation, but in this case, we will need to use a so called surrogate pair (we will talk about surrogate pairs later in this chapter).
```js run
alert( "\u00A9" ); // ©, the same as \xA9, using the 4-digit hex notation
- alert( "\u044F" ); // я, the cyrillic alphabet letter
+ alert( "\u044F" ); // я, the Cyrillic alphabet letter
alert( "\u2191" ); // ↑, the arrow up symbol
```
@@ -38,13 +38,13 @@ JavaScript allows us to insert a character into a string by specifying its hexad
`X…XXXXXX` must be a hexadecimal value of 1 to 6 bytes between `0` and `10FFFF` (the highest code point defined by Unicode). This notation allows us to easily represent all existing Unicode characters.
```js run
- alert( "\u{20331}" ); // 佫, a rare Chinese hieroglyph (long Unicode)
+ alert( "\u{20331}" ); // 佫, a rare Chinese character (long Unicode)
alert( "\u{1F60D}" ); // 😍, a smiling face symbol (another long Unicode)
```
## Surrogate pairs
-All frequently used characters have 2-byte codes. Letters in most european languages, numbers, and even most hieroglyphs, have a 2-byte representation.
+All frequently used characters have 2-byte codes (4 hex digits). Letters in most European languages, numbers, and the basic unified CJK ideographic sets (CJK -- from Chinese, Japanese, and Korean writing systems), have a 2-byte representation.
Initially, JavaScript was based on UTF-16 encoding that only allowed 2 bytes per character. But 2 bytes only allow 65536 combinations and that's not enough for every possible symbol of Unicode.
@@ -55,7 +55,7 @@ As a side effect, the length of such symbols is `2`:
```js run
alert( '𝒳'.length ); // 2, MATHEMATICAL SCRIPT CAPITAL X
alert( '😂'.length ); // 2, FACE WITH TEARS OF JOY
-alert( '𩷶'.length ); // 2, a rare Chinese hieroglyph
+alert( '𩷶'.length ); // 2, a rare Chinese character
```
That's because surrogate pairs did not exist at the time when JavaScript was created, and thus are not correctly processed by the language!
@@ -75,7 +75,7 @@ Pieces of a surrogate pair have no meaning without each other. So the alerts in
Technically, surrogate pairs are also detectable by their codes: if a character has the code in the interval of `0xd800..0xdbff`, then it is the first part of the surrogate pair. The next character (second part) must have the code in interval `0xdc00..0xdfff`. These intervals are reserved exclusively for surrogate pairs by the standard.
-So the methods `String.fromCodePoint` and `str.codePointAt` were added in JavaScript to deal with surrogate pairs.
+So the methods [String.fromCodePoint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint) and [str.codePointAt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt) were added in JavaScript to deal with surrogate pairs.
They are essentially the same as [String.fromCharCode](mdn:js/String/fromCharCode) and [str.charCodeAt](mdn:js/String/charCodeAt), but they treat surrogate pairs correctly.
@@ -120,7 +120,7 @@ For instance, the letter `a` can be the base character for these characters: `à
Most common "composite" characters have their own code in the Unicode table. But not all of them, because there are too many possible combinations.
-To support arbitrary compositions, Unicode standard allows us to use several Unicode characters: the base character followed by one or many "mark" characters that "decorate" it.
+To support arbitrary compositions, the Unicode standard allows us to use several Unicode characters: the base character followed by one or many "mark" characters that "decorate" it.
For instance, if we have `S` followed by the special "dot above" character (code `\u0307`), it is shown as Ṡ.
@@ -167,6 +167,6 @@ alert( "S\u0307\u0323".normalize().length ); // 1
alert( "S\u0307\u0323".normalize() == "\u1e68" ); // true
```
-In reality, this is not always the case. The reason being that the symbol `Ṩ` is "common enough", so Unicode creators included it in the main table and gave it the code.
+In reality, this is not always the case. The reason is that the symbol `Ṩ` is "common enough", so Unicode creators included it in the main table and gave it the code.
If you want to learn more about normalization rules and variants -- they are described in the appendix of the Unicode standard: [Unicode Normalization Forms](https://www.unicode.org/reports/tr15/), but for most practical purposes the information from this section is enough.
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/article.md b/1-js/99-js-misc/07-weakref-finalizationregistry/article.md
new file mode 100644
index 000000000..777bf703c
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/article.md
@@ -0,0 +1,483 @@
+
+# WeakRef and FinalizationRegistry
+
+```warn header="\"Hidden\" features of the language"
+This article covers a very narrowly focused topic, that most developers extremely rarely encounter in practice (and may not even be aware of its existence).
+
+We recommend skipping this chapter if you have just started learning JavaScript.
+```
+
+Recalling the basic concept of the *reachability principle* from the <info:garbage-collection> chapter,
+we can note that the JavaScript engine is guaranteed to keep values in memory that are accessible or in use.
+
+For example:
+
+
+```js
+// the user variable holds a strong reference to the object
+let user = { name: "John" };
+
+// let's overwrite the value of the user variable
+user = null;
+
+// the reference is lost and the object will be deleted from memory
+
+```
+
+Or a similar, but slightly more complicated code with two strong references:
+
+```js
+// the user variable holds a strong reference to the object
+let user = { name: "John" };
+
+// copied the strong reference to the object into the admin variable
+*!*
+let admin = user;
+*/!*
+
+// let's overwrite the value of the user variable
+user = null;
+
+// the object is still reachable through the admin variable
+```
+The object `{ name: "John" }` would only be deleted from memory if there were no strong references to it (if we also overwrote the value of the `admin` variable).
+
+In JavaScript, there is a concept called `WeakRef`, which behaves slightly differently in this case.
+
+
+````smart header="Terms: \"Strong reference\", \"Weak reference\""
+**Strong reference** - is a reference to an object or value, that prevents them from being deleted by the garbage collector. Thereby, keeping the object or value in memory, to which it points.
+
+This means, that the object or value remains in memory and is not collected by the garbage collector as long, as there are active strong references to it.
+
+In JavaScript, ordinary references to objects are strong references. For example:
+
+```js
+// the user variable holds a strong reference to this object
+let user = { name: "John" };
+```
+**Weak reference** - is a reference to an object or value, that does *not* prevent them from being deleted by the garbage collector.
+An object or value can be deleted by the garbage collector if, the only remaining references to them are weak references.
+````
+
+## WeakRef
+
+
+````warn header="Note of caution"
+Before we dive into it, it is worth noting that the correct use of the structures discussed in this article requires very careful thought, and they are best avoided if possible.
+````
+
+`WeakRef` - is an object, that contains a weak reference to another object, called `target` or `referent`.
+
+The peculiarity of `WeakRef` is that it does not prevent the garbage collector from deleting its referent-object. In other words, a `WeakRef` object does not keep the `referent` object alive.
+
+Now let's take the `user` variable as the "referent" and create a weak reference from it to the `admin` variable.
+To create a weak reference, you need to use the `WeakRef` constructor, passing in the target object (the object you want a weak reference to).
+
+In our case — this is the `user` variable:
+
+
+```js
+// the user variable holds a strong reference to the object
+let user = { name: "John" };
+
+// the admin variable holds a weak reference to the object
+*!*
+let admin = new WeakRef(user);
+*/!*
+
+```
+
+The diagram below depicts two types of references: a strong reference using the `user` variable and a weak reference using the `admin` variable:
+
+
+
+Then, at some point, we stop using the `user` variable - it gets overwritten, goes out of scope, etc., while keeping the `WeakRef` instance in the `admin` variable:
+
+```js
+// let's overwrite the value of the user variable
+user = null;
+```
+
+A weak reference to an object is not enough to keep it "alive". When the only remaining references to a referent-object are weak references, the garbage collector is free to destroy this object and use its memory for something else.
+
+However, until the object is actually destroyed, the weak reference may return it, even if there are no more strong references to this object.
+That is, our object becomes a kind of "[Schrödinger's cat](https://en.wikipedia.org/wiki/Schr%C3%B6dinger%27s_cat)" – we cannot know for sure whether it's "alive" or "dead":
+
+
+
+At this point, to get the object from the `WeakRef` instance, we will use its `deref()` method.
+
+The `deref()` method returns the referent-object that the `WeakRef` points to, if the object is still in memory. If the object has been deleted by the garbage collector, then the `deref()` method will return `undefined`:
+
+
+```js
+let ref = admin.deref();
+
+if (ref) {
+ // the object is still accessible: we can perform any manipulations with it
+} else {
+ // the object has been collected by the garbage collector
+}
+```
+
+## WeakRef use cases
+
+`WeakRef` is typically used to create caches or [associative arrays](https://en.wikipedia.org/wiki/Associative_array) that store resource-intensive objects.
+This allows one to avoid preventing these objects from being collected by the garbage collector solely based on their presence in the cache or associative array.
+
+One of the primary examples - is a situation when we have numerous binary image objects (for instance, represented as `ArrayBuffer` or `Blob`), and we want to associate a name or path with each image.
+Existing data structures are not quite suitable for these purposes:
+
+- Using `Map` to create associations between names and images, or vice versa, will keep the image objects in memory since they are present in the `Map` as keys or values.
+- `WeakMap` is ineligible for this goal either: because the objects represented as `WeakMap` keys use weak references, and are not protected from deletion by the garbage collector.
+
+But, in this situation, we need a data structure that would use weak references in its values.
+
+For this purpose, we can use a `Map` collection, whose values are `WeakRef` instances referring to the large objects we need.
+Consequently, we will not keep these large and unnecessary objects in memory longer than they should be.
+
+Otherwise, this is a way to get the image object from the cache if it is still reachable.
+If it has been garbage collected, we will re-generate or re-download it again.
+
+This way, less memory is used in some situations.
+
+## Example №1: using WeakRef for caching
+
+Below is a code snippet that demonstrates the technique of using `WeakRef`.
+
+In short, we use a `Map` with string keys and `WeakRef` objects as their values.
+If the `WeakRef` object has not been collected by the garbage collector, we get it from the cache.
+Otherwise, we re-download it again and put it in the cache for further possible reuse:
+
+```js
+function fetchImg() {
+ // abstract function for downloading images...
+}
+
+function weakRefCache(fetchImg) { // (1)
+ const imgCache = new Map(); // (2)
+
+ return (imgName) => { // (3)
+ const cachedImg = imgCache.get(imgName); // (4)
+
+ if (cachedImg?.deref()) { // (5)
+ return cachedImg?.deref();
+ }
+
+ const newImg = fetchImg(imgName); // (6)
+ imgCache.set(imgName, new WeakRef(newImg)); // (7)
+
+ return newImg;
+ };
+}
+
+const getCachedImg = weakRefCache(fetchImg);
+```
+
+Let's delve into the details of what happened here:
+1. `weakRefCache` - is a higher-order function that takes another function, `fetchImg`, as an argument. In this example, we can neglect a detailed description of the `fetchImg` function, since it can be any logic for downloading images.
+2. `imgCache` - is a cache of images, that stores cached results of the `fetchImg` function, in the form of string keys (image name) and `WeakRef` objects as their values.
+3. Return an anonymous function that takes the image name as an argument. This argument will be used as a key for the cached image.
+4. Trying to get the cached result from the cache, using the provided key (image name).
+5. If the cache contains a value for the specified key, and the `WeakRef` object has not been deleted by the garbage collector, return the cached result.
+6. If there is no entry in the cache with the requested key, or `deref()` method returns `undefined` (meaning that the `WeakRef` object has been garbage collected), the `fetchImg` function downloads the image again.
+7. Put the downloaded image into the cache as a `WeakRef` object.
+
+Now we have a `Map` collection, where the keys - are image names as strings, and values - are `WeakRef` objects containing the images themselves.
+
+This technique helps to avoid allocating a large amount of memory for resource-intensive objects, that nobody uses anymore.
+It also saves memory and time in case of reusing cached objects.
+
+Here is a visual representation of what this code looks like:
+
+
+
+But, this implementation has its drawbacks: over time, `Map` will be filled with strings as keys, that point to a `WeakRef`, whose referent-object has already been garbage collected:
+
+
+
+One way to handle this problem - is to periodically scavenge the cache and clear out "dead" entries.
+Another way - is to use finalizers, which we will explore next.
+
+
+## Example №2: Using WeakRef to track DOM objects
+
+Another use case for `WeakRef` - is tracking DOM objects.
+
+Let's imagine a scenario where some third-party code or library interacts with elements on our page as long as they exist in the DOM.
+For example, it could be an external utility for monitoring and notifying about the system's state (commonly so-called "logger" – a program that sends informational messages called "logs").
+
+Interactive example:
+
+[codetabs height=420 src="weakref-dom"]
+
+When the "Start sending messages" button is clicked, in the so-called "logs display window" (an element with the `.window__body` class), messages (logs) start to appear.
+
+But, as soon as this element is deleted from the DOM, the logger should stop sending messages.
+To reproduce the removal of this element, just click the "Close" button in the top right corner.
+
+In order not to complicate our work, and not to notify third-party code every time our DOM-element is available, and when it is not, it will be enough to create a weak reference to it using `WeakRef`.
+
+Once the element is removed from the DOM, the logger will notice it and stop sending messages.
+
+Now let's take a closer look at the source code (*tab `index.js`*):
+
+1. Get the DOM-element of the "Start sending messages" button.
+2. Get the DOM-element of the "Close" button.
+3. Get the DOM-element of the logs display window using the `new WeakRef()` constructor. This way, the `windowElementRef` variable holds a weak reference to the DOM-element.
+4. Add an event listener on the "Start sending messages" button, responsible for starting the logger when clicked.
+5. Add an event listener on the "Close" button, responsible for closing the logs display window when clicked.
+6. Use `setInterval` to start displaying a new message every second.
+7. If the DOM-element of the logs display window is still accessible and kept in memory, create and send a new message.
+8. If the `deref()` method returns `undefined`, it means that the DOM-element has been deleted from memory. In this case, the logger stops displaying messages and clears the timer.
+9. `alert`, which will be called, after the DOM-element of the logs display window is deleted from memory (i.e. after clicking the "Close" button). **Note, that deletion from memory may not happen immediately, as it depends only on the internal mechanisms of the garbage collector.**
+
+ We cannot control this process directly from the code. However, despite this, we still have the option to force garbage collection from the browser.
+
+ In Google Chrome, for example, to do this, you need to open the developer tools (`key:Ctrl` + `key:Shift` + `key:J` on Windows/Linux or `key:Option` + `key:⌘` + `key:J` on macOS), go to the "Performance" tab, and click on the bin icon button – "Collect garbage":
+
+ 
+
+ <br>
+ This functionality is supported in most modern browsers. After the actions are taken, the <code>alert</code> will trigger immediately.
+
+## FinalizationRegistry
+
+Now it is time to talk about finalizers. Before we move on, let's clarify the terminology:
+
+**Cleanup callback (finalizer)** - is a function that is executed, when an object, registered in the `FinalizationRegistry`, is deleted from memory by the garbage collector.
+
+Its purpose - is to provide the ability to perform additional operations, related to the object, after it has been finally deleted from memory.
+
+**Registry** (or `FinalizationRegistry`) - is a special object in JavaScript that manages the registration and unregistration of objects and their cleanup callbacks.
+
+This mechanism allows registering an object to track and associate a cleanup callback with it.
+Essentially it is a structure that stores information about registered objects and their cleanup callbacks, and then automatically invokes those callbacks when the objects are deleted from memory.
+
+To create an instance of the `FinalizationRegistry`, it needs to call its constructor, which takes a single argument - the cleanup callback (finalizer).
+
+Syntax:
+
+```js
+function cleanupCallback(heldValue) {
+ // cleanup callback code
+}
+
+const registry = new FinalizationRegistry(cleanupCallback);
+```
+
+Here:
+
+- `cleanupCallback` - a cleanup callback that will be automatically called when a registered object is deleted from memory.
+- `heldValue` - the value that is passed as an argument to the cleanup callback. If `heldValue` is an object, the registry keeps a strong reference to it.
+- `registry` - an instance of `FinalizationRegistry`.
+
+`FinalizationRegistry` methods:
+
+- `register(target, heldValue [, unregisterToken])` - used to register objects in the registry.
+
+ `target` - the object being registered for tracking. If the `target` is garbage collected, the cleanup callback will be called with `heldValue` as its argument.
+
+ Optional `unregisterToken` – an unregistration token. It can be passed to unregister an object before the garbage collector deletes it. Typically, the `target` object is used as `unregisterToken`, which is the standard practice.
+- `unregister(unregisterToken)` - the `unregister` method is used to unregister an object from the registry. It takes one argument - `unregisterToken` (the unregister token that was obtained when registering the object).
+
+Now let's move on to a simple example. Let's use the already-known `user` object and create an instance of `FinalizationRegistry`:
+
+```js
+let user = { name: "John" };
+
+const registry = new FinalizationRegistry((heldValue) => {
+ console.log(`${heldValue} has been collected by the garbage collector.`);
+});
+```
+
+Then, we will register the object, that requires a cleanup callback by calling the `register` method:
+
+```js
+registry.register(user, user.name);
+```
+
+The registry does not keep a strong reference to the object being registered, as this would defeat its purpose. If the registry kept a strong reference, then the object would never be garbage collected.
+
+If the object is deleted by the garbage collector, our cleanup callback may be called at some point in the future, with the `heldValue` passed to it:
+
+```js
+// When the user object is deleted by the garbage collector, the following message will be printed in the console:
+"John has been collected by the garbage collector."
+```
+
+There are also situations where, even in implementations that use a cleanup callback, there is a chance that it will not be called.
+
+For example:
+- When the program fully terminates its operation (for example, when closing a tab in a browser).
+- When the `FinalizationRegistry` instance itself is no longer reachable to JavaScript code.
+ If the object that creates the `FinalizationRegistry` instance goes out of scope or is deleted, the cleanup callbacks registered in that registry might also not be invoked.
+
+## Caching with FinalizationRegistry
+
+Returning to our *weak* cache example, we can notice the following:
+- Even though the values wrapped in the `WeakRef` have been collected by the garbage collector, there is still an issue of "memory leakage" in the form of the remaining keys, whose values have been collected by the garbage collector.
+
+Here is an improved caching example using `FinalizationRegistry`:
+
+```js
+function fetchImg() {
+ // abstract function for downloading images...
+}
+
+function weakRefCache(fetchImg) {
+ const imgCache = new Map();
+
+ *!*
+ const registry = new FinalizationRegistry((imgName) => { // (1)
+ const cachedImg = imgCache.get(imgName);
+ if (cachedImg && !cachedImg.deref()) imgCache.delete(imgName);
+ });
+ */!*
+
+ return (imgName) => {
+ const cachedImg = imgCache.get(imgName);
+
+ if (cachedImg?.deref()) {
+ return cachedImg?.deref();
+ }
+
+ const newImg = fetchImg(imgName);
+ imgCache.set(imgName, new WeakRef(newImg));
+ *!*
+ registry.register(newImg, imgName); // (2)
+ */!*
+
+ return newImg;
+ };
+}
+
+const getCachedImg = weakRefCache(fetchImg);
+```
+
+1. To manage the cleanup of "dead" cache entries, when the associated `WeakRef` objects are collected by the garbage collector, we create a `FinalizationRegistry` cleanup registry.
+
+ The important point here is, that in the cleanup callback, it should be checked, if the entry was deleted by the garbage collector and not re-added, in order not to delete a "live" entry.
+2. Once the new value (image) is downloaded and put into the cache, we register it in the finalizer registry to track the `WeakRef` object.
+
+This implementation contains only actual or "live" key/value pairs.
+In this case, each `WeakRef` object is registered in the `FinalizationRegistry`.
+And after the objects are cleaned up by the garbage collector, the cleanup callback will delete all `undefined` values.
+
+Here is a visual representation of the updated code:
+
+
+
+A key aspect of the updated implementation is that finalizers allow parallel processes to be created between the "main" program and cleanup callbacks.
+In the context of JavaScript, the "main" program - is our JavaScript-code, that runs and executes in our application or web page.
+
+Hence, from the moment an object is marked for deletion by the garbage collector, and to the actual execution of the cleanup callback, there may be a certain time gap.
+It is important to understand that during this time gap, the main program can make any changes to the object or even bring it back to memory.
+
+That's why, in the cleanup callback, we must check to see if an entry has been added back to the cache by the main program to avoid deleting "live" entries.
+Similarly, when searching for a key in the cache, there is a chance that the value has been deleted by the garbage collector, but the cleanup callback has not been executed yet.
+
+Such situations require special attention if you are working with `FinalizationRegistry`.
+
+## Using WeakRef and FinalizationRegistry in practice
+
+Moving from theory to practice, imagine a real-life scenario, where a user synchronizes their photos on a mobile device with some cloud service
+(such as [iCloud](https://en.wikipedia.org/wiki/ICloud) or [Google Photos](https://en.wikipedia.org/wiki/Google_Photos)),
+and wants to view them from other devices. In addition to the basic functionality of viewing photos, such services offer a lot of additional features, for example:
+
+- Photo editing and video effects.
+- Creating "memories" and albums.
+- Video montage from a series of photos.
+- ...and much more.
+
+Here, as an example, we will use a fairly primitive implementation of such a service.
+The main point - is to show a possible scenario of using `WeakRef` and `FinalizationRegistry` together in real life.
+
+Here is what it looks like:
+
+
+
+<br>
+On the left side, there is a cloud library of photos (they are displayed as thumbnails).
+We can select the images we need and create a collage, by clicking the "Create collage" button on the right side of the page.
+Then, the resulting collage can be downloaded as an image.
+</br><br>
+
+To increase page loading speed, it would be reasonable to download and display photo thumbnails in *compressed* quality.
+But, to create a collage from selected photos, download and use them in *full-size* quality.
+
+Below, we can see, that the intrinsic size of the thumbnails is 240x240 pixels.
+The size was chosen on purpose to increase loading speed.
+Moreover, we do not need full-size photos in preview mode.
+
+
+
+<br>
+Let's assume, that we need to create a collage of 4 photos: we select them, and then click the "Create collage" button.
+At this stage, the already known to us <code>weakRefCache</code> function checks whether the required image is in the cache.
+If not, it downloads it from the cloud and puts it in the cache for further use.
+This happens for each selected image:
+</br><br>
+
+
+
+</br>
+
+Paying attention to the output in the console, you can see, which of the photos were downloaded from the cloud - this is indicated by <span style="background-color:#133159;color:white;font-weight:500">FETCHED_IMAGE</span>.
+Since this is the first attempt to create a collage, this means, that at this stage the "weak cache" was still empty, and all the photos were downloaded from the cloud and put in it.
+
+But, along with the process of downloading images, there is also a process of memory cleanup by the garbage collector.
+This means, that the object stored in the cache, which we refer to, using a weak reference, is deleted by the garbage collector.
+And our finalizer executes successfully, thereby deleting the key, by which the image was stored in the cache.
+<span style="background-color:#901e30;color:white;font-weight:500;">CLEANED_IMAGE</span> notifies us about it:
+
+
+
+<br>
+Next, we realize that we do not like the resulting collage, and decide to change one of the images and create a new one.
+To do this, just deselect the unnecessary image, select another one, and click the "Create collage" button again:
+</br><br>
+
+
+
+<br>
+But this time not all images were downloaded from the network, and one of them was taken from the weak cache: the <span style="background-color:#385950;color:white;font-weight:500;">CACHED_IMAGE</span> message tells us about it.
+This means that at the time of collage creation, the garbage collector had not yet deleted our image, and we boldly took it from the cache,
+thereby reducing the number of network requests and speeding up the overall time of the collage creation process:
+</br><br>
+
+
+
+<br>
+Let's "play around" a little more, by replacing one of the images again and creating a new collage:
+</br><br>
+
+
+
+<br>
+This time the result is even more impressive. Of the 4 images selected, 3 of them were taken from the weak cache, and only one had to be downloaded from the network.
+The reduction in network load was about 75%. Impressive, isn't it?
+</br><br>
+
+
+
+</br>
+
+Of course, it is important to remember, that such behavior is not guaranteed, and depends on the specific implementation and operation of the garbage collector.
+
+Based on this, a completely logical question immediately arises: why do not we use an ordinary cache, where we can manage its entities ourselves, instead of relying on the garbage collector?
+That's right, in the vast majority of cases there is no need to use `WeakRef` and `FinalizationRegistry`.
+
+Here, we simply demonstrated an alternative implementation of similar functionality, using a non-trivial approach with interesting language features.
+Still, we cannot rely on this example, if we need a constant and predictable result.
+
+You can [open this example in the sandbox](sandbox:weakref-finalizationregistry).
+
+## Summary
+
+`WeakRef` - designed to create weak references to objects, allowing them to be deleted from memory by the garbage collector if there are no longer strong references to them.
+This is beneficial for addressing excessive memory usage and optimizing the utilization of system resources in applications.
+
+`FinalizationRegistry` - is a tool for registering callbacks, that are executed when objects that are no longer strongly referenced, are destroyed.
+This allows releasing resources associated with the object or performing other necessary operations before deleting the object from memory.
\ No newline at end of file
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/google-chrome-developer-tools.png b/1-js/99-js-misc/07-weakref-finalizationregistry/google-chrome-developer-tools.png
new file mode 100644
index 000000000..021637342
Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/google-chrome-developer-tools.png differ
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.css b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.css
new file mode 100644
index 000000000..f6df812d0
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.css
@@ -0,0 +1,49 @@
+.app {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.start-messages {
+ width: fit-content;
+}
+
+.window {
+ width: 100%;
+ border: 2px solid #464154;
+ overflow: hidden;
+}
+
+.window__header {
+ position: sticky;
+ padding: 8px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: #736e7e;
+}
+
+.window__title {
+ margin: 0;
+ font-size: 24px;
+ font-weight: 700;
+ color: white;
+ letter-spacing: 1px;
+}
+
+.window__button {
+ padding: 4px;
+ background: #4f495c;
+ outline: none;
+ border: 2px solid #464154;
+ color: white;
+ font-size: 16px;
+ cursor: pointer;
+}
+
+.window__body {
+ height: 250px;
+ padding: 16px;
+ overflow: scroll;
+ background-color: #736e7e33;
+}
\ No newline at end of file
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.html b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.html
new file mode 100644
index 000000000..7f93af4c7
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="index.css">
+ <title>WeakRef DOM Logger</title>
+</head>
+
+<body>
+
+<div class="app">
+ <button class="start-messages">Start sending messages</button>
+ <div class="window">
+ <div class="window__header">
+ <p class="window__title">Messages:</p>
+ <button class="window__button">Close</button>
+ </div>
+ <div class="window__body">
+ No messages.
+ </div>
+ </div>
+</div>
+
+
+<script type="module" src="index.js"></script>
+</body>
+</html>
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.js b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.js
new file mode 100644
index 000000000..ea55b4478
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.js
@@ -0,0 +1,24 @@
+const startMessagesBtn = document.querySelector('.start-messages'); // (1)
+const closeWindowBtn = document.querySelector('.window__button'); // (2)
+const windowElementRef = new WeakRef(document.querySelector(".window__body")); // (3)
+
+startMessagesBtn.addEventListener('click', () => { // (4)
+ startMessages(windowElementRef);
+ startMessagesBtn.disabled = true;
+});
+
+closeWindowBtn.addEventListener('click', () => document.querySelector(".window__body").remove()); // (5)
+
+
+const startMessages = (element) => {
+ const timerId = setInterval(() => { // (6)
+ if (element.deref()) { // (7)
+ const payload = document.createElement("p");
+ payload.textContent = `Message: System status OK: ${new Date().toLocaleTimeString()}`;
+ element.deref().append(payload);
+ } else { // (8)
+ alert("The element has been deleted."); // (9)
+ clearInterval(timerId);
+ }
+ }, 1000);
+};
\ No newline at end of file
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-01.svg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-01.svg
new file mode 100644
index 000000000..2a507dbcd
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-01.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="-38.324 -109.673 191.121 281.642" width="191.121px" height="281.642px" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
+ <defs>
+ <style bx:fonts="Open Sans">@import url(https://fonts.googleapis.com/css2?family=Open+Sans%3Aital%2Cwght%400%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C600%3B1%2C700%3B1%2C800&display=swap);</style>
+ </defs>
+ <g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1" transform="matrix(1.6492669582366946, 0, 0, 1.6492669582366946, -81.42222595214844, 62.8305015563965)" style="">
+ <g id="memory-user-john-admin.svg" transform="matrix(1, 0, 0, 1, -1.759865, 4.803441)">
+ <text id="user" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 14px; font-weight: 600; white-space: pre;" transform="matrix(0.735667, 0, 0, 0.753868, 7.56361, 10.722544)" x="31.917" y="-40.191">user</text>
+ <path id="Rectangle-4" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 39.02 4.206 L 125.8 4.206 L 125.8 48.227 L 39.02 48.227 L 39.02 4.206 Z" style=""/>
+ <text id="name:-"John"" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 9px; font-weight: 500; white-space: pre;" x="54.086" y="34.58">name: "John"</text>
+ <text id="Object" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 10.5px; font-weight: 500; white-space: pre;" x="64.679" y="23.487">Object</text>
+ <path id="Rectangle-1" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 36.398 -102.608 L 129.398 -102.608 L 129.398 -76.608 L 36.398 -76.608 L 36.398 -102.608 Z"/>
+ <text id="<global>" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 10.6px; font-weight: 500; white-space: pre;" x="59.233" y="-86.001"> <global></text>
+ <path d="M 105.999 1.57 L 113.013 13.895 L 98.985 13.895 L 105.999 1.57 Z" style="fill-rule: nonzero; fill: rgb(172, 67, 67);" transform="matrix(1, 0, 0, -1, 0, 0)" bx:shape="triangle 98.985 1.57 14.028 12.325 0.5 0 1@df7d9fa9"/>
+ <g>
+ <rect x="105.024" y="-69.436" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-59.02" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-48.877" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ </g>
+ <g transform="matrix(1, 0, 0, 1.024052, -0.03572, 31.45084)" style="">
+ <rect x="105.024" y="-69.051" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-59.02" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-48.877" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ </g>
+ <g transform="matrix(1, 0, 0, 1, -9.930843, 12.564639)">
+ <path d="M 66.874 14.118 L 73.888 26.443 L 59.86 26.443 L 66.874 14.118 Z" style="fill-rule: nonzero; fill: rgb(192, 99, 52);" transform="matrix(1, 0, 0, -1, 0, 0)" bx:shape="triangle 59.86 14.118 14.028 12.325 0.5 0 1@9d4d6098"/>
+ <rect x="65.833" y="-81.984" width="2.056" height="55.884" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(192, 99, 52);"/>
+ </g>
+ <text id="text-1" style="fill: rgb(172, 67, 67); font-family: 'Open Sans'; font-size: 14px; font-weight: 600; white-space: pre;" transform="matrix(0.735667, 0, 0, 0.753868, 87.03299, 10.790039)" x="31.917" y="-40.191">admin</text>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-02.svg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-02.svg
new file mode 100644
index 000000000..6cc199a12
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-02.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="-56.888 -212.944 192.167 294.011" width="178.044px" height="272.403px" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
+ <defs>
+ <style bx:fonts="Open Sans">@import url(https://fonts.googleapis.com/css2?family=Open+Sans%3Aital%2Cwght%400%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C600%3B1%2C700%3B1%2C800&display=swap);</style>
+ </defs>
+ <g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1" transform="matrix(1.708757996559143, 0, 0, 1.708757996559143, -109.71231842041016, -35.19435119628906)" style="">
+ <g id="memory-user-john-admin.svg" transform="matrix(1, 0, 0, 1, -1.759865, 4.803441)">
+ <path id="Rectangle-4" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 39.02 4.206 L 125.8 4.206 L 125.8 48.227 L 39.02 48.227 L 39.02 4.206 Z" style=""/>
+ <path id="Rectangle-1" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 36.398 -102.608 L 129.398 -102.608 L 129.398 -76.608 L 36.398 -76.608 L 36.398 -102.608 Z"/>
+ <text id="<global>" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 10.8px; font-weight: 500; white-space: pre;" x="57.977" y="-85.926"> <global></text>
+ <path d="M 105.999 1.57 L 113.013 13.895 L 98.985 13.895 L 105.999 1.57 Z" style="fill-rule: nonzero; fill: rgb(172, 67, 67);" transform="matrix(1, 0, 0, -1, 0, 0)" bx:shape="triangle 98.985 1.57 14.028 12.325 0.5 0 1@df7d9fa9"/>
+ <g style="" transform="matrix(0.7989, 0, 0, 0.7989, 13.076554, 6.083323)">
+ <text id="name:-"John"" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 12px; font-weight: 500; white-space: pre;" x="48.212" y="37.89">name: "John"</text>
+ <text id="Object" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 14px; font-weight: 500; white-space: pre;" x="61.598" y="23.794">Object</text>
+ </g>
+ <g>
+ <rect x="105.024" y="-69.436" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-59.02" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-48.877" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ </g>
+ <g transform="matrix(1, 0, 0, 1.024052, -0.03572, 31.45084)" style="">
+ <rect x="105.024" y="-69.051" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-59.02" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-48.877" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ </g>
+ <text id="text-1" style="fill: rgb(172, 67, 67); font-family: 'Open Sans'; font-size: 14px; font-weight: 600; white-space: pre;" transform="matrix(0.735667, 0, 0, 0.753868, 86.426659, 10.790039)" x="31.917" y="-40.191">admin</text>
+ </g>
+ </g>
+ <g transform="matrix(0.529145, 0, 0, 0.529145, -21.841589, -83.135681)" style="">
+ <path d="M80.179,13.758c-18.342-18.342-48.08-18.342-66.422,0c-18.342,18.341-18.342,48.08,0,66.421 c18.342,18.342,48.08,18.342,66.422,0C98.521,61.837,98.521,32.099,80.179,13.758z M44.144,83.117 c-4.057,0-7.001-3.071-7.001-7.305c0-4.291,2.987-7.404,7.102-7.404c4.123,0,7.001,3.044,7.001,7.404 C51.246,80.113,48.326,83.117,44.144,83.117z M54.73,44.921c-4.15,4.905-5.796,9.117-5.503,14.088l0.097,2.495 c0.011,0.062,0.017,0.125,0.017,0.188c0,0.58-0.47,1.051-1.05,1.051c-0.004-0.001-0.008-0.001-0.012,0h-7.867 c-0.549,0-1.005-0.423-1.047-0.97l-0.202-2.623c-0.676-6.082,1.508-12.218,6.494-18.202c4.319-5.087,6.816-8.865,6.816-13.145 c0-4.829-3.036-7.536-8.548-7.624c-3.403,0-7.242,1.171-9.534,2.913c-0.264,0.201-0.607,0.264-0.925,0.173 s-0.575-0.327-0.693-0.636l-2.42-6.354c-0.169-0.442-0.02-0.943,0.364-1.224c3.538-2.573,9.441-4.235,15.041-4.235 c12.36,0,17.894,7.975,17.894,15.877C63.652,33.765,59.785,38.919,54.73,44.921z" style="fill: rgb(172, 67, 67);"/>
+ </g>
+ <rect x="-52.271" y="-25.92" width="160.339" height="87.431" style="fill: rgba(216, 216, 216, 0); stroke: rgb(172, 67, 67); stroke-width: 3px;"/>
+</svg>
\ No newline at end of file
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-03.svg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-03.svg
new file mode 100644
index 000000000..949a14f9f
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-03.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="-46.534 -212.944 529.701 256.516" width="540.055px" height="256.516px" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
+ <defs>
+ <style bx:fonts="Open Sans">@import url(https://fonts.googleapis.com/css2?family=Open+Sans%3Aital%2Cwght%400%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C600%3B1%2C700%3B1%2C800&display=swap);</style>
+ </defs>
+ <g id="memory-user-john-admin.svg" transform="matrix(1.7087579965591428, 0, 0, 1.7087579965591428, -443.0394287109375, -47.16891479492199)" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
+ <path id="path-1" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 234.068 -87.403 L 333.494 -87.403 L 333.494 -57.762 L 234.068 -57.762 L 234.068 -87.403 Z" style=""/>
+ <path id="path-2" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 336.651 -87.403 L 492.549 -87.403 L 492.549 -57.762 L 336.651 -57.762 L 336.651 -87.403 Z" style=""/>
+ <path id="path-3" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 234.068 -53.711 L 333.494 -53.711 L 333.494 -24.07 L 234.068 -24.07 L 234.068 -53.711 Z" style=""/>
+ <path id="path-4" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 336.651 -53.711 L 492.783 -53.711 L 492.783 -24.07 L 336.651 -24.07 L 336.651 -53.711 Z" style=""/>
+ <path id="path-5" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 234.189 -20.462 L 333.615 -20.462 L 333.615 9.179 L 234.189 9.179 L 234.189 -20.462 Z" style=""/>
+ <path id="path-6" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 336.791 -20.462 L 493.057 -20.462 L 493.057 9.179 L 336.791 9.179 L 336.791 -20.462 Z" style=""/>
+ <path id="path-7" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 234.068 13.088 L 333.494 13.088 L 333.494 43.59 L 234.068 43.59 L 234.068 13.088 Z" style=""/>
+ <path id="path-8" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 336.651 13.088 L 493.054 13.088 L 493.054 43.59 L 336.651 43.59 L 336.651 13.088 Z" style=""/>
+ <text id="<global>" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 11.5772px; font-weight: 600; line-height: 19.9484px; white-space: pre;" transform="matrix(1.374145, 0, 0, 1.314286, -102.41082, 25.040792)" x="263.861" y="-70.535">key</text>
+ <text id="text-2" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 11.5772px; font-weight: 600; line-height: 19.9484px; white-space: pre;" transform="matrix(1.374145, 0, 0, 1.314286, 13.577469, 25.203112)" x="263.861" y="-70.535">value</text>
+ <text id="text-3" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 14px; white-space: pre;" transform="matrix(1.071654, 0, 0, 1.142641, -43.57296, 46.390514)" x="263.861" y="-70.535">image-01.jpg</text>
+ <text id="text-4" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 14px; white-space: pre;" transform="matrix(1.054877, 0, 0, 1.142641, -39.02475, 80.086914)" x="263.861" y="-70.535">image-02.jpg</text>
+ <text id="text-5" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 14px; white-space: pre;" transform="matrix(1.054877, 0, 0, 1.142641, -39.468063, 113.637062)" x="263.861" y="-70.535">image-03.jpg</text>
+ <g transform="matrix(0.000041, -1, 1.521843, 0.000133, 289.017426, 2.750529)" style="transform-origin: 105.999px -35.503px;">
+ <path d="M 105.537 7.964 L 110.918 13.895 L 100.155 13.895 L 105.537 7.964 Z" style="fill-rule: nonzero; fill: rgb(172, 67, 67);" transform="matrix(1, 0, 0, -1, 0, 0)" bx:shape="triangle 100.155 7.964 10.763 5.931 0.5 0 1@87a4267a"/>
+ <g>
+ <rect x="105.024" y="-69.436" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-59.02" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-48.877" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ </g>
+ <g transform="matrix(1, 0, 0, 1.024052, -0.03572, 31.45084)" style="">
+ <rect x="105.024" y="-69.051" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-59.02" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-48.877" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ </g>
+ </g>
+ <text id="text-6" style="fill: rgb(172, 67, 67); font-family: 'Open Sans'; font-size: 9.73113px; font-style: italic; white-space: pre;" transform="matrix(1.038937, 0, 0, 1.142641, 69.710487, 42.749538)" x="263.861" y="-70.535">WeakRef object</text>
+ <g transform="matrix(0.441364, 0, 0, 0.412845, 420.761139, -59.372555)" style="">
+ <g>
+ <path d=" M 58.15 23.65 L 58.15 20 54.25 20 Q 50.95 20 49.35 22.2 47.75 24.4 47.75 27.7 L 47.05 41.45 Q 46.8 43.25 46.1 44.6 45.45 46.05 44.35 47.05 43.9 47.55 43.2 47.75 42.8 47.95 41.85 48.15 L 41.85 51.6 Q 42.95 51.8 43.2 51.9 43.9 52.1 44.35 52.45 45.45 53.25 46.05 54.55 47.65 58.15 47.65 61.65 L 47.65 72.1 Q 47.65 75.7 49.45 77.85 51.25 80 54.1 80 L 58.15 80 58.15 76.25 55.25 76.25 Q 54.1 76.25 53.35 75.65 52.55 74.95 52.2 74 L 51.65 71.75 51.5 69.45 51.35 59.8 Q 51.35 57.55 50.8 55.8 50.15 53.65 49.65 52.8 48.8 51.5 47.9 50.8 47.05 50.1 46.1 49.75 47 49.3 47.8 48.7 48.95 47.85 49.6 46.75 50.1 45.8 50.75 43.7 51.35 41.85 51.35 39.45 L 51.55 28.05 52 25.9 Q 52.35 24.85 53.15 24.2 53.9 23.65 55.25 23.65 L 58.15 23.65 Z" style="fill: rgb(175, 110, 36);"/>
+ </g>
+ </g>
+ <g transform="matrix(-0.441364, 0, 0, -0.412845, 414.750092, -88.816727)" style="transform-origin: 50px 50px;">
+ <g>
+ <path d="M 14.392 23.65 L 14.392 20 L 10.492 20 C 8.292 20 6.659 20.733 5.592 22.2 C 4.525 23.667 3.992 25.5 3.992 27.7 L 3.292 41.45 C 3.125 42.65 2.809 43.7 2.342 44.6 C 1.909 45.567 1.325 46.383 0.592 47.05 C 0.292 47.383 -0.091 47.617 -0.558 47.75 C -0.825 47.883 -1.275 48.017 -1.908 48.15 L -1.908 51.6 C -1.175 51.733 -0.725 51.833 -0.558 51.9 C -0.091 52.033 0.292 52.217 0.592 52.45 C 1.325 52.983 1.892 53.683 2.292 54.55 C 3.359 56.95 3.892 59.317 3.892 61.65 L 3.892 72.1 C 3.892 74.5 4.492 76.417 5.692 77.85 C 6.892 79.283 8.442 80 10.342 80 L 14.392 80 L 14.392 76.25 L 11.492 76.25 C 10.725 76.25 10.092 76.05 9.592 75.65 C 9.059 75.183 8.675 74.633 8.442 74 L 7.892 71.75 L 7.742 69.45 L 7.592 59.8 C 7.592 58.3 7.409 56.967 7.042 55.8 C 6.609 54.367 6.225 53.367 5.892 52.8 C 5.325 51.933 4.742 51.267 4.142 50.8 C 3.575 50.333 2.975 49.983 2.342 49.75 C 2.942 49.45 3.509 49.1 4.042 48.7 C 4.809 48.133 5.409 47.483 5.842 46.75 C 6.175 46.117 6.559 45.1 6.992 43.7 C 7.392 42.467 7.592 41.05 7.592 39.45 L 7.792 28.05 L 8.242 25.9 C 8.475 25.2 8.859 24.633 9.392 24.2 C 9.892 23.833 10.592 23.65 11.492 23.65 L 14.392 23.65 Z" style="fill: rgb(175, 110, 36);"/>
+ <path d="M 255.632 27.46 L 268.667 47.91 L 242.597 47.91 L 255.632 27.46 Z" style="fill-rule: nonzero; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, 1, 0.000093, 86.522967, -302.258205)" bx:shape="triangle 242.597 27.46 26.07 20.45 0.5 0 1@97f9cc39"/>
+ <rect x="254.391" y="-239.419" width="4.82" height="17.271" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, 86.522728, -302.258331)"/>
+ <rect x="254.367" y="-203.504" width="4.82" height="17.271" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, 86.522728, -302.258331)"/>
+ <rect x="254.367" y="-168.53" width="4.82" height="17.271" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, 86.522728, -302.258331)"/>
+ <rect x="254.391" y="-243.818" width="4.82" height="17.687" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, -21.921179, -302.35498)"/>
+ <rect x="254.367" y="-208.398" width="4.82" height="17.687" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, -21.921179, -302.35498)"/>
+ <rect x="254.367" y="-172.584" width="4.82" height="17.687" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, -21.921179, -302.35498)"/>
+ <text id="text-7" style="fill: rgb(172, 67, 67); font-family: 'Open Sans'; font-size: 9.73113px; font-style: italic; white-space: pre;" transform="matrix(-2.353923, 0, 0, -2.767724, 945.975708, -228.376572)" x="263.861" y="-70.535">WeakRef object</text>
+ <path d="M 108.749 -57.365 L 108.749 -61.015 L 104.849 -61.015 C 102.649 -61.015 101.015 -60.281 99.949 -58.815 C 98.882 -57.348 98.349 -55.515 98.349 -53.315 L 97.649 -39.565 C 97.482 -38.365 97.165 -37.315 96.699 -36.415 C 96.265 -35.448 95.682 -34.631 94.949 -33.965 C 94.649 -33.631 94.265 -33.398 93.799 -33.265 C 93.532 -33.131 93.082 -32.998 92.449 -32.865 L 92.449 -29.415 C 93.182 -29.281 93.632 -29.181 93.799 -29.115 C 94.265 -28.981 94.649 -28.798 94.949 -28.565 C 95.682 -28.031 96.249 -27.331 96.649 -26.465 C 97.715 -24.065 98.249 -21.698 98.249 -19.365 L 98.249 -8.915 C 98.249 -6.515 98.849 -4.598 100.049 -3.165 C 101.249 -1.731 102.799 -1.015 104.699 -1.015 L 108.749 -1.015 L 108.749 -4.765 L 105.849 -4.765 C 105.082 -4.765 104.449 -4.965 103.949 -5.365 C 103.415 -5.831 103.032 -6.381 102.799 -7.015 L 102.249 -9.265 L 102.099 -11.565 L 101.949 -21.215 C 101.949 -22.715 101.765 -24.048 101.399 -25.215 C 100.965 -26.648 100.582 -27.648 100.249 -28.215 C 99.682 -29.081 99.099 -29.748 98.499 -30.215 C 97.932 -30.681 97.332 -31.031 96.699 -31.265 C 97.299 -31.565 97.865 -31.915 98.399 -32.315 C 99.165 -32.881 99.765 -33.531 100.199 -34.265 C 100.532 -34.898 100.915 -35.915 101.349 -37.315 C 101.749 -38.548 101.949 -39.965 101.949 -41.565 L 102.149 -52.965 L 102.599 -55.115 C 102.832 -55.815 103.215 -56.381 103.749 -56.815 C 104.249 -57.181 104.949 -57.365 105.849 -57.365 L 108.749 -57.365 Z" style="fill: rgb(175, 110, 36); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, -0.000004, -0.000028)"/>
+ <path d="M 15.325 -57.155 L 15.325 -60.805 L 11.425 -60.805 C 9.225 -60.805 7.591 -60.072 6.525 -58.605 C 5.458 -57.139 4.925 -55.305 4.925 -53.105 L 4.225 -39.355 C 4.058 -38.155 3.741 -37.105 3.275 -36.205 C 2.841 -35.239 2.258 -34.422 1.525 -33.755 C 1.225 -33.422 0.841 -33.189 0.375 -33.055 C 0.108 -32.922 -0.342 -32.789 -0.975 -32.655 L -0.975 -29.205 C -0.242 -29.072 0.208 -28.972 0.375 -28.905 C 0.841 -28.772 1.225 -28.589 1.525 -28.355 C 2.258 -27.822 2.825 -27.122 3.225 -26.255 C 4.291 -23.855 4.825 -21.489 4.825 -19.155 L 4.825 -8.705 C 4.825 -6.305 5.425 -4.389 6.625 -2.955 C 7.825 -1.522 9.375 -0.805 11.275 -0.805 L 15.325 -0.805 L 15.325 -4.555 L 12.425 -4.555 C 11.658 -4.555 11.025 -4.755 10.525 -5.155 C 9.991 -5.622 9.608 -6.172 9.375 -6.805 L 8.825 -9.055 L 8.675 -11.355 L 8.525 -21.005 C 8.525 -22.505 8.341 -23.839 7.975 -25.005 C 7.541 -26.439 7.158 -27.439 6.825 -28.005 C 6.258 -28.872 5.675 -29.539 5.075 -30.005 C 4.508 -30.472 3.908 -30.822 3.275 -31.055 C 3.875 -31.355 4.441 -31.705 4.975 -32.105 C 5.741 -32.672 6.341 -33.322 6.775 -34.055 C 7.108 -34.689 7.491 -35.705 7.925 -37.105 C 8.325 -38.339 8.525 -39.755 8.525 -41.355 L 8.725 -52.755 L 9.175 -54.905 C 9.408 -55.605 9.791 -56.172 10.325 -56.605 C 10.825 -56.972 11.525 -57.155 12.425 -57.155 L 15.325 -57.155 Z" style="fill: rgb(175, 110, 36);"/>
+ </g>
+ </g>
+ </g>
+ <g transform="matrix(0.3355039954185486, 0, 0, 0.3355039954185486, 67.31304168701172, -387.90008544921875)" style="">
+ <g transform="matrix(0.178489, 0, 0, 0.175502, 747.077209, 776.317017)" style="">
+ <path d="M 267.184 437.8 C 267.184 466.3 290.384 489.4 318.784 489.4 L 704.984 489.4 C 733.484 489.4 756.584 466.2 756.584 437.8 L 756.584 51.6 C 756.584 23.1 733.384 0 704.984 0 L 318.784 0 C 290.284 0 267.184 23.2 267.184 51.6 C 267.184 51.6 267.184 437.8 267.184 437.8 Z M 704.984 464.9 L 318.784 464.9 C 303.884 464.9 291.684 452.7 291.684 437.8 L 291.684 373.3 L 384.484 280.5 L 463.784 359.8 C 468.584 364.6 476.284 364.6 481.084 359.8 L 624.284 216.6 L 732.084 324.4 L 732.084 437.8 C 732.084 452.7 719.884 464.9 704.984 464.9 Z M 318.784 24.5 L 704.984 24.5 C 719.884 24.5 732.084 36.7 732.084 51.6 L 732.084 289.7 L 632.884 190.6 C 628.084 185.8 620.384 185.8 615.584 190.6 L 472.384 333.8 L 393.084 254.5 C 388.284 249.7 380.584 249.7 375.784 254.5 L 291.684 338.6 L 291.684 51.6 C 291.684 36.7 303.884 24.5 318.784 24.5 Z" style="fill: rgb(175, 110, 36);"/>
+ <path d="M 418.884 196.1 C 453.284 196.1 481.184 168.1 481.184 133.8 C 481.184 99.5 453.184 71.5 418.884 71.5 C 384.584 71.5 356.584 99.5 356.584 133.8 C 356.584 168.1 384.484 196.1 418.884 196.1 Z M 418.884 96 C 439.784 96 456.684 113 456.684 133.8 C 456.684 154.6 439.684 171.6 418.884 171.6 C 398.084 171.6 381.084 154.6 381.084 133.8 C 381.084 113 397.984 96 418.884 96 Z" style="fill: rgb(175, 110, 36);"/>
+ </g>
+ </g>
+ <path d="M -161.945 -20.71 L -152.75 -5.287 L -171.141 -5.287 L -161.945 -20.71 Z" style="fill-rule: nonzero; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -0.9999999999999999, -0.9999999999999999, -0.00008700000762473792, 281.6644897460937, -149.34440612792974)" bx:shape="triangle -171.141 -20.71 18.391 15.423 0.5 0 1@d86e5ee8"/>
+ <rect x="179.461" y="-180.566" width="3.4" height="13.026" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -0.9999999999999999, 0.9999999999999999, 0.00008700000762473792, 323.0706176757812, 192.94052124023426)"/>
+ <rect x="179.444" y="-153.479" width="3.4" height="13.026" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -0.9999999999999999, 0.9999999999999999, 0.00008700000762473792, 323.0706176757812, 192.94052124023426)"/>
+ <rect x="179.444" y="-127.103" width="3.4" height="13.026" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -0.9999999999999999, 0.9999999999999999, 0.00008700000762473792, 323.0706176757812, 192.94052124023426)"/>
+ <rect x="179.461" y="-183.883" width="3.4" height="13.339" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -0.9999999999999999, 0.9999999999999999, 0.00008700000762473792, 404.85729980468744, 193.00871276855457)"/>
+ <rect x="179.444" y="-157.171" width="3.4" height="13.339" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -0.9999999999999999, 0.9999999999999999, 0.00008700000762473792, 404.85729980468744, 193.00871276855457)"/>
+ <rect x="179.444" y="-130.16" width="3.4" height="13.339" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -0.9999999999999999, 0.9999999999999999, 0.00008700000762473792, 404.85729980468744, 193.00871276855457)"/>
+ <text id="text-8" style="fill: rgb(172, 67, 67); font-family: 'Open Sans'; font-size: 9.73113px; font-style: italic; white-space: pre;" transform="matrix(1.7752919197082517, 0, 0, 1.9524970054626463, -325.1152648925781, 140.82048034667957)" x="263.861" y="-70.535">WeakRef object</text>
+ <path d="M 318.601 -16.998 L 318.601 -19.573 L 315.66 -19.573 C 314.001 -19.573 312.769 -19.055 311.964 -18.021 C 311.16 -16.986 310.758 -15.693 310.758 -14.141 L 310.23 -4.441 C 310.104 -3.594 309.865 -2.853 309.513 -2.218 C 309.186 -1.536 308.746 -0.96 308.193 -0.49 C 307.967 -0.255 307.678 -0.09 307.326 0.004 C 307.125 0.098 306.786 0.192 306.308 0.286 L 306.308 2.72 C 306.861 2.814 307.2 2.884 307.326 2.931 C 307.678 3.025 307.967 3.155 308.193 3.319 C 308.746 3.696 309.174 4.189 309.475 4.801 C 310.28 6.494 310.682 8.163 310.682 9.81 L 310.682 17.181 C 310.682 18.875 311.135 20.227 312.04 21.238 C 312.945 22.249 314.114 22.755 315.547 22.755 L 318.601 22.755 L 318.601 20.109 L 316.414 20.109 C 315.836 20.109 315.358 19.968 314.981 19.686 C 314.579 19.357 314.29 18.969 314.114 18.522 L 313.699 16.935 L 313.586 15.312 L 313.473 8.504 C 313.473 7.446 313.334 6.506 313.058 5.683 C 312.731 4.671 312.442 3.966 312.191 3.566 C 311.763 2.955 311.323 2.485 310.871 2.155 C 310.443 1.826 309.991 1.579 309.513 1.415 C 309.966 1.203 310.393 0.956 310.795 0.674 C 311.373 0.274 311.826 -0.184 312.153 -0.702 C 312.404 -1.148 312.693 -1.866 313.02 -2.853 C 313.322 -3.723 313.473 -4.723 313.473 -5.852 L 313.623 -13.894 L 313.963 -15.41 C 314.139 -15.904 314.428 -16.304 314.83 -16.61 C 315.207 -16.868 315.735 -16.998 316.414 -16.998 L 318.601 -16.998 Z" style="fill: rgb(175, 110, 36);" transform="matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, -1.1368683772161603e-13)"/>
+ <path d="M 389.058 -17.145 L 389.058 -19.72 L 386.117 -19.72 C 384.458 -19.72 383.226 -19.203 382.421 -18.168 C 381.617 -17.134 381.215 -15.84 381.215 -14.288 L 380.687 -4.588 C 380.561 -3.742 380.322 -3.001 379.97 -2.366 C 379.644 -1.684 379.204 -1.108 378.651 -0.638 C 378.424 -0.403 378.135 -0.238 377.783 -0.144 C 377.582 -0.05 377.243 0.044 376.765 0.138 L 376.765 2.572 C 377.318 2.666 377.658 2.737 377.783 2.784 C 378.135 2.878 378.424 3.007 378.651 3.172 C 379.204 3.548 379.631 4.042 379.933 4.653 C 380.737 6.346 381.139 8.016 381.139 9.662 L 381.139 17.034 C 381.139 18.727 381.592 20.079 382.497 21.09 C 383.402 22.101 384.571 22.607 386.004 22.607 L 389.058 22.607 L 389.058 19.961 L 386.871 19.961 C 386.293 19.961 385.815 19.82 385.438 19.538 C 385.036 19.209 384.747 18.821 384.571 18.374 L 384.156 16.787 L 384.043 15.164 L 383.93 8.357 C 383.93 7.299 383.792 6.358 383.515 5.535 C 383.188 4.524 382.899 3.818 382.648 3.419 C 382.22 2.807 381.78 2.337 381.328 2.008 C 380.901 1.679 380.448 1.432 379.97 1.267 C 380.423 1.055 380.85 0.808 381.253 0.526 C 381.831 0.127 382.283 -0.332 382.61 -0.849 C 382.861 -1.296 383.151 -2.013 383.477 -3.001 C 383.779 -3.871 383.93 -4.87 383.93 -5.999 L 384.081 -14.041 L 384.42 -15.558 C 384.596 -16.052 384.885 -16.452 385.287 -16.757 C 385.664 -17.016 386.192 -17.145 386.871 -17.145 L 389.058 -17.145 Z" style="fill: rgb(175, 110, 36); transform-origin: 382.912px 1.4435px;" transform="matrix(-1, 0, 0, -1, 0, -0.000015020371)"/>
+ <path d="M 333.236 -45.236 C 333.236 -43.558 334.625 -42.198 336.326 -42.198 L 359.453 -42.198 C 361.16 -42.198 362.543 -43.564 362.543 -45.236 L 362.543 -67.977 C 362.543 -69.655 361.154 -71.015 359.453 -71.015 L 336.326 -71.015 C 334.619 -71.015 333.236 -69.649 333.236 -67.977 C 333.236 -67.977 333.236 -45.236 333.236 -45.236 Z M 359.453 -43.641 L 336.326 -43.641 C 335.434 -43.641 334.703 -44.359 334.703 -45.236 L 334.703 -49.034 L 340.26 -54.499 L 345.009 -49.829 C 345.297 -49.547 345.758 -49.547 346.045 -49.829 L 354.62 -58.261 L 361.076 -51.914 L 361.076 -45.236 C 361.076 -44.359 360.345 -43.641 359.453 -43.641 Z M 336.326 -69.572 L 359.453 -69.572 C 360.345 -69.572 361.076 -68.854 361.076 -67.977 L 361.076 -53.957 L 355.135 -59.792 C 354.848 -60.075 354.387 -60.075 354.099 -59.792 L 345.524 -51.36 L 340.775 -56.029 C 340.488 -56.312 340.027 -56.312 339.739 -56.029 L 334.703 -51.077 L 334.703 -67.977 C 334.703 -68.854 335.434 -69.572 336.326 -69.572 Z" style="fill: rgb(175, 110, 36);" transform="matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, -1.1368683772161603e-13)"/>
+ <path d="M 341.32 -59.468 C 343.38 -59.468 345.051 -61.117 345.051 -63.137 C 345.051 -65.156 343.374 -66.805 341.32 -66.805 C 339.266 -66.805 337.59 -65.156 337.59 -63.137 C 337.59 -61.117 339.26 -59.468 341.32 -59.468 Z M 341.32 -65.362 C 342.572 -65.362 343.584 -64.361 343.584 -63.137 C 343.584 -61.912 342.566 -60.911 341.32 -60.911 C 340.075 -60.911 339.057 -61.912 339.057 -63.137 C 339.057 -64.361 340.069 -65.362 341.32 -65.362 Z" style="fill: rgb(175, 110, 36);" transform="matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, -1.1368683772161603e-13)"/>
+ <path d="M 333.305 13.146 C 333.305 14.824 334.694 16.184 336.395 16.184 L 359.522 16.184 C 361.229 16.184 362.612 14.818 362.612 13.146 L 362.612 -9.594 C 362.612 -11.272 361.223 -12.633 359.522 -12.633 L 336.395 -12.633 C 334.688 -12.633 333.305 -11.267 333.305 -9.594 C 333.305 -9.594 333.305 13.146 333.305 13.146 Z M 359.522 14.742 L 336.395 14.742 C 335.503 14.742 334.772 14.023 334.772 13.146 L 334.772 9.348 L 340.329 3.884 L 345.078 8.553 C 345.366 8.836 345.827 8.836 346.114 8.553 L 354.69 0.121 L 361.145 6.469 L 361.145 13.146 C 361.145 14.023 360.415 14.742 359.522 14.742 Z M 336.395 -11.19 L 359.522 -11.19 C 360.415 -11.19 361.145 -10.472 361.145 -9.594 L 361.145 4.426 L 355.205 -1.41 C 354.917 -1.692 354.456 -1.692 354.169 -1.41 L 345.593 7.022 L 340.844 2.353 C 340.557 2.07 340.096 2.07 339.809 2.353 L 334.772 7.305 L 334.772 -9.594 C 334.772 -10.472 335.503 -11.19 336.395 -11.19 Z" style="fill: rgb(175, 110, 36);" transform="matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, -1.1368683772161603e-13)"/>
+ <path d="M 341.39 -1.086 C 343.45 -1.086 345.12 -2.735 345.12 -4.754 C 345.12 -6.774 343.444 -8.423 341.39 -8.423 C 339.335 -8.423 337.659 -6.774 337.659 -4.754 C 337.659 -2.735 339.329 -1.086 341.39 -1.086 Z M 341.39 -6.98 C 342.641 -6.98 343.653 -5.979 343.653 -4.754 C 343.653 -3.529 342.635 -2.528 341.39 -2.528 C 340.144 -2.528 339.126 -3.529 339.126 -4.754 C 339.126 -5.979 340.138 -6.98 341.39 -6.98 Z" style="fill: rgb(175, 110, 36);" transform="matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, -1.1368683772161603e-13)"/>
+</svg>
\ No newline at end of file
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-04.svg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-04.svg
new file mode 100644
index 000000000..1177d6580
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-04.svg
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="-44.887 -212.944 528.054 256.516" width="540.055px" height="256.516px" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
+ <defs>
+ <style bx:fonts="Open Sans">@import url(https://fonts.googleapis.com/css2?family=Open+Sans%3Aital%2Cwght%400%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C600%3B1%2C700%3B1%2C800&display=swap);</style>
+ </defs>
+ <g id="memory-user-john-admin.svg" transform="matrix(1.708757996559143, 0, 0, 1.708757996559143, -443.0394287109375, -47.168914794921875)" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
+ <text id="name:-"John"" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal" style="white-space: pre;" x="19.382" y="-93.28"><tspan x="49.382" y="36.72" style="font-size: 12px; word-spacing: 0px;">name: "John"</tspan></text>
+ <text id="Object" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" style="white-space: pre;" x="17.598" y="-86.206"><tspan x="61.598" y="23.794" style="font-size: 14px; word-spacing: 0px;">Object</tspan></text>
+ <path id="Rectangle-1" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 40.047 -102 L 133.047 -102 L 133.047 -76 L 40.047 -76 L 40.047 -102 Z"/>
+ <text id="text-1" style="fill: rgb(172, 67, 67); font-family: PTMono-Regular, 'PT Mono'; font-size: 14px; white-space: pre;" transform="matrix(0.735667, 0, 0, 0.753868, 86.426659, 10.790039)" x="31.917" y="-40.191">admin</text>
+ <path id="path-1" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 234.068 -87.403 L 333.494 -87.403 L 333.494 -57.762 L 234.068 -57.762 L 234.068 -87.403 Z" style=""/>
+ <path id="path-2" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 336.651 -87.403 L 492.549 -87.403 L 492.549 -57.762 L 336.651 -57.762 L 336.651 -87.403 Z" style=""/>
+ <path id="path-3" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 234.068 -53.711 L 333.494 -53.711 L 333.494 -24.07 L 234.068 -24.07 L 234.068 -53.711 Z" style=""/>
+ <path id="path-4" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 336.651 -53.711 L 492.783 -53.711 L 492.783 -24.07 L 336.651 -24.07 L 336.651 -53.711 Z" style=""/>
+ <path id="path-5" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 234.189 -20.462 L 333.615 -20.462 L 333.615 9.179 L 234.189 9.179 L 234.189 -20.462 Z" style=""/>
+ <path id="path-6" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 336.791 -20.462 L 493.057 -20.462 L 493.057 9.179 L 336.791 9.179 L 336.791 -20.462 Z" style=""/>
+ <path id="path-7" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 234.068 13.088 L 333.494 13.088 L 333.494 43.59 L 234.068 43.59 L 234.068 13.088 Z" style=""/>
+ <path id="path-8" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 336.651 13.088 L 493.054 13.088 L 493.054 43.59 L 336.651 43.59 L 336.651 13.088 Z" style=""/>
+ <text id="<global>" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 11.5772px; font-weight: 600; line-height: 19.9484px; white-space: pre;" transform="matrix(1.374145, 0, 0, 1.314286, -102.41082, 25.040792)" x="263.861" y="-70.535">key</text>
+ <text id="text-2" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 11.5772px; font-weight: 600; line-height: 19.9484px; white-space: pre;" transform="matrix(1.374145, 0, 0, 1.314286, 13.577469, 25.203112)" x="263.861" y="-70.535">value</text>
+ <text id="text-3" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 14px; white-space: pre;" transform="matrix(1.071654, 0, 0, 1.142641, -43.57296, 46.390514)" x="263.861" y="-70.535">image-01.jpg</text>
+ <text id="text-4" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 14px; white-space: pre;" transform="matrix(1.054877, 0, 0, 1.142641, -39.02475, 80.086914)" x="263.861" y="-70.535">image-02.jpg</text>
+ <text id="text-5" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 14px; white-space: pre;" transform="matrix(1.054877, 0, 0, 1.142641, -39.468063, 113.637062)" x="263.861" y="-70.535">image-03.jpg</text>
+ <g transform="matrix(0.000041, -1, 1.521843, 0.000133, 289.017426, 2.750529)" style="transform-origin: 105.999px -35.503px;">
+ <path d="M 105.537 7.964 L 110.918 13.895 L 100.155 13.895 L 105.537 7.964 Z" style="fill-rule: nonzero; fill: rgb(172, 67, 67);" transform="matrix(1, 0, 0, -1, 0, 0)" bx:shape="triangle 100.155 7.964 10.763 5.931 0.5 0 1@87a4267a"/>
+ <g>
+ <rect x="105.024" y="-69.436" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-59.02" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-48.877" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ </g>
+ <g transform="matrix(1, 0, 0, 1.024052, -0.03572, 31.45084)" style="">
+ <rect x="105.024" y="-69.051" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-59.02" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-48.877" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ </g>
+ </g>
+ <text id="text-6" style="fill: rgb(172, 67, 67); font-family: 'Open Sans'; font-size: 9.73113px; font-style: italic; white-space: pre;" transform="matrix(1.038937, 0, 0, 1.142641, 69.710487, 42.749538)" x="263.861" y="-70.535">WeakRef object</text>
+ <g transform="matrix(0.441364, 0, 0, 0.412845, 420.761139, -59.372555)" style="">
+ <g>
+ <path d=" M 58.15 23.65 L 58.15 20 54.25 20 Q 50.95 20 49.35 22.2 47.75 24.4 47.75 27.7 L 47.05 41.45 Q 46.8 43.25 46.1 44.6 45.45 46.05 44.35 47.05 43.9 47.55 43.2 47.75 42.8 47.95 41.85 48.15 L 41.85 51.6 Q 42.95 51.8 43.2 51.9 43.9 52.1 44.35 52.45 45.45 53.25 46.05 54.55 47.65 58.15 47.65 61.65 L 47.65 72.1 Q 47.65 75.7 49.45 77.85 51.25 80 54.1 80 L 58.15 80 58.15 76.25 55.25 76.25 Q 54.1 76.25 53.35 75.65 52.55 74.95 52.2 74 L 51.65 71.75 51.5 69.45 51.35 59.8 Q 51.35 57.55 50.8 55.8 50.15 53.65 49.65 52.8 48.8 51.5 47.9 50.8 47.05 50.1 46.1 49.75 47 49.3 47.8 48.7 48.95 47.85 49.6 46.75 50.1 45.8 50.75 43.7 51.35 41.85 51.35 39.45 L 51.55 28.05 52 25.9 Q 52.35 24.85 53.15 24.2 53.9 23.65 55.25 23.65 L 58.15 23.65 Z" style="fill: rgb(175, 110, 36);"/>
+ </g>
+ </g>
+ <g transform="matrix(-0.441364, 0, 0, -0.412845, 414.750092, -88.816727)" style="transform-origin: 50px 50px;">
+ <g>
+ <path d="M 14.392 23.65 L 14.392 20 L 10.492 20 C 8.292 20 6.659 20.733 5.592 22.2 C 4.525 23.667 3.992 25.5 3.992 27.7 L 3.292 41.45 C 3.125 42.65 2.809 43.7 2.342 44.6 C 1.909 45.567 1.325 46.383 0.592 47.05 C 0.292 47.383 -0.091 47.617 -0.558 47.75 C -0.825 47.883 -1.275 48.017 -1.908 48.15 L -1.908 51.6 C -1.175 51.733 -0.725 51.833 -0.558 51.9 C -0.091 52.033 0.292 52.217 0.592 52.45 C 1.325 52.983 1.892 53.683 2.292 54.55 C 3.359 56.95 3.892 59.317 3.892 61.65 L 3.892 72.1 C 3.892 74.5 4.492 76.417 5.692 77.85 C 6.892 79.283 8.442 80 10.342 80 L 14.392 80 L 14.392 76.25 L 11.492 76.25 C 10.725 76.25 10.092 76.05 9.592 75.65 C 9.059 75.183 8.675 74.633 8.442 74 L 7.892 71.75 L 7.742 69.45 L 7.592 59.8 C 7.592 58.3 7.409 56.967 7.042 55.8 C 6.609 54.367 6.225 53.367 5.892 52.8 C 5.325 51.933 4.742 51.267 4.142 50.8 C 3.575 50.333 2.975 49.983 2.342 49.75 C 2.942 49.45 3.509 49.1 4.042 48.7 C 4.809 48.133 5.409 47.483 5.842 46.75 C 6.175 46.117 6.559 45.1 6.992 43.7 C 7.392 42.467 7.592 41.05 7.592 39.45 L 7.792 28.05 L 8.242 25.9 C 8.475 25.2 8.859 24.633 9.392 24.2 C 9.892 23.833 10.592 23.65 11.492 23.65 L 14.392 23.65 Z" style="fill: rgb(175, 110, 36);"/>
+ <path d="M 255.632 27.46 L 268.667 47.91 L 242.597 47.91 L 255.632 27.46 Z" style="fill-rule: nonzero; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, 1, 0.000093, 86.522967, -302.258205)" bx:shape="triangle 242.597 27.46 26.07 20.45 0.5 0 1@97f9cc39"/>
+ <rect x="254.391" y="-239.419" width="4.82" height="17.271" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, 86.522728, -302.258331)"/>
+ <rect x="254.367" y="-203.504" width="4.82" height="17.271" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, 86.522728, -302.258331)"/>
+ <rect x="254.367" y="-168.53" width="4.82" height="17.271" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, 86.522728, -302.258331)"/>
+ <rect x="254.391" y="-243.818" width="4.82" height="17.687" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, -21.921179, -302.35498)"/>
+ <rect x="254.367" y="-208.398" width="4.82" height="17.687" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, -21.921179, -302.35498)"/>
+ <rect x="254.367" y="-172.584" width="4.82" height="17.687" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, -21.921179, -302.35498)"/>
+ <text id="text-7" style="fill: rgb(172, 67, 67); font-family: 'Open Sans'; font-size: 9.73113px; font-style: italic; white-space: pre;" transform="matrix(-2.353923, 0, 0, -2.767724, 945.975708, -228.376572)" x="263.861" y="-70.535">WeakRef object</text>
+ <path d="M 108.749 -57.365 L 108.749 -61.015 L 104.849 -61.015 C 102.649 -61.015 101.015 -60.281 99.949 -58.815 C 98.882 -57.348 98.349 -55.515 98.349 -53.315 L 97.649 -39.565 C 97.482 -38.365 97.165 -37.315 96.699 -36.415 C 96.265 -35.448 95.682 -34.631 94.949 -33.965 C 94.649 -33.631 94.265 -33.398 93.799 -33.265 C 93.532 -33.131 93.082 -32.998 92.449 -32.865 L 92.449 -29.415 C 93.182 -29.281 93.632 -29.181 93.799 -29.115 C 94.265 -28.981 94.649 -28.798 94.949 -28.565 C 95.682 -28.031 96.249 -27.331 96.649 -26.465 C 97.715 -24.065 98.249 -21.698 98.249 -19.365 L 98.249 -8.915 C 98.249 -6.515 98.849 -4.598 100.049 -3.165 C 101.249 -1.731 102.799 -1.015 104.699 -1.015 L 108.749 -1.015 L 108.749 -4.765 L 105.849 -4.765 C 105.082 -4.765 104.449 -4.965 103.949 -5.365 C 103.415 -5.831 103.032 -6.381 102.799 -7.015 L 102.249 -9.265 L 102.099 -11.565 L 101.949 -21.215 C 101.949 -22.715 101.765 -24.048 101.399 -25.215 C 100.965 -26.648 100.582 -27.648 100.249 -28.215 C 99.682 -29.081 99.099 -29.748 98.499 -30.215 C 97.932 -30.681 97.332 -31.031 96.699 -31.265 C 97.299 -31.565 97.865 -31.915 98.399 -32.315 C 99.165 -32.881 99.765 -33.531 100.199 -34.265 C 100.532 -34.898 100.915 -35.915 101.349 -37.315 C 101.749 -38.548 101.949 -39.965 101.949 -41.565 L 102.149 -52.965 L 102.599 -55.115 C 102.832 -55.815 103.215 -56.381 103.749 -56.815 C 104.249 -57.181 104.949 -57.365 105.849 -57.365 L 108.749 -57.365 Z" style="fill: rgb(175, 110, 36); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, -0.000004, -0.000028)"/>
+ <path d="M 15.325 -57.155 L 15.325 -60.805 L 11.425 -60.805 C 9.225 -60.805 7.591 -60.072 6.525 -58.605 C 5.458 -57.139 4.925 -55.305 4.925 -53.105 L 4.225 -39.355 C 4.058 -38.155 3.741 -37.105 3.275 -36.205 C 2.841 -35.239 2.258 -34.422 1.525 -33.755 C 1.225 -33.422 0.841 -33.189 0.375 -33.055 C 0.108 -32.922 -0.342 -32.789 -0.975 -32.655 L -0.975 -29.205 C -0.242 -29.072 0.208 -28.972 0.375 -28.905 C 0.841 -28.772 1.225 -28.589 1.525 -28.355 C 2.258 -27.822 2.825 -27.122 3.225 -26.255 C 4.291 -23.855 4.825 -21.489 4.825 -19.155 L 4.825 -8.705 C 4.825 -6.305 5.425 -4.389 6.625 -2.955 C 7.825 -1.522 9.375 -0.805 11.275 -0.805 L 15.325 -0.805 L 15.325 -4.555 L 12.425 -4.555 C 11.658 -4.555 11.025 -4.755 10.525 -5.155 C 9.991 -5.622 9.608 -6.172 9.375 -6.805 L 8.825 -9.055 L 8.675 -11.355 L 8.525 -21.005 C 8.525 -22.505 8.341 -23.839 7.975 -25.005 C 7.541 -26.439 7.158 -27.439 6.825 -28.005 C 6.258 -28.872 5.675 -29.539 5.075 -30.005 C 4.508 -30.472 3.908 -30.822 3.275 -31.055 C 3.875 -31.355 4.441 -31.705 4.975 -32.105 C 5.741 -32.672 6.341 -33.322 6.775 -34.055 C 7.108 -34.689 7.491 -35.705 7.925 -37.105 C 8.325 -38.339 8.525 -39.755 8.525 -41.355 L 8.725 -52.755 L 9.175 -54.905 C 9.408 -55.605 9.791 -56.172 10.325 -56.605 C 10.825 -56.972 11.525 -57.155 12.425 -57.155 L 15.325 -57.155 Z" style="fill: rgb(175, 110, 36);"/>
+ </g>
+ </g>
+ <text id="text-9" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 4.89804px; font-weight: 700; line-height: 19.9484px; white-space: pre;" transform="matrix(1.374145, 0, 0, 1.314286, 83.283821, 89.215279)" x="263.861" y="-70.535">undefined</text>
+ <text id="text-10" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 4.89804px; font-weight: 700; line-height: 19.9484px; white-space: pre;" transform="matrix(1.374145, 0, 0, 1.314286, 82.957924, 122.90126)" x="263.861" y="-70.535">undefined</text>
+ </g>
+ <g transform="matrix(0.3355039954185486, 0, 0, 0.3355039954185486, 67.31304168701172, -387.90008544921875)" style="">
+ <g transform="matrix(0.178489, 0, 0, 0.175502, 747.077209, 776.317017)" style="">
+ <path d="M 267.184 437.8 C 267.184 466.3 290.384 489.4 318.784 489.4 L 704.984 489.4 C 733.484 489.4 756.584 466.2 756.584 437.8 L 756.584 51.6 C 756.584 23.1 733.384 0 704.984 0 L 318.784 0 C 290.284 0 267.184 23.2 267.184 51.6 C 267.184 51.6 267.184 437.8 267.184 437.8 Z M 704.984 464.9 L 318.784 464.9 C 303.884 464.9 291.684 452.7 291.684 437.8 L 291.684 373.3 L 384.484 280.5 L 463.784 359.8 C 468.584 364.6 476.284 364.6 481.084 359.8 L 624.284 216.6 L 732.084 324.4 L 732.084 437.8 C 732.084 452.7 719.884 464.9 704.984 464.9 Z M 318.784 24.5 L 704.984 24.5 C 719.884 24.5 732.084 36.7 732.084 51.6 L 732.084 289.7 L 632.884 190.6 C 628.084 185.8 620.384 185.8 615.584 190.6 L 472.384 333.8 L 393.084 254.5 C 388.284 249.7 380.584 249.7 375.784 254.5 L 291.684 338.6 L 291.684 51.6 C 291.684 36.7 303.884 24.5 318.784 24.5 Z" style="fill: rgb(175, 110, 36);"/>
+ <path d="M 418.884 196.1 C 453.284 196.1 481.184 168.1 481.184 133.8 C 481.184 99.5 453.184 71.5 418.884 71.5 C 384.584 71.5 356.584 99.5 356.584 133.8 C 356.584 168.1 384.484 196.1 418.884 196.1 Z M 418.884 96 C 439.784 96 456.684 113 456.684 133.8 C 456.684 154.6 439.684 171.6 418.884 171.6 C 398.084 171.6 381.084 154.6 381.084 133.8 C 381.084 113 397.984 96 418.884 96 Z" style="fill: rgb(175, 110, 36);"/>
+ </g>
+ </g>
+ <path d="M -161.945 -20.71 L -152.75 -5.287 L -171.141 -5.287 L -161.945 -20.71 Z" style="fill-rule: nonzero; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -1, -1, -0.00008700000762473792, 281.66448974609375, -149.3444061279297)" bx:shape="triangle -171.141 -20.71 18.391 15.423 0.5 0 1@d86e5ee8"/>
+ <rect x="179.461" y="-180.566" width="3.4" height="13.026" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -1, 1, 0.00008700000762473792, 323.07061767578125, 192.94052124023438)"/>
+ <rect x="179.444" y="-153.479" width="3.4" height="13.026" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -1, 1, 0.00008700000762473792, 323.07061767578125, 192.94052124023438)"/>
+ <rect x="179.444" y="-127.103" width="3.4" height="13.026" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -1, 1, 0.00008700000762473792, 323.07061767578125, 192.94052124023438)"/>
+ <rect x="179.461" y="-183.883" width="3.4" height="13.339" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -1, 1, 0.00008700000762473792, 404.8572998046875, 193.0087127685547)"/>
+ <rect x="179.444" y="-157.171" width="3.4" height="13.339" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -1, 1, 0.00008700000762473792, 404.8572998046875, 193.0087127685547)"/>
+ <rect x="179.444" y="-130.16" width="3.4" height="13.339" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -1, 1, 0.00008700000762473792, 404.8572998046875, 193.0087127685547)"/>
+ <text id="text-8" style="fill: rgb(172, 67, 67); font-family: 'Open Sans'; font-size: 9.73113px; font-style: italic; white-space: pre;" transform="matrix(1.775291919708252, 0, 0, 1.9524970054626465, -325.1152648925781, 140.8204803466797)" x="263.861" y="-70.535">WeakRef object</text>
+ <path d="M 318.601 -16.998 L 318.601 -19.573 L 315.66 -19.573 C 314.001 -19.573 312.769 -19.055 311.964 -18.021 C 311.16 -16.986 310.758 -15.693 310.758 -14.141 L 310.23 -4.441 C 310.104 -3.594 309.865 -2.853 309.513 -2.218 C 309.186 -1.536 308.746 -0.96 308.193 -0.49 C 307.967 -0.255 307.678 -0.09 307.326 0.004 C 307.125 0.098 306.786 0.192 306.308 0.286 L 306.308 2.72 C 306.861 2.814 307.2 2.884 307.326 2.931 C 307.678 3.025 307.967 3.155 308.193 3.319 C 308.746 3.696 309.174 4.189 309.475 4.801 C 310.28 6.494 310.682 8.163 310.682 9.81 L 310.682 17.181 C 310.682 18.875 311.135 20.227 312.04 21.238 C 312.945 22.249 314.114 22.755 315.547 22.755 L 318.601 22.755 L 318.601 20.109 L 316.414 20.109 C 315.836 20.109 315.358 19.968 314.981 19.686 C 314.579 19.357 314.29 18.969 314.114 18.522 L 313.699 16.935 L 313.586 15.312 L 313.473 8.504 C 313.473 7.446 313.334 6.506 313.058 5.683 C 312.731 4.671 312.442 3.966 312.191 3.566 C 311.763 2.955 311.323 2.485 310.871 2.155 C 310.443 1.826 309.991 1.579 309.513 1.415 C 309.966 1.203 310.393 0.956 310.795 0.674 C 311.373 0.274 311.826 -0.184 312.153 -0.702 C 312.404 -1.148 312.693 -1.866 313.02 -2.853 C 313.322 -3.723 313.473 -4.723 313.473 -5.852 L 313.623 -13.894 L 313.963 -15.41 C 314.139 -15.904 314.428 -16.304 314.83 -16.61 C 315.207 -16.868 315.735 -16.998 316.414 -16.998 L 318.601 -16.998 Z" style="fill: rgb(175, 110, 36);"/>
+ <path d="M 389.058 -17.145 L 389.058 -19.72 L 386.117 -19.72 C 384.458 -19.72 383.226 -19.203 382.421 -18.168 C 381.617 -17.134 381.215 -15.84 381.215 -14.288 L 380.687 -4.588 C 380.561 -3.742 380.322 -3.001 379.97 -2.366 C 379.644 -1.684 379.204 -1.108 378.651 -0.638 C 378.424 -0.403 378.135 -0.238 377.783 -0.144 C 377.582 -0.05 377.243 0.044 376.765 0.138 L 376.765 2.572 C 377.318 2.666 377.658 2.737 377.783 2.784 C 378.135 2.878 378.424 3.007 378.651 3.172 C 379.204 3.548 379.631 4.042 379.933 4.653 C 380.737 6.346 381.139 8.016 381.139 9.662 L 381.139 17.034 C 381.139 18.727 381.592 20.079 382.497 21.09 C 383.402 22.101 384.571 22.607 386.004 22.607 L 389.058 22.607 L 389.058 19.961 L 386.871 19.961 C 386.293 19.961 385.815 19.82 385.438 19.538 C 385.036 19.209 384.747 18.821 384.571 18.374 L 384.156 16.787 L 384.043 15.164 L 383.93 8.357 C 383.93 7.299 383.792 6.358 383.515 5.535 C 383.188 4.524 382.899 3.818 382.648 3.419 C 382.22 2.807 381.78 2.337 381.328 2.008 C 380.901 1.679 380.448 1.432 379.97 1.267 C 380.423 1.055 380.85 0.808 381.253 0.526 C 381.831 0.127 382.283 -0.332 382.61 -0.849 C 382.861 -1.296 383.151 -2.013 383.477 -3.001 C 383.779 -3.871 383.93 -4.87 383.93 -5.999 L 384.081 -14.041 L 384.42 -15.558 C 384.596 -16.052 384.885 -16.452 385.287 -16.757 C 385.664 -17.016 386.192 -17.145 386.871 -17.145 L 389.058 -17.145 Z" style="fill: rgb(175, 110, 36); transform-origin: 382.912px 1.4435px;" transform="matrix(-1, 0, 0, -1, 0, -0.000015020371)"/>
+</svg>
\ No newline at end of file
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-05.svg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-05.svg
new file mode 100644
index 000000000..e738f8e7e
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-05.svg
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="-56.888 -599965.495 896063.875 604140.645" width="420.466px" height="300.516px" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
+ <defs>
+ <style bx:fonts="Open Sans">@import url(https://fonts.googleapis.com/css2?family=Open+Sans%3Aital%2Cwght%400%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C600%3B1%2C700%3B1%2C800&display=swap);</style>
+ </defs>
+ <g id="memory-user-john-admin.svg" transform="matrix(3405.68798828125, 0, 0, 3405.68798828125, -789862.25, -296077.03124999994)" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1" style="">
+ <path id="path-1" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 234.068 -87.403 L 333.494 -87.403 L 333.494 -57.762 L 234.068 -57.762 L 234.068 -87.403 Z" style=""/>
+ <path id="path-2" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 336.651 -87.403 L 492.549 -87.403 L 492.549 -57.762 L 336.651 -57.762 L 336.651 -87.403 Z" style=""/>
+ <path id="path-3" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 234.068 -53.711 L 333.494 -53.711 L 333.494 -24.07 L 234.068 -24.07 L 234.068 -53.711 Z" style=""/>
+ <path id="path-4" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 336.651 -53.711 L 492.783 -53.711 L 492.783 -24.07 L 336.651 -24.07 L 336.651 -53.711 Z" style=""/>
+ <g transform="matrix(1, 0, 0, 1, 0, 42.135864)">
+ <path id="path-5" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 234.189 -20.462 L 333.615 -20.462 L 333.615 9.179 L 234.189 9.179 L 234.189 -20.462 Z" style=""/>
+ <path id="path-6" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 336.791 -20.462 L 493.057 -20.462 L 493.057 9.179 L 336.791 9.179 L 336.791 -20.462 Z" style=""/>
+ <path id="path-7" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 234.068 13.088 L 333.494 13.088 L 333.494 43.59 L 234.068 43.59 L 234.068 13.088 Z" style=""/>
+ <path id="path-8" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M 336.651 13.088 L 493.054 13.088 L 493.054 43.59 L 336.651 43.59 L 336.651 13.088 Z" style=""/>
+ <text id="text-4" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 14px; white-space: pre;" transform="matrix(1.054877, 0, 0, 1.142641, -39.02475, 80.086914)" x="263.861" y="-70.535">image-02.jpg</text>
+ <text id="text-5" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 14px; white-space: pre;" transform="matrix(1.054877, 0, 0, 1.142641, -39.468063, 113.637062)" x="263.861" y="-70.535">image-03.jpg</text>
+ </g>
+ <text id="<global>" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 11.5772px; font-weight: 600; line-height: 19.9484px; white-space: pre;" transform="matrix(1.374145, 0, 0, 1.314286, -102.41082, 25.040792)" x="263.861" y="-70.535">key</text>
+ <text id="text-2" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 11.5772px; font-weight: 600; line-height: 19.9484px; white-space: pre;" transform="matrix(1.374145, 0, 0, 1.314286, 13.577469, 25.203112)" x="263.861" y="-70.535">value</text>
+ <text id="text-3" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 14px; white-space: pre;" transform="matrix(1.071654, 0, 0, 1.142641, -43.57296, 46.390514)" x="263.861" y="-70.535">image-01.jpg</text>
+ <g transform="matrix(0.000041, -1, 1.521843, 0.000133, 289.017426, 2.750529)" style="transform-origin: 105.999px -35.503px;">
+ <path d="M 105.537 7.964 L 110.918 13.895 L 100.155 13.895 L 105.537 7.964 Z" style="fill-rule: nonzero; fill: rgb(172, 67, 67);" transform="matrix(1, 0, 0, -1, 0, 0)" bx:shape="triangle 100.155 7.964 10.763 5.931 0.5 0 1@87a4267a"/>
+ <g>
+ <rect x="105.024" y="-69.436" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-59.02" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-48.877" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <g transform="matrix(1, 0, 0, 1, 10.348016, -60.719521)"/>
+ <g transform="matrix(1, 0, 0, 1, 10.356147, 0.41661)"/>
+ <g transform="matrix(1, 0, 0, 1, 10.161898, 52.045895)"/>
+ <g transform="matrix(1, 0, 0, 1, -23.594774, -60.719116)">
+ <rect x="79.597" y="-80.351" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="79.587" y="-69.935" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="79.587" y="-59.792" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="79.561" y="-50.176" width="1.99" height="5.129" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="79.551" y="-39.904" width="1.99" height="5.129" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="79.551" y="-29.517" width="1.99" height="5.129" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ </g>
+ <g transform="matrix(1, 0, 0, 1, -23.586773, 0.417928)">
+ <rect x="79.597" y="-80.351" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="79.587" y="-69.935" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="79.587" y="-59.792" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="79.561" y="-50.176" width="1.99" height="5.129" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="79.551" y="-39.904" width="1.99" height="5.129" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ </g>
+ <g transform="matrix(1, 0, 0, 1, -23.780775, 52.046886)">
+ <rect x="79.798" y="-80.298" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="79.587" y="-69.935" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="79.587" y="-59.792" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="79.561" y="-50.176" width="1.99" height="5.129" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="79.551" y="-39.904" width="1.99" height="5.129" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="79.551" y="-29.517" width="1.99" height="5.129" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ </g>
+ </g>
+ <g transform="matrix(1, 0, 0, 1.024052, -0.03572, 31.45084)" style="">
+ <rect x="105.024" y="-69.051" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-59.02" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ <rect x="105.014" y="-48.877" width="1.99" height="5.009" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);"/>
+ </g>
+ </g>
+ <text id="text-6" style="fill: rgb(172, 67, 67); font-family: 'Open Sans'; font-size: 9.73113px; font-style: italic; white-space: pre;" transform="matrix(1.038937, 0, 0, 1.142641, 69.710487, 42.749538)" x="263.861" y="-70.535">WeakRef object</text>
+ <g transform="matrix(0.441364, 0, 0, 0.412845, 420.761139, -59.372555)" style="">
+ <g>
+ <path d=" M 58.15 23.65 L 58.15 20 54.25 20 Q 50.95 20 49.35 22.2 47.75 24.4 47.75 27.7 L 47.05 41.45 Q 46.8 43.25 46.1 44.6 45.45 46.05 44.35 47.05 43.9 47.55 43.2 47.75 42.8 47.95 41.85 48.15 L 41.85 51.6 Q 42.95 51.8 43.2 51.9 43.9 52.1 44.35 52.45 45.45 53.25 46.05 54.55 47.65 58.15 47.65 61.65 L 47.65 72.1 Q 47.65 75.7 49.45 77.85 51.25 80 54.1 80 L 58.15 80 58.15 76.25 55.25 76.25 Q 54.1 76.25 53.35 75.65 52.55 74.95 52.2 74 L 51.65 71.75 51.5 69.45 51.35 59.8 Q 51.35 57.55 50.8 55.8 50.15 53.65 49.65 52.8 48.8 51.5 47.9 50.8 47.05 50.1 46.1 49.75 47 49.3 47.8 48.7 48.95 47.85 49.6 46.75 50.1 45.8 50.75 43.7 51.35 41.85 51.35 39.45 L 51.55 28.05 52 25.9 Q 52.35 24.85 53.15 24.2 53.9 23.65 55.25 23.65 L 58.15 23.65 Z" style="fill: rgb(175, 110, 36);"/>
+ </g>
+ </g>
+ <g transform="matrix(-0.441364, 0, 0, -0.412845, 414.750092, -88.816727)" style="transform-origin: 50px 50px;">
+ <g>
+ <path d="M 14.392 23.65 L 14.392 20 L 10.492 20 C 8.292 20 6.659 20.733 5.592 22.2 C 4.525 23.667 3.992 25.5 3.992 27.7 L 3.292 41.45 C 3.125 42.65 2.809 43.7 2.342 44.6 C 1.909 45.567 1.325 46.383 0.592 47.05 C 0.292 47.383 -0.091 47.617 -0.558 47.75 C -0.825 47.883 -1.275 48.017 -1.908 48.15 L -1.908 51.6 C -1.175 51.733 -0.725 51.833 -0.558 51.9 C -0.091 52.033 0.292 52.217 0.592 52.45 C 1.325 52.983 1.892 53.683 2.292 54.55 C 3.359 56.95 3.892 59.317 3.892 61.65 L 3.892 72.1 C 3.892 74.5 4.492 76.417 5.692 77.85 C 6.892 79.283 8.442 80 10.342 80 L 14.392 80 L 14.392 76.25 L 11.492 76.25 C 10.725 76.25 10.092 76.05 9.592 75.65 C 9.059 75.183 8.675 74.633 8.442 74 L 7.892 71.75 L 7.742 69.45 L 7.592 59.8 C 7.592 58.3 7.409 56.967 7.042 55.8 C 6.609 54.367 6.225 53.367 5.892 52.8 C 5.325 51.933 4.742 51.267 4.142 50.8 C 3.575 50.333 2.975 49.983 2.342 49.75 C 2.942 49.45 3.509 49.1 4.042 48.7 C 4.809 48.133 5.409 47.483 5.842 46.75 C 6.175 46.117 6.559 45.1 6.992 43.7 C 7.392 42.467 7.592 41.05 7.592 39.45 L 7.792 28.05 L 8.242 25.9 C 8.475 25.2 8.859 24.633 9.392 24.2 C 9.892 23.833 10.592 23.65 11.492 23.65 L 14.392 23.65 Z" style="fill: rgb(175, 110, 36);"/>
+ <path d="M 255.632 27.46 L 268.667 47.91 L 242.597 47.91 L 255.632 27.46 Z" style="fill-rule: nonzero; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, 1, 0.000093, 86.522967, -404.320629)" bx:shape="triangle 242.597 27.46 26.07 20.45 0.5 0 1@97f9cc39"/>
+ <rect x="254.391" y="-239.419" width="4.82" height="17.271" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, 86.522728, -404.32132)"/>
+ <rect x="254.367" y="-203.504" width="4.82" height="17.271" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, 86.522728, -404.32132)"/>
+ <rect x="254.367" y="-168.53" width="4.82" height="17.271" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, 86.522728, -404.32132)"/>
+ <rect x="254.391" y="-243.818" width="4.82" height="17.687" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, -21.921179, -404.417969)"/>
+ <rect x="254.367" y="-208.398" width="4.82" height="17.687" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, -21.921179, -404.417969)"/>
+ <rect x="254.367" y="-172.584" width="4.82" height="17.687" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(-0.000038, 1, -1, -0.000093, -21.921179, -404.417969)"/>
+ <text id="text-7" style="fill: rgb(172, 67, 67); font-family: 'Open Sans'; font-size: 9.73113px; font-style: italic; white-space: pre;" transform="matrix(-2.353923, 0, 0, -2.767724, 945.975708, -330.43927)" x="263.861" y="-70.535">WeakRef object</text>
+ <path d="M 108.749 -159.455 L 108.749 -163.105 L 104.849 -163.105 C 102.649 -163.105 101.015 -162.371 99.949 -160.905 C 98.882 -159.438 98.349 -157.605 98.349 -155.405 L 97.649 -141.655 C 97.482 -140.455 97.165 -139.405 96.699 -138.505 C 96.265 -137.538 95.682 -136.721 94.949 -136.055 C 94.649 -135.721 94.265 -135.488 93.799 -135.355 C 93.532 -135.221 93.082 -135.088 92.449 -134.955 L 92.449 -131.505 C 93.182 -131.371 93.632 -131.271 93.799 -131.205 C 94.265 -131.071 94.649 -130.888 94.949 -130.655 C 95.682 -130.121 96.249 -129.421 96.649 -128.555 C 97.715 -126.155 98.249 -123.788 98.249 -121.455 L 98.249 -111.005 C 98.249 -108.605 98.849 -106.688 100.049 -105.255 C 101.249 -103.821 102.799 -103.105 104.699 -103.105 L 108.749 -103.105 L 108.749 -106.855 L 105.849 -106.855 C 105.082 -106.855 104.449 -107.055 103.949 -107.455 C 103.415 -107.921 103.032 -108.471 102.799 -109.105 L 102.249 -111.355 L 102.099 -113.655 L 101.949 -123.305 C 101.949 -124.805 101.765 -126.138 101.399 -127.305 C 100.965 -128.738 100.582 -129.738 100.249 -130.305 C 99.682 -131.171 99.099 -131.838 98.499 -132.305 C 97.932 -132.771 97.332 -133.121 96.699 -133.355 C 97.299 -133.655 97.865 -134.005 98.399 -134.405 C 99.165 -134.971 99.765 -135.621 100.199 -136.355 C 100.532 -136.988 100.915 -138.005 101.349 -139.405 C 101.749 -140.638 101.949 -142.055 101.949 -143.655 L 102.149 -155.055 L 102.599 -157.205 C 102.832 -157.905 103.215 -158.471 103.749 -158.905 C 104.249 -159.271 104.949 -159.455 105.849 -159.455 L 108.749 -159.455 Z" style="fill: rgb(175, 110, 36); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, -0.000041, -0.000044)"/>
+ <path d="M 15.325 -159.251 L 15.325 -162.901 L 11.425 -162.901 C 9.225 -162.901 7.591 -162.168 6.525 -160.701 C 5.458 -159.235 4.925 -157.401 4.925 -155.201 L 4.225 -141.451 C 4.058 -140.251 3.741 -139.201 3.275 -138.301 C 2.841 -137.335 2.258 -136.518 1.525 -135.851 C 1.225 -135.518 0.841 -135.285 0.375 -135.151 C 0.108 -135.018 -0.342 -134.885 -0.975 -134.751 L -0.975 -131.301 C -0.242 -131.168 0.208 -131.068 0.375 -131.001 C 0.841 -130.868 1.225 -130.685 1.525 -130.451 C 2.258 -129.918 2.825 -129.218 3.225 -128.351 C 4.291 -125.951 4.825 -123.585 4.825 -121.251 L 4.825 -110.801 C 4.825 -108.401 5.425 -106.485 6.625 -105.051 C 7.825 -103.618 9.375 -102.901 11.275 -102.901 L 15.325 -102.901 L 15.325 -106.651 L 12.425 -106.651 C 11.658 -106.651 11.025 -106.851 10.525 -107.251 C 9.991 -107.718 9.608 -108.268 9.375 -108.901 L 8.825 -111.151 L 8.675 -113.451 L 8.525 -123.101 C 8.525 -124.601 8.341 -125.935 7.975 -127.101 C 7.541 -128.535 7.158 -129.535 6.825 -130.101 C 6.258 -130.968 5.675 -131.635 5.075 -132.101 C 4.508 -132.568 3.908 -132.918 3.275 -133.151 C 3.875 -133.451 4.441 -133.801 4.975 -134.201 C 5.741 -134.768 6.341 -135.418 6.775 -136.151 C 7.108 -136.785 7.491 -137.801 7.925 -139.201 C 8.325 -140.435 8.525 -141.851 8.525 -143.451 L 8.725 -154.851 L 9.175 -157.001 C 9.408 -157.701 9.791 -158.268 10.325 -158.701 C 10.825 -159.068 11.525 -159.251 12.425 -159.251 L 15.325 -159.251 Z" style="fill: rgb(175, 110, 36);"/>
+ </g>
+ </g>
+ <text id="text-9" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 4.89804px; font-weight: 700; line-height: 19.9484px; white-space: pre;" transform="matrix(1.374145, 0, 0, 1.314286, 83.283821, 131.351151)" x="263.861" y="-70.535">undefined</text>
+ <text id="text-10" style="fill: rgb(175, 110, 36); font-family: 'Open Sans'; font-size: 4.89804px; font-weight: 700; line-height: 19.9484px; white-space: pre;" transform="matrix(1.374145, 0, 0, 1.314286, 82.957924, 165.037125)" x="263.861" y="-70.535">undefined</text>
+ <text id="text-11" style="fill: rgb(172, 67, 67); font-family: 'Open Sans'; font-size: 9.73113px; font-style: italic; white-space: pre;" transform="matrix(1.038937, 0, 0, 1.142641, -18.813889, 90.723404)" x="263.861" y="-70.535">Deleted by FinalizationRegistry cleanup callback</text>
+ </g>
+ <g transform="matrix(668.68603515625, 0, 0, 668.68603515625, 227309.90625, -975180.6875)" style="">
+ <g transform="matrix(0.178489, 0, 0, 0.175502, 747.077209, 776.317017)" style="">
+ <path d="M 267.184 437.8 C 267.184 466.3 290.384 489.4 318.784 489.4 L 704.984 489.4 C 733.484 489.4 756.584 466.2 756.584 437.8 L 756.584 51.6 C 756.584 23.1 733.384 0 704.984 0 L 318.784 0 C 290.284 0 267.184 23.2 267.184 51.6 C 267.184 51.6 267.184 437.8 267.184 437.8 Z M 704.984 464.9 L 318.784 464.9 C 303.884 464.9 291.684 452.7 291.684 437.8 L 291.684 373.3 L 384.484 280.5 L 463.784 359.8 C 468.584 364.6 476.284 364.6 481.084 359.8 L 624.284 216.6 L 732.084 324.4 L 732.084 437.8 C 732.084 452.7 719.884 464.9 704.984 464.9 Z M 318.784 24.5 L 704.984 24.5 C 719.884 24.5 732.084 36.7 732.084 51.6 L 732.084 289.7 L 632.884 190.6 C 628.084 185.8 620.384 185.8 615.584 190.6 L 472.384 333.8 L 393.084 254.5 C 388.284 249.7 380.584 249.7 375.784 254.5 L 291.684 338.6 L 291.684 51.6 C 291.684 36.7 303.884 24.5 318.784 24.5 Z" style="fill: rgb(175, 110, 36);"/>
+ <path d="M 418.884 196.1 C 453.284 196.1 481.184 168.1 481.184 133.8 C 481.184 99.5 453.184 71.5 418.884 71.5 C 384.584 71.5 356.584 99.5 356.584 133.8 C 356.584 168.1 384.484 196.1 418.884 196.1 Z M 418.884 96 C 439.784 96 456.684 113 456.684 133.8 C 456.684 154.6 439.684 171.6 418.884 171.6 C 398.084 171.6 381.084 154.6 381.084 133.8 C 381.084 113 397.984 96 418.884 96 Z" style="fill: rgb(175, 110, 36);"/>
+ </g>
+ </g>
+ <path d="M 359424.367 41276.336 L 377751.896 72015.889 L 341096.837 72015.889 L 359424.367 41276.336 Z" style="fill-rule: nonzero; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -1, -1, -0.00008700000762473792, 737054.1250000001, 325983.1250000001)" bx:shape="triangle 341096.837 41276.336 36655.059 30739.553 0.5 0 1@d50babe8"/>
+ <rect x="357681.08" y="-359881.579" width="6776.286" height="25963.08" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -1, 1, 0.00008700000762473792, 737054.6250000001, 325981.3125000001)"/>
+ <rect x="357644.501" y="-305895.331" width="6776.286" height="25963.08" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -1, 1, 0.00008700000762473792, 737054.6250000001, 325981.3125000001)"/>
+ <rect x="357644.501" y="-253326.04" width="6776.286" height="25963.08" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -1, 1, 0.00008700000762473792, 737054.6250000001, 325981.3125000001)"/>
+ <rect x="357681.08" y="-366492.978" width="6776.286" height="26586.395" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -1, 1, 0.00008700000762473792, 900061.8125000001, 326117.2187500001)"/>
+ <rect x="357644.501" y="-313254.567" width="6776.286" height="26586.395" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -1, 1, 0.00008700000762473792, 900061.8125000001, 326117.2187500001)"/>
+ <rect x="357644.501" y="-259418.129" width="6776.286" height="26586.395" style="paint-order: stroke; stroke: rgb(53, 81, 138); stroke-width: 0px; fill: rgb(172, 67, 67);" transform="matrix(0.00004100000296602957, -1, 1, 0.00008700000762473792, 900061.8125000001, 326117.2187500001)"/>
+ <text id="text-8" style="fill: rgb(172, 67, 67); font-family: 'Open Sans'; font-size: 9.73113px; font-style: italic; white-space: pre;" transform="matrix(3538.295166015625, 0, 0, 3891.478759765625, -554830.25, 222101.96875)" x="263.861" y="-70.535">WeakRef object</text>
+ <path d="M 728146.338 -92443.632 L 728146.338 -97574.712 L 722284.793 -97574.712 C 718978.199 -97574.712 716523.314 -96542.53 714919.193 -94480.927 C 713316.016 -92418.404 712514.341 -89841.53 712514.341 -86748.938 L 711462.052 -67415.4 C 711210.096 -65727.244 710734.892 -64250.108 710033.283 -62985.482 C 709382.304 -61626.233 708504.597 -60478.003 707402.151 -59541.042 C 706951.752 -59072.499 706375.587 -58743.915 705673.655 -58556.036 C 705273.289 -58368.007 704596.909 -58181.644 703645.158 -57993.168 L 703645.158 -53141.856 C 704747.605 -52953.853 705423.812 -52816.007 705673.655 -52721.682 C 706375.587 -52533.653 706951.752 -52275.956 707402.151 -51947.819 C 708504.597 -51196.774 709359.189 -50215.843 709957.252 -48995.062 C 711561.373 -45621.509 712363.794 -42293.888 712363.794 -39012.547 L 712363.794 -24320.941 C 712363.794 -20946.169 713265.063 -18250.364 715069.292 -16236.209 C 716874.118 -14219.916 719201.895 -13211.347 722059.73 -13211.347 L 728146.338 -13211.347 L 728146.338 -18485.095 L 723786.735 -18485.095 C 722635.597 -18485.095 721683.847 -18767.275 720932.205 -19327.881 C 720129.784 -19984.452 719554.812 -20757.843 719201.895 -21648.25 L 718377.253 -24810.511 L 718150.525 -28045.597 L 717925.463 -41615.096 C 717925.463 -43722.656 717648.726 -45597.921 717099.007 -47236.193 C 716447.133 -49254.872 715870.968 -50660.078 715370.511 -51456.161 C 714517.162 -52674.979 713641.12 -53612.089 712740.149 -54268.661 C 711885.582 -54925.978 710986.4 -55416.741 710033.283 -55743.536 C 710935.472 -56166.271 711786.261 -56657.059 712587.937 -57219.753 C 713740.267 -58016.755 714644.122 -58930.278 715294.33 -59961.987 C 715794.787 -60852.37 716371.101 -62282.655 717022.975 -64250.108 C 717625.611 -65984.196 717925.463 -67976.901 717925.463 -70227.453 L 718225.811 -86255.615 L 718902.938 -89277.444 C 719252.823 -90261.705 719829.908 -91059.9 720629.445 -91669.769 C 721380.938 -92183.673 722434.122 -92443.632 723786.735 -92443.632 L 728146.338 -92443.632 Z" style="fill: rgb(175, 110, 36);"/>
+ <path d="M 868579.948 -92734.348 L 868579.948 -97866.322 L 862717.955 -97866.322 C 859411.336 -97866.322 856954.786 -96837.173 855350.69 -94775.421 C 853747.488 -92713.793 852947.926 -90134.359 852947.926 -87041.916 L 851895.661 -67707.906 C 851643.706 -66022.185 851168.054 -64545.67 850465.228 -63278.459 C 849816.809 -61920.428 848939.872 -60773.094 847838.32 -59836.43 C 847385.039 -59366.993 846807.506 -59039.453 846107.264 -58850.977 C 845705.979 -58662.948 845032.333 -58476.734 844077.55 -58288.705 L 844077.55 -53438.165 C 845180.295 -53250.136 845856.974 -53108.363 846107.264 -53014.659 C 846807.506 -52828.296 847385.039 -52570.897 847838.32 -52242.462 C 848939.872 -51491.715 849788.996 -50508.374 850393.421 -49291.196 C 851994.957 -45916.599 852795.738 -42588.531 852795.738 -39308.084 L 852795.738 -24614.217 C 852795.738 -21238.7 853699.12 -18545.753 855503.051 -16529.485 C 857306.038 -14515.33 859635.504 -13506.885 862491.674 -13506.885 L 868579.948 -13506.885 L 868579.948 -18781.23 L 864220.319 -18781.23 C 863067.542 -18781.23 862114.424 -19061.47 861364.149 -19624.164 C 860562.474 -20278.623 859988.421 -21052.486 859635.504 -21943.639 L 858809.496 -25105.899 L 858584.135 -28341.01 L 858357.407 -41908.844 C 858357.407 -44017.15 858082.336 -45890.452 857532.617 -47532.477 C 856880.42 -49546.483 856302.887 -50953.801 855803.201 -51749.114 C 854950.299 -52969.622 854074.73 -53906.708 853171.77 -54561.937 C 852320.832 -55217.589 851420.01 -55710.191 850465.228 -56038.154 C 851368.61 -56462.579 852219.573 -56952.447 853024.106 -57514.843 C 854174.772 -58310.926 855075.594 -59225.667 855727.194 -60256.63 C 856228.546 -61147.784 856806.351 -62576.08 857456.585 -64545.67 C 858057.531 -66279.609 858357.407 -68270.177 858357.407 -70520.281 L 858660.316 -86548.145 L 859335.33 -89573.007 C 859685.662 -90557.094 860263.045 -91354.096 861063.055 -91962.3 C 861814.548 -92479.061 862866.066 -92734.348 864220.319 -92734.348 L 868579.948 -92734.348 Z" style="fill: rgb(175, 110, 36); transform-origin: 856323px -55686.3px;" transform="matrix(-1, 0, 0, -1, 0.87500000055, -0.046875000444)"/>
+ <rect x="3810.427" y="-226324.344" width="889802.927" height="226474.243" style="stroke: rgb(0, 0, 0); stroke-opacity: 0; fill: rgb(172, 67, 67); opacity: 0.76;"/>
+</svg>
\ No newline at end of file
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-01.png b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-01.png
new file mode 100644
index 000000000..fc33a023a
Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-01.png differ
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-02.png b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-02.png
new file mode 100644
index 000000000..7d8bb01e8
Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-02.png differ
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-03.gif b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-03.gif
new file mode 100644
index 000000000..b81966dda
Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-03.gif differ
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-04.jpg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-04.jpg
new file mode 100644
index 000000000..ba60f1e86
Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-04.jpg differ
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-05.gif b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-05.gif
new file mode 100644
index 000000000..d34bda4d7
Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-05.gif differ
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-06.jpg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-06.jpg
new file mode 100644
index 000000000..b2655540f
Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-06.jpg differ
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-07.gif b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-07.gif
new file mode 100644
index 000000000..51f874518
Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-07.gif differ
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-08.jpg b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-08.jpg
new file mode 100644
index 000000000..5f98aec14
Binary files /dev/null and b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-08.jpg differ
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.css b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.css
new file mode 100644
index 000000000..e6c9e3960
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.css
@@ -0,0 +1,285 @@
+:root {
+ --mineralGreen: 60, 98, 85;
+ --viridianGreen: 97, 135, 110;
+ --swampGreen: 166, 187, 141;
+ --fallGreen: 234, 231, 177;
+ --brinkPink: #FA7070;
+ --silverChalice: 178, 178, 178;
+ --white: 255, 255, 255;
+ --black: 0, 0, 0;
+
+ --topBarHeight: 64px;
+ --itemPadding: 32px;
+ --containerGap: 8px;
+}
+
+@keyframes zoom-in {
+ 0% {
+ transform: scale(1, 1);
+ }
+
+ 100% {
+ transform: scale(1.30, 1.30);
+ }
+}
+
+body, html {
+ margin: 0;
+ padding: 0;
+}
+
+.app {
+ min-height: 100vh;
+ background-color: rgba(var(--viridianGreen), 0.5);
+}
+
+.header {
+ height: var(--topBarHeight);
+ padding: 0 24px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: rgba(var(--mineralGreen), 1);
+}
+
+.header-text {
+ color: white;
+}
+
+.container {
+ display: flex;
+ gap: 24px;
+ padding: var(--itemPadding);
+}
+
+.item {
+ width: 50%;
+}
+
+.item--scrollable {
+ overflow-y: scroll;
+ height: calc(100vh - var(--topBarHeight) - (var(--itemPadding) * 2));
+}
+
+.thumbnails-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ justify-content: center;
+ align-items: center;
+}
+
+.thumbnail-item {
+ width: calc(25% - var(--containerGap));
+ cursor: pointer;
+ position: relative;
+}
+
+.thumbnail-item:hover {
+ z-index: 1;
+ animation: zoom-in 0.1s forwards;
+}
+
+.thumbnail-item--selected {
+ outline: 3px solid rgba(var(--fallGreen), 1);
+ outline-offset: -3px;
+}
+
+.badge {
+ width: 16px;
+ height: 16px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 4px;
+ position: absolute;
+ right: 8px;
+ bottom: 8px;
+ border-radius: 50%;
+ border: 2px solid rgba(var(--fallGreen), 1);
+ background-color: rgba(var(--swampGreen), 1);
+}
+
+.check {
+ display: inline-block;
+ transform: rotate(45deg);
+ border-bottom: 2px solid white;
+ border-right: 2px solid white;
+ width: 6px;
+ height: 12px;
+}
+
+.img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.actions {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: center;
+ padding: 0 0 16px 0;
+ gap: 8px;
+}
+
+.select {
+ padding: 16px;
+ cursor: pointer;
+ font-weight: 700;
+ color: rgba(var(--black), 1);
+ border: 2px solid rgba(var(--swampGreen), 0.5);
+ background-color: rgba(var(--swampGreen), 1);
+}
+
+.select:disabled {
+ cursor: not-allowed;
+ background-color: rgba(var(--silverChalice), 1);
+ color: rgba(var(--black), 0.5);
+ border: 2px solid rgba(var(--black), 0.25);
+}
+
+.btn {
+ outline: none;
+ padding: 16px;
+ cursor: pointer;
+ font-weight: 700;
+ color: rgba(var(--black), 1);
+ border: 2px solid rgba(var(--black), 0.5);
+}
+
+.btn--primary {
+ background-color: rgba(var(--mineralGreen), 1);
+}
+
+.btn--primary:hover:not([disabled]) {
+ background-color: rgba(var(--mineralGreen), 0.85);
+}
+
+.btn--secondary {
+ background-color: rgba(var(--viridianGreen), 0.5);
+}
+
+.btn--secondary:hover:not([disabled]) {
+ background-color: rgba(var(--swampGreen), 0.25);
+}
+
+.btn--success {
+ background-color: rgba(var(--fallGreen), 1);
+}
+
+.btn--success:hover:not([disabled]) {
+ background-color: rgba(var(--fallGreen), 0.85);
+}
+
+.btn:disabled {
+ cursor: not-allowed;
+ background-color: rgba(var(--silverChalice), 1);
+ color: rgba(var(--black), 0.5);
+ border: 2px solid rgba(var(--black), 0.25);
+}
+
+.previewContainer {
+ margin-bottom: 16px;
+ display: flex;
+ width: 100%;
+ height: 40vh;
+ overflow: scroll;
+ border: 3px solid rgba(var(--black), 1);
+}
+
+.previewContainer--disabled {
+ background-color: rgba(var(--black), 0.1);
+ cursor: not-allowed;
+}
+
+.canvas {
+ margin: auto;
+ display: none;
+}
+
+.canvas--ready {
+ display: block;
+}
+
+.spinnerContainer {
+ display: flex;
+ gap: 8px;
+ flex-direction: column;
+ align-content: center;
+ align-items: center;
+ margin: auto;
+}
+
+.spinnerContainer--hidden {
+ display: none;
+}
+
+.spinnerText {
+ margin: 0;
+ color: rgba(var(--mineralGreen), 1);
+}
+
+.spinner {
+ display: inline-block;
+ width: 50px;
+ height: 50px;
+ margin: auto;
+ border: 3px solid rgba(var(--mineralGreen), 0.3);
+ border-radius: 50%;
+ border-top-color: rgba(var(--mineralGreen), 0.9);
+ animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.loggerContainer {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding: 0 8px 8px 8px;
+ width: 100%;
+ min-height: 30vh;
+ max-height: 30vh;
+ overflow: scroll;
+ border-left: 3px solid rgba(var(--black), 0.25);
+}
+
+.logger-title {
+ display: flex;
+ align-items: center;
+ padding: 8px;
+ position: sticky;
+ height: 40px;
+ min-height: 40px;
+ top: 0;
+ left: 0;
+ background-color: rgba(var(--viridianGreen), 1);
+ font-size: 24px;
+ font-weight: 700;
+ margin: 0;
+}
+
+.logger-item {
+ font-size: 14px;
+ padding: 8px;
+ border: 2px solid #5a5a5a;
+ color: white;
+}
+
+.logger--primary {
+ background-color: #13315a;
+}
+
+.logger--success {
+ background-color: #385a4e;
+}
+
+.logger--error {
+ background-color: #5a1a24;
+}
\ No newline at end of file
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.html b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.html
new file mode 100644
index 000000000..7ce52f927
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="index.css">
+ <title>Photo Library Collage</title>
+</head>
+
+<body>
+
+<div class="app">
+ <header class="header">
+ <h1 class="header-text">
+ Photo Library Collage
+ </h1>
+ </header>
+ <div class="container">
+ <div class="item item--scrollable">
+ <!--Thumbnails-->
+ <div class="thumbnails-container"></div>
+ </div>
+ <div class="item">
+ <div>
+ <div class=actions>
+ <select class="select"></select>
+ <button class="btn btn--primary btn-create-collage"> Create collage </button>
+ <button class="btn btn--secondary btn-start-over"> Start over </button>
+ <button class="btn btn--success btn-download" onClick={downloadCollage}> Download </button>
+ </div>
+ <div class="previewContainer">
+ <div class="spinnerContainer spinnerContainer--hidden">
+ <div class="spinner"></div>
+ <p class="spinnerText"></p>
+ </div>
+ <canvas class="canvas"></canvas>
+ </div>
+ <div class="loggerContainer">
+ <p class="logger-title">Logger:</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+<script type="module" src="index.js"></script>
+</body>
+</html>
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.js b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.js
new file mode 100644
index 000000000..983b34d9a
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/index.js
@@ -0,0 +1,228 @@
+import {
+ createImageFile,
+ loadImage,
+ weakRefCache,
+ LAYOUTS,
+ images,
+ THUMBNAIL_PARAMS,
+ stateObj,
+} from "./utils.js";
+
+export const state = new Proxy(stateObj, {
+ set(target, property, value) {
+ const previousValue = target[property];
+
+ target[property] = value;
+
+ if (previousValue !== value) {
+ handleStateChange(target);
+ }
+
+ return true;
+ },
+});
+
+// Elements.
+const thumbnailsContainerEl = document.querySelector(".thumbnails-container");
+const selectEl = document.querySelector(".select");
+const previewContainerEl = document.querySelector(".previewContainer");
+const canvasEl = document.querySelector(".canvas");
+const createCollageBtn = document.querySelector(".btn-create-collage");
+const startOverBtn = document.querySelector(".btn-start-over");
+const downloadBtn = document.querySelector(".btn-download");
+const spinnerContainerEl = document.querySelector(".spinnerContainer");
+const spinnerTextEl = document.querySelector(".spinnerText");
+const loggerContainerEl = document.querySelector(".loggerContainer");
+
+// Renders.
+// Render thumbnails previews.
+images.forEach((img) => {
+ const thumbnail = document.createElement("div");
+ thumbnail.classList.add("thumbnail-item");
+
+ thumbnail.innerHTML = `
+ <img src='${img.img}?${THUMBNAIL_PARAMS}' class="img">
+ `;
+
+ thumbnail.addEventListener("click", (e) => handleSelection(e, img));
+
+ thumbnailsContainerEl.appendChild(thumbnail);
+});
+// Render layouts select.
+LAYOUTS.forEach((layout) => {
+ const option = document.createElement("option");
+ option.value = JSON.stringify(layout);
+ option.innerHTML = layout.name;
+ selectEl.appendChild(option);
+});
+
+const handleStateChange = (state) => {
+ if (state.loading) {
+ selectEl.disabled = true;
+ createCollageBtn.disabled = true;
+ startOverBtn.disabled = true;
+ downloadBtn.disabled = true;
+ previewContainerEl.classList.add("previewContainer--disabled");
+ spinnerContainerEl.classList.remove("spinnerContainer--hidden");
+ spinnerTextEl.innerText = "Loading...";
+ canvasEl.classList.remove("canvas--ready");
+ } else if (!state.loading) {
+ selectEl.disabled = false;
+ createCollageBtn.disabled = false;
+ startOverBtn.disabled = false;
+ downloadBtn.disabled = false;
+ previewContainerEl.classList.remove("previewContainer--disabled");
+ spinnerContainerEl.classList.add("spinnerContainer--hidden");
+ canvasEl.classList.add("canvas--ready");
+ }
+
+ if (!state.selectedImages.size) {
+ createCollageBtn.disabled = true;
+ document.querySelectorAll(".badge").forEach((item) => item.remove());
+ } else if (state.selectedImages.size && !state.loading) {
+ createCollageBtn.disabled = false;
+ }
+
+ if (!state.collageRendered) {
+ downloadBtn.disabled = true;
+ } else if (state.collageRendered) {
+ downloadBtn.disabled = false;
+ }
+};
+handleStateChange(state);
+
+const handleSelection = (e, imgName) => {
+ const imgEl = e.currentTarget;
+
+ imgEl.classList.toggle("thumbnail-item--selected");
+
+ if (state.selectedImages.has(imgName)) {
+ state.selectedImages.delete(imgName);
+ state.selectedImages = new Set(state.selectedImages);
+ imgEl.querySelector(".badge")?.remove();
+ } else {
+ state.selectedImages = new Set(state.selectedImages.add(imgName));
+
+ const badge = document.createElement("div");
+ badge.classList.add("badge");
+ badge.innerHTML = `
+ <div class="check" />
+ `;
+ imgEl.prepend(badge);
+ }
+};
+
+// Make a wrapper function.
+let getCachedImage;
+(async () => {
+ getCachedImage = await weakRefCache(loadImage);
+})();
+
+const calculateGridRows = (blobsLength) =>
+ Math.ceil(blobsLength / state.currentLayout.columns);
+
+const drawCollage = (images) => {
+ state.drawing = true;
+
+ let context = canvasEl.getContext("2d");
+
+ /**
+ * Calculate canvas dimensions based on the current layout.
+ * */
+ context.canvas.width =
+ state.currentLayout.itemWidth * state.currentLayout.columns;
+ context.canvas.height =
+ calculateGridRows(images.length) * state.currentLayout.itemHeight;
+
+ let currentRow = 0;
+ let currentCanvasDx = 0;
+ let currentCanvasDy = 0;
+
+ for (let i = 0; i < images.length; i++) {
+ /**
+ * Get current row of the collage.
+ * */
+ if (i % state.currentLayout.columns === 0) {
+ currentRow += 1;
+ currentCanvasDx = 0;
+
+ if (currentRow > 1) {
+ currentCanvasDy += state.currentLayout.itemHeight;
+ }
+ }
+
+ context.drawImage(
+ images[i],
+ 0,
+ 0,
+ images[i].width,
+ images[i].height,
+ currentCanvasDx,
+ currentCanvasDy,
+ state.currentLayout.itemWidth,
+ state.currentLayout.itemHeight,
+ );
+
+ currentCanvasDx += state.currentLayout.itemWidth;
+ }
+
+ state.drawing = false;
+ state.collageRendered = true;
+};
+
+const createCollage = async () => {
+ state.loading = true;
+
+ const images = [];
+
+ for (const image of state.selectedImages.values()) {
+ const blobImage = await getCachedImage(image.img);
+
+ const url = URL.createObjectURL(blobImage);
+ const img = await createImageFile(url);
+
+ images.push(img);
+ URL.revokeObjectURL(url);
+ }
+
+ state.loading = false;
+
+ drawCollage(images);
+};
+
+/**
+ * Clear all settled data to start over.
+ * */
+const startOver = () => {
+ state.selectedImages = new Set();
+ state.collageRendered = false;
+ const context = canvasEl.getContext("2d");
+ context.clearRect(0, 0, canvasEl.width, canvasEl.height);
+
+ document
+ .querySelectorAll(".thumbnail-item--selected")
+ .forEach((item) => item.classList.remove("thumbnail-item--selected"));
+
+ loggerContainerEl.innerHTML = '<p class="logger-title">Logger:</p>';
+};
+
+const downloadCollage = () => {
+ const date = new Date();
+ const fileName = `Collage-${date.getDay()}-${date.getMonth()}-${date.getFullYear()}.png`;
+ const img = canvasEl.toDataURL("image/png");
+ const link = document.createElement("a");
+ link.download = fileName;
+ link.href = img;
+ link.click();
+ link.remove();
+};
+
+const changeLayout = ({ target }) => {
+ state.currentLayout = JSON.parse(target.value);
+};
+
+// Listeners.
+selectEl.addEventListener("change", changeLayout);
+createCollageBtn.addEventListener("click", createCollage);
+startOverBtn.addEventListener("click", startOver);
+downloadBtn.addEventListener("click", downloadCollage);
diff --git a/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/utils.js b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/utils.js
new file mode 100644
index 000000000..f0140c116
--- /dev/null
+++ b/1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry.view/utils.js
@@ -0,0 +1,321 @@
+const loggerContainerEl = document.querySelector(".loggerContainer");
+
+export const images = [
+ {
+ img: "https://images.unsplash.com/photo-1471357674240-e1a485acb3e1",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1589118949245-7d38baf380d6",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1527631746610-bca00a040d60",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1500835556837-99ac94a94552",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1503220317375-aaad61436b1b",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1501785888041-af3ef285b470",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1528543606781-2f6e6857f318",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1523906834658-6e24ef2386f9",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1539635278303-d4002c07eae3",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1533105079780-92b9be482077",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1516483638261-f4dbaf036963",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1502791451862-7bd8c1df43a7",
+ },
+ {
+ img: "https://plus.unsplash.com/premium_photo-1663047367140-91adf819d007",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1517760444937-f6397edcbbcd",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1518684079-3c830dcef090",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1505832018823-50331d70d237",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1524850011238-e3d235c7d4c9",
+ },
+ {
+ img: "https://plus.unsplash.com/premium_photo-1661277758451-b5053309eea1",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1541410965313-d53b3c16ef17",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1528702748617-c64d49f918af",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1502003148287-a82ef80a6abc",
+ },
+ {
+ img: "https://plus.unsplash.com/premium_photo-1661281272544-5204ea3a481a",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1503457574462-bd27054394c1",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1499363536502-87642509e31b",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1551918120-9739cb430c6d",
+ },
+ {
+ img: "https://plus.unsplash.com/premium_photo-1661382219642-43e54f7e81d7",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1497262693247-aa258f96c4f5",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1525254134158-4fd5fdd45793",
+ },
+ {
+ img: "https://plus.unsplash.com/premium_photo-1661274025419-4c54107d5c48",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1553697388-94e804e2f0f6",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1574260031597-bcd9eb192b4f",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1536323760109-ca8c07450053",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1527824404775-dce343118ebc",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1612278675615-7b093b07772d",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1522010675502-c7b3888985f6",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1501555088652-021faa106b9b",
+ },
+ {
+ img: "https://plus.unsplash.com/premium_photo-1669223469435-27e091439169",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1506012787146-f92b2d7d6d96",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1511739001486-6bfe10ce785f",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1553342385-111fd6bc6ab3",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1516546453174-5e1098a4b4af",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1527142879-95b61a0b8226",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1520466809213-7b9a56adcd45",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1516939884455-1445c8652f83",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1545389336-cf090694435e",
+ },
+ {
+ img: "https://plus.unsplash.com/premium_photo-1669223469455-b7b734c838f4",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1454391304352-2bf4678b1a7a",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1433838552652-f9a46b332c40",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1506125840744-167167210587",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1522199873717-bc67b1a5e32b",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1495904786722-d2b5a19a8535",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1614094082869-cd4e4b2905c7",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1474755032398-4b0ed3b2ae5c",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1501554728187-ce583db33af7",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1515859005217-8a1f08870f59",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1531141445733-14c2eb7d4c1f",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1500259783852-0ca9ce8a64dc",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1510662145379-13537db782dc",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1573790387438-4da905039392",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1512757776214-26d36777b513",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1518855706573-84de4022b69b",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1500049242364-5f500807cdd7",
+ },
+ {
+ img: "https://images.unsplash.com/photo-1528759335187-3b683174c86a",
+ },
+];
+export const THUMBNAIL_PARAMS = "w=240&h=240&fit=crop&auto=format";
+
+// Console styles.
+export const CONSOLE_BASE_STYLES = [
+ "font-size: 12px",
+ "padding: 4px",
+ "border: 2px solid #5a5a5a",
+ "color: white",
+].join(";");
+export const CONSOLE_PRIMARY = [
+ CONSOLE_BASE_STYLES,
+ "background-color: #13315a",
+].join(";");
+export const CONSOLE_SUCCESS = [
+ CONSOLE_BASE_STYLES,
+ "background-color: #385a4e",
+].join(";");
+export const CONSOLE_ERROR = [
+ CONSOLE_BASE_STYLES,
+ "background-color: #5a1a24",
+].join(";");
+
+// Layouts.
+export const LAYOUT_4_COLUMNS = {
+ name: "Layout 4 columns",
+ columns: 4,
+ itemWidth: 240,
+ itemHeight: 240,
+};
+export const LAYOUT_8_COLUMNS = {
+ name: "Layout 8 columns",
+ columns: 8,
+ itemWidth: 240,
+ itemHeight: 240,
+};
+export const LAYOUTS = [LAYOUT_4_COLUMNS, LAYOUT_8_COLUMNS];
+
+export const createImageFile = async (src) =>
+ new Promise((resolve, reject) => {
+ const img = new Image();
+ img.src = src;
+ img.onload = () => resolve(img);
+ img.onerror = () => reject(new Error("Failed to construct image."));
+ });
+
+export const loadImage = async (url) => {
+ try {
+ const response = await fetch(url);
+ if (!response.ok) {
+ throw new Error(String(response.status));
+ }
+
+ return await response.blob();
+ } catch (e) {
+ console.log(`%cFETCHED_FAILED: ${e}`, CONSOLE_ERROR);
+ }
+};
+
+export const weakRefCache = (fetchImg) => {
+ const imgCache = new Map();
+ const registry = new FinalizationRegistry(({ imgName, size, type }) => {
+ const cachedImg = imgCache.get(imgName);
+ if (cachedImg && !cachedImg.deref()) {
+ imgCache.delete(imgName);
+ console.log(
+ `%cCLEANED_IMAGE: Url: ${imgName}, Size: ${size}, Type: ${type}`,
+ CONSOLE_ERROR,
+ );
+
+ const logEl = document.createElement("div");
+ logEl.classList.add("logger-item", "logger--error");
+ logEl.innerHTML = `CLEANED_IMAGE: Url: ${imgName}, Size: ${size}, Type: ${type}`;
+ loggerContainerEl.appendChild(logEl);
+ loggerContainerEl.scrollTop = loggerContainerEl.scrollHeight;
+ }
+ });
+
+ return async (imgName) => {
+ const cachedImg = imgCache.get(imgName);
+
+ if (cachedImg?.deref() !== undefined) {
+ console.log(
+ `%cCACHED_IMAGE: Url: ${imgName}, Size: ${cachedImg.size}, Type: ${cachedImg.type}`,
+ CONSOLE_SUCCESS,
+ );
+
+ const logEl = document.createElement("div");
+ logEl.classList.add("logger-item", "logger--success");
+ logEl.innerHTML = `CACHED_IMAGE: Url: ${imgName}, Size: ${cachedImg.size}, Type: ${cachedImg.type}`;
+ loggerContainerEl.appendChild(logEl);
+ loggerContainerEl.scrollTop = loggerContainerEl.scrollHeight;
+
+ return cachedImg?.deref();
+ }
+
+ const newImg = await fetchImg(imgName);
+ console.log(
+ `%cFETCHED_IMAGE: Url: ${imgName}, Size: ${newImg.size}, Type: ${newImg.type}`,
+ CONSOLE_PRIMARY,
+ );
+
+ const logEl = document.createElement("div");
+ logEl.classList.add("logger-item", "logger--primary");
+ logEl.innerHTML = `FETCHED_IMAGE: Url: ${imgName}, Size: ${newImg.size}, Type: ${newImg.type}`;
+ loggerContainerEl.appendChild(logEl);
+ loggerContainerEl.scrollTop = loggerContainerEl.scrollHeight;
+
+ imgCache.set(imgName, new WeakRef(newImg));
+ registry.register(newImg, {
+ imgName,
+ size: newImg.size,
+ type: newImg.type,
+ });
+
+ return newImg;
+ };
+};
+
+export const stateObj = {
+ loading: false,
+ drawing: true,
+ collageRendered: false,
+ currentLayout: LAYOUTS[0],
+ selectedImages: new Set(),
+};
diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md
index e18335f38..f7f2be91d 100644
--- a/2-ui/1-document/02-dom-nodes/article.md
+++ b/2-ui/1-document/02-dom-nodes/article.md
@@ -212,7 +212,7 @@ There are [12 node types](https://dom.spec.whatwg.org/#node). In practice we usu
## See it for yourself
-To see the DOM structure in real-time, try [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up as a DOM at an instant.
+To see the DOM structure in real-time, try [Live DOM Viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up as a DOM at an instant.
Another way to explore the DOM is to use the browser developer tools. Actually, that's what we use when developing.
diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md
index de47eac9f..405129694 100644
--- a/2-ui/1-document/04-searching-elements-dom/article.md
+++ b/2-ui/1-document/04-searching-elements-dom/article.md
@@ -55,7 +55,7 @@ Also, there's a global variable named by `id` that references the element:
```
```warn header="Please don't use id-named global variables to access elements"
-This behavior is described [in the specification](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), so it's a kind of standard. But it is supported mainly for compatibility.
+This behavior is described [in the specification](https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object), but it is supported mainly for compatibility.
The browser tries to help us by mixing namespaces of JS and DOM. That's fine for simple scripts, inlined into HTML, but generally isn't a good thing. There may be naming conflicts. Also, when one reads JS code and doesn't have HTML in view, it's not obvious where the variable comes from.
diff --git a/2-ui/1-document/11-coordinates/article.md b/2-ui/1-document/11-coordinates/article.md
index 4775ff0eb..fc605c414 100644
--- a/2-ui/1-document/11-coordinates/article.md
+++ b/2-ui/1-document/11-coordinates/article.md
@@ -36,7 +36,7 @@ Additionally, there are derived properties:
```online
For instance click this button to see its window coordinates:
-<p><input id="brTest" type="button" value="Get coordinates using button.getBoundingClientRect() for this button" onclick='showRect(this)'/></p>
+<p><input id="brTest" type="button" style="max-width: 90vw;" value="Get coordinates using button.getBoundingClientRect() for this button" onclick='showRect(this)'/></p>
<script>
function showRect(elem) {
diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md
index 1c85bdb15..2448cfa5b 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/article.md
+++ b/2-ui/2-events/02-bubbling-and-capturing/article.md
@@ -120,7 +120,7 @@ There's usually no real need to prevent the bubbling. A task that seemingly requ
There's another phase of event processing called "capturing". It is rarely used in real code, but sometimes can be useful.
-The standard [DOM Events](http://www.w3.org/TR/DOM-Level-3-Events/) describes 3 phases of event propagation:
+The standard [DOM Events](https://www.w3.org/TR/DOM-Level-3-Events/) describes 3 phases of event propagation:
1. Capturing phase -- the event goes down to the element.
2. Target phase -- the event reached the target element.
diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md
index 77a49490f..047413fd3 100644
--- a/2-ui/2-events/05-dispatch-events/article.md
+++ b/2-ui/2-events/05-dispatch-events/article.md
@@ -8,7 +8,7 @@ We can generate not only completely new events, that we invent for our own purpo
## Event constructor
-Built-in event classes form a hierarchy, similar to DOM element classes. The root is the built-in [Event](http://www.w3.org/TR/dom/#event) class.
+Built-in event classes form a hierarchy, similar to DOM element classes. The root is the built-in [Event](https://dom.spec.whatwg.org/#events) class.
We can create `Event` objects like this:
diff --git a/2-ui/3-event-details/6-pointer-events/article.md b/2-ui/3-event-details/6-pointer-events/article.md
index b8873e9d8..ecc144712 100644
--- a/2-ui/3-event-details/6-pointer-events/article.md
+++ b/2-ui/3-event-details/6-pointer-events/article.md
@@ -69,7 +69,7 @@ Some pointer devices measure contact area and pressure, e.g. for a finger on the
- `height` - the height of the area where the pointer touches the device. Where unsupported, it's always `1`.
- `pressure` - the pressure of the pointer tip, in range from 0 to 1. For devices that don't support pressure must be either `0.5` (pressed) or `0`.
- `tangentialPressure` - the normalized tangential pressure.
-- `tiltX`, `tiltY`, `twist` - pen-specific properties that describe how the pen is positioned relative the surface.
+- `tiltX`, `tiltY`, `twist` - pen-specific properties that describe how the pen is positioned relative to the surface.
These properties aren't supported by most devices, so they are rarely used. You can find the details about them in the [specification](https://w3c.github.io/pointerevents/#pointerevent-interface) if needed.
@@ -126,7 +126,7 @@ Here is the flow of user actions and the corresponding events:
So the issue is that the browser "hijacks" the interaction: `pointercancel` fires in the beginning of the "drag-and-drop" process, and no more `pointermove` events are generated.
```online
-Here's the drag'n'drop demo with loggin of pointer events (only `up/down`, `move` and `cancel`) in the `textarea`:
+Here's the drag'n'drop demo with logging of pointer events (only `up/down`, `move` and `cancel`) in the `textarea`:
[iframe src="ball" height=240 edit]
```
diff --git a/2-ui/4-forms-controls/1-form-elements/article.md b/2-ui/4-forms-controls/1-form-elements/article.md
index f22518d9d..7bc87a0f0 100644
--- a/2-ui/4-forms-controls/1-form-elements/article.md
+++ b/2-ui/4-forms-controls/1-form-elements/article.md
@@ -244,7 +244,7 @@ This syntax is optional. We can use `document.createElement('option')` and set a
- `defaultSelected` -- if `true`, then `selected` HTML-attribute is created,
- `selected` -- if `true`, then the option is selected.
-The difference between `defaultSelected` and `selected` is that `defaultSelected` sets the HTML-attribute (that we can get using `option.getAttribute('selected')`, while `selected` sets whether the option is selected or not.
+The difference between `defaultSelected` and `selected` is that `defaultSelected` sets the HTML-attribute (that we can get using `option.getAttribute('selected')`), while `selected` sets whether the option is selected or not.
In practice, one should usually set _both_ values to `true` or `false`. (Or, simply omit them; both default to `false`.)
diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md
index 097217f52..480197ae5 100644
--- a/2-ui/4-forms-controls/3-events-change-input/article.md
+++ b/2-ui/4-forms-controls/3-events-change-input/article.md
@@ -95,7 +95,7 @@ The clipboard is a "global" OS-level thing. A user may switch between various ap
So most browsers allow seamless read/write access to the clipboard only in the scope of certain user actions, such as copying/pasting etc.
-It's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox. And even if we manage to dispatch such event, the specification clearly states that such "syntetic" events must not provide access to the clipboard.
+It's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox. And even if we manage to dispatch such event, the specification clearly states that such "synthetic" events must not provide access to the clipboard.
Even if someone decides to save `event.clipboardData` in an event handler, and then access it later -- it won't work.
diff --git a/2-ui/5-loading/01-onload-ondomcontentloaded/article.md b/2-ui/5-loading/01-onload-ondomcontentloaded/article.md
index 42d10fe72..07624a658 100644
--- a/2-ui/5-loading/01-onload-ondomcontentloaded/article.md
+++ b/2-ui/5-loading/01-onload-ondomcontentloaded/article.md
@@ -265,7 +265,7 @@ Here's a document with `<iframe>`, `<img>` and handlers that log events:
<iframe src="iframe.html" onload="log('iframe onload')"></iframe>
-<img src="http://en.js.cx/clipart/train.gif" id="img">
+<img src="https://en.js.cx/clipart/train.gif" id="img">
<script>
img.onload = () => log('img onload');
</script>
diff --git a/2-ui/99-ui-misc/02-selection-range/article.md b/2-ui/99-ui-misc/02-selection-range/article.md
index 9d6bb9c93..09a20bc67 100644
--- a/2-ui/99-ui-misc/02-selection-range/article.md
+++ b/2-ui/99-ui-misc/02-selection-range/article.md
@@ -354,7 +354,7 @@ The main selection properties are:
```smart header="Selection end/start vs Range"
-There's an important differences of a selection anchor/focus compared with a `Range` start/end.
+There's an important difference between a selection anchor/focus compared with a `Range` start/end.
As we know, `Range` objects always have their start before the end.
@@ -408,7 +408,7 @@ From <input id="from" disabled> – To <input id="to" disabled>
There are two approaches to copying the selected content:
1. We can use `document.getSelection().toString()` to get it as text.
-2. Otherwise, to copy the full DOM, e.g. if we need to keep formatting, we can get the underlying ranges with `getRangesAt(...)`. A `Range` object, in turn, has `cloneContents()` method that clones its content and returns as `DocumentFragment` object, that we can insert elsewhere.
+2. Otherwise, to copy the full DOM, e.g. if we need to keep formatting, we can get the underlying ranges with `getRangeAt(...)`. A `Range` object, in turn, has `cloneContents()` method that clones its content and returns as `DocumentFragment` object, that we can insert elsewhere.
Here's the demo of copying the selected content both as text and as DOM nodes:
diff --git a/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/solution.md b/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/solution.md
index 3a0daa974..2911b76cf 100644
--- a/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/solution.md
+++ b/2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/solution.md
@@ -40,10 +40,10 @@ console.log(7);
To summarize,
-1. Numbers `1` и `7` show up immediately, because simple `console.log` calls don't use any queues.
+1. Numbers `1` and `7` show up immediately, because simple `console.log` calls don't use any queues.
2. Then, after the main code flow is finished, the microtask queue runs.
- It has commands: `console.log(3); setTimeout(...4); console.log(5)`.
- - Numbers `3` и `5` show up, while `setTimeout(() => console.log(4))` adds the `console.log(4)` call to the end of the macrotask queue.
+ - Numbers `3` and `5` show up, while `setTimeout(() => console.log(4))` adds the `console.log(4)` call to the end of the macrotask queue.
- The macrotask queue is now: `console.log(2); console.log(6); console.log(4)`.
3. After the microtask queue becomes empty, the macrotask queue executes. It outputs `2`, `6`, `4`.
diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
index 3ea0c2c57..f33188491 100644
--- a/2-ui/99-ui-misc/03-event-loop/article.md
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -17,7 +17,7 @@ The general algorithm of the engine:
- execute them, starting with the oldest task.
2. Sleep until a task appears, then go to 1.
-That's a formalization for what we see when browsing a page. The JavaScript engine does nothing most of the time, it only runs if a script/handler/event activates.
+That's a formalization of what we see when browsing a page. The JavaScript engine does nothing most of the time, it only runs if a script/handler/event activates.
Examples of tasks:
@@ -30,19 +30,19 @@ Tasks are set -- the engine handles them -- then waits for more tasks (while sle
It may happen that a task comes while the engine is busy, then it's enqueued.
-The tasks form a queue, so-called "macrotask queue" (v8 term):
+The tasks form a queue, the so-called "macrotask queue" ([v8](https://v8.dev/) term):
-For instance, while the engine is busy executing a `script`, a user may move their mouse causing `mousemove`, and `setTimeout` may be due and so on, these tasks form a queue, as illustrated on the picture above.
+For instance, while the engine is busy executing a `script`, a user may move their mouse causing `mousemove`, and `setTimeout` may be due and so on, these tasks form a queue, as illustrated in the picture above.
-Tasks from the queue are processed on "first come – first served" basis. When the engine browser is done with the `script`, it handles `mousemove` event, then `setTimeout` handler, and so on.
+Tasks from the queue are processed on a "first come – first served" basis. When the engine browser is done with the `script`, it handles `mousemove` event, then `setTimeout` handler, and so on.
So far, quite simple, right?
Two more details:
1. Rendering never happens while the engine executes a task. It doesn't matter if the task takes a long time. Changes to the DOM are painted only after the task is complete.
-2. If a task takes too long, the browser can't do other tasks, such as processing user events. So after a time, it raises an alert like "Page Unresponsive", suggesting killing the task with the whole page. That happens when there are a lot of complex calculations or a programming error leading to an infinite loop.
+2. If a task takes too long, the browser can't do other tasks, such as processing user events. So after some time, it raises an alert like "Page Unresponsive", suggesting killing the task with the whole page. That happens when there are a lot of complex calculations or a programming error leading to an infinite loop.
That was the theory. Now let's see how we can apply that knowledge.
@@ -54,7 +54,7 @@ For example, syntax-highlighting (used to colorize code examples on this page) i
While the engine is busy with syntax highlighting, it can't do other DOM-related stuff, process user events, etc. It may even cause the browser to "hiccup" or even "hang" for a bit, which is unacceptable.
-We can avoid problems by splitting the big task into pieces. Highlight first 100 lines, then schedule `setTimeout` (with zero-delay) for the next 100 lines, and so on.
+We can avoid problems by splitting the big task into pieces. Highlight the first 100 lines, then schedule `setTimeout` (with zero-delay) for the next 100 lines, and so on.
To demonstrate this approach, for the sake of simplicity, instead of text-highlighting, let's take a function that counts from `1` to `1000000000`.
diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md
index 01da2b304..f2c87d1e0 100644
--- a/3-frames-and-windows/01-popup-windows/article.md
+++ b/3-frames-and-windows/01-popup-windows/article.md
@@ -38,26 +38,6 @@ button.onclick = () => {
This way users are somewhat protected from unwanted popups, but the functionality is not disabled totally.
-What if the popup opens from `onclick`, but after `setTimeout`? That's a bit tricky.
-
-Try this code:
-
-```js run
-// open after 3 seconds
-setTimeout(() => window.open('http://google.com'), 3000);
-```
-
-The popup opens in Chrome, but gets blocked in Firefox.
-
-...If we decrease the delay, the popup works in Firefox too:
-
-```js run
-// open after 1 seconds
-setTimeout(() => window.open('http://google.com'), 1000);
-```
-
-The difference is that Firefox treats a timeout of 2000ms or less are acceptable, but after it -- removes the "trust", assuming that now it's "outside of the user action". So the first one is blocked, and the second one is not.
-
## window.open
The syntax to open a popup is: `window.open(url, name, params)`:
diff --git a/5-network/05-fetch-crossorigin/article.md b/5-network/05-fetch-crossorigin/article.md
index d45ee391d..4420f43c7 100644
--- a/5-network/05-fetch-crossorigin/article.md
+++ b/5-network/05-fetch-crossorigin/article.md
@@ -44,7 +44,7 @@ One way to communicate with another server was to submit a `<form>` there. Peopl
<iframe name="iframe"></iframe>
*/!*
-<!-- a form could be dynamically generated and submited by JavaScript -->
+<!-- a form could be dynamically generated and submitted by JavaScript -->
*!*
<form target="iframe" method="POST" action="http://another.com/…">
*/!*
@@ -169,6 +169,7 @@ For cross-origin request, by default JavaScript may only access so-called "safe"
- `Cache-Control`
- `Content-Language`
+- `Content-Length`
- `Content-Type`
- `Expires`
- `Last-Modified`
@@ -176,12 +177,6 @@ For cross-origin request, by default JavaScript may only access so-called "safe"
Accessing any other response header causes an error.
-```smart
-There's no `Content-Length` header in the list!
-
-This header contains the full response length. So, if we're downloading something and would like to track the percentage of progress, then an additional permission is required to access that header (see below).
-```
-
To grant JavaScript access to any other response header, the server must send the `Access-Control-Expose-Headers` header. It contains a comma-separated list of unsafe header names that should be made accessible.
For example:
@@ -190,14 +185,15 @@ For example:
200 OK
Content-Type:text/html; charset=UTF-8
Content-Length: 12345
+Content-Encoding: gzip
API-Key: 2c9de507f2c54aa1
Access-Control-Allow-Origin: https://javascript.info
*!*
-Access-Control-Expose-Headers: Content-Length,API-Key
+Access-Control-Expose-Headers: Content-Encoding,API-Key
*/!*
```
-With such an `Access-Control-Expose-Headers` header, the script is allowed to read the `Content-Length` and `API-Key` headers of the response.
+With such an `Access-Control-Expose-Headers` header, the script is allowed to read the `Content-Encoding` and `API-Key` headers of the response.
## "Unsafe" requests
diff --git a/5-network/06-fetch-api/article.md b/5-network/06-fetch-api/article.md
index 16e2705f0..5f55c78ef 100644
--- a/5-network/06-fetch-api/article.md
+++ b/5-network/06-fetch-api/article.md
@@ -24,7 +24,7 @@ let promise = fetch(url, {
body: undefined, // string, FormData, Blob, BufferSource, or URLSearchParams
referrer: "about:client", // or "" to send no Referer header,
// or an url from the current origin
- referrerPolicy: "no-referrer-when-downgrade", // no-referrer, origin, same-origin...
+ referrerPolicy: "strict-origin-when-cross-origin", // no-referrer-when-downgrade, no-referrer, origin, same-origin...
mode: "cors", // same-origin, no-cors
credentials: "same-origin", // omit, include
cache: "default", // no-store, reload, no-cache, force-cache, or only-if-cached
@@ -85,13 +85,13 @@ Unlike the `referrer` option that allows to set the exact `Referer` value, `refe
Possible values are described in the [Referrer Policy specification](https://w3c.github.io/webappsec-referrer-policy/):
-- **`"no-referrer-when-downgrade"`** -- the default value: full `Referer` is always sent, unless we send a request from HTTPS to HTTP (to the less secure protocol).
+- **`"strict-origin-when-cross-origin"`** -- the default value: for same-origin send the full `Referer`, for cross-origin send only the origin, unless it's HTTPS→HTTP request, then send nothing.
+- **`"no-referrer-when-downgrade"`** -- full `Referer` is always sent, unless we send a request from HTTPS to HTTP (to the less secure protocol).
- **`"no-referrer"`** -- never send `Referer`.
- **`"origin"`** -- only send the origin in `Referer`, not the full page URL, e.g. only `http://site.com` instead of `http://site.com/path`.
- **`"origin-when-cross-origin"`** -- send the full `Referer` to the same origin, but only the origin part for cross-origin requests (as above).
- **`"same-origin"`** -- send the full `Referer` to the same origin, but no `Referer` for cross-origin requests.
- **`"strict-origin"`** -- send only the origin, not the `Referer` for HTTPS→HTTP requests.
-- **`"strict-origin-when-cross-origin"`** -- for same-origin send the full `Referer`, for cross-origin send only the origin, unless it's HTTPS→HTTP request, then send nothing.
- **`"unsafe-url"`** -- always send the full url in `Referer`, even for HTTPS→HTTP requests.
Here's a table with all combinations:
@@ -99,12 +99,12 @@ Here's a table with all combinations:
| Value | To same origin | To another origin | HTTPS→HTTP |
|-------|----------------|-------------------|------------|
| `"no-referrer"` | - | - | - |
-| `"no-referrer-when-downgrade"` or `""` (default) | full | full | - |
+| `"no-referrer-when-downgrade"` | full | full | - |
| `"origin"` | origin | origin | origin |
| `"origin-when-cross-origin"` | full | origin | origin |
| `"same-origin"` | full | - | - |
| `"strict-origin"` | origin | origin | - |
-| `"strict-origin-when-cross-origin"` | full | origin | - |
+| `"strict-origin-when-cross-origin"` or `""` (default) | full | origin | - |
| `"unsafe-url"` | full | full | full |
Let's say we have an admin zone with a URL structure that shouldn't be known from outside of the site.
diff --git a/5-network/09-resume-upload/article.md b/5-network/09-resume-upload/article.md
index 7eedc3fbd..b0aa447d6 100644
--- a/5-network/09-resume-upload/article.md
+++ b/5-network/09-resume-upload/article.md
@@ -48,7 +48,7 @@ To resume upload, we need to know *exactly* the number of bytes received by the
3. Then, we can use `Blob` method `slice` to send the file from `startByte`:
```js
- xhr.open("POST", "upload", true);
+ xhr.open("POST", "upload");
// File id, so that the server knows which file we upload
xhr.setRequestHeader('X-File-Id', fileId);
diff --git a/5-network/10-long-polling/article.md b/5-network/10-long-polling/article.md
index be367cee7..e9d8abe39 100644
--- a/5-network/10-long-polling/article.md
+++ b/5-network/10-long-polling/article.md
@@ -1,6 +1,6 @@
# Long polling
-Long polling is the simplest way of having persistent connection with server, that doesn't use any specific protocol like WebSocket or Server Side Events.
+Long polling is the simplest way of having persistent connection with server, that doesn't use any specific protocol like WebSocket or Server Sent Events.
Being very easy to implement, it's also good enough in a lot of cases.
@@ -29,7 +29,7 @@ The flow:
3. When a message appears - the server responds to the request with it.
4. The browser makes a new request immediately.
-The situation when the browser sent a request and has a pending connection with the server, is standard for this method. Only when a message is delivered, the connection is reestablished.
+This situation, where the browser has sent a request and keeps a pending connection with the server, is standard for this method. Only when a message is delivered, the connection is closed and reestablished.
diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md
index 25aead5f3..268b674f0 100644
--- a/5-network/11-websocket/article.md
+++ b/5-network/11-websocket/article.md
@@ -56,7 +56,7 @@ socket.onclose = function(event) {
};
socket.onerror = function(error) {
- alert(`[error] ${error.message}`);
+ alert(`[error]`);
};
```
diff --git a/6-data-storage/01-cookie/article.md b/6-data-storage/01-cookie/article.md
index 01c0e1fee..1b9e93414 100644
--- a/6-data-storage/01-cookie/article.md
+++ b/6-data-storage/01-cookie/article.md
@@ -2,17 +2,17 @@
Cookies are small strings of data that are stored directly in the browser. They are a part of the HTTP protocol, defined by the [RFC 6265](https://tools.ietf.org/html/rfc6265) specification.
-Cookies are usually set by a web-server using the response `Set-Cookie` HTTP-header. Then, the browser automatically adds them to (almost) every request to the same domain using the `Cookie` HTTP-header.
+Cookies are usually set by a web server using the response `Set-Cookie` HTTP header. Then, the browser automatically adds them to (almost) every request to the same domain using the `Cookie` HTTP header.
One of the most widespread use cases is authentication:
-1. Upon sign in, the server uses the `Set-Cookie` HTTP-header in the response to set a cookie with a unique "session identifier".
-2. Next time when the request is sent to the same domain, the browser sends the cookie over the net using the `Cookie` HTTP-header.
+1. Upon sign-in, the server uses the `Set-Cookie` HTTP header in the response to set a cookie with a unique "session identifier".
+2. Next time the request is sent to the same domain, the browser sends the cookie over the net using the `Cookie` HTTP header.
3. So the server knows who made the request.
We can also access cookies from the browser, using `document.cookie` property.
-There are many tricky things about cookies and their options. In this chapter we'll cover them in detail.
+There are many tricky things about cookies and their attributes. In this chapter, we'll cover them in detail.
## Reading from document.cookie
@@ -31,17 +31,17 @@ alert( document.cookie ); // cookie1=value1; cookie2=value2;...
```
-The value of `document.cookie` consists of `name=value` pairs, delimited by `; `. Each one is a separate cookie.
+The value of `document.cookie` consists of `name=value` pairs, delimited by `; `. Each one is a separate cookie.
-To find a particular cookie, we can split `document.cookie` by `; `, and then find the right name. We can use either a regular expression or array functions to do that.
+To find a particular cookie, we can split `document.cookie` by `; `, and then find the right name. We can use either a regular expression or array functions to do that.
-We leave it as an exercise for the reader. Also, at the end of the chapter you'll find helper functions to manipulate cookies.
+We leave it as an exercise for the reader. Also, at the end of the chapter, you'll find helper functions to manipulate cookies.
## Writing to document.cookie
We can write to `document.cookie`. But it's not a data property, it's an [accessor (getter/setter)](info:property-accessors). An assignment to it is treated specially.
-**A write operation to `document.cookie` updates only cookies mentioned in it, but doesn't touch other cookies.**
+**A write operation to `document.cookie` updates only the cookie mentioned in it and doesn't touch other cookies.**
For instance, this call sets a cookie with the name `user` and value `John`:
@@ -50,12 +50,12 @@ document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies
```
-If you run it, then probably you'll see multiple cookies. That's because the `document.cookie=` operation does not overwrite all cookies. It only sets the mentioned cookie `user`.
+If you run it, you will likely see multiple cookies. That's because the `document.cookie=` operation does not overwrite all cookies. It only sets the mentioned cookie `user`.
Technically, name and value can have any characters. To keep the valid formatting, they should be escaped using a built-in `encodeURIComponent` function:
```js run
-// special characters (spaces), need encoding
+// special characters (spaces) need encoding
let name = "my name";
let value = "John Smith"
@@ -67,29 +67,20 @@ alert(document.cookie); // ...; my%20name=John%20Smith
```warn header="Limitations"
-There are few limitations:
+There are a few limitations:
+- You can only set/update a single cookie at a time using `document.cookie`.
- The `name=value` pair, after `encodeURIComponent`, should not exceed 4KB. So we can't store anything huge in a cookie.
- The total number of cookies per domain is limited to around 20+, the exact limit depends on the browser.
```
-Cookies have several options, many of them are important and should be set.
+Cookies have several attributes, many of which are important and should be set.
-The options are listed after `key=value`, delimited by `;`, like this:
+The attributes are listed after `key=value`, delimited by `;`, like this:
```js run
document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"
```
-## path
-
-- **`path=/mypath`**
-
-The url path prefix must be absolute. It makes the cookie accessible for pages under that path. By default, it's the current path.
-
-If a cookie is set with `path=/admin`, it's visible at pages `/admin` and `/admin/something`, but not at `/home` or `/adminpage`.
-
-Usually, we should set `path` to the root: `path=/` to make the cookie accessible from all website pages.
-
## domain
- **`domain=site.com`**
@@ -102,7 +93,7 @@ It's a safety restriction, to allow us to store sensitive data in cookies that s
By default, a cookie is accessible only at the domain that set it.
-Please note, by default a cookie is also not shared to a subdomain as well, such as `forum.site.com`.
+Please note, by default, a cookie is not shared with a subdomain, such as `forum.site.com`.
```js
// if we set a cookie at site.com website...
@@ -114,7 +105,7 @@ alert(document.cookie); // no user
...But this can be changed. If we'd like to allow subdomains like `forum.site.com` to get a cookie set at `site.com`, that's possible.
-For that to happen, when setting a cookie at `site.com`, we should explicitly set the `domain` option to the root domain: `domain=site.com`. Then all subdomains will see such cookie.
+For that to happen, when setting a cookie at `site.com`, we should explicitly set the `domain` attribute to the root domain: `domain=site.com`. Then all subdomains will see such a cookie.
For example:
@@ -129,19 +120,31 @@ document.cookie = "user=John; *!*domain=site.com*/!*"
alert(document.cookie); // has cookie user=John
```
-For historical reasons, `domain=.site.com` (with a dot before `site.com`) also works the same way, allowing access to the cookie from subdomains. That's an old notation and should be used if we need to support very old browsers.
+```warn header="Legacy syntax"
+Historically, `domain=.site.com` (with a dot before `site.com`) used to work the same way, allowing access to the cookie from subdomains. Leading dots in domain names are now ignored, but some browsers may decline to set the cookie containing such dots.
+```
+
+To summarize, the `domain` attribute allows to make a cookie accessible at subdomains.
+
+## path
+
+- **`path=/mypath`**
+
+The URL path prefix must be absolute. It makes the cookie accessible for pages under that path. By default, it's the current path.
+
+If a cookie is set with `path=/admin`, it's visible on pages `/admin` and `/admin/something`, but not at `/home`, `/home/admin` or `/`.
-To summarize, the `domain` option allows to make a cookie accessible at subdomains.
+Usually, we should set `path` to the root: `path=/` to make the cookie accessible from all website pages. If this attribute is not set the default is calculated using [this method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#path_default_value).
## expires, max-age
-By default, if a cookie doesn't have one of these options, it disappears when the browser is closed. Such cookies are called "session cookies"
+By default, if a cookie doesn't have one of these attributes, it disappears when the browser/tab is closed. Such cookies are called "session cookies"
-To let cookies survive a browser close, we can set either the `expires` or `max-age` option.
+To let cookies survive a browser close, we can set either the `expires` or `max-age` attribute. `max-Age` has precedence if both are set.
- **`expires=Tue, 19 Jan 2038 03:14:07 GMT`**
-The cookie expiration date defines the time, when the browser will automatically delete it.
+The cookie expiration date defines the time when the browser will automatically delete it (according to the browser's time zone).
The date must be exactly in this format, in the GMT timezone. We can use `date.toUTCString` to get it. For instance, we can set the cookie to expire in 1 day:
@@ -178,7 +181,7 @@ The cookie should be transferred only over HTTPS.
That is, cookies are domain-based, they do not distinguish between the protocols.
-With this option, if a cookie is set by `https://site.com`, then it doesn't appear when the same site is accessed by HTTP, as `http://site.com`. So if a cookie has sensitive content that should never be sent over unencrypted HTTP, the `secure` flag is the right thing.
+With this attribute, if a cookie is set by `https://site.com`, then it doesn't appear when the same site is accessed by HTTP, as `http://site.com`. So if a cookie has sensitive content that should never be sent over unencrypted HTTP, the `secure` flag is the right thing.
```js
// assuming we're on https:// now
@@ -188,49 +191,49 @@ document.cookie = "user=John; secure";
## samesite
-That's another security attribute `samesite`. It's designed to protect from so-called XSRF (cross-site request forgery) attacks.
+This is another security attribute `samesite`. It's designed to protect from so-called XSRF (cross-site request forgery) attacks.
To understand how it works and when it's useful, let's take a look at XSRF attacks.
### XSRF attack
-Imagine, you are logged into the site `bank.com`. That is: you have an authentication cookie from that site. Your browser sends it to `bank.com` with every request, so that it recognizes you and performs all sensitive financial operations.
+Imagine, you are logged into the site `bank.com`. That is: you have an authentication cookie from that site. Your browser sends it to `bank.com` with every request so that it recognizes you and performs all sensitive financial operations.
Now, while browsing the web in another window, you accidentally come to another site `evil.com`. That site has JavaScript code that submits a form `<form action="https://bank.com/pay">` to `bank.com` with fields that initiate a transaction to the hacker's account.
-The browser sends cookies every time you visit the site `bank.com`, even if the form was submitted from `evil.com`. So the bank recognizes you and actually performs the payment.
+The browser sends cookies every time you visit the site `bank.com`, even if the form was submitted from `evil.com`. So the bank recognizes you and performs the payment.
-That's a so-called "Cross-Site Request Forgery" (in short, XSRF) attack.
+This is a so-called "Cross-Site Request Forgery" (in short, XSRF) attack.
-Real banks are protected from it of course. All forms generated by `bank.com` have a special field, a so-called "XSRF protection token", that an evil page can't generate or extract from a remote page. It can submit a form there, but can't get the data back. The site `bank.com` checks for such token in every form it receives.
+Real banks are protected from it of course. All forms generated by `bank.com` have a special field, a so-called "XSRF protection token", that an evil page can't generate or extract from a remote page. It can submit a form there, but can't get the data back. The site `bank.com` checks for such a token in every form it receives.
Such a protection takes time to implement though. We need to ensure that every form has the required token field, and we must also check all requests.
-### Enter cookie samesite option
+### Use cookie samesite attribute
-The cookie `samesite` option provides another way to protect from such attacks, that (in theory) should not require "xsrf protection tokens".
+The cookie `samesite` attribute provides another way to protect from such attacks, that (in theory) should not require "xsrf protection tokens".
It has two possible values:
-- **`samesite=strict` (same as `samesite` without value)**
+- **`samesite=strict`**
A cookie with `samesite=strict` is never sent if the user comes from outside the same site.
-In other words, whether a user follows a link from their mail or submits a form from `evil.com`, or does any operation that originates from another domain, the cookie is not sent.
+In other words, whether a user follows a link from their email, submits a form from `evil.com`, or does any operation that originates from another domain, the cookie is not sent.
-If authentication cookies have the `samesite` option, then a XSRF attack has no chances to succeed, because a submission from `evil.com` comes without cookies. So `bank.com` will not recognize the user and will not proceed with the payment.
+If authentication cookies have the `samesite=strict` attribute, then an XSRF attack has no chance of succeeding, because a submission from `evil.com` comes without cookies. So `bank.com` will not recognize the user and will not proceed with the payment.
-The protection is quite reliable. Only operations that come from `bank.com` will send the `samesite` cookie, e.g. a form submission from another page at `bank.com`.
+The protection is quite reliable. Only operations that come from `bank.com` will send the `samesite=strict` cookie, e.g. a form submission from another page at `bank.com`.
Although, there's a small inconvenience.
-When a user follows a legitimate link to `bank.com`, like from their own notes, they'll be surprised that `bank.com` does not recognize them. Indeed, `samesite=strict` cookies are not sent in that case.
+When a user follows a legitimate link to `bank.com`, like from their notes, they'll be surprised that `bank.com` does not recognize them. Indeed, `samesite=strict` cookies are not sent in that case.
-We could work around that by using two cookies: one for "general recognition", only for the purposes of saying: "Hello, John", and the other one for data-changing operations with `samesite=strict`. Then, a person coming from outside of the site will see a welcome, but payments must be initiated from the bank's website, for the second cookie to be sent.
+We could work around that by using two cookies: one for "general recognition", only to say: "Hello, John", and the other one for data-changing operations with `samesite=strict`. Then, a person coming from outside of the site will see a welcome, but payments must be initiated from the bank's website, for the second cookie to be sent.
-- **`samesite=lax`**
+- **`samesite=lax` (same as `samesite` without value)**
A more relaxed approach that also protects from XSRF and doesn't break the user experience.
@@ -239,40 +242,40 @@ Lax mode, just like `strict`, forbids the browser to send cookies when coming fr
A `samesite=lax` cookie is sent if both of these conditions are true:
1. The HTTP method is "safe" (e.g. GET, but not POST).
- The full list of safe HTTP methods is in the [RFC7231 specification](https://tools.ietf.org/html/rfc7231). Basically, these are the methods that should be used for reading, but not writing the data. They must not perform any data-changing operations. Following a link is always GET, the safe method.
+ The full list of safe HTTP methods is in the [RFC7231 specification](https://tools.ietf.org/html/rfc7231#section-4.2.1). These are the methods that should be used for reading, but not writing the data. They must not perform any data-changing operations. Following a link is always GET, the safe method.
2. The operation performs a top-level navigation (changes URL in the browser address bar).
- That's usually true, but if the navigation is performed in an `<iframe>`, then it's not top-level. Also, JavaScript methods for network requests do not perform any navigation, hence they don't fit.
+ This is usually true, but if the navigation is performed in an `<iframe>`, then it is not top-level. Additionally, JavaScript methods for network requests do not perform any navigation.
-So, what `samesite=lax` does, is to basically allow the most common "go to URL" operation to have cookies. E.g. opening a website link from notes that satisfy these conditions.
+So, what `samesite=lax` does, is to allow the most common "go to URL" operation to have cookies. E.g. opening a website link from notes that satisfy these conditions.
But anything more complicated, like a network request from another site or a form submission, loses cookies.
If that's fine for you, then adding `samesite=lax` will probably not break the user experience and add protection.
-Overall, `samesite` is a great option.
+Overall, `samesite` is a great attribute.
There's a drawback:
-- `samesite` is ignored (not supported) by very old browsers, year 2017 or so.
+- `samesite` is ignored (not supported) by very old browsers, the year 2017 or so.
**So if we solely rely on `samesite` to provide protection, then old browsers will be vulnerable.**
-But we surely can use `samesite` together with other protection measures, like xsrf tokens, to add an additional layer of defence and then, in the future, when old browsers die out, we'll probably be able to drop xsrf tokens.
+But we can use `samesite` together with other protection measures, like xsrf tokens, to add a layer of defence and then, in the future, when old browsers die out, we'll probably be able to drop xsrf tokens.
## httpOnly
-This option has nothing to do with JavaScript, but we have to mention it for completeness.
+This attribute has nothing to do with JavaScript, but we have to mention it for completeness.
-The web-server uses the `Set-Cookie` header to set a cookie. Also, it may set the `httpOnly` option.
+The web server uses the `Set-Cookie` header to set a cookie. Also, it may set the `httpOnly` attribute.
-This option forbids any JavaScript access to the cookie. We can't see such a cookie or manipulate it using `document.cookie`.
+This attribute forbids any JavaScript access to the cookie. We can't see such a cookie or manipulate it using `document.cookie`.
-That's used as a precaution measure, to protect from certain attacks when a hacker injects his own JavaScript code into a page and waits for a user to visit that page. That shouldn't be possible at all, hackers should not be able to inject their code into our site, but there may be bugs that let them do it.
+This is used as a precautionary measure, to protect from certain attacks when a hacker injects his own JavaScript code into a page and waits for a user to visit that page. That shouldn't be possible at all, hackers should not be able to inject their code into our site, but there may be bugs that let them do it.
-Normally, if such a thing happens, and a user visits a web-page with hacker's JavaScript code, then that code executes and gains access to `document.cookie` with user cookies containing authentication information. That's bad.
+Normally, if such a thing happens, and a user visits a web-page with a hacker's JavaScript code, then that code executes and gains access to `document.cookie` with user cookies containing authentication information. That's bad.
But if a cookie is `httpOnly`, then `document.cookie` doesn't see it, so it is protected.
@@ -303,30 +306,30 @@ Here `new RegExp` is generated dynamically, to match `; name=<value>`.
Please note that a cookie value is encoded, so `getCookie` uses a built-in `decodeURIComponent` function to decode it.
-### setCookie(name, value, options)
+### setCookie(name, value, attributes)
Sets the cookie's `name` to the given `value` with `path=/` by default (can be modified to add other defaults):
```js run
-function setCookie(name, value, options = {}) {
+function setCookie(name, value, attributes = {}) {
- options = {
+ attributes = {
path: '/',
// add other defaults here if necessary
- ...options
+ ...attributes
};
- if (options.expires instanceof Date) {
- options.expires = options.expires.toUTCString();
+ if (attributes.expires instanceof Date) {
+ attributes.expires = attributes.expires.toUTCString();
}
let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
- for (let optionKey in options) {
- updatedCookie += "; " + optionKey;
- let optionValue = options[optionKey];
- if (optionValue !== true) {
- updatedCookie += "=" + optionValue;
+ for (let attributeKey in attributes) {
+ updatedCookie += "; " + attributeKey;
+ let attributeValue = attributes[attributeKey];
+ if (attributeValue !== true) {
+ updatedCookie += "=" + attributeValue;
}
}
@@ -350,7 +353,7 @@ function deleteCookie(name) {
```
```warn header="Updating or deleting must use same path and domain"
-Please note: when we update or delete a cookie, we should use exactly the same path and domain options as when we set it.
+Please note: when we update or delete a cookie, we should use exactly the same path and domain attributes as when we set it.
```
Together: [cookie.js](cookie.js).
@@ -377,7 +380,7 @@ For instance:
Third-party cookies are traditionally used for tracking and ads services, due to their nature. They are bound to the originating domain, so `ads.com` can track the same user between different sites, if they all access it.
-Naturally, some people don't like being tracked, so browsers allow to disable such cookies.
+Naturally, some people don't like being tracked, so browsers allow them to disable such cookies.
Also, some modern browsers employ special policies for such cookies:
- Safari does not allow third-party cookies at all.
@@ -392,17 +395,17 @@ If a script sets a cookie, then no matter where the script came from -- the cook
## Appendix: GDPR
-This topic is not related to JavaScript at all, just something to keep in mind when setting cookies.
+This topic is not related to JavaScript at all, it is just something to keep in mind when setting cookies.
-There's a legislation in Europe called GDPR, that enforces a set of rules for websites to respect the users' privacy. One of these rules is to require an explicit permission for tracking cookies from the user.
+There's a legislation in Europe called GDPR, that enforces a set of rules for websites to respect the users' privacy. One of these rules is to require explicit permission for tracking cookies from the user.
Please note, that's only about tracking/identifying/authorizing cookies.
So, if we set a cookie that just saves some information, but neither tracks nor identifies the user, then we are free to do it.
-But if we are going to set a cookie with an authentication session or a tracking id, then a user must allow that.
+But if we are going to set a cookie with an authentication session or a tracking ID, then a user must allow that.
-Websites generally have two variants of following GDPR. You must have seen them both already in the web:
+Websites generally have two variants of complying with GDPR. You are likely to have seen them both on the web:
1. If a website wants to set tracking cookies only for authenticated users.
@@ -410,26 +413,26 @@ Websites generally have two variants of following GDPR. You must have seen them
2. If a website wants to set tracking cookies for everyone.
- To do so legally, a website shows a modal "splash screen" for newcomers, and requires them to agree to the cookies. Then the website can set them and let people see the content. That can be disturbing for new visitors though. No one likes to see such "must-click" modal splash screens instead of the content. But GDPR requires an explicit agreement.
+ To do so legally, a website shows a modal "splash screen" for newcomers and requires them to agree to the cookies. Then the website can set them and let people see the content. That can be disturbing for new visitors though. No one likes to see such "must-click" modal splash screens instead of the content. But GDPR requires an explicit agreement.
-GDPR is not only about cookies, it's about other privacy-related issues too, but that's too much beyond our scope.
+GDPR is not only about cookies, it is about other privacy-related issues too, but that is beyond our scope.
## Summary
`document.cookie` provides access to cookies.
-- Write operations modify only cookies mentioned in it.
+- Write operations modify only the cookie mentioned in it.
- Name/value must be encoded.
- One cookie may not exceed 4KB in size. The number of cookies allowed on a domain is around 20+ (varies by browser).
-Cookie options:
+Cookie attributes:
- `path=/`, by default current path, makes the cookie visible only under that path.
- `domain=site.com`, by default a cookie is visible on the current domain only. If the domain is set explicitly, the cookie becomes visible on subdomains.
-- `expires` or `max-age` sets the cookie expiration time. Without them the cookie dies when the browser is closed.
+- `expires` or `max-age` sets the cookie expiration time. Without them, the cookie dies when the browser is closed.
- `secure` makes the cookie HTTPS-only.
- `samesite` forbids the browser to send the cookie with requests coming from outside the site. This helps to prevent XSRF attacks.
Additionally:
-- Third-party cookies may be forbidden by the browser, e.g. Safari does that by default.
+- The browser may forbid third-party cookies, e.g. Safari does that by default. There is also work in progress to implement this in Chrome.
- When setting a tracking cookie for EU citizens, GDPR requires to ask for permission.
diff --git a/6-data-storage/02-localstorage/article.md b/6-data-storage/02-localstorage/article.md
index e4a4b3558..a99bcb653 100644
--- a/6-data-storage/02-localstorage/article.md
+++ b/6-data-storage/02-localstorage/article.md
@@ -10,7 +10,7 @@ We already have cookies. Why additional objects?
- Also unlike cookies, the server can't manipulate storage objects via HTTP headers. Everything's done in JavaScript.
- The storage is bound to the origin (domain/protocol/port triplet). That is, different protocols or subdomains infer different storage objects, they can't access data from each other.
-Both storage objects provide same methods and properties:
+Both storage objects provide the same methods and properties:
- `setItem(key, value)` -- store key/value pair.
- `getItem(key)` -- get the value by key.
@@ -124,7 +124,7 @@ The latter works, because `Object.keys` only returns the keys that belong to the
Please note that both key and value must be strings.
-If were any other type, like a number, or an object, it gets converted to string automatically:
+If they were any other type, like a number, or an object, they would get converted to a string automatically:
```js run
localStorage.user = {name: "John"};
@@ -219,7 +219,7 @@ Modern browsers also support [Broadcast channel API](mdn:/api/Broadcast_Channel_
## Summary
-Web storage objects `localStorage` and `sessionStorage` allow to store key/value in the browser.
+Web storage objects `localStorage` and `sessionStorage` allow to store key/value pairs in the browser.
- Both `key` and `value` must be strings.
- The limit is 5mb+, depends on the browser.
diff --git a/6-data-storage/03-indexeddb/article.md b/6-data-storage/03-indexeddb/article.md
index 70493e9e1..43344e487 100644
--- a/6-data-storage/03-indexeddb/article.md
+++ b/6-data-storage/03-indexeddb/article.md
@@ -16,7 +16,7 @@ That power is usually excessive for traditional client-server apps. IndexedDB is
The native interface to IndexedDB, described in the specification <https://www.w3.org/TR/IndexedDB>, is event-based.
-We can also use `async/await` with the help of a promise-based wrapper, like <https://github.com/jakearchibald/idb>. That's pretty convenient, but the wrapper is not perfect, it can't replace events for all cases. So we'll start with events, and then, after we gain an understanding of IndexedDb, we'll use the wrapper.
+We can also use `async/await` with the help of a promise-based wrapper, like <https://github.com/jakearchibald/idb>. That's pretty convenient, but the wrapper is not perfect, it can't replace events for all cases. So we'll start with events, and then, after we gain an understanding of IndexedDB, we'll use the wrapper.
```smart header="Where's the data?"
Technically, the data is usually stored in the visitor's home directory, along with browser settings, extensions, etc.
diff --git a/7-animation/1-bezier-curve/demo.svg b/7-animation/1-bezier-curve/demo.svg
index 5240697ee..56d5b3fbe 100644
--- a/7-animation/1-bezier-curve/demo.svg
+++ b/7-animation/1-bezier-curve/demo.svg
@@ -153,6 +153,9 @@ http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C
points[i].y = y;
setPointCoords(point, i);
drawPath();
+ if (t > 0) {
+ drawT(points, t - STEP);
+ }
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
@@ -212,6 +215,7 @@ http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C
}
}
+ const STEP = 0.005;
let t = 0;
let timer;
@@ -241,7 +245,7 @@ http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C
return;
}
- t += 0.005;
+ t += STEP;
}, 30);
}
diff --git a/7-animation/2-css-animations/1-animate-logo-css/solution.view/index.html b/7-animation/2-css-animations/1-animate-logo-css/solution.view/index.html
index 4e90e2478..d77f25e28 100644
--- a/7-animation/2-css-animations/1-animate-logo-css/solution.view/index.html
+++ b/7-animation/2-css-animations/1-animate-logo-css/solution.view/index.html
@@ -27,12 +27,12 @@
<img id="flyjet" src="https://en.js.cx/clipart/flyjet.jpg">
<script>
- flyjet.onclick = function() {
+ let ended = false; // will change to true after the animation finishes
- let ended = false;
+ flyjet.onclick = function() {
flyjet.addEventListener('transitionend', function() {
- if (!ended) {
+ if (!ended) { // check to show the message only once
ended = true;
alert('Done!');
}
diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md
index 807545e84..a6a41eaeb 100644
--- a/7-animation/2-css-animations/article.md
+++ b/7-animation/2-css-animations/article.md
@@ -80,7 +80,7 @@ Do note that, there are properties which can not be animated. However, [most of
## transition-duration
-In `transition-duration` we can specify how long the animation should take. The time should be in [CSS time format](http://www.w3.org/TR/css3-values/#time): in seconds `s` or milliseconds `ms`.
+In `transition-duration` we can specify how long the animation should take. The time should be in [CSS time format](https://www.w3.org/TR/css3-values/#time): in seconds `s` or milliseconds `ms`.
## transition-delay
@@ -463,7 +463,7 @@ The `opacity` property also never triggers Layout (also skips Paint in Mozilla G
Paring `transform` with `opacity` can usually solve most of our needs, providing fluid, good-looking animations.
-For example, here clicking on the `#boat` element adds the class with `transform: translateX(300)` and `opacity: 0`, thus making it move `300px` to the right and disappear:
+For example, here clicking on the `#boat` element adds the class with `transform: translateX(300px)` and `opacity: 0`, thus making it move `300px` to the right and disappear:
```html run height=260 autorun no-beautify
<img src="https://js.cx/clipart/boat.png" id="boat">
diff --git a/7-animation/3-js-animation/article.md b/7-animation/3-js-animation/article.md
index be6483145..b85e91e21 100644
--- a/7-animation/3-js-animation/article.md
+++ b/7-animation/3-js-animation/article.md
@@ -79,7 +79,7 @@ These several independent redraws should be grouped together, to make the redraw
There's one more thing to keep in mind. Sometimes CPU is overloaded, or there are other reasons to redraw less often (like when the browser tab is hidden), so we really shouldn't run it every `20ms`.
-But how do we know about that in JavaScript? There's a specification [Animation timing](http://www.w3.org/TR/animation-timing/) that provides the function `requestAnimationFrame`. It addresses all these issues and even more.
+But how do we know about that in JavaScript? There's a specification [Animation timing](https://www.w3.org/TR/animation-timing/) that provides the function `requestAnimationFrame`. It addresses all these issues and even more.
The syntax:
```js
@@ -452,4 +452,4 @@ Surely we could improve it, add more bells and whistles, but JavaScript animatio
JavaScript animations can use any timing function. We covered a lot of examples and transformations to make them even more versatile. Unlike CSS, we are not limited to Bezier curves here.
-The same is about `draw`: we can animate anything, not just CSS properties.
+The same is true about `draw`: we can animate anything, not just CSS properties.
diff --git a/9-regular-expressions/08-regexp-character-sets-and-ranges/article.md b/9-regular-expressions/08-regexp-character-sets-and-ranges/article.md
index a1b8f896d..b7b82d45f 100644
--- a/9-regular-expressions/08-regexp-character-sets-and-ranges/article.md
+++ b/9-regular-expressions/08-regexp-character-sets-and-ranges/article.md
@@ -88,7 +88,7 @@ alert( str.match(regexp) ); // H,i,你,好,1,2
Of course, we can edit this pattern: add Unicode properties or remove them. Unicode properties are covered in more details in the article <info:regexp-unicode>.
```warn header="Unicode properties aren't supported in IE"
-Unicode properties `pattern:p{…}` are not implemented in IE. If we really need them, we can use library [XRegExp](http://xregexp.com/).
+Unicode properties `pattern:p{…}` are not implemented in IE. If we really need them, we can use library [XRegExp](https://xregexp.com/).
Or just use ranges of characters in a language that interests us, e.g. `pattern:[а-я]` for Cyrillic letters.
```
diff --git a/9-regular-expressions/10-regexp-greedy-and-lazy/article.md b/9-regular-expressions/10-regexp-greedy-and-lazy/article.md
index 2f656479d..e20175075 100644
--- a/9-regular-expressions/10-regexp-greedy-and-lazy/article.md
+++ b/9-regular-expressions/10-regexp-greedy-and-lazy/article.md
@@ -8,7 +8,7 @@ Let's take the following task as an example.
We have a text and need to replace all quotes `"..."` with guillemet marks: `«...»`. They are preferred for typography in many countries.
-For instance: `"Hello, world"` should become `«Hello, world»`. There exist other quotes, such as `„Witam, świat!”` (Polish) or `「你好，世界」` (Chinese), but for our task let's choose `«...»`.
+For instance: `"Hello, world"` should become `«Hello, world»`. There exist other quotes, such as `„Witaj, świecie!”` (Polish) or `「你好，世界」` (Chinese), but for our task let's choose `«...»`.
The first thing to do is to locate quoted strings, and then we can replace them.
diff --git a/9-regular-expressions/11-regexp-groups/article.md b/9-regular-expressions/11-regexp-groups/article.md
index 796e23f54..8fec60ccc 100644
--- a/9-regular-expressions/11-regexp-groups/article.md
+++ b/9-regular-expressions/11-regexp-groups/article.md
@@ -209,9 +209,9 @@ alert(results[0]); // <h1>,h1 (1st tag)
alert(results[1]); // <h2>,h2 (2nd tag)
```
-As we can see, the first difference is very important, as demonstrated in the line `(*)`. We can't get the match as `results[0]`, because that object isn't pseudoarray. We can turn it into a real `Array` using `Array.from`. There are more details about pseudoarrays and iterables in the article <info:iterable>.
+As we can see, the first difference is very important, as demonstrated in the line `(*)`. We can't get the match as `results[0]`, because that object is a pseudoarray. We can turn it into a real `Array` using `Array.from`. There are more details about pseudoarrays and iterables in the article <info:iterable>.
-There's no need in `Array.from` if we're looping over results:
+There's no need for `Array.from` if we're looping over results:
```js run
let results = '<h1> <h2>'.matchAll(/<(.*?)>/gi);
diff --git a/9-regular-expressions/15-regexp-catastrophic-backtracking/article.md b/9-regular-expressions/15-regexp-catastrophic-backtracking/article.md
index b6e1054fb..c1d4040f7 100644
--- a/9-regular-expressions/15-regexp-catastrophic-backtracking/article.md
+++ b/9-regular-expressions/15-regexp-catastrophic-backtracking/article.md
@@ -283,7 +283,7 @@ alert( "JavaScript".match(/(?=(\w+))\1Script/)); // null
We can put a more complex regular expression into `pattern:(?=(\w+))\1` instead of `pattern:\w`, when we need to forbid backtracking for `pattern:+` after it.
```smart
-There's more about the relation between possessive quantifiers and lookahead in articles [Regex: Emulate Atomic Grouping (and Possessive Quantifiers) with LookAhead](http://instanceof.me/post/52245507631/regex-emulate-atomic-grouping-with-lookahead) and [Mimicking Atomic Groups](http://blog.stevenlevithan.com/archives/mimic-atomic-groups).
+There's more about the relation between possessive quantifiers and lookahead in articles [Regex: Emulate Atomic Grouping (and Possessive Quantifiers) with LookAhead](https://instanceof.me/post/52245507631/regex-emulate-atomic-grouping-with-lookahead) and [Mimicking Atomic Groups](https://blog.stevenlevithan.com/archives/mimic-atomic-groups).
```
Let's rewrite the first example using lookahead to prevent backtracking:
diff --git a/BACKERS.md b/BACKERS.md
new file mode 100644
index 000000000..36b1532bc
--- /dev/null
+++ b/BACKERS.md
@@ -0,0 +1,6 @@
+
+# Sponsors and Supporters
+
+## Supporters
+
+- Ilya Zelenko
diff --git a/LICENSE.md b/LICENSE.md
index acfce9082..cbada5307 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -7,7 +7,7 @@ As of now, we license the tutorial to almost everyone for free under the terms o
## License (Short)
-The license is basically [CC-BY-NC](https://creativecommons.org/licenses/by-nc/4.0/legalcode), revocable and exclusive.
+The license is based on [CC-BY-NC](https://creativecommons.org/licenses/by-nc/4.0/legalcode).
It gives the right to:
- **Share** – copy and redistribute the tutorial in any medium or material.
@@ -15,68 +15,62 @@ It gives the right to:
Under the following terms:
-- **Attribution** — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
+- **Attribution** — You must give appropriate credit. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
- **NonCommercial** — You may not use the material for commercial purposes.
## License (Legal)
-By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this license ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions.
+By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this license ("License"). To the extent this License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions.
### Section 1 – Definitions.
-a. __Adapted Material__ means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image.
+a. __Adapted Material__ means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image.
-b. __Adapter's License__ means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License.
+b. __Adapter's License__ means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this License.
-c. __Copyright and Similar Rights__ means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights.
+c. __Copyright and Similar Rights__ means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights.
d. __Effective Technological Measures__ means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements.
e. __Exceptions and Limitations__ means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material.
-f. __Licensed Material__ means the artistic or literary work, database, or other material to which the Licensor applied this Public License.
+f. __Licensed Material__ means the artistic or literary work, database, or other material to which the Licensor applied this License.
-g. __Licensed Rights__ means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license.
+g. __Licensed Rights__ means the rights granted to You subject to the terms and conditions of this License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license.
-h. __Licensor__ means the individual(s) or entity(ies) granting rights under this Public License.
+h. __Licensor__ means the individual(s) or entity(ies) granting rights under this License.
-i. __NonCommercial__ means not primarily intended for or directed towards commercial advantage or monetary compensation. For purposes of this Public License, the exchange of the Licensed Material for other material subject to Copyright and Similar Rights by digital file-sharing or similar means is NonCommercial provided there is no payment of monetary compensation in connection with the exchange.
+i. __NonCommercial__ means not primarily intended for or directed towards commercial advantage or monetary compensation. For purposes of this License, the exchange of the Licensed Material for other material subject to Copyright and Similar Rights by digital file-sharing or similar means is NonCommercial provided there is no payment of monetary compensation in connection with the exchange.
j. __Share__ means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them.
k. __Sui Generis Database Rights__ means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world.
-l. __You__ means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning.
+l. __You__ means the individual or entity exercising the Licensed Rights under this License. Your has a corresponding meaning.
### Section 2 – Scope.
a. ___License grant.___
- 1. Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to:
+ 1. Subject to the terms and conditions of this License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive license to exercise the Licensed Rights in the Licensed Material to:
A. reproduce and Share the Licensed Material, in whole or in part, for NonCommercial purposes only; and
B. produce, reproduce, and Share Adapted Material for NonCommercial purposes only.
- 2. __Exceptions and Limitations.__ For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions.
+ 2. __Exceptions and Limitations.__ For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this License does not apply, and You do not need to comply with its terms and conditions.
- 3. __Term.__ The term of this Public License is specified in Section 6(a).
+ 3. __Term.__ The term of this License is specified in Section 6(a).
- 4. __Media and formats; technical modifications allowed.__ The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material.
+ 4. __Media and formats; technical modifications allowed.__ The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material.
- 5. __Downstream recipients.__
-
- A. __Offer from the Licensor – Licensed Material.__ Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License.
-
- B. __No downstream restrictions.__ You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material.
-
- 6. __No endorsement.__ Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i).
+ 5. __No endorsement.__ Nothing in this License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3.
b. ___Other rights.___
- 1. Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise.
+ 1. Moral rights, such as the right of integrity, are not licensed under this License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise.
- 2. Patent and trademark rights are not licensed under this Public License.
+ 2. Patent and trademark rights are not licensed under this License.
3. To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties, including when the Licensed Material is used other than for NonCommercial purposes.
@@ -84,31 +78,15 @@ b. ___Other rights.___
Your exercise of the Licensed Rights is expressly made subject to the following conditions.
-a. ___Attribution.___
-
- 1. If You Share the Licensed Material (including in modified form), You must:
-
- A. retain the following if it is supplied by the Licensor with the Licensed Material:
-
- i. identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated);
+1. If You Share the Licensed Material (including in modified form), You must attribute the Licensor by adding:
- ii. a copyright notice;
+ i. identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated);
- iii. a notice that refers to this Public License;
+ ii. a URI or hyperlink to the Licensed Material to the extent reasonably practicable;
- iv. a notice that refers to the disclaimer of warranties;
+2. You may satisfy the conditions in Section 3(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information.
- v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable;
-
- B. indicate if You modified the Licensed Material and retain an indication of any previous modifications; and
-
- C. indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License.
-
- 2. You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information.
-
- 3. If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable.
-
- 4. If You Share Adapted Material You produce, the Adapter's License You apply must not prevent recipients of the Adapted Material from complying with this Public License.
+3. If requested by the Licensor, You must remove any of the information required by Section 3(1) to the extent reasonably practicable.
### Section 4 – Sui Generis Database Rights.
@@ -118,21 +96,21 @@ a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract,
b. if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material; and
-c. You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database.
+c. You must comply with the conditions in Section 3 if You Share all or a substantial portion of the contents of the database.
-For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights.
+For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this License where the Licensed Rights include other Copyright and Similar Rights.
### Section 5 – Disclaimer of Warranties and Limitation of Liability.
a. __Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You.__
-b. __To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You.__
+b. __To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You.__
c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability.
### Section 6 – Term and Termination.
-a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically.
+a. This License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this License, then Your rights under this License terminate automatically.
b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates:
@@ -140,24 +118,26 @@ b. Where Your right to use the Licensed Material has terminated under Section 6(
2. upon express reinstatement by the Licensor.
- For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License.
+ For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this License.
+
+c. Notwithstanding the above, the Licensor reserves the right to terminate this License with respect to You if the Licensor expressly notifies You of the termination.
-c. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License.
+d. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time.
-d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License.
+e. Sections 1, 5, 6, 7, and 8 survive termination of this License.
### Section 7 – Other Terms and Conditions.
a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed.
-b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License.
+b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this License.
### Section 8 – Interpretation.
-a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License.
+a. For the avoidance of doubt, this License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this License.
-b. To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions.
+b. To the extent possible, if any provision of this License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this License without affecting the enforceability of the remaining terms and conditions.
-c. No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor.
+c. No term or condition of this License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor.
-d. Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority.
+d. Nothing in this License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority.