What is Ansible? An automation engine that allows for agentless system configuration and deployment. Ansible is an agentless automation tool that you install on a single host (referred to as the control node). From the control node, Ansible can manage an entire fleet of machines and other devices (referred to as managed nodes) remotely with […]
Author: Yujin Wang
Categories
React Rendering
It Always Re-renders By default, when the state of the component changes, this component and all its children re-render. But React updates a text node only when there’s visual change. “Rendering” of react component is not the same with “updating the DOM”. How to Prevent Re-renders memo() Wrapping a component with memo prevents the entire subtree of this component […]
Categories
Basic Knowledge of ImageFactory
What is Image? Virtual machines (VMs) in cloud are created from a template called a virtual server image. Virtual images can be sun up on cloud providers to do computing operations without purchasing hardware or software. what’s hardening? Hardening is the process of strengthening a system to reduce the exposure surface and attack vectors using […]
Table with max-height Prevent Row Break Between Pages Ref Table with max-height – solution 1 Table with max-height – solution 2
Categories
[Package] react-beautiful-dnd
[Error] Cannot stop drag when no active drag Ref https://github.com/atlassian/react-beautiful-dnd/issues/1778#issuecomment-836542941
Categories
Number
Handle with Price: 2 decimal places Ref https://stackoverflow.com/questions/3163070/javascript-displaying-a-float-to-2-decimal-places
Categories
[Hook] useState
Overview Update Array State Update Object State Callback for useState Refs https://reactjs.org/docs/hooks-state.html https://stackoverflow.com/questions/54676966/push-method-in-react-hooks-usestate https://stackoverflow.com/a/56394177
Categories
[Package] styled-components
Motivation Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary. No class name bugs: styled-components generates unique class names for your styles. Simple dynamic styling: adapting […]
Categories
[Package] date-fns
Comparison with MomentJs date-fns vs moment Problems with Moment.js: It is highly based on OOP APIs, which makes it fail to work with tree-shaking, thus leading to a huge bundle size and performance issues. It is mutable and it causes bugs Complex OOP API (which doubles mutability problem) Advantages of date-fns Function per file Date-fns library consists […]
Categories
[Hook] – useEffect
Pure Function VS Side Effect useEffect How do I use useEffect? The function passed to useEffect is a callback function. This will be called after the component renders. The second argument is an array, called the dependencies array. This array should include all of the values that our side effect relies upon. Common mistakes Cleanup […]
Yujin's Amusement Park 