Claire ChangClaire Chang企業 AI 導入顧問

技術筆記存檔

19 年軟體工程生涯留下的技術筆記。

這裡是我從前端、後端到 DevOps、機器學習的技術筆記存檔，記錄工程實作細節。這些是過去累積的技術背景，不是目前主力服務——如果你想了解企業 AI 導入顧問、AI 內訓、AI 流程診斷或智慧製造 AI 相關服務，請見 AI 導入筆記 或 合作方式。

Claude Code + GitHub Actions 自動修改 Issue 實戰教學

用 Claude Code 搭配 GitHub Actions，在 issue 或 PR 留言 @claude 就能自動產生 PR、修 bug、審查程式碼。本文分享完整安裝步驟、workflow YAML 設定與實際 issue 自動修正範例，讓 AI 直接加入你的 CI 流程。

· DevOps

Claude Code介紹和使用建議

Claude Code 是 Anthropic 推出的終端機 AI 程式助理。這篇完整介紹 Claude Code 能做什麼、安裝設定步驟、CLAUDE.md 上下文管理與 MCP 團隊協作建議，幫你把 AI 助理變成開發最佳拍檔。

· 生成式AI

AI實務應用與跨領域創新讀書會：我的分享錄影與投影片

整理我在「AI實務應用與跨領域創新讀書會」的完整分享錄影與投影片下載，內容涵蓋 AI 工具在日常工作流程的實務應用，以及如何把生成式 AI 帶進不同領域激盪創新做法，適合想開始把 AI 導入工作的朋友參考。

· AI趨勢

如何用 Playwright 撰寫參數化測試：多角色網站的自動化實戰

當網站有管理員、一般使用者、訪客等多種角色時，如何用 Playwright 撰寫參數化測試：分析角色需求、建立共用登入與 Page Object Model、用測試資料陣列讓同一份腳本覆蓋多個角色，並用 try/catch 處理 TimeoutError，讓測試穩定且可重複執行。

· 前端開發

使用 n8n 與 LINE Bot 搭建 RAG AI 應用

整理用 n8n 串接 LINE Bot 與 OpenAI Assistant 的 RAG AI 應用流程，包含憑證、Webhook、chatInput、LINE Reply API 與 JSON.stringify 設定。

· 生成式AI

軟體工程師如何善用AI提升生產力

軟體工程師如何善用AI提升生產力？我以自身的概念驗證與新技術研究經驗，分享「與 AI 成為開發搭檔」的 Pair Programming 新模式，涵蓋 AI 工具在開發流程中的實戰應用、簡報分享與活動剪影，幫助工程師把 AI 變成日常生產力工具。

· 生成式AI

產品體驗設計概念介紹

從 UX、HX、CX 到使用者需求、商業目標與數據分析，整理產品體驗設計的核心概念。

· 前端開發

在 Dify 內整合 LangSmith

在 Dify 內整合 LangSmith 與 Langfuse，為 LLM 應用加上完整的可觀察性。本文說明 LangSmith 的追蹤、監控、評估等主要功能，以及如何在 Dify 概覽頁一鍵配置串接，自動把使用數據傳輸到平台進行性能與成本分析。

· 生成式AI

Graph RAG 的 Node Embeddings 技術：把圖節點變成向量

介紹 Node Embeddings 節點嵌入技術：如何把圖（Graph）中的節點轉成向量，用餘弦相似度計算節點相似性，並整理 Neo4j Graph Data Science 提供的 FastRP、Node2Vec、GraphSAGE、HashGNN 四種演算法與 Graph RAG 的關係。

· 機器學習

Graph RAG：圖形式的檢索增強生成，讓 LLM 回答全局性問題

Graph RAG 圖形式的檢索增強生成教學，整理微軟論文的完整流程：從文本建立實體知識圖、Leiden 社群檢測、階層式社群摘要，到查詢時生成全局答案，並比較 Graph RAG 與原生 RAG 在全面性與多樣性上的差異。

· 機器學習

Line Bot圖文回覆的幾個功能

整理 LINE Bot 開發常用的互動功能：快速回覆按鈕、LIFF 前端框架、圖文選單（Rich Menu）與 Flex Message。包含 LIFF 起始應用程式安裝步驟、Netlify 部署、圖文選單設定方式與 Flex Message 結構說明。

· 後端開發

用Chrome將本地端檔案替代伺服器檔案

用 Chrome DevTools 的 Overrides 功能，把線上伺服器上的 JS、CSS 或設定檔暫時替換成本地端版本，不用改伺服器就能驗證行為，是前端除錯與研究他人網站技術的實用技巧。

· 前端開發

在本機測試LineBot API

在本機測試LINE Bot API串接不需要部署到HTTPS網址，我分享如何用Ngrok把本地服務暴露到公開網址，解決ERR_NGROK_4018 authtoken驗證錯誤，並將Webhook串接Line Console，在本機直接測試LINE聊天機器人。

· 後端開發

MSE（Media Source Extensions）介紹

什麼是 MSE（Media Source Extensions）？本文介紹這個 W3C 網頁 API 標準如何用 JavaScript 動態生成媒體流，實現無插件的網頁串流播放，包含主要功能、應用場景、JavaScript 範例程式碼，以及 Safari 17.1 為 iPhone 帶來的 Managed Media Source API（MSS）支援。

· 前端開發

ControlNet 常見錯誤如何排解

整理 Stable Diffusion WebUI 使用 ControlNet 時的 C++ Build Tools、模型版本不相容與 tensor 尺寸錯誤。

· 生成式AI

ADetailer 自動人臉檢測與高品質修復完整教學

ADetailer 是 Stable Diffusion 的自動人臉檢測與修復插件，透過 YOLO 模型定位臉部與手部，再以局部重繪解決 AI 繪圖常見的臉部、手部畸形。本文涵蓋安裝步驟、模型列表、提示詞範例與表情修改技巧。

· 生成式AI

AI技術於3D模型領域的應用：用 Meshy 把圖片轉成 3D 模型 FBX 檔

我用 Meshy 這套 3D 生成式 AI 工具，把文字或圖片快速轉成 3D 模型與紋理，並直接下載 FBX 檔。本文整理 Meshy 的四大功能（Text-to-Texture、Image-to-Texture、Text-to-3D、Image-to-3D）、社區資源與實際操作步驟，讓沒有 3D 建模經驗的人也能在幾分鐘內產出 3D 資產。

· 生成式AI

Mixamo：你的3D角色動畫工廠

Mixamo 是 Adobe 提供的免費線上 3D 角色動畫平台，上傳 FBX 模型或選用內建角色，即可自動套用數千種預設動畫並匯出，適合遊戲開發、VR/AR 創作與動畫製作快速出稿。

· AI趨勢

SF3D：Stable Fast 3D Mesh 生成工具介紹與安裝教學

SF3D（Stable Fast 3D）是 Stability AI 推出的圖生 3D 模型，不到一秒就能從單張圖片生成帶 UV 展開與材質的 3D 網格。本文整理 SF3D 的特色、與 TripoSR 的差異、安裝步驟、手動推論與 Gradio App 用法，附 Hugging Face 線上 Demo 實測心得。

· 生成式AI

Stable Diffusion 主要功能與應用全解析：從圖像生成到科學研究

Stable Diffusion 有哪些主要功能？本文整理圖像生成、圖像修復與編輯（ADetailer）、多模態應用、動畫與遊戲開發、醫學與自然科學研究等應用場景，並附官方網站、Civitai 開源社群與 SVD 模型下載資源，幫你快速掌握這套開源文生圖模型的完整用途。

· 生成式AI

Dify 開源大語言模型應用開發平台完整介紹

介紹 Dify 開源 LLM 應用開發平台的核心功能：對話式 AI 設計、提示詞工程、RAG 知識庫管理、API 整合與四大模型類型，並比較 Dify 與 LangChain 的差異、說明開源授權與企業應用場景，幫助開發者和企業快速打造生產級生成式 AI 應用。

· 生成式AI

EchoMimic – 人物圖片轉影片的開源模型

EchoMimic 是一款將人物圖片轉換為逼真說話影片的開源 AI 模型。本文介紹它的肖像動畫原理、音頻驅動面部關鍵點的工作流程，並附上 CUDA、PyTorch、Conda 與 FFmpeg 的完整安裝教學，幫助你在本機 GPU 環境快速跑出第一支人物說話影片。

· 生成式AI

圖形資料庫的概念入門

從 ACID、NoSQL 演進談起，說明圖形資料庫如何用節點與邊儲存關聯資料並提升查詢效率

· 後端開發

Neo4j 圖形資料庫介紹

介紹 Neo4j 如何用 graph database 模型儲存節點與關係，並用 Cypher 查詢社交圖譜、企業關係與詐欺偵測場景。

· 後端開發

RAGFlow深度文檔理解的新境界

深入介紹開源 RAG 引擎 RAGFlow：深度文檔理解、layout recognize 解析設定、知識庫管理與多路召回查詢。分享實際安裝設定經驗，包含 Ollama 本地模型串接注意事項，幫助你打造更準確的 AI 問答系統。

· 生成式AI

使用Docker來運行Ollama

為什麼要使用Docker來運行Ollama？本文整理用Docker把Ollama變成API服務的完整做法：涵蓋CPU、NVIDIA GPU（NVIDIA Container Toolkit）與AMD GPU（rocm標籤）三種啟動方式，並說明負載平衡與多機分發等擴充性優勢，讓本地端LLM服務更容易部署與擴展。

· DevOps

用 Nmap 掃描某個 IP 所有可接受連接的 PORT

用 Nmap 掃描某個 IP 所有可接受連接的 PORT，這篇筆記整理 Nmap 網路掃描工具的介紹、使用目的、主要功能與常用指令，包含埠掃描、服務檢測、作業系統偵測與 NSE 腳本，幫你快速掌握網路安全審計與 Port 掃描的基本操作。

· DevOps

使用LlamaIndex載入多種類文件

完整整理 LlamaIndex 載入多種類文件的方法：從舊版 download_loader 載入 PDF、YouTube 字幕，到官方新推薦的 SimpleDirectoryReader 寫法，以及 ImageCaptionReader 等自訂 file_extractor 解析圖片的實作範例與 GPU 版 Pytorch 注意事項。

· 生成式AI

在 LlamaIndex 中使用索引（Index）：五種索引類型與使用時機

在 LlamaIndex 中，索引（Index）是組織與儲存文件節點（Node）的資料結構。本文介紹 List Index、Vector Store Index、Tree Index、Keyword Table Index 與 Knowledge Graph Index 五種索引類型的原理、查詢方式與使用時機，幫助你在 RAG 專案中選對索引。

· 機器學習

機器學習的效能衡量指標

完整解析機器學習分類模型的效能衡量指標：混淆矩陣、Accuracy、Precision、Recall、F1-score、Precision-Recall 曲線與 ISO-F1 曲線的定義、公式與適用情境，幫你選對評估指標、正確解讀模型表現。

· 機器學習

LangChain 基礎鏈介紹：LLMChain、SequentialChain 與 TransformChain 怎麼用？

LangChain 是用大型語言模型（LLM）打造應用程式的框架，基礎鏈（Chains）是它的模組化構建塊。本文整理 LangChain 的核心概念，比較 LLMChain 單鏈、SequentialChain 循序鏈與 TransformChain 轉換鏈的用途、運作方式與實際應用場景，並附官方文件與教學資源連結。

· 生成式AI

基於神經網路的語言模型：從 RNN、T5 到 LLM 的演進與微調

深度解析基於神經網路的語言模型（Neural Network Language Model）如何透過 RNN 與 Transformer 學習預測下一個詞彙、利用詞彙向量克服稀疏性，並整理 T5 序列對序列架構的限制、LLM 的上下文學習、遵循指示與逐步推理三大能力，以及 GPT 模型微調流程。

· 機器學習

ChatGPT / Bing / Bard / Claude指南

整理 ChatGPT、Bing、Bard、Claude 四大生成式 AI 的入門指南：從人工智慧演進、基礎模型革命、文本到程式碼生成的應用，到五款模型的多模態能力與費用比較表。

· 生成式AI

OBS Studio 啟動參數教學：自動開始直播、錄影與便攜模式設定

整理 OBS Studio 官方支援的啟動參數（Launch Parameters），包括 --startstreaming 自動開始直播、--startrecording 自動錄影、--profile 指定配置檔、--multi 多開、--safe-mode 安全模式等完整清單，並說明如何在 Windows 捷徑或排程任務中正確加上啟動參數與工作目錄。

· DevOps

JavaScript H.264 解碼器介紹 – Broadway

Broadway 是一個純 JavaScript 的 H.264 解碼器，能在瀏覽器中直接解碼 H.264 視訊，不必安裝插件。本文介紹 Broadway 的主要特點、線上 Demo，以及如何在本地 Node.js 專案用 Express 架起可實際播放的 H.264 解碼範例。

· 前端開發

Transformer 模型於機器視覺的應用

整理 Transformer 在電腦視覺中的應用，包括視覺基礎模型、影像分類、物件偵測、語意分割、多模態感知與計算效率挑戰。

· 機器學習

TensorFlow 2 Object Detection API 安裝教學與常見錯誤排解

在 Windows 環境安裝 TensorFlow 2 Object Detection API 的完整筆記：安裝 protobuf 編譯器、用 conda 建立 Python 3.7 環境解決 opencv-python wheel 建置失敗，以及 DLL 載入錯誤與 setup.cfg 棄用警告的解法。

· 機器學習

計算兩個點之間的直線距離

想知道兩個座標點之間的直線距離怎麼算？我用 Python 內建的 math.hypot 與 NumPy 的 np.sqrt 兩種方法，示範如何用歐幾里得距離公式計算二維平面上兩點的直線距離，附完整程式碼範例與常見問題整理。

· 機器學習

OpenCV 如何將歪斜圖形轉正

說明 OpenCV rotate、flip、fitEllipse、warpAffine 與 getRotationMatrix2D 的差異，並示範如何依輪廓角度轉正物件。

· 機器學習

Chunked Encoding 分塊編碼介紹與 Nginx 設定教學

說明 HTTP/1.1 Chunked Encoding 分塊編碼（分塊傳輸）的運作原理與優點，包括 Transfer-Encoding: chunked 的使用時機，並示範如何在 Nginx 反向代理設定中開啟 chunked_transfer_encoding，以及如何用開發者工具驗證回應是否啟用分塊傳輸。

· 後端開發

在AWS的EC2裡加上SSL/TSL

在 AWS EC2 自架 Linux 伺服器時如何加上 SSL/TLS 憑證？本文說明 SSL/TLS 原理、為什麼需要 ACM 免費憑證、Route 53 託管網域與 Elastic Load Balancing 的設定要點。

· DevOps

如何查詢 Prometheus 某個 POD 內所有的指標值？

想查看 Prometheus 中某個 POD 內所有的指標值嗎？本文分享一條 sum by(__name__) 查詢語句，搭配 namespace 與 pod 標籤選擇器，快速列出該 POD 的所有 metrics，並進一步設定 ServiceMonitor 讓 Prometheus Operator 監控正確的監控目標。

· DevOps

分水嶺演算法：偵測相連區域形狀

用 OpenCV 的距離變換（distanceTransform）加上分水嶺演算法（watershed），分割影像中黏在一起的長方形區域，並用擬合橢圓判斷每個連通元件是否為矩形。完整 Python 範例程式碼與步驟解說。

· 機器學習

使用 OBS 推流 H.265：v29 後的 HEVC over RTMP 設定筆記

OBS 從 v29 開始支援 HEVC 推流，可以透過 RTMP 封裝推送 H.265 編碼的串流。這篇筆記整理編碼器下拉選單的差異、無 GPU 時的 QuickSync HEVC CPU 編碼方案，以及錄製 SVT-AV1、AOM-AV1 與 HEVC 格式的設定重點。

· 後端開發

梯度下降法介紹：一階最佳化算法如何找到局部極小值？

梯度下降法（Gradient Descent）是機器學習與深度學習最核心的最佳化算法。本文用第一人稱筆記整理梯度下降的原理、負梯度方向疊代搜尋、偏導數與向量運算，並說明深度神經網路常見的梯度消失問題，以及殘差網路（ResNet）如何解決，適合想搞懂模型訓練數學基礎的入門者。

· 機器學習

二元分類器 (binary classification) 介紹

二元分類器是機器學習最常見的分類任務之一。本文介紹二元分類的定義、與多元分類在損失函數與激活函數上的差異、Keras 實作方式，以及優缺點比較，幫助你選對分類模型。

· 機器學習

如何從預先訓練的模型中提取特徵

從預訓練模型（如 ResNet50、VGG16）中提取特徵是遷移學習的核心技術。本文以 ImageNet 圖像分類為例，說明特徵提取的原理、為什麼要固定前面層、以及五個實作步驟，讓小資料集也能訓練出好模型。

· 機器學習

TensorFlow 開發者認證計劃介紹

TensorFlow 開發者認證計劃（TensorFlow Developer Certificate）介紹：考試內容、報名方式、測驗環境與開發技能清單整理，評估這張深度學習證照是否值得考取。

· 機器學習

在 K8S 內 Node.js 紀錄 log 的解決方案

在 Kubernetes 內跑 Node.js 時 log 該怎麼記？本文整理 PM2 與 K8S 機制衝突的問題、stdout 導出由 kubelet 收集、寫檔掛載 volume、送到 ELK 等方案優缺點，附 log4js 每日分檔範例，幫你選擇適合 K8S 環境的 Node.js 日誌方案。

· DevOps

讓 OpenCV 支持 GPU

OpenCV 支援 GPU 加速嗎？本文整理 OpenCV CUDA 模組的官方說明與設計目標，說明 pip 安裝版本為什麼不含 CUDA、cv2.UMat 怎麼把影像載入 GPU，以及自行用 CMake 編譯 WITH_CUDA 的 OpenCV GPU 版本需要哪些套件與安裝步驟。

· 機器學習

在 Python 裡面使用 GPU（一）：選擇適合的 GPU

在 Python 裡使用 GPU 前要先選對顯示卡。本篇整理 NVIDIA GPU 的 CUDA 支援查詢方式、深度學習訓練的顯示卡等級與 VRAM 記憶體需求，幫你判斷跑 TensorFlow 或 PyTorch 該準備哪張 GPU。

· 機器學習

在 Python 裡面使用 GPU 3 – 開發 GPU 程式

開發 Python GPU 程式的完整指南：比較 GPU 與 CPU 運算差異，用 TensorFlow tf.device 指定裝置、管理 GPU 記憶體、避免資料在 CPU 與 GPU 間頻繁轉換，並用 tf.distribute.Strategy 實現多 GPU 訓練加速。

· 機器學習

了解 Python 載入模組的位置與搜尋路徑

查出 Python import 實際從哪些路徑載入模組：python -m site、sys.path、site.getsitepackages()，以及用 PYTHONPATH、.pth 檔與 python39._pth 自行增加模組搜尋路徑的三種方法。

· 後端開發

深度學習模型-MLP、CNN與 RNN

一次搞懂三大深度學習模型：MLP 多層感知器、CNN 卷積神經網路與 RNN 循環神經網路的差異、輸入資料維度、Keras Dense 層與 relu 觸發函數、dropout 正規化，以及輸出層觸發函數的選擇。

· 機器學習

卷積層（Conv2D）參數設定教學

Keras Conv2D 卷積層參數怎麼設定？整理 filters、kernel_size、strides、padding、activation 等參數的意義，以及輸出特徵圖尺寸與參數量的計算方式，搭配範例說明。

· 機器學習

使用 OpenCV 找出圖片中的紅色區塊

用 OpenCV 找出圖片中的紅色區塊：透過 BGR 轉 HSV 色域、inRange 建立紅色遮罩，再用 findContours 輪廓找出目標位置與中心點。附完整 Python 範例程式碼與 HSV 參數調整心得。

· 機器學習

OpenCV 影像運算：侵蝕、膨脹與形態學操作

OpenCV 形態學操作完整筆記： cv2.erode 侵蝕、cv2.dilate 膨脹、MORPH_OPEN 開運算去噪、MORPH_CLOSE 閉運算補洞，以及形態梯度、Top Hat 與 Black Hat 的原理、Python 範例程式碼與效果對照圖一次整理。

· 機器學習

把 Prometheus 的資料打到 ELK

想把 Prometheus 的指標資料送進 ELK？這篇 DevOps 筆記用 Metricbeat 的 prometheus 模組定期執行 PromQL 查詢，把結果送到 Logstash 與 ELK，含 Docker 映像檔下載與 metricbeat.yml、prometheus.yml 設定範例。

· DevOps

K8S裡CPU和MEMORY的計算單位

在 Kubernetes 中限制 Pod 資源或設定 HPA 前，必須先看懂 kubectl top 顯示的 CPU(m) 與 Memory(Mi) 單位。本文完整解析 1000m=1 vCore、Mi 與 MB 換算等 K8s 資源計算單位。

· DevOps

LeetCode Coin Change：用動態規劃找出最少硬幣組合

以 JavaScript 實作 LeetCode 322 Coin Change 最少硬幣數動態規劃解法，說明如何用 DP 陣列由小金額逐項推導到目標金額，記錄從 32.59% 效能優化到 72.28% 的過程與思路轉換，適合想入門動態規劃與演算法刷題的讀者。

· 後端開發

LBP 區域二值模式：原理與 scikit-image 實作踩坑記

介紹 LBP（Local Binary Pattern）區域二值模式在影像特徵萃取與 OCR 場景的應用，並記錄使用 scikit-image local_binary_pattern 時輸出變成 0 和 1 二值陣列的踩坑經驗，附上原始 LBP 演算法的 Python 實作程式碼。

· 機器學習

串流的網路概念：FFmpeg、WebRTC 與 SRT 在 OSI 模型中的定位

串流的網路概念整理：從 FFmpeg 在 OSI 模型的定位、HTTP 與 WebSocket 的握手差異，到 WebRTC 的 RTP、STUN/TURN/ICE 協定架構，以及 SRT 如何在 UDP 上實現可靠又低延遲的視訊串流傳輸，幫你建立即時影音串流服務架構設計所需的網路基礎觀念，是串流工程入門的第一課。

· 後端開發

網路概念模型：OSI 七層與 TCP/IP 四層完整對照

網路概念模型介紹：從 OSI 七層與 TCP/IP 四層模型入手，說明各層負責的協定（HTTP、TCP、UDP、IP 等）與資料如何層層封裝傳遞到對端再拆解，建立排查網路連線與除錯問題時的分層思考框架，是後端與維運工程的基礎知識。

· 後端開發

從零架設直播伺服器

從零架設直播伺服器的完整思路：RTMP 推流、nginx-rtmp 與 SRS 串流媒體伺服器、HLS 與 WebRTC 播放協定取捨，到 OBS 實測與效能調校的實戰筆記。

· 後端開發

docker pull failed to register layer 錯誤怎麼解？

整理 docker pull 出現 failed to register layer、directory not empty 時的原因與處理順序，保留 Docker 1.10 與 Docker Machine 0.6 的錯誤範例，並補上清理 image、重啟 Docker 引擎與刪除工作目錄前的注意事項。

· DevOps

Docker 初探：安裝、常用指令與容器管理入門筆記

Docker 新手入門怎麼開始？我整理在 CentOS 7 安裝 Docker 的步驟，以及 docker pull、run、exec、ps、rm、rmi 等容器與映象檔常用指令，加上掛載 volume、docker build、entrypoint、ENV、HEALTHCHECK 與常見報錯的實戰筆記。

· DevOps

影音服務介紹：點播、直播、錄播的差異與直播串流原理

影音服務可分為 VOD 點播、直播與錄播三大類。這篇影音串流介紹以直播為主軸，完整拆解從採集、編碼封裝、推流、串流伺服器、拉流到解碼播放的直播串流流程，並整理 RTMP、HTTP-FLV、HLS 三大傳輸協定的延遲與瀏覽器支援比較，幫助你在架設直播串流服務時選對協定。

· 後端開發

Engine.io 介紹

Engine.IO 是 Socket.IO 的底層即時通訊引擎，負責 WebSocket 與 polling 的傳輸升級機制。本文介紹 Engine.IO 的架構、握手流程、封包格式與和 Socket.IO 的關係。

· 後端開發

利用 netstat 查詢連線數量（connections）

netstat 常用參數完整整理：列出所有連接埠、只看 TCP/UDP、加速查詢的 -n、查看路由表、grep 過濾 ESTABLISHED 連線，以及用 wc -l 統計總連線數的實用指令筆記。

· DevOps

TCP連線階段與TIME_WAIT意義

TCP協定分為連接建立、資料傳送、連接終止三個階段。完整解析 three-way handshake 與 four-way handshake、TCP 狀態碼（LISTEN、ESTABLISHED、TIME_WAIT 等），以及伺服器出現大量 TIME_WAIT 連線的原因與解法。

· 後端開發

用 Charles 以本地或遠端內容取代網路回應

用 Charles 的 Rewrite 或 Map Local 功能，把本地檔案或改寫規則取代遠端伺服器的網路回應，不用等後端改版就能測前端。本文整理 Map Remote、Map Local 與 Rewrite 的設定步驟。

· 後端開發

WebSocket 與 Ajax 的不同

WebSocket 與 Ajax 的差異比較：WebSocket 是 HTML5 在單一 TCP 連線上提供全雙工通訊的協議，只需一次握手即可建立持久連線並讓伺服器主動推送資料；Ajax 輪詢則須由瀏覽器定時發送 HTTP 請求，重複的 header 浪費頻寬。本文整理兩者差異與 readyState 等屬性。

· 後端開發

使用 Charles抓取手機網路使用

學習如何用 Charles Proxy 抓取手機的網路流量：將電腦與手機連上同一個 Wi-Fi、取得電腦內網 IP、設定 Charles 的 Proxy settings 與手機 Wi-Fi 代理，即可在電腦上即時檢視手機的 HTTP/HTTPS 請求，是 App 與前端除錯的必備網路除錯技巧。

· 後端開發

好用的 API 測試工具 POSTMAN

Postman API 測試工具完整介紹：模擬 GET/POST/PUT/DELETE 請求、帳號同步、Header 與變數設定、Pre-request Scripts 到自動化 API 測試與文件產出。

· 後端開發

使用VSCode繪製UML文件

用 VSCode 的 PlantUML 外掛，就能以純文字描述直接產生循序圖、類圖、活動圖等 UML 圖表。本文介紹 PlantUML 支援的模型類型、安裝步驟與學習資源，讓文件圖表也能納入版本控制。

· 後端開發

Linux 檢查硬碟使用量：df 指令完整教學

用 df 指令檢查 Linux 硬碟使用量：查詢各分割區磁碟空間、以 -h 顯示人類可讀單位、用 -l 只看本機磁碟，附實際輸出截圖與常見問題整理。

· DevOps

查看某個 Linux 裡服務的狀態

想知道 Linux 伺服器上某個服務或程序是否正常運作？本文整理 ps、ps aux、grep 過濾與 service status 等常用指令，搭配實際終端機截圖，快速查看 Linux 服務與程序的運行狀態。

· DevOps

Hard Link 與 Symbolic Link 的比較

一篇搞懂 Linux 硬連結（Hard Link）與軟連結（Symbolic Link）的差異：i-node 原理、能否跨檔案系統、能否連結目錄、刪除原始檔後的行為，以及 ln 與 ln -s 指令的實際用法範例。

· DevOps

Linux 管理 Service 的指令：systemctl 完整用法與範例

整理 Linux 系統服務管理指令 systemctl 的完整用法：systemctl start、stop、restart、reload、enable、disable、status、is-active、is-enabled 與 list-units 等指令語法與 atd 服務實際範例，取代傳統 service 與 chkconfig，一篇搞懂 Systemd 時代的服務管理。

· DevOps

Linux 目錄刪除教學：rm 與 rmdir 指令用法整理

Linux 刪除目錄與檔案怎麼做？整理 rmdir 與 rm 指令的差異、rm -rf 遞迴強制刪除的用法與 -i -d -f 等參數說明，並附刪除資料夾與檔案的實例指令，幫你避免誤刪檔案，安全管理 Linux 檔案系統。

· DevOps

在 Linux 離線安裝 pm2 的完整步驟教學

伺服器沒有對外網路時怎麼裝 pm2？我在能連網的機器上打包 npm 全域目錄裡的 pm2，上傳到離線 Linux 伺服器解壓縮、npm build 後即可用 pm2 -v 驗證安裝成功。

· DevOps

Charles 介紹 – 好用的封包抓取工具

Charles 是在電腦上常用的網路封包截取工具，本文介紹 Charles 的收費方式、截取 HTTP/HTTPS 封包、重發網路請求、修改請求參數與模擬慢速網路等核心功能，是做手機 App 開發與網路除錯時必備的 Proxy 抓包工具入門筆記。

· 後端開發

Charles 介紹 - 好用的封包抓取工具

Charles 是好用的封包抓取工具（HTTP Proxy），可以攔截電腦與手機的網路請求，查看 Request 與 Response 內容。本文介紹 Charles 的原理、安裝設定與實際抓包用法。

· 後端開發

使用 Plink 快速在 Linux 伺服器下指令

示範如何用 PuTTY 內建的 Plink 工具，在 Windows 上一行指令自動 SSH 連線 Linux 伺服器並批次執行遠端命令，適合自動化部署前後自動執行指令的場景。

· DevOps

Linux切換使用者：su 與 sudo -u 指令完整教學

在 Linux 上切換使用者有兩種主要做法：su - 與 sudo -u。本文用實際終端機範例示範 su 切換使用者、exit 跳回、以及 sudo -u 以指定使用者執行指令，並說明兩者的差異與適用時機。

· DevOps

Linux 基本操作指令介紹

整理 Linux 最常用的檔案與目錄操作指令，包含 pwd、ls、rm、chmod 等指令的用法與注意事項。

· DevOps

vi 編輯器入門教學：三種模式與常用指令完整整理

在 Linux 伺服器上管理設定檔，vi 是一定要會的文字編輯器。這篇整理 vi 的三種操作模式（一般模式、編輯模式、指令列命令模式）與常用按鍵，包含游標移動、搜尋取代、複製、複製貼上、儲存離開等，幫你快速上手 vi 基本操作。

· DevOps

Linux 用 pm2 來管理伺服器

pm2 是 Node.js 最常用的 process 管理工具，本文整理 pm2 的安裝、目錄結構、啟動 cluster、刪除/停止/重啟 process 與 monit 監控等常用指令，幫你把 Linux 伺服器上的 Node.js 應用管理自動化。

· DevOps

在 Linux 與 Windows 間傳送檔案：PSCP 指令教學

在 Windows 與 Linux 之間互傳檔案，用 PuTTY 附屬的 PSCP 指令列工具就能透過 SSH 加密安全完成。本文整理 PSCP 的下載安裝、從 Linux 下載檔案與資料夾到 Windows、從 Windows 上傳檔案到 Linux 的指令範例，並比較 PSCP 與 PSFTP 的選擇建議。

· DevOps

PixiJS devtools：用 Chrome 擴充功能除錯 Canvas 遊戲場景與屬性

PixiJS 的繪圖元件都畫在 Canvas 裡，用一般 Chrome 開發者工具看不到 DOM，除錯相對困難。我介紹 PixiJS devtools 這個 Chrome 擴充功能：安裝後可檢視場景上的元件樹與屬性、框選元件位置、動態調整 x、y、visible 等數值，讓網頁遊戲的對位與除錯所見即所得。

· 前端開發

PixiJS 連連看遊戲開始、結束與過關畫面教學

PixiJS 連連看遊戲開始、結束與過關畫面教學，說明如何用 PIXI.Text、Container、Graphics 與 EventEmitter 製作 GameRoundEnd 覆蓋層，並在過關、逾時、無路可走時顯示不同結果與 New Game 按鈕。

· 前端開發

連連看演算法介紹：時間複雜度、圖形資料結構與 BFS/DFS 搜尋

從連連看遊戲設計角度介紹演算法、時間複雜度、空間複雜度、圖形資料結構，整理 BFS、DFS 如何用在兩點消除、最短路徑、兩次轉彎限制與僵局判斷，並把棋盤儲存、合法路徑與重新洗牌拆成可實作的後端邏輯，適合作為完整的遊戲搜尋演算法入門技術筆記。

· 後端開發

單元測試 Code Coverage 的意義：看趨勢，不只看百分比

說明 Code Coverage 在單元測試中的真正用途：用 CI 自動跑測試、追蹤覆蓋率相對趨勢，優先補高投資報酬率的測試，並從未覆蓋程式碼找出缺漏情境與 Dead Code，適合想替既有後端專案導入單元測試、又不想只追求漂亮百分比的開發者。

· 後端開發

Angular NPM 與 package.json 設定教學

說明 Angular 專案為什麼需要 Node.js、npm、nvm 與 package.json，並整理 dependencies、devDependencies 與 Angular 5 常見套件用途。

· 前端開發

讓 IDE 支援 Angular Language Service

讓 IDE 支援 Angular Language Service，獲得 Angular 模板語法自動補完、錯誤檢查與程式碼跳轉。本文整理 VSCode、WebStorm、Sublime Text 三種編輯器的完整安裝步驟。

· 前端開發

IT 人的學習生存術：Study4 與大師對談精華筆記

2018 Study4 與大師對談研討會筆記：快速學習能力、資訊安全攻防流程、工具與知識的區分、DevOps 三步工作法與團隊軟實力，幫助 IT 人在快速變動的技術環境中持續成長。

· DevOps

Angular Pipes 完整介紹：內建管道用法與自訂 Pipe 教學

整理 Angular 內建 Pipes 清單與用法，包含 DatePipe、UpperCasePipe、CurrencyPipe 等，示範如何在模板中傳參數、串接多個管道，以及如何用 @Pipe 與 PipeTransform 定義自己的 Pipe，並說明 pure 與 impure pipes 的效能差異。

· 前端開發

如何用 Angular CLI 建立元件（Component）並完成資料綁定

用 Angular CLI 的 ng generate component 指令建立第一個 Angular 元件，認識 @Component 的 selector、templateUrl、styleUrls 三個 metadata，再學會顯示變數、使用物件、Pipes 格式化與 [(ngModel)] 雙向繫結，完成主從元件的基礎開發。

· 前端開發

Starling 簡報分享：Stage3D 與 GPU 加速的 Flash 3D 渲染入門

分享我的 Starling 簡報重點：Starling 基於 Stage3D 技術，用 GPU 做圖形運算讓 Flash 效能大幅提升，並整理 3D 坐標系統、正交與透視投影、VertexShader 與 FragmentShader 的渲染流程，以及過去主要的 3D 技術比較。

· 前端開發

產生TextureAtlas素材的方式

介紹用 TexturePacker 或 Flash CC 兩種方式產生 Starling/Sprite Sheet 用的 TextureAtlas 素材。

· 前端開發

Starling Framework簡介

Starling是基於Stage3D的2D渲染框架，用GPU三角形繪圖模擬2D畫面，本文說明其運作原理與基本範例

· 前端開發

[GGJ-2014] 活動參與心得

第一次參加 Global Game Jam 2014 的活動心得：48 小時做遊戲，重新看見遊戲開發社群、團隊協作與台灣遊戲產業的熱情。

· 前端開發

GDC 2013 馬場英雄談遊戲新體驗與故事性設計

整理 GDC 2013《時空幻境》製作人馬場英雄的演講筆記：遊戲的主題與信息、Tales 系列線性動作戰鬥系統如何兼顧輕重度玩家，以及故事性如何傳達思想與帶給玩家成長。

· 前端開發

製作一個全球熱銷的遊戲

手機遊戲要打進全球市場，該從文化選題、團隊組成、獲利設計到在地化怎麼下手？GDC 講者的第一手筆記

· 前端開發

iOS 6 與 iOS 7 的不同處整理

整理 iOS 6 升級到 iOS 7 後，狀態列、導覽列、tab bar、tintColor 與生命週期的實際差異。

· 前端開發

iOS 元件介紹：欄、視圖與控制元件完整整理

整理 iOS 應用程式常用的介面元件，包括狀態欄、導覽欄、工具欄、標籤欄、表格視圖、文字視圖、Web 視圖，以及活動指示器、日期時間選擇器、滑塊等控制元件的用途與使用時機。

· 前端開發

iOS 切換 ViewController 會用到的函數整理

整理 iOS 切換 UIViewController 的常用函數：有 NavigationController 時的 pushViewController 與 presentModalViewController 兩種做法，以及取得子、父 ViewController 的 presentedViewController 與 presentingViewController 用法，附 Objective-C 範例程式碼。

· 前端開發

利用 Ant 構建和部署 Java 專案

用 Ant 取代 javac、java、jar 等手動命令，從編譯、執行到打包 jar 與 war 完整自動化 Java 專案的構建與部署流程，附上可直接使用的 build.xml 範例。

· DevOps

初探OSMF的Plug-in開發

整理OSMF官方Plugin開發指南重點：PluginInfo建立方式、靜態與動態載入、三種Plug-in類型的差異

· 前端開發

OSMF 簡介：用開源框架建置多媒體播放器

OSMF（Open Source Media Framework）是一套開源免費的 ActionScript 框架，用來建置多媒體播放器。本文介紹 OSMF 的插件（plug-in）架構、動態與靜態載入、宣告式設計，以及 MediaFactory 如何整合第三方功能，幫你降低播放器開發成本。

· 前端開發

OSMF相關資源整理

整理我當年學習OSMF（Open Source Media Framework）時收集的中文與英文資源：入門教學、官方開發指南、簡報投影片與自訂影音播放器教材，給需要開發Flash影音播放器的你一份快速索引。

· 前端開發

沒有銀彈 – 軟體工程的本質性與附屬性工作

沒有銀彈是軟體工程最經典的命題：我在讀《人月神話》時整理了軟體開發的本質性困難——複雜性、配合性、易變性、隱匿性，以及高階語言、分時技術、物件導向、專家系統等十一項附屬性突破，說明為什麼軟體時程延誤與重大錯誤沒有速效解藥。

· DevOps

Flash 內使用點陣圖（BitmapData）與背景著色函數

在 Flash ActionScript 2.0 中使用 flash.display.BitmapData 載入點陣圖，用 attachBitmap 顯示，並以 beginBitmapFill 撰寫可將元件背景填滿點陣圖的著色函數，類似網頁 background 的效果。

· 前端開發

Flash 內使用點陣圖：BitmapData 載入與背景著色完整教學

在 Flash（ActionScript 2.0）內使用點陣圖，需要 import flash.display.BitmapData 類別。本文說明如何用 BitmapData.loadBitmap 載入元件庫中的點陣圖、attachBitmap 的參數意義，並分享我自己撰寫的背景著色函數，可像網頁 background 一樣把元件背景填滿點陣圖。

· 前端開發

Flex如何讓圖片不等比縮放？

Flex中讓圖片不等比縮放的設定筆記：Flex3用scaleContent與maintainAspectRatio兩個屬性，Flex4改用scaleMode="stretch"，一文搞懂兩代的差異與寫法。

· 前端開發