Understanding React.js (Part 2) - Batched Updates

In React, we can update the states of class components via setState() and update states of function components via hooks (i.e., useState()). These changes cause parts of the component tree to re-render. A naïve mechanism would be to re-render the component on every call of setState(), which would be inefficient when there are multiple calls of setState() inside a React event handler or synchronous lifecycle method.

Understanding React.js (Part 1) - Module System and Injection

During the process of re-implementing React.js in Typescript (code at GitHub), I get a chance to look deeper into the source code of React. At this stage, I am focusing on an old version of React (v15+), which essentially uses the stack reconciler. The newer version of React uses fiber reconciler, which will be covered in later posts.

Typescript将 async/await 编译到ES5

async/await 在编写异步逻辑时非常方便。通常编译器会使用 yield 来实现 async/await。可惜的是，ES5里没有 yield 关键词。为了兼容 ES5，Typescript采用了一些很简洁的帮助函数 (helper functions)，模拟了 generator 等功能。这篇文章就简单的了解一下这个过程。 这篇文章参考了Marius Schulz的博客。因为这篇博客发表得较早(2016年），里面的某些帮助函数存在一些小bug，本文也会讨论后来是怎么修复的。

JavaScript手写new, call, apply, bind

在前端面试时，经常考察手写 JavaScript 的 new, call, apply 和 bind。 这里把我的一些理解整理到这里，方便以后复习。

JS正则之正向预查与数字转换千分位

最近遇到一道面试题： 将一串数字表示成千分位格式，例如 10000000000.12，转换成 10,000,000,000.12。 如果直接用字符串拼接，这道题还是挺简单的。但如果要求用正则表达式，我就没了思路。后来在网上搜了一下，才知道需要用正向预查。网上的解法比较多，但有些只考虑了整数部分，有些只考虑了两位小数，不够通用。这里把这些方法分析一下，总结出一个自己满意的版本。

Dive into Tor (The Onion Router)

The Onion Router, commonly referred as “Tor”, is a well-known technique for anonymous communication. In an onion network, messages are first encrypted, and go through a series of randomly picked proxies (called onion routers) before reaching the destination. Therefore, it is very difficult (although not impossible) to trace the message sender.

Activity Theory in HCI

Activity theory is a framework that can help designers and researchers ask the right questions to resolve their complex problems, but it does not provide a ready-to-use solution. This is unlike a traditional “theory” that acts as a predictive model. In other words, activity theory is more like a meta-theory than a predictive theory.

Border Animation in CSS and JavaScript

This post covers several ways of animating a path as if we are drawing it manually.

Dig into Python super() and MRO

By reading this post, I assume you have already understood the meaning of super() and “MRO” in Python. Here is a short summary. MRO stands for Method Resolution Order and is used to determine how a method is looked up in class inheritance. The C3 algorithm describes how to build a linearization of a class hierarchy, which is an ordered list of the ancestors, i.e., SubClass.__mro__.

Implementing slicing in __getitem__

Sometimes, we need to implement slicing functionality in our own class. Below is an example using slicing to get the installed Python version (copied from six.py, a Python2 and 3 compatibility library):