前端部署工程師 FDE · 15 年以上經驗 · 技術筆記與產品落地https://harryfan.github.io/https://harryfan.github.io/blog/2024-03-01-frontend-beginner-guide/https://harryfan.github.io/blog/2024-03-01-frontend-beginner-guide/想從事前端開發，該掌握哪些技術與工具？從 HTML / CSS / JavaScript 三寶，到編輯器、Git、框架、自動化工具，再到學習路徑與職涯規劃，一篇條列整理給入門者。Fri, 01 Mar 2024 00:00:00 GMThttps://harryfan.github.io/blog/2024-11-14-2025-frontend-trends-ai/https://harryfan.github.io/blog/2024-11-14-2025-frontend-trends-ai/回顧 2024、展望 2025 的五大前端技術趨勢：AI 與開發深度融合、實時協同開發、低代碼/無代碼、可組合化 API（MACH 架構），以及經典框架面臨的挑戰。Thu, 14 Nov 2024 00:00:00 GMThttps://harryfan.github.io/blog/2024-06-02-designer-to-frontend-rwd/https://harryfan.github.io/blog/2024-06-02-designer-to-frontend-rwd/從平面跨到網頁，需要補哪些前端基礎？整理 HTML / CSS / JavaScript、前端框架、RWD 設計原則與常見 breakpoint，以及為什麼該用 Figma。Sun, 02 Jun 2024 00:00:00 GMThttps://harryfan.github.io/blog/2025-05-13-vue-spa-ga4-ads-tracking/https://harryfan.github.io/blog/2025-05-13-vue-spa-ga4-ads-tracking/業主問：為什麼 Google Ads 有點擊，GA 卻看不到，跳出率還 100%？問題出在 SPA 與 GA4 的相容性。分享一套模組化、支援 GA4 + Google Ads 的追蹤架構。Tue, 13 May 2025 00:00:00 GMThttps://harryfan.github.io/blog/2025-02-14-vue-remove-console-production/https://harryfan.github.io/blog/2025-02-14-vue-remove-console-production/正式環境留著 console.log 會洩漏邏輯、增加檔案大小。教你用 Webpack（Vue 2）與 esbuild（Vue 3 + Vite）在 build 時自動清掉 console。Fri, 14 Feb 2025 00:00:00 GMThttps://harryfan.github.io/blog/2025-05-19-vant-ui-traditional-chinese/https://harryfan.github.io/blog/2025-05-19-vant-ui-traditional-chinese/Vant UI 預設顯示簡體中文「确认」「取消」，身為台灣開發者總覺得怪。其實只要幾行 Locale 設定就能切成正體中文，還能客製化按鈕文字。Mon, 19 May 2025 00:00:00 GMThttps://harryfan.github.io/blog/2024-08-08-antd-vue-table-width/https://harryfan.github.io/blog/2024-08-08-antd-vue-table-width/Ant Design Vue 表格在視窗縮小後不會跟著縮回來，導致版面跑掉。其實只要把外層容器設 width:100% + overflow-x:auto 就解決了。Thu, 08 Aug 2024 00:00:00 GMThttps://harryfan.github.io/blog/2025-05-28-lottie-animation-tool/https://harryfan.github.io/blog/2025-05-28-lottie-animation-tool/探索 Lottie 動畫工具如何簡化網頁動畫開發，從設計到實現的完整指南Wed, 28 May 2025 00:00:00 GMThttps://harryfan.github.io/blog/2025-06-04-vue2-integer-only-input/https://harryfan.github.io/blog/2025-06-04-vue2-integer-only-input/管理系統常見需求：某些欄位只能填整數。與其新寫一個元件，不如在現有 editInput.vue 加個開關。分享我的 props 開關 + 驗證 + 即時提示做法。Wed, 04 Jun 2025 00:00:00 GMThttps://harryfan.github.io/blog/2025-06-12-ga4-frontend-optimization/https://harryfan.github.io/blog/2025-06-12-ga4-frontend-optimization/探索如何透過 GA4 資料追蹤與前端效能優化技術，讓您的網站跑得更快、更聰明，同時提升使用者體驗和轉換率。Thu, 12 Jun 2025 00:00:00 GMThttps://harryfan.github.io/blog/2025-07-31-frontend-workflow-prototype-to-code/https://harryfan.github.io/blog/2025-07-31-frontend-workflow-prototype-to-code/把「原型 → 需求 → 規劃 → 開發 → 測試」串成一條清楚的流程，並附上三組可直接用的 AI 提示詞模板（產 BDD 文件、設計系統規範、開發 TODO 清單），讓 AI 真正接得住你的需求。Thu, 31 Jul 2025 00:00:00 GMThttps://harryfan.github.io/blog/2024-12-04-vue-key-lodash-uniqueid/https://harryfan.github.io/blog/2024-12-04-vue-key-lodash-uniqueid/v-for 的 key 重複時，Vue 會跳 Duplicate keys detected，刪除項目後畫面還會亂動。用 Lodash 的 uniqueId 給每個元素一個真正唯一的 key 就解決了。Wed, 04 Dec 2024 00:00:00 GMThttps://harryfan.github.io/blog/2024-07-31-vue-router-scroll-position/https://harryfan.github.io/blog/2024-07-31-vue-router-scroll-position/從詳細頁返回首頁時，頁面總是跳到頂部，而不是回到原本的滾動位置。用 Vue Router 的 meta 保存 scroll position，再在首頁 onMounted 恢復就解決了。Wed, 31 Jul 2024 00:00:00 GMThttps://harryfan.github.io/blog/2025-10-23-express-to-nestjs/https://harryfan.github.io/blog/2025-10-23-express-to-nestjs/用 Express 開 API 一開始很爽，專案變大就變痛苦。換成 NestJS 後，那種模組化、controller / service 分離的結構，根本就是給前端工程師設計的後端框架。Thu, 23 Oct 2025 00:00:00 GMThttps://harryfan.github.io/blog/2026-03-19-ai-datadog-gcp-mongodb-seminar/https://harryfan.github.io/blog/2026-03-19-ai-datadog-gcp-mongodb-seminar/從可觀測性、資料平台到 Agentic AI 的實戰拼圖：三家廠商與 17LIVE 如何把 AI 應用「養大養穩」。Thu, 19 Mar 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-03-19-aws-mongodb-seminar-notes/https://harryfan.github.io/blog/2026-03-19-aws-mongodb-seminar-notes/從規格驅動開發到容器化與向量搜尋：把「凌晨三點電話」變少的實戰做法。Thu, 19 Mar 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-03-19-iwd-2026-notes/https://harryfan.github.io/blog/2026-03-19-iwd-2026-notes/從真實案例到職涯心法：不是「如何不被取代」，而是「我憑什麼不被取代」。Thu, 19 Mar 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-03-19-telegram-bot-gdg-build-with-ai/https://harryfan.github.io/blog/2026-03-19-telegram-bot-gdg-build-with-ai/從零到通：用 Gemini CLI＋MCP 打造自動摘要推播的 Telegram Bot，並把資安與成本控制編進工作流。Thu, 19 Mar 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-03-19-vben-admin-tree-report/https://harryfan.github.io/blog/2026-03-19-vben-admin-tree-report/從 API 改版到 AntDV Table 展開機制，再到大資料量效能：一篇把樹狀報表踩坑與優化全走完的實戰筆記。Thu, 19 Mar 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-05-20-frontend-to-backend-pick-nodejs/https://harryfan.github.io/blog/2026-05-20-frontend-to-backend-pick-nodejs/前端做久了難免會想「我是不是該碰點後端？」這不是焦慮，而是一種職涯癢。如果要跨足後端，身為前端出身，我真心建議首選 Node.js——原因沒別的，就是快。Wed, 20 May 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-05-28-static-images-to-cloudflare-r2/https://harryfan.github.io/blog/2026-05-28-static-images-to-cloudflare-r2/圖片塞在 src/assets，每次 deploy 都要連著幾 MB 的圖一起打包上傳——明明圖片根本沒動。選 R2 的理由只有一個：出口流量免費，CDN 還是內建的。Thu, 28 May 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-06-05-taiwan-public-icons-ai-skill/https://harryfan.github.io/blog/2026-06-05-taiwan-public-icons-ai-skill/剛上架一個 Windsurf & Claude Code 雙平台支援的 AI Skill：協助設計師、工程師、產品經理快速選型「CNS16282 台灣公共圖標」，自動判斷場景、推薦分類與代號。Fri, 05 Jun 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-06-10-frontend-value-from-build-to-decide/https://harryfan.github.io/blog/2026-06-10-frontend-value-from-build-to-decide/讀完一個 Senior Frontend Engineer 的職缺描述，我發呆了一下。現在的前端早就不是單純把畫面刻出來的人，而是參與決策、把 AI 變成產品靈魂的人。Wed, 10 Jun 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-06-18-harness-engineering-denny-huang/https://harryfan.github.io/blog/2026-06-18-harness-engineering-denny-huang/GDG Taipei 六月月會，Denny Huang 用 SITCON Flickr Photo Finder 一個專案，講透 AI 時代的 Harness。十五年前端的我聽完鬆一口氣：軟體工程不只還需要，搞不好更需要。Thu, 18 Jun 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-06-19-chrome-cdp-skill-claude-code/https://harryfan.github.io/blog/2026-06-19-chrome-cdp-skill-claude-code/透過 chrome-cdp-skill 這個 Claude Code Skill，Claude 可以接手你「現在正開著、已經登入好」的那個 Chrome，幫你彙整分頁資訊、抓 DOM、截圖、填表單、做前端除錯。安裝一行指令，啟用撥一個開關，不到五分鐘。Fri, 19 Jun 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-06-20-frontend-career-advice-h2-2026/https://harryfan.github.io/blog/2026-06-20-frontend-career-advice-h2-2026/寫給已經感覺到壓力的前端工程師：別把目標放在「不要被 AI 取代」，而是讓自己變成會指揮 AI、檢查 AI、最後能把產品交出去的人。從工作流、基本功、測試、產品思維到逐月安排，一份實際的下半年計畫。Sat, 20 Jun 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-06-24-figma-chrome-extension-capture-page/https://harryfan.github.io/blog/2026-06-24-figma-chrome-extension-capture-page/只要點一下「Capture Page」再匯入 Figma，就能把整個網頁畫面抓下來，連所有元件都幫你整理好，完成度超高。實測 Figma 官方 Chrome 擴充套件，分享下載連結與使用心得。Wed, 24 Jun 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-06-26-ctalk-marvin-lin-ai-native/https://harryfan.github.io/blog/2026-06-26-ctalk-marvin-lin-ai-native/C Talk+ X TKUG #17 活動心得：Marvin Lin 談 Agent 時代基本功反而更重要、如何用 AI 建知識庫省掉重複溝通，以及「讓 AI 替你跑，你來決定跑什麼」這個工程師的新定位。Fri, 26 Jun 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-03-19-claude-md-collaboration/https://harryfan.github.io/blog/2026-03-19-claude-md-collaboration/重來一次比寫程式更耗力。用 CLAUDE.md 把規則寫到專案根目錄，讓人與 AI 都在同一套框架下協作。Thu, 19 Mar 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-06-26-ctalk-panel-talk-agent-direction/https://harryfan.github.io/blog/2026-06-26-ctalk-panel-talk-agent-direction/C Talk+ X TKUG #17 活動心得：Panel Q&A 段落的碎片思考——從 Agent 介入時機、多 Agent 驗證機制，到「設計能力比打字能力更重要」這個核心結論。Fri, 26 Jun 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-06-26-ctalk-recca-chao-ai-native-frontend/https://harryfan.github.io/blog/2026-06-26-ctalk-recca-chao-ai-native-frontend/C Talk+ X TKUG #17 活動心得：謝謝 Recca Chao 分享如何從「寫程式的人」升級成「設計流水線的人」，以及為什麼你的理解不能外包給 AI。滿滿乾貨，記錄我的收穫與反思。Fri, 26 Jun 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-06-27-im-app-case-study/https://harryfan.github.io/blog/2026-06-27-im-app-case-study/記錄從 0 到可上線的即時聊天應用——Vue 3 前端、Fastify + WebSocket 後端、PostgreSQL + Redis、完整 E2E 測試、加群退群——以及途中遇到的每一個坑。Sat, 27 Jun 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-06-30-flutter-meetup-35/https://harryfan.github.io/blog/2026-06-30-flutter-meetup-35/有人用純 Dart 刻了一個 3D 引擎、渲 50 萬三角形還超輕量；SoFi 換 Flutter 砍掉一百萬行 Native。六月 Flutter Meetup #35 的重點一次整理：3.44 新版、AI 進工作流、SoFi 案例，還有麥克熊的 macbear_3d。Tue, 30 Jun 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-06-30-zeabur-openclaw-web-search-tavily/https://harryfan.github.io/blog/2026-06-30-zeabur-openclaw-web-search-tavily/OpenClaw 部署到 Zeabur 後問天氣、新聞都失敗，跳出 web_search is disabled。原因不是 OpenAI Key，而是少了搜尋供應商。實測用 Tavily 免費方案，三步驟開啟 OpenClaw 的網路搜尋功能。Tue, 30 Jun 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-07-10-ai-layoff-rehiring-reflection/https://harryfan.github.io/blog/2026-07-10-ai-layoff-rehiring-reflection/調查顯示超過半數企業主管承認「裁員換 AI」是錯誤決定，三分之一人資主管重新聘回被 AI 取代的職位。從福特、IBM、澳洲聯邦銀行的案例，拆解 AI 自動化為什麼沒有想像中省錢，以及企業人才策略正在如何轉向。Fri, 10 Jul 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-07-11-threejs-airpods-pro-flagship-3d/https://harryfan.github.io/blog/2026-07-11-threejs-airpods-pro-flagship-3d/我做了一頁 AirPods Pro 概念旗艦官網，整支耳機和充電盒沒有任何 .glb 模型檔，全部用 Three.js 的球體、膠囊、圓角盒即時算出來。這篇拆三件事：怎麼用幾何基元拼出可辨識的產品、滾動怎麼刮擦一條相機時間軸做六幕運鏡，以及一個所有中文開發者都會踩、英文教學卻從不提的斷字爆版坑。Sat, 11 Jul 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-07-11-threejs-night-market-flagship-3d/https://harryfan.github.io/blog/2026-07-11-threejs-night-market-flagship-3d/一個做給士林夜市五大名物的 3D 導覽站——章魚燒、珍奶、大雞排、雪花冰、臭豆腐，每一站都是單一自包含 HTML、零資產、純程序化建模。這篇記錄我怎麼把章魚燒那一站從 r128 老寫法升級到現代 ESM，用 RoomEnvironment 做零資產環境反射、只讓霓虹選擇性發光、再靠 clearcoat 醬汁跟會飄的柴魚片把「有料」做出來，以及為什麼我決定先只打磨一站。Sat, 11 Jul 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-07-12-flutter-web-hot-reload-ga/https://harryfan.github.io/blog/2026-07-12-flutter-web-hot-reload-ga/Flutter 的 Web Hot Reload 終於脫離實驗階段，不再需要 experimental flag，直接開箱即用。這篇聊聊為什麼「熱重載」對 Web 開發者才是真正的生產力分水嶺，同時誠實面對 Flutter Web 的 SEO 硬傷，以及它真正的甜蜜區：看盤、dashboard 這類 UI 密集、登入後的應用。Sun, 12 Jul 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-07-13-scroll-world-video-scrub/https://harryfan.github.io/blog/2026-07-13-scroll-world-video-scrub/不寫一行 WebGL，也能做出電影感的滾動飛行。這篇拆解 scroll-world 的做法：用 AI 生成五個共用同一段美術指令的黏土場景，把它們變成一鏡到底的短影片，再讓捲動去刷影片的 currentTime，捲多少、鏡頭就飛多少。附完整提示詞配方、引擎旋鈕，以及三次反覆修正踩到的坑。Mon, 13 Jul 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-07-16-wordpress-meetup-moksa-career-ai/https://harryfan.github.io/blog/2026-07-16-wordpress-meetup-moksa-career-ai/Moksa 從職能治療肄業、字幕組、外貿業務一路走到 AI 接案工程師。一場不談技術的技術分享，反而把 AI 焦慮講得最清楚。Thu, 16 Jul 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-07-20-repomix-team-ai-context/https://harryfan.github.io/blog/2026-07-20-repomix-team-ai-context/新開一個 AI 對話，它就是不認識你的專案，這是團隊用 AI 修 bug 最大的幻覺來源。這篇記錄我們前端團隊怎麼用 Repomix 把模組程式碼打包成單一上下文檔，搭配 .cursor/rules 形成固定工作流：一支腳本按頁面自動打包、@ 一下就把整個模組餵給 AI，還附上我們實際的 bug 報告模板。Mon, 20 Jul 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-07-09-ink-scroll-fluid-backdrop/https://harryfan.github.io/blog/2026-07-09-ink-scroll-fluid-backdrop/我做了一頁水墨舞劇的活動頁，整片背景是日式墨流し（suminagashi），而且你往下捲動的時候，墨會被你攪動、跟著漂。這篇把這個效果拆開講：canvas 怎麼當固定背景又不擋捲動、指標事件怎麼路由、以及最關鍵的——捲動的位移怎麼變成注入流體的速度。Thu, 09 Jul 2026 00:00:00 GMThttps://harryfan.github.io/blog/2026-07-19-maokong-landing-page-neubrutalism-webgl/https://harryfan.github.io/blog/2026-07-19-maokong-landing-page-neubrutalism-webgl/一場朋友間的貓空茶會，我把邀請函做成了落地頁：程序化生成的 WebGL 山脊背景、一個 boolean 同時重畫三層渲染、拒絕 IntersectionObserver 的捲動進場、以及會從你點的那一格長出來的 FLIP 燈箱。這篇把每個效果拆到可以複製的程度。後續改版的段落一併收錄：拆成多頁時兩個自認聰明的決定當場崩掉、嵌一支 YouTube 的真實代價，以及為什麼 Wikimedia Commons 的素材比 Flickr 更自由。Sun, 19 Jul 2026 00:00:00 GMT