Articles
Technical articles and updates.
工具介紹
僅需瀏覽器即可製作基礎設施架構圖:從代碼自動生成圖表
「利用基於 Mermaid.js 的架構圖生成器,只需定義節點與連線,即可將雲端或網路配置視覺化。」
從 SQL(DDL) 自動生成 ER 圖的方法與活用的優點
「解說如何從 CREATE TABLE 等 DDL 代碼自動生成 ER 圖,並將資料庫設計視覺化。」
自動化的極意:利用 GitHub Actions 與 Cron 實現高效流程
深入探討實現現代 CI/CD 的 GitHub Actions,以及傳統的定時執行工具 Cron。傳授如何管理複雜的工作流且不出錯的秘訣。
資料互換性優化:JSON, CSV, YAML 的選用與轉換
深入解說現代系統開發主流的三種資料格式。透過理解各自的強項並進行相互轉換,讓工具間的連動更加順暢。
設計與資產優化:比較、色彩與圖示製作
從程式碼與文字的差異比較,到色彩設計以及作為網站門面的 Favicon 製作。活用提升前端開發品質的設計工具術。
大幅提升開發效率:API 與資料庫的除錯術
從整理肥大的 SQL,到將瀏覽器複製的 Curl 指令轉換為程式碼。介紹縮短除錯時間的專業技巧。
JSON 生態系統詳解:型別安全與結構管理的最優解
JSON 不僅僅是一種資料格式,更是開發的基石。從 TypeScript 型別定義、Zod 驗證到 OpenAPI 文件化,本篇將介紹現代化的活用方法。
JWT 與安全 Token:原理及其安全營運指南
從 JSON Web Token (JWT) 的內部結構到透過 JWKS 進行公鑰派送,以及利用雜湊進行資料竄改偵測,為您介紹安全驗證系統的基礎知識。
Linux 工程師基礎知識:權限管理與 Unix 時間
掌握伺服器管理與部署時必備的檔案權限 (chmod) 觀念,以及系統間通用的時間表示法 (Unix 時間)。
QR Code 的生成與讀取:原理與活用方法
詳細解說 QR Code 的基本原理、安全的生成與讀取方式,以及在開發現場的活用場景。
模式匹配極意:正規表達式與文字操作的高效化
掌握從正規表達式的高階搜尋與取代,過往到字數統計、逸脫處理等工程師必備的文字處理技巧。
時間管理基礎:時區與時間單位的選用指南
解說在 Web 開發與系統維運中不可或缺的時區(UTC/JST)轉換,以及毫秒、秒等單位的精確計算方法。
URL 的原理與參數解析:從編碼到 JSON 轉換
深入解說網頁開發不可或缺的 URL 結構、百分比編碼的必要性,以及高效處理複雜查詢參數的方法。
Chmod 計算器:可視覺化計算並確認 Linux 權限的工具
介紹這款能讓您直觀操作並確認 chmod 755 或 rwxr-xr-x 等權限設定的工具。
只需一張圖片,在瀏覽器即刻產出全套 Favicon 的工具
「介紹一款能一鍵產出 favicon.ico、Apple Touch Icon 及各類解析度 PNG 圖片的工具,全過程式僅在瀏覽器中完成。」
cURL 轉換器:將 cURL 指令瞬間轉換為各種程式語言
介紹這款能將 cURL 指令轉化成 Python, JavaScript, Go, Rust 等程式碼,讓你事半功倍的工具。
能在瀏覽器上快速執行 SQL 格式化工具開發記
解說這款能在瀏覽器端安全地整理、美化 SQL 工具的開發背景與特色。
Markdown 表格製作變得驚人地輕鬆!視覺化編輯器活用術
「用 Markdown 畫表格好麻煩……」這大概是每個人的共同心聲。介紹如何利用能直觀操作、編輯表格的工具,瞬間提升文件編寫效率。
Base64 轉換的原理與工程師必知的活用場景
詳細解說 Base64、Base58、Base32 等編碼機制,以及資料體積膨脹的注意事項與二進位資料的處理方法。
Cron 表達式撰寫完全指南:從基礎語法到進階設定
為工程師必備知識的 Cron 表達式,詳細解說 5 個欄位的含義、特殊字元 (*, /, ?, L, W, #) 的用法,以及排程設定範例。
GitHub Actions 工作流可視化:精確理解複雜的流水線
「利用 Mermaid.js 將數百行的 YAML 檔案轉化為圖表。透過圖形化掌握 Job 間的依賴關係 (needs),讓除錯效率最大化。」
雜湊與 HMAC:學習資訊安全基礎概念與活用方法
詳細解說 SHA-256 等雜湊函數、鹽(Salt)的重要性,以及對於偵測資料竄改至關重要的 HMAC 原理。
文字差異比較 (Diff) 基礎:高效評論與變更確認
「到底改了哪裡……」利用 Diff 工具一瞬間看破。解說行單位與字元單位的比較、合併機制,以及提升開發效率的活用術。
UUID (Universally Unique Identifier) 基礎知識:種類與選用指南
從工程師的角度解說 UUID 是什麼、v1, v4, v7 各版本間的差異、用於資料庫主鍵的優點,以及隨機性的重要性。
給工程師的正規表達式入門:實用模式與基礎知識
深入淺出地解說正規表達式的基本元字元、電子郵件與 URL 判定等實戰模式,以及效能方面的注意事項。
UNIX 時間與時區基礎知識:工程師必備的核心概念
詳細解說 UNIX 時間的定義、毫秒與秒的區別、時區(UTC/JST)的處理,以及開發中常見的陷阱。
從 JSON 建立 OpenAPI (Swagger) 結構定義
OpenAPI 3.0 是 API 文件的標準。了解如何從現有的 JSON 高效地生成結構定義,加速文件的建立過程。
如何從 JSON 自動生成 TypeScript 型別定義
介紹如何從 API 回應等 JSON 資料中,高效地建立具有型別安全性的 TypeScript 介面與型別定義。
使用 Zod 簡化 JSON 驗證
介紹如何使用 TypeScript 友善的結構定義函式庫「Zod」,自動化 JSON 資料的執行期驗證與型別生成。
JWKS (JSON Web Key Set) 是什麼?
解說 JWKS 的原理、角色,以及如何在 DevToolKits 上生成 JWKS。
JSON 與 YAML 的轉換及其適用場景
開發現場頻繁使用的 JSON 與 YAML。本篇將介紹各自的特點、主要用途,以及需要相互轉換的場景。
JWT (JSON Web Token) 的原理與除錯方法
從 JWT 的結構(Header, Payload, Signature)到安全的除錯方式,以及在 DevToolKits 上的解碼步驟,為您進行詳細說明。
開發故事
用遞迴解決 JSON 轉 TypeScript:不依賴第三方庫的強大之處
「從 API 回應中瞬間生成型別定義。介紹不使用外部解析器、僅憑遞迴演算法實現輕量且高速轉換的幕後故事。」
將安全的 JWT 驗證環境帶入瀏覽器:從資安工程師的觀點出發
「為了安全地處理高敏感 Token。解說結合 jose 函式庫與本地處理機制的 JWT 工具設計思想。」
讓 QR Code 生成更輕便、更安全
「結合 Canvas API 與 node-qrcode,在瀏覽器上同時實現即時生成與隱私保護的工具開發實錄。」
資料不外傳最安心:瀏覽器端 Diff 工具的開發背景
「為了安全且快速地比較文字差異,我們採用了以隱私為最優先、僅在瀏覽器端運作的設計架構。」
免用函式庫的時區轉換:Intl API 的真本事
「不依賴 Moment.js 或 date-fns,僅憑瀏覽器內建的 Intl API 實現輕量級時區處理的開發幕後。」
SQL to ER 圖轉換工具開發秘話:對「瀏覽器端完結」的堅持
「介紹從 SQL 生成 ER 圖工具的開發背景,以及為兼顧安全性與便利性所面臨的技術挑戰。」