How To Dev

Introduction Hashids is a small open-source library that generates short, unique, non-sequential ids from numbers. It helps secure the system by hiding the real database IDs, preventing users from guessing or scraping data via URLs. Advantages: Security: Hides real IDs, preventing exposure of data structure and the total number of records. Two-way transformation: Allows easy encoding and decoding without requiring storage in the database. High customization: Supports minimum length configuration and utilizes a distinct salt value to guarantee the generated strings are unique to your system. No collisions: The exact same ID and salt value will consistently produce the identical unique string. Limitations: Not true cryptography: Hashids does not employ strong encryption algorithms, meaning someone with the salt and the algorithm can still reverse the string. Therefore, do not use it to secure highly sensitive data. Dependency on Salt: If you lose or alter your Salt string, all prev...

Introduction Partial Prerendering (PPR) is the optimal combination of Static Site Generation (SSG) and Dynamic Rendering (SSR) within a single route. Previously, a website usually had to choose one of two: either fully static (fast but not personalized) or fully dynamic (slower because of waiting for server processing). With PPR: Static Shell: Parts like Header, Sidebar or the frame (Skeleton) are pre-rendered into static HTML files and sent immediately to the user. Dynamic Islands: Parts that need actual data (like shopping carts or user info) are pre-rendered on the UI using React Suspense. The server will stream these parts down once the data is ready. Outstanding Advantages Instant response speed: Users see page content almost immediately (static shell) instead of looking at a white screen waiting for the server. Optimize user experience: Minimize Layout Shift (jumping content) by pre-defining fallbacks (like Skeleton) in Suspense. Detail In this article, I will guide you through a...

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