解決使用 zoom 時 GSAP ScrollTrigger 的觸發點不正確問題

如何解決在使用 GSAP ScrollTrigger 與 zoom 一起時，觸發點可能出現的問題。我們將透過 scrollerProxy 方法調整觸發點的位置，確保在不同尺寸裝置上的正確顯示。

透過 MutationObserver 監聽 DOM 的 class 變化

使用 MutationObserver 監聽 DOM class 變化，達到在適當時機控制 Lenis 滾動行為的需求。

mac 執行 npm install 出現 distutils 錯誤

最近因為有除錯 ios 的需求所以入手了一台 mac mini 作為開發機，但在將 window 的專案丟到 mac 執行 npm install 直接噴了一大串錯誤，主要錯誤的資訊就是 gyp 和最後的 ModuleNotFoundError No module named 'distutils'，最後發現錯誤是來自於 python 安裝的版本，從3.12版本開始，distutils模組被移除了，所以導致了這個錯誤。

Safari 使用 audio 造成畫面渲染緩慢問題

最近遇到一個案子是廣播電台，並在頁面中使用 audio 來播放 audio/mpeg 檔案，在電腦及 Android 上正常，在 Safari 系列卻一直無法載入。經過開發者工具查看後發現非 Safari 的瀏覽器在載入 audio 時不會等到檔案載入完成再繼續渲染，所以不會有卡在畫面的問題，而 Safari 會先將檔案完全載入後再播放，這導致了在載入 audio 時會有一段時間的等待，而這段時間的等待會讓使用者感覺到網頁讀取緩慢。

magick - 非常實用的圖片轉檔工具

這篇文章介紹了一個非常實用的圖片轉換和處理工具 magick，它可以幫助我們快速地將圖片轉換成不同的格式、壓縮圖片、調整大小、加上浮水印等。相較於線上轉換工具，使用 magick 可以更有效率地進行轉換，並提升工作效率。

在 Android 上使用 Chrome DevTools

學會在電腦和手機的 Chrome 上進行連接並啟用開發者工具進行前端除錯。文章詳細解說開啟 Android 開發人員選項和 USB 偵錯的步驟，包括Android不同版本的路徑。提供注意事項。教你如何連接電腦檢查手機連線，允許授權後即可透過開發者工具進行偵錯。展示使用開發者工具元素 (element) 功能在手機上查看結果、CSS 樣式和即時調整切版，提高前端開發效率。

window 10 點右鍵選單會出現沒有回應，檔案總管 Lag 的解決方法

其實這個問題已經存在一陣子，但因為是公司電腦也就不理他，直到今天要按右鍵對某個資料夾做壓縮時，只要按右鍵就是轉圈圈沒有回應，檔案總管自動重啟無限循環，重開機也沒有好轉，才開始上網找尋排除方法。

網頁載入時自動朗讀內容 - 使用 SpeechSynthesisUtterance

最近有接到一個 case 是要在網頁載入後，自動朗讀內文的內容，最後使用 JS 內建的 SpeechSynthesisUtterance 來達成這個需求。順便記錄一下遇到的問題，像是換頁不會自行中斷及手機無法自動朗讀等問題。