Update

Author: viet34tqc

SEO-for-developers.md

@@ -2,6 +2,7 @@
 
 ## Reference
 
+<https://codefrontend.com/introduction-to-seo-for-react-developers/>
 <https://www.youtube.com/watch?v=JSm4aQl4w_U>
 
 ## What is SEO

css-tips.md

@@ -100,8 +100,9 @@ button {
 
 ## Background image opacity
 
-Apply opacity to absolute psuedo element, parent element use isolation: isolate
+Apply opacity to absolute psuedo element, parent element use `isolation: isolate`, that will create a stacking context and prevent absolute children with negatives `z-index` to break out of parents
 <https://www.youtube.com/watch?v=lRPguPbovro>
+<https://www.youtube.com/watch?v=o1HzOJfgugE>
 
 ## Replace `position: absolute` with `display: grid`
 

dependancy-injection.md

@@ -1,7 +1,10 @@
 # Dependancy injection
 
-Dependancy injection is a popular pattern that solve the big problem: hardcoded dependancy. So what's hardcoded dependancy?
+<https://blog.codeminer42.com/di-with-some-context/>
 
+Dependancy injection is a popular pattern used to remove hardcoded dependancy between units in an application. The aim of this technique is to make our code more flexible and scalable
+
+So what's hardcoded dependancy?
 Hardcode dependancy means class A is tightly coupled to class B, class B is called inside class A. There are some issue with this:
 
 - It's harder for testing: Let's say we want to test class A. And because class A is using class B, it's really hard to mock class B

interview.md

@@ -70,6 +70,10 @@ If you mutate the data directly, the components might not re-render that could l
 
 With `useEffect`, we can control how the side effects run in the component. Normally, the side effects make the state change. So, if you put them outside the `useEffec` hook, it will lead to infinite re-render of the component.
 
+## Why we the callback in `useEffect` mustn't be async function
+
+Because async function return promise. `useEffect` hook isn't expecting us to return a promise. It expects us to return either nothing (like we are above), or a cleanup function.
+
 ## When react does not re-render
 
 <https://www.zhenghao.io/posts/react-rerender>
@@ -296,6 +300,7 @@ The difference happens when the `success` callback returns a **rejected promise*
 
 ## Rule for `this`
 
+<https://javascript.info/arrow-functions>
 <https://blog.tusharcodes.tech/5-rules-to-master-this-in-javascript>
 <https://i.imgur.com/tUjhc3r.png>
 
@@ -375,7 +380,13 @@ Các vấn đế của JWT
 
 - User A authen thành công ➜ server response token ➜ User A bị Man-in-the-middle attack, do User A bất cẩn làm token rơi vào tay hacker ➜ hacker chiếm quyền truy cập account của user A mà server không hề hay biết
 - User A đang truy cập các private API, đột nhiên token expired, màn hình đột ngột bị rediect sang trang login vì server response 403
-- server chưa cài đặt cơ chế hủy token, phía database thì account user A đã bị ban, nhưng token vẫn đang lưu rải rác tại các client (desktop app, mobile app, web, server khác, ...), client vẫn cứ gửi token, server encode payload token thấy vẫn còn hạn sử dụng, phần mã hash chữ ký vẫn hợp lệ ➜ user vẫn author thành công
+- server chưa cài đặt cơ chế hủy token, phía database thì account user A đã bị ban, nhưng token vẫn đang lưu rải rác tại các client (desktop app, mobile app, web, server khác, ...), client vẫn cứ gửi token, server decode payload token thấy vẫn còn hạn sử dụng, phần mã hash chữ ký vẫn hợp lệ ➜ user vẫn author thành công
+
+Cách logout jwt
+
+- Khi gọi API logout thì lưu token đã logout vào blacklist.
+- Trong các API được authen, khi có request đến, check token có nằm trong blacklist hay không, nếu có thì coi như unauthorize.
+- Bài toán đặt ra là lưu blacklist ở đâu để việc đọc token đảm bảo được về mặt hiệu suất khi mà tần số gọi API dày đặc như vậy? Câu trả lời là lưu trong redis. Mặc khác vì jwt token nó có thời hạn sống ngắn, nên hoàn toàn có thể clean up dữ liệu, xoá các token đã thực sự hết hạn trong redis.
 
 ## Debounce và throttle
 
@@ -583,7 +594,7 @@ const copied = new Map(myMap);
 
 ## Else if using operation tenerry
 
-const a = b ? c : d ? e : f
+`const a = b ? c : d ? e : f`
 
 ## OOP
 
@@ -593,6 +604,7 @@ const a = b ? c : d ? e : f
 
 Là cơ chế của server cho phép các origin khác (origin = scheme(protocol) + domain + port) ngoài chính nó gửi request.
 Cùng origin: cùng scheme, domain và port
+
 - Cùng scheme và cùng domain
 
 http://example.com/app1/index.html
@@ -639,6 +651,7 @@ https://example.com/app2
 ## Closure
 
 <https://dmitripavlutin.com/simple-explanation-of-javascript-closures/>
+
 - Lexical scope của 1 hàm:
   - Là tất cả các outer scope cộng với inner scope của hàm đó.
   - Outer scope là môi trường bên ngoài nơi định nghĩa của 1 hàm.
@@ -676,14 +689,18 @@ Primitive type là immutable. Ta chỉ có thể gán lại biến đấy sang 1
 Reference type là mutable. Nếu ta copy biến đấy sang 1 biến khác, 2 biến đấy sẽ trỏ vào cùng 1 box chứ 2 biến không trỏ lẫn sang nhau. Và nếu 1 trong 2 biến mutate (ví dụ như là thay đổi giá trị của property) thì biến còn lại cũng thay đổi theo (vì vẫn chung 1 box)
 
 Notes:
+
 - Các giá trị dạng reference là riêng biệt:
+
 Mỗi khi ta khai báo 1 hàm hoặc 1 object, `() => {}` hoặc `{}` thì 1 box mới được tạo ra
 ```js
 const a = () => {}
 const b = () => {}
 console.log( a === b ) // return false.
 ```
+
 - Truyền tham số dạng reference có thể xảy ra Mutation không mong muốn
+
 ```javascript
 function minimum(array) {
   array.sort();
@@ -746,6 +763,7 @@ Có 3 loại scope: `global scope`, `local scope` (function) và `block scope` (
 ## for-in and for-of
 
 `for-in`:
+
 - iterate over enumerable properties of an object. enumerable properties are the "key" of the property the Object or "index" of the Array.
 If the propery is defined with the `enumerable` false, it is not interated
 ```javascript
@@ -760,6 +778,7 @@ Object.defineProperty(obj, 'flameWarTopic', {
 - cannot be used with Object like Map() or Set();
 
 `for-of`:
+
 - interate over **value** of iterable objects.
 - can be used with built-in `String`, `Array`, array-like objects (e.g., arguments or `NodeList`), `TypedArray`, `Map`, `Set`
 - cannot be used with simple Object

nginx-nodejs.md

@@ -150,4 +150,8 @@ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/source
 sudo apt-get update
 sudo apt-get install yarn -y
 yarn install
-```
+```
+
+## Setup SSL using certbot
+
+Go to https://certbot.eff.org/ and do as the instructions. When install Certbot, chose `sudo certbot --nginx`, it will automatically set up the SSL

promise.md

@@ -80,19 +80,23 @@ Both take an array of promises
 ## Async
 
 **Syntax**:
+
 ```javascript
 async function() {
 };
 ```
+
 Put in front of function, then **returns a promise**. This promise will be resolved with the **value** returned by the async function or rejected with an error that is thrown inside async function
 
 If the **value** is not a promise, it will be wrapped in promise.
+
 ```javascript
 async function foo() {
    return 1
 }
 ```
 ...is similar to:
+
 ```javascript
 function foo() {
    return Promise.resolve(1)
@@ -117,17 +121,19 @@ async function run() {
 }
 ```
 
-
 ## Await
 
 Can only be used inside `async` function.
 **Syntax**:
+
 ```javascript
 const value = await expression;
 ```
+
 `expression` is a `Promise` or any value. If a value, it convert to `Promise.resolve(expression)`, which is a `Promise`;
 
 `Await` pause the `async` function ultil a `Promise` is fulfilled or rejected.
+
 - If rejected, `await` throw an error.
 - If fulfilled, it resumes the `async` function execution and **return the value of the fulfilled Promise**
 
@@ -136,3 +142,62 @@ You can catch the error right after await, without using `try...catch`
 const value = await expression.catch((e) => {})
 ```
 
+## Handle concurrent promises
+
+[https://www.builder.io/blog/promises](https://www.builder.io/blog/promises)
+
+Use `Promise.allSettled()`
+
+```jsx
+// First create a utility funtion
+function handleResults(results) {
+  const errors = results
+    .filter(result => result.status === 'rejected')
+    .map(result => result.reason)
+
+  if (errors.length) {
+    // Aggregate all errors into one
+    throw new AggregateError(errors)
+  }
+
+  return results.map(result => result.value)
+}
+
+// Usage
+
+async function getPageData() {
+  const results = await Promise.allSettled([
+    fetchUser(), fetchProduct()
+  ])
+
+  try {
+    const [user, product] = handleResults(results)
+  } catch (err) {
+    for (const error of err.errors) {
+      handle(error)
+    }
+  }
+}
+```
+
+Or we await separately after instantiation
+
+```js
+async function getPageData() {
+  // We fire all the promises first, so they can run both in the same time, instead of waiting for each other
+  const userPromise = fetchUser().catch(onReject)
+  const productPromise = fetchProduct().catch(onReject)
+
+  // Try/catch each
+  try {
+    const user = await userPromise
+  } catch (err) {
+    handle(err)
+  }
+  try {
+    const product = await productPromise
+  } catch (err) {
+    handle(err)
+  }
+}
+```

react-query.md

@@ -295,6 +295,27 @@ function Todo({ todoId }) {
 }
 ```
 
+## Handle errors
+
+While most utilities like `axios` automatically throw errors for unsuccessful HTTP calls, some utilities like fetch do not throw errors by default. If that's the case, you'll need to throw them on your own. Here is a simple way to do that with the popular fetch API
+
+```js
+// Using axios
+useQuery(['todos', todoId], async () => {
+   const response = await axios.get('/todos/' + todoId)
+   return response.data
+})
+
+// Using fetch
+useQuery(['todos', todoId], async () => {
+   const response = await fetch('/todos/' + todoId)
+   if (!response.ok) {
+     throw new Error('Network response was not ok')
+   }
+   return response.json()
+})
+```
+
 
 ## React Query and React Router