Posts

Somehow it’s already 2026. I’ve been building side projects and working professionally for a little over four years now, mainly focusing on web frontend and backend development. More recently, my day‑to‑day has shifted towards mobile development with React Native due to work needs. Along the way, I’ve gone through several rounds of switching tools and architectures. On top of that, I’ve been relying on AI to write code more and more often, and I now have specific expectations and conventions for how that code should be structured so that humans can still read and maintain it. This article is my attempt to organize and document the development tools and architectures I’ve used from the past up to now.

This article takes a practical, developer‑focused look at how TypeScript actually works behind your editor. It explains the role of tsserver and the Language Server Protocol (LSP), how editors get features like autocomplete, go‑to‑definition, and real‑time diagnostics, and how configured and inferred projects affect performance and type accuracy. You’ll also learn how typescript-language-server bridges LSP and tsserver, why defining stable boundary types and relying on type inference is critical in real‑world codebases, and how to avoid common anti‑patterns often seen in AI‑generated TypeScript. Concrete examples and best practices help you level up your TypeScript tooling mindset and development workflow.

In the Next.js App Router, Client Components can’t import Server Components directly, so passing live client state (like a search input) into an RSC requires a different pattern. This article shows a practical approach: sync state to the URL via search params, let the Server Component page read the latest value through the searchParams prop, and pass it down to your RSC for data fetching and rendering. It also covers the recommended Next.js APIs (useSearchParams, useRouter) and notes how nuqs can make query-string state management cleaner and type-safe.

JWT (Bearer tokens) and Session Cookies are two mainstream approaches to authentication. This article explains JWT access/refresh token flows and cookie-backed server sessions (with a session store like Redis), then compares scalability, immediate logout/revocation behavior, and security considerations (XSS, CSRF) to help you choose the right approach for interviews and real projects.

Struggling with react-hydration-error in your Next.js app? This article breaks down how Hydration works in React, explains the difference between SSR and CSR in Next.js, and shares three practical solutions to fix Hydration Errors for smoother, error-free rendering.

React Server Components (RSC) are a next‑generation React feature that moves part of rendering to the server, enabling streaming, smaller bundles, better performance, and tighter security in modern Next.js applications.

This article explains why modern LLM / AI chat apps often choose SSE (Server‑Sent Events) over WebSocket, comparing protocol traits, browser support, scalability, and showing end‑to‑end code examples with Hono, Zustand, and the Vercel AI SDK. It’s written for frontend and full‑stack developers building streaming AI chat experiences and deciding when to use SSE or WebSocket in real‑world projects.

Master vector search with pgvector in PostgreSQL. Covers embedding fundamentals, similarity metrics, IVFFlat vs HNSW indexes, database selection, and complete Bun/TypeScript implementation for AI-powered semantic search applications.

Tired of getting blocked by CORS errors? This guide explains what Cross-Origin Resource Sharing (CORS) really is, why it happens, and how to fix it effectively with backend configurations and frontend proxy setups — including real examples using Hono, Vite, and Next.js.

In the past, I rarely checked runtime logs unless I received an error alert. It was not until I suddenly noticed a large number of abnormal requests in my backend service logs that I realized the site might be under attack. In this article, I share how I built a complete protection strategy with Cloudflare WAF to effectively block malicious traffic.