encodeURI vs encodeURIComponent：何時用哪個？
JavaScript 有兩個很像的 URL 編碼函式：encodeURI 保留網址結構，encodeURIComponent 把參數值包成安全字串。這篇用白話和範例說明差異、常見踩雷與實戰用法。
Eleventy 怎麼顯示流程圖，Mermaid 的顯示和優化
在 Eleventy 文章中使用 Mermaid 不一定要讓每位讀者下載 Mermaid JavaScript。這篇示範用官方 CLI 在建置時匯出 SVG 或 PNG，再用圖片嵌入頁面，降低 Vite bundle 負擔並避免圖片載入時版面跳動。
什麼是 PHP？入門指南：用途、市占
PHP 是什麼、做什麼用、還值得學嗎？市占 70%+、vs Node.js／Python 對照表、PHP 8.5 新特性與學習路徑
TypeScript 入門教學：零基礎快速上手（tsc 安裝＋tsconfig 速查）
TypeScript 教學入門：tsc 安裝、tsconfig.json 設定、npx tsc 編譯與 ts-node 速查——macOS 零基礎 5 分鐘上手
文章目錄 TOC 怎麼做？11ty 的實作方式
TOC 目錄是什麼、對 SEO 有幫助嗎？原生 HTML 錨點、JS 動態、WordPress 外掛與 11ty [[toc]] 三種做法對照
Tab Manager Plus 教學：Chrome 分頁管理終極指南
分頁太多找不到？Tab Manager Plus vs Auto 功能對比、搜尋分頁、一鍵整理——Chrome 分頁管理完整教學
Statamic 教學：Flat-file CMS 入門 vs WordPress／11ty
Statamic 是什麼？安裝步驟、YAML 內容模型、vs WordPress／11ty 取捨——2026 檔案型 CMS 實戰指南
SOLID 原則 PHP 實戰：五大設計原則速查 + 設計模式對照
SOLID 五大原則 PHP 範例：SRP、OCP、LSP、ISP、DIP 速查表、vs Factory／Singleton 對照、常見 FAQ
PHP 類別與物件入門：Class／Object 語法筆記
PHP class 和 object 差別、屬性與方法、new 與 $this、封裝入門——OOP 基礎實戰範例
PHP try catch 教學：例外處理程式語法筆記
php try catch 語法速查、Exception vs Error 對照、自訂例外、PDO 實戰與常見錯誤排解——一篇搞懂 PHP 例外處理
Composer 是什麼？PHP Composer 教學（install、require、PSR-4 速查）
PHP Composer 是什麼、怎麼安裝？composer.json／lock、require／install／update、PSR-4 autoload 指令速查與實戰流程
PHP public、private、protected 差異：protected vs private 對照表
PHP 存取修飾符速查：public／private／protected 三欄對照、protected vs private 何時用哪個、封裝原則與繼承可見性
Laravel Herd 架 WordPress：本機開發環境 5 分鐘搞定
Herd 本機架 WordPress 教學：安裝、建立站點、SSL、vs MAMP／Docker 對比——2026 實戰
免費 SSL 憑證完全指南：Let's Encrypt vs ZeroSSL 對比
免費 SSL 申請教學：Let's Encrypt、ZeroSSL、cPanel AutoSSL 對比、自動更新、常見錯誤排解
14 個必裝瀏覽器擴充功能：開發者效率工具推薦
Tab Manager、Dark Reader、React DevTools 等 14 個 Chrome 擴充功能推薦——分頁管理、除錯、生產力一次整理
Eleventy 11ty 怎麼加留言？FastComments 整合教學
靜態站沒後端也能開留言：用官方 fastcomments-11ty 外掛，在 Eleventy 文章頁加上留言區。含安裝、tenantId、Nunjucks shortcode、FastComments LLM Kit／MCP Server 讓 AI 查官方文件，以及 FastComments vs Giscus vs Disqus 選型表。
Mac 需要裝防毒軟體嗎？決策表（多數人其實不用）
多數 Mac 不必裝傳統防毒——macOS 內建 XProtect、Gatekeeper 已擋已知威脅。兩分鐘決策表幫你判斷是否例外，並說明 VPN 與防毒怎麼分工。
Mac 開發者必裝工具清單：Homebrew 起步的開發環境
換新 Mac 或剛學寫程式？用分類決策表圈出需要的工具，再照 Homebrew → Git → 終端機 → 編輯器 → Node 的最小 SOP 裝好能寫、能推版的環境。
靜態站 Dark / Light Mode 怎麼做？本站實作拆解
Eleventy／純 HTML 靜態站怎麼做深淺色？CSS 變數、data-theme、防閃爍，再加上切主題時的過場，並對照本站做法。
Oh My Pi（omp）是什麼？終端機 AI Coding Agent 入門介紹
分不清 Oh My Pi、omp 跟 omp.sh？這篇用白話講清它跟上游 Pi、Cursor 的差異，三大特色、安裝第一步，以及什麼情境值得試。
11ty vs Hugo vs Astro 怎麼選？靜態站產生器決策指南
已決定離開 WordPress、要走靜態站，卻卡在 Hugo、Eleventy（11ty）、Astro？用 60 秒決策表、規格比較與內容網站情境，幫你選對框架再部署上線。
Proton Unlimited 全產品與功能介紹：六合一隱私全家桶值得買嗎？
搜 Proton Unlimited 只看到一堆功能名？本文用情境表拆解 Mail、Calendar、Drive、Pass、VPN、Wallet 各自解決什麼、什麼時候該開哪個 App，並對照 2026 官方價格與決策表，幫你判斷該買全家桶還是單買 Plus。
Proton Pass 值得用嗎？免費版、Plus 與 Unlimited 怎麼選
Chrome 記密碼很方便，但整座金庫綁在 Google 帳號底下。Proton Pass 免費版已有無限密碼、Passkey 與 10 個信箱別名；本文用決策表幫你判斷何時該升級 Plus 或 Unlimited。
VPN 跟 HTTPS 差在哪？兩者的保護範圍怎麼比？
HTTPS 由網站與瀏覽器自動協商，不是使用者另外開啟的功能；VPN 才是可選工具。本文比較兩者的保護範圍與限制，並說明公共 Wi-Fi 上為何建議搭配 VPN。
Proton VPN 付費版評價：VPN Plus 值得訂閱嗎？
已用過 Proton 免費版、正在考慮升級？本文從速度、串流、隱私證據、價格與競品比較，幫你判斷 VPN Plus 付費版是否值得花錢，附決策表與訂閱前檢查清單。
為什麼要發明 Pi Coding Agent？從作者角度理解 Pi vs Claude Code
Claude Code 變複雜、上下文不透明時，Pi 作者為何重做極簡 Coding Agent？用設計動機與決策表，幫你判斷該選可控的 Pi，還是整合完整的 Claude Code。
我如何用 PageSpeed Insights 優化 11ty 網站：為什麼比 WordPress 更容易直接修
11ty 怎麼用 PageSpeed Insights 優化？LCP／CLS／INP 逐項修正流程、WordPress 對照、可複製的 AI 提示詞與審核清單
Pagefind 教學：如何為 Eleventy 靜態網站加入純前端搜尋
用 Pagefind 為 Eleventy 靜態網站加入站內搜尋：從建立索引、整合搜尋元件，到繁體中文搜尋與部署驗收，一次完成設定。
11ty 與 Hostinger 快取怎麼設定？從 .htaccess 到更新驗收
用 11ty 建站後，如何在 Hostinger 設定 HTML、CSS、JavaScript、圖片與 Pagefind 快取？本文用 .htaccess、hPanel 和 curl 帶你完成設定與排錯。
字型子集化：中文網站如何減少字型載入、改善首屏速度
繁中網站不一定要載入 10MB 以上的完整字型。本文比較系統字體、自架子集化與 Google Fonts CDN，示範用 cn-font-split 或 subset-font 產生 WOFF2，並說明 font-display、缺字 fallback 與維護取捨。
LCP 優化實戰：首屏別 lazy-load，用 fetchpriority 把關鍵資源拉上來
LCP 怎麼優化？找出 LCP 元素、首屏圖取消 lazy-load、fetchpriority 與 preload 決策表——Eleventy 靜態站實戰
GTM 延遲載入：用 requestIdleCallback 降低 PSI 的 TBT
Google Tag Manager 會和首屏資源搶頻寬，也可能增加 TBT 與 INP。本文用 requestIdleCallback、互動觸發與 timeout，示範如何延遲載入 GTM，並驗證效能與轉換資料的取捨。
圖片最佳化與 CLS 解決方案：用 width、height 預防網頁版面跳動
靜態網站圖片最佳化實戰：用 width、height 或 aspect-ratio 預留版面，降低 CLS 版面跳動；同時符合顯示寬、壓縮檔案大小，並介紹如何用 Eleventy Image 自動產生多種尺寸。
Proton VPN 值得買嗎？免費版與付費版功能完整解析
Proton VPN 免費版真的值得用嗎？本文比較免費版與 Plus 付費方案的速度、伺服器、隱私功能與限制，幫你依照實際需求選擇適合的方案。
AI 時代還需要學習 CSS 嗎？從「語法背誦」到「架構審查」的思維轉向
AI 都能幫你寫 CSS 了，還要自己學嗎？要，但學法不一樣。教你用幽默又實用的方式理解 CSS 心智模型、引導 AI 產碼，並顧好 Core Web Vitals。
認識 Pi Coding Agent：極簡終端 AI 程式助手完整指南
Pi Coding Agent 是什麼？安裝指令、四種運作模式、vs Cursor／Claude Code 分工表、上下文工程實戰。981+ 搜尋點擊熱門入門文。
PageSpeed Insights 與 Core Web Vitals 完全指南
解讀 PSI 實地數據與 Lighthouse 差異、LCP/INP/CLS 門檻、WordPress 優化 Checklist，取代已過時的 FID 指標
把文章從 WordPress 搬出來：eleventy-import 的匯出方式
WordPress 匯出到 11ty：eleventy-import 用法、圖片路徑、踩坑與 Markdown 結構整理
WordPress vs Eleventy：我為什麼把部落格遷到 11ty
一人維護的技術部落格，為什麼從 WordPress 搬到 11ty？分享我實際踩過的維護、效能、安全痛點，以及遷完之後真正變簡單與變麻煩的地方。
YouTube 批量取消訂閱：一鍵清理訂閱清單教學
快速取消大量 YouTube 頻道訂閱：瀏覽器擴充與腳本方法、注意事項
PHP 新手入門：10 個實戰練習題快速上手
PHP 零基礎快速上手：10 個實用練習、常見錯誤、進階資源推薦
PHP static vs const：何時用哪個？完整對比
PHP static 和 const 差別、class constant vs static property 對照表、self 與 static 選擇——何時用哪個速查
CSS Grid 實戰範例，快速打造網頁儀表板
CSS Grid 儀表板實作：grid-template、響應式版面、常見坑與完整範例程式碼
Eleventy (11ty) 入門：從零架設靜態網站
11ty 靜態網站生成器教學：安裝、目錄結構、模板、部署、vs Hugo 對比
8 個靜態網站產生器比較：Jekyll、Hugo、11ty 等工具
一次介紹 8 個靜態網站產生器，整理 Jekyll、Hugo、Gatsby、Next.js、11ty 等工具的特色、優缺點與適用情境
Fira Code 連字體教學：VS Code 與終端機最佳設定
Fira Code 安裝、ligature 設定、VS Code / iTerm2 配置、替代字體推薦
Laravel Herd 完全指南：從 MAMP/Valet 輕鬆遷移
Herd 本地開發環境教學、vs MAMP/Valet 對比、WordPress/PHP 專案設定
npm vs yarn vs pnpm：套件管理器完整對比
三大 Node.js 套件管理器效能實測、monorepo 支援、安裝速度與磁碟佔用對照表
Warp 終端機教學：10 倍加速你的命令行工作流
Warp 終端機完全指南：安裝、設置、快捷鍵、與 Git 整合、提升開發效率
Homebrew 完全教學：Mac 套件管理與 curl／MacPorts 對比
Homebrew 安裝、PATH 設定、常用指令、vs curl／MacPorts 對比、2026 推薦套件與常見問題
ZeroSSL 免費憑證教學：自動更新 + Let's Encrypt 對比
ZeroSSL 申請教學、自動更新腳本、cron 設定與常見錯誤排解
Mac 生產力工具推薦：提升日常效率的實用 App
Mac 生產力工具推薦：筆記、視窗管理、密碼管理、選單列與效率提升必備
查看 所有標籤。
