GitHub Copilot + Figma MCP Server 實戰：用 AI 快速切版教學
學會如何結合 GitHub Copilot 的 Agent 模式與 Figma MCP Server，自動產出 HTML/CSS 切版，加速前端開發流程，適合工程師與設計師參考的實用範例教學。
GitLab Pages：3 + 3 個步驟讓 GitLab 專案產生靜態頁
深入了解如何在 GitLab 上生成靜態頁。這篇筆記文提供了從建立專案、設定文件到部署靜態頁的詳細步驟，包括公開頁面和設定 GitLab Pages 的指南。
簡單的網頁截圖功能 – DOM to Image
這篇文章教你如何使用 DOM to Image 進行網頁截圖。內容包括如何安裝和使用 DOM to Image，注意事項，以及一個實用的 Demo 和原始碼。文章還探討了 Notion AI 生成的文章，並在最後提供了一個關於生成式 AI 影響的彩蛋。
用 HTML 的 capture 屬性，開啟手機鏡頭進行拍照、錄影
探索如何使用 HTML 的 capture 屬性開啟手機鏡頭進行拍照和錄影。本文詳細解釋了開啟鏡頭、預覽照片和影片、轉圖片和轉影片的方法，以及客製 input file 和支援度和安全性的考慮。附帶實用範例和說明。
用 JavaScript 做一個 Tooltips 功能
深入了解如何用 JavaScript 創建自定義 Tooltips 功能。本文詳細解釋了 JS 的下載、引用、基本使用、參數設定和客製化樣式，並提供了實用的 Demo 和原始碼，是前端開發者的寶貴資源。
簡單的網頁截圖功能 – html2canvas、Canvas2image
這篇文章教你如何使用 html2canvas 和 Canvas2image 來將網頁的特定區塊轉換成圖像文件。文章內容包括將指定的 HTML 區塊轉換成 Canvas，將 Canvas 轉存成圖像文件，以及如何截取多個 div 並將它們存儲為圖像。文章提供了範例和原始碼，以及一個實用的 Demo 供讀者參考和使用。
製作一個 Hugo + Tailwind CSS 初始檔
深入了解如何製作 Hugo + Tailwind CSS 的初始檔。從安裝、開發到產生靜態檔，本文詳細指導了各種設定和技巧，包括使用 Open Graph、Schema 結構化資料和處理圖檔。完整的初始檔案也已分享在 GitHub 上供大家參考。
表單驗證：中文姓名、身分證、手機條碼、生日、信箱、手機、選擇縣市
本篇大綱：本篇要解決的問題。中文姓名。身分證字號、手機條碼。生日 / 出生年月日。E-mail 電子信箱。手機。選擇縣市。範例及原始碼。
Plyr 播放器使用筆記：控制項、取值、事件、改樣式、外部平台影片
本篇大綱：本篇要解決的問題。建立影片播放器及控制項、開啟所有控制項、新增字幕檔、新增多種畫質選擇、提示 Tooltip、中文化介面、時間軸加上段落標記。取值：影片總時長、當下秒數。監聽事件：播放、暫停。修改樣式。外部平台影片：Youtube、Vimeo。
Video.js 使用筆記：中文介面、取值、事件、改樣式
本篇大綱：本篇要解決的問題。建立影片播放器、引用 CSS、JS、HTML。使用中文介面。取值：影片總長度、當下秒數。監聽事件：播放、暫停。改變播放器樣式。範例原始碼。
改變 iframe src 時不增加瀏覽歷史紀錄
本篇大綱：本篇要解決的問題。製作一個 Demo。解法：直接替換掉 iframe 的 HTML。實測後發現，是每換一次 iframe src，瀏覽紀錄就會被新增一筆，所以按了上一頁，就是回到原頁，使用者就會以為上一頁的按鈕壞了。
Recent Comments