用 Docker 快速架設 Node.js 靜態網站服務
本篇要解決什麼問題 對前端工程師來說，有時只是單純 […]
Web Workers 調用 API，減輕主執行緒負擔
透過 Web Workers，您可以將這些耗時的操作放在另一個執行緒中處理，減輕主執行緒的負擔，提高網站的效能和響應速度。這篇文章提供了詳細的解釋和示例，幫助您快速上手使用 Web Workers。不要錯過這個可以改善網站效能的實用技巧！
DOMPurify，增加網站對 XSS 攻擊的防護力
本篇介紹了一個名為 DOMPurify 的套件，它可以增加網站對 XSS 攻擊的防護力。DOMPurify 可以幫助開發人員過濾和清除不受信任的輸入，以防止 XSS 攻擊。本文提供了 DOMPurify 的安裝和使用方法，並提供了一個範例 Demo 供參考。
簡單的網頁截圖功能 – DOM to Image
這篇文章教你如何使用 DOM to Image 進行網頁截圖。內容包括如何安裝和使用 DOM to Image，注意事項，以及一個實用的 Demo 和原始碼。文章還探討了 Notion AI 生成的文章，並在最後提供了一個關於生成式 AI 影響的彩蛋。
如何使用 PWA 技術打造優秀的 Web App？
探索如何使用 PWA 技術來打造優秀的 Web App。本文詳細解釋了創建 icon 圖檔、manifest.json、sw.js，註冊 Service Worker，以及使用 Lighthouse 檢查 PWA 使用狀況的步驟。
使用 Manifest 創建你的 PWA – 基礎 Progressive Web App 教學
深入探索 PWA 的 Manifest.json 應用，學習如何設定應用程式的主要顏色、啟動畫面、圖示、名稱等，並了解 Chrome 主動提示加入主畫面的條件和功能。
使用 IndexedDB 實現 Client 端數據存儲 – 前端工程師必學的 Web Storage 技術（第三篇）
深入了解 IndexedDB 的客戶端數據存儲技術。本文詳細解釋了 IndexedDB 的使用限制、操作方法和實踐技巧，並提供了實用的代碼範例和操作指南，是前端工程師提升技能的理想資源。
使用 Local Storage 實現 Client 端數據存儲 – 前端工程師必學的 Web Storage 技術（第二篇）
探索如何使用 Local Storage 和 Session Storage 實現客戶端數據存儲。本文詳細解釋了這些技術的限制、原生寫法、設定有效期限和推薦套件，並提供了實用的 Demo 和原始碼。
使用 Cookie 實現 Client 端數據存儲 – 前端工程師必學的 Web Storage 技術（第一篇）
深入了解使用 Cookie 實現客戶端數據存儲的技巧和最佳實踐。本文詳細解釋了 Cookie 的基本概念、限制、原生寫法，並推薦了一個實用的 JavaScript Cookie 套件，附帶實用 Demo 和原始碼。
簡單易上手！使用 Pusher 實現 Web Push 通知 – 基礎 Progressive Web App 教學
學習如何使用 Pusher 快速實現 Web Push 通知功能。本文將指導你從建立 Pusher Beams App 到發送實際的推播通知的每一步，並探討不同瀏覽器的支援度。
簡單的網頁截圖功能 – html2canvas、Canvas2image
這篇文章教你如何使用 html2canvas 和 Canvas2image 來將網頁的特定區塊轉換成圖像文件。文章內容包括將指定的 HTML 區塊轉換成 Canvas，將 Canvas 轉存成圖像文件，以及如何截取多個 div 並將它們存儲為圖像。文章提供了範例和原始碼，以及一個實用的 Demo 供讀者參考和使用。
實現 Web Push 通知 – 基礎 Progressive Web App 教學
探討 PWA 和 Web Push 的技術，學習如何透過這些現代 Web 技術來提升用戶體驗和參與度。本文提供了 PWA 和 Web Push 的基本概念、實作方法和實際應用案例。
Recent Comments