Day 20｜滑過去出現的，不一定是 Tooltip：Tooltip、Popover 與 Hover Card
2026 iThome 鐵人賽 Vibe Coding UI Day 20：安安～我是ChiYu～ 昨天，我把林子安的詳細資料放進 Drawer，總算不用每看一位成員，就把整張清單蓋起來一次。 清單脈絡保住了，Drawer 裡卻又冒出三個需求： - 角色欄位旁的問號，要解釋權限規則。 - 管理員要能繼續變更…
Vibe Coding
UX/UI
Frontend
Last 7 days
近 7 天熱門文章
全部文章依近 7 天的 GoatCounter 點閱數重新排序，最能看出這一週正在被討論的主題。資料每天自動同步一次。
212 篇文章
35 篇有近 7 天點閱
全站近 7 天點閱 365
同步於 2026-11-02 08:17
Ranked by views
近 7 天點閱排行
有近 7 天點閱紀錄的文章排在前面，其餘依發布日期排列；點閱數每天同步一次。
72
一般更新
AI 協作
2026-09-19
20 分鐘閱讀
近 7 天 0 次點閱
Day 19｜兩個執行流程同時處理同一筆 Work Item，為什麼會重複通知？從競態條件到 Outbox 與冪等設計
2026 iThome 鐵人賽 AI CleanCode Day 19：安安～我是ChiYu～ 昨天加入背景 Worker 後，逾期流程多了第二個入口：使用者可以透過 HTTP 主動觸發，Worker 也會依排程執行，最後兩邊都呼叫同一個 IOverdueWorkItemProcessor.ProcessA…
AI Agent
Software Engineering
Software Architecture
Testing
73
一般更新
前端開發
2026-09-19
5 分鐘閱讀
近 7 天 0 次點閱
Day 19｜同一場活動收藏兩次，網站為什麼只能留下同一筆？
2026 iThome 鐵人賽 WebMCP Day 19：安安～我是ChiYu～ 昨天把唯讀失敗拆成「該停止」與「可以稍後重試」，也確認 Agent 不能一遇到錯誤就擅自換 動作。今天終於往前跨一步，讓它真的改變網站狀態。 不過第一次寫入，我沒有直接挑報名。報名會占用名額，一個不小心就不是 Demo，而是…
WebMCP
AI Agent
JavaScript
74
一般更新
前端開發
2026-09-19
9 分鐘閱讀
近 7 天 0 次點閱
Day 19｜點資料表一列後，不一定要跳 Modal：Drawer、Sheet 與 Bottom Sheet
2026 iThome 鐵人賽 Vibe Coding UI Day 19：安安～我是ChiYu～ 昨天，我用 Escape 取消了「停用林子安」這個危險動作。帳號保住了，管理員也沒有因此下班，反而接著問： 那我可以先看一下林子安的部門、角色和目前專案嗎？ 很合理。停用帳號以前先把資料看完，總比按下去之後才…
Vibe Coding
UX/UI
Frontend
75
一般更新
AI 協作
2026-09-18
17 分鐘閱讀
近 7 天 0 次點閱
Day 18｜AI 一次完成三項需求，和逐步設計相比，加入背景 Worker 時有什麼差別？
2026 iThome 鐵人賽 AI CleanCode Day 18：安安～我是ChiYu～ 昨天談完元件原則後，Work Item API 已經形成三個清楚的責任區域：API 處理 HTTP、資料與通知流程，WorkItems.ServiceLevel 保存共用的 SLA 規則，Reporter 則是只…
AI Agent
Software Engineering
Software Architecture
Testing
76
一般更新
前端開發
2026-09-18
6 分鐘閱讀
近 7 天 0 次點閱
Day 18｜活動服務暫時失敗時，Agent 應該重試還是停下來？
2026 iThome 鐵人賽 WebMCP Day 18：安安～我是ChiYu～ 昨天才把成功 payload 收乾淨，今天我就準備把活動 API 暫時弄壞。 原本的計畫很單純：封鎖活動詳情 API，讓 get_event_details 收到暫時失敗，再看 Agent 能不能 回答「可以稍後重試」。結果…
WebMCP
AI Agent
JavaScript
77
一般更新
前端開發
2026-09-18
9 分鐘閱讀
近 7 天 0 次點閱
Day 18｜彈窗要不要鎖住背景？Modal、Non-modal、Alert Dialog 與危險確認
2026 iThome 鐵人賽 Vibe Coding UI Day 18：安安～我是ChiYu～ 專案結構整理清楚後，我按下成員列上的「停用帳號」。畫面中央立刻出現一張白色卡片，後面有灰色遮罩，右下角還放了一顆紅色按鈕。 看起來非常像完成品。 下面是依照第一版問題重建的錯誤現場，不含真實帳號與個人資料： …
Vibe Coding
UX/UI
Frontend
78
一般更新
AI 協作
2026-09-17
20 分鐘閱讀
近 7 天 0 次點閱
Day 17｜AI 把 API 拆成多個 Project，怎麼判斷哪些元件邊界值得留下？
2026 iThome 鐵人賽 AI CleanCode Day 17：安安～我是ChiYu～ 昨天整理完通知的行為契約、Consumer 需要的能力與原始碼依賴方向後，系列接續版本仍只有一個 Production Project。IWorkItemNotificationSender 由高階 Use Ca…
AI Agent
Software Engineering
Software Architecture
Testing
79
一般更新
前端開發
2026-09-17
5 分鐘閱讀
近 7 天 0 次點閱
Day 17｜Tool 回太少做不完，回太多又把內部資料倒給 Agent
2026 iThome 鐵人賽 WebMCP Day 17：安安～我是ChiYu～ 昨天的 get_event_details 終於不用再猜 current，可以從目前頁面找到正確活動。照理說， 接下來只要把資料交給 Agent，讓它整理完就收工。 結果我一看 Tool result，新的問題馬上排隊進場：…
WebMCP
AI Agent
JavaScript
80
一般更新
前端開發
2026-09-17
10 分鐘閱讀
近 7 天 0 次點閱
Day 17｜資料有層級時，別只用縮排：Tree View、Nested List、Treegrid 與 Expandable Row
2026 iThome 鐵人賽 Vibe Coding UI Day 17：安安～我是ChiYu～ 昨天把資料值和命令分開後，我從 Command Palette 執行「檢視專案結構」。AI 很快交出一張有箭頭、有縮排，點下去也會展開的畫面。 乍看就是一棵樹。 再看仔細一點，子專案、附件、檢核紀錄和備註全部…
Vibe Coding
UX/UI
Frontend