How To Dev

Introduction This is a comprehensive page about the technologies I have shared in series format. You can view brief introductions and links to directly access each series you are interested in. In the field of software development, to deploy a product from the initial idea to its release, the standard process typically involves several stages as follows: Database : Designing and implementing the database according to business requirements, storing data during the system's operation. Backend : Handling the main logic of the system, communicating with the database and services. Frontend : Building the interface for users to interact with the system, which could be a desktop, mobile, or web application. This usually includes implementing UI/UX and integrating APIs from the backend. DevOps : Deploying the system for use, which can be done on a server or in the cloud. Testing : Applying testing methods to ensure the product meets the standards for release. Of course, these are just stan...

Introduction Cross-Site Scripting (XSS) is a security vulnerability that allows attackers to inject malicious scripts, typically JavaScript, into web pages viewed by other users. When a user's browser executes this code, attackers can steal cookies, session tokens and alter the website interface. To prevent XSS, the following primary methods are used: Validation: Accepting only desired data formats. This simple approach only addresses surface-level issues, so we focus on the methods below for better effectiveness. Sanitization: Removing or disabling dangerous HTML tags and attributes such as <script> , onerror and onclick from user input before storage or display. Using Framework Automations: React and NextJS automatically escape data in text strings by default. When rendering HTML directly via dangerouslySetInnerHTML , using a library like DOMPurify is mandatory to ensure safety. Content Security Policy (CSP): Configuring browser policies to restrict script execution s...

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 ...

Introduction Vitest is a modern testing framework built on Vite. It boasts incredibly fast execution speed by leveraging worker threads, perfect compatibility with the Jest ecosystem (in terms of syntax and API), and excellent support for TypeScript/JSX without complex configuration. In this article, I will guide you on writing unit tests, component tests, and integration tests. Unit Test: Checks independent functions or logic to ensure they work correctly with different inputs. Component Test: Checks the user interface and interactions of individual components. Integration Test: Checks the coordination between multiple components or between the client and the API (often mocked) to ensure smooth business logic flow. Prerequisites This article is implemented on a NextJS project, please initialize a project before continuing. Detail I will continue using content from the Demo AI Agent article to write tests for it, but will need to refactor the code to better support testing as follows: ...