binary draft

Author: iliakan

1-js/11-async/03-promise-chaining/article.md

@@ -69,8 +69,9 @@ new Promise(function(resolve, reject) {
 
 The value returned by `.then` is a promise, that's why we are able to add another `.then` at `(2)`. When the value is returned in `(1)`, that promise becomes resolved, so the next handler runs with the value.
 
-Please note: technically we can also add many `.then` to a single promise. This is not chaining:
+**A classic newbie error: technically we can also add many `.then` to a single promise. This is not chaining.**
 
+For example:
 ```js run
 let promise = new Promise(function(resolve, reject) {
   setTimeout(() => resolve(1), 1000);
@@ -92,7 +93,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 idependantly.
+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.
 
 Here's the picture (compare it with the chaining above):
 

1-js/11-async/07-microtask-queue/article.md

@@ -3,7 +3,7 @@
 
 Promise handlers `.then`/`.catch`/`.finally` are always asynchronous.
 
-Even when a Promise is immediately resolved, the code on the lines *below* your `.then`/`.catch`/`.finally` may still execute first.
+Even when a Promise is immediately resolved, the code on the lines *below* your `.then`/`.catch`/`.finally` will still execute first.
 
 Here's the code that demonstrates it:
 
@@ -23,11 +23,11 @@ Why `.then` triggered after? What's going on?
 
 # Microtasks
 
-Asynchronous tasks need proper management. For that, the standard specifies an internal queue `PromiseJobs`, more often called the "microtask queue" (v8 term).
+Asynchronous tasks need proper management. For that, the standard specifies an internal queue `PromiseJobs`, more often referred to as "microtask queue" (v8 term).
 
 As said in the [specification](https://tc39.github.io/ecma262/#sec-jobs-and-job-queues):
 
-- The queue is first-in-first-out: tasks that get enqueued first are run first.
+- The queue is first-in-first-out: tasks enqueued first are run first.
 - Execution of a task is initiated only when nothing else is running.
 
 Or, to say that simply, when a promise is ready, its `.then/catch/finally` handlers are put into the queue. They are not executed yet. Javascript engine takes a task from the queue and executes it, when it becomes free from the current code.
@@ -58,7 +58,7 @@ Now the order is as intended.
 
 Browser Javascript, as well as Node.js, is based on an *event loop*.
 
-"Event loop" is a process when the engine sleeps waits for events.
+"Event loop" is a process when the engine sleeps and waits for events, then reacts on those and sleeps again.
 
 Examples of events:
 - `mousemove`, a user moved their mouse.
@@ -71,9 +71,11 @@ Things happen -- the engine handles them -- and waits for more to happen (while
 
 ![](eventLoop.png)
 
-When an event happens, and the engine is busy, it gets into a so-called "macrotask queue" (v8 term).
+As you can see, there's also a queue here. A so-called "macrotask queue" (v8 term).
 
-For instance, while the engine is busy processing a network `fetch`, a user may move their mouse causing `mousemove`, and `setTimeout` is due and so on, just as painted on the picture above.
+When an event happens, and the engine is busy, the event is enqueued.
+
+For instance, while the engine is busy processing a network `fetch`, a user may move their mouse causing `mousemove`, and `setTimeout` may be due and so on, just as painted on the picture above.
 
 Events from the macrotask queue are processed on "first came – first served" basis. When the engine browser finishes with `fetch`, it handles `mousemove` event, then `setTimeout` handler, and so on.
 
@@ -120,20 +122,24 @@ Promise.resolved()
 
 Naturally, `promise` shows up first, because `setTimeout` macrotask awaits in the less-priority macrotask queue.
 
+**As a side effect, macrotasks are handled only when promises give the engine a "free time".**
+
+So call have a promise chain that doesn't wait for anything, then things like `setTimeout` or event handlers can never get in the middle.
+
 ## Summary
 
-Promise handling is always asynchronous, as all promise actions pass through the internal "promise jobs" queue, also called "microtask queue" (v8 term).
+- Promise handling is always asynchronous, as all promise actions pass through the internal "promise jobs" queue, also called "microtask queue" (v8 term).
 
-**So, `.then/catch/finally` is called after the current code is finished.**
+    **So, `.then/catch/finally` is called after the current code is finished.**
 
-If we need to guarantee that a piece of code is executed after `.then/catch/finally`, it's best to add it into a chained `.then` call.
+      If we need to guarantee that a piece of code is executed after `.then/catch/finally`, it's best to add it into a chained `.then` call.
 
-There's also a "macrotask queue" that keeps various events, network operation results, `setTimeout`-scheduled calls, and so on. These are also called "macrotasks" (v8 term).
+- There's also a "macrotask queue" that keeps various events, network operation results, `setTimeout`-scheduled calls, and so on. These are also called "macrotasks" (v8 term).
 
-The engine uses the macrotask queue to handle them in the appearance order.
+    The engine uses the macrotask queue to handle them in the appearance order.
 
-**Macrotasks run after the code is finished *and* after the microtask queue is empty.**
+    **Macrotasks run after the code is finished *and* after the microtask queue is empty.**
 
-In other words, they have lower priority.
+    In other words, they have lower priority.
 
-So the order is: regular code, then promise handling, then everything else.
+So the order is: regular code, then promise handling, then everything else, like events etc.

1-js/11-async/08-async-await/article.md

@@ -307,7 +307,7 @@ async function f() {
 })();
 ```
 
-There's no ambiguity here: `await` always finishes first.
+There's no ambiguity here: `await` always finishes first, because (as a microtask) it has a higher priority than `setTimeout` handling.
 
 ## Summary
 

2-ui/5-data-storage/03-indexeddb/article.md

@@ -7,7 +7,7 @@ libs:
 
 IndexedDB is a built-in database, much more powerful than `localStorage`.
 
-- Also key/value storage, but not only strings: value can be (almost) anything, multiple key types.
+- Key/value storage not only strings: value can be (almost) anything, multiple key types.
 - Supports transactions for reliability.
 - Supports key range queries, indexes.
 - Can store much more data than `localStorage`.
@@ -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`-based interface with the help of a promise-based wrapper, like <https://github.com/jakearchibald/idb>. That's really convenient, but the wrapper is not perfect, it can't replace events for all cases, so we'll start with events, and then 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 use the wrapper.
 
 ## Open database
 

6-binary/01-arraybuffer-and-views/01-concat/_js.view/solution.js

@@ -0,0 +1,18 @@
+function concat(arrays) {
+  // sum of individual array lengths
+  let totalLength = arrays.reduce((acc, value) => acc + value.length, 0);
+
+  if (!arrays.length) return null;
+
+  let result = new Uint8Array(totalLength);
+
+  // for each array - copy it over result
+  // next array is copied right after the previous one
+  let length = 0;
+  for(let array of arrays) {
+    result.set(array, length);
+    length += array.length;
+  }
+
+  return result;
+}

6-binary/01-arraybuffer-and-views/01-concat/_js.view/source.js

@@ -0,0 +1,13 @@
+function concat(arrays) {
+  // ...your code...
+}
+
+let chunks = [
+  new Uint8Array([0, 1, 2]),
+  new Uint8Array([3, 4, 5]),
+  new Uint8Array([6, 7, 8])
+];
+
+console.log(Array.from(concat(chunks))); // 0, 1, 2, 3, 4, 5, 6, 7, 8
+
+console.log(concat(chunks).constructor.name); // Uint8Array

6-binary/01-arraybuffer-and-views/01-concat/_js.view/test.js

@@ -0,0 +1,31 @@
+describe("concat", function() {
+  let chunks = [
+    new Uint8Array([0, 1, 2]),
+    new Uint8Array([3, 4, 5]),
+    new Uint8Array([6, 7, 8])
+  ];
+
+  it("result has the same array type", function() {
+
+    let result = concat(chunks);
+
+    assert.equal(result.constructor, Uint8Array);
+  });
+
+  it("concatenates arrays", function() {
+
+    let result = concat(chunks);
+
+    assert.deepEqual(result, new Uint8Array([0, 1, 2, 3, 4, 5, 6, 7, 8]));
+
+  });
+
+  it("returns empty array on empty input", function() {
+
+    let result = concat([]);
+
+    assert.equal(result.length, 0);
+
+  });
+
+});

6-binary/01-arraybuffer-and-views/01-concat/solution.md

@@ -0,0 +1,4 @@
+
+# Concatenate typed arrays
+
+Given an array of `Uint8Array`, write a function `concat(arrays)` that returns a concatenation of them into a single array.