Development

Surviving the AI Tide: Insights from NTU Web Programming

前言 / Introduction Hmm… 許久未動筆，最近軟體開發這片海被 Opus 掀起了大浪，現今，許多不具備無開發背景的使用者，僅憑 AI 就能將想法轉成一個完整個 APP / Web 等應用。面對如此激進的環境，該如何與 AI 共存？比起當個無頭蒼蠅，我推薦大家可以參考這門課： NTU Web Programming (2025.09) 授課老師：台大電機系黃鐘揚教授 Youtube: NTU Web Programming 2025 課程心得這門課的核心並非將你打造成頂尖大神，而是透過啟發與引導，教會你如何與 AI 進行高效的「協同開發」。在 AI 浪潮氾濫的時代，開發者必須學會自救，才不至於被淹沒：背景知識 (Background Knowledge) —— 你的「游泳圈」背景知識的紮實程度，決定了你指揮 AI 的速度。一個擁有前端框架經驗的工程師，因為熟悉底層邏輯與現成函式庫，當別人在用 AI 緩慢地「造輪子」時，他的 AI 已經在跑道上疾速奔馳了。執行決策 (Decision Making) —— 你的「生存指南」開發過程中，判斷優先權（P0/P1）與具備宏觀視角至關重要。在多人協作的場景下，如何界定 AI 開發的顆粒度、預留系統兼容性、並在適當時機止損，皆仰賴開發者的工程思維。這兩點正是「善用 AI」與「被 AI 牽著走」的最大分水嶺。此外還有想像力（需求的轉化）與品味（判斷價值），這些才是人的核心競爭力。結論值得花時間把黃教授的課看過一遍。從開發流程、各階段的溝通策略，到實際動手做專案，這門課能幫你快速補齊在 AI 時代所欠缺的開發者素養。

AI Agents, Changing Coding Habits, and a Bit of Engineer Anxiety

前言 / Introduction 聊聊發生的小事情：過去三個月，我已經不曾動手寫出完整一個功能。從 Cursor 剛出來還得靠 TDD、SDD 啥的輔助，到 MCP、Skill 大亂鬥，現在都雲淡風輕了。然後 OpenClaw 直接殺出一條血路，一個小小龍蝦揮舞著拳頭，大廠們都快嚇死，工程師的飯碗被盯上了。 My Coding Habits Have Truly Changed 還是挺懷念當年手刻程式碼的過程；現在只要跟 AI 聊聊天、甚至讓它自己想辦法，上個廁所回來就搞定了。少了親手 coding 的步驟，工程師好像就只剩下「畫押」的份——看似變輕鬆，其實更累，因為得花更多時間與精力去發掘更高的價值，畢竟老闆錢都花了。花時間在更高的抽象層，本來就是工程師該負責的，只是以前被雜事塞滿，很多事只能遷就。現在這些可以交給 AI Agent，我們才有時間坐下來討論與設計。 Review is More Important Than Ever 當這些瑣事都交給 AI 後，工程師就可以躺平了嗎？實際上不行。AI 產物還是要有人 review。我常遇到它寫了四、五十行，實作上兩三行就能搞定。不是說 AI 爛，而是當你有更高維度的視角，能看見更多、想得更深，review 就變得必要。就像每個 PR Review 都是在互相建立信心、讓同事了解你在意什麼；現在換成你和 AI 的來回過程。 Summary 沒什麼大道理，就是：試著用、試著想，可能才是正解。 AI 接下來大概還會再洗牌一次，沒人知道是年底還是下個月，說不定明早睜開眼，世界就不一樣了。

Slidev + Cursor: Turning Slides into a Conversation with AI

前言 / Introduction Making technical slides used to feel heavier than writing code. 大部分工程師或許跟我一樣，都被做簡報這件事所困。傳統的簡報工具像是 PowerPoint 或 Keynote，對我們來說總有種格格不入的感覺：需要使用滑鼠點擊、調整格式，這些操作中斷我們的習慣流程。直到我開始用 Slidev，再搭配 Cursor，整個人感覺都對了。Slidev 讓簡報變成 Markdown 檔案，而 Cursor 讓 AI 成為你的簡報夥伴。這個組合不僅解決了工具使用的問題，更重要的是改變了製作簡報的思維方式。 Slidev: Slides as Markdown Slidev treats slides as a Markdown document. 軟體開發最常被用於紀錄文檔的語法，想當然就是 Markdown，整體使用的概念也很簡單: Slide order is file structure Code blocks work naturally Git handles version control 對工程師來說，幾乎沒有學習成本。 Traditional Tools vs Slidev Let’s compare the workflow differences: Aspect Traditional Tools (PowerPoint/Keynote) Slidev 操作方式 Click to add slides, drag to reorder Edit text to add or reorder slides 格式化 Formatting requires GUI interactions Formatting is just Markdown syntax 版本控制 Save as different files It’s a text file — Git works perfectly 代碼塊 Copy-paste and hope formatting works Native Markdown support with syntax highlighting 協作 Share files back and forth Merge requests, code reviews, just like code The difference isn’t just about tools — it’s about thinking in text, not slides. ...

Boost Your Hugo Blog with Automated Open Graph Images

前言 / Introduction 突然想讓自己的文章在分享的時候更酷炫，那就試試看 Open Graph (OG) 圖片，可以讓你的連結在 Discord、Twitter、LinkedIn 等平台上顯示精美的預覽卡片。本文將教你：/ What you’ll learn: 設計 OG 圖片模板 / Design OG image templates 用 Playwright 自動生成圖片 / Auto-generate images with Playwright 整合 GitHub Actions / Integrate with GitHub Actions 自動化部署到 Cloudflare Pages / Deploy to Cloudflare Pages Step 1: Design an HTML Template 建立 og-template/template.html 作為 OG 圖片模板。標準 OG 圖片尺寸為 1200x630px。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> body { width: 1200px; height: 630px; margin: 0; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-family: 'Inter', -apple-system, sans-serif; color: white; text-align: center; padding: 60px; } h1 { font-size: 80px; font-weight: 800; margin: 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } </style> </head> <body> <h1>{{TITLE}}</h1> </body> </html> Tips: ...

Boost Your AI Coding Flow with Git Worktree

前言 / Introduction 為什麼需要 git worktree？在現代軟體開發中，我們經常面臨這樣的困境：多個功能同時開發：主線功能、實驗性功能、緊急修復 AI 輔助開發：AI 生成的程式碼需要測試，但不想污染主分支分支切換困擾：頻繁的 git checkout 容易忘記當前狀態 Stash 堆積：臨時程式碼越來越多，難以管理 Git Worktree 就是為了解決這些問題而生。它允許你在同一個 repository 中創建多個工作目錄，每個目錄對應不同的分支，讓你可以同時進行多個開發任務。 git worktree 核心概念什麼是 Worktree？ git worktree 是 Git 2.5+ 引入的功能，它允許你：在同一個 repository 中創建多個工作目錄每個工作目錄可以切換到不同的分支所有工作目錄共享同一個 .git 目錄可以同時編輯、測試、提交不同分支的程式碼與其他 Git 功能的比較功能用途優點缺點 Commit 永久記錄程式碼版本追蹤完整不適合半成品 Stash 臨時暫存變更快速切換分支容易堆積、遺忘 Branch 功能分支開發版本控制完整需要頻繁切換 Worktree 平行工作目錄同時開發多分支需要更多磁碟空間實戰教學：從零開始使用 Worktree 1. 基本操作創建新的 Worktree # 基本語法 git worktree add <path> <branch-name> # 實際範例：創建一個新的 Worktree 來開發 AI 功能 git worktree add ../myapp-ai-feature ai-feature # 如果分支不存在，使用 -b 參數創建 git worktree add -b experimental-feature ../myapp-experimental experimental-feature 查看所有 Worktree # 列出所有 Worktree git worktree list # 輸出範例： # /home/user/myapp main [main] # /home/user/myapp-ai-feature ai-feature [ai-feature] # /home/user/myapp-experimental experimental-feature [experimental-feature] 刪除 Worktree # 刪除 Worktree（會同時刪除對應的分支） git worktree remove ../myapp-ai-feature # 強制刪除（即使有未提交的變更） git worktree remove --force ../myapp-ai-feature # 只刪除 Worktree，保留分支 git worktree remove --keep-branch ../myapp-ai-feature 2. 進階用法創建臨時 Worktree # 創建臨時 Worktree，用完自動清理 git worktree add --detach ../temp-Worktree HEAD # 或者指定特定 commit git worktree add --detach ../temp-Worktree abc1234 移動 Worktree # 移動 Worktree 到新位置 git worktree move ../myapp-ai-feature /new/path/ai-feature # 移動後記得更新 IDE 的專案路徑 AI 開發場景的最佳實踐場景一：AI 程式碼實驗當 AI 生成多個解決方案時，使用 Worktree 可以同時測試： ...