初中階 1. requestAnimationFrame 和 setTimeout 的差異? // setTimeout:固定時間後執行,不管瀏覽器在不在渲染 setTimeout(() => updateDOM(), 16); // 希望模擬 60fps // rAF:在瀏覽器下一次渲染前執行 requestAnimationFrame(() =>
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
使用 HTML 的 canvas 標籤作為手寫簽名功能的實現方式,這在行動裝置(例如智慧型手機)上會遇到筆跡出現處跟下筆處不同的 bug,電腦環境則沒有 bug。如果使
read more因為覺得 HTML input type file with capture camera 在手機上拍照片時,只能一次拍一張,覺得不方便,所以研究其他方法能不能有更好的方式。 經過研究和實作後,農曆過年前我製作了
read moreHoward Lee is a Staff Software Engineer based in Taipei, specializing in frontend architecture, CI/CD, and production-quality engineering for enterprise web applications. With 13+ years of software development experience, Howard has worked across B2B SaaS, IoT energy-management platforms, online travel marketplaces, and Android applications. His work focuses on modernizing large frontend systems, improving delivery quality, and building reliable product workflows with automated testing, observability, and practical cloud/platform integration. Core Expertise Frontend architecture: Angular 5 to 19 modernization, TypeScript, JavaScript, React, Next.
Know More