Updates

khoaxuantu · Jun 17, 2023 · 4c7d96a · 4c7d96a
1 parent 45e2278
commit 4c7d96a
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 18 deletions.
diff --git a/asset-manifest.json b/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
-    "main.css": "/static/css/main.fe476183.css",
-    "main.js": "/static/js/main.d0babc5d.js",
+    "main.css": "/static/css/main.e553efff.css",
+    "main.js": "/static/js/main.1bde719c.js",
     "static/js/436.5ef6ea98.chunk.js": "/static/js/436.5ef6ea98.chunk.js",
     "static/css/631.825fb00c.chunk.css": "/static/css/631.825fb00c.chunk.css",
     "static/js/631.33fa3359.chunk.js": "/static/js/631.33fa3359.chunk.js",
@@ -12,7 +12,7 @@
     "static/js/258.d411f128.chunk.js": "/static/js/258.d411f128.chunk.js",
     "static/js/699.296bc616.chunk.js": "/static/js/699.296bc616.chunk.js",
     "static/js/771.aca2d55b.chunk.js": "/static/js/771.aca2d55b.chunk.js",
-    "static/js/381.03328f92.chunk.js": "/static/js/381.03328f92.chunk.js",
+    "static/js/381.29a95a9f.chunk.js": "/static/js/381.29a95a9f.chunk.js",
     "static/js/402.7f9601cf.chunk.js": "/static/js/402.7f9601cf.chunk.js",
     "static/media/background.webp": "/static/media/background.0fe630389f9da00b4da2.webp",
     "static/media/TaiwanTech.webp": "/static/media/TaiwanTech.3239f7b9cd053ceaa9ae.webp",
@@ -23,7 +23,7 @@
     "static/media/Calendar.webp": "/static/media/Calendar.2f09a23cd515977f2be4.webp",
     "static/media/HanoiAms.webp": "/static/media/HanoiAms.ddc950d4a3afc5346ba9.webp",
     "static/media/MailSPA.webp": "/static/media/MailSPA.324994b1a4d69b103723.webp",
-    "static/media/uncommon_javascript_keynotes.md": "/static/media/uncommon_javascript_keynotes.5197416f72cbab6988d3.md",
+    "static/media/uncommon_javascript_keynotes.md": "/static/media/uncommon_javascript_keynotes.b9026eb7e57147e1c8f9.md",
     "static/media/Wiki.webp": "/static/media/Wiki.8bcf16832e49d293cb0f.webp",
     "static/media/Firebase-Light.svg": "/static/media/Firebase-Light.be39887274fc1d39cbc0.svg",
     "static/media/Flask-Dark.svg": "/static/media/Flask-Dark.3b200b23ebd34ac92edc.svg",
@@ -53,8 +53,8 @@
     "static/media/C.svg": "/static/media/C.c626ccb6c2805626752f.svg",
     "static/media/CSS.svg": "/static/media/CSS.5fcd7f5683afc0fc6d01.svg",
     "static/media/HTML.svg": "/static/media/HTML.ca0db580ffd74f086f2d.svg",
-    "main.fe476183.css.map": "/static/css/main.fe476183.css.map",
-    "main.d0babc5d.js.map": "/static/js/main.d0babc5d.js.map",
+    "main.e553efff.css.map": "/static/css/main.e553efff.css.map",
+    "main.1bde719c.js.map": "/static/js/main.1bde719c.js.map",
     "436.5ef6ea98.chunk.js.map": "/static/js/436.5ef6ea98.chunk.js.map",
     "631.825fb00c.chunk.css.map": "/static/css/631.825fb00c.chunk.css.map",
     "631.33fa3359.chunk.js.map": "/static/js/631.33fa3359.chunk.js.map",
@@ -65,7 +65,7 @@
     "402.7f9601cf.chunk.js.map": "/static/js/402.7f9601cf.chunk.js.map"
   },
   "entrypoints": [
-    "static/css/main.fe476183.css",
-    "static/js/main.d0babc5d.js"
+    "static/css/main.e553efff.css",
+    "static/js/main.1bde719c.js"
   ]
 }
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous"><link rel="apple-touch-icon" sizes="180x180" href="/logo/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/logo/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/logo/favicon-16x16.png"><link rel="manifest" href="/logo/site.webmanifest"><link rel="canonical" href="https://xuankhoatu.com/"><title>Tuslipid</title><meta name="title" content="Tuslipid"><meta name="description" content="Xuan Khoa Tu Nguyen's personal website"><meta name="author" content="Xuan Khoa Tu Nguyen"><meta itemprop="name" content="Tuslipid"><meta itemprop="description" content="Xuan Khoa Tu Nguyen's personal website"><meta itemprop="image" content="/menu-preview.jpg"/><meta property="og:type" content="website"/><meta property="og:title" content="Tuslipid"/><meta property="og:image" content="/menu-preview.jpg"/><meta property="og:description" content="Xuan Khoa Tu Nguyen's personal website"/><meta property="og:url" content="https://xuankhoatu.com/"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:url" content="https://xuankhoatu.com/"/><meta name="twitter:creator" content="Xuan Khoa Tu Nguyen"/><meta name="twitter:title" content="Tuslipid"/><meta name="twitter:description" content="Xuan Khoa Tu Nguyen's personal website"/><meta name="twitter:image" content="/menu-preview.jpg"/><script type="text/javascript">!function(n){if("/"===n.search[1]){var a=n.search.slice(1).split("&").map((function(n){return n.replace(/~and~/g,"&")})).join("?");window.history.replaceState(null,null,n.pathname.slice(0,-1)+a+n.hash)}}(window.location)</script><script defer="defer" src="/static/js/main.d0babc5d.js"></script><link href="/static/css/main.fe476183.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous"><link rel="apple-touch-icon" sizes="180x180" href="/logo/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/logo/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/logo/favicon-16x16.png"><link rel="manifest" href="/logo/site.webmanifest"><link rel="canonical" href="https://xuankhoatu.com/"><title>Tuslipid</title><meta name="title" content="Tuslipid"><meta name="description" content="Xuan Khoa Tu Nguyen's personal website"><meta name="author" content="Xuan Khoa Tu Nguyen"><meta itemprop="name" content="Tuslipid"><meta itemprop="description" content="Xuan Khoa Tu Nguyen's personal website"><meta itemprop="image" content="/menu-preview.jpg"/><meta property="og:type" content="website"/><meta property="og:title" content="Tuslipid"/><meta property="og:image" content="/menu-preview.jpg"/><meta property="og:description" content="Xuan Khoa Tu Nguyen's personal website"/><meta property="og:url" content="https://xuankhoatu.com/"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:url" content="https://xuankhoatu.com/"/><meta name="twitter:creator" content="Xuan Khoa Tu Nguyen"/><meta name="twitter:title" content="Tuslipid"/><meta name="twitter:description" content="Xuan Khoa Tu Nguyen's personal website"/><meta name="twitter:image" content="/menu-preview.jpg"/><script type="text/javascript">!function(n){if("/"===n.search[1]){var a=n.search.slice(1).split("&").map((function(n){return n.replace(/~and~/g,"&")})).join("?");window.history.replaceState(null,null,n.pathname.slice(0,-1)+a+n.hash)}}(window.location)</script><script defer="defer" src="/static/js/main.1bde719c.js"></script><link href="/static/css/main.e553efff.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
diff --git a/static/css/main.fe476183.css → static/css/main.e553efff.css b/static/css/main.fe476183.css → static/css/main.e553efff.css
diff --git a/static/css/main.fe476183.css.map → static/css/main.e553efff.css.map b/static/css/main.fe476183.css.map → static/css/main.e553efff.css.map
diff --git a/static/js/381.03328f92.chunk.js b/static/js/381.03328f92.chunk.js
diff --git a/static/js/381.29a95a9f.chunk.js b/static/js/381.29a95a9f.chunk.js
diff --git a/static/js/main.1bde719c.js b/static/js/main.1bde719c.js
diff --git a/static/js/main.d0babc5d.js.LICENSE.txt → static/js/main.1bde719c.js.LICENSE.txt b/static/js/main.d0babc5d.js.LICENSE.txt → static/js/main.1bde719c.js.LICENSE.txt
diff --git a/static/js/main.1bde719c.js.map b/static/js/main.1bde719c.js.map
diff --git a/static/js/main.d0babc5d.js b/static/js/main.d0babc5d.js
diff --git a/static/js/main.d0babc5d.js.map b/static/js/main.d0babc5d.js.map
diff --git a/...vascript_keynotes.5197416f72cbab6988d3.md → ...vascript_keynotes.b9026eb7e57147e1c8f9.md b/...vascript_keynotes.5197416f72cbab6988d3.md → ...vascript_keynotes.b9026eb7e57147e1c8f9.md
@@ -1,5 +1,52 @@
 # Introduction
-
+> JavaScript is super complicated, like a pain in your ass. Even when you are pretty familiar
+> with other programming languages' logic and concepts, you still find it challenging to cover significant
+> aspects of JS.
+
+Let me tell you one story... I once started learning JavaScript with a mindset that "just like other
+programming languages". Honestly, it does have enough general programming concepts that help me
+gain some first tastes quickly. It has variables, operators, functions, objects and classes, which
+can make a newbie think: "Uhm ~~ I can understand it easily!". But the thing doesn't go as you expected,
+not like variables in C++, variables in JavaScript have `var`, `const` and `let`; not like a single `def` in
+Python, JavaScript can initiate a function in two ways: function declaration and function expression.
+Thus, I didn't understand its fundamentals the first time studying, and regularly lost track
+of my thinking flow when looking up its advanced topic. Although I have done some projects using extended
+JavaScript and libraries/frameworks such as React, ExpressJS, etc..., I still had a vague picture about
+prototypes, asynchronous, error handling, and so forth.
+
+Things even got worse, I got an invitation to a whiteboard technical interview for a full-stack developer role, in which they
+asked me about JavaScript. Initially, I believe naively my fundamental ideas can handle their questions - "Well! 
+Just some JS questions like tutorials". However, they gave me a question about asynchronous which is 
+one of my most vulnerable parts. They asked me about a promise chain meanwhile I just had been familiar with a
+single promise. As a result, I solved it incompletely and failed the interview. 🥲
+```js
+// Refactor the function below to async/await structure
+function A() {
+    return new Promise((resolve, reject) => {
+        resolve(B);
+    })
+    .then(resB => {
+        return C(resB);
+    })
+    .catch(err => {
+        console.log(`First error: ${err}`);
+    });
+    .then(resC => {
+        return D(resC);
+    })
+    .then(resD => {
+        console.log(resD);
+    })
+    .catch(err => {
+        console.log(`Second error: ${err}`);
+    })
+}
+```
+After the interview, I realized my huge gap in knowledge about JavaScript, so I started reviewing
+it again. Below are my keynotes based on [javascript.info](https://javascript.info/). It does not 
+have very fundamental topics, instead, it contains concepts that I can easily mismatch when learning. So
+for looking up JavaScript basics, you can refer to [javascript.info tutorials](https://javascript.info/)
+directly or [MDN (Mozilla) JavaScript manual](https://developer.mozilla.org/en-US/docs/Web/JavaScript).
 
 <br><br>
 
@@ -861,8 +908,12 @@ console.log(rabbit.jumps); // true
 ```
 > The `__proto__` must be an object or null
 
+</details>
+
 
 ### F.prototype
+<details>
+
 Used when a object is created by a constructor function, like `new F()`
 ```js
 let animal = {
@@ -1731,3 +1782,62 @@ f().catch(alert); // TypeError: failed to fetch
 
 </details>
 <br><br>
+
+
+## Generators, advanced iteration
+Regulare functions return only one, single value (or nothing).
+
+Generators can return ("yield") multiple values, one after another,
+on-demand. They work great with [iterables](#iterables), allowing
+to create data streams with ease.
+
+### Generator functions
+To create a generator, we need a special syntax construct: `function*`,
+so-called "generator function".
+
+<details>
+
+```js
+function* generateSequence() {
+    yield 1;
+    yield 2;
+    return 3;
+}
+
+// "generator function" creates "generator object"
+let generator = generateSequence();
+alert(generator); // [object Generator]
+
+let one = generator.next();
+alert(JSON.stringify(one)); // {value: 1, done: false}
+
+let two = generator.next();
+alert(JSON.stringify(two)); // {value: 2, done: false}
+
+let three = generator.next();
+alert(JSON.stringify(three)); // {value: 3, done: true}
+```
+
+</details>
+
+#### Generators are iterable
+<details>
+
+```js
+// We can loop over their values using `for...of`
+for (let value of generator) {
+    alert(value); // 1, then 2 but doesn't show 3
+                  // for...of ignores the last value when done: true
+}
+
+// We can call all related functionality, e.g the spread syntax ...
+let sequence = [0, ...generateSequence()];
+alert(sequence) // 0, 1, 2, 3
+```
+
+</details>
+<br><br>
+
+> Updating...
+
+<br><br>