Sign in

Much of the information in this article comes from MDN. You can go to the further reading section for more details.

What is BFC

A BFC(block formatting context) is a mini layout system on your page. Everything in the BFC will not interfere with the outer world.

It is worth mentioning that a…

What is React component lifecycle? You can think of the lifecycle as the different stages of a component from birth to death.

Three major phases of a component’s lifecycle



It is called before mounting the component into DOM.

It is the place where you initialize the local state and binds event methods.


The render method…

React hooks hook out great features of react for your to use in functional components.

What are React hooks

Hooks are functions that hook into react state and lifecycle features from the function component. It does not work in class components.

It sounds odd, but the theory is pretty simple.

Lets’s take a look at how debounce and throttle works first.

This a pretty simple realization of debounce and throttle. In the product environment, you should use Lodash or other similar strictly library.


Webpack is a static module bundler. More specifically, Webpack establishes a dependency graph that consists of modules your web app needed for functioning as expected. Then, it uses this graph and configuration to generate bundles. …

Cross-site scripting (XSS)

What is XSS

Cross-site scripting (or XSS) allows an attacker to execute arbitrary JavaScript within the browser of a victim user.

There are couple of types of XSS: reflected, stored, dom-based, and mutation XSS.

First, one is reflected XSS, which simply reflected script tags in the response. …

HTTP devices can keep copies of popular documents. Maintaining a cache of the previous resources allows the client to use a local copy of the resource, thereby eliminating unnecessary HTTP requests.

Important HTTP headers related to the web cache

Normally, making an HTTP cache is about three HTTP headers: Cache-control, Last-modified, and Etag. …

Middleware, a extra step where async logics run.

Redux store itself don’t know anything about async logic. It only knows how to synchronously dispatch actions, update the state by calling the root reducer, and notify the ui which needs to be updated. Any asynchronicity happen outside the store.

Redux middleware…

The React docs state:

In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.

Background info:

Form elements, includes input, select, text area. …

Redux is a predictable state container for JavaScript apps.

Global state and component state.

Only Global state that come across the app should go into redux store, others that’s only needed in one place should be kept in component state.


A front-end developer who likes designing stuffs. Technical blog rookie. Loving sharing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store