19 分鐘
弱掃報告修復決策：Node.js 套件 CVE 漏洞修復指南
記錄我處理 Node.js 套件 CVE 弱掃時，如何從掃描路徑、依賴樹與版本範圍，一步步選擇直接依賴與間接依賴的修復策略。
Node.jsSecuritynpm
技術、實作與探索.
記錄開發中的發現，分享理解問題的過程。
由新到舊 · 22 / 22 篇
9 分鐘
如何使用 Trivy 在開發階段提前發現安全漏洞
這篇文章分享我在工作中如何使用 Trivy 在本地端掃描 Docker image，不再依賴 DevOps 部門的弱掃報告，提前在開發階段發現並修復安全漏洞。文章包含 Trivy 的基本介紹、實際使用的 script、jq 過濾技巧，以及如何透過 Class 和 PkgPath 精準定位漏洞位置。
DevOpsSecurity
12 分鐘
使用 shadcn/ui 前該補的 TailwindCSS 基礎知識(六) - shadcn/ui 生態系工具鏈
深入探討 shadcn/ui 背後的核心工具鏈：clsx、tailwind-merge、tw-animate-css、CVA 和 components.json。學習如何透過這些工具解決條件式樣式、className 衝突、動畫實作、元件變體管理等實際開發問題，打造更靈活且易維護的 UI 元件系統。
shadcn/uiTailwindCSS
17 分鐘
使用 shadcn/ui 前該補的 TailwindCSS 基礎知識(五) - 解析 shadcn/ui 的設計系統
深入解析 shadcn/ui 的 index.css（或 globals.css）設計系統，完整理解 @theme inline、@custom-variant、@layer 等進階語法，以及兩種深色模式實作方式的運作原理。透過視覺化圖解，徹底搞懂 CSS 變數如何在亮暗主題間動態切換。
shadcn/uiTailwindCSS
5 分鐘
使用 shadcn/ui 前該補的 TailwindCSS 基礎知識(四) - 透過 @theme 自訂設計系統
這篇技術筆記深入解析 TailwindCSS v4 的 @theme 功能，說明如何透過 CSS 變數定義設計 token，並自動產生對應的 utility classes。涵蓋顏色系統、圓角、字型、間距的客製化方式，以及 shadcn/ui 使用的語意化顏色與深色模式實作。
shadcn/uiTailwindCSS
13 分鐘
使用 shadcn/ui 前該補的 TailwindCSS 基礎知識(三) - TailwindCSS v4 內建 Utility Classes 速查
這篇技術筆記整理了 TailwindCSS v4 的核心語法速查，涵蓋顏色系統、字型設定、間距配置、版面布局、響應式設計等基礎概念，並提供實用的程式碼範例，幫助開發者快速掌握 TailwindCSS 的使用方式，為學習 shadcn/ui 打下紮實基礎。
shadcn/uiTailwindCSS
9 分鐘
使用 shadcn/ui 前該補的 TailwindCSS 基礎知識(二) - 理解 TailwindCSS 的運作原理
這篇技術筆記深入探討 TailwindCSS 的核心運作原理，包括 JIT 引擎的工作機制、PostCSS 處理流程，以及在不同開發環境（Vite、Next.js）中的配置方式，幫助開發者理解 TailwindCSS 如何實現高效的樣式編譯與優化。
shadcn/uiTailwindCSS
7 分鐘
使用 shadcn/ui 前該補的 TailwindCSS 基礎知識(一) - 從 MUI 到 TailwindCSS 設計哲學的轉變
這篇技術筆記詳細介紹了 TailwindCSS 與 shadcn/ui 的崛起與爆紅現象，並以 MUI 使用者的角度來討論如何開始學習 TailwindCSS。
shadcn/uiTailwindCSSMUI
9 分鐘
軟體工程基本功：用 Semver 駕馭版本控制的藝術
這篇文章從我親身踩坑的經驗出發，帶你一步步理解 Semantic Versioning（語意化版本）是什麼、該怎麼判斷要升哪個欄位、以及常見的誤解與實務應用。無論你是剛接觸版本管理的新手，還是想幫團隊建立更穩定發佈流程的工程師，都能在這篇筆記中找到實用觀念與範例。
Software Engineering
15 分鐘
Gitmoji x Conventional Commit 工作流 (三) - 使用 commit-and-tag-version 自動化生成 CHANGELOG.md
這篇文章深入探討如何根據 Keep a Changelog 標準撰寫結構化、清晰的日誌，並介紹如 commit-and-tag-version 等工具，自動化生成變更日誌，讓維護工作更加高效。同時提供實踐範例與調整建議，幫助專案參與者打造更專業的工作流。
實作紀錄
10 分鐘
Gitmoji x Conventional Commit 工作流 (二) - 使用 Commitlint + Husky 校驗提交格式
在這篇文章中，我們將深入探討如何透過 Commitlint 校驗提交訊息格式，並利用 Husky 自動化校驗流程，確保提交訊息始終符合規範。不論是 不使用 Gitmoji 還是 使用 Gitmoji 的情境，我們都將展示具體的配置與效果，幫助你打造嚴謹又高效的提交工作流。
實作紀錄
12 分鐘
Gitmoji x Conventional Commit 工作流 (一) - 使用 Commitizen 互動式產生 Conventional Commit
在這篇文章中，我分享了如何利用 Commitizen 和 Gitmoji 打造一套規範化的提交訊息工作流，幫助開發者更高效地管理專案歷史紀錄。我們將深入探討 Conventional Commits 的重要性，並比較不同的適配器（如 cz-conventional-changelog、@commitlint/cz-commitlint 和 cz-customizable）的特點與應用場景。
實作紀錄
21 分鐘
Koa 與 Express 的核心差異
這篇文章深入探討 Koa 與 Express 這兩個流行的 Node.js 框架之間的核心差異，涵蓋中介層執行機制、錯誤處理方式以及框架設計理念。透過詳細範例和清晰說明，幫助開發者理解它們在實際應用中的不同之處，進而做出更合適的技術選擇。
Node.jsBackend
6 分鐘
React 專案配置 i18n 多國語系
這篇文章記錄了我在 React + TypeScript 專案中配置多國語系支持的過程，從工具選擇、需求分析到實際安裝與配置，帶你一步步了解如何使用 i18next 與 react-i18next 來實現應用的多語言切換功能。
React
28 分鐘
新舊時代 JS Bundler 的世代交替 - Vite vs. Webpack 的詳細比較
透過本文的探討，我們澄清了「萬物皆物件」這一說法的真實含義。JavaScript 中的基本資料類型和物件有著本質的區別，儘管基本資料類型在某些情況下可以表現出物件的行為，但這只是因為 JavaScript 的臨時包裝機制。
Bundler
12 分鐘
使用 Gitlab package registry 發布與下載私人 npm 套件全記錄
這篇技術筆記詳細介紹了如何使用 Gitlab Package Registry 來發布和下載私人 npm 套件。文章涵蓋了 Gitlab Package Registry 的基本概念、如何進行身份驗證、權限管理以及 package.json 的設定。
GitLabnpmyarn
5 分鐘
剖析JS 「萬物皆物件」的迷思
透過本文的探討，我們澄清了「萬物皆物件」這一說法的真實含義。JavaScript 中的基本資料類型和物件有著本質的區別，儘管基本資料類型在某些情況下可以表現出物件的行為，但這只是因為 JavaScript 的臨時包裝機制。
Javascript
17 分鐘
[實作紀錄] React + TypeScript + Jest + React Testing Library + MSW 前端測試工具安裝與配置
這篇技術筆記文章將詳細介紹如何在現代前端開發環境中整合 React、TypeScript、Jest、React Testing Library 及 MSW（Mock Service Worker）。文章將指導讀者從零開始安裝和組態這些工具，展示它們如何配合使用來建構一個健壯的測試環境。
ReactTesting
14 分鐘
以 React + Express 為範例探討 Web 應用中的檔案上傳機制
本篇技術筆記將以 React + Express 為例，探討 Web 應用中的檔案上傳機制。本文章將介紹如何使用 React 搭配 react-dropzone 套件建立前端上傳介面，以及如何使用 Express 搭配 multer 套件在後端處理上傳的檔案。
Web
10 分鐘
2023 菜鳥軟體工程師的 Mac 開發工具配置
本篇文章記錄了我於 2023 入職 Web 軟體工程師工作後，在 Macbook 工作機上的開發環境配置。本篇文章包含了日常使用的軟體和一系列開發工具的介紹。包括開發者工具、Homebrew 套件管理器、iTerm2 終端機模擬器、Oh My Zsh 和 Powerlevel10k等等。
工作設備開發工具
10 分鐘
整合 ESLint, Prettier, Husky, lint-staged 維護團隊開發品質
本篇文紀錄如何在一個前後端專案中設置 ESLint, Prettier, Husky, lint-staged
WebCode Quality Tools
6 分鐘
ubuntu 20.04.3 系統更新導致的 nvidia-driver 異常問題
這篇文章記錄了我在處理 Ubuntu 系統中 NVIDIA 驅動異常問題的整個排除過程，包括問題的原因分析和各種解決方法的實施。
LinuxUbuntuNvidia Driver