Articles
Every adapting article, grouped by corpus and folder.
All corpora
196 articles- RecipeReact·9 min read
"use client" crept up the tree and shipped your whole page to the browser
The use client directive marks a boundary rather than a file, so everything below it ships and the boundary belongs at the leaves
- ConceptAngular·11 min read
@defer Blocks
Deferred blocks code-split part of a template, so its dependencies download only when a trigger such as viewport entry fires
- RecipeReact·7 min read
A 900KB bundle loads before anyone sees the login screen
The initial download should carry only the first screen, with routes and heavy libraries pulled in on navigation or interaction
- RecipeReact·9 min read
A refresh storm on 401 logs the user out
Parallel 401s each triggering their own token refresh is what logs the user out, and a single-flight refresh is the fix
- RecipeReact·9 min read
A remote's independent deploy silently breaks the host
A remote's exposed props are a versioned public API, so compatibility has to be checked at runtime and evolved additively
- RecipeAngular·19 min read
A Search Engine in Five Stages
Search as you type grows in five stages, from debounce and switchMap to URL-synced filters with stale-while-revalidate caching
- RecipeReact·9 min read
A shared store couples your remotes back into a monolith
A shared mutable store re-couples independently deployed remotes, so share server truth and versioned events instead of state
- RecipeNext.js·15 min read
A signed-in user sees someone else's data
A cached scope keys on its arguments and not the request, so two of the three ways to leak another user's data go uncaught
- ConceptReact·16 min read
Accessibility in React
React ships inaccessible DOM as happily as accessible DOM, so almost every win comes from not fighting the platform
- ConceptReact·17 min read
Actions
Every form you wrote before React 19 reinvented the same four things by hand: a `isSubmitting` flag toggled around the request, a `try/catch` to catch failures into an error state, a manual optimistic update, and a `preventDefault` + `FormData` dance. Actions collapse all four into primitives.
- RecipeReact·4 min read
After "cancel" the list never refreshes — or after invalidate a ghost write returns
Cancel stops in-flight work and invalidate marks stale and refetches, and an optimistic mutation needs both in the right order
- ConceptAngular·5 min read
Angular Data Binding
Every Angular binding syntax is sorted by the direction data travels between the component class and its template
- ConceptAngular·9 min read
Angular DevTools
The official browser extension inspects your component tree, profiles change detection, and maps the injector hierarchy
- ConceptAngular·10 min read
Angular Elements
Angular Elements wraps a component as a native custom element, so a React, Vue, or plain HTML page can embed it without Angular
- ConceptAngular·4 min read
Angular Form Async Validators
Async validators cover the checks that need a server answer, such as whether the username someone typed is already taken
- ConceptAngular·11 min read
Angular Material
Google's official component library ships accessible Material Design 3 components with build-time theming through CSS custom properties
- ConceptAngular·20 min read
Angular Reactive Forms
The FormGroup runtime model is unchanged, but typed forms and nonNullable controls changed how you declare a form and how it infers
- ConceptAngular·19 min read
Angular Router
The router still maps a config tree onto outlets, but provideRouter replaced RouterModule.forRoot and the routing module around it
- ConceptAngular·5 min read
Angular Router — Feature Modules, Child Routes, and Services
Child routes and per-feature route files keep a growing app's routing config from collapsing into one flat list at the root
- ConceptAngular·12 min read
Angular Router — Guards and Resolvers
Guards and resolvers hook into the router's navigation cycle, so access checks and data loading finish before a route renders
- ConceptAngular·6 min read
Angular Router — Lazy Loading Modules
Lazy loading defers a feature's code until someone navigates to it, so the initial bundle carries only what the first screen needs
- ConceptAngular·8 min read
Angular Template-driven Forms
Template-driven forms build the model from directives in the template, with two-way binding keeping component state in sync
- ConceptAngular·10 min read
Animations
Angular's animation DSL is a state machine — you declare states and transitions, and the runtime handles interpolation and cleanup
- RecipeAngular·14 min read
App Initialization: Silent Token Restoration on Reload
A silent refresh call before the app renders is what keeps in-memory tokens from logging users out on every page reload
- RecipeAngular·15 min read
Async Validation: Username Availability Without the Flicker
A server-backed availability check needs debouncing, deduplication, and explicit pending states or the field flickers and hangs
- ConceptAngular·2 min read
Attribute Directives
Attribute directives change how an existing element looks or behaves, which is what separates them from structural directives
- ConceptNestJS·18 min read
Bootstrap and lifecycle hooks
The port is bound only after every bootstrap hook resolves, and shutdown hooks do not run until you opt in
- ConceptNext.js·24 min read
Build time, request time, and the client
Your code runs at one of three moments, and whether guessing wrong suspends or throws depends on whether the value can wait
- ConceptAngular·10 min read
Builders
Every CLI command delegates to a builder, a schema-validated task function you can configure precisely or replace with your own
- ConceptAngular·10 min read
Built-in Control Flow
Built-in blocks replaced the structural directives with no imports to remember, a required track, and real TypeScript narrowing
- ConceptAngular·11 min read
Built-in i18n
Built-in i18n inlines translations at build time into one bundle per locale, costing nothing at runtime but tying language to the URL
- RecipeAngular·19 min read
Bundle Splitting: Beyond Lazy Routes
Lazy routes alone rarely shrink the initial bundle, because the weight usually sits in libraries the entry point still imports
- RecipeReact·4 min read
Cart rows each call useQuery in a .map — hooks explode or the API melts
A runtime-length list of queries needs useQueries or a batched endpoint, because calling useQuery inside a map breaks the hook rules
- ConceptAngular·20 min read
Change Detection
Change detection in v22 is re-engineered around signals — OnPush by default, zoneless new apps, and updates only where data changed
- RecipeReact·5 min read
Checkout refetches on every visit — even 3 seconds later
Force a refetch on mount only where correctness demands it, and keep the cached data so the screen still paints while it runs
- ConceptAngular·6 min read
Choosing an Angular UI Library
Angular Material is the safest long-term bet, while PrimeNG, NG-ZORRO, and the commercial suites win on breadth or data-heavy grids
- RecipeReact·8 min read
Clicking a lazy route blanks the screen before the page appears
Keep the current page on screen while the next chunk loads, because unmounting it first is what turns code splitting into a flash
- ConceptNext.js·18 min read
Client-side rendering
Client-side rendering is a legitimate fourth answer, and the mistake is choosing it for a page rather than for a boundary
- RecipeAngular·19 min read
Component Communication: When NgRx Is Overkill (And When It Isn't)
Where shared state belongs is usually answered by a scoped service and signals, with NgRx as the exception rather than the default
- ConceptReact·20 min read
Component Composition
Composition rests on the owner versus parent distinction, and the ladder from children to render props is climbed only as far as forced
- ConceptAngular·10 min read
Component Harnesses
A harness puts a stable API in front of a component's DOM, so restructuring the template stops breaking every test that touched it
- ConceptAngular·7 min read
Component Interactions: Input, Output, and Two-Way Binding
Parent and child talk through inputs, outputs, and two-way bindings, and an Observable can serve directly as an output
- ConceptAngular·14 min read
Component Lifecycle
Angular calls lifecycle hooks in a fixed order, and knowing exactly when each one fires is what separates subtle bugs from solid components
- ConceptReact·18 min read
Components and Props
A component's props type is its public API, and designing it well is what makes invalid usage fail to compile instead of at runtime
- ConceptAngular·3 min read
Composing Form Data Sources with Directives
Pairing a directive with an injection token lets one shared select control pick its data source declaratively at each call site
- ConceptReact·26 min read
Concurrent rendering
You have a search box over 8,000 rows. Each keystroke re-renders the list, and the render costs ~120ms.
- ConceptReact·20 min read
Conditional Rendering and Events
Branching and event handling look trivial and hide real machinery, from unmount-versus-hide decisions to blur firing before click
- ConceptNestJS·18 min read
Configuration and environment
Config is the only untyped, unvalidated, externally supplied input, so convert and validate all of it once, at boot
- ConceptAngular·3 min read
Content Projection
Content projection passes markup written between a component's tags into its template, the Angular equivalent of a web component slot
- ConceptReact·19 min read
Context
Context is a transport, not a store, so every reader re-renders on every change and nothing you wrap around a reader prevents it
- RecipeReact·10 min read
Context Re-Renders the Whole Tree
Splitting context by change cadence and pushing reads down to leaves fixes most context re-render storms, until it stops being enough
- ConceptNestJS·19 min read
Controllers and routing
There is no routing table — precedence emerges from declaration order, which is why a shadowed route raises no error
- ConceptReact·19 min read
Custom Hooks
A custom hook buys a name and a boundary, never shared state, and the craft is what you extract rather than how you extract it
- ConceptNestJS·18 min read
Custom providers and injection tokens
Four provider forms collapse into one runtime decision, construct the class or call the factory and await it
- RecipeAngular·11 min read
Custom RxJS Operators with takeUntilDestroyed
A custom operator can bake teardown into a polling stream, so consumers get cleanup on destroy without writing ngOnDestroy
- ConceptReact·26 min read
Data fetching with TanStack Query
Server state is not application state. It lives on a machine you don't control, it goes stale the instant you read it, and two components that need it should never fetch it twice.
- ConceptNestJS·18 min read
Decorators and metadata reflection
Decorators annotate and the framework behaves, so a decorator that does nothing wrote the wrong key or the wrong target
- ConceptAngular·26 min read
Dependency Injection
The DI mental model is unchanged since Angular 9, but inject() now reaches places a constructor cannot, like guards and interceptors
- ConceptAngular·2 min read
DisabledControlDirective for Reactive Forms
Reactive forms warn against the disabled attribute in templates, and a small directive is the supported way to keep disabling declarative
- RecipeReact·14 min read
Double Submit and the Optimistic Like
Client pending state stops the second click, but only a server idempotency key actually prevents the duplicate order
- ConceptNestJS·18 min read
DTOs and class-validator
A DTO is not a type but a runtime object carrying metadata, so a nested property without @Type passes ValidationPipe silently
- ConceptAngular·17 min read
Dynamic Components in Angular
Runtime component creation survived intact but its API did not, and setInput is now required for signal inputs to react
- RecipeAngular·17 min read
Dynamic Forms: Shape That Changes With User Input
Forms that change shape at runtime lose user input unless you cache removed control values and revalidate the controls yourself
- ConceptAngular·10 min read
E2E Testing
End-to-end tests drive a real browser through whole user journeys, catching production-build and cross-component failures units miss
- ConceptReact·24 min read
Effects and Synchronization
Reading useEffect as a lifecycle hook rather than a synchronization contract is the root of nearly every way it gets misused
- ConceptReact·17 min read
Error Boundaries
Without a boundary a single throw during render unmounts the entire tree, and the real skill is telling error state from error throws
- ConceptReact·20 min read
Escape Hatches Audit
Three escape hatches exist because the ordinary tools cannot wait, and useLayoutEffect, useSyncExternalStore and flushSync each charge for it
- ConceptNestJS·20 min read
Exception filters
Filters are the only layer where exactly one participant runs, so adding a filter can mean removing another
- ConceptNestJS·16 min read
Execution context and Reflector
The execution context is a typed view over one arguments array, so switching it to the wrong transport fails silently
- ConceptNestJS·18 min read
Execution order
The pipeline is a nesting rather than a list, so guards sit outside the interceptor chain and pipes run inside it
- ConceptNext.js·19 min read
File conventions and the route tree
The file conventions are a fixed wrapper stack, and each wrapper has a different relationship to the two rendering passes
- ConceptReact·13 min read
Forms at scale
React 19's form Actions own the *submission* lifecycle — submit, pending, optimistic, error. React Hook Form owns the *field* lifecycle — per-key validation, touched/dirty state, field arrays, cross-field rules.
- ConceptReact·19 min read
Forms: Controlled and Uncontrolled
Controlled versus uncontrolled is a per-field decision, settled by whether anything needs the value before the form is submitted
- ConceptAngular·14 min read
Getting Started with Angular
Scaffolding a v22 app produces standalone components and an app config file rather than the AppModule the CLI used to generate
- ConceptNestJS·17 min read
Guards
A guard runs before validation, so the body it reads is raw input and returning false always renders as 403
- RecipeReact·8 min read
Hitting Back dumps the user at the top of the list instead of where they were
Scroll restoration needs the list data loaded before render, otherwise the router restores a position the page does not have yet
- RecipeAngular·15 min read
Hover- and Viewport-Triggered Route Preloading
Preloading lazy chunks on hover or viewport entry removes the click-then-wait pause, as long as slow connections are excluded
- ConceptReact·26 min read
How React Renders
Render is pure and disposable while commit is synchronous and atomic, and that split explains most of what React seems to do arbitrarily
- ConceptAngular·11 min read
HTTP
HttpClient is a typed layer over the browser's Fetch API with an interceptor pipeline every request and response passes through
- ConceptAngular·12 min read
HTTP Error Handling
Angular wraps every HTTP failure into one HttpErrorResponse, and a status of zero is what tells network errors apart from server errors
- ConceptAngular·12 min read
HTTP Interceptors
Interceptors are middleware for HttpClient, one ordered place to attach auth headers, retry requests, or normalize errors app-wide
- RecipeAngular·15 min read
Image Optimization: LCP Wins Without Rewriting Everything
NgOptimizedImage handles the sizing, format, and priority hints that most LCP problems come down to, without rewriting the page
- RecipeReact·4 min read
Infinite scroll loads page 80 and the tab runs out of memory
An infinite feed has to page forever without keeping forever, which means capping retained pages as well as virtualizing the DOM
- ConceptAngular·9 min read
Input Coercion: built-in transforms and CDK utilities
Built-in input transforms replaced the CDK setter dance for boolean and number inputs, leaving CDK coercion for the rest
- ConceptAngular·10 min read
Integration Tests
Integration tests widen the boundary to a real component tree or route, faking only what genuinely sits outside the app
- ConceptNestJS·17 min read
Interceptors
The handler arrives as a deferred observable, so an interceptor holds the decision to invoke it at all
- ConceptAngular·6 min read
Introduction to RxJS and Observables
Angular leans on RxJS everywhere, and the shift it demands is thinking in streams of values over time rather than single results
- ConceptAngular·11 min read
Ionic
Ionic adds a platform-adaptive mobile UI layer to Angular, and Capacitor packages the same codebase into real iOS and Android apps
- ConceptReact·18 min read
JSX and Rendering
JSX is sugar for function calls that return plain objects, and reading it that way dissolves a whole class of React confusion
- RecipeAngular·13 min read
JWT Interceptor: Breaking the Circular Dependency
The cycle between an auth service and its JWT interceptor is an architecture problem, and extracting a token service is the fix
- RecipeReact·9 min read
Logout clears the token but not the cache
Clearing the token does not end the session, so logout needs one shared teardown that cancels, wipes and broadcasts across tabs
- ConceptReact·21 min read
Memoization and the Compiler
React Compiler inverts the memoization deal, so the job is now verifying it worked rather than hand-placing memo and useMemo
- ConceptAngular·25 min read
Micro Frontends with Module Federation
Micro frontends still work the same way, but the esbuild builder means Native Federation and import maps replaced webpack federation
- ConceptReact·18 min read
Micro-frontends: the decision
Micro-frontends buy independent deployment for independent teams, and most teams that reach for them do so too early
- ConceptNestJS·18 min read
Middleware
Middleware is the adapter's layer, wrapped just enough to reach filters and inject providers, and every limit follows
- ConceptReact·17 min read
Module Federation in practice
Module Federation is runtime code sharing, and sharing exactly one React across host and remote is what decides whether it works
- ConceptNestJS·19 min read
Modules and the module graph
A module is a visibility boundary with an identity, and those two properties are enforced by different mechanisms
- RecipeAngular·17 min read
Multi-Step Wizards: State That Survives the Back Button
A wizard's state has to outlive its step components, which is why the form model belongs in a subtree-scoped service
- RecipeReact·4 min read
mutateAsync crashes the page — or nested onSuccess hell blocks a multi-step signup
Default to mutate and reach for mutateAsync only when you genuinely need a promise, because its rejections are yours to catch
- ConceptReact·18 min read
Next.js and RSC in practice
Next 16 made caching opt-in, so everything is dynamic by default and the build errors on uncached request-time data outside Suspense
- ConceptAngular·4 min read
ng-template, ngTemplateOutlet, and ng-container
ng-template stores markup that never renders where it is defined, and ngTemplateOutlet decides when and where it lands
- RecipeAngular·21 min read
NgRx → Signal Store: Migrating Without a Big-Bang Rewrite
Both stores can run side by side, so moving from NgRx to Signal Store happens one feature slice at a time rather than in one rewrite
- ConceptAngular·11 min read
NgRx Signal Store
Signal Store keeps the NgRx family but drops the Redux ceremony, replacing actions and reducers with state signals and methods
- ConceptAngular·12 min read
NgRx Store
NgRx brings Redux to Angular with real boilerplate cost, paid back in predictable state transitions and time-travel debugging
- ConceptAngular·10 min read
ngx-translate
Loading translation JSON at runtime buys instant language switching, at the cost of parsing and lookup work in the browser
- ConceptAngular·9 min read
NGXS
NGXS keeps unidirectional data flow but expresses actions as classes and state changes as decorated methods on a state class
- ConceptAngular·14 min read
Nx
Nx makes a monorepo practical by mapping project dependencies, then rebuilding and retesting only the projects a change affects
- RecipeReact·9 min read
One remote 404s and the whole shell goes white
A remote that fails to load should degrade inside its own slot, or a three-minute CDN blip becomes a full product outage
- RecipeReact·8 min read
One remote's CSS restyles another — depending on load order
Global selectors in one remote restyle another once load order decides the cascade, so scoping has to be structural not careful
- RecipeAngular·17 min read
Optimistic Updates: UI That Feels Instant Without Lying
Applying the user's intent locally and rolling back on failure is what makes an interface feel instant without misreporting results
- RecipeAngular·21 min read
Performance Auditing: "The App Is Slow, Where Do I Look?"
Pick one symptom and profile it before optimizing, because blind OnPush and trackBy changes usually spend the budget on nothing
- ConceptReact·23 min read
Performance profiling
Profiling is measurement, not optimization, and conflating the React layer with the browser layer is how it usually goes wrong
- RecipeReact·4 min read
Persisted Query cache writes PII into localStorage — and survives logout
Persisting the query cache is safe only as an allowlist of public data with a user-scoped buster that logout actually clears
- ConceptNestJS·17 min read
Persistence boundaries
Your ORM already gives you a repository, so a second one buys only changeability, and the real boundary is the transaction
- ConceptNestJS·16 min read
Pipes
A pipe sees one argument and learns its type from emitted metadata, so an interface DTO disables validation silently
- ConceptReact·19 min read
Portals and the Event System
A portal splits the React tree from the DOM tree, and every portal question reduces to asking which of the two governs the behavior
- ConceptAngular·9 min read
Progressive Web Apps (PWA)
Registering a service worker gives an Angular app offline support, cached repeat loads, background updates, and installability
- ConceptNestJS·20 min read
Providers and dependency injection
Nest injects tokens, not types, so every resolution error is a wrong token or a module that cannot see it
- RecipeReact·4 min read
Pull-to-refresh on a Suspense infinite feed flashes the whole skeleton
A suspending refetch hides the list unless it runs in a transition, and Retry only works if the cached error is reset with it
- RecipeAngular·17 min read
Race Conditions: Picking the Right Higher-Order Operator
Most Angular race conditions are one wrong higher-order operator, and switchMap, exhaustMap, concatMap, and mergeMap each fix a different one
- ConceptReact·22 min read
React Compiler deep dive
You turned on React Compiler. Some components show the ✨ badge in DevTools; some don't.
- ConceptReact·21 min read
Rendering Lists and Keys
A key is an item's identity across renders, and identity decides what persists, which is why index keys corrupt state in real lists
- RecipeAngular·15 min read
Request Deduplication: One Call When Five Would Fire
When several callers ask for the same resource at once, an in-flight cache collapses them into a single HTTP round trip
- RecipeReact·11 min read
Request waterfall
a product page that loads in one round-trip's worth of time instead of four stacked back-to-back. You'll learn to see a request waterfall (it's invisible on localhost), tell an accidental one from a real data dependency, and flatten it with parallel queries, a route loader, or an API change.
- RecipeAngular·17 min read
Retry with Backoff: Surviving Transient API Failures
Retrying with exponential backoff hides transient failures, but only if the policy separates retryable errors from terminal ones
- ConceptAngular·12 min read
Router Outlets
An outlet marks where the matched component is inserted, and named outlets let independent sections update from a single URL
- ConceptAngular·11 min read
routerLink & Directives
routerLink navigates inside the app instead of asking the browser for a new document, and routerLinkActive marks the current route
- ConceptReact·17 min read
Routing with React Router
In data mode, the router stops being a `URL -> component` switch and becomes a `URL -> (data + mutation + error + pending)` layer. A route's data is fetched before its component renders, and loader failures land in a dedicated error channel.
- ConceptNext.js·24 min read
Rules of the server boundary
Four scopes forbid different things, and the rules are enforced unevenly — one violation fails silently into a plausible value
- ConceptAngular·11 min read
RxJS Combination Operators
Combination operators merge several Observables into one, and choosing between forkJoin, combineLatest, and zip is a timing decision
- ConceptAngular·6 min read
RxJS Creation Operators
Creation operators build Observables for you, so you stop hand-writing subscribe and teardown functions for every source
- ConceptAngular·6 min read
RxJS Error Handling and Conditional Operators
An error terminates an Observable, so catchError and retry exist to replace or restart the stream rather than resume it
- ConceptAngular·10 min read
RxJS Filtering Operators
Filtering operators drop values on their way through a stream, the Observable counterpart to filtering an array
- ConceptAngular·8 min read
RxJS Higher-Order Observables and Utility Operators
Higher-order operators map each value to an inner Observable, and the flattening strategy decides what happens when they overlap
- ConceptAngular·11 min read
RxJS Subjects, Multicasting, and Unsubscribe in Angular
A Subject multicasts one execution to many subscribers, which is also where unsubscribing in Angular stops being optional
- ConceptAngular·5 min read
RxJS Transformation Operators
Pipeable operators return a new Observable instead of mutating the source, and transformation operators reshape each value in flight
- ConceptAngular·11 min read
Sass & SCSS
Angular compiles SCSS out of the box, so the real work is pairing Sass authoring features with component style encapsulation
- ConceptAngular·10 min read
Schematics
A schematic writes files through a virtual tree rather than the disk, which is what makes generation previewable and safe to abort
- ConceptNestJS·20 min read
Scopes and lifetimes
Scope belongs to a dependency tree, declared in one place and taking effect upward through everything that injects it
- RecipeReact·16 min read
Search Race Condition: Stale Results Overwrite Fresh Ones
Search-as-you-type needs a race policy, not just a debounce, because the network will happily deliver an old query last
- ConceptNestJS·18 min read
Serialization and response shaping
Serialization is the direction where a mistake leaks rather than rejects, and Exclude gives false confidence three ways
- ConceptNext.js·25 min read
Server and Client Components
The use client directive marks an entry point into the client module graph, spreading through import and never through JSX
- ConceptReact·18 min read
Server Components
You added a 300 KB syntax-highlighting library to render code blocks in a blog post. It works — and it's now in every user's bundle, parsed and evaluated on their phone, even though nothing about highlighting is interactive.
- RecipeReact·10 min read
Server data in a Zustand store goes stale
Server state in a client store goes stale with nothing to refresh it, which is why a query cache owns it and Zustand keeps the rest
- RecipeAngular·20 min read
Service Worker: Offline-First Without Losing User Data
Offline support is more than caching assets, because the work users actually lose is the pending mutation that never reached the server
- ConceptAngular·11 min read
Signal Forms
Signal Forms drops FormGroup for a plain signal of data plus a field tree exposing value, errors, and touched as signals
- ConceptAngular·13 min read
Signal Inputs
Signal inputs arrive as read-only signals, so parent values feed computed and effect directly with no ngOnChanges plumbing
- ConceptAngular·15 min read
Signals
A signal tracks every place its value is read, which lets Angular update only the consumers that depend on what changed
- RecipeReact·3 min read
Skimming the product grid fires dozens of prefetch GETs
Prefetch on intent rather than on hover, and give it a real staleTime, or the warm cache gets refetched the moment it is used
- ConceptAngular·15 min read
SSR & Hydration
Server rendering ships HTML the browser paints immediately, and hydration reuses that DOM instead of discarding and rebuilding it
- RecipeAngular·20 min read
SSR + Hydration: Debugging the Mismatches
Most hydration bugs trace back to server and client rendering different markup, and the console warning usually names the mismatch
- ConceptReact·21 min read
SSR and hydration
Three symptoms, one root cause. Your app renders fast from the server, then the console throws a hydration mismatch and a chunk of the page flickers and re-renders on the client.
- ConceptReact·22 min read
State and useState
State is a snapshot plus a queue, and every classic useState confusion comes from reading it as an ordinary JavaScript variable
- ConceptReact·17 min read
State management landscape
"Which state management library should I use?" is almost always the wrong first question.
- RecipeAngular·18 min read
Step-up Authentication: Re-auth for Sensitive Actions
An interceptor can catch a step-up challenge, collect fresh credentials, and retry the original request without the caller knowing
- RecipeReact·11 min read
StrictMode double mount
a product page that fires **one** request per view instead of two, and the diagnostic habit to tell a *dev-only StrictMode fire drill* apart from a *real duplicate that ships to production*. You'll fix the read path with abort-and-ignore and hand the problem to a query cache.
- ConceptAngular·5 min read
Structural Directives
Structural directives add, remove, and reshape the DOM, and the asterisk is shorthand for the ng-template they work through
- ConceptReact·14 min read
Styling approaches
Styling isn't a beauty contest between libraries; it's a decision on three axes — runtime vs build-time, how styles get scoped, and how you prefer to author them. The axis that reorganized everything is the first: styling work has moved out of runtime and into the build.
- ConceptReact·18 min read
Suspense
You have a dashboard where three widgets each fetch their own data. The naive version threads an `isLoading` boolean through every one, and the render is a thicket of `if (loading) return <Spinner/>` repeated per widget, plus a parent that has to decide whether to gate the whole page on all three.
- RecipeReact·7 min read
Switching to the "All transactions" tab freezes the page for six seconds
Ten thousand rows in one synchronous commit is the freeze, and virtualizing down to the visible window is what removes it
- ConceptNext.js·17 min read
Tags and invalidation
Next 16 split invalidation in two: updateTag buys correctness with latency, revalidateTag buys latency with staleness
- ConceptReact·15 min read
TanStack Router — the type-safe alternative
The capability React Router has no clean answer for is validated, typed search params, and it costs a generated route tree
- ConceptAngular·6 min read
Template Variables, ViewChild, and ContentChild
Template reference variables reach elements from the template, while ViewChild and ContentChild queries reach them from the class
- ConceptReact·14 min read
Testing
Test what the user does, not how the component does it. A test that asserts on internal state or class names breaks the moment you refactor — even when nothing the user sees changed.
- RecipeAngular·17 min read
Testing Signal-Based Components: Patterns for the v22 Era
Signal-based components need different test patterns, starting with effects that do not run until the test tells them to
- ConceptNext.js·35 min read
The Cache Components model
Next 16 caches nothing unless you opt in, and that inversion is why most existing Next.js advice is now actively wrong
- RecipeReact·4 min read
The Cancel button on a large upload does nothing
Mutations do not get the automatic abort signal queries do, so a working Cancel means threading your own controller through
- RecipeReact·8 min read
The hero paints five seconds late because the page is client-rendered
A client-rendered hero cannot paint until the JavaScript does, so the LCP element has to be in the initial server response
- RecipeReact·4 min read
The ops board sits stale while the operator stares at it
Stale does not mean refetch, so a watched dashboard needs an interval on that surface alone rather than a global polling default
- RecipeReact·8 min read
The page flashes and the console floods with hydration errors
Hydration errors come from environment-divergent values in the first render, so read time, locale and storage only after mount
- RecipeReact·8 min read
The protected page flashes before the redirect
Auth has three states, not two, and deciding in a route loader before the protected component mounts is what removes the flash
- RecipeReact·9 min read
The remote crashes with "Invalid hook call" — but only inside the shell
An invalid hook call only inside the shell means two copies of React, so federation has to treat React as a strict singleton
- ConceptReact·18 min read
The Rules of React
React's rules are the load-bearing assumptions of the hook list, StrictMode, concurrent rendering and the Compiler, not etiquette
- RecipeReact·8 min read
The Server Action succeeded, but the page still shows the old value
A successful write still shows stale UI until you invalidate the exact cache it came from, and the client cache is a second one
- RecipeReact·10 min read
The spinner never resolves after you navigate away and back
A spinner that never resolves is a loading flag that outlived its request, so derive loading from the request rather than storing it
- ConceptNext.js·19 min read
The static shell and streaming
A Suspense boundary is the seam between two rendering passes, so its placement decides what exists before the request arrives
- ConceptReact·21 min read
Thinking in React
React bets that your UI is a function of state, and most React bugs come from fighting that bet rather than from the API
- ConceptNext.js·24 min read
Thinking in the App Router
A route is not static or dynamic but a static shell with holes, and every piece of data answers one of four questions
- RecipeAngular·16 min read
Token Storage: Where Tokens Should Actually Live
Access tokens belong in memory and refresh tokens in an HttpOnly cookie, because anything in localStorage is readable by any script
- ConceptAngular·12 min read
toSignal & toObservable
These two helpers bridge Angular's two reactivity models, letting Observable sources and signal consumers meet in one component
- ConceptAngular·6 min read
Transform Data with Angular Pipes
Pipes turn raw values into display-ready output inside the template, and reuse better than a formatting method per component
- ConceptNestJS·21 min read
TypeScript for Nest
Type erasure is a runtime property in Nest, because the framework reads your types back through reflection
- ConceptAngular·10 min read
TypeScript Prerequisites for Angular
The TypeScript you need before Angular makes sense, from interfaces and generics to the utility types v22 code leans on
- RecipeReact·14 min read
Typing Lag: The Re-render Storm
The fix for a typing-lag re-render storm is structural, and the diff contains no hand-written memo, useMemo or useCallback at all
- ConceptAngular·14 min read
Unit Tests
TestBed builds a minimal Angular environment per spec, so one component runs with real DI and templates but fake dependencies
- RecipeAngular·13 min read
Upload and Download Progress with HttpClient
One custom operator turns HttpClient's raw event stream into the status and percentage a progress bar can bind to directly
- RecipeReact·8 min read
URL params drift out of sync with component state
Mirroring the URL into state is what makes filters vanish on Back, so derive from the address bar during render instead
- ConceptReact·16 min read
use() and Promises
Every hook you've met has one iron rule: call it at the top level, unconditionally, in the same order every render ([`rules-of-react`](. .
- ConceptReact·21 min read
useReducer and State Structure
The choice is not useState versus useReducer but where the rules live, and most reducer pain turns out to be state shape pain
- ConceptReact·19 min read
useRef and the DOM
State is for values that drive renders and refs are for values that survive them, and React 19 removed most of the DOM ceremony
- ConceptNestJS·18 min read
ValidationPipe in depth
Three of ValidationPipe's defaults are the opposite of its reputation, starting with transform being off
- ConceptAngular·10 min read
View Encapsulation
Three encapsulation modes decide whether a component's styles stay private or leak, which explains most CSS that will not apply
- ConceptAngular·10 min read
ViewRef & Renderer2
The view container and renderer APIs cover the small share of DOM work that Angular templates cannot express declaratively
- RecipeAngular·16 min read
Virtual Scrolling: Rendering 10,000 Items Without Killing the Browser
Rendering only the visible window keeps a ten-thousand row list responsive, provided tracking and viewport height are set correctly
- RecipeAngular·18 min read
Web Workers: Heavy Computation Without Freezing the UI
Moving CPU-heavy work to a worker keeps the UI responsive, and Comlink makes the message protocol read like ordinary method calls
- RecipeAngular·18 min read
WebSocket Integration: Real-Time Data Without the Reconnection Hell
One shared connection with backoff reconnection and a heartbeat is what separates a working real-time layer from a demo