{"version":1,"updatedAt":"2026-04-26T00:00:00.000Z","site":{"name":"Marcelo Carmona","description":"React, Next.js, frontend performance, and software engineering notes 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":"React, Next.js, frontend performance, and software engineering notes 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"}],"posts":[{"type":"article","title":"Istio setup","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 more efficient and unified ways of securing, connecting, and monitoring 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 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 new 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 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":"Preventing unnecessary component re-renders in React and various ways to achieve it, including React memo function, 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 como construir una version pequena de una libreria 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 a RxJS 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 building 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 during the development environment. It was created by Formidable and has several options to install and use.","tags":["Webpack","Javascript"],"datePublished":"2016-09-05T00:00:00.000Z","dateModified":"2016-09-05T00:00:00.000Z","translationKey":"webpack-progress","translations":[{"title":"Webpack building progress information","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":"Webpack building progress information","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 building 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 metodos 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":"Use of 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 metodos 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 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 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}]}