Min Content / Tech is the technical publication of Min Content, an independent studio by CJ (Steven Yu), covering frontend engineering, web architecture, security, and AI-assisted development.https://tech.mincontent.comenhttps://tech.mincontent.com/articles/terminology/semantics-lost-in-translationhttps://tech.mincontent.com/articles/terminology/semantics-lost-in-translation「執行期語意：求值」——每個字都認識，合起來不知道在說什麼。問題不在英文：規格書裡的 semantics 指「它實際上會做什麼」，中文「語意」卻偏向說話者想表達的意思。這篇回溯這個詞從語言學、邏輯學到 ALGOL 60 的旅程，說明「語意」為什麼接不住，以及讀 spec、翻成中文時怎麼辦。Fri, 17 Jul 2026 00:00:00 GMTECMA-262semanticsterminologytranslationtechnical-writinghttps://tech.mincontent.com/articles/react/latest-ref-patternhttps://tech.mincontent.com/articles/react/latest-ref-pattern從 stale closure 出發拆解 React 的 latest ref pattern：為什麼同一個值需要 state、ref 兩份，鏡射該寫在 render 期間還是 effect 裡（useInsertionEffect / useLayoutEffect / useEffect 的完整比較），以及官方 useEffectEvent 覆蓋了哪些情境、哪些仍要手寫。Thu, 16 Jul 2026 00:00:00 GMTReacthooksuseRefuseEffectEventclosurehttps://tech.mincontent.com/articles/react/usequery-vs-usemutationhttps://tech.mincontent.com/articles/react/usequery-vs-usemutation「讀資料用 useQuery、寫資料用 useMutation」的直覺在下載連結、OTP、報價這類請求上會踩坑。這篇從 TanStack Query 的設計出發，講清楚前端和後端到底在同步什麼：快照 vs 動作的分界線、為什麼 refetch 不能帶參數、以及一張決策流程圖。Tue, 14 Jul 2026 00:00:00 GMTReactTanStack-Queryreact-querydata-fetchinghttps://tech.mincontent.com/articles/security/secret-managementhttps://tech.mincontent.com/articles/security/secret-management判斷一個值該不該保護的兩個問題、用副本數 × 權限範圍 × 壽命想洩漏風險、從 .env 到平台 env var 到 Secret Manager 的選擇，以及外洩後怎麼止血。附 Workload Identity 與 KMS 這些不需要持有 credential 的場景。Wed, 01 Jul 2026 00:00:00 GMTsecuritysecret-managementcloudDevOpshttps://tech.mincontent.com/articles/frontend-to-fullstack/javascript-runtimeshttps://tech.mincontent.com/articles/frontend-to-fullstack/javascript-runtimesRuntime = JS 引擎 + host API。握住這個骨架，Node、Deno、Bun、Edge runtime 的差異、為什麼 Cloudflare Workers 沒有 fs、React SSR 為什麼有兩個串流 API，全都從同一個模型推得出來。附帶著 AI agent 動手入門的完整 prompt。Fri, 05 Jun 2026 00:00:00 GMTJavaScriptruntimeNode.jsDenoBunedge-runtimehttps://tech.mincontent.com/articles/frontend-to-fullstack/react-ssr-frameworkshttps://tech.mincontent.com/articles/frontend-to-fullstack/react-ssr-frameworks想真的搞懂 React SSR，最短路是先用 Vite + react-dom/server 親手 wire 一次 raw SSR，看清 renderToPipeableStream、hydrateRoot 這些 primitive 在幹嘛，再進 Next.js 看 wrapper 換到什麼。附兩站的動手 prompt 與 Remix / React Router v7 / TanStack Start 的框架地圖。Fri, 05 Jun 2026 00:00:00 GMTReactTypeScriptSSRNext.jsVitehttps://tech.mincontent.com/articles/frontend-to-fullstack/web-app-architecturehttps://tech.mincontent.com/articles/frontend-to-fullstack/web-app-architectureDNS、CDN、load balancer、runtime、DB、object storage、queue、secrets、observability——一個 production web app 是這些部分接在一起。寫給一個人包辦整個 stack 的工程師：每個部分在解什麼、什麼時候用 managed service、production-ready 跟 demo 差在哪。Fri, 05 Jun 2026 00:00:00 GMTweb-architecturecloudbackendDevOpshttps://tech.mincontent.com/articles/ecma262/how-is-a-variable-resolved-to-its-value-in-javascripthttps://tech.mincontent.com/articles/ecma262/how-is-a-variable-resolved-to-its-value-in-javascriptFollow an IdentifierReference through ECMAScript environment records to understand how JavaScript resolves a variable name to its value.Fri, 23 Aug 2024 00:00:00 GMTJavaScriptECMA-262https://tech.mincontent.com/articles/react/debugging-react-source-codehttps://tech.mincontent.com/articles/react/debugging-react-source-codeNote on how to set up your environment and inspect how React works internally by using browser DevTools.Thu, 15 Aug 2024 00:00:00 GMTReactdebuggingJavaScriptbrowser-dev-toolshttps://tech.mincontent.com/articles/ecma262/declarations-4-blockhttps://tech.mincontent.com/articles/ecma262/declarations-4-blockTo understand hoisting and variable scoping better, let's dive into the ECMAScript specification of block declarations.Mon, 01 Jul 2024 00:00:00 GMTJavaScriptECMA-262https://tech.mincontent.com/articles/ecma262/declarations-3-functionhttps://tech.mincontent.com/articles/ecma262/declarations-3-functionTo understand hoisting and variable scoping better, let's dive into the ECMAScript specification of function declarations.Sun, 30 Jun 2024 00:00:00 GMTJavaScriptECMA-262https://tech.mincontent.com/articles/ecma262/declarations-1-globalhttps://tech.mincontent.com/articles/ecma262/declarations-1-globalTo understand hoisting and variable scoping better, let's dive into the ECMAScript specification of global declarations.Sat, 22 Jun 2024 00:00:00 GMTJavaScriptECMA-262https://tech.mincontent.com/articles/ecma262/how-declarations-are-collected-for-instantiationhttps://tech.mincontent.com/articles/ecma262/how-declarations-are-collected-for-instantiationLearn how JavaScript engines collect declaration information for instantiation, including global, function, and block contexts.Thu, 20 Jun 2024 00:00:00 GMTJavaScriptECMA-262https://tech.mincontent.com/articles/ecma262/introduction-to-ecma-262https://tech.mincontent.com/articles/ecma262/introduction-to-ecma-262This article will introduce what is the ECMA-262, and some crucial concepts for understanding the specification.Fri, 03 May 2024 00:00:00 GMTJavaScriptECMA-262https://tech.mincontent.com/articles/floating-number-in-javascripthttps://tech.mincontent.com/articles/floating-number-in-javascriptUnderstand why 0.1 + 0.2 is not exactly 0.3 in JavaScript by tracing IEEE 754 binary floating-point representation, rounding, and precision.Sun, 03 Dec 2023 00:00:00 GMTJavaScripthttps://tech.mincontent.com/articles/ichef/testing-complex-components-how-detailedhttps://tech.mincontent.com/articles/ichef/testing-complex-components-how-detailed探討 component testing 的責任劃分和測試範圍Tue, 25 Oct 2022 00:00:00 GMTRTLtestingcomponent-testingtest-coveragehttps://tech.mincontent.com/articles/ichef/understanding-apollo-client-usequeryhttps://tech.mincontent.com/articles/ichef/understanding-apollo-client-usequery從 Apollo Client 原始碼拆解 React useQuery 何時發出請求、如何訂閱查詢結果，以及資料更新為何觸發重新算繪。Sun, 11 Sep 2022 00:00:00 GMTapollo-clientGraphQLReactJavaScripthttps://tech.mincontent.com/articles/ichef/testing-library-introductionhttps://tech.mincontent.com/articles/ichef/testing-library-introduction介紹如何使用 RTL 測試 React 元件的基本概念和最佳作法Fri, 19 Aug 2022 00:00:00 GMTRTLtestingcomponent-testingJavaScripthttps://tech.mincontent.com/articles/ichef/styled-components-attrshttps://tech.mincontent.com/articles/ichef/styled-components-attrs透過閱讀 styled-components 的原始碼，瞭解 `.attrs()` 的特性與陷阱Tue, 11 Jan 2022 00:00:00 GMTstyled-componentshttps://tech.mincontent.com/articles/javascript/what-will-happen-if-we-resolve-a-promise-instance-with-another-promise-instancehttps://tech.mincontent.com/articles/javascript/what-will-happen-if-we-resolve-a-promise-instance-with-another-promise-instanceExplore how JavaScript adopts the state of another Promise when resolve receives a Promise, including pending, fulfilled, and rejected cases.Tue, 04 Jan 2022 00:00:00 GMTJavaScriptPromisesasync-awaithttps://tech.mincontent.com/articles/ichef/google-tag-managerhttps://tech.mincontent.com/articles/ichef/google-tag-manager介紹 Google Tag Manager 的運作方式、環境與版本管理，並整理從內嵌 Google Analytics 遷移到 GTM 的實作步驟。Tue, 26 Jan 2021 00:00:00 GMTGTMMeasurementhttps://tech.mincontent.com/articles/twreporter/how-to-develop-npm-packages-confortablyhttps://tech.mincontent.com/articles/twreporter/how-to-develop-npm-packages-confortablyCompare symlinks, npm package archives, and local publishing tools for developing an npm package in one repository and testing it in another.Thu, 22 Aug 2019 00:00:00 GMTnpm-packagesdevelopmentJavaScriptReactGraphQLhttps://tech.mincontent.com/articles/twreporter/crucial-conversations/2-construct-safetyhttps://tech.mincontent.com/articles/twreporter/crucial-conversations/2-construct-safety整理《關鍵對話》中修復安全感的方法：辨認尊重與共同目的受損，並練習安全地表達、傾聽與重建對話。Sun, 14 Jul 2019 00:00:00 GMTcommunication-skillsmanagementcrucial-conversationshttps://tech.mincontent.com/articles/twreporter/crucial-conversations/3-decisionshttps://tech.mincontent.com/articles/twreporter/crucial-conversations/3-decisions整理《關鍵對話》的決議階段：如何選擇決策方式、分配執行責任，避免一場沒有吵架的討論最後仍然沒有結果。Sun, 14 Jul 2019 00:00:00 GMTcommunication-skillsmanagementcrucial-conversationshttps://tech.mincontent.com/articles/twreporter/crucial-conversations/1-pillar-of-conversation-safetyhttps://tech.mincontent.com/articles/twreporter/crucial-conversations/1-pillar-of-conversation-safety整理《關鍵對話》的核心模型：對話為什麼會失控、安全感如何支撐共同意見庫，以及如何辨認沉默與攻擊。Sun, 23 Jun 2019 00:00:00 GMTcommunication-skillsmanagementcrucial-conversationshttps://tech.mincontent.com/articles/twreporter/scrum-book/reading-noteshttps://tech.mincontent.com/articles/twreporter/scrum-book/reading-notesScrum 發明者之一所撰寫的 Scrum 方法論入門書，介紹 Scrum 的核心理念、原則與理想作法Thu, 14 Mar 2019 00:00:00 GMTbookScrumteam-managementproject-managementhttps://tech.mincontent.com/articles/twreporter/map-developmenthttps://tech.mincontent.com/articles/twreporter/map-developmentJavaScript 互動地圖套件、地圖底圖、GeoJSON surveyWed, 30 Jan 2019 00:00:00 GMTLeafletMapboxGeoJSONdata-visualizationhttps://tech.mincontent.com/articles/twreporter/how-to-use-d3-with-reacthttps://tech.mincontent.com/articles/twreporter/how-to-use-d3-with-react整理在 React 專案使用 D3 的三種整合模式，比較由 D3 操作 DOM、操作虛擬 DOM，以及只使用 D3 計算模組的取捨。Thu, 12 Jul 2018 00:00:00 GMTD3ReactJavaScriptdata-visualizationhttps://tech.mincontent.com/articles/twreporter/what-is-redux-storehttps://tech.mincontent.com/articles/twreporter/what-is-redux-store透過 Redux 原始碼拆解 store 的結構、dispatch action、reducer 更新與 listener 通知流程，理解嚴格單向資料流實際如何運作。Thu, 16 Feb 2017 00:00:00 GMTReduxReactJavaScript