Merge pull request #186 from javascript-tutorial/merge-upstream

Merge upstream

Author: bugron

1-js/02-first-steps/04-variables/article.md

@@ -205,7 +205,7 @@ let имя = '...';
 let 我 = '...';
 ```
 
-Նման անունները վավեր են, սակայն ամենուր ընդունված է օգտագործել անգլերենը: Նույնիսկ եթե փոքր սկրիպտ եք գրում, այն հնարավոր է կարդան նաև այլազգի ծրագրավորողները:
+Այստեղ սխալ չկա։ Նման անունները վավեր են, սակայն ամենուր ընդունված է օգտագործել անգլերենը: Նույնիսկ եթե փոքր սկրիպտ եք գրում, այն հնարավոր է կարդան նաև այլազգի ծրագրավորողները:
 ````
 
 ````warn header="Վերապահված անուններ (reserved names)"
@@ -264,7 +264,7 @@ myBirthday = '01.01.2001'; // error, can't reassign the constant!
 
 ### Մեծատառ հաստատուններ
 
-Ընդունված է օգտագործել հաստատունները դժվար հիշվող արժեքների համար, որոնք հայտնի են նախօրոք:
+Ընդունված է հաստատունները օգտագործել դժվար հիշվող արժեքների համար, որոնք հայտնի են նախօրոք:
 
 Նման հաստատունները գրվում են մեծատառ և ընդգծիկներով (underscores):
 
@@ -289,15 +289,15 @@ alert(color); // #FF7F00
 
 Եկեք հասկանանք երբ է պետք հաստատունները գրել մեծատառերով, իսկ երբ ոչ:
 
-«Հաստատունն» ուղղակի փոփոխական է, որի արժեքը չի փոխվում: Այունամենայնիվ կան հաստատուններ, որոնց արժեքը հայտնի է մինչև սկրիպը գործարկելը (ինչպես, օրինակ, վերոնշյալ գույները) և կան հաստատուններ, որոնց արժեքը հայտնի է դառնում միայն սկրիպտի աշխատանքի ընթացքում և այն չի փոխվում սկզբնական վերագրումից հետո:
+«Հաստատունն» ուղղակի փոփոխական է, որի արժեքը չի փոխվում: Կան հաստատուններ, որոնց արժեքը հայտնի է մինչև սկրիպտը գործարկելը (ինչպես, օրինակ, վերոնշյալ գույները) և կան հաստատուններ, որոնց արժեքը հայտնի է դառնում միայն սկրիպտի աշխատանքի ընթացքում և այն չի փոխվում սկզբնական վերագրումից հետո:
 
 Օրինակ՝
 
 ```js
 const pageLoadTime = /* time taken by a webpage to load */;
 ```
 
-`pageLoadTime`-ի արժեքը հայտնի չէ, քանի դեռ էջն ամբողջությամբ չի բեռնվել, սակայն այն հաստատուն է, քանի որ արժեքը չի փոխվում:
+`pageLoadTime`-ի արժեքը հայտնի չէ, քանի դեռ էջն ամբողջությամբ չի բեռնվել, այդ իսկ պատճառով այն մեծատառ չէ։ Սակայն այն հաստատուն է, քանի որ վերագրելուց հետո արժեքը չի փոխվում:
 
 Այլ կերպ ասած՝ մեծատառերով գրված հաստատունները օգտագործվում են միայն որպես «կոշտ կոդավորված» արժեքների փոխանուններ:
 

1-js/03-code-quality/06-polyfills/article.md

@@ -7,7 +7,7 @@ Teams behind JavaScript engines have their own ideas about what to implement fir
 
 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!
 
@@ -85,7 +85,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.

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!"
 ```

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,17 +95,17 @@ 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 = {
   name: "John",
   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:
 
@@ -461,7 +461,7 @@ Note that there are no variables for `size` and `items`, as we take their conten
 
 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.
 
-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 = []) {

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

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:
 
@@ -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:
 

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"

1-js/99-js-misc/07-weakref-finalizationregistry/article.md

@@ -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;
+}

1-js/99-js-misc/07-weakref-finalizationregistry/google-chrome-developer-tools.png

@@ -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>

1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.css

@@ -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);
+};

1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.html

@@ -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;
+}

1-js/99-js-misc/07-weakref-finalizationregistry/weakref-dom.view/index.js

@@ -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>

1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-01.svg

@@ -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);

1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-02.svg

@@ -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(),
+};

1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-03.svg

@@ -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]
 ```

1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-04.svg

@@ -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.
 

1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-05.svg

@@ -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.

1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-01.png

@@ -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">

1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-02.png

@@ -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.

1-js/99-js-misc/07-weakref-finalizationregistry/weakref-finalizationregistry-demo-03.gif

@@ -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);