JavaScript2024-09-08
理解 JS 原型，從 Prototype, Prototype Chain 到 Prototype Pollution
JS 原型看似離開發者很遠，實際上很近，因為開發者所使用的原生函式一直都跟 Prototype Chain 有關，此外，Prototype 被污染更是種安全性議題，如果開發上能對原型更理解，就更能避免寫出 anti pattern 的程式碼。
All Articles
Frontend Infra2023-10-29
淺談前端錯誤發生時的處理機制，從畫面層到監控層
在軟體服務中，如果在錯誤發生時，有良好的錯誤處理與監控的機制，能更快速地查找問題並修復完成，藉此讓使用者困擾的時間下降、體驗更佳。軟體中的錯誤處理範圍涵蓋很大，本文主要分享關於「前端錯誤發生時的處理流程」，包含錯誤畫面的顯示(UI)、錯誤資訊的記錄(Log)、錯誤監控的警告(Alert)。
Redux, React2023-08-31
理解 Redux 原始碼 (5)：從 HOC 到 Hooks，實作 useSelector 與 useDispatch
隨著 React-Redux 版本提升，官方更建議使用 Hooks 的方式，而非過去的 HOC 模式 e.g.`connect`。在本文中，將探討這樣的轉變有什麼好處，以及理解和實作 React-Redux 最重要的 useSelector 和 useDispatch Hooks。
Redux, React2023-07-30
理解 Redux 原始碼 (4)：透過 Provider 與 connect 理解 React-Redux 的組合
在前端世界中，不常見到單獨使用 Redux，而是 React 與 Redux 共同使用，aka React-Redux。因此在本文中，會探討 React-Redux 的核心部分的實踐，主要聚焦於 Provider 元件與 connect 方法。
Career2023-01-08
轉職兩年半後，紀錄一些高估與低估的想法
這篇文章寫於轉職成前端工程師兩年半後，紀錄些職涯相關思維上的轉變與脈絡，不限於轉職，而是紀錄許多我認為過去的我高估或低估的職涯想法。
Redux, JavaScript2022-01-20
理解 Redux 原始碼 (3)：來實作 combineReducers 吧
前兩篇 Redux 原始碼的文章，實作了 createStore 以及 applyMiddleware 等項目，在這篇文章中，將實作負責整合多個 reducers 的 combineReducers，藉此了解 Redux 是如何實踐這件事。
Redux, JavaScript2021-12-30
理解 Redux 原始碼 (2)：來實作 middlewares、applyMiddleware 以及 createStore enhancer 吧
接續上篇 Redux 系列文章，已實作完 createStore 中的 getState、dispatch、subscribe 後，這篇將進階到實作 Redux middleware 相關的功能，如 applyMiddleware 及 createStore 傳入的 enhancer 等。帶著好奇心，更深入探討 Redux 吧。
Redux, JavaScript2021-12-01
理解 Redux 原始碼 (1)：來實作 createStore 的 getState、dispatch、subscribe 吧
很好奇 Redux 是如何在程式中實踐狀態統一控管以及單向資料流的概念，於是決定閱讀 Redux 的原始碼，並解實作基礎的 createStore function，會聚焦在 getState、dispatch、subscribe API。
Career2021-11-23
第二份前端工程師求職條件的反思紀錄
這篇文章主要紀錄第二份前端工程師求職時所設定的求職條件，以及為什麼設定這些求職條件的詳細原因與反思，最後還有「關於加入新公司一週後再次轉職」的小故事。
JavaScript2021-07-25
透過程式範例，熟悉 JS 執行流程的關鍵：Event Loop
學習 JavaScript 執行流程時，會需要深入理解 Event Loop，其中包含 Call Stack、Callback Queue、Macrotasks、Microtasks 等概念，將在本文中整理詳述，期待閱讀完後，能更完整地理解 promise 與 setTimeout 等執行項目混在一起時，誰先執行的相關問題。
JavaScript2021-06-01
JS 中的淺拷貝 (Shallow copy) 與深拷貝 (Deep copy) 原理與實作
在 JS 中 Object 資料型別的複製變數時，是複製地址(address)而非原始值(value)，所以操作複製出的新變數時，容易更動到原始變數，反之亦然，因此容易造成非預期的 Bug 發生。為了解決這類問題，就必須了解 Object 資料型別的兩種拷貝方式：淺拷貝(Shallow copy)與深拷貝(Deep copy)。
JavaScript2021-05-20
JS 變數傳遞探討：pass by value 、 pass by reference 還是 pass by sharing？
在 JS 中，時常會聽到基本型別 (Primitive type) 的變數是 pass by value，物件型別 (Object) 的變數是 pass by reference 的說法，然而當深入查找後，又會發現 pass by sharing，更甚至看到 JS 都是 pass by value，究竟是怎麼回事呢？本文將由記憶體儲存變數的方式、複製變數的方式談起，一步步理解 JS 中的 pass by value、pass by reference 以及 pass by sharing。
React2021-05-01
深入理解 React.createElement 與 JSX
在寫 React 時，總是非常順手地使用 JSX 語法，然而用久了總會思考到：究竟 JSX 被編譯後結果為何？背後的 Raw API 為何？JSX 有什麼特色？這些疑問都會在文中探討！
JavaScript2020-11-29
parseInt / parseFloat / Number，將字串轉型為數字的方法比較
最近在工作時遇到 string 要用 parseInt 還是 Number 轉型的選擇，因此閱讀 ES6 規格與 MDN 的定義，來大致理解 parseInt / parseFloat / Number 三者差異。文中有解釋：為什麼 parseInt(010, 10) 的結果會是 8 的原因。
JavaScript2020-10-25
JS 宣告變數， var 與 let / const 差異
2019 開始學 JS 時，已經倡導使用 let / const，然而網路上資料常有 var，它們差異在哪？
Career2020-08-17
轉職前端工程師三個月後隨紀
這篇文章撰寫於我轉職成前端工程師後三個月左右，主要紀錄為什麼轉職成前端工程師，與轉職後是否有期待落差。
CSS2019-11-05
用 clearfix 解決 float 浮動問題的三種方式
這篇文章會說明 float 遇到的問題，以及三種利用「 clear:both 」處理的解決方式。