twMerge() + clsx() = cn() ？為啥 Shadcn 要用這些輔助函式？
如果翻閱 Shadcn 元件集的元件會發現大量使用到一個輔助函式 cn，背後使用 twMerge(clsx(inputs))，它其實是兩套函式庫的組成，用於更方便建構元件當中 Tailwind 的樣式。為什麼會需要額外的庫和方法來建構元件樣式呢？
如果翻閱 Shadcn 元件集的元件會發現大量使用到一個輔助函式 cn，背後使用 twMerge(clsx(inputs))，它其實是兩套函式庫的組成，用於更方便建構元件當中 Tailwind 的樣式。為什麼會需要額外的庫和方法來建構元件樣式呢？
不少網站登入時都有關於「Single Sign-On」的選項，像是只要登入 Google 帳號，就可以橫跨不同服務如 YouTube、Gmail，從痛點了解 SSO 如何解決多個服務間登入造成的潛在問題與相關流程，打造更方便與安全的登入體驗。
UI 通常仰賴設計者與前端耗費大量時間精力進行組織與維護，近期工作上進行前端翻新也遇到大量陳舊代碼需要翻皮的作業，問題是誰有時間一個一個重新替換？嘗試串上 Figma MCP 與 Shadcn MCP Server 讓我們透過與 AI 聊天就能精準打造前端介面。
渲染永遠是網頁運算中極度耗費效能的一塊瓶頸之一，而在像是儀表板應用或是大量資料清單如社群媒體版面很容易會遇到前端渲染效率上的問題，透過「只渲染看得到的東西」來減少效能負擔。這種模式通常稱作 List Virtualization（虛擬化看不到的東西）或 Windowing（只渲染視窗內的東西）。
AI 解決一些上下文清晰的小題目如 LeetCode 會發現它通常有驚人的效率與準確率，然而在真實情境下 AI 通常沒有這麼厲害，因為環境上下文和需求是模糊的，如何更好的讓 AI 看清與外部世界互動能夠達成更有效率的產出，而 MCP 是一種大型語言模型的統一協定幫助達成該目標。
先前文章提到：如何優雅的於 Vue 正確的處理資料載入點出了一些獲取外部資料延伸帶來的問題與實際解方，這次我想透過 TanStack Query 的視角挖掘怎麼建構更好的前端資料獲取體驗。本篇教學繼續延續使用 Vue 框架，不過概念對主流框架基本相通。
TypeScript 型別定義檔案通常就是在全局創個 type.ts 檔案並把所有型別丟裡頭，隨處都能引用很方便，但很多專案初期沿用的習慣到了一定規模就會開始混亂，近期也遇到相關的問題因此研究一下一般有哪些方式管理型別檔案。
還記得之前參與某個專案使用 Git Flow 的方式管理產品發布，但隨著時間過去它與持續進行中的主支線差距越來越大，也是在那次問題之後我更認可 Trunk Based Development 流程的概念，其中提到 Feature Flag 是一種很好的技巧用來降低推送功能的風險與控制程度。
當只有 10 行代碼改動還可能會細心檢查留言，當有 1000 行改動一切都 LGTM（Looks Good to Me）！要讓人好好集中精神盯著幾千行的代碼改動本身就是很難得的事，身為提交的一方，有沒有可以改善審核效率的方式？或許能試試看 Stacked PR。
如果你在考慮建立基於 Tailwind 的元件庫這篇文章值得一看，探討當下前端環境背景與 UI 擴充難題與問題是如何保持元件彈性點出 Shadcn 如何成為 2025 最熱門的 Tailwind 元件解決方案，正巧最近又在導入 Vue Shadcn 就來更齊全的回顧這項工具。
在網頁提到 E2E 測試通常有 Cypress 與 Playwright 兩種選項，而兩種測試工具我都嘗試過。單論整體開發體驗來說我更喜歡 Playwright，不過還有更多可以考慮的要素在選擇合適的測試工具，紀錄我會在意的細節與選擇原因。
近期在回顧一些測試的概念，其中有個測試金字塔的概念來自於 Mike Cohn 的書 《Succeeding with Agile: Software Development Using Scrum》。還沒有看過這本書，但這個詞彙只要有研究過測試多少都會接觸到，這次來重新了解一下並輸出自己對這個議題的理解。
近期不管是用 AI Vibe Coding 還是工作上切換不同功能感覺使用 git stash 不是很方便，雖然大致知道有 git worktree 但都還懶得學直接先跳過。這次有空來學如何使用 Git Worktree 快速切換複雜的專案情境。
近期要重寫很多的 Vue 發現多得是我需要多補充的知識。你可能了解 Vue 元件間透過 props down 與 event up 或是使用 Scoped Slots 來傳遞資訊。還有一種做法是「顯式地暴露某些變數或函式給父組件使用」。
JWT 也就是 JSON Web Token，一個基於 RFC 751 的標準，可用於在兩個實體（如前端和後端）間進行 JSON 物件的傳輸。由 header、payload、signature 三種資料所構成，透過 . 來區隔並使用 Base64 編碼以便傳輸。