Every article, note and guide — search, filter by topic and level, or browse by year.
Or read a seriesWhat counts as a secret, how .env files and long-lived CI tokens actually leak, what to do in the first hour after a leak, secret stores compared, GitHub Actions OIDC to AWS and GCP instead of static keys, rotation without downtime, and typed env validation in a Turborepo monorepo.
Link previews, webhooks, image import and file uploads look like boring features, yet they keep showing up in incident reports. Why SSRF blocklists fail, a safe fetch in Node with undici and pinned IPs, IMDSv2, and an upload pipeline: presigned S3, magic bytes, sharp, a separate domain and async scanning.
How to read a bundle analyzer in 2026 (next analyze, rollup-plugin-visualizer, source-map-explorer), how tree shaking really works with ESM, sideEffects, barrel files and CommonJS, the usual traps like moment and lodash, duplicate dependencies, polyfills, and bundle budgets in CI with size-limit.
The browser's cross-origin model from the ground up: what the Same-Origin Policy blocks, what CORS relaxes and what it never protects, preflights and credentials, Vary: Origin caching bugs, dangerous allowlists, then CORP, COEP, COOP, Fetch Metadata and SameSite — with NestJS and Next.js configs done right.
A practical threat model for applications that put an LLM between tools and private data: direct and indirect prompt injection, the lethal trifecta, and the design patterns that keep the damage contained, mapped against the OWASP Top 10 for LLM Applications.
All ten risks of the OWASP API Security Top 10 (2023) worked through in NestJS: ownership checks in scoped repositories, whitelisted DTOs, response shaping, CASL policies, cost-based rate limits, idempotent business flows, SSRF-safe fetch, and an authorization matrix in e2e tests.
How JWS differs from JWE, the claims you must check, alg: none, RS256/HS256 confusion, kid injection, jku abuse — and how to pin algorithms with jose, rotate JWKS keys without logging anyone out, revoke tokens, and test your verifier with the malicious tokens attackers will actually send.
Every HTTP request of the authorization code + PKCE flow, what state, nonce, ID tokens and access tokens each protect, why the implicit flow is dead, and how to build a Backend-for-Frontend in Next.js so tokens never reach the browser — plus refresh rotation, logout and the bugs I've actually seen.
How I run practical threat modeling with a product team: the four questions, a data flow diagram with trust boundaries, STRIDE per element on a real system with an SPA, API, Postgres, S3 uploads, a payment webhook and an admin panel, simple risk rating, threats turned into tickets, and a threat model that lives in the repo.
MCP isn't magic, it's a well-designed JSON-RPC protocol. This post explains hosts, clients, servers, primitives and transports as of the 2026-07-28 spec, then builds a read-only TypeScript server over order data: tool design, pagination, testing with the Inspector, OAuth for remote servers, and the security holes you need to close.
From metric definitions precise down to the numerator, denominator and time window, through tracking plans and user identity, to real PostgreSQL for funnels, cohort retention, DAU/WAU/MAU, window functions, the Asia/Ho_Chi_Minh timezone and A/B tests with an SRM check.
A good PRD isn't long, it's clear. This post covers PRD structure, writing testable requirements, measurable NFRs using ISO 25010 (p95 performance, SLOs, security, Vietnam's Decree 13 and data protection law, WCAG 2.2 AA), traceability from goal to test, and a complete sample PRD.
Event Storming is the bridge between business analysis and software design. This post covers the three workshop levels, the sticky-note grammar, facilitation, a real clinic booking example, finding bounded contexts, context mapping, and turning the result into aggregates, commands and events in NestJS.
BPMN isn't for decorating project documents; it's for finding where a process wastes time: handoffs, rework loops, waiting. This post covers the notation subset you actually need, common modeling mistakes, a measured as-is/to-be purchase approval example, and the path from model to state machine, workflow engine and user stories.
When running a model on the user's machine makes sense and when it doesn't, how far Chrome's built-in AI has shipped, Transformers.js, ONNX Runtime Web and WebLLM on WebGPU/WASM, running inference in a Web Worker, caching model weights, and UX for the first download.
A good user story isn't the “As a… I want… so that…” sentence, it's the conversation and the examples around it. This post covers the 3 Cs, INVEST with real bad and good examples, story mapping, splitting patterns, acceptance criteria as rules plus examples, Gherkin done right, Example Mapping and turning ACs into automated tests.
Stated requirements are rarely real needs. This post walks engineers and BAs through a business analyst's toolbox: stakeholder mapping, interview technique, shadowing, Jobs-to-be-Done, prototyping, assumption logs, BABOK-style requirement types, and a B2B invoice-approval case study from a Vietnamese company.
In 2026 the browser ships primitives that used to require Floating UI, Radix or an animation library. This post covers popover, invoker commands, anchor positioning and View Transitions: what they do, how to combine them, where support really stands, and where a library is still the right call.
Micro-frontends solve an organizational problem — independent teams shipping independently — not a technical one. This post compares five ways to compose a frontend, digs into Module Federation 2.0 (shared singletons, version skew, manifests, types, fallbacks) and shows when a Turborepo monorepo is the better answer.
Web Workers aren't magic for every slow page. This post covers when moving work to a worker pays off, what structured clone really costs, transferables, SharedArrayBuffer and COOP/COEP, a hand-written Comlink-style RPC, bundler setup, worker pools, cancellation with AbortSignal, real examples and alternatives like scheduler.yield.
Installing Sentry is only step one. This is how I build real frontend observability: lab vs field data, RUM with web-vitals attribution, beacons that don't get lost, sampling, private source maps, taming noisy errors, linking traces to the backend with traceparent, PII scrubbing, p75 dashboards and deploy markers.
Conditional types and infer, key remapping, template literal types that turn "/users/:id/posts/:postId" into typed params, a fetch client derived from a route map, typed errors, branded IDs, satisfies and const type parameters, a Zod bridge so the types aren't lies — and when to stop.
When native elements run out, ARIA is a contract you have to keep. The accessibility tree and name computation, roving tabindex vs aria-activedescendant, a combobox and tabs built step by step, live regions that really announce, focus on route changes, and how to test it all.
An honest authentication design for a NestJS API and a Next.js frontend: when to use sessions, when to use JWT, how to rotate refresh tokens with reuse detection, passkey sign-in with SimpleWebAuthn, and the guards, rate limits and CSRF protection that go with it.
Data from the server isn't yours — you only hold a copy with an expiry date. This post goes deep on TanStack Query v5 through the lens of caching: query key design, staleTime and gcTime, invalidation, optimistic updates with rollback, Suspense, hydration with the Next.js App Router, infinite queries, and when not to use it.
What happens to an LLM feature once real traffic arrives: where latency actually comes from, a per-feature token and cost meter with tenant budgets, structuring prompts for provider prompt caching, exact and semantic caching, model routing, trimming context, batch APIs, parallel calls, retries with fallback and circuit breakers, and the dashboard I watch.
"use client" doesn't mark a kind of component; it marks where the client graph begins. This post rebuilds the mental model for RSC in Next.js 16: what crosses the boundary, where data fetching belongs, waterfalls, streaming, and the mistakes that bloat bundles or leak data.
How streaming HTML works at the protocol level, where to put Suspense boundaries, avoiding waterfalls, selective hydration, Partial Prerendering in Next.js 16, the effect on TTFB, LCP and CLS, proxies that silently buffer your stream, and handling errors after a 200 has already gone out.
How to build background jobs in NestJS 12 with BullMQ 6 that never silently lose work and never charge a customer twice: at-least-once delivery and idempotency, the transactional outbox, retries with error classification, dead letters, rate limiting, graceful shutdown and observability.
Where coding agents genuinely help a frontend team and where they quietly fail, how to give them context with AGENTS.md and small tasks, plan-then-implement, verification loops, reviewing AI-generated PRs, supply-chain risks like slopsquatting, and which skills matter more now for mid and senior engineers.
Headless hooks with prop getters, compound components over context, asChild and render props, useControllableState for controlled and uncontrolled modes, keyboard and ARIA as part of the API, the cost of polymorphism in TypeScript, and when to use Radix, React Aria or Base UI instead of building your own.
What NestJS does under the hood — the order of middleware, guards, interceptors, pipes and filters; DI, scopes and durable providers; dynamic modules — and how to use it to structure a large API as a clean modular monolith with a consistent error model, request context and graceful shutdown.
Building a golden dataset from real usage, deterministic checks first, LLM-as-judge with rubrics and its biases, pairwise comparison, running evals in CI on prompt or model changes, tracking cost and latency alongside quality, online signals, tracing, and how to avoid overfitting your eval set.
Next.js 16 drops the implicit caching of the old App Router: everything is dynamic by default and you opt in with use cache. This post covers the static shell and dynamic holes, cache keys, cacheLife, cacheTag with updateTag, revalidateTag and refresh, and an e-commerce product page built end to end.
From Nx s1ngularity and chalk/debug to Shai-Hulud, TanStack and ChainDrop: what the npm attacks actually did, what npm and GitHub changed, and a layered defense — install, CI, publish — applied directly to a Bun + Turborepo monorepo.
Tool calling is really a loop that your code drives. This post covers defining tools with schemas, an agent loop with a step limit, handling invalid arguments, a message list with typed parts, streaming partial arguments, rendering tool calls as components, and making users confirm tools with side effects.
How View Transitions snapshot the page and build a pseudo-element tree, startViewTransition in an SPA, transitions between documents, view-transition-name, view-transition-class and types, a list-to-detail shared element, reduced motion, performance traps, and using React's ViewTransition component in Next.js 16.
Anyone can build a RAG demo in an afternoon; making it answer correctly is the hard part. This post walks through a TypeScript RAG pipeline on PostgreSQL/pgvector: structure-aware chunking, hybrid search fused with RRF in a single SQL query, reranking, filtering by permission before ranking, citations, and how to measure quality with numbers.
The frontend half that AI chat tutorials tend to skip: picking a transport, parsing SSE by hand when events are split across chunks, a Route Handler that keeps the API key safe and propagates cancellation upstream, message-parts state, batching renders with requestAnimationFrame, safe incremental markdown, autoscroll, accessibility and error handling.
A search-suggestion box looks simple, yet it packs nearly every hard frontend problem into one component: race conditions, debounce, caching, flicker-free states, the WAI-ARIA combobox pattern, IME typing and testing. This post builds it piece by piece in React + TypeScript.
How I design and build UI for features whose output changes every time: latency budgets and streaming, suggestions that can be accepted, edited or rejected with a typed state model, undo and preview, honest sources, feedback wired to analytics, graceful failure and accessibility.
The three metrics Google uses to measure real user experience: how they're measured and calculated, why they matter for SEO, and a concrete process to find the real cause before you fix anything.
The frontend side of sending files to an LLM: file input, drag-and-drop and paste, sniffing types by magic bytes, downscaling images and stripping EXIF in the browser, HEIC from iPhones, PDFs, recording audio with MediaRecorder, presigned uploads with progress and cancellation, object URL cleanup, accessibility and what the server must still check.
A correct mental model of the browser event loop — tasks, microtasks, frames — tested with predict-the-output puzzles, then used to explain why UIs freeze and how to chunk work, yield to the main thread and move heavy work to a Web Worker.
React's escaping does a lot for you, but not everything. This post walks through the XSS holes React doesn't cover, building a strict nonce-based CSP in Next.js, Trusted Types, CSRF in the SameSite era, where to store tokens, and how to stop clickjacking.
When state belongs in the URL rather than useState or a server cache, parsing and validating search params with a schema, push vs replace, debouncing a search box, syncing with the Next.js 16 App Router, nuqs, and the back-button and SEO traps.
Building a virtual list in React + TypeScript by hand: windowing math with real numbers, overscan, variable heights with prefix sums and binary search, measuring with ResizeObserver, preventing scroll jumps, accessibility — and when not to virtualize at all.
How I build product features on LLMs that return typed JSON: structured output modes in the major APIs, defining schemas with Zod, handling refusals and truncated output, retry with repair, versioning prompts in code, realistic expectations about temperature, and designing schemas models handle well.
What React Compiler actually does, the Rules of React it relies on, the ESLint plugin, incremental rollout with annotation mode and "use no memo", what to do with existing useMemo/useCallback, how to verify it works, common bailouts, third-party libraries and build cost.
Why I started writing down what I learn at work, the simple format I use, and how notes slowly turn into articles.
Why CSS in large projects always drifts toward !important, how @layer changes who wins the cascade, traps like unlayered styles and the !important inversion, @scope with donut scopes and proximity, native nesting gotchas, and a step-by-step path for moving a legacy codebase into layers.
Splitting tokens into three tiers, naming by purpose, building light/dark themes with prefers-color-scheme plus a user override without a flash, color-scheme, mapping tokens into Tailwind v4's @theme, contrast checks and common mistakes.
How signals track dependencies, why push-pull gives glitch-free updates, how Solid, Preact, Angular and Vue use them, where the TC39 proposal stands, what the React Compiler changes, and the production pitfalls — with a tiny signal implementation in TypeScript.
Frontend apps break when we design them page by page. A short field guide to mapping state, data flow and ownership before drawing the UI.
How fonts affect LCP and CLS, choosing font-display, preloading the critical font, subsetting with unicode-range for Vietnamese, variable fonts, self-hosting versus CDNs, fallback metric overrides and next/font in Next.js.
Optimistic updates with rollback, an IndexedDB-backed outbox, idempotency keys, retrying when the network returns, conflict resolution strategies, showing sync status and testing offline scenarios.
Designing a CI pipeline for a Bun + Turborepo frontend monorepo: the stages you need, caching dependencies and build outputs, running only affected packages, per-PR previews, required checks and keeping secrets safe.
Why estimates are almost always wrong, how to break work down by states, accessibility, responsiveness and i18n, why ranges with confidence beat single numbers, when to use a spike, how to talk to PMs, and how tracking estimates against actuals makes you better over time.
Three Next.js apps, five shared packages, one lockfile. Notes on boundaries, caching and the mistakes I'd skip next time.
Conditional breakpoints, logpoints, DOM breakpoints, XHR/fetch breakpoints, console utilities like debug(), monitorEvents(), $0 and copy(), the Network tab, the Performance panel and local overrides — plus the four-step process I use to find causes instead of guessing.
Cache-Control, ETags, hashed filenames, s-maxage and stale-while-revalidate at the CDN, service workers, staleTime in TanStack Query — what each cache layer does, which headers to set for each resource type, and the mistakes that leave users looking at stale data.
From showModal(), the top layer and ::backdrop to focus management, labelling, scroll locking, backdrop clicks and nested dialogs — plus a small React component and how to test it with a keyboard and a screen reader.
More tests aren't automatically better. This is how I split the work between unit, integration and e2e tests, write behavior-focused tests with Testing Library, mock the network at the boundary, use Playwright, fix flaky tests, and read coverage numbers correctly.
Feature flags decouple deploy from release, but used carelessly they turn into tech debt and flickering UIs. This post covers the four kinds of flags, evaluating on the server vs the client, typed flag definitions in TypeScript, gradual rollout, A/B testing and a cleanup process.
A practical guide to shrinking the JavaScript you ship up front by combining route-level and component-level lazy loading.
Becoming senior isn't about coding faster or knowing more frameworks. It's the shift from finishing tasks to owning outcomes. This post covers concrete behaviors, a self-assessment table, and the traps I fell into myself.
React 19 brings forms closer to plain HTML: the action prop, pending state, optimistic updates and Server Actions. This post walks through how I build a complete signup form — validated on both sides, with per-field errors, accessible, and working even before JavaScript loads.
What makes a component re-render, why a re-render isn't a DOM update, how to measure with the React DevTools Profiler, the real cost of memo/useMemo/useCallback, splitting context, colocating state, keys in lists, and how the React Compiler changes the picture.
Why viewport media queries fall short for reusable components, how to use container-type, named containers and cqi units, how to combine them with clamp() and :has(), plus a complete responsive card and a fallback strategy.
Classify errors before handling them, understand what error boundaries do and don't catch, retry properly with backoff and jitter, separate user-facing messages from developer logs, and report errors without leaking personal data.
What reviewers should look at first, how to write comments people learn from instead of bristle at, keeping PRs small, handling disagreement — and letting tools handle formatting so humans can focus on what matters.
Which format to pick, how srcset and sizes let the browser choose, when to lazy-load and when not to, reserving space to avoid CLS, image CDNs, art direction with picture, and using next/image in Next.js 16.
Normal flow, block vs inline, flexbox (one dimension, content-out) vs grid (two dimensions, layout-in), intrinsic sizing, and why min-width: 0 rescues overflowing flex items — so you write layout from understanding instead of trying properties until it works.
Why isLoading, isError and data living side by side breed bugs, how to model UI as states and events, a typed useReducer state machine for a submit flow, and when a statechart library is worth it.
Discriminated unions, exhaustive switches with never, satisfies, branded types, as const and validation at the boundary — the patterns I use every day because they catch real bugs, plus when to stop typing.
The performance wins and day-to-day developer experience improvements that made Bun my package manager of choice.
Why owning your component source beats installing a black box — and where shadcn/ui hits the right level of abstraction.