程式碼之外，還有生活的藝術 前端工程師 / 攝影 / 生活紀錄

• 文章334
• 標籤474

標籤查看更多

• #frontendMasters
• #JavaScript
• #deepJavaScriptFoundationsV3
• #javaScriptTheHardPartsV3
• #fullStackFundamentals
• #webPerformanceFundamentals
• #TypeScript
• #youMightNotNeedAFramework
• #TypeCoercion

分類查看更多

• Advanced Web Dev Quiz (27)
• Deep JavaScript Foundations v3 (69)
• Full Stack Fundamentals (47)
• JavaScript Hard Parts v3 (50)
• JS地下城 (5)
• Testing Fundamentals (27)
• TypeScript Fundamentals (28)
• Web Performance Fundamentals (41)
• You Might Not Need a Framework (32)
• 學習經歷 (2)
• 生活亂談 (2)
• 程式筆記 (4)

Dev

前端技術、踩坑紀錄與學習筆記

332 篇

2026-07-179 分鐘閱讀

如何閱讀瀑布圖（Waterfall Chart）

介紹瀑布圖的結構、色彩代碼與資源載入順序，作為後續效能指標分析的基礎工具。

Web Performance Fundamentals

#frontendMasters #webPerformanceFundamentals #WaterfallChart #DevTools #NetworkPanel

2026-07-178 分鐘閱讀

網頁效能為什麼重要：SEO 與線上廣告篇

從搜尋引擎排名與線上廣告投報率出發，理解網頁效能對商業指標的直接影響。

Web Performance Fundamentals

#frontendMasters #webPerformanceFundamentals #SEO #CoreWebVitals

2026-07-166 分鐘閱讀

網頁效能與使用者體驗：關鍵數字與研究根據

從人機互動學術研究與實際數據出發，說明網頁效能如何直接影響使用者留存與信任。

Web Performance Fundamentals

#frontendMasters #webPerformanceFundamentals #UserExperience

2026-07-166 分鐘閱讀

網頁效能是什麼？課程架構與範例應用總覽

介紹 Web Performance Fundamentals 課程的整體架構與五大主題，並透過範例電商應用 Developer Stickers Online 直觀呈現網頁效能問題的多個面向。

Web Performance Fundamentals

#JavaScript #frontendMasters #webPerformanceFundamentals #WebPerformance #DevTools

2026-07-159 分鐘閱讀

Vanilla JS 在現代開發中的位置

回顧課程涵蓋的技術範圍，逐一對照課程開始時列出的開發者疑慮，並說明微型函式庫作為框架與純 Vanilla JS 之間的合理中間地帶。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #ReactiveProgramming

2026-07-1516 分鐘閱讀

用 Proxy 實現雙向資料綁定，以及完成應用程式的最後修正

用 Proxy 為表單實作雙向資料綁定，說明為何不會產生無限迴圈，以及修正頁面重新進入時選單不渲染的 Bug。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #Proxy #ReactiveProgramming #DOM

2026-07-1418 分鐘閱讀

完成購物車頁面：CartItem 與 OrderPage 元件，以及元件註冊的關鍵機制

建立 CartItem 與 OrderPage 元件完成購物車 UI，並說明忘記 import 導致元件無法渲染的常見陷阱與解法。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #WebComponents #DOM #ReactiveProgramming

2026-07-1415 分鐘閱讀

購物車邏輯與響應式徽章更新：Proxy、陣列不可變性與全域事件

實作購物車的新增與移除邏輯，說明 Proxy 無法偵測 push 操作的原因，並示範如何讓導覽列徽章響應式反映購物車數量。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #Proxy #ReactiveProgramming #DOM

2026-07-1313 分鐘閱讀

DetailsPage 元件：複用既有模式與調試 dataset 命名

建立 DetailsPage 元件，沿用 Shadow DOM 與 Fetch CSS 的模式，並排查 dataset 屬性命名不一致造成商品 ID 讀取失敗的問題。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #WebComponents #DOM

2026-07-1315 分鐘閱讀

ProductItem 元件與事件目標判斷：event.target 與 event.currentTarget

建立 ProductItem 元件，處理連結內嵌按鈕的事件衝突，並實作依商品 ID 查找資料的非同步函式。

You Might Not Need a Framework

#JavaScript #frontendMasters #youMightNotNeedAFramework #WebComponents #EventListener

1...12131415161718...34

MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog