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 The NextJS Image component is a powerful solution that helps automatically optimize images in web applications. The Image component has been implemented by NextJS with many superior functions that support displaying images more effectively than a standard HTML image tag, such as Automatically resizing images to fit the device Supporting modern image formats (like WebP and AVIF) Preventing Cumulative Layout Shift (CLS) by holding space for images Integrating a built-in lazy loading mechanism to speed up initial page load speeds. Detail In this article, I will provide an example of loading a product list in ecommerce pages so you can see the advantages of NextJS Image in automatic image optimization. Create file app/image/types.ts export interface Product { id : number title : string description : string price : number thumbnail : string category : string } export interface ProductResponse { products : Product [] total : number skip : number ...

Introduction Core Web Vitals are Google's real-world metrics used to measure user experience regarding loading speed, interactivity and visual stability of a website. Optimizing these metrics not only helps retain users longer but also serves as an important ranking factor in SEO, helping your website achieve higher positions on search engines. This set of metrics includes 3 main components: LCP (Largest Contentful Paint): Measures loading performance, specifically the time it takes for the largest content element to become visible. FID (First Input Delay): Measures interactivity, evaluating the response time when a user first interacts. CLS (Cumulative Layout Shift): Measures visual stability, preventing situations where elements unexpectedly jump positions. Impact from a Technical Perspective SEO and Ranking (Search Signal) : Google has officially made Core Web Vitals (CWV) one of its ranking signals. If two websites have equivalent content (Relevance), the one with better CWV...

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