encodeURI vs encodeURIComponent：何時用哪個？
JavaScript 有兩個很像的 URL 編碼函式：encodeURI 保留網址結構，encodeURIComponent 把參數值包成安全字串。這篇用白話和範例說明差異、常見踩雷與實戰用法。
Eleventy 怎麼顯示流程圖，Mermaid 的顯示和優化
在 Eleventy 文章中使用 Mermaid 不一定要讓每位讀者下載 Mermaid JavaScript。這篇示範用官方 CLI 在建置時匯出 SVG 或 PNG，再用圖片嵌入頁面，降低 Vite bundle 負擔並避免圖片載入時版面跳動。
文章目錄 TOC 怎麼做？11ty 的實作方式
TOC 目錄是什麼、對 SEO 有幫助嗎？原生 HTML 錨點、JS 動態、WordPress 外掛與 11ty [[toc]] 三種做法對照
TypeScript 入門教學：零基礎快速上手（tsc 安裝＋tsconfig 速查）
TypeScript 教學入門：tsc 安裝、tsconfig.json 設定、npx tsc 編譯與 ts-node 速查——macOS 零基礎 5 分鐘上手
靜態站 Dark / Light Mode 怎麼做？本站實作拆解
Eleventy／純 HTML 靜態站怎麼做深淺色？CSS 變數、data-theme、防閃爍，再加上切主題時的過場，並對照本站做法。
Pagefind 教學：如何為 Eleventy 靜態網站加入純前端搜尋
用 Pagefind 為 Eleventy 靜態網站加入站內搜尋：從建立索引、整合搜尋元件，到繁體中文搜尋與部署驗收，一次完成設定。
AI 時代還需要學習 CSS 嗎？從「語法背誦」到「架構審查」的思維轉向
AI 都能幫你寫 CSS 了，還要自己學嗎？要，但學法不一樣。教你用幽默又實用的方式理解 CSS 心智模型、引導 AI 產碼，並顧好 Core Web Vitals。
YouTube 批量取消訂閱：一鍵清理訂閱清單教學
快速取消大量 YouTube 頻道訂閱：瀏覽器擴充與腳本方法、注意事項
CSS Grid 實戰範例，快速打造網頁儀表板
CSS Grid 儀表板實作：grid-template、響應式版面、常見坑與完整範例程式碼
Fira Code 連字體教學：VS Code 與終端機最佳設定
Fira Code 安裝、ligature 設定、VS Code / iTerm2 配置、替代字體推薦
查看 所有分類。
