Hazem Azzam

HomeWriting

Blog

Long-form notes on frontend, backend, system design, and security. Build logs, post-mortems, and the occasional opinion piece.

2026-06-16code-reviewengineering

How to Code Review: Eight Angles for Catching Real Bugs

Most reviews skim for style and miss the bugs that reach production. Here's a structured, multi-angle approach to reviewing a diff that consistently surfaces real defects — and a verification step that keeps you from crying wolf.

2026-06-15reactreact-query

How to Build Infinite Scroll with React Query and IntersectionObserver

A from-scratch guide to infinite scroll in React: cursor pagination, useInfiniteQuery to accumulate pages, and an IntersectionObserver sentinel to load more — plus the pitfalls to avoid.

2026-06-02architecturenotifications

Building a Scalable Multi-Channel Notification Service

A practical architecture for a notification service that delivers across email, SMS, push, and in-app channels. It covers user preferences, rate-limiting, synchronous and batch delivery, queueing with retries, high availability, and the trade-offs between latency, cost, and reliability.

2026-05-22javascriptfor-loops

for vs forEach: the differences that actually matter

for and forEach look interchangeable until they aren't. This post walks through what they really differ on — control flow, async behavior, performance, and the cases where each one is the right tool.

2026-05-22analyticsclean-architecture

Analytics in Clean Architecture: events as domain, sinks as infrastructure

Most analytics code lives wherever the click happens. This post shows how to put it inside a layered architecture: events as domain, sinks as infrastructure, one-way imports, and zero changes to existing hooks when you add a new destination like Pixel.

2026-05-17reactcontrolled-inputs

Controlled Inputs in React: One Controller for Any Component

Controlled components power validation and resets, but wiring value and onChange for every field is tedious. Learn how a thin react-hook-form wrapper uses cloneElement and prop mapping to turn any UI component into a controlled field.

2026-05-17nextjscaching

Caching in Next.js: A Practical Guide for the App Router

Next.js layers several caches—client, server, and on-demand invalidation. This post explains how the App Router cache components model works, when to use cacheLife versus cacheTag, and how to avoid stale data in production.

2026-05-13javascriptthis-binding

Lost `this` in callbacks: why static methods throw “undefined is not an object”

When you pass a class method into Array.prototype.map, JavaScript calls it without a receiver—so inside that method, `this` is not your class. This piece explains the binding rules, shows a standalone inventory-formatting example, and lists practical fixes.

2026-05-10nextjsseo

Improving SEO in Next.js: Key Levers and How to Use Them

A practical map of what actually moves organic search for Next.js apps: metadata, canonical and social tags, sitemaps, structured data, performance, and content structure. Skim the key list up front, then dig into each area with App Router–oriented guidance.

2026-05-09gitworkflow

How to Write Professional Commit Messages

Good commit messages turn git history into documentation: they explain what changed and why, without making the next reader trawl through diffs. This post covers subject lines, optional bodies, Conventional Commits, and habits that keep messages clear for you and your team.

2026-05-09performancedjango

Understanding the N+1 Query Problem and How to Fix It

ORM loops often trigger one extra query per row—classic N+1. Here is what that costs, how to spot it, and how to fix it with joins, batched prefetching, and SQL-side aggregates (with Django-focused examples).

2026-05-09javascripthoisting

JavaScript Hoisting: What Actually Moves, and What Does Not

Hoisting is often taught as 'declarations move to the top,' but the real story is about when bindings are created and when you are allowed to read them. This post separates `var`, `let`, `const`, functions, and classes — and ties each to the temporal dead zone.

2026-05-09javascriptevent-loop

The JavaScript Event Loop: How Async Code Really Runs

JavaScript runs your code on one thread, yet timers, network responses, and promises still feel concurrent. This post walks through the call stack, the task and microtask queues, and why the order of `setTimeout` and `Promise.then` matters in real apps.

2026-05-08reactdnd-kit

Drag-and-Drop Row Reordering in React Tables with dnd-kit

A practical guide to letting users drag rows into the order they want, using @dnd-kit alongside TanStack Table. Covers sensors, accessibility, persisting the new order, and how to make drag and column-sort coexist cleanly.

2026-05-08reacttanstack-query

Optimistic Mutations with TanStack Query: The Four Hooks You Actually Need

Optimistic UI doesn't need a clever abstraction — it needs four well-placed hooks. Here's how onMutate, onError, onSuccess, and onSettled fit together, and where most implementations quietly leak bugs.

2026-05-08htmlforms

Nested Forms Break Submit Propagation — and the Fixes That Actually Work

Nesting one <form> inside another seems harmless until a button stops submitting, two endpoints fire at once, or your validation runs against the wrong fields. Here's why HTML forbids it, what browsers actually do, and how to refactor cleanly.

2026-05-08nextjslocalization

Practical Localization in Next.js: useTranslate, Localized APIs, Mappers, and Caching

A practical architecture guide for multilingual Next.js apps using useTranslate, backend fields like description_ar/description_en, mapper-layer normalization, and cache-aware fetching so UI components stay clean.

2026-05-08nextjsserver-components

Next.js Server vs Client: What Runs Where, and What Must Stay Secure

A practical guide to Server Components, Client Components, Route Handlers, and Server Actions in Next.js. Learn what belongs on the server, what belongs in the browser, and why network requests are always visible to users.

2026-05-08business-logiccheckout-security

Order-Total Tampering at Checkout (CWE-840, CWE-602, CWE-345)

A practical analysis of checkout price manipulation where attackers tamper with order totals in client requests. Learn the business-logic root cause, exploit flow, impact, and robust server-side controls to prevent fraudulent purchases.

2026-05-08idorcwe-639

Mass Account Takeover via Order-ID Enumeration (CWE-639, CWE-284, CWE-863)

A deep dive into a critical authorization flaw where predictable order IDs allow attackers to enumerate accounts and trigger mass account takeover. This post explains root cause, impact, reproduction logic, and concrete backend defenses.

2026-05-08clean-architecturedependency-injection

Clean Architecture in Real Projects: A Practical Guide

A practical walkthrough of Clean Architecture and dependency injection in real codebases. Learn how to keep business rules independent of frameworks, wire ports and adapters cleanly, and evolve a codebase without rewrites.