How To Dev

Introduction In previous articles, I provided guidance on Core Web Vitals and how to optimize metrics such as LCP and INP. Now, we will continue to explore the final metric, which is CLS (Cumulative Layout Shift). Receiving data from multiple API requests at different times can easily cause sudden layout changes. Here are the solutions to address this: Explicit Dimensions : This involves declaring exact width and height for elements (especially images, videos and iframes) in HTML or CSS before they are downloaded. This helps the browser know the element size to build the layout beforehand. Without this, the browser will default to treating the element as 0px X 0px before assets are loaded. Once assets finish loading, they will suddenly expand in size, pushing surrounding content to different positions and c reating Layout Shift errors. Aspect Ratio: Instead of setting hard pixels, using Aspect Ratio is a modern solution to solve Explicit Dimensions by defining the ratio between the wi...

Introduction Bun is a modern JavaScript runtime built with the goal of optimizing performance and improving the development experience. In addition to being compatible with the NodeJS ecosystem, Bun also integrates a package manager, bundler and test runner in the same tool. Some outstanding advantages of Bun: Dependency installation speed is significantly faster than npm, yarn and even pnpm. High startup and application execution performance thanks to being written in Zig. Integrates multiple tools in one runtime, helping reduce the number of dependencies required. Supports projects using modern frameworks like NextJS and NestJS well. Helps shorten build times and optimize the CI/CD process. Detail Note that although using Bun can provide comprehensive and effective support for NPM packages, there are still many risks regarding compatibility with older package versions. If the project you are developing is relatively large and has been operating for a long time, consider carefully bef...

Introduction In the previous article, I provided much information related to React Fiber and Rendering Pipelines. I will further explain its operating mechanism and how to optimize performance more. At the same time, I will introduce how to use flushSync to set the priority of a task to a higher level. Prerequisites Please review the previous article to grasp some information about React Fiber before continuing. Detail For the example using useDeferredValue, you can try increasing the number of items processed or simulating a slower machine configuration to test it out. When you input continuously, you will see cases where everything still functions, but sometimes the machine will lag completely, unable to accept further input. Why is that? The reason lies in the principle I mentioned above, which is that React Fiber only works in the Render Phase when it can stop the current process to prioritize higher priority tasks (like user input), but once it enters the Commit Phase, it can no ...