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

Photo by Louis Hansel @shotsoflouis on Unsplash

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 Flex/Grid container element can create a Flex/Grid formatting context, which is very similar to a BFC except they cannot have floating child elements. However, using Flex and Grid can still solve external float and margin collapse problems.

How to create a BFC

There are multiple ways to create a BFC. …

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 is the only required method in a class component. It should be noted that it is different from the ReactDOM.render().


Component.render() takes no arguments and returns the corresponding React element tree for the component. Component.render() is called when the component’s state or props change and shouldComponentUpdate() lifecycle method return…

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

Photo by CHUTTERSNAP on Unsplash

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.

How to debounce and throttle a function

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

The source code of simple debounce and throttle


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. It is made primarily for bundling JavaScript, but it can transform static assets such as HTML, CSS, and images with corresponding loaders.


The Structure of Webpack

Webpack’s flexibility is mainly due to its configuration file, which describes how to transform assets of the graphs and what output it should produce. The default config file named webpack.config.js, …

Photo by Nahel Abdul Hadi on Unsplash

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. The browser identifies these code as a script block and executes them.

We can think of HTTP cache as a warehouse where stores the copy of the previous resource. Photo by CHUTTERSNAP on Unsplash

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. They all available in both the request header and response header.

  • Cache-control header specifies the cache lifetime(max-age) of the resource.
  • Last-modified and ETag header provides a validation mechanism. Generally speaking, last-modified validate the resource with time and Etag does it with content(hash).

Two things need to be born in mind:

Specifying a lifetime for each…

How middleware works

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, on the other side, allow you to using async logics to interact with the store. Middleware has access to dispatch and getState, which means you could write async functions in the middleware, and still has the ability to interact with the redux store by dispatching actions.

There are three concepts…

Photo by BRUNO EMMANUELLE on Unsplash

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. They all keep a internal state and updates every time the user provides input.

Controlled component(recommended way):

Code example for controlled component

React is the one who controlled these form elements. More specifically, react is in charge of controlling when and how to render it based on the internal logic of setState method.

Uncontrolled component:

Code example for uncontrolled component


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