程式碼之外，還有生活的藝術 前端工程師 / 攝影 / 生活紀錄
- 文章334
- 標籤474
標籤查看更多
分類查看更多
- 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-09-1516 分鐘閱讀
講師 Steve Kinney 開放讓學員自由決定數學函式該怎麼處理邊界輸入，示範怎麼讓 subtract 接受陣列並用 reduce 依序運算、用預設參數處理 undefined、揭露 null 不會被預設參數接住的行為差異，並在重構除以零的判斷邏輯時，靠測試立刻抓出自己不小心弄壞的既有案例。
2026-09-1517 分鐘閱讀
講師 Steve Kinney 帶著全班決定加法函式該怎麼處理字串輸入，示範用 toThrow 測試錯誤情境時為什麼要包一層匿名函式，並揭露只檢查單一參數的邏輯漏洞；也說明為什麼該斷言具體錯誤訊息、而不只是「有沒有拋出錯誤」，避免測試在原因不對時仍通過、帶來假的安全感，也談如何用結對練習逼出真正正確的實作。
Testing Fundamentals
#frontendMasters #testingFundamentals #JavaScript #Vitest #UnhappyPath #ErrorHandling #TypeCoercion #Assertions #UnitTesting 2026-09-1413 分鐘閱讀
講師 Steve Kinney 談測試的通用原則，說明程式碼覆蓋率為什麼只是假象，因為它只計算測試實際涵蓋到的程式碼、涵蓋不到的部分完全不算數；並帶出 unhappy path 的概念，用 JavaScript 型別轉換的怪異行為，示範面對非預期輸入時，優雅失敗、拋出錯誤、放著不管這三種選擇背後的取捨與代價。
Testing Fundamentals
#frontendMasters #testingFundamentals #JavaScript #TestCoverage #UnitTesting #TypeCoercion #UnhappyPath #ErrorHandling 2026-09-1410 分鐘閱讀
講師 Steve Kinney 帶著減法、乘法、除法三個函式重複走一次紅燈變綠燈的流程，目的不是數學本身，而是練出撰寫測試的肌肉記憶與良好習慣；並說明為什麼測試驅動開發不是任何時候都適用，遇到既有無測試程式碼、或連問題本身都還沒釐清的 bug report 時，往往很難照著理想流程走完整個循環。
Testing Fundamentals
#frontendMasters #testingFundamentals #JavaScript #Vitest #TestDrivenDevelopment #UnitTesting 2026-09-1311 分鐘閱讀
講師 Steve Kinney 換用一個基礎加法函式，示範測試檔案怎麼被測試執行器依命名規則找到、空測試檔會怎麼報錯，以及 .todo 與 .skip 這兩種暫停測試方式的差異，並實際走一次測試驅動開發的紅燈、綠燈、重構循環，也說明為什麼優先匯入單一函式測試，而不是把整包應用程式一起拉進來測試。
Testing Fundamentals
#frontendMasters #testingFundamentals #JavaScript #Vitest #TestDrivenDevelopment #TestRunner #PendingTests #UnitTesting 2026-09-1312 分鐘閱讀
講師 Steve Kinney 拆解測試從執行到失敗的完整機制，說明 npm test 如何連到 package.json 裡的 vitest 指令，也提到測試執行器只重跑異動檔案的效率設計；並用註解斷言、拋出錯誤、非同步 setTimeout 範例，說明測試通過只代表沒拋出錯誤，不代表程式碼真的正確。
Testing Fundamentals
#frontendMasters #testingFundamentals #JavaScript #Vitest #TestRunner #AsyncJavaScript #Assertions 2026-09-1211 分鐘閱讀
講師 Steve Kinney 說明課程如何從簡單的暖身測試逐步升溫到已知情境外的邊界案例，並解釋為何測試覆蓋率的數字不是最終目標；同時點出 mocking 過度會讓測試產生假陽性、悄悄失去消除改動焦慮的意義，也一併說明為何選用 Vitest 這款測試工具，以及課程附帶的筆記網站與範例程式庫資源。
Testing Fundamentals
#frontendMasters #testingFundamentals #JavaScript #Vitest #Mocking #TestCoverage #TestRunner #DOMTesting #FlakyTests 2026-09-1211 分鐘閱讀
講師 Steve Kinney 說明寫測試本身不難，真正困難的是把程式碼寫成容易測試的樣子，測試技巧與程式碼結構是同等重要的兩件事；並提出判斷「該開始寫測試」的具體訊號，是改動程式碼時不確定會不會弄壞其他東西的那種焦慮感，再透過 vitest 撰寫的最簡單範例，帶出測試核心結構與測試驅動開發的基本精神。
Testing Fundamentals
#frontendMasters #testingFundamentals #JavaScript #TestDrivenDevelopment #Vitest #TestRunner 2026-09-1112 分鐘閱讀
用一個只在回傳型別出現一次型別參數的 returnAs 函式，示範這種寫法其實等同於危險的雙重轉型、讓 TypeScript 說謊，藉此提出核心原則：型別參數至少要在函式簽名裡出現兩次，才能真正描述型別之間的關聯，並用 makeTuple 這個雙泛型範例展示型別推斷如何同時作用在多個型別參數上。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #Generics #TypeParameters #TypeInference #TypeCasting 2026-09-1116 分鐘閱讀
用一個把電話清單轉成字典的 listToDict 函式，示範直接用 any 雖然帶來彈性、卻犧牲了型別資訊，再改用泛型型別參數
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #Generics #TypeParameters #TypeInference MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog