Skip to content
< samuelsantana.dev />

Software Engineering,
Architecture & Code.

samuelsantana.dev is a personal blog about software engineering, architecture, and code — notes from someone who builds real products day to day.

AngularPerformanceTypeScript
Read RxJS performance, measured: the bottleneck is almost never the operator

RxJS performance, measured: the bottleneck is almost never the operator

One question that shows up under "RxJS performance" is whether RxJS is slow. I measured it. On my machine, each operator in a chain costs between 8 and 12 nanoseconds per value. Th…

13 min
Marble diagram of the typeahead: seven keystrokes from 'a' to 'angular', six requests cancelled by switchMap and only the 'angular@520ms' response reaching the screen.
The five steps of an OAuth login on a diagnostic line, each with its typical error; the flow stops at step 3, OAUTH_STATE_MISMATCH, marked with a red "HERE" stamp.
Read OAuth sign-in error? How to find the step where the login broke
14 min

OAuth sign-in error? How to find the step where the login broke

"Failed to initialize OAuth", "Couldn't sign you in", "Login failed". The message that reaches the user almost never says where the flow stopped, and an OAuth login has at least fi…

OAuthSecurity+1
Two clocks: 21:00 in the browser in Brasília and 00:00 on the server in UTC, with the React #418 date diff between them.
Read React #418 After 9 PM: My Server Was Already in Tomorrow
10 min

React #418 After 9 PM: My Server Was Already in Tomorrow

During the day, nothing. From 9 PM on, every load of the dashboard and of the public demo page of BolsoVerde, the sales-tracking app I build for small sellers in Brazil (bolsoverde…

ReactNext.js+1
Angular 22 src/app tree with each feature wired to its lazy ng build chunk (product-list 796 bytes, cart 498 bytes) and the checkout-to-catalog import blocked by the boundaries lint.
Read Angular 22 folder structure: lazy features and boundaries enforced by lint
13 min

Angular 22 folder structure: lazy features and boundaries enforced by lint

In July I wrote an overview of folder architecture for React, Angular and Node.js. The Angular part aged badly. It recommended checkout.component.ts and auth.guard.ts, components/…

AngularSoftware Architecture+1
Diagram: two charge_customer attempts charge the same invoice twice; with idempotency-key deduplication, the second attempt is dropped and the invoice is charged once.
Read Idempotency in Tool Calls: the Bug Nobody Sees Until the AI Agent Double-Charges Someone
7 min

Idempotency in Tool Calls: the Bug Nobody Sees Until the AI Agent Double-Charges Someone

An AI agent calls the charge_customer tool. The HTTP call takes longer than expected, the timeout fires, and the model itself (not a script, the model) decides to try again. Or the…

IANodeJS
The /context Memory files list: two CLAUDE.md files loaded inside the context window, and AGENTS.md struck through outside it, not loaded.
Read Context engineering in practice: what the agent doesn't load doesn't exist
14 min

Context engineering in practice: what the agent doesn't load doesn't exist

On August 19 I found out that the rules I had written for all my repositories had never applied to a single session. They lived in an AGENTS.md in the folder that holds my projects…

IASoftware Architecture
Diagram: Lambda instances with max 5 connections each converge on the pooler, which opens a few real connections to Postgres.
Read Connection Pooling on Serverless Postgres: Why Your API Chokes in Production
7 min

Connection Pooling on Serverless Postgres: Why Your API Chokes in Production

It works perfectly on your localhost. It passes CI. It works in staging with two test users. Then you ship to production, traffic grows a little, and the API starts returning too m…

PostgreSQLNodeJS+1
Diagram: withLoading → catchToState → bindTo; checking .set before typeof, React's setLoading(value) and Angular's loading.set(value) both write the value
Read RxJS Already Knows How to Do loading/error/data: the Operators Behind rx-state-bridge
5 min

RxJS Already Knows How to Do loading/error/data: the Operators Behind rx-state-bridge

Every screen that fetches data has the same skeleton: a loading that flips to true before the request and false after, an error that captures whatever went wrong, a data that recei…

TypeScriptAngular+2
Diagram: typeof === 'function' is true for both React's setLoading and Angular's signal(); on the signal, the call reads the value instead of writing it
Read signal() Is Also a Function: the Bug That Silenced Every rx-state-bridge Operator Under Angular
6 min

signal() Is Also a Function: the Bug That Silenced Every rx-state-bridge Operator Under Angular

rx-state-bridge is a library I wrote to solve a tedious, repetitive problem: every fetch in a UI ends up with the same loading/error/data trio rewritten by hand, subscription after…

AngularReact+2
Cover: a callback URL carrying ?token= branching into access logs, history, the Referer header and an analytics SDK; beside it, the safe flow: ?code=, POST /auth/exchange, httpOnly cookie.
Read The Silent OAuth Bug: Why the Token Should Never Travel Through the URL
5 min

The Silent OAuth Bug: Why the Token Should Never Travel Through the URL

OAuth login works. The popup opens, the user approves on Google, the popup closes, and your app receives ?token=eyJhbGciOi... in the callback URL. You read the token off the query…

OAuthSecurity+1
Diagram: a src/ tree organized by file type (components/, services/, types/, hooks/, utils/) is refactored into feature folders — checkout/, billing/ and catalog/.
Read Folder Architecture at Scale: How to Organize React, Angular, and Node.js Projects with SOLID and Clean Architecture
7 min

Folder Architecture at Scale: How to Organize React, Angular, and Node.js Projects with SOLID and Clean Architecture

Update: looking for Angular only? The Angular 22 folder structure post was tested on the current CLI, with today's file names (no .component.ts), lazy routes per feature and bounda…

AngularReact+1
Illustration of an AI robot operating an Angular dashboard in the browser: it turns on the dark theme, sets a maximum price filter and triggers a screen reader announcement.
Read The AI-Driven Frontend: WebMCP, Tools, and Accessibility in Angular
5 min

The AI-Driven Frontend: WebMCP, Tools, and Accessibility in Angular

For years, the role of the frontend was very clear: fetch data from an API (REST or GraphQL), manage local state, and render HTML. We built "dumb" applications that relied exclusiv…

AngularIA
JWT, with a padlock and a token, versus Server-Side Sessions, with a Redis database and a key; Next.js and NestJS logos on both sides.
Read Authentication and Security: JWT vs. Server-Side Sessions in the Next.js + NestJS Ecosystem
5 min

Authentication and Security: JWT vs. Server-Side Sessions in the Next.js + NestJS Ecosystem

If there is a topic in software engineering capable of generating more debates than the choice between spaces and tabs, it's authentication. For years, the frontend community adopt…

NestJSNext.js+1
The RxJS logo tangled in wires on the left, versus the Angular shield emitting beams labeled Signals and computed on the right
Read RxJS vs. Signals: The impact on performance and architecture in Angular applications
6 min

RxJS vs. Signals: The impact on performance and architecture in Angular applications

Anyone building Angular applications for more than a few years has probably developed a sort of Stockholm Syndrome with RxJS. We love it for its robustness in handling complex asyn…

Angular
Isometric illustration: the crumbling GA2 legacy district, flagging a race condition, linked through a "Tenant Context Gatekeeper" to the modern GA3 district that a "Migration Orchestrator" robotic arm is assembling.
Read Real Strategies for Complex Frontend Migrations
7 min

Real Strategies for Complex Frontend Migrations

The End of the "Big Bang" Every senior dev has been in this meeting. The legacy code has accumulated unpayable technical debt, build times take agonizing minutes, every new feature…

Software ArchitectureMicro-frontends
Illustration: tokens flowing into a context window, skill gears (tool use, data analysis, reasoning, code generation) and, at the top, an autonomous agent.
Read LLM Architecture: Tokens, Context, Skills, and Agents
5 min

LLM Architecture: Tokens, Context, Skills, and Agents

The integration of generative AI is no longer just about chat interfaces; it has become a direct software architecture challenge. Understanding how the engine of these tools works…

IA
Cover: on the left, vertex-web and vertex-api with the cookie stuck on the API's domain; on the right, the API hands back a code, vertex-web calls POST /auth/exchange and keeps the cookie.
Read Why My OAuth Login Worked in Dev and Broke in Production
5 min

Why My OAuth Login Worked in Dev and Broke in Production

For weeks, the Google and GitHub login on samuelsantana.dev worked perfectly—in my local environment. In production, the popup would open, the user would authorize, and after that,…

Next.jsNestJS+4
Diagram: Zone.js checks five components (header, cart, sidebar, footer, modal); with signal(), only cart is updated
Read The Angular Renaissance: Signals and the New HTTP Approach
3 min

The Angular Renaissance: Signals and the New HTTP Approach

If you follow the Angular ecosystem closely, you know the framework is going through its biggest renaissance since the AngularJS-to-Angular-2 rewrite. With versions 16 and 17 landi…

AngularPerformance
Diagram: a monolithic bundle (app.bundle.js) holding checkout, cart, billing, profile and admin is federated into a shell with three micro-frontends — checkout, billing and profile — each deployed independently.
Read Has the Frontend Become the New Monolith? How Architecture Impacts Business Scale
2 min

Has the Frontend Become the New Monolith? How Architecture Impacts Business Scale

For a long time, the term "legacy monolith" was a nightmare exclusive to backend teams. But as the complexity of modern web applications grew, business logic, state management, and…

Software ArchitectureMicro-frontends