現在的 AI Agent 已經可以看懂網頁、找到按鈕、填寫表單，甚至幫我們完成一連串操作。不過，要讓 Agent 模擬人類操作網頁，都還是已讀懂 DOM 元素為主，有點像請一位很聰明的新同事，盯著畫面猜每個按鈕到底能不能按，或按下去的效果如何，不一定能真正理解一個網頁本身設計的意圖。

而 WebMCP 提供了另一條路：網站直接把「搜尋商品」、「加入購物車」、「預約餐廳」等功能宣告成結構化工具，讓瀏覽器中的 AI Agent 可以發現並呼叫。

今天這篇文章我們先從 WebMCP 的基本概念開始，看看它解決什麼問題、和 MCP 有什麼不同，以及官方提供的 Imperative API 與 Declarative API 如何運作。

前陣子在 Youtube 上看到了一部影片，介紹了好幾個 node.js 的套件，來幫助我們打造漂亮的 CLI，才後知後覺的發現一直在使用的 Angular CLI、Schematics 等等，許多由 node.js 開發的 CLI 工具，背後那些美觀的畫面都是基於這些套件，而不是自己刻的，所以整理了一下這些套件的介紹與示範！

Webpack 是強大的前端打包工具，可以幫助我們快速的將前端 JavaScript 程式及其用到的相關程式都打包成一個或數個 js 檔。同時也可以將不需要的程式透過 tree shaking 機制過濾掉。

不過在前端的世界對於檔案大小是錙銖必較的，因此知道 webpack 到底打包了哪些程式，哪些程式是過濾不掉的，就非常重要了！

好在 Webpack 提供了一個功能，讓我們能快速分析出打包的結果，到底包進哪些程式，程式大小等等清清楚楚，今天就來看看如何分析Webpack 打包後的結果。

Lena.js是一個簡單易用的影像處理類別庫，內建了一些常見的濾鏡，可以用來補齊CSS濾鏡的不足，又不用擔心使用上太過困難，只要簡單幾行程式碼就可以套用濾鏡了。今天就來簡單玩玩Lena.js吧！

隨著大數據越來越熱門，資料視覺化也變得越來越重要，能夠以簡單明瞭的圖像顯示數據的意義，對於決策者進行決策有非常大的幫助，過去要製作這些資料圖表大多必須依靠Excel這類軟體來繪製，但靈活度不高，也難以跟資料庫連接處理，更別說不太好看了。所以今天就來紀紹一個前端資料視覺化的library - Chart.js

昨天我們介紹了PDF.js這套用來讓前端可以直接瀏覽PDF檔的library，今天我們來介紹一款可以在前端直接產生PDF檔的神奇程式－jsPDF。

如果要說有一個放諸四海皆準的通用文件格式，那麼想當然一定就是PDF了，雖然PDF是一個標準的文件規格，但要瀏覽PDF檔還是需要透過安裝軟體來顯示的，而今天要介紹的PDF.js就是一款可讓我們直接在web上顯示PDF檔的JavaScrtipt library！

jQuery Knob是一款讓我們能夠用旋鈕這種與眾不同的方式輸入數字的jQuery外掛，除了可以確保user輸入的一定是數字以外，也可以簡化user選擇/輸入數字的過程。

在web app中遇到需要選擇日期、時間需求的時候，日期通常很簡單，大部分的UI元件都可以用表格做出一個簡單的日曆來選擇，而時間通常就比較沒那麼直覺，多半都是用個下拉選單選擇時間，或是直接輸入；而今天要介紹的ClockPicker，則是一個採用更直覺的方式，讓我們能直接在時鐘上選擇時間的酷炫library。

在設計CMS之類的系統時，常常會需要一個表單和一個瀏覽資料的頁面，以新型新增、修改和查詢的工作，不過畫面排版通常會非常類似，只差在表單有額外的表單控制項，而瀏覽頁面就是單純的文字而已，但當需要更新排版時，就需要兩個頁面都同時修改，非常不方便；這時候透過X-editable，就能夠在瀏覽的頁面同時編輯資料囉