https://ray-blog-nine.vercel.app Front-End Engineering & Web Development zh-TW Wed, 24 Jun 2026 06:49:45 GMT https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-24-frontend-cicd-production-debugging https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-24-frontend-cicd-production-debugging 整理前端工程流程面試題：Git workflow、CI quality gates、preview deployment、source map、error tracking、Web Vitals、feature flag 與正式環境事故處理。 Wed, 24 Jun 2026 00:00:00 GMT 前端面試系列 CI/CD 正式環境除錯 https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-23-realtime-polling-sse-websocket https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-23-realtime-polling-sse-websocket 整理即時通訊面試題：短輪詢、長輪詢、Server-Sent Events、WebSocket 的差異、重連、心跳、訊息順序與適用場景。 Tue, 23 Jun 2026 00:00:00 GMT 前端面試系列 即時通訊 WebSocket https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-22-frontend-system-design https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-22-frontend-system-design 用大型列表與 Dashboard 情境整理前端系統設計面試：需求澄清、元件邊界、狀態分類、API、快取、錯誤處理、效能、測試與可觀測性。 Mon, 22 Jun 2026 00:00:00 GMT 前端面試系列 前端架構 System Design https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-21-web-accessibility-interview https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-21-web-accessibility-interview 整理前端無障礙面試題：semantic HTML、ARIA、keyboard navigation、focus management、表單 label、圖片替代文字與常見檢測方式。 Sun, 21 Jun 2026 00:00:00 GMT 前端面試系列 Accessibility HTML https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-19-css-layout-rwd-interview https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-19-css-layout-rwd-interview 整理 CSS 面試常見題：Flexbox 與 Grid、position、stacking context、盒模型、RWD、media query、container query 與跨瀏覽器處理。 Fri, 19 Jun 2026 00:00:00 GMT 前端面試系列 CSS RWD https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-18-web-security-xss-csrf-cors https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-18-web-security-xss-csrf-cors 從前端角度整理 XSS、CSRF、CORS、CSP、Cookie 屬性與敏感資料處理，說明常見攻擊方式、防護方法和容易混淆的差異。 Thu, 18 Jun 2026 00:00:00 GMT 前端面試系列 Web 安全 瀏覽器 https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-16-browser-url-rendering-process https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-16-browser-url-rendering-process 整理瀏覽器原理面試題：DNS、TCP/TLS、HTTP request、cache、HTML parsing、DOM/CSSOM、render tree、layout、paint 與 JavaScript 阻塞。 Tue, 16 Jun 2026 00:00:00 GMT 前端面試系列 瀏覽器原理 網路 https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-15-frontend-testing-strategy https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-15-frontend-testing-strategy 整理前端測試面試題：單元測試、整合測試、E2E 的差異，React Testing Library 與 Playwright 的角色，以及哪些流程值得優先測試。 Mon, 15 Jun 2026 00:00:00 GMT 前端面試系列 自動化測試 Playwright https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-13-javascript-event-loop-interview https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-13-javascript-event-loop-interview 從 Call Stack、Web APIs、microtask、macrotask 解釋 JavaScript Event Loop，整理 Promise、queueMicrotask、setTimeout 的執行順序與常見面試題。 Sat, 13 Jun 2026 00:00:00 GMT 前端面試系列 JavaScript Event Loop https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-12-typescript-type-system-interview https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-12-typescript-type-system-interview 整理 TypeScript 面試高頻題：any 與 unknown、never、union、generic、utility types、type narrowing，以及如何替 API response 建立安全型別。 Fri, 12 Jun 2026 00:00:00 GMT 前端面試系列 TypeScript 型別系統 https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-11-frontend-interview-restful-put-patch https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-11-frontend-interview-restful-put-patch 整理 RESTful API 面試常見題：PUT 與 PATCH 的語意差異、idempotent、request body 設計，以及前端串接時如何避免覆蓋資料。 Thu, 11 Jun 2026 00:00:00 GMT 前端面試系列 API 設計 RESTful https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-10-frontend-interview-code-review https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-10-frontend-interview-code-review 整理 Code Review 面試題：如何描述實際 review 經驗、review 時會看哪些層面，以及如何寫出有建設性的 review comment。 Wed, 10 Jun 2026 00:00:00 GMT 前端面試系列 Code Review 團隊協作 https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-09-frontend-interview-docker-discord-bot https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-09-frontend-interview-docker-discord-bot 整理 Docker 部署 Discord Bot 的實務回答：Dockerfile、.dockerignore、環境變數、volume、restart policy、logs 與部署注意事項。 Tue, 09 Jun 2026 00:00:00 GMT 前端面試系列 Docker Discord Bot https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-08-frontend-interview-hls https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-08-frontend-interview-hls 整理 HLS 串流面試題：m3u8、影片分段、adaptive bitrate streaming、瀏覽器支援、hls.js，以及直播延遲與 CDN 的常見追問。 Mon, 08 Jun 2026 00:00:00 GMT 前端面試系列 影音串流 HLS https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-07-frontend-interview-react-key-useeffect https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-07-frontend-interview-react-key-useeffect 整理 React 面試常見基礎題：key 如何影響元件身份、index 當 key 的問題，以及 useEffect dependency array 漏寫可能造成的 stale closure 與同步錯誤。 Sun, 07 Jun 2026 00:00:00 GMT 前端面試系列 React Hooks https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-06-frontend-interview-list-performance https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-06-frontend-interview-list-performance 整理大量列表卡頓時的排查與優化思路：先量測瓶頸，再從 virtualized list、分頁、memo、後端查詢與互動降載處理。 Sat, 06 Jun 2026 00:00:00 GMT 前端面試系列 效能優化 大量列表 https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-05-frontend-interview-state-management https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-05-frontend-interview-state-management 整理 React 狀態管理面試題：先區分 local state、server state、URL state、global client state，再比較 Redux、MobX、Zustand 的取捨。 Fri, 05 Jun 2026 00:00:00 GMT 前端面試系列 狀態管理 React https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-04-frontend-interview-react-memo-hooks https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-04-frontend-interview-react-memo-hooks 整理 React 效能面試常見題：useMemo、useCallback、React.memo 的差異、使用時機、常見誤區，以及和 re-render 的關係。 Thu, 04 Jun 2026 00:00:00 GMT 前端面試系列 React 效能優化 https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-03-frontend-interview-react-router-v5-v6 https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-03-frontend-interview-react-router-v5-v6 整理 React Router v5 到 v6 的升級重點：Routes、element、useNavigate、Navigate、Outlet、nested routes，以及升級時常見踩坑。 Wed, 03 Jun 2026 00:00:00 GMT 前端面試系列 React Router React https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-02-frontend-interview-rendering-seo https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-02-frontend-interview-rendering-seo 整理前端面試常見的渲染策略題：CSR、SSR、SSG、ISR 的差異、hydration 的概念，以及 Next.js 為什麼比純 React SPA 更適合 SEO。 Tue, 02 Jun 2026 00:00:00 GMT 前端面試系列 渲染與 SEO Next.js https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-01-frontend-interview-scrum https://ray-blog-nine.vercel.app/dashboard/posts/2026-06-01-frontend-interview-scrum 整理 Scrum 在前端面試中的回答方式：角色、事件、產出物、Sprint 流程，以及工程師實際參與開發時要注意的協作重點。 Mon, 01 Jun 2026 00:00:00 GMT 前端面試系列 團隊協作 Scrum https://ray-blog-nine.vercel.app/dashboard/posts/2026-05-31-frontend-interview-auth-jwt-oauth https://ray-blog-nine.vercel.app/dashboard/posts/2026-05-31-frontend-interview-auth-jwt-oauth 整理前端面試最常出現的認證與授權題：JWT 的結構、優缺點、安全注意事項，以及 OAuth Authorization Code Flow 的完整流程。 Sun, 31 May 2026 00:00:00 GMT 前端面試系列 認證授權 JWT OAuth https://ray-blog-nine.vercel.app/dashboard/posts/2026-05-30-frontend-interview-api-debug https://ray-blog-nine.vercel.app/dashboard/posts/2026-05-30-frontend-interview-api-debug 整理 API 效能排查面試題：前端如何用 Network、Performance、payload size、trace id、重複 request 和渲染成本協助定位問題。 Sat, 30 May 2026 00:00:00 GMT 前端面試系列 API 排查 效能優化 https://ray-blog-nine.vercel.app/dashboard/posts/2026-04-03-discord-bot-monitoring-alert https://ray-blog-nine.vercel.app/dashboard/posts/2026-04-03-discord-bot-monitoring-alert Bot 在半夜崩潰，隔天才發現？這篇實作兩層防線：用 heartbeat 讓 Bot 定時報活、用 Discord Webhook 在崩潰當下直接推告警，讓你第一時間知道 Bot 狀態。 Mon, 18 May 2026 00:00:00 GMT Discord.js Bot Node.js 監控 Webhook https://ray-blog-nine.vercel.app/dashboard/posts/2026-04-02-harness-engineering-intro https://ray-blog-nine.vercel.app/dashboard/posts/2026-04-02-harness-engineering-intro 當 AI 從單次回答走向長流程任務，Prompt 就不夠用了。這篇從「為什麼需要 Harness」出發，拆解它和傳統自動化的根本差異、五個核心元件，以及 Feedback Loop 為什麼是讓 AI 系統真正可靠的關鍵。 Thu, 07 May 2026 00:00:00 GMT AI Harness Engineering AI Agent Prompt Engineering AI 系統設計 https://ray-blog-nine.vercel.app/dashboard/posts/2026-04-01-discord-bot-groq-ai-chat https://ray-blog-nine.vercel.app/dashboard/posts/2026-04-01-discord-bot-groq-ai-chat 實作 /ask 與 /reset：用 groq-sdk 串接 Llama 模型，做每個頻道獨立的多輪對話上下文，並補上錯誤處理與 token 成本控制。 Wed, 01 Apr 2026 00:00:00 GMT Discord.js Bot Groq AI Node.js https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-31-discord-bot-cron-scheduler https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-31-discord-bot-cron-scheduler 用 node-cron 讓 Bot 定時主動發訊息，並把每日簽到在凌晨自動重置；同時整理時區、重複啟動與容器部署時的排程陷阱。 Tue, 31 Mar 2026 00:00:00 GMT Discord.js Bot node-cron Docker Node.js https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-30-discord-bot-autocomplete-search https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-30-discord-bot-autocomplete-search 深入實作 Discord Autocomplete：在使用者輸入 option 的同時即時回傳建議，並用 /help command 做指令查詢。 Mon, 30 Mar 2026 00:00:00 GMT Discord.js Bot Autocomplete Slash Commands Node.js https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-29-discord-bot-modal-feedback https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-29-discord-bot-modal-feedback 用 ModalBuilder 和 TextInputBuilder 建一個可用的 /feedback 系統：使用者填表、Bot 發 Embed 到管理頻道、資料同步寫入 Google Sheets。 Sun, 29 Mar 2026 00:00:00 GMT Discord.js Bot Modal Google Sheets API Node.js https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-28-discord-bot-docker-deploy https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-28-discord-bot-docker-deploy 用 process.on 攔截未捕獲的例外讓 Bot 自動重啟，以及用 Docker 做 dev/prod 雙環境部署，包含時區設定與 key 檔案的安全處理。 Sat, 28 Mar 2026 00:00:00 GMT Discord.js Bot Docker Node.js https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-27-discord-bot-architecture https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-27-discord-bot-architecture 用第一個實際功能串起整個 Bot 架構：用 Google Sheets 做資料層，建立每日簽到系統。管理員不用學 SQL，打開試算表就能操作。 Fri, 27 Mar 2026 00:00:00 GMT Discord.js Bot Google Sheets API Node.js https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-26-discord-bot-embeds https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-26-discord-bot-embeds discord.js v14 的 EmbedBuilder 完整指南：color、author、title、description、fields、thumbnail、image、footer、timestamp 一次全搞懂，加上即時預覽工具直接試玩。 Thu, 26 Mar 2026 00:00:00 GMT Discord.js Bot Node.js https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-25-discord-bot-select-menu https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-25-discord-bot-select-menu discord.js v14 的 StringSelectMenu 怎麼建立靜態與動態選項、isStringSelectMenu() 事件處理，以及和 Button 的搭配使用場景。 Wed, 25 Mar 2026 00:00:00 GMT Discord.js Bot SelectMenu Node.js https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-24-discord-bot-button-interactions https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-24-discord-bot-button-interactions discord.js v14 怎麼在訊息裡附上按鈕：ActionRowBuilder 與 ButtonBuilder 的組合方式、ButtonStyle 的差異，以及 isButton() 事件怎麼路由到對應 handler。 Tue, 24 Mar 2026 00:00:00 GMT Discord.js Bot Button Node.js https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-23-discord-bot-slash-commands https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-23-discord-bot-slash-commands 深入拆解 discord.js v14 的 Slash Commands 設計：指令定義、option 類型、靜態與動態選項、PermissionFlagsBits 權限控制，以及用 isButton / isStringSelectMenu / isChatInputCommand 實作三層互動分流。 Mon, 23 Mar 2026 00:00:00 GMT Discord.js Bot Slash Commands Node.js https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-22-discord-bot-setup https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-22-discord-bot-setup 完全從零開始：到 Discord Developer Portal 申請 Bot、設定權證與 Intents、邀請 Bot 進伺服器、設定環境變數，最後用 discord.js 寫出第一個 Slash Command。 Sun, 22 Mar 2026 00:00:00 GMT Discord.js Bot Node.js https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-20-vercel-ai-sdk-chat https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-20-vercel-ai-sdk-chat 從零整合 Vercel AI SDK，搭配 Groq 免費 API，在 Next.js 部落格實作 streaming 聊天介面。解釋為什麼要用 SDK 而不是直接呼叫 API，以及實作過程中需要注意的 API 設計細節。 Fri, 20 Mar 2026 00:00:00 GMT Next.js Vercel AI SDK Groq React TypeScript https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-19-github-actions-ci https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-19-github-actions-ci 我在這個 Blog 加了 GitHub Actions CI，然後做了一個實驗。這篇記錄我從中得出的結論：Vercel 已經夠了，還有什麼時候才真正需要 CI。 Thu, 19 Mar 2026 00:00:00 GMT CI/CD GitHub Actions Next.js DevOps https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-11-scratch-card-canvas https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-11-scratch-card-canvas 透過 Canvas 的 globalCompositeOperation: destination-out，用三個核心步驟實現支援滑鼠與觸控的刮刮樂元件。 Wed, 11 Mar 2026 00:00:00 GMT 前端 Canvas React TypeScript https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-10-spin-wheel-raf https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-10-spin-wheel-raf CSS transition 做不到中途停止。這篇從這個限制出發，說明 requestAnimationFrame 的逐幀控制思維，以及如何設計動態緩停算法，讓玩家可以自行決定何時停轉。 Tue, 10 Mar 2026 00:00:00 GMT TypeScript React Animation requestAnimationFrame https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-09-spin-wheel-typescript https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-09-spin-wheel-typescript 記錄一個外包轉盤抽獎遊戲的重構歷程，從 jQuery DOM 操作，改寫成以 TypeScript 管理狀態、Canvas API 繪製輪盤、React 封裝互動元件。 Mon, 09 Mar 2026 00:00:00 GMT JavaScript TypeScript React Canvas https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-08-nextjs-blog-search https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-08-nextjs-blog-search 介紹如何在 Next.js Blog 中實作純前端全文搜尋，不需要後端 API，直接在 Client Component 過濾文章。 Sun, 08 Mar 2026 00:00:00 GMT Next.js 搜尋 React https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-07-nextjs-blog-toc https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-07-nextjs-blog-toc 介紹如何在 Next.js Blog 中從 MDX 文章自動產生 TOC 目錄，並用 IntersectionObserver 追蹤當前閱讀位置。 Sat, 07 Mar 2026 00:00:00 GMT Next.js MDX TOC https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-06-nextjs-code-highlight https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-06-nextjs-code-highlight 介紹如何在 Next.js Blog 中加入程式碼高亮，使用 Shiki 與 rehype-pretty-code 提供更好的技術文章閱讀體驗。 Fri, 06 Mar 2026 00:00:00 GMT Next.js MDX Shiki rehype-pretty-code https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-05-nextjs-mdx-blog https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-05-nextjs-mdx-blog 介紹如何在 Next.js 專案中加入 MDX，建立可以撰寫技術文章的 Blog 系統。 Fri, 06 Mar 2026 00:00:00 GMT Next.js MDX Blog https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-04-nextjs-blog-architecture https://ray-blog-nine.vercel.app/dashboard/posts/2026-03-04-nextjs-blog-architecture 記錄這個 Blog 的技術架構，以及如何用 Next.js 開始建立自己的技術筆記網站。 Wed, 04 Mar 2026 00:00:00 GMT Next.js Blog