開發文章列表 - Page 2
整理開發工具的用法、實作筆記、技術解說，以及除錯與資料轉換實務流程的文章列表。（第 2 頁）
如何在瀏覽器繪製系統架構圖｜圖示・群組框・PNG/SVG 匯出
整理了以圖示與群組框繪製橫跨使用者、邊緣、伺服器與外部服務的系統架構圖的步驟。只用瀏覽器就能直角自動連線，並匯出 PNG・SVG。
curl 選項速查｜-X、-H、-d 實際做了什麼與常見陷阱
整理實務上會遇到的 curl 選項：為什麼加了 -d 就已經是 POST、-d 與 --data-raw 的差別、開頭的 @ 會悄悄讀取檔案的陷阱、單引號與雙引號的取捨，以及為什麼 -k 和 -L 值得多想一下。
JSON Schema 與 Zod 雙向轉換的原理｜required 與 .optional() 的對應
解析雙向轉換器的實作：把 JSON Schema 轉成 Zod 結構定義，也把 Zod 程式碼轉回 JSON Schema。內容涵蓋 required 與 .optional() 預設值相反的陷阱、限制條件對照表，以及不執行程式碼就完成剖析的做法。
SQL 子句執行順序參考｜為什麼 WHERE 看不到 SELECT 的別名
SQL 並不是照您撰寫的順序執行。以邏輯執行順序（FROM → WHERE → GROUP BY → HAVING → SELECT → ORDER BY → LIMIT）為主軸，說明別名為何在 WHERE 無法使用、WHERE 與 HAVING 的分工、ONLY_FULL_GROUP_BY、COUNT(*) 與 COUNT(欄位) 的差異，以及 LEFT JOIN 搭配 WHERE 的陷阱。
unified diff 格式閱讀指南｜看懂 git diff 的 @@ 標頭
說明如何閱讀 git 產生的 unified diff 格式：@@ -12,7 +12,9 @@ 四個數字的意義、只改一個字元為何顯示成整行替換、空白與換行字元的陷阱、\ No newline at end of file、合併提交的 @@@ 組合式 diff，以及以 similarity index 推斷檔案更名。
UTC⇄JST 換算參考手冊｜9小時時差對照表與時區踩雷指南
以對照表整理 UTC 與日本時間（JST）的換算，並說明與台灣時間（UTC+8）相差 1 小時的關係。內容涵蓋 ISO 8601 的 Z 與 +09:00、JavaScript 日期解析悄悄位移 9 小時的條件、MySQL/PostgreSQL 的時區行為，以及 GitHub Actions cron 一律以 UTC 執行的陷阱。
CREATE TABLE 參考手冊｜MySQL、PostgreSQL、SQLite 的型別與約束差異
以跨資料庫對照表整理 CREATE TABLE（DDL）的寫法：型別對應表、自動編號（AUTO_INCREMENT / IDENTITY / rowid）的方言差異、外鍵的 ON DELETE 行為，以及 MySQL 會靜默忽略的 CHECK 約束。
從資料表設計自動產生 CREATE TABLE 語句的原理｜DDL 產生器
解析 DDL 產生器的實作：以視覺化方式設計資料表並產生 CREATE TABLE 語句與 ER 圖。內容涵蓋 MySQL/PostgreSQL/SQLite 的型別轉換規則，以及從 JSON 範例推論欄位的演算法。
GitHub Actions needs 設計模式集｜加速 CI 的依賴關係組織法與反模式
以模式與反模式對照表整理 GitHub Actions 中 needs 所建立的 job 依賴關係。涵蓋 concurrency 取消重複執行、fail-fast 取捨、matrix 與 needs 組合的陷阱，以及可重複使用工作流程，並附上可直接複製的 YAML 範例。
Mermaid ER 圖語法完全參考｜關聯符號與實戰範例
完整整理 Mermaid erDiagram 語法：烏鴉腳表示法的基數對照表、一對多與多對多的差異、含 PK/FK 的屬性定義，以及一個可直接套用的完整電商範例。
如何用 SQL 建構器以視覺化方式組出 SELECT、JOIN 查詢
說明如何在瀏覽器中用視覺化 SQL 建構器組合 SELECT、WHERE、JOIN。涵蓋數值自動加引號的判斷原理、JOIN 使用時機對照表，以及多資料表 JOIN 的寫法。
SQL JOIN 完全參考｜INNER、LEFT、RIGHT、FULL 的差異與結果列數觀念
以對照表與結果列數範例，完整整理 SQL 的 JOIN 種類（INNER/LEFT/RIGHT/FULL/CROSS/SELF）。說明一對多 JOIN 為何會使列數增加、WHERE 子句與 ON 子句在 NULL 判斷上的陷阱，以及多資料表 JOIN 的寫法。
Case Converter ― camelCase、snake_case、kebab-case 等 9 種命名規則一次轉換
說明如何將識別字或變數名稱同時轉換成 camelCase、PascalCase、snake_case、CONSTANT_CASE、kebab-case 等 9 種命名規則。涵蓋連續大寫字母（HTTPServer）與數字的處理方式，以及多行批次轉換。
LLM API 費用計算機 ― 在相同條件下比較 Claude、GPT、Gemini 的價格
只要貼上提示詞、輸入預估輸出 token 數，就能比較 Claude、GPT、Gemini 的 API 使用費用。說明輸入／輸出單價結構、費率自動更新機制，以及估算的侷限。
AI 規則產生器 ― 一次表單生成 AGENTS.md、CLAUDE.md、Cursor Rules
說明如何一次生成 Claude Code、Cursor、GitHub Copilot、Windsurf、Gemini CLI 的規則檔案。涵蓋 AGENTS.md 標準的背景、各工具檔案格式的差異，以及以 AGENTS.md 為準的營運方式有何優點。
LLM Token 計數器 ― 在瀏覽器中一次確認 Claude、GPT、Gemini 的 token 數
只要貼上文字，就能並列確認 Claude／GPT／Gemini 的 token 數。說明 token 的基本概念、各模型 tokenizer 的差異、為什麼中日文的 token 效率較差，以及估算值的侷限。
IP/CIDR 子網路計算機 ― 一次算出網路位址、廣播位址與遮罩
說明如何從 192.168.1.10/24 這類 CIDR 表示法，計算出網路位址、廣播位址、可用主機數、子網路遮罩與萬用字元遮罩，並附上前綴長度速查表方便快速對照。
編碼、雜湊、加密的差異與使用時機：開發者最容易搞混的三件事
Base64 編碼、SHA-256 等雜湊、加密經常被搞混，但目的完全不同。用比較表與具體範例整理三者的差異，並說明各種情境下的正確選擇。
如何轉換 HEX、RGB、HSL 色彩並檢查對比度
轉換 CSS 色彩格式、用 HSL 調整色彩，並檢查前景／背景的對比度以打造易讀的 UI，並附範例。
如何從圖片讀取 QR Code 並在開啟前確認網址
從圖片或截圖解碼 QR Code、在印刷前驗證活動連結，並安全檢查可疑的 QR 網址。
如何換算毫秒、秒、分鐘與小時：用於逾時與 TTL 設定
換算 ms、秒、分鐘、小時、天，避免在 API 逾時、快取 TTL、重試與監控間隔設定中混淆毫秒與秒。
字數統計與文字整理：文件、表單與程式碼片段的活用法
運用字數與行數統計、空白整理、HTML 逸脫，將文字整理成適合文件、中繼資料、表單與開發作業使用的形式。
如何為 API 與查詢參數進行 URL 編碼與解碼
了解百分比編碼的意義、何時該編碼 URL，以及在除錯 API 與追蹤連結時如何安全檢查已編碼的查詢字串。
如何將 URL 參數轉成 JSON：減少 UTM 與 API 查詢的疏漏
把長網址的查詢參數整理成 JSON，用來確認 UTM、搜尋條件、API 請求的鍵與值，並附上實際範例。
CSV 與 JSON 轉換：API 串接與資料移轉的格式選擇
了解如何安全地在 CSV 與 JSON 之間轉換，包含標題列、分隔符號、值的型別、巢狀資料與實務工作流程。
JSON 格式化與驗證：安全檢查 API 回應的方法
了解如何格式化 JSON、找出語法錯誤、確認值的型別，並將 API 回應延伸成 TypeScript 型別、Zod Schema 或 OpenAPI 文件。
僅需瀏覽器即可製作基礎設施架構圖：從代碼自動生成圖表
「利用基於 Mermaid.js 的架構圖生成器，只需定義節點與連線，即可將雲端或網路配置視覺化。」
從 SQL DDL 生成 ER 圖：CREATE TABLE 解析原理
說明 SQL to ER 圖工具如何解析 CREATE TABLE DDL 並轉換成 Mermaid ER 圖：PRIMARY KEY／FOREIGN KEY 的擷取規則、欄位型別的處理方式，以及不支援的 DDL 寫法。
JSON 生態系統入門：用實例串起格式化、型別生成、驗證與 API 定義
以一個 API 回應為例，用實際程式碼串起格式化、TypeScript 型別、Zod 執行期驗證與 OpenAPI 定義，讓你看清型別安全 API 開發的全貌。
JWT 與安全 Token：原理及其安全營運指南
從 JSON Web Token (JWT) 的內部結構到透過 JWKS 進行公鑰派送，以及利用雜湊進行資料竄改偵測，為您介紹安全驗證系統的基礎知識。
QR Code 的生成與讀取：原理與活用方法
詳細解說 QR Code 的基本原理、安全的生成與讀取方式，以及在開發現場的活用場景。
實用正規表達式食譜：可複製貼上的搜尋與取代模式
可直接使用的正規表達式：電子郵件、URL、日期、空白整理等現場常見模式，每個都附上比對說明，並介紹日常文字處理的訣竅。
URL 的原理與參數解析：從編碼到 JSON 轉換
深入解說網頁開發不可或缺的 URL 結構、百分比編碼的必要性，以及高效處理複雜查詢參數的方法。
Chmod 計算器：可視覺化計算並確認 Linux 權限的工具
介紹這款能讓您直觀操作並確認 chmod 755 或 rwxr-xr-x 等權限設定的工具，並說明 8 進位與 rwx 表示法之間如何互相對應換算。
cURL 轉換器：將 cURL 指令瞬間轉換為各種程式語言
把 cURL 指令轉換成 Python、JavaScript、Go、Rust 等程式碼。說明為什麼可靠地轉換 curl 需要用 shell 語法解析（而非正規表示式），支援哪些語言，以及使用產生的程式碼前該檢查什麼。
只需一張圖片，在瀏覽器即刻產出全套 Favicon 的工具
「介紹一款能一鍵產出 favicon.ico、Apple Touch Icon 及各類解析度 PNG 圖片的工具，全過程式僅在瀏覽器中完成。」
SQL 格式化工具：如何讓查詢語句變得易讀，以及方言（dialect）選擇為何重要
把從日誌或 ORM 取得的雜亂 SQL 整理成易讀的查詢語句。說明方言選擇（PostgreSQL/MySQL/BigQuery）為何會影響格式化結果的技術原因，以及格式化為何同時能當作語法檢查。
Markdown 表格製作變得驚人地輕鬆！視覺化編輯器活用術
「用 Markdown 畫表格好麻煩……」這大概是每個人的共同心聲。介紹如何利用能直觀操作、編輯表格的工具，貼上類似 CSV 的資料就能自動對齊，瞬間提升文件編寫效率。
Base64 轉換的原理與工程師必知的活用場景
詳細解說 Base64、Base58、Base32 等編碼機制，以及資料體積膨脹的原因與二進位資料的處理方法。也會談到將小圖示直接嵌入程式碼、避免 API 傳輸亂碼等實務場景。
Cron 表達式撰寫完全指南：用實例理解 5 個欄位與特殊字元
用真實的表達式理解 Cron 的 5 個欄位、特殊字元 (* , - / ? L W #)、常用排程範例，以及 UTC 與時區的陷阱，並整理 GitHub Actions 與 Kubernetes CronJob 的寫法。
GitHub Actions 工作流可視化：精確理解複雜的流水線
用 Mermaid.js 將數百行 YAML 視覺化，理解 job 之間的依賴關係（needs）。涵蓋 needs 的字串／陣列寫法、扇出／扇入／matrix 模式，以及如何找出循環依賴。
雜湊與 HMAC：學習資訊安全基礎概念與活用方法
詳細解說 SHA-256 等雜湊函數、鹽（Salt）的重要性，以及對於偵測資料竄改至關重要的 HMAC 原理。
如何閱讀文字差異 (Diff)：理解行單位與單字單位的比較
學會閱讀 diff：+ 與 - 的含義、行單位與單字單位比較的差異、空白與換行符號的處理，以及程式碼審查的實戰用法。
UUID (Universally Unique Identifier) 基礎知識：種類與選用指南
從工程師的角度解說 UUID 是什麼、v1, v4, v7 各版本間的差異、用於資料庫主鍵的優點，以及隨機性的重要性。
給工程師的正規表達式入門：實用模式與基礎知識
深入淺出地解說正規表達式的基本元字元、電子郵件與 URL 判定等實戰模式，以及擷取群組、前瞻後顧與效能方面（ReDoS）的注意事項。
UNIX 時間與時區基礎知識：工程師必備的核心概念
詳細解說 UNIX 時間的定義、毫秒與秒的區別、時區（UTC/JST）的處理，以及開發中常見的陷阱。
JSON 轉 OpenAPI Schema 的原理｜支援 Swagger 的免費線上工具
說明 JSON 如何被轉換成 OpenAPI 3.1 的 components 結構定義。涵蓋型別推導規則、陣列型別混雜時如何轉成 oneOf、日期字串的自動偵測，以及生成後該檢查的重點。
使用 Zod 簡化 JSON 驗證
介紹如何使用 TypeScript 友善的結構定義函式庫「Zod」，自動化 JSON 資料的執行期驗證與型別生成。
JWKS（JSON Web Key Set）是什麼？
說明 JWKS 的作用、JSON 各欄位的意義、在 JWT 簽章驗證中如何被使用，以及金鑰輪替時要注意的事項。可在瀏覽器中產生 RSA 金鑰對，同時取得 JWKS 格式與 PEM 格式。
如何從 JSON 生成 TypeScript 型別：用實例學會轉換訣竅
將 API 回應的 JSON 轉換成型別安全的 TypeScript 介面，附實際轉換範例，涵蓋 null、陣列、巢狀、命名訣竅與手動微調。
JSON 與 YAML 的轉換及其適用場景
開發現場頻繁使用的 JSON 與 YAML。本篇將介紹各自的特點、主要用途，以及需要相互轉換的場景。
JWT (JSON Web Token) 的原理與除錯方法
從 JWT 的結構（Header, Payload, Signature）到安全的除錯方式，以及在 DevToolKits 上的解碼步驟，為您進行詳細說明。
QR Code 的生成與讀取：原理與活用方法
詳細解說 QR Code 的基本原理、安全的生成與讀取方式，以及在開發現場的活用場景。
實用正規表達式食譜：可複製貼上的搜尋與取代模式
可直接使用的正規表達式：電子郵件、URL、日期、空白整理等現場常見模式，每個都附上比對說明，並介紹日常文字處理的訣竅。
URL 的原理與參數解析：從編碼到 JSON 轉換
深入解說網頁開發不可或缺的 URL 結構、百分比編碼的必要性，以及高效處理複雜查詢參數的方法。
Chmod 計算器：可視覺化計算並確認 Linux 權限的工具
介紹這款能讓您直觀操作並確認 chmod 755 或 rwxr-xr-x 等權限設定的工具，並說明 8 進位與 rwx 表示法之間如何互相對應換算。
cURL 轉換器：將 cURL 指令瞬間轉換為各種程式語言
把 cURL 指令轉換成 Python、JavaScript、Go、Rust 等程式碼。說明為什麼可靠地轉換 curl 需要用 shell 語法解析（而非正規表示式），支援哪些語言，以及使用產生的程式碼前該檢查什麼。
只需一張圖片，在瀏覽器即刻產出全套 Favicon 的工具
「介紹一款能一鍵產出 favicon.ico、Apple Touch Icon 及各類解析度 PNG 圖片的工具，全過程式僅在瀏覽器中完成。」
SQL 格式化工具：如何讓查詢語句變得易讀，以及方言（dialect）選擇為何重要
把從日誌或 ORM 取得的雜亂 SQL 整理成易讀的查詢語句。說明方言選擇（PostgreSQL/MySQL/BigQuery）為何會影響格式化結果的技術原因，以及格式化為何同時能當作語法檢查。
Markdown 表格製作變得驚人地輕鬆！視覺化編輯器活用術
「用 Markdown 畫表格好麻煩……」這大概是每個人的共同心聲。介紹如何利用能直觀操作、編輯表格的工具，貼上類似 CSV 的資料就能自動對齊，瞬間提升文件編寫效率。
Base64 轉換的原理與工程師必知的活用場景
詳細解說 Base64、Base58、Base32 等編碼機制，以及資料體積膨脹的原因與二進位資料的處理方法。也會談到將小圖示直接嵌入程式碼、避免 API 傳輸亂碼等實務場景。
Cron 表達式撰寫完全指南：用實例理解 5 個欄位與特殊字元
用真實的表達式理解 Cron 的 5 個欄位、特殊字元 (* , - / ? L W #)、常用排程範例，以及 UTC 與時區的陷阱，並整理 GitHub Actions 與 Kubernetes CronJob 的寫法。
GitHub Actions 工作流可視化：精確理解複雜的流水線
用 Mermaid.js 將數百行 YAML 視覺化，理解 job 之間的依賴關係（needs）。涵蓋 needs 的字串／陣列寫法、扇出／扇入／matrix 模式，以及如何找出循環依賴。
雜湊與 HMAC：學習資訊安全基礎概念與活用方法
詳細解說 SHA-256 等雜湊函數、鹽（Salt）的重要性，以及對於偵測資料竄改至關重要的 HMAC 原理。
如何閱讀文字差異 (Diff)：理解行單位與單字單位的比較
學會閱讀 diff：+ 與 - 的含義、行單位與單字單位比較的差異、空白與換行符號的處理，以及程式碼審查的實戰用法。
UUID (Universally Unique Identifier) 基礎知識：種類與選用指南
從工程師的角度解說 UUID 是什麼、v1, v4, v7 各版本間的差異、用於資料庫主鍵的優點，以及隨機性的重要性。
給工程師的正規表達式入門：實用模式與基礎知識
深入淺出地解說正規表達式的基本元字元、電子郵件與 URL 判定等實戰模式，以及擷取群組、前瞻後顧與效能方面（ReDoS）的注意事項。
UNIX 時間與時區基礎知識：工程師必備的核心概念
詳細解說 UNIX 時間的定義、毫秒與秒的區別、時區（UTC/JST）的處理，以及開發中常見的陷阱。
JSON 轉 OpenAPI Schema 的原理｜支援 Swagger 的免費線上工具
說明 JSON 如何被轉換成 OpenAPI 3.1 的 components 結構定義。涵蓋型別推導規則、陣列型別混雜時如何轉成 oneOf、日期字串的自動偵測，以及生成後該檢查的重點。
使用 Zod 簡化 JSON 驗證
介紹如何使用 TypeScript 友善的結構定義函式庫「Zod」，自動化 JSON 資料的執行期驗證與型別生成。
JWKS（JSON Web Key Set）是什麼？
說明 JWKS 的作用、JSON 各欄位的意義、在 JWT 簽章驗證中如何被使用，以及金鑰輪替時要注意的事項。可在瀏覽器中產生 RSA 金鑰對，同時取得 JWKS 格式與 PEM 格式。
如何從 JSON 生成 TypeScript 型別：用實例學會轉換訣竅
將 API 回應的 JSON 轉換成型別安全的 TypeScript 介面，附實際轉換範例，涵蓋 null、陣列、巢狀、命名訣竅與手動微調。
JSON 與 YAML 的轉換及其適用場景
開發現場頻繁使用的 JSON 與 YAML。本篇將介紹各自的特點、主要用途，以及需要相互轉換的場景。
JWT (JSON Web Token) 的原理與除錯方法
從 JWT 的結構（Header, Payload, Signature）到安全的除錯方式，以及在 DevToolKits 上的解碼步驟，為您進行詳細說明。