Sign in

JavaScript notes

此篇會不斷更新。如果有寫不清楚的地方歡迎留言,我會儘量修正!

Content:

+ Some info. of JS

+ Statements and declarations

+ Object oriented

+Callback

+ Asynchronous

+ High order functions & Arrays

+ Object.defineProperty()

+ The encapsulated function syntax

+ AJAX

+ 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

JS…


Graph’s algorithm and data structure

有新資訊會更新,若有錯誤請留點告知,感恩

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

Content:

+ 起源

+ 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)

+ AOV

+…


Algorithm nodes

不定期更新,若有錯誤請留言告知,感恩

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

Content:

+ 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?

https://yudhajitadhikary.medium.com/client-side-rendering-vs-server-side-rendering-in-react-js-next-js-b74b909c7c51

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 Firmbee.com 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

Advantage

  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

Disadvantage

  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…


Contents:

+ Introduction

+ Redux Basics

+ Redux Terminology

+ React Redux

+ Redux Saga

+ How does Saga handle errors for Promise

+ References

Introduction

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

Contents:

+ Components

+ JSX

+ Hooks

+ Higher-Order Components

+ React router

+ Redux

+ Other References

Components

The main building block for the applications is a Component.

Two main patterns for sharing code

  1. Higher-order components
  2. Render props

JSX

References

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

Hooks

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 使用

References

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


Linux notes

Content:

+ 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 <old_file.xxx> <new_file.xxx>
  • 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