使用 Cookie 實現 Client 端數據存儲 – 前端工程師必學的 Web Storage 技術（第一篇）
深入了解使用 Cookie 實現客戶端數據存儲的技巧和最佳實踐。本文詳細解釋了 Cookie 的基本概念、限制、原生寫法，並推薦了一個實用的 JavaScript Cookie 套件，附帶實用 Demo 和原始碼。
簡單易上手！使用 Pusher 實現 Web Push 通知 – 基礎 Progressive Web App 教學
學習如何使用 Pusher 快速實現 Web Push 通知功能。本文將指導你從建立 Pusher Beams App 到發送實際的推播通知的每一步，並探討不同瀏覽器的支援度。
CryptoJS 用前端加密、解密
探索如何使用 Crypto.js 進行前端加解密。本文詳細解釋了安裝、CDN、import 的方法，並提供了 AES 和 Rabbit 加密解密的實用範例。是一個適合希望深入了解前端加解密技巧的讀者的實用指南。
用 JavaScript 做一個 Tooltips 功能
深入了解如何用 JavaScript 創建自定義 Tooltips 功能。本文詳細解釋了 JS 的下載、引用、基本使用、參數設定和客製化樣式，並提供了實用的 Demo 和原始碼，是前端開發者的寶貴資源。
簡單的網頁截圖功能 – html2canvas、Canvas2image
這篇文章教你如何使用 html2canvas 和 Canvas2image 來將網頁的特定區塊轉換成圖像文件。文章內容包括將指定的 HTML 區塊轉換成 Canvas，將 Canvas 轉存成圖像文件，以及如何截取多個 div 並將它們存儲為圖像。文章提供了範例和原始碼，以及一個實用的 Demo 供讀者參考和使用。
Color Thief 找出圖片裡的顏色
這篇文章教你如何使用 Color Thief 這個 JavaScript 庫來從圖片中提取顏色。內容包括 Color Thief 的基本使用、如何引用 JS、使用 getColor 和 getPalette 函數來取得圖片的主要色碼和調色盤，以及進階使用技巧，例如如何將色碼由亮到暗排序，如何取得使用者選擇的圖檔，和如何將 RGB 色碼轉換為 Hex 色碼。文章最後還提供了原始碼和 Demo 供讀者參考。
OSM + Leaflet 學習筆記 3：定位、全螢幕、小地圖、列印、客製選單
探索 OpenStreetMap 和 Leaflet 插件的強大組合，學習如何進行 SHP 轉 GeoJSON，座標轉 WGS84，實現定位、全螢幕、小地圖、列印和客製選單功能。本文提供詳細的步驟和範例，是 GIS 和 Web 開發者的寶貴資源。
Javascript，XML 轉 JSON
探索如何使用 JavaScript 將 XML 資料轉換為 JSON 格式。本文提供了一個輕量級的解決方案，並分享了如何將政府公開的 XML 資料整合到開源地圖 OSM，製作捷運站點地圖的實例，並附帶相關程式碼和實用 Demo。
OSM + Leaflet 學習筆記 2：移動中心點、抓目前地點
探索如何使用 Leaflet 和 OSM 實現地圖中心點的移動和抓取當前位置。本文提供了 panTo、flyTo 和 panBy 的詳細使用方法，以及一個實用的 Demo 和代碼範例，幫助你輕鬆掌握這些技巧。
OSM + Leaflet 學習筆記 1：建地圖、marker、事件、換圖層
探索如何使用 OpenStreetMap 和 Leaflet 來創建、自訂和互動您的地圖。本教程提供了從請求位置到添加自訂標記和地圖樣式的詳細步驟和代碼示例。
製作一個 Hugo + Tailwind CSS 初始檔
深入了解如何製作 Hugo + Tailwind CSS 的初始檔。從安裝、開發到產生靜態檔，本文詳細指導了各種設定和技巧，包括使用 Open Graph、Schema 結構化資料和處理圖檔。完整的初始檔案也已分享在 GitHub 上供大家參考。
CLI（Command-line Interface） 學習筆記
深入了解 Command-line Interface (CLI) 的基本操作和技巧。從查詢目錄、切換和創建文件夾到使用 nano 編輯文件，本文提供了詳細的步驟和示例，幫助你掌握 CLI 的強大功能。
Recent Comments