System Design Interview 不是比誰口才比較好

之前在台灣面試時都沒遇過 system design 面試，好像也較少聽聞有 system design 的關卡；

在英國時也不是所有面試時都會考 system design，通常是用來判斷該工程師是不是 senior 時會才比較會遇到。身為一個 senior engineer 除了被要求技術能力外，對於系統的架構設計和溝通能力也都會被期望達到一定的程度，同時也會預期多少具有領導能力。

而面試範圍可以小到設計一個 rate limiter，也可以大到設計一個 Netflix，其中要考慮的深度和廣度也就跟著不同，而且也有可能因為公司需求、軟硬體限制等而有所改變，沒有所謂最佳的解答。

在網路上看文章、影片 mock system design interview 時發現大家面試時，同樣一個問題，面試官的著眼點、流程的進行架構都不太一樣，那究竟什麼樣的內容是 system design inteview 時必須要談到的呢?

這裡用 designing a URL shortener 當範例，盡可能將流程結構化，並列出在設計時會考量的點，希望在面試時自己心中能有個大綱，好跑過一輪必考量的點；不過 system design 可以包含的範圍實在太廣了，可能會有些疏漏，還請見諒。

簡單輕鬆十分鐘學會 Greedy Algorithm (貪婪演算法) 刷 LeetCode

一、Greedy Algorithm

1.1 基本觀念介紹

Greedy Algorithm (貪婪演算法) 是指在對問題求解時，總是做出在當前看起來最好的選擇，所以此種演算法在解問題時，不是所有題型都能得到 global optimization (全域最佳解)，但對於相當多問題能產生整體最佳解或者是近似整體最佳解。

總之貪婪演算法的精神就是 : 短視近利、今朝有酒今朝醉，每一步面臨選擇時，都做眼前最有利的選擇，不考慮對將來是否有不良的影響，與 dynamic programming 不同，不會保留計算結果。

假設現在有個金額 M，有 1、5、10、20、50 元這些幣值種類，要盡可能用最少的錢幣湊到金額 M。根據貪婪演算法，能用 50 的就盡量用 50 的，否則盡量用 20 的...以此類推；在這種策略下，M 若是 15 則等於 10 * 1 + 5 * 1，共使用了 2 種錢幣。

但是如果我們換一組錢幣的種類如 1、5、11，貪婪演算法可能就不是最佳解。

或是我們有一個最多能背重量為 W 的背包，現在有 N 件物品，每件物品只能用一次且價值不相等，求解將哪些物品裝入背包裡物品價值總和最大，這時候因為要同時考慮重量和價值，也沒辦法用貪婪就取得最佳解。

這在下一篇 Dynamic Programming (動態規劃) 會講解到。

簡單輕鬆十分鐘學會 Graph (圖) 刷 LeetCode

一、Graph

1.1 基本觀念介紹

此處談及的 Graph 並不是指圖片或者圖形，而是由數個 vertex (點) 及數條 edgs (邊) 所構成；點與點之間以邊相連，表示這兩點有關聯性。

而一個頂點的 degree (度) 指與該頂點相連的邊的條數。

兩點之間也可以有很多條邊，代表這兩點有很多項關聯；一個點有連到自己的邊，稱之為self-loop (自環)，表示自己和自己有關聯。

1.1.1 Isomorphism / Isomorphic

(https://web.ntnu.edu.tw/~algo/Graph.html)

如果兩張圖的連接方式一模一樣時，則稱作同構圖。圖上的點可以任意移動位置，不論點的位置如何，都不會改變點與點之間的關聯。

簡單輕鬆十分鐘學會 Heap (堆疊) 刷 LeetCode

一、Heap

1.1 基本觀念介紹

Heap 有兩種分為資料結構和記憶體，都是取累積傾向的意思，而這邊要講的是資料結構的 Heap。

(https://www.geeksforgeeks.org/binary-heap/)

Heap 常見的實作為 Binary Heap，它的樹為 complete binary tree (完全二元樹) 如上圖。一棵依序節點可以從上到下、從左到右的表示為 1, 3, 6, 5, 9, 8。如果刪掉 node 9 那麼這便不是棵完全二元樹；如果拿掉 node 8 仍然是棵完全二元樹，因為整棵樹仍然可以從上到下、從左到右的表示成 1, 3, 6, 5, 9。

• 新增節點時優先從左到右填滿階層後才往下一層
• 概念基於 binary Tree，每個 node 下面最多只會有兩個 child，也有可能是一個或沒有
• 常使用 array 來實作，由左至右、由上到下表示出一個完全二元樹
• 若目前的 node 的 index 是 i，left child node 的 index 就是 i * 2 + 1，right child node 的 index 是 i * 2 + 2

簡單輕鬆十分鐘學會 Tree & Binary tree & Binary search tree 刷 LeetCode

一秒理解資料結構裡的樹

一、Tree & Binary tree & Binary search tree

1.1 基本觀念介紹

1.1.1 Tree

是一種模擬現實生活中樹幹和樹枝的資料結構，分為 :

Root (根節點)：沒有父節點的節點，所以每棵樹只有一個 root，如 A；在根節點之下是樹的樹枝，擁有 0 到 n 個子節點。

Node (節點)：一個個連結點，如 A、B、C ... M 都是結點。

Parent (父節點) : 節點 B 是 I 和 J 的父節點。

Child (子節點) : 節點 I 和 J 是 B 的子節點。

Siblings (兄弟節點) : 擁有共同父節點，如 I 和 J、K 和 L 和 M。

Leaf (葉節點)：節點沒有子節點的節點稱為葉節點，如 I、J、K、L、M、F、G、H。

Ancenstors (祖先節點) : 指某節點到根節點之間所經過的所有節點，都是此節點的祖先節點。

Level (階層) : 如果樹根是階層 1，其子節點即是階層 2，依序可以計算出樹的階層數；如節點A 階層是1，B、C 到 H 是階層 2，I、 J 到 M 是階層 3。

Height (樹高) : 又稱為 Depth (樹深)，指樹的最大階層數，如此圖的樹高是 3。

Dregree (分支度)：指每個節點擁有的子節點數，如節點 B 的分支度是 2，節點 E 的分支度是 3。

--
最廣義的樹對於 node 之 child 數目沒有限制，因此每個 node 可以有多個 child。

Linked list 也可以視作是樹只是每個 node 都只有一個 child。

Coding Interview 就是刷好刷滿刷爆 LeetCode 就會上?

我家可愛貓貓鎮樓，最後她一個都沒選；

畢竟她靠可愛就可以過活了，還是由奴才來好好工作賺罐罐錢吧。

之前在台灣面試時一直都沒怎麼遇過需要 coding interview，

而且我也一直對於在別人面前寫程式感到害羞，

還以為自己可以就這樣逃過 coding interview 的關卡。

殊不知在英國面試時就常常遇到 coding interview，雖然有時候會是 online test, assignment，

但果要進比較大的公司，coding interview 幾乎是必備。

還記得我第一次  coding interview 時，

面試開始時我想說我會寫我會寫欸然後我就直接寫完了，

還以為自己表現不錯題目有解出來 : )

結果得到 feedback 是 "感覺面試者沒有想跟面試官溝通"。

起先覺得困惑，後來才知道原來 coding interview 不是只是解題就好，

部分也是因為我自己這部份沒做好資料查詢。

所以痛定思定後，上網詳盡搜尋了相關資訊包括如何準備、面試時需要從哪些方面下手，並運用範例寫下 coding interview 過程，同時也請 MANGA 經過面試官訓練的朋友幫忙檢查內容。

我試圖把 coding interview 的流程寫成可以以較有結構式的方式執行；

這篇會分為平時練習時、面試前和面試過程中去解釋。

簡單輕鬆十分鐘學會 Stack & Queue (堆疊 & 佇列) 刷 LeetCode

一、Stack & Queue

1.1 基本觀念介紹

這裡講的 stack 和 queue，就是和 event loop 裡會用到的 call stack 和 callback queue 的基礎資料結構。

如果不是很清楚 event loop 是什麼，可以看這篇。

Stack 和 Queue 常常用 array 或 linked list，但沒有限定，只要能實作出該資料結構即可。

1.1.1 Stack

Last in, First out (LIFO)

最後一個進去，第一個出來。

比如書籍堆疊起來，最後一本堆上去的會第一本先被拿走；

最下面 bottom 是第一個被放入的 frame，然後 frame 被一個一個堆起來 (push)，

如果要把 frame 抽走，只能從最上方開始拿 (pop)。

(https://open4tech.com/stacks-vs-queues/)

簡單輕鬆十分鐘學會 Recursion (遞迴) 刷 LeetCode

一、Recursion

1.1 基本觀念介紹

遞迴就是在函式之中呼叫函式自己本身，本質上是將複雜的問題，拆分成具有相同性質的子問題，進而解決問題的方法。

一個基本的遞迴函式一定要有：

• 終止條件 (基本條件)

• 遞迴條件 (呼叫自己的條件)

如果沒有終止條件，就會無限循環直到當掉。

範例 1 : 假設輸入一個正整數 n，求 1 + 2 + … + n 的總和

我們可以很直覺的使用迭代 (迴圈) 的方式，將所有數字累加在一起。

但因為這個問題能拆成有規律的數個小問題，

如輸入正整數 2 → 1 + 2 = 3

輸入正整數 3 → 1 + 2 + 3 = 6

…

所以這時候就可以使用遞迴來計算。

Time complexity 是 O(n)，Space complexity 是 O(1)。

簡單輕鬆十分鐘 Linked List (鍊表) 刷 LeetCode

一、Linked List

1.1 基本觀念介紹

Linked list 是一種常見的資料結構，會包含 head 和 tail 的資訊，以 null 來代表 Linked list 的終點，使用 node 來記錄、表示、儲存資料。

1.1.1 Singly linked list

(https://www.geeksforgeeks.org/types-of-linked-list/)

單向鏈結串列 (單鏈結串列、線性鏈結串列、普通鏈結串列) 是最基本的鏈結串列，其特點是鏈結串列的鏈結方向是單向的，對鏈結串列的存取要通過從頭部開始，依序往下讀取。

每個 node 則會包含 value 和 next (Pointer，指向下一個 node 的位置) 的資訊。

簡單輕鬆十分鐘學會 Hash Map (雜湊表) 刷 LeetCode

先來個地獄梗 emtional damage!

一、Hash Map

1.1 基本觀念介紹

• Hash map 是儲存 (key, value) 這種 mapping 關係的一種資料結構 (當數據儲存在記憶體中時，決定數據的順序和位置的稱之為資料結構)
• 各語言 / library 基本上有其 hash function，如有需要也可以自行建置
• 語言不同名稱也會不同，但基本上 Hash map == Hash table == Hash object == Hash dictionary

(https://vhanda.in/blog/2012/07/shared-memory-hash-table/)

舉例來說，如果我們有 n 個數字要儲存時，通常會用 array 來存。 存好後如果我們拿到另一個數字 37，要判斷這個數字有沒有在 array 裡面，那我們就得跟 array 裡的元素一個個比較，這時 time complexcity 就會是 O(n)；下次再換查另一個數字時， time complexcity 又就會是 O(n)。 但如果已經先建立好 hash table，之後如果要查數字 37 時，建立 hash map 時雖然 time complexcity 會是 O(n)，但查詢的 time complexcity 就只會是 O(1)。 不過 O(1) 還是理論值，insert、search、lookup、delete 都有可能造成 time complexcity 是 O(n) (請看 example 3) 。

簡單輕鬆十分鐘看懂 Time complexity & Space complexity 分析刷 LeetCode

一、前導知識

1.1 演算法評估標準

當同一個問題可以用不同演算法去解決時，需要一個評量的標準去評估哪個演算法比較好，通常會用兩個指標去評量演算法的好壞 :

• Time complexity (時間複雜度)
• Space complexity (空間複雜度)

當然理論上所花費的時間和占用的記憶體是越小越好。

1.2 Time complexity

Time complexity 是電腦執行演算法所需要耗費的時間成本，通常會用 O (Big O notation) 去計算。

Big O notation 是解決一個規模為 n 的問題所花費的時間，或者所需步驟之數目；而演算法多快通常不是以秒而是步驟次數來衡量，因為每個人電腦效能會影響執行速度，若用秒數來衡量會顯得不夠客觀。

推薦前端工程師 - 胡立的部落格，不只是只有分享技術

胡立大大雖然是前端工程師，
但其實他的部落格不限於對程式有興趣的人才能看，

裡面包括的範圍很廣，包括技術、面試相關、導師計劃紀錄等。

他的文章分散在很多地方，

通常我技術我會看 GitHub 平台的，另一個是 Medium，兩邊平台分享的文章性質不太一樣。

但 Medium 的文章分類很難用，常常要一直滾才看得到之前的文章，或是可以看這邊 胡立大大已經整理過的文章列表。

Chrome SameSite Cookie Policy Causes Problem :: Logout When Direct To External Website Then Back Own Site

Recently I am working on a function, when user submits the form then it will direct to the external website, and we will give a return URL via the form, let the external website can lead the users back to our website after finish their manipulation.


Then I encountered a problem, the users will be automatically logged out when the external websites redirect to our website.


After debugging, I discovered that the session ID is different from the origin session ID when users direct back to our website, and it only occurs in Chrome, Safari, IE, Edge, firefox works fine.


Why? It turns out that Chrome enforces set SameSite = LAX cookies, so we need to set the SameSite = 'None', that Secure will be available on a third-party website.


So, Let's start to edit the SamSite attribute,
First, you may want to know "Is that the logout reason really was caused by SameSite ?"
That's fine, we can test it w/o modifying code.
Enter chrome://flags/ in the URL bar,
search "Samesite" then turn it as disabled,
press the button "Relaunch" to relaunch the setting on the bottom right corner.





To test the users will log out or not.
If it works, then the problem definitely is SameSite.



However, that's impossible to ask every user to change the setting,
that's all right we have a couple of methods to solve the problem,



1. Set the header

If your PHP version < 7.3.0

header('Set-Cookie: cross-site-cookie=name; SameSite=None; Secure');

or

header('Set-Cookie: cookie2=name; SameSite=None; Secure', false);



If your PHP version >= 7.3.0

setcookie('cookie2', 'name', ['samesite' => 'None', 'secure' => true]);

or

setcookie('cross-site-cookie', 'name', ['samesite' => 'None', 'secure' => true]);

Use the name of 'sessionID' to replace 'name' 

If you setting success you will see the context which was wrapped by red line.

2. Set the .htaccess

Header always edit Set-Cookie ^(.*)$ "$1;HttpOnly;Secure;SameSite=None"



3. Set the httpd.conf


Header always edit Set-Cookie ^(.*)$ "$1;HttpOnly;Secure;SameSite=None"

Remember to reload the apache after setting up

What Is The Difference Between Session, Cookie, SessionStorage and LocalStorage?

Type	session	cookie	sessionStorage	localStorage
Storage location	Server-side	Client-side	Client-side	Client-side
Maximum data size	1024KB	4K for one cookie, max 20 cookies for a website	5M	5M
Expired Time	If the user doesn’t active for a long time which over expires time, the server-side will delete the session to save the space	* Users can set the expiration time for each cookie. * It will expire after closing the browser if it set on client-side	The data clear automatically when the browser is closed	The data WILL NOT be deleted when the browser is closed until the user clear through JavaScript, browser cache / locally stored data
Scope	No	Changes made are saved and available for all same-origin page	Changes made are saved and available for the current page	Changes made are saved and available for all same-origin page
Security	High	Low	Low	Low
Usability	Easy to use	The API is difficult to use	Has method setItem, getItem, removeItem, clear that easy to use
HTTP Request		The data is sent back to the server for every HTTP request which causes performance problems	The data is NOT sent back to the server for every HTTP request
Application	Login	Login, shopping cart, game scores	Form	Shopping cart

類型	session	cookie	sessionStorage	localStorage
存儲	服務端	瀏覽器端	瀏覽器端	瀏覽器端
存儲容量	默認大小一般是 1024k	單個 cookie 保存資料不能超過4k，且很多瀏覽器限制一個網站最多保存20個 cookie	5M	5M
失效時間	設置一個失效時間，當距離客戶端上一次使用 session 的時間超過這個失效時間時，服務器就可以認為客戶端已經停止了活動，才會把 session 刪除以節省存儲空間	* 一般由伺服器生成，可設置失效時間。 * 如果在瀏覽器端生成Cookie，默認是關閉瀏覽器後失效	當前瀏覽器關閉前有效	始終有效，即使視窗或瀏覽器關閉也一直有效，除非用戶手動刪除，其才會失效
作用域	無	在所有同源視窗是共用的	不在不同的瀏覽器窗口中共用	在所有同源視窗是共用的
安全性	較高	較低	較低	較低
易用性	有很大的隨意性，可隨時呼叫，不需要開發者做精確地處理	原生 API 不如 storage 友好，需要自己封裝函數	Web Storage 擁有 setItem, getItem, removeItem, clear等方法
與伺服器端通信		每次都會攜帶在HTTP頭中，如果使用cookie保存過多資料會帶來性能問題	僅在用戶端（即瀏覽器）中保存，不參與和伺服器的通信
應用場景	將某些資料放入session中，供同一使用者的不同頁面使用	帳號登入、購物車、遊戲分數	表單頁面	購物車