zhuchuji的博客

IdeasReact’s main idea is “props down”

Why React hooksClass component and functional component are two kinds of component type in React, whose difference is mainly class component has its instance while functional component does not. This...

Refactoring

React derived stateReact async rendering

Snapshot testing on JestSnapshot testing impression

tabIndex makes DOM focusableNon-form DOM element like div and span, are not focusable by default, which means they could not receive keyboard event. To make them focusable like input and textarea, we...

Analytics & Digital Marketing Tips

<link hreflang="es" href="xxxx" />This attribute indicates the language of the linked resource. It is purely advisory. Use this attribute only if the href attribute is present.<link rel

Using @font-face

Higer order function

Memory Analysis 10

Copy text with javascript

Transition HookWe could add listener on event ‘transitionstart’, ‘transitionrun’ and ‘transitionend’ to detect CSS transition hooks. But currently only ‘transitionend’ is widely supported by modern b...

Google Analytics Guide

An Introduction To Isomorphic Web ApplicationIsomorphic Javascript

Google Search Guide

In web development, we might encounter the situation to animate width/height from a fixed pixel length to a percentage length. If you set height: 20px and animate to height: 100% or height: auto, the ...

Presentational and Container Components Container vs Presentational Components in React

EFFICIENTLY LOAD JAVASCRIPT WITH DEFER AND ASYNC

We all know that when scripts are executing the browser will halt the parsing process (thus stop the rendering process), but it’s not that clear for styles. Here we are going to dive deep into how sty...

Object.setPrototypeOf()Object.setPrototypeOf(object, prototype) could change the prototype of the object directly, but only IE 10 and below do not support the methodFunction.prototypeEvery funct...

Using Web Workers

ProblemIf adding css transition on a just-appended element, the transition will not work as expected. Take the below code as example.// css.fade-in { opacity: 0;}.fade-in.show { opacity: 1; tr...

See The Containing Block On MDN

Background & PurposeFlux and redux suggests more practice than eslint rules and compile-time issues.thunk empower developers to do anything, and overuse it in most conditions.To commit reason...

Inside Fiber: in-depth overview of the new reconciliation algorithm in ReactIn-depth explanation of state and props update in ReactReact fiber architeture

http-flv: get started

FrameworkJestTest pointsRedux reducerRedux async actionContainer componentRepresentational componentCommon test casesRedux reducersSince reducers are just pure function, we could test reduc...

Basic conceptIndexedDB APIUsing IndexedDB

Cache Validation on MDN

OverviewRedux is inspired by flux architecture, which enforce unidirectional data flow of the application.Actions are triggered by the interaction on view, which will be dispatched to the store and...

The post is not completely about to tell how to create React component instance in render function actually. But with the question we are going to dive deep into how elements are rendered.We are goin...

Git Merge VS Rebase

Express middlewareThe post explains how middleware works in express in detail, read carefully before you work on expressjs even other nodejs-based server framework, because it gives you basic concept...

Using Touch Events

https

Understanding Reflow And Repaint For Web Performance

Browser Hints: Preload, Prefetch, and Preconnect

Controlling Font Performance with font-displayPreload Content

Promgramming Principles