MARG · I
I
On small components
A great army is not great because of its generals, but because each unit can hold its ground unsupervised. So too with components — let each one render without knowing the world.
⸻ Smaller units, larger empires.
Born on the second of August, nineteen hundred ninety-five — two thousand two hundred and eleven years to the day after Hannibal Barca encircled Rome at Cannae.
BUILDS THE WEB · FORTIFIES THE STACK
Eighty-six thousand Romans face fifty thousand Carthaginians on the plain of Cannae. Hannibal bows his weakest troops — Gauls and Spaniards — forward in a thin crescent, his veteran African infantry held back on the wings.
Send the thinnest viable version forward: an MVP that bows where it must, and holds the strongest abstractions in reserve behind the line. At SHFT the chat platform shipped this way — visible behaviour first, hardened internals second.
A messenger network that outruns the breath, a treasury sealed against tampering, and one armoury every legion draws from — real-time multi-tenant chat under sub-second latency, payments validated at every boundary, and a shared component library across micro-frontends.
Every word reaches the far camp before a breath is drawn, and one keep quarters many houses that never glimpse each other — real-time multi-tenant chat. Next.js 14, WebSocket couriers (Ably), Zustand holding field-state, Redis as the forward granary; sub-second latency across regions.
Struck the slow camp and crossed to faster ground, carrying only the baggage worth the march — migrated a high-traffic Shopify app from CRA to Vite. A supply line that never sleeps (GitHub Actions CI/CD) runs cargo to AWS S3 / CloudFront; GTM analytics.
A double gate on the treasury — none passes without the right seal, every message searched at the threshold. Secure fintech modules: RBAC at the gate, schema-driven validation via Zod + React Hook Form — no malformed payload reaches the ledger.
Forged one armoury every cohort draws from, so no smith hammers the same blade twice. Standardised the UI component library on Tailwind + Storybook — design-to-build handoff cut 40% across micro-frontends.
The weapons rack. Each tool earned its place by surviving a real campaign.
Loose pages from the working notebook. Engineering observations dressed up in the wrong century.
A great army is not great because of its generals, but because each unit can hold its ground unsupervised. So too with components — let each one render without knowing the world.
Hannibal travelled with his grain. Redis travels with your queries. In both cases the principle is identical: never march your tired soldiers (or your database) toward the same well twice.
There is no battle without an exit route. When abandoning a build tool, take the artifacts you trust, leave the rest in the camp you are burning, and march at first light. Do not look back at the Webpack config.
A schema is a shield wall. Zod and React Hook Form together form a phalanx that no malformed payload, however cunning, will breach without first being noticed by the front rank.
Four hundred and fifty students passed through the academy. One does not learn engineering from books any more than one learns warfare from manuals — one learns by being given a problem and a colleague who has seen it twice before.
A plan admired in the tent takes no ground. The legion that marches at dawn — rough order and all — holds the field by dusk.
Plain meanings for the figures of speech. What the metaphors decode to, in the language of the trade.
→ Frontend — the browser-side of the application the user actually touches.
→ Ship visible behaviour first — an MVP up front, the durable abstractions held in reserve behind the line.
→ CI/CD pipeline — GitHub Actions automating build, test, and deploy without a hand on the lever.
→ Message delivery — two-way WebSockets (Ably), polling, push notifications, or webhooks: a rider from an allied camp arriving the instant an event fires.
→ Redis cache — data kept close so the database is never asked the same question twice.
→ Authentication — JWT access + refresh tokens, OAuth integration, and second-factor checks (OTP / SMS / 2FA / MFA); none passes without the right seal.
→ Docker + Kubernetes — identical, portable units that deploy and scale on command.
→ Error monitoring — Sentry, Bugsnag, or hand-rolled tracking that names a fault in production the moment it appears.
→ Layered defence — schema validation (Zod), strict token validation, and hardening at every tier; no malformed or forged request passes the front rank.
→ Client state management — Zustand or Redux Toolkit holding what the screen currently knows.
→ Live telemetry — sub-second SignalR feeds rendered on a GIS map (Leaflet / Mapbox).
→ A shared component library — Storybook + Tailwind, one set of parts every app draws from.
→ A build-tool migration — moving from Create React App to Vite for a faster forge.
→ Performance work — smaller bundles, leaner assets, Lighthouse held above 90 on every axis.