Skip to main content

Command Palette

Search for a command to run...

Latest articles

  1. 圖片壓縮:用 Compressor.js 自動調整品質壓縮至指定大小

    本篇要解決的問題 很多網站功能會需要處理使用者上傳的圖片,比方讓使用者上傳會員照片。 但隨著手機相機愈做愈好,拍出來的照片隨便都是幾 MB,直接上傳的話,耗時也佔空間。 雖然網路上搜尋有許多圖片壓縮工具,但大多只能設定固定的壓縮的品質,無法保證壓縮後的檔案大小符合需求。 本筆記文將使用 Compressor.js 套件,實作一個圖片壓縮功能,符合以下需求: 自動嘗試不同的壓縮品質,直到檔案小於指定大小(ex: 600KB)為止。 將圖片轉換為 WebP 格式。 長、寬限制最大尺寸。 這...

    Oct 4, 20254 min read
    圖片壓縮:用 Compressor.js 自動調整品質壓縮至指定大小
  2. 使用 pm2.web 建立免費 PM2 監控系統

    本篇要解決的問題 PM2 是 Node.js 裡常用的 process manager,一般如果是透過網頁監控、重啟,大概會使用官方的 Keymetrics。 但,But!就是這個 But!免費版最多只能監控 4 個 Process,再多就要掏出魔法小卡了。 問了 ChatGPT 後,發現有一個開源的替代方案:pm2.web,可以自己架設,不管幾個 process 都完全免費。 以下筆記如何使用 Vercel + MongoDB Atlas 部署 pm2.web,免費監控我們的 PM2。 架構...

    Sep 26, 20252 min read
    使用 pm2.web 建立免費 PM2 監控系統
  3. GitHub Copilot + Figma MCP Server 實戰:用 AI 快速切版教學

    本篇要解決的問題 最近在研究 MCP,剛好在 Threads 上看到有人實測 Figma MCP,想試看看是否真的能透過 AI 進行切版。 實作了一下後,還真的可以,不過目前僅針對簡單設計稿進行測試,結果略有跑版現象,整體效果尚可接受。 但目前就有這成果覺得厲害,再給它一段時間,也許前端工程師可以省掉切版的時間,把心力放到別的地方。 前提是,客戶要很明確的知道自己要什麼 XD,不然靠 AI 微調,還不如人工直接改程式還比較快。 用到的資源 以下是要實作用 Figma MCP 來切版,需要的資源:...

    Apr 12, 20252 min read
    GitHub Copilot + Figma MCP Server 實戰:用 AI 快速切版教學
  4. 使用 Google Apps Script 串接 Google Analytics API,整合多站數據

    本篇要解決的問題 一間公司裡可能旗下會有多個網站,想同時查看所有網站的 GA 數據,通常需要開啟多個瀏覽器視窗並排顯示,操作較為繁瑣。 如果可以改由 API 來取得 GA 的數據,工程師就可以把各站的資料顯示在一個頁面上,而不用同時開多個 GA 來看。 開通 GA API 取得 GCP 專案編號 要先有 Google Cloud Platform(GCP)的專案,沒有的話登入自己的 Google 帳號,就可以先增一個。 專案編號就在 資訊主頁 上: 開通 GA API 功能 在使用 API ...

    Mar 29, 20254 min read
    使用 Google Apps Script 串接 Google Analytics API,整合多站數據
  5. 監聽 localStorage 事件:如何在同一頁面內偵測變更

    本篇要解決的問題 我們有時會把資訊存在瀏覽器的空間裡,像是 Cookies、Local Storage、IndexedDB。 Local Storage 原生的 storage 事件主要用於跨分頁同步,如下: window.addEventListener("storage", () => {}); 但如果想要在同一個頁面內監聽變更,就需要手動覆寫 localStorage 方法。 localStorage event listener 我們可以透過 Storage.prototype 覆寫...

    Mar 3, 20251 min read
    監聽 localStorage 事件:如何在同一頁面內偵測變更
  6. 使用 Ollama + Ngrok 搭建本地 LLM,遠端存取 AI 模型教學

    本篇要解決的問題 ChatGPT 等 AI 工具很方便,但有時工作上的數據可能會被 AI 當作學習資料,尤其這陣子新聞被洗版的 DeepSeek,幾個國家會禁用的原因都是安全疑慮。 前陣子新買了一台 Mac mini,就想來在本地安裝 LLM,然後在工作時使用。 本地安裝好 LLM 後,要能遠端使用,試了幾次 NAT 通訊埠轉發都失敗,就改用最簡單的 Ngrok。 安裝、使用 Ollama Ollama 官網:https://ollama.com/。 點擊 Download 就可以下載、安裝。...

    Feb 12, 20252 min read
    使用 Ollama + Ngrok 搭建本地 LLM,遠端存取 AI 模型教學
  7. 使用 AI 自動生成 Git Commit 訊息

    本篇要解決的問題 每次更新完成式碼,比如修 Bug、開發新功能後,在寫 Git Commit 訊息時都會很懶,基本上寫出的就是當下的自己看得懂,但未來的自己,或是接手的人不一定看得懂的狀態,導致之後要回頭查某次的更新時,會耗掉很長的時間在找哪次的更新是不是有改某某功能。 人類不想花心力的工作,就交給 AI 去作。 August 用了 OpenAI API,再用便宜的 gpt-4o-mini 模型後,Commit 訊息可以秒生成。 因為用的是 API,會需要付費使用,但 gpt-4o-mini 真...

    Nov 30, 20241 min read
    使用 AI 自動生成 Git Commit 訊息
  8. CodiumAI PR-Agent,在 GitHub 上用 AI 來 Code Review

    本篇要解決的問題 上次寫了一篇〈CodiumAI PR-Agent,在 GitLab 上用 AI 來 Code Review〉,原本在最後說下一篇會寫的是自己做一個用 AI 來 Code Review 的文章。 但這週下班後,在幫朋友寫一些東西時,發現常用的還是 GitHub 平台,而且加了 AI Code Review,真的是很有幫助,所以就決定先寫這篇 GitHub 使用的筆記文。 因為大部份的工跟 GitLab 那篇幾乎相同,所以這篇就是速速的寫。 本篇主要是用 GitHub Action...

    Aug 31, 20242 min read
    CodiumAI PR-Agent,在 GitHub 上用 AI 來 Code Review
  9. CodiumAI PR-Agent,在 GitLab 上用 AI 來 Code Review

    本篇要解決的問題 最近看到有人寫了一篇用 AI 來 Code Review 的文章後,才發現原來有開源的好工具可以來使用,也剛好組內也有人提說,要不要來 Code Review,但因為需求常常太多,光開發就沒什麼時間了,就沒有時間來看 Code Review 這工程。 如果 AI Code Review 真的好用,那之後就要來想辦法看能不能做在開發流程裡。 這篇先研究 GitLab 的版本,之後有時間再來看 GitHub 版的。 本篇主要看到的參考文章是這篇:將 AI Code Review 整...

    Aug 24, 20242 min read
    CodiumAI PR-Agent,在 GitLab 上用 AI 來 Code Review