https://www.naya.tw/Recent content on yishiashia's BlogHugo -- gohugo.iozh-TWCopyright © 2023 yishiashia@gmail.com. All rights reserved.Thu, 10 Sep 2026 23:40:00 +0800https://www.naya.tw/posts/authority-boundary-human-on-the-loop/Thu, 10 Sep 2026 23:40:00 +0800https://www.naya.tw/posts/authority-boundary-human-on-the-loop/harness engineering 信任鏈的最後一環是 Authority（授權）。本文從 commit、push、審查與放行的邊界談起，說明薄介面不應自行擴大權限，以及如何依風險把人的注意力從 Human-in-the-loop 移到 Human-on-the-loop。https://www.naya.tw/posts/reproducible-verification-and-attestation/Thu, 10 Sep 2026 22:53:00 +0800https://www.naya.tw/posts/reproducible-verification-and-attestation/在 harness engineering 的信任鏈裡，驗收分成兩半：機器產出的「可重現證據」與獨立審查者或審查機制進行的「獨立確認」。本文說明 LLM review 的適當邊界、如何把 Evidence 綁定到確切版本，以及為什麼「審查通過」不等於可以合併或上線。https://www.naya.tw/posts/spec-as-contract/Thu, 10 Sep 2026 21:45:00 +0800https://www.naya.tw/posts/spec-as-contract/在 harness engineering 的信任鏈裡，第一環是「合約」。本文從規格漂移談起，說明如何透過 DECLARE 與 BIND，把需求、非目標與架構決策固定成可對帳的版本基準，並釐清數位指紋、數位簽署與授權之間的差異。https://www.naya.tw/posts/harness-engineering-governance/Mon, 07 Sep 2026 20:00:00 +0800https://www.naya.tw/posts/harness-engineering-governance/當大語言模型逐漸普及、使用門檻持續降低，AI Agent 的競爭重心正從「模型多聰明」上移到模型外的骨架 —— harness。本文介紹 harness engineering 的概念，說明為什麼「驗證與治理」是這層骨架裡最需要長期累積、也最難取代的一塊，並提出從「相信 agent」轉向「驗證結果」的治理主線與四支柱框架。https://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/my-webcomponents/Fri, 15 Dec 2023 10:23:22 +0800https://www.naya.tw/posts/my-webcomponents/前言 在學會使用 WebComponent 的相關技巧後，陸陸續續也實作了不少的 UI 元件， 方便後續在進行前端專案的時候可以快速的重複使用。 而且不管您的專案是使用 VueJS、ReactJS 或者Angular， 都可以支援原生的 WebComponent，所以等於是一個通用的軍火庫， 寫一次就可以 Use everywhere，所以非常推薦將您常用的 UI 元件寫成 WebComponent 版本。 下面整理我目前有實作開源的 WebComponent 元件，後續如果有新做的 WebComponent 元件， 也會繼續更新上來，如果使用上有問題也歡迎發 issue 給我，謝謝 😊 小型輕量的 WebComponents 元件庫 項次 WebComponent 元件 安裝 / 原始碼 1 WebComponent Demo | swipe-to-refresh A WebComponent to pull the window down and refresh. 2 WebComponent Demo | mic-input Speech input WebComponent implemented with Web Speech API. 3 WebComponent Demo | star-input Star rating input implemented with WebComponent.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/introduction-to-basic-cryptography/Mon, 07 Nov 2022 16:12:47 +0800https://www.naya.tw/posts/introduction-to-basic-cryptography/了解密碼學基礎知識，包含對稱式與非對稱式加密演算法的運作原理、數位簽章和訊息保密的應用。適合想要學習資訊安全基礎概念的讀者閱讀。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/self-hosted-dns-with-coredns/Mon, 15 Aug 2022 15:25:41 +0800https://www.naya.tw/posts/self-hosted-dns-with-coredns/學習如何使用 CoreDNS 建立自己的 DNS Server，包含安裝步驟、Corefile 設定、DNS 記錄管理，以及實際壓力測試結果。適合需要管理大量 DNS 記錄或想架設私有 DNS 伺服器的開發者參考。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 的整合運用。