Articles
Semantics 翻成「語意」是好的中文翻譯嗎？
Runtime Semantics（執行期語意）…… 什麼鬼？
為什麼同一個值要存一份 state、又存一份 ref？latest ref pattern 與值的兩種時間語意
從 stale closure 出發拆解 React 的 latest ref pattern：為什麼同一個值需要 state、ref 兩份，寫入 ref 時機的完整比較，以及官方 useEffectEvent 的定位與限制
為什麼 TanStack Query 的 useQuery 沒有像 mutate 的呼叫型 lazy query API？我可以用 useMutation 讀資料嗎？
從前端和後端同步的心智模型，解釋為什麼用 TanStack Query 「讀資料」有時該用 useMutation
Secret Management：什麼東西算 secret？怎麼管理洩漏風險？
洩漏風險 = 副本數 × 權限範圍 × 壽命
JavaScript Runtime 是什麼？怎麼選擇 Node / Deno / Bun / Edge？
Runtime = JS engine + host API。附上用 AI agent 學習 JavaScript Runtime 的 prompts。
React + TypeScript + SSR：先手寫一次 raw SSR，再進 Next.js
想真的搞懂 React SSR，先用 Vite + react-dom/server 手工串一次 SSR，看清 renderToPipeableStream、hydrateRoot 這些 React 原生 API 在幹嘛，再進到 Next.js 看框架幫助我們什麼。
Web App Architecture：production web app 在雲端上有哪些部分
從 DNS、CDN、runtime、DB 到 queue 與 observability，拆解 production web app 的基本架構，以及 solo developer 該如何選擇 managed service。
How is a Variable Resolved to the Value in JavaScript?
Follow an IdentifierReference through ECMAScript environment records to understand how JavaScript resolves a variable name to its value.
How to Inspect the Internal Implementation of React by Using Browser DevTools
Note on how to set up your environment and inspect how React works internally by using browser DevTools.
Reading the ECMA-262: How Declarations in Block Context Work
To understand hoisting and variable scoping better, let's dive into the ECMAScript specification of block declarations.
Reading the ECMA-262: How Declarations in Function Context Work
To understand hoisting and variable scoping better, let's dive into the ECMAScript specification of function declarations.
Reading the ECMA-262: How Declarations at Global Level Work
To understand hoisting and variable scoping better, let's dive into the ECMAScript specification of global declarations.
How Declarations are Collected for Instantiation?
Learn how JavaScript engines collect declaration information for instantiation, including global, function, and block contexts.
Reading the ECMA-262 Specification: What are Operations and Semantics?
This article will introduce what is the ECMA-262, and some crucial concepts for understanding the specification.
Why 0.1 + 0.2 ≠ 0.3? Floating Numbers in JavaScript
Understand why 0.1 + 0.2 is not exactly 0.3 in JavaScript by tracing IEEE 754 binary floating-point representation, rounding, and precision.
幫一個複雜的 component 寫測試，該測到多細？
探討 component testing 的責任劃分和測試範圍
Reading Apollo Client Source Code: useQuery
從 Apollo Client 原始碼拆解 React useQuery 何時發出請求、如何訂閱查詢結果，以及資料更新為何觸發重新算繪。
Learn React Testing Library Basics: Arrange, Act, and Assert
介紹如何使用 RTL 測試 React 元件的基本概念和最佳作法
封裝多層的 styled-components 時，.attrs 執行順序的陷阱
透過閱讀 styled-components 的原始碼，瞭解 `.attrs()` 的特性與陷阱
What Will Happen if We Resolve a Promise Instance With Another Promise Instance?
Explore how JavaScript adopts the state of another Promise when resolve receives a Promise, including pending, fulfilled, and rejected cases.
導入 Google Tag Manager (GTM) 取代內嵌 GA
介紹 Google Tag Manager 的運作方式、環境與版本管理，並整理從內嵌 Google Analytics 遷移到 GTM 的實作步驟。
Develop npm packages locally with ease: explore symlinking, packaging, and third-party tools for smooth local testing.
Compare symlinks, npm package archives, and local publishing tools for developing an npm package in one repository and testing it in another.
「我們談談吧」為何變吵架收場？怎麼安全地說跟聽？-《關鍵對話》筆記（中）
整理《關鍵對話》中修復安全感的方法：辨認尊重與共同目的受損，並練習安全地表達、傾聽與重建對話。
不吵架就是成功的對話嗎？最後別忘了決議 -《關鍵對話》筆記（下）
整理《關鍵對話》的決議階段：如何選擇決策方式、分配執行責任，避免一場沒有吵架的討論最後仍然沒有結果。
「我們談談吧」為何變吵架收場？對話的基礎在安全感 -《關鍵對話》筆記（上）
整理《關鍵對話》的核心模型：對話為什麼會失控、安全感如何支撐共同意見庫，以及如何辨認沉默與攻擊。
《SCRUM: The Art of Doing Twice the Work in Half the Time》閱讀筆記
Scrum 發明者之一所撰寫的 Scrum 方法論入門書，介紹 Scrum 的核心理念、原則與理想作法
Notes on Developing Interactive Maps with JavaScript on the Web
JavaScript 互動地圖套件、地圖底圖、GeoJSON survey
How to Use D3 With React
整理在 React 專案使用 D3 的三種整合模式，比較由 D3 操作 DOM、操作虛擬 DOM，以及只使用 D3 計算模組的取捨。
Reading Redux Source Code：深入理解 Redux store 結構與更新機制
透過 Redux 原始碼拆解 store 的結構、dispatch action、reducer 更新與 listener 通知流程，理解嚴格單向資料流實際如何運作。