TIL

Today I Learn

Blogs

• フロントエンド単体テスト勉強会 - 第一回
• フロントエンド単体テスト勉強会 - 第二回
• 単体テストマニュアル 1 - プロジェクトにテスト環境を構築する
• 単体テストマニュアル 2 - 最初の単体テストを作成する
• 単体テストマニュアル 3 - Vitest 紹介
• 単体テストマニュアル 4 - テストダブル
• 単体テストマニュアル 5 - 検証
• git rebase と git merge の使い方と使用シーンを紹介します！
• 基本的な GitLab CI/CD 設定を紹介します！

Notes

Test

• Unit Test
  • 测试文件命名
  • 为什么要写测试
  • 写单元测试的好处
  • 单元级别的功能测试
  • 写单元测试的顺序
  • 不写测试的原因
  • 编写第一个单元测试
  • The Core APIs of Vitest
  • Debug of Vitest
  • 实现 Mini Test Runner
  • Vitest 和 Jest 的差异
  • 创建测试数据的三种方式
  • 后门操作准备数据
  • 最小准备数据原则
  • 程序的间接输入
    • 其他模块的函数
    • 第三方库提供的函数
    • 对象
    • Class
    • 常量
    • 环境变量
    • 全局变量
    • 全局变量 Mock Image
    • 通过依赖注入解决间接输入
    • 间接层处理技巧
  • 验证
    • 状态验证
    • 行为验证
    • Mock 和 Stub 的区别
  • 测试知识地图
  • 确保 SUT 是可预测的
  • 处理随机数
  • 处理日期
  • 处理 setTimeout
  • 处理 setInterval
  • 处理 Promise
  • API 的多种测试方案
  • 参数化验证
  • 测试的基本策略
  • 不值得写测试的代码
  • 测试替身思想
  • 测试替身类型
  • 独居测试和群居测试
  • 测试的拆卸
  • Vitest 模拟浏览器环境和自定义环境
  • 测试命名的艺术
  • 快照测试
  • React
    • 测试 Custom Hooks
  • Vitest 环境配置
    • 基于 Vitest 的单元测试环境构建
  • Coverage
    • 解决 Vitest Coverage 下报 JavaScript heap out of memory 错误
  • The Differences between jsdom and happy-dom
• E2E Test
  • Playwright
    • 不要并行地执行 Playwright E2E 测试

JavaScript

• Advanced JavaScript
  • ignition
  • JavaScript 代码在浏览器里是如何被执行的
  • JavaScript 引擎
  • Parse
  • script 标签的 async 和 defer 属性
  • v8 引擎运行原理
  • 抽象语法树
  • 浏览器内核和 JavaScript 引擎的关系
  • 浏览器渲染过程
  • 编程语言的三个阶段
• Array
  • loop array
  • the nature of array
  • Currying
    • Currying - Arrow Function
    • Currying - Achieve functionality across different compatibilities
    • Curring - Defered Execution
    • Currying - Reuse Parameter
• Blob
• Books
  • JavaScript 设计模式与开发实践
    • 前言
    • 第一部分 基础知识
    • 1.1. 面向对象的 javascript
    • 1.2. this call apply
    • 1.3. 闭包和高阶函数
    • 第二部分 设计模式
    • 2.4. 单例模式
    • 2.5. 策略模式
    • 2.6. 代理模式
    • 2.7. 迭代器模式
    • 2.8. 发布-订阅模式
    • 2.9. 命令模式
    • 2.10. 组合模式
  • 下载 CSV 文件
• Function
  • Function Arguments
  • The differences between bind and apply and call
• Promise
  • Async / Await
• Map
  • 1. What's Map
  • 2. Usage of Map
  • 3. Map 和 Object 的区别
  • 4. Iterator
  • 5. Map 和 Array 互相转换
  • 6. Map and WeakMap
• Number
  • Convert Number to Currency
  • Convert Number to Percentage
• String
  • URL Parameters to Object
• Object
  • Object.entries(obj) & Object.fromEntries(iterable)
• Operator
  • || operator & ?? operator
  • ?. operator

TypeScript

• 基础知识
  • any
  • array
  • class
  • enums
  • function
  • generics
  • index signatures & record type
  • index signatures
  • keyof assertions
  • literal
  • never
  • non-null assertion
  • object
  • reg exp
  • tuple
  • type assertions
  • type interface
  • typescript
  • union type
  • unknown
  • utility types
• tsconfig
  • path
• tsc
  • tsconfig
  • cli

React

• useState
• useRef
• useEffect
• Mini React
  • 实现最简 Mini React
  • JavaScript Pragma
  • 利用浏览器的空闲时间
  • fiber
  • 统一提交
  • 实现函数组件
  • 更新 VDom
  • 更新 children
• Bad Codes
  • 滥用 useLayoutEffect 和 useState

Vue

• Mini Vue
  • Vue3 源码介绍
  • 1. Happy path of reactivity
  • 2. track() process
  • 3. runner function
  • 4. The second parameter scheduler of effect
  • 5. stop() and onStop()
  • 6. readonly
  • 7. Implementation of isReactive()
  • 8. ref
  • 9. implementing component proxy object
  • 23. 实现代理对象
  • 26. 实现组件 props 功能
  • 27. emit 功能
  • 30. 实现 getCurrentInstance
  • 31. 实现 provide 和 inject 功能
  • 47. parse 的实现原理

Git

• Git Flow
• git rebase 和 git merge 的使用方法和使用场景
• Git Commit Date
• Rewrite Commit Message
• Fixing send-pack Errors in Git Push

CSS

• 点击某按钮后，为整个页面添加遮罩
• 滚动条样式
• image-rendering 属性
• 将 Title 在有 Icon 元素的 Header 里垂直水平居中