在現任服務公司裡，終於在 今年 3 月底完成重寫舊產品並且讓所有使用者都開始使用，這個大專案從 2025 年 3 月初開始，歷時 13 個月。上線後的幾天內，後續處理
read more
初中階 1. requestAnimationFrame 和 setTimeout 的差異？ // setTimeout：固定時間後執行，不管瀏覽器在不在渲染 setTimeout(() => updateDOM(), 16); // 希望模擬 60fps // rAF：在瀏覽器下一次渲染前執行 requestAnimationFrame(() =>
read more
座標系統 SVG — 聲明式座標系，內建視窗變換 <!-- viewBox 定義世界座標，瀏覽器自動映射到元素尺寸 --> <svg width="400" height="300" viewBox="0 0 1000 750"> <circle cx="500" cy="375" r="50" /> <!-- 世界座標 --> </svg> SVG 的 viewBox 就是一個內建的
read more
Canvas 元素的縮放策略 Canvas 比較特殊，Transform 和 Scroll 策略都不是最佳選擇。最適合的是 Canvas 原生重繪。 三種方案比較 1. Transform 策略（可用，但有缺點） transform: scale3d(2, 2, 1); 放
read more
為什麼 Transform 策略適合 img 等不可捲動元素 單張圖片沒有「溢出內容需要捲動」的需求。放大後只需要： 視覺上放大圖片 手指拖曳平移到圖片的不同區域 這正好是 CSS transform:
read more
1. CSS Transform 不影響 Layout 這是最關鍵的概念： transform: scale(2); /* 視覺上放大 2 倍，但元素在 layout 中的尺寸不變 */ 瀏覽器的排版引擎（layout engine）完全忽略 trans
read more
Howard Lee, Frontend-engineer with Typescript, JavaScript, HTML, CSS, Angular 19+, ReactJS, Next.js, GraphQL, Tanstack Query, Material-UI, Cypress, Postgres, Amazon Web Services, Google Cloud Platform Docker and TestCafe. Have a certificate of AWS Solution Architect Associate with verify number: 8FYNL55LCEEQ10W5. You can verify at AWS Certificate site or Credly site Tech lead role Lead 4 colleagues to build products and infrastructure Coordinate schedule of delivering products Senior web frontend developer role Products Team-management, form-filling, form-sharing, file-management, repair-management and project-management for construction industry at Suiqui IoT management and EC platform for Liquid Petroleum Gas(LPG) at Wave-In Comm.
Know More