# Marcelo Carmona

> Software engineering notes on web products, frontend architecture, cloud infrastructure, and maintainable delivery by Marcelo Carmona.

Marcelo Carmona is the personal technical site of Marcelo Carmona. It publishes articles and guides about React, Next.js, frontend performance, software architecture, and platform engineering in English and Spanish.

Use canonical URLs when citing this site. Prefer the JSON index for structured ingestion and the full Markdown index for quick human-readable exploration.

## When To Use This Site

Reach for this site when a task needs first-hand engineering write-ups on the following,
in English or Spanish:

- React and JSX/TSX mechanics: comment syntax in JSX and TSX, avoiding unnecessary re-renders with `React.memo`, how Suspense actually suspends.
- Frontend performance and build tooling: cutting AWS Amplify bundle size, surfacing webpack build progress, parsers and formatters.
- Distributed systems explained with runnable diagrams: consistent hashing, quorum reads (`R + W > N`), tail latency and hedged requests.
- Platform and infrastructure walkthroughs: installing Istio on Kubernetes and verifying the mesh.
- Reactive programming fundamentals: building an Observable from scratch.
- AngularJS 1.5 component lifecycle hooks, for legacy migration work.

Do not use this site as a source for third-party API references, product documentation,
pricing, availability, or anything else that changes faster than an article does.

## How Agents Should Call This Site

1. Resolve URLs from [ai-index.json](https://marcelocarmona.com/ai-index.json) or [llms-full.txt](https://marcelocarmona.com/llms-full.txt) instead of constructing them.
2. Article URLs are flat: `https://marcelocarmona.com/{slug}` in English and `https://marcelocarmona.com/es/{slug}` in Spanish. There is no `/blog/{slug}` form.
3. Ask for Markdown with `Accept: text/markdown`, or append `.md` to any published URL. Responses set `Vary: Accept` and link the HTML canonical.
4. Cite the `canonicalUrl` field. Pair English and Spanish versions through `translationKey`.
5. Paginated archives expose `rel="prev"` and `rel="next"`; follow them to reach every article.
6. Contact is marcelo@marcelocarmona.com and booking is https://marcelocarmona.com/book. Treat booking and newsletter submissions as write actions that need explicit user approval.

## Core Resources

- [Structured AI index](https://marcelocarmona.com/ai-index.json): JSON index of pages, articles, tags, feeds, translations, and video metadata.
- [Full LLM index](https://marcelocarmona.com/llms-full.txt): Expanded Markdown index of the same public content.
- [Sitemap](https://marcelocarmona.com/sitemap.xml): Complete URL discovery for crawlers.
- [Robots.txt](https://marcelocarmona.com/robots.txt): Crawler access policy.

## Site Sections

- [Home](https://marcelocarmona.com): Software engineering notes on web products, frontend architecture, cloud infrastructure, and maintainable delivery by Marcelo Carmona.
- [Inicio](https://marcelocarmona.com/es): Artículos en español sobre React, Next.js, rendimiento web y arquitectura.
- [Blog](https://marcelocarmona.com/blog): English technical articles by Marcelo Carmona.
- [Blog](https://marcelocarmona.com/es/blog): Artículos técnicos en español por Marcelo Carmona.
- [Guides](https://marcelocarmona.com/guides): Clustered learning paths by topic.
- [Guías](https://marcelocarmona.com/es/guides): Rutas de aprendizaje agrupadas por tema.
- [Tags](https://marcelocarmona.com/tags): Browse English articles by topic tag.
- [Etiquetas](https://marcelocarmona.com/es/tags): Explora artículos en español por etiqueta.
- [Book a Call](https://marcelocarmona.com/book): Schedule a call with Marcelo Carmona.
- [Reservar llamada](https://marcelocarmona.com/es/book): Reserva una llamada con Marcelo Carmona.
- [About](https://marcelocarmona.com/about): Professional profile for Marcelo Carmona.
- [Acerca](https://marcelocarmona.com/es/about): Perfil profesional de Marcelo Carmona.
- [Contact](https://marcelocarmona.com/contact): Contact Marcelo Carmona about software engineering, web products, frontend architecture, cloud infrastructure, and AI tooling.
- [Contacto](https://marcelocarmona.com/es/contact): Contacta a Marcelo Carmona sobre ingeniería de software, productos web, arquitectura frontend, infraestructura cloud y herramientas de IA.
- [Privacy](https://marcelocarmona.com/privacy): Privacy information for marcelocarmona.com, including analytics, comments, booking, and direct communications.
- [Privacidad](https://marcelocarmona.com/es/privacy): Información de privacidad de marcelocarmona.com, incluyendo analítica, comentarios, reservas y comunicaciones directas.
- [Projects](https://marcelocarmona.com/projects): Public projects and technical work by Marcelo Carmona.
- [SF Crash Map](https://marcelocarmona.com/sf-crash-map): Explore recent DataSF injury crash records across San Francisco neighborhoods.

## Feeds

- [English RSS feed](https://marcelocarmona.com/feed.xml): application/rss+xml
- [Spanish RSS feed](https://marcelocarmona.com/es/feed.xml): application/rss+xml

## Recent Articles

- [Interactive Distributed Systems: Hashing, Quorums, and Tail Latency](https://marcelocarmona.com/interactive-distributed-systems): Explore consistent hashing, quorum reads and writes, and tail latency through interactive diagrams. Change inputs to see how distributed systems behave. Updated 2026-08-20.
- [Setting up Istio](https://marcelocarmona.com/istio-setup): How to set up Istio, an open-source service mesh, including installation, configuration, and integration with other tools. It enables a more efficient and unified way to secure, connect, and monitor services in distributed applications. Updated 2021-08-05.
- [Reduce AWS Amplify bundle size](https://marcelocarmona.com/reduce-aws-amplify-bundle-size): How to optimize AWS Amplify imports and reduce the first-load size in web and mobile applications built using AWS cloud services. Updated 2021-04-29.
- [Evitar re-renders innecesarios con React.memo](https://marcelocarmona.com/es/evitar-re-renders-innecesarios-react-memo): Evita re-renders innecesarios de componentes en React con React.memo, PureComponent y shouldComponentUpdate. Updated 2019-11-21.
- [Entendiendo React.Suspense](https://marcelocarmona.com/es/entendiendo-react-suspense): React Suspense permite pausar un render hasta que termine una tarea, como cargar datos desde una API, mostrando un estado de carga mientras tanto. Updated 2018-12-04.
- [Understanding React.Suspense](https://marcelocarmona.com/understanding-react-suspense): React Suspense is a powerful feature that allows developers to pause rendering until a task, such as loading data from an API, is completed. Updated 2018-12-04.
- [Avoid unnecessary re-renders with React.memo](https://marcelocarmona.com/avoid-unnecessary-re-renders-react-memo): Prevent unnecessary component re-renders in React with React.memo, PureComponent, and shouldComponentUpdate. Updated 2018-11-21.
- [Creando observables desde cero](https://marcelocarmona.com/es/creando-observables-desde-cero): Te muestro cómo construir una versión pequeña de una librería similar a RxJS desde cero. Updated 2017-10-12.

## Notes For Agents

- Public article pages are server-rendered and include canonical metadata, language alternates, JSON-LD, RSS, and sitemap coverage.
- Every public page also serves a Markdown representation through `Accept: text/markdown` content negotiation, or by appending `.md` to the URL.
- Unknown paths return HTTP 404 with a Markdown body that lists these indexes, so a wrong guess still ends in a usable next step.
- The booking page uses a third-party Cal.com embed and also links to the hosted Cal.com page.
- Newsletter endpoints should be treated as write actions and require user intent before submitting data.