· AI 與工具
AI 不會痛，所以沒有人重構：Vibe Coding 真正的天花板
朋友純 Vibe Coding 做的預約系統，三個月四百多個 commit，刪除行數幾乎是 0。Vibe Coding 的天花板不在行數，在你驗不驗得出錯，以及規格、測試、模組化這三件事誰在做。
#工程實務
共 102 篇
· 設計與設計系統
不就一個下拉選單，是能有多難？
一顆下拉選單，我手刻了八個版本才勉強能用，後面還排著十一版沒動。這篇講每一版壞在哪——Portal、鍵盤、ARIA、輸入法、手機、螢幕閱讀器，以及為什麼一個人重構跟一群人重構，難的完全不是同一件事。
· 前端技術 · 系列:ai-era-craft
Vibe Coding 做得出 95 分的產品，缺的 5 分全是最貴的
一個人用 Vibe Coding 做出金流、SEO、三個自製瀏覽器引擎都齊全的字幕產品，完成度高到不像 side project。但 1024px 的硬地板、寫死的多語系、沒清理的暫存檔，缺的剛好都是不好玩的那些。
· 工程實務
i18n 難的從來不是翻譯，是沒有人擁有那份語系檔
多語系的痛不在裝哪一套套件，而在 key 誰命名、字誰擁有、翻譯跟不上 sprint 怎麼辦。這篇把 i18n 治理拆成命名、擁有權、流程、在地化、政治五層，越往下工程越管不到，也越決定它會不會爛掉。
· 前端技術
都用 Tailwind 就好了，寫什麼 CSS？十年演進都在解同一題
從全域 CSS、預處理器、BEM 到 CSS Modules、CSS-in-JS、Atomic CSS 與 Zero Runtime，每一代方案都在解作用域、複用性、可維護性這三題。這篇講每一代解掉什麼、留下什麼代價，以及不同專案型態該怎麼選。
· 前端技術 · 系列:refresh-token
Refresh Token 到底有什麼難的？三個上線才會炸的地方
Refresh Token 難的不是流程，是流程跑起來之後的那些鬼故事：token 放哪會被 XSS 端走、跨分頁併發怎麼把使用者踢出去、長連線與登出的時序怎麼排，還有為什麼一用 SSR 就得全部重做一次。
· 工程實務 · 系列:ai-era-craft
解決方案比畫圖寫 Code 還重要：AI 時代工程師的價值在哪
AI 時代 Code 寫得漂不漂亮、文件齊不齊，份量都變輕了。但在方便、安全、效率、便宜之間該取捨什麼，依賴的是預算、團隊、客戶這些不在 prompt 裡的真實變數，這才是 AI 觸及不到、工程師還站得住腳的地方。
· AI 與工具 · 系列:ai-era-craft
功能做出來只是一句話，難的部分 AI 沒讓它變快
AI 讓「做出功能」快得像轉開水龍頭，但架構、資安、資料庫效率、商業價值的驗證，從來沒有跟著變快。這篇談 AI 時代真正該擔心的，不是功能做不出來，而是沒人再去想那些做出來之後的問題。
· 工程實務
零信任
內網不等於安全。這篇用城堡與飯店房卡的比喻講清楚零信任在防什麼：從邊界防禦到每次請求都驗、讓服務直接隱形，以及爆炸半徑的控制。
· AI 與工具
溝通的渠道
跨工具、跨協定、跨團隊的溝通一直是難題。我在 Side Project 裡改用自然語言文件當通訊協定，讓 AI Agent 交管 Product 到 QA 的整條溝通橋樑。
· 工程實務
關於環境變數
前端打包完成後,環境變數就寫死在產出檔案裡，不像後端可以重啟切換。這篇講為什麼「動態介接環境變數」在前端不成立,以及 runtime config 這個解法的代價。
· 設計與設計系統
開發登入系統
登入系統是使用者對產品的第一印象。Auth0、Cognito、Firebase 這些工具省時省力，但要細緻化 UI Flow 時就會被 API 和架構綁住。
· 工程實務
資安漏洞遠比你想像的還要多
不是你的系統堅不可破，是它還不夠有價值被偷。這篇整理五個高價值資安觀念：前端沒有秘密、有 I/O 就有破口、零信任驗證、HTML 字串一律檢查。
· 設計與設計系統
光是權限管理系統就很複雜
RBAC 看起來只有 User、Role、Permission 三塊，實際上遠比想像複雜。權力下放、組織管理、權限本身的層級關係，每一層都要另外設計。
· 設計與設計系統
沒講就不做
Token 過期被踢出去，重新登入該回首頁還是回剛剛那頁？兩個答案都合理，但 Spec 沒寫。這篇談需求方與開發方的立場，以及背後的責任歸屬問題。
· 日更系列
關於我與前端無關緊要的分享 Day 53
Monorepo 有很多流派：主框架放 root、共用放 root、或是 root 乾乾淨淨。我偏好切分清楚的那種，每個 package 都有獨立的存在價值，代價是比較麻煩。
· 日更系列
關於我與前端無關緊要的分享 Day 52
webpack 怎樣都不肯把 require 轉成 __webpack_require__，我丟給 Claude Code 查，燒到 token limit 還沒解決。自己查半小時就找到答案：package.json 的 type 設成 module。
· 日更系列
關於我與前端無關緊要的分享 Day 48
在老派風氣的地方推動改變需要天時地利人和：值錢的老專案、想進步的主管、想改善的設計師、有執行力的統合者，還有能插縫的時間。
· 日更系列
關於我與前端無關緊要的分享 Day 42
一個人的執著和熱情都會留在程式碼裡。AI 來了之後雜訊變多，但 AI 寫的東西反而更好辨識，因為它就是有一股「AI 味」。
· 日更系列
關於我與前端無關緊要的分享 Day 41
UI Library 卡了兩週都在調架構，Primitive UI 的 API 設計常常撞到底層盲點。測試案例動不動比原始碼大兩三倍，維護難度又更高。
· 日更系列
關於我與前端無關緊要的分享 Day 30
Select、Dropdown、Tooltip、Modal 都建立在 Portal 上。點背景要不要關、撞到邊界要不要換邊、內容過多怎麼滾，每個邊際問題都得處理。
· 日更系列
關於我與前端無關緊要的分享 Day 26
前端打包是最難學又最不容易被看到的技能。大部分人只是把插件爽快加上去，卻沒想過 pipeline 裡發生了什麼，這其實是在疊技術債。
· 日更系列
關於我與前端無關緊要的分享 Day 27
PM 在驗證需求寫「禁止特殊符號」時我最害怕。到底什麼算特殊符號？白名單還黑名單？鍵盤上看得到的才算？emoji 算不算？
· 日更系列
關於我與前端無關緊要的分享 Day 25
各種 Icon 方案我最喜歡 SVG。這篇講怎麼把 SVG 文字直接 mount 到 HTML、用 currentColor 控制顏色、用 em 讓尺寸繼承 font-size。
· 日更系列
關於我與前端無關緊要的分享Day 17
老客戶要重啟四年沒維護的專案，clone 下來 install 就紅得慘烈。最後是靠 git 裡的 lock 檔紀錄，把沒問題的版本組合一個個挑出來。
· 日更系列
關於我與前端無關緊要的分享Day 19
新專案的架構規劃：monorepo 分 apps 與 packages，先把 eslint 和 builder 的 config 抽出來共用，打包從純 rollup 改成 vite。
· 短文與心得
週五上版
軟體業有個不成文規定：不要在週五上版。這件事很邪門，只要挑這天上版，週末就很容易接到來自客戶的緊急問題。
· 工程實務
Web 和 App 的差別
上一頁、重新整理、右鍵、閱讀器，這些都是 Web 才有的操作。權限模型、外框空間、版本兼容期限也都不同——不要把 Web 當 App 去設計。
· 工程實務
效能優化故事
「打開 devtool 畫面就卡死」，查下去發現跟 devtool 無關，是 resize。用 performance recording 一步步縮小範圍，元兇竟然是 Textarea。
· AI 與工具
什麼是好 Code？
「你的扣好難懂喔」吵了這麼多年都沒有標準。我覺得可以拿 AI 當判準：它理解需要的 Context 越少，代表這段程式越靠通用知識就讀得懂。
· 工程實務
前端 Serverless
Next.js 帶起 Serverless 的 Rendering Service，但 Edge runtime 是閹割版的 Node.js。想串外部服務才發現沒有 net module，也就是沒有 Socket 能力。
· 工程實務
一定要用 TypeScript 嗎？
成本高可以寫 any、編譯慢可以部分預編譯、老專案可以用 JSDoc 漸進導入。這些反對理由我都認同，但沒有 TypeScript 的大專案真的很痛苦。
· 工程實務
處理資料
前後端在處理資料這件事上的思路差別，這是一段還沒寫完就擱著的隨手筆記，先留個開頭。
· 設計與設計系統
Figma Auto Layout
Auto Layout 某種程度模擬了 CSS Flexbox，打破了設計與前端之間的溝通橫溝。從「太花時間了不可能都用」到現在出現歧視鏈，這個變遷很有趣。
· AI 與工具
元件拆分
拆元件的目的不是因為大而拆，而是為了更好理解、更好的渲染效益、更好的共用。急著抽共用的結果，就是一堆只有一個地方用到的「共用元件」。
· 工程實務
Service Worker
Service Worker 就像一台開在瀏覽器裡的伺服器：長期快取、Web Push、攔截請求、背景長連接，還能不卡主線程做運算。PWA 就是基於它。
· AI 與工具
AI 的東西不要照單全收
AI 可以讓你從 0 到 70% 飛快完成，最後那 30% 依舊得自己補。交付出去的東西是你負責的，事後說「那是 AI 產生的」，主管心裡會怎麼想？
· 工程實務 · 系列:refresh-token
Refresh Token
Refresh Token 是我做過所有前端需求中最通用、也最困難的機制。非同步處理、閉包、重試限制只是基礎，業界幾乎沒有統一做法或標準化套件。
· 工程實務
useEffect 要 Cleanup
事件要清除、外部狀態要恢復，大家都知道。但 Promise 的 callback 嚴格說也是一種 event callback，那是不是也該 cleanup？
· AI 與工具
分享我使用 AI 的方法
從 user story、架構文件、架構程式碼、單元測試到頁面文件，一層層讓 AI 產出並回寫成 Context。這篇拆解整套流程，也講為什麼架構階段最關鍵。
· 工程實務
CSS In JS
styled components 終止更新，進入長期維護階段，這件事社群沸沸揚揚。 有人說，這件事代表的是一代技術的興衰，隨著 Atomic CSS 的興起，逐漸大家捨棄了原本 cssinjs 的方案。也有人說，與其使用 runtime
· AI 與工具
你真的知道自己在寫什麼嗎？
幫幾個新手看 Code，發現在 AI 的時代很多人根本不知道自己在寫什麼，就跟以前每次都複製貼上一樣，完全不曉得程式是怎麼動的。
· 工程實務
你真的驗證過 Tree Shaking 嗎？
在現在 極端 內捲的 前端 生態裡面 ， 每個 都計較 怎麼 打包 ， 要多小， 要 多 快 。 B un dl e Siz e 可以說是 非常 有價值 的 優化 項目 ， 但 你 真的 有 驗證過 ， 你 自己的 專案 T re e S
· 工程實務
關於前端架構
前端架構不只是資料夾結構和 Builder Tool。這篇列出七個真正該關注的點：可測試性、各種狀態的顯示、多語系破版、跨 feature 解耦、命名規範。
· 工程實務
如何估時程？
做過的東西只需要刻意練習就能估準。面對不熟悉的東西則需要一場「前哨戰」：先估一個「需要多久能估出總時程」的時間，甚至直接寫 POC。
· 設計與設計系統
給前端了解的 Design System
前端拿到 Design System 就像拿到加速工作的標準，但這只可能發生在產品開發，接案公司初期根本定義不出來。這篇講設計師那側的難點。
· 工程實務
開發要不要寫文件？
文件不需要寫「這段程式幹嘛」，程式會重構迭代。真正要寫的是目的、規格，尤其是你解決的邊際問題。而且文件是寫給後手和未來的自己看的。
· 工程實務
重構的故事（一）
公司主力舊專案是 Vue2，CTO 希望用微前端 migrate 到 React。看起來只要解決微前端、拆商業邏輯、逐頁重做——當然，想的簡單。
· 工程實務
重構一個前端專案
三次比較大的重構：80 多組 Resources 的 Vue2 系統、要用微前端 migrate 到 React 的高耦合專案，以及 31 組語系、品質極差的 Nuxt3 重構案。
· 工程實務
程式碼越少越好？！
大家都說聚合性要高、程式碼越少越好維護，但我重構過的專案告訴我相反的事：複用率越高的專案，反而比幾乎不複用的爛專案更難維護。
· 工程實務
最誇張的多語系
接手一個看起來功能不多的專案，直到看見它的 i18n——宏偉的 28 種語系，需求還要再加三種。每多一個詞彙，要改的 json 就是一場惡夢。
· 工程實務
造一個輪子
造輪子之前，先搞懂別人的輪子解決了什麼、極限在哪。如果參不透別人輪子的精髓，那你造出來的會是個方輪，用它只會帶來災難。
· 工程實務
Code Review
Code Review 不是拿來管品質，也不是審核誰寫得好。這篇講它真正該做的四件事、不該做的兩件事，以及為什麼兩人以上協作就需要它。
· 工程實務
技術強弱
到了 mid level 以上其實很難比較誰強誰弱。專案規模、開發節奏、團隊文化都會養出不同的重視點——與其質疑對方的想法有問題，不如去了解它誕生的時空背景。
· 工程實務
關於 RestfulAPI
Restful API 不只是分 GET、POST、PUT、DELETE，你還得懂 http 規範和瀏覽器規範。這篇列出三種一看就會踩雷的 API 設計。
· 工程實務
軟體架構這件事
架構開得越大，改動成本越低，但維持成本越高。以多國語系為例，事先做好確實省下重構，但資料庫與翻譯表的長期維持也很貴。
· 工程實務
關於開發流程這件事
「團隊那麼小，不需要開發流程」——對，也不對。小團隊需要的是「精簡必要的流程」，而不是亂無章法。有機制保障失誤，重構和升級才敢大膽執行。
· 工程實務
Component 卸載，非同步要清理
元件掛載時打 API 很常見，但元件被卸載後 callback 並不會中止，還是會把非同步跑完，執行「不需要的行為」。趕快檢查你的元件有沒有好好清理。
· 工程實務
寫 Class 有什麼問題？
class 其實只是 function 的進階應用。想寫的話要注意：解構後 this 會消失、用 this 改狀態不會響應。OOP 和 FP 從來不是對立的。
· 工程實務
關於共用這件事
共用會帶來「依賴」和「版本」兩個問題，而這兩個才是日後麻煩的元兇。適當的複製貼上，反而可以讓程式更好閱讀與重構。
· 工程實務
伺服器渲染 (SSR)
SSR 架構下 Token 該放哪？伺服器拿不到 Client 的 LocalStorage。這篇講怎麼用 http only cookie 解決，也講為什麼我更推崇 PreRender。
· 工程實務
人為失誤
我沒有變得不容易失誤，但我的失誤對專案的影響變小了。關鍵在 QA 機制與 CI/CD Workflow——好的團隊機制會放大人才的優點，而不是凸顯缺點。
· 工程實務
Mock Server
後端還沒好、外部資源掛掉都會卡住前端開發，Mock Server 可以用 Node.js 或 Service Worker 模擬一個伺服器環境。但也有人認為這只是拉高成本。
· 工程實務
該造輪子了嗎？
經驗不足的優先用套件，有經驗的要知道套件做了什麼，資深的則是「有條件的造輪子」——先讀完知名套件的原始碼，再來造自己的。
· 工程實務
你可能不需要 SSR
SEO 用 SSG 排程預渲染就夠了、渲染效率未必更快、CLS 本來就不該是問題。這篇把 SSR 的好處一條條拆開檢查，再看它帶來的四個副作用。
· 設計與設計系統
設計一個 Design System
設計系統最關鍵的是一致性，但前期該關注的不是 component，而是更包容的 Design Language。這篇講為什麼一開始需要更多發散。
· 工程實務
每一種寫程式的呈現都是一種「風格」
「這樣比較好維護」其實相當主觀，可讀性跟閱讀者的背景高度相關。只要符合說好的規範，剩下的就是風格問題，我不想干涉別人怎麼寫。
· 工程實務
物件導向只是一種設計模式的表現方式
前端圈不流行寫 class，那還需要學 Design Pattern 嗎？後來我才體會到設計模式是一種「精神」，不限於物件導向——Curry 就是物件不需要的模式。
· 工程實務
依賴循環：重談 circular dependency 與打包的關係
模組循環在前端多半不會爆，因為打包後模組早就載入完成。但完全不經過打包執行時就會出事，而且它本身就是架構層次不清楚的徵兆。
· 工程實務
總會有地方搞得很複雜
我寧可底層邏輯複雜，也要業務層簡潔好用，因為業務層才是經常被改動的地方。函式庫原始碼有八成在服務 API 介面，核心功能佔比其實極少。
· 工程實務
瀏覽器快取
做多站點登入和 SSO 踩了滿坑滿谷。這篇講 cookie、sessionStorage、localStorage 各自的保存範圍與風險，以及為什麼快取機制會深深影響系統設計。
· 工程實務
瀏覽器路由
路由器看似簡單其實很複雜。popstate 只監聽得到 forward、back、go，pushState 和 replaceState 是聽不到的。解法還是回到單向資料流。
· 設計與設計系統
元件真的別亂自己刻
光是用 div 刻一個 Custom Select，就有八個坑等著你。這篇講手刻元件的隱形成本：測試、Storybook、元件文件、打包成 package，全都是長期技術債。
· 議題討論
軟體開發是難還是簡單？
硬技能決定薪資底線，軟技能決定天花板。這篇用學習前置技能、技能更新率、資訊取得難度三個標準，判斷軟體開發到底難不難。
· 工程實務
到底架構要解決什麼問題？
架構是把經驗值變成規範，讓團隊繞過風險而不必逐一交代情境。這篇講它解決的維護心智負擔與商業層面問題，也講它最後會遇上的人才集中難題。
· 工程實務
先別急著對需求回應
收到需求的第一反應不該是「這很難做」。成熟的工程師該提出解決方案，而不是一昧提異議。這篇也講估時程為什麼需要刻意練習，以及 POC 的價值。
· 工程實務
前端基礎設施
Frontend Infrastructure 涵蓋 CI/CD、打包、套件管理、SSR、監控、容器管理、AST、Module Federation。這些多半不是業務開發會碰到的技術，卻是團隊規模長大後的關鍵。
· 工程實務
關於前端單元測試
新手最常犯的錯是「貪圖一個案例測到太多東西」。觸發和渲染該拆成兩個 Test Case，外部依賴該 mock 掉——那是 end to end 才要做的事。
· 工程實務
為什麼前端這麼需要 Project Builder？
為什麼只有前端要又轉譯又打包？從一支破萬行的 HTML、破萬行的 CSS、上百張圖片講起，也講為什麼後端能拆微服務而前端拆不了。
· 工程實務
Domain Driven Design
前端套 DDD 的水土不服：Domain layer 得靠 class、CQRS 讓定義一個行為的成本暴增。但用 Domain 劃分後重構成本大降，微前端也有了溝通橋樑。
· 工程實務
動畫製作
動畫的本質是處理每一個影格該長什麼樣子。這篇講 Reflow 與 Repaint 的差別（連「取得」尺寸都會觸發），以及為什麼實作動畫最好脫離框架直接操作 DOM。
· 工程實務
JSDoc
「為什麼不乾脆用 TypeScript 就好？」因為不是每份工作都能讓你任意導入技術。JSDoc 不只是閹割版型別檢查器，它在編輯器輔助上的價值也很高。
· 工程實務
依賴循環：前端的 circular dependency 多半不會爆
為什麼前端的 circular dependency 多半不會爆？因為 ESModule 打包後模組早已載入完成。但這不是「會不會動」的問題，是架構層次不清楚的徵兆。
· 工程實務
技術選型是要找合適的
「有新專案就該用 Composition API」我持否定態度。它在大專案的優勢很明顯，但給 junior 用會有超多誤操作，Optional API 的價值不該被忘記。
· 工程實務
用我用什麼角度去看套件？
「套件幫我解決了，不用管細節」這種態度我不太認同。我的實力是靠大量閱讀原始碼建立的，知道它的實作原理，就能預先知道坑在哪。
· 工程實務
實作狀態管理器
mobx 用 OOP 的核心理念建構，跨應用驅動的特性在微前端有優勢。但物件導向邏輯跟 React 那套非常 FP 的設計，衝突與不便也很明顯。
· 工程實務
看爛 Code 也是種學習
看過夠多糟糕的寫法，才知道好壞差在哪。這篇是重構時痛出來的九條原則：常數取代字串組合、減少耦合、減少狀態、避免巢狀、Linter 不能亂 disable。
· 工程實務
無障礙網頁有多麻煩？
FreeGo 和 CNN 檢測都過了，不代表真的能用。這篇分享做無障礙電子書時注意到的八個細節，以及為什麼無障礙做得最好的其實是 Bootstrap。
· 設計與設計系統
設計一套 UI 元件庫
從輪播、下拉選單到彈窗，手刻元件累積的都是經年累月的智慧。這篇講顏色系統、多國語言排版、無障礙互動與 API 接口設計各自的難處。
· 工程實務
哪來的勇氣去相信套件？
很多工程師無條件相信套件，但套件不一定寫得好。挑套件前我一定會把原始碼大致讀一次，重點是快速掌握它的關鍵在哪，而不是「不懂，用就對了」。
· 工程實務
講了很多次，要寫文件！
團隊出走後新人接手，光是研究舊功能的設計理念就耗掉大把時間，Bug 率居高不下。文件真正的用途是給「後手」看的：有文件叫考古，沒文件叫通靈。
· 工程實務
為什麼前端打不到資料？
「我 postman 都會通，為什麼你打不到？」這就是 CORS。這篇講瀏覽器為什麼要擋、該從伺服器解決，以及前端自己起 proxy 這個解法的代價。
· 工程實務
錯的不是技術
一聽到 Wordpress、MVC、jQuery 就聞之色變。但每種技術背後都有它要解決的問題，嚷嚷的人往往不了解新技術想解決什麼，反之亦然。
· 工程實務
關於穩定度
獵頭和主管都追求「員工穩定」，但那其實是個盲區。三年薪資成長三倍，換得快不等於不穩定——該看的是他知不知道自己為什麼要換工作。
· 設計與設計系統
設計一個頁面，設計一個元件，設計一個服務
頁面不可複用，元件要考慮通用性，到了微服務層級則是任何改動都會牽扯全部產品。這三種設計是完全不同的層級。
· 工程實務
Monorepo 踩坑記
Monorepo 最難搞的是依賴問題。打包套件內部自動 require 時無法分辨 workspace 還是 root，會去讀它自己所在的 node_modules，坑就從這裡開始。
· 工程實務
Webpack升版（二）
要關閉 Vue cli 的 TS，方法就是去修改 ts loader 的設定，從頭到尾不是 ESLint 做的祟。到這裡總算是可以把專案暫時動起來了，但接著還要各種問題⋯⋯最要命的是 typescript 的各種運行規則，不要去挑戰非常冷門
· 工程實務
Webpack升版（一）
把一個龐大的 Vue-cli 專案從 webpack 4 升到 5。這篇記下升級介面的選擇、Node 版本與 polyfill 的坑，以及 TS 錯誤噴到崩潰時關不掉檢查的怪事。
· 工程實務
Mobile App和 Mobile Web 是不一樣的東西
App 與 Web 的分辨點在「預設行為」與「預設介面」。要求兩者統一，得先建立在了解與充足的開發資源上，否則只是因為無知而做的任性。
· 工程實務
文件究竟價值在哪？
朋友的新創團隊急著把 Code 寫出來、拒絕寫文件，兩個月後 PM 和工程師翻臉走人，那堆程式碼沒人想接。最後最有價值的，反而是當初沒寫的文件。
· 工程實務
重構專案
怎麼說服公司願意重構？你需要一份問題列表：現存 Bug、復現方式、利害分析、解決方案、時間與週期，再偷偷開分支做出佐證。
· 工程實務
圖表系統開發經驗
為了做一個高度客製化的 Event Time Line Chart，只好跳下去跟 Canvas 搏鬥。到了 Canvas 沒有 CSS，碰撞、渲染、組件化全部要用數學算出來。