https://www.naya.tw/categories/front-end/Recent content in Front-end on yishiashia's BlogHugo -- gohugo.iozh-TWCopyright © 2023 yishiashia@gmail.com. All rights reserved.Wed, 25 Feb 2026 23:50:00 +0800https://www.naya.tw/posts/webmcp-introduction/Wed, 25 Feb 2026 23:50:00 +0800https://www.naya.tw/posts/webmcp-introduction/深入解析當紅的瀏覽器原生標準 WebMCP (Web Model Context Protocol)。本文將介紹 WebMCP 的運作原理，並透過「企業訂便當系統」與「電影院訂票系統」這兩個實際的 Demo，帶你一步步了解如何使用 Declarative API 與 Imperative API 將現有網頁改造成 Agent-ready 的智能介面。https://www.naya.tw/posts/chrome-devtool-mock-api/Fri, 20 Dec 2024 18:45:22 +0800https://www.naya.tw/posts/chrome-devtool-mock-api/介紹如何使用 Chrome 開發者工具模擬後端 API 回應，讓前端開發不需等待後端完成即可進行開發。這個方法可以將測試資料與專案程式碼分離，方便管理測試案例，還能應用於自動化測試中，是前後端分離開發的實用工具。https://www.naya.tw/posts/webcomponent-introduction-3/Thu, 21 Dec 2023 14:00:11 +0800https://www.naya.tw/posts/webcomponent-introduction-3/介紹如何將 Web Components 模組化並發布到 NPM 套件庫，包含使用 IIFE、打包工具的說明，以及如何透過 CDN 或 npm 安裝使用模組。從開發到發布的完整流程讓您快速學會重用 UI 元件。https://www.naya.tw/posts/webcomponent-introduction-2/Sat, 16 Dec 2023 22:00:11 +0800https://www.naya.tw/posts/webcomponent-introduction-2/透過實作 Tooltip UI 元件來深入了解 Web Components 的應用。從零開始建立自定義元件，包含基礎模板設計、事件處理和樣式設定，並提供完整的程式碼範例，展示如何打造可重複使用的網頁元件。https://www.naya.tw/posts/webcomponent-introduction-1/Wed, 29 Nov 2023 11:24:11 +0800https://www.naya.tw/posts/webcomponent-introduction-1/探討 Web Components 的核心概念，包含 Custom Elements、Shadow DOM 和 HTML Templates 三大特性。了解如何使用原生 JavaScript 建立可重複使用的 UI 元件，並透過封裝避免樣式衝突。https://www.naya.tw/posts/dark-mode-and-css-color-scheme/Tue, 28 Nov 2023 14:39:11 +0800https://www.naya.tw/posts/dark-mode-and-css-color-scheme/了解如何使用 CSS color-scheme 和 prefers-color-scheme 屬性實作網頁深色模式，包含使用者代理樣式表的運用，以提升使用者的閱讀體驗和減少眼睛疲勞。https://www.naya.tw/posts/passkey-and-webauthn-passwordless-authentication/Tue, 15 Nov 2022 16:22:57 +0800https://www.naya.tw/posts/passkey-and-webauthn-passwordless-authentication/深入介紹 WebAuthn 無密碼驗證機制與 Passkey 技術，包含 FIDO2 認證流程說明與實作範例。了解如何使用指紋辨識、Face ID 等生物特徵，替代傳統的密碼登入方式，提供更安全的網站驗證機制。https://www.naya.tw/posts/offline-image-storage-using-indexeddb/Fri, 07 Oct 2022 15:51:22 +0800https://www.naya.tw/posts/offline-image-storage-using-indexeddb/學習如何使用 indexedDB 和 Service Worker 實現網頁圖片的離線儲存功能，特別適用於需要處理大量圖片快取的 PWA 應用，如聊天室貼圖功能。包含完整的實作說明和程式碼範例。https://www.naya.tw/posts/switch-themes-with-css-variable/Wed, 10 Aug 2022 14:36:11 +0800https://www.naya.tw/posts/switch-themes-with-css-variable/學習如何使用 CSS Variables (CSS 自訂屬性) 實現網站主題切換功能，包含 light/dark mode 實作方式、在 WebComponent 中的應用以及與 TailwindCSS 的整合運用。