Sign in

JavaScript notes



+ Some info. of JS

+ Statements and declarations

+ Object oriented


+ Asynchronous

+ High order functions & Arrays

+ Object.defineProperty()

+ The encapsulated function syntax


+ FetchAPI

+ Template literals (Template strings)

+ Event loop

+ Generator

+ Symbol (ES2015)

+ Web worker

+ Import with {} and without {}

+ Package with “@” (2020.05.05)

+ Spread operator “…”

+ 記憶體管理

+ React

+ Bundle

+ Other references

Some info. of JS

  • JS is a single threaded programming language, single threaded Runtime
one thread == one call stack == one thing at a time


Graph’s algorithm and data structure


Graph 表示物件之間的關係,並且最重要的是 Edge


+ 起源

+ Application of Graphs

+ Graph composition

+ Path and Connectivity

+ Connected component

+ Trees in Graph

+ Graph 最重要的兩種表示法

+ Graph Traversal

+ Breadth-First Search (BFS)

+ Depth-First Search (DFS)

+ Connectivity in Directed Graphs

+ DAGs and Topological Ordering

— — — — — — — — — — — — — — — —

+ Greedy algorithms

+ Spanning Tree

+ The Shortest Path Problem

— — — — — — — — — — — — — — — —

+ TSP (Travel Salesman Problem)



Algorithm nodes


What’s a good Algorithm? -> run quickly, small memory


+ Analyze an “efficient” algorithm

+ Notation O, 𝛺, 𝛩 (Theta)

+ 常見演算法

+ Graph

+ Divide and conquer

+ Dynamic programming

+ References

Analyze an “efficient” algorithm

  • Good scale-ability, Platform-independent (與執行的機器無關), Instance-Independent (與 input 無關)
  • We focus on the worse-case
  • E.g. better than brute-force
  • Or if polynomial running time, it is efficient

Method: check primitive computational step 確認基本運算步驟

Polynomial running time: with constants c>0, d>0 and input N, the running time is bounded by cN^d

Notation O, 𝛺, 𝛩 (Theta)

找最小的 upper bound 和最大的 lower bound 才有意義

Big-O (upper bound)

E.g. T(n) = 3n+2, F(n) = n

If T(n) =…

What is Client-Side Rendering?

What is Server-Side Rendering?

Great for static site

SSR is the process of taking a client-side JS framework website and rendering to static HTML and CSS on the server.

Git notes

Photo by Yancy Min on Unsplash

git merge

Fast-forward (--ff)

  • This type of merge doesn’t create a new commit

Flow of the program determined by events

Photo by on Unsplash

Pattern 1: Event Notification

E.g. Customer management system emits an event object to a well-known place (e.g. event queue) and insurance quoting system can listen for that event.

E.g. GUI elements


  1. It allows many other systems to hook up to the event stream very easily and those systems do not need to know or care about the system emitting the event.
  2. Decouple receiver from sender


  1. You don’t know what behaviours you will trigger

Pattern 2: Event-carried State Transfer

Pattern 1 的進化版

A less common pattern

E.g. Customer management system emits an event object with all data which downstream systems need, and downstream systems copy a part of data they…


+ Introduction

+ Redux Basics

+ Redux Terminology

+ React Redux

+ Redux Saga

+ How does Saga handle errors for Promise

+ References


What is Redux?

Redux is a pattern and library for managing and updating application state, using events called action.

  • Collect all states across the entire application in one place
  • Ensure that the state can only be updated predictably

When Should I Use Redux?

  • You have large amounts of application state that are needed in many places in the app
  • The app state is updated frequently over time
  • The logic to update that state may be complex
  • The app has a medium or large-sized…

React notes


+ Components


+ Hooks

+ Higher-Order Components

+ React router

+ Redux

+ Other References


The main building block for the applications is a Component.

Two main patterns for sharing code

  1. Higher-order components
  2. Render props



  1. Why does jsx require three dots in this code? (2017)


Hooks are functions provided by react that lets you “hook” into React features from your “function components”

useState Hook

  • useState 讓我們可以在 function component 保留 local state
  • 每一次更新 state , React 就會 re-render function component

useEffect Hook

  • Runs a function every render of the components
  • The dependency array (a second argument of useEffect) => trigger for useEffect Hook
useEffect(() => {}…

What is JWT?

  • JSON Web Token 的縮寫
  • JWT is just for Authorization not for Authentication

先來區分 Authorization 和 Authentication

Authorization: 在登錄期間,確保為同一使用者 (e.g. session ID in cookie)

Authentication: 認證你的帳密是正確的 (登錄當下)

  • JWT 是用來取代 session ID 的位置的

JWT 和 Session ID 最主要的區別是 JWT 不會被儲存在 Server, Server 只負責驗證傳來的 JWT

JWT 優點

  • 因為 Server 不必儲存 JWT 所以一組 client 的 JWT 可以在多個不同的 Server 使用


[1] Web Dev Simplified (2019). What Is JWT and Why Should You Use JWT

Linux notes


+ Terminal commands

+ vim

+ Directories

+ 通用的 Linux 系統

+ Android 手機 (2020年時)

+ TEE (Trusted execution environment)

+ 其他

+ 單字表

+ Other references

Terminal commands and tricks

  • Rename file/directory
$ mv <old_directory> <new_directory>
$ mv <> <>
  • grep


grep -w "apple" names.txt // -w 更精準搜索
grep -wi "apple" names.txt // -i 忽略大小寫
grep -win "apple" …

Eddie Cheng

One way that cannot return twice. A lost child looks for a bright place.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store