• Software for All: Accessibility

    Software Accessibility is something important and personally important part of my work as a software engineer, as it my job meaningful. I would like to share why is this something important and you should care about it, as long as you work in the field of software. Link to slide:

  • Tools I Use for Web Development

    List of tools that I use and recommend

  • KL React June Meetup

    This is our June online meetup. Talks: - Accessibility First, by Abhishek Prasad Looking into how we can design websites for people with physical disabilities, situational disabilities, and socio-economic restrictions. Thereby, taking care of the entire spectrum of our users. - Effective TypeScript: 7 Ways to Improve Your TypeScript, by Malcolm Kee TypeScript is getting traction in recent years as it provides type safety to the dynamic JavaScript without causing runtime overhead. However, as TypeScript keep evolving, the yesterday best practices may becomes obsolete and should be replaced with something more idiomatic and powerful features. This talk will covers 7 concrete and actionable tips to improve your TypeScript code.

  • How Test Runner and Assertion Works

    In this video, we will learn how test runner and assertion works by writing a simple version from scratch. Then, we will learn to use Jest as our test runner and use the assertions provided by Jest. Credits: Music by DJ Freedem (

  • Jest Do It: JavaScript Testing Fundamentals

    Learn how to get started with JavaScript automated testing with Jest. From this video, you'll learn - how test runner and assertion works by write a simple version from scratch - how to assert dynamic behavior using Mock function - how to test asynchronous code - how to mock API calls or non-deterministic code - how to use snapshot testing effectively Code repository: Deck: Credits: Music by DJ Freedem (

  • End-to-End Testing Using Cypress

    Learn how to get started with end-to-end testing using Cypress. We will go through how to install Cypress on an existing project and pro-tips to make your tests easy to write and maintain. Code repo [start]: Code repo [end]:

  • 制造网站基础2:如何自学HTML与CSS

    我对我妹解释我的工作 要怎么开始自己学习HTML与CSS

  • Fake It Till You Make It: Frontend Development When Backend Dies

    In most frontend applications, we make API calls to get and update data. However, the dependencies to backend services would cause our development blocked when our backend service dies or inaccessible. This webcast discuss a few tools to remove this dependencies to backend API so that we can develop independently without worrying about the readiness of the service and internet connection. Links to code: JSON-Server: Mirage: MSW:

  • 制造网站基础:HTML与CSS

    我对我妹解释我的工作 学习怎么用HTML与CSS制作你的个人网站

  • Automated Testing: Testing React Application

    In this webcast, we'll learn about how to write tests for your React application using Jest (comes with Create React App) and React Testing Library. - Test rendering logic of a React component - Test how the component responds to user interaction - Test asynchronous behavior of React component (API calls) - Test Redux-connected React component Table of Content: - 04:57 - how to run tests - 08:28 - write test for a simple component (Button) - 17:36 - use React Testing Library for common component test setup - 22:07 - how to use Jest snapshot test - 25:10 - write test for a component with state (Alert) - 32:05 - simulate user click with fireEvent - 35:32 - write test for component with API calls - 37:53 - how to mock API calls - 42:09 - how to wait for asynchronous behavior to complete - 45:29 - testing component that uses React Router - 49:20 - how to test Redux connected component - 1:08:00 - Pro-tips - 1:12:50 - Q&A The code repository (start): The code repository (end):

  • Coding for Beginner with Scratch 新手编码入门

    学习怎么用容易上手的Scratch来学习编码。 Scratch是一个有美国MIT所开发的一个编码工具,利用容易上手的图形来让小孩或初学者理解编码的概念。

  • Automated Testing: Benefits and Costs

    Short sharing about the benefits and costs of automated testing from perspective of developer

  • ConsoleLogger #1: Build a Podomoro Clock

    Livestreaming coding on how to build a Podomoro clock

  • Livestreaming: Redux to React Query

    Learn what is React Query and how to use it to replace some Redux code The example site: The repo:

  • Why The Hook

    Evolution of Stateful Logic Composition in React

  • React JS - Project Component Library

  • Intro to React JS V2 Part 2

  • Intro to ReactJS V2

  • React Workshop #1