{"version":1,"updatedAt":"2026-04-26T00:00:00.000Z","site":{"name":"Marcelo Carmona","description":"Software engineering notes on web products, frontend architecture, cloud infrastructure, and maintainable delivery by Marcelo Carmona.","url":"https://marcelocarmona.com","author":{"name":"Marcelo Carmona","email":"marcelo@marcelocarmona.com","github":"https://github.com/marcelocarmona","linkedin":"https://www.linkedin.com/in/carmonamarcelo"},"repository":"https://github.com/marcelocarmona/marcelocarmona","languages":[{"locale":"en","hrefLang":"en-US","label":"English","homeUrl":"https://marcelocarmona.com"},{"locale":"es","hrefLang":"es-ES","label":"Espanol","homeUrl":"https://marcelocarmona.com/es"}],"discovery":{"llmsTxtUrl":"https://marcelocarmona.com/llms.txt","llmsFullTxtUrl":"https://marcelocarmona.com/llms-full.txt","aiIndexUrl":"https://marcelocarmona.com/ai-index.json","sitemapUrl":"https://marcelocarmona.com/sitemap.xml","robotsUrl":"https://marcelocarmona.com/robots.txt"}},"feeds":[{"title":"English RSS feed","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/feed.xml","type":"application/rss+xml"},{"title":"Spanish RSS feed","locale":"es","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/feed.xml","type":"application/rss+xml"}],"pages":[{"title":"Home","locale":"en","path":"/","description":"Software engineering notes on web products, frontend architecture, cloud infrastructure, and maintainable delivery by Marcelo Carmona.","hrefLang":"en-US","url":"https://marcelocarmona.com"},{"title":"Inicio","locale":"es","path":"/es","description":"Articulos en espanol sobre React, Next.js, rendimiento web y arquitectura.","hrefLang":"es-ES","url":"https://marcelocarmona.com/es"},{"title":"Blog","locale":"en","path":"/blog","description":"English technical articles by Marcelo Carmona.","hrefLang":"en-US","url":"https://marcelocarmona.com/blog"},{"title":"Blog","locale":"es","path":"/es/blog","description":"Articulos tecnicos en espanol por Marcelo Carmona.","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/blog"},{"title":"Guides","locale":"en","path":"/guides","description":"Clustered learning paths by topic.","hrefLang":"en-US","url":"https://marcelocarmona.com/guides"},{"title":"Guias","locale":"es","path":"/es/guides","description":"Rutas de aprendizaje agrupadas por tema.","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/guides"},{"title":"Tags","locale":"en","path":"/tags","description":"Browse English articles by topic tag.","hrefLang":"en-US","url":"https://marcelocarmona.com/tags"},{"title":"Etiquetas","locale":"es","path":"/es/tags","description":"Explora articulos en espanol por etiqueta.","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/tags"},{"title":"Book a Call","locale":"en","path":"/book","description":"Schedule a call with Marcelo Carmona.","hrefLang":"en-US","url":"https://marcelocarmona.com/book"},{"title":"Reservar llamada","locale":"es","path":"/es/book","description":"Reserva una llamada con Marcelo Carmona.","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/book"},{"title":"About","locale":"en","path":"/about","description":"Professional profile for Marcelo Carmona.","hrefLang":"en-US","url":"https://marcelocarmona.com/about"},{"title":"Acerca","locale":"es","path":"/es/about","description":"Perfil profesional de Marcelo Carmona.","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/about"},{"title":"Projects","locale":"en","path":"/projects","description":"Public projects and technical work by Marcelo Carmona.","hrefLang":"en-US","url":"https://marcelocarmona.com/projects"},{"title":"SF Crash Map","locale":"en","path":"/sf-crash-map","description":"Explore recent DataSF injury crash records across San Francisco neighborhoods.","hrefLang":"en-US","url":"https://marcelocarmona.com/sf-crash-map"}],"posts":[{"type":"article","title":"Setting up Istio","slug":"istio-setup","locale":"en","language":"English","hrefLang":"en-US","url":"https://marcelocarmona.com/istio-setup","canonicalUrl":"https://marcelocarmona.com/istio-setup","summary":"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.","tags":["Kubernetes","Cloud native","Devops"],"datePublished":"2021-08-05T00:00:00.000Z","dateModified":"2021-08-05T00:00:00.000Z","translationKey":null,"translations":[],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/istio-setup.mdx"},{"type":"article","title":"Reduce AWS Amplify bundle size","slug":"reduce-aws-amplify-bundle-size","locale":"en","language":"English","hrefLang":"en-US","url":"https://marcelocarmona.com/reduce-aws-amplify-bundle-size","canonicalUrl":"https://marcelocarmona.com/reduce-aws-amplify-bundle-size","summary":"How to optimize AWS Amplify imports and reduce the first-load size in web and mobile applications built using AWS cloud services.","tags":["React","JavaScript","Typescript","AWS","AWS Amplify","Nextjs"],"datePublished":"2021-04-29T00:00:00.000Z","dateModified":"2021-04-29T00:00:00.000Z","translationKey":null,"translations":[],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/reduce-aws-amplify-bundle-size.mdx"},{"type":"article","title":"Evitar re-renders innecesarios con React.memo","slug":"evitar-re-renders-innecesarios-react-memo","locale":"es","language":"Espanol","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/evitar-re-renders-innecesarios-react-memo","canonicalUrl":"https://marcelocarmona.com/es/evitar-re-renders-innecesarios-react-memo","summary":"","tags":["React","JavaScript"],"datePublished":"2019-11-21T00:00:00.000Z","dateModified":"2019-11-21T00:00:00.000Z","translationKey":"react-memo","translations":[{"title":"Avoid unnecessary re-renders with React.memo","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/avoid-unnecessary-re-renders-react-memo"}],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/evitar-re-renders-innecesarios-react-memo.md"},{"type":"article","title":"Entendiendo React.Suspense","slug":"entendiendo-react-suspense","locale":"es","language":"Espanol","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/entendiendo-react-suspense","canonicalUrl":"https://marcelocarmona.com/es/entendiendo-react-suspense","summary":"","tags":["React","JavaScript"],"datePublished":"2018-12-04T00:00:00.000Z","dateModified":"2018-12-04T00:00:00.000Z","translationKey":"react-suspense","translations":[{"title":"Understanding React.Suspense","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/understanding-react-suspense"}],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/entendiendo-react-suspense.md"},{"type":"article","title":"Understanding React.Suspense","slug":"understanding-react-suspense","locale":"en","language":"English","hrefLang":"en-US","url":"https://marcelocarmona.com/understanding-react-suspense","canonicalUrl":"https://marcelocarmona.com/understanding-react-suspense","summary":"React Suspense is a powerful feature that allows developers to pause rendering until a task, such as loading data from an API, is completed.","tags":["React","JavaScript"],"datePublished":"2018-12-04T00:00:00.000Z","dateModified":"2018-12-04T00:00:00.000Z","translationKey":"react-suspense","translations":[{"title":"Entendiendo React.Suspense","locale":"es","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/entendiendo-react-suspense"}],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/understanding-react-suspense.mdx"},{"type":"article","title":"Avoid unnecessary re-renders with React.memo","slug":"avoid-unnecessary-re-renders-react-memo","locale":"en","language":"English","hrefLang":"en-US","url":"https://marcelocarmona.com/avoid-unnecessary-re-renders-react-memo","canonicalUrl":"https://marcelocarmona.com/avoid-unnecessary-re-renders-react-memo","summary":"Prevent unnecessary component re-renders in React with React.memo, PureComponent, and shouldComponentUpdate.","tags":["React","JavaScript"],"datePublished":"2018-11-21T00:00:00.000Z","dateModified":"2018-11-21T00:00:00.000Z","translationKey":"react-memo","translations":[{"title":"Evitar re-renders innecesarios con React.memo","locale":"es","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/evitar-re-renders-innecesarios-react-memo"}],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/avoid-unnecessary-re-renders-react-memo.mdx"},{"type":"article","title":"Creando observables desde cero","slug":"creando-observables-desde-cero","locale":"es","language":"Espanol","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/creando-observables-desde-cero","canonicalUrl":"https://marcelocarmona.com/es/creando-observables-desde-cero","summary":"Te muestro cómo construir una versión pequeña de una librería similar a RxJS desde cero.","tags":["Rxjs","JavaScript"],"datePublished":"2017-10-12T00:00:00.000Z","dateModified":"2017-10-12T00:00:00.000Z","translationKey":"rxjs-observable-scratch","translations":[{"title":"Creating observables from scratch","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/creating-observable-from-scratch"}],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/creando-observables-desde-cero.md","video":{"title":"Creando observables desde cero","url":"https://marcelocarmona.com/es/watch/creando-observables-desde-cero","embedUrl":"https://www.youtube.com/embed/XiIkG9lAr5Q","watchUrl":"https://www.youtube.com/watch?v=XiIkG9lAr5Q","thumbnailUrl":"https://i.ytimg.com/vi/XiIkG9lAr5Q/maxresdefault.jpg","uploadDate":"2017-10-12T00:00:00.000Z"}},{"type":"article","title":"Creating observables from scratch","slug":"creating-observable-from-scratch","locale":"en","language":"English","hrefLang":"en-US","url":"https://marcelocarmona.com/creating-observable-from-scratch","canonicalUrl":"https://marcelocarmona.com/creating-observable-from-scratch","summary":"I'll walk you through the process of building your own small version of an RxJS-like library from scratch.","tags":["Rxjs","JavaScript"],"datePublished":"2017-10-12T00:00:00.000Z","dateModified":"2017-10-12T00:00:00.000Z","translationKey":"rxjs-observable-scratch","translations":[{"title":"Creando observables desde cero","locale":"es","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/creando-observables-desde-cero"}],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/creating-observable-from-scratch.mdx","video":{"title":"Creating observables from scratch","url":"https://marcelocarmona.com/watch/creating-observable-from-scratch","embedUrl":"https://www.youtube.com/embed/XiIkG9lAr5Q","watchUrl":"https://www.youtube.com/watch?v=XiIkG9lAr5Q","thumbnailUrl":"https://i.ytimg.com/vi/XiIkG9lAr5Q/maxresdefault.jpg","uploadDate":"2017-10-12T00:00:00.000Z"}},{"type":"article","title":"¿Cómo comentar en React, JSX y TSX?","slug":"comentarios-en-jsx","locale":"es","language":"Espanol","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/comentarios-en-jsx","canonicalUrl":"https://marcelocarmona.com/es/comentarios-en-jsx","summary":"Aprende cómo escribir comentarios en React, JSX y TSX, incluyendo comentarios de una línea, multilínea y cómo comentar bloques de JSX correctamente.","tags":["React","Javascript","Typescript"],"datePublished":"2016-10-06T00:00:00.000Z","dateModified":"2026-04-26","translationKey":"react-jsx-comments","translations":[{"title":"How to Comment in React, JSX, and TSX","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/how-to-comment-in-react-jsx"}],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/comentarios-en-jsx.mdx"},{"type":"article","title":"How to Comment in React, JSX, and TSX","slug":"how-to-comment-in-react-jsx","locale":"en","language":"English","hrefLang":"en-US","url":"https://marcelocarmona.com/how-to-comment-in-react-jsx","canonicalUrl":"https://marcelocarmona.com/how-to-comment-in-react-jsx","summary":"Learn how to write comments in React, JSX, and TSX, including single-line comments, multi-line comments, and how to comment out JSX blocks correctly.","tags":["React","Javascript","Typescript"],"datePublished":"2016-10-06T00:00:00.000Z","dateModified":"2026-04-26","translationKey":"react-jsx-comments","translations":[{"title":"¿Cómo comentar en React, JSX y TSX?","locale":"es","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/comentarios-en-jsx"}],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/how-to-comment-in-react-jsx.mdx"},{"type":"article","title":"Webpack build progress information","slug":"webpack-building-progress-information","locale":"en","language":"English","hrefLang":"en-US","url":"https://marcelocarmona.com/webpack-building-progress-information","canonicalUrl":"https://marcelocarmona.com/webpack-building-progress-information","summary":"\"webpack-dashboard\" is a webpack plugin that shows detailed information about module size, progress, errors, and assets in the development environment. It was created by Formidable, and there are several ways to install and use it.","tags":["Webpack","Javascript"],"datePublished":"2016-09-05T00:00:00.000Z","dateModified":"2016-09-05T00:00:00.000Z","translationKey":"webpack-progress","translations":[{"title":"Información del progreso de build en Webpack","locale":"es","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/webpack-informacion-del-build"}],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/webpack-building-progress-information.mdx"},{"type":"article","title":"Información del progreso de build en Webpack","slug":"webpack-informacion-del-build","locale":"es","language":"Espanol","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/webpack-informacion-del-build","canonicalUrl":"https://marcelocarmona.com/es/webpack-informacion-del-build","summary":"","tags":["Webpack","Javascript"],"datePublished":"2016-09-05T00:00:00.000Z","dateModified":"2016-09-05T00:00:00.000Z","translationKey":"webpack-progress","translations":[{"title":"Webpack build progress information","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/webpack-building-progress-information"}],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/webpack-informacion-del-build.md"},{"type":"article","title":"Angular 1.5 métodos del ciclo de vida","slug":"angular-1.5-ciclo-de-vida","locale":"es","language":"Espanol","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/angular-1.5-ciclo-de-vida","canonicalUrl":"https://marcelocarmona.com/es/angular-1.5-ciclo-de-vida","summary":"","tags":["Angularjs","JavaScript"],"datePublished":"2016-08-08T00:00:00.000Z","dateModified":"2016-08-08T00:00:00.000Z","translationKey":"angular-lifecycle-hooks","translations":[{"title":"Angular 1.5 lifecycle hooks","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/angular-1.5-lifecycle-hooks"}],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/angular-1.5-ciclo-de-vida.md"},{"type":"article","title":"Angular 1.5 lifecycle hooks","slug":"angular-1.5-lifecycle-hooks","locale":"en","language":"English","hrefLang":"en-US","url":"https://marcelocarmona.com/angular-1.5-lifecycle-hooks","canonicalUrl":"https://marcelocarmona.com/angular-1.5-lifecycle-hooks","summary":"Using Angular 1.5 component lifecycle hooks, including $onInit, $postLink, $onChanges, and $onDestroy.","tags":["Angularjs","Javascript"],"datePublished":"2016-08-08T00:00:00.000Z","dateModified":"2016-08-08T00:00:00.000Z","translationKey":"angular-lifecycle-hooks","translations":[{"title":"Angular 1.5 métodos del ciclo de vida","locale":"es","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/angular-1.5-ciclo-de-vida"}],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/angular-1.5-lifecycle-hooks.mdx"},{"type":"article","title":"Parseo y formateo en AngularJS","slug":"parseo-y-formateo","locale":"es","language":"Espanol","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/parseo-y-formateo","canonicalUrl":"https://marcelocarmona.com/es/parseo-y-formateo","summary":"","tags":["Angularjs","JavaScript"],"datePublished":"2015-10-16T00:00:00.000Z","dateModified":"2015-10-16T00:00:00.000Z","translationKey":"angular-parsers-formatters","translations":[{"title":"Parsers and formatters in AngularJS","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/parsers-and-formatters"}],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/parseo-y-formateo.md"},{"type":"article","title":"Parsers and formatters in AngularJS","slug":"parsers-and-formatters","locale":"en","language":"English","hrefLang":"en-US","url":"https://marcelocarmona.com/parsers-and-formatters","canonicalUrl":"https://marcelocarmona.com/parsers-and-formatters","summary":"$parsers and $formatters are used in AngularJS's ngModel directive to convert data between the view and the model. $parsers transforms data from view to model, while $formatters transforms data from model to view.","tags":["Angularjs","Javascript"],"datePublished":"2015-10-16T00:00:00.000Z","dateModified":"2015-10-16T00:00:00.000Z","translationKey":"angular-parsers-formatters","translations":[{"title":"Parseo y formateo en AngularJS","locale":"es","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/parseo-y-formateo"}],"sourceUrl":"https://github.com/marcelocarmona/marcelocarmona/blob/master/data/blog/parsers-and-formatters.mdx"}],"videos":[{"articleTitle":"Creando observables desde cero","articleUrl":"https://marcelocarmona.com/es/creando-observables-desde-cero","locale":"es","title":"Creando observables desde cero","url":"https://marcelocarmona.com/es/watch/creando-observables-desde-cero","embedUrl":"https://www.youtube.com/embed/XiIkG9lAr5Q","watchUrl":"https://www.youtube.com/watch?v=XiIkG9lAr5Q","thumbnailUrl":"https://i.ytimg.com/vi/XiIkG9lAr5Q/maxresdefault.jpg","uploadDate":"2017-10-12T00:00:00.000Z"},{"articleTitle":"Creating observables from scratch","articleUrl":"https://marcelocarmona.com/creating-observable-from-scratch","locale":"en","title":"Creating observables from scratch","url":"https://marcelocarmona.com/watch/creating-observable-from-scratch","embedUrl":"https://www.youtube.com/embed/XiIkG9lAr5Q","watchUrl":"https://www.youtube.com/watch?v=XiIkG9lAr5Q","thumbnailUrl":"https://i.ytimg.com/vi/XiIkG9lAr5Q/maxresdefault.jpg","uploadDate":"2017-10-12T00:00:00.000Z"}],"tags":[{"name":"Angularjs","slug":"angularjs","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/tags/angularjs","count":2},{"name":"AWS","slug":"aws","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/tags/aws","count":1},{"name":"AWS Amplify","slug":"aws-amplify","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/tags/aws-amplify","count":1},{"name":"Cloud native","slug":"cloud-native","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/tags/cloud-native","count":1},{"name":"Devops","slug":"devops","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/tags/devops","count":1},{"name":"JavaScript","slug":"javascript","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/tags/javascript","count":8},{"name":"Kubernetes","slug":"kubernetes","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/tags/kubernetes","count":1},{"name":"Nextjs","slug":"nextjs","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/tags/nextjs","count":1},{"name":"React","slug":"react","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/tags/react","count":4},{"name":"Rxjs","slug":"rxjs","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/tags/rxjs","count":1},{"name":"Typescript","slug":"typescript","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/tags/typescript","count":2},{"name":"Webpack","slug":"webpack","locale":"en","hrefLang":"en-US","url":"https://marcelocarmona.com/tags/webpack","count":1},{"name":"Angularjs","slug":"angularjs","locale":"es","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/tags/angularjs","count":2},{"name":"JavaScript","slug":"javascript","locale":"es","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/tags/javascript","count":7},{"name":"React","slug":"react","locale":"es","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/tags/react","count":3},{"name":"Rxjs","slug":"rxjs","locale":"es","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/tags/rxjs","count":1},{"name":"Typescript","slug":"typescript","locale":"es","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/tags/typescript","count":1},{"name":"Webpack","slug":"webpack","locale":"es","hrefLang":"es-ES","url":"https://marcelocarmona.com/es/tags/webpack","count":1}]}