@letswrite
前端工程師 August 的學習筆記 — solving problems, in simple ways.
前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.
前端工程師 August 的學習筆記 — solving problems, in simple ways.
Oct 4, 2025 · 4 min read · 本篇要解決的問題 很多網站功能會需要處理使用者上傳的圖片，比方讓使用者上傳會員照片。 但隨著手機相機愈做愈好，拍出來的照片隨便都是幾 MB，直接上傳的話，耗時也佔空間。 雖然網路上搜尋有許多圖片壓縮工具，但大多只能設定固定的壓縮的品質，無法保證壓縮後的檔案大小符合需求。 本筆記文將使用 Compressor.js 套件，實作一個圖片壓縮功能，符合以下需求： 自動嘗試不同的壓縮品質，直到檔案小於指定大小（ex: 600KB）為止。 將圖片轉換為 WebP 格式。 長、寬限制最大尺寸。 這...
Join discussion
Sep 26, 2025 · 2 min read · 本篇要解決的問題 PM2 是 Node.js 裡常用的 process manager，一般如果是透過網頁監控、重啟，大概會使用官方的 Keymetrics。 但，But！就是這個 But！免費版最多只能監控 4 個 Process，再多就要掏出魔法小卡了。 問了 ChatGPT 後，發現有一個開源的替代方案：pm2.web，可以自己架設，不管幾個 process 都完全免費。 以下筆記如何使用 Vercel + MongoDB Atlas 部署 pm2.web，免費監控我們的 PM2。 架構...
Join discussion
Apr 12, 2025 · 2 min read · 本篇要解決的問題 最近在研究 MCP，剛好在 Threads 上看到有人實測 Figma MCP，想試看看是否真的能透過 AI 進行切版。 實作了一下後，還真的可以，不過目前僅針對簡單設計稿進行測試，結果略有跑版現象，整體效果尚可接受。 但目前就有這成果覺得厲害，再給它一段時間，也許前端工程師可以省掉切版的時間，把心力放到別的地方。 前提是，客戶要很明確的知道自己要什麼 XD，不然靠 AI 微調，還不如人工直接改程式還比較快。 用到的資源 以下是要實作用 Figma MCP 來切版，需要的資源：...
Join discussion
Mar 29, 2025 · 4 min read · 本篇要解決的問題 一間公司裡可能旗下會有多個網站，想同時查看所有網站的 GA 數據，通常需要開啟多個瀏覽器視窗並排顯示，操作較為繁瑣。 如果可以改由 API 來取得 GA 的數據，工程師就可以把各站的資料顯示在一個頁面上，而不用同時開多個 GA 來看。 開通 GA API 取得 GCP 專案編號 要先有 Google Cloud Platform（GCP）的專案，沒有的話登入自己的 Google 帳號，就可以先增一個。 專案編號就在 資訊主頁 上： 開通 GA API 功能 在使用 API ...
Join discussion
Mar 3, 2025 · 1 min read · 本篇要解決的問題 我們有時會把資訊存在瀏覽器的空間裡，像是 Cookies、Local Storage、IndexedDB。 Local Storage 原生的 storage 事件主要用於跨分頁同步，如下： window.addEventListener("storage", () => {}); 但如果想要在同一個頁面內監聽變更，就需要手動覆寫 localStorage 方法。 localStorage event listener 我們可以透過 Storage.prototype 覆寫...
Join discussion
