前言 / 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 時代所欠缺的開發者素養。
前言 / 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 接下來大概還會再洗牌一次，沒人知道是年底還是下個月，說不定明早睜開眼，世界就不一樣了。
北海道，一段放空的旅程 從北海道回來後，現在才有一點餘裕把這趟旅程整理起來。 1. 出發前，我其實沒想太多 工作大概快滿一年了，其實一直處於緊繃的工作狀態，也沒想過其他事情。 直到被朋友慫恿的當下，一氣之下訂好了機票。 12/13 ~ 12/19 Hokkaido Sapporo, Otaru, Asahikawa 2. 在北海道，時間走得比較慢 可能是初見雪的感動，周遭時間彷彿放慢了。 藍調時分的浪漫，讓人總忍不住停下腳步，仰望那靜謐深邃的天空。 3. 有幾個瞬間，我其實有點被打到 這趟旅程幾乎都是自由行，更能按照自己的步調探索。深夜時分獨自漫步至神社，旅途因而多了一抹神秘的色彩，彷彿替回憶加上了難以言喻的 DLC。 KingBear 湯咖哩——每一樣食材都能感受到主廚的用心與細膩。這間小店原本並不在行程內，只是旅途中的即興決定，卻意外帶來一份驚喜。 4. 回來之後 開始想念雪花輕撫臉龐的那份柔軟，即使在零下十度的寒夜裡，卻有著沁入心脾的舒暢，當下的煩惱也隨之融化。 5. 留給未來的自己 這趟旅程，是我人生第二次出國，也是工作後的第一次遠行。走出熟悉的生活圈，更加確信這世界還有那麼多地方等著我去探索、體驗與感受。
前言 / 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. ...
前言 / 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: ...