Articles by Sergio Xalambrí. https://r3.sergiodxa.com/articles 731b571a-9fb8-472d-9560-3a85c092fd0d Test your business logic, not your loaders and actions. Treat them as integration points and avoid mocking nightmares. https://r3.sergiodxa.com/articles/react-router-loaders-and-actions-as-integration-points Fri, 20 Feb 2026 06:40:28 GMT 34ef2cba-6787-417d-bbcb-f8f65fe6fe20 Understanding MVC, MVT, MVVM, and Component architectures through responsibility separation and data flow in modern web applications. https://r3.sergiodxa.com/articles/how-architecture-patterns-shape-development Sat, 04 Oct 2025 05:26:12 GMT 9befdbcc-ee15-4c40-b974-92c75455b9c4 JWTs used as OAuth2 access tokens contain claims that define identity, security, and permissions. Learn how to use and validate them. https://r3.sergiodxa.com/articles/oauth2-access-token-claims-explained Wed, 19 Mar 2025 23:30:58 GMT cd5f4ca4-c7d5-4ea5-beee-aacecaa1a293 OAuth2 scopes define what an app can do with your data. Learn how they work, best practices, and how to enforce them in your API. https://r3.sergiodxa.com/articles/oauth2-scopes-explained Thu, 13 Mar 2025 21:47:20 GMT db36f48a-2eaa-479f-9402-aa67c583abd6 OAuth2 uses Access, Refresh, and ID Tokens, each with a distinct role. Learn how they work and how to store them securely. https://r3.sergiodxa.com/articles/oauth2-tokens-explained Mon, 10 Mar 2025 15:13:42 GMT 78fbbb7b-265e-4cfa-8138-05bc2311a9aa The OAuth2 audience (aud) claim ensures tokens are used only by the right APIs. Learn how it works and why it matters. https://r3.sergiodxa.com/articles/oauth2-audience-explained Mon, 10 Mar 2025 04:09:54 GMT bb4bd500-020d-44d8-93a9-6a58f8dab8d0 JWTs offer fast, stateless authentication, while opaque tokens provide better revocation control. Which one should you use? https://r3.sergiodxa.com/articles/jwt-vs-opaque-tokens Sun, 09 Mar 2025 23:23:40 GMT a4d23a27-67f1-4239-ab58-230a9b9f9bf2 Securely handle OAuth2 in a Backend-for-Frontend (BFF) with React Router, keeping tokens off the frontend for better security https://r3.sergiodxa.com/articles/oauth2-for-backend-for-frontend Tue, 04 Mar 2025 23:51:25 GMT 096ea2b9-47ba-4989-8ab0-96f6989f29cc Throwing vs. returning redirects in React Router: understand when to use each, how they work, and how to handle them properly https://r3.sergiodxa.com/articles/throwing-vs-returning-redirects-in-react-router Tue, 25 Feb 2025 05:10:12 GMT 3c2adc2d-2d32-40f9-ae79-ecb5e6b28994 https://r3.sergiodxa.com/articles/making-web-component-good-enough https://r3.sergiodxa.com/articles/making-web-component-good-enough Mon, 30 Sep 2024 23:44:50 GMT 5b209b9a-31bb-4980-9584-cfd6fd26e8cd https://r3.sergiodxa.com/articles/on-frontend-vs-backend https://r3.sergiodxa.com/articles/on-frontend-vs-backend Wed, 19 Jun 2024 09:06:58 GMT ce0b8141-0ea8-46b3-8a1d-9cc5ddc7aba9 https://r3.sergiodxa.com/articles/when-to-use-route-modal-in-react-router https://r3.sergiodxa.com/articles/when-to-use-route-modal-in-react-router Sun, 16 Jun 2024 06:30:40 GMT 55b00baf-2c2f-4b39-bb7f-101f11640d26 When you code a loader/action (we'll call them data functions from now) in Remix, you can either retur… https://r3.sergiodxa.com/articles/throwing-vs-returning-responses-in-remix Fri, 14 Oct 2022 16:09:14 GMT 5bea3832-0e35-471b-9da0-3c9898bfeead Let's say we have a URL structure like this: /:category/products /products Both routes need to work… https://r3.sergiodxa.com/articles/optional-route-segments-with-remix Mon, 26 Sep 2022 16:56:48 GMT c35b5706-6d6e-4c66-b80e-a007213d04e9 Dependency Injection is a way our function or class can receieve from the caller the instancie… https://r3.sergiodxa.com/articles/dependency-injection-in-remix-loaders-and-actions Tue, 19 Jul 2022 22:26:38 GMT d69b2fc1-0303-46ed-af18-3014278095b3 Zod is a great library to do schema based validations and get fully typed objects as a result. Environmen… https://r3.sergiodxa.com/articles/using-zod-to-safely-read-env-variables Thu, 23 Jun 2022 21:30:31 GMT f80b12cd-ab27-4917-aa96-12a5d34335b9 When using an external API, you may need to keep an access token to send a request as a user. And a refresh… https://r3.sergiodxa.com/articles/working-with-refresh-tokens-in-remix Fri, 03 Jun 2022 16:03:56 GMT 48e1d393-b62f-4ce6-bbad-0842297e43be Vitest is a testing framework, similar to Jest, but way faster, built on top of Vite, which uses esbuil… https://r3.sergiodxa.com/articles/e2e-test-remix-with-vitest-and-puppeteer Mon, 16 May 2022 22:42:56 GMT df3bc414-e8aa-4377-889b-2b7b390773c8 Suppose you have a complex enough Remix application. In that case, you may have reached the point where a sing… https://r3.sergiodxa.com/articles/multiple-forms-per-route-in-remix Thu, 14 Apr 2022 08:35:32 GMT 02635127-2b55-482b-85af-7aeb3fda9b72 Recently, the Tailwind Labs team published a new Combobox component on Headless UI and use… https://r3.sergiodxa.com/articles/building-a-command-palette-with-remix-and-tailwind-ui Thu, 24 Feb 2022 23:07:42 GMT b78bfa03-13fc-4523-ae19-3a52ec329788 When you build a web application, you may reach a point where some performance problems could be solved by a… https://r3.sergiodxa.com/articles/http-vs-server-side-cache-in-remix Wed, 22 Dec 2021 19:22:24 GMT a4ed3a20-405e-44c4-a5a1-9d07e45b930b El código síncrono se ejecuta una linea a la vez, cierto? Entonces si haces esto: let result = fn(… https://r3.sergiodxa.com/articles/clase-rapida-de-programacion-asincrona Mon, 20 Dec 2021 02:50:17 GMT 8b0ef81d-7895-4056-a270-285c7682abfa Remix makes it really easy to don't send JS to the browser. It even has a guide on how to let routes statically def… https://r3.sergiodxa.com/articles/on-demand-hydration-in-remix Fri, 10 Dec 2021 23:14:53 GMT 5764d421-b49d-4bb2-ac72-c2d048f03b8d Document Request So, let's say you have a route at /my-super-route, and there you have a loader fun… https://r3.sergiodxa.com/articles/loader-vs-route-cache-headers-in-remix Thu, 02 Dec 2021 17:20:54 GMT d42ec256-1014-4cbc-8905-8488c9e388d6 If you use Remix, there's a hook that you can use called useMatches, this hook is a way to access some internal d… https://r3.sergiodxa.com/articles/the-usematches-hook-in-remix Tue, 30 Nov 2021 23:36:29 GMT 98afb00f-0c43-4e3a-9c4f-612dc5136b5f The Constraints API is a browser API that has been available since the times of IE10, yep, that old.… https://r3.sergiodxa.com/articles/validating-remix-forms-with-constraints-api Fri, 26 Nov 2021 06:32:51 GMT 4058e8c8-9ea0-4967-bd4c-10bf41e7d51c Build resilient TypeScript apps that handle failures gracefully using the Result pattern to make errors explicit in your types. https://r3.sergiodxa.com/articles/result-objects-in-ts Wed, 17 Nov 2021 20:32:42 GMT bf276e06-d26e-44ef-9224-c73465a70512 Most of the time, there is two way to implement dark mode support in an application. Using media queries with `pre… https://r3.sergiodxa.com/articles/dark-mode-and-dark-context Tue, 16 Nov 2021 05:01:23 GMT 9bf18a1f-b297-4a9d-b896-5fe8aaf590f2 If you have used SWR or React Query, you may be used to a feature both libraries have called automatic revalidat… https://r3.sergiodxa.com/articles/automatic-revalidation-in-remix Tue, 31 Aug 2021 17:37:46 GMT 487451eb-062b-42ed-b732-f3fe4220002d If you need to generate a PDF for your users, maybe some reports or a document you want users to be abl… https://r3.sergiodxa.com/articles/creating-a-pdf-with-react-in-the-browser Wed, 14 Jul 2021 17:58:01 GMT f332518b-c019-4ba8-a56c-ba2e2173647f Hey! This is outdated, Remix Outlet component now supports sending data to leaf routes using … https://r3.sergiodxa.com/articles/sending-data-from-layout-to-leaf-routes-in-remix Tue, 29 Jun 2021 06:19:57 GMT 4ff0a041-9d21-4774-8d3e-0c2c6e8d72dc A Remix app is by default fast, the framework optimize a lot how the required resources for a page are loaded s… https://r3.sergiodxa.com/articles/using-service-workers-with-remix Tue, 29 Jun 2021 06:08:42 GMT 4c2882eb-f88b-44a2-b401-965ca9940471 There's a lot if libraries to implement i18n in JS and React, and i18next is one of the most popular out ther… https://r3.sergiodxa.com/articles/localizing-remix-apps-with-i18next Tue, 29 Jun 2021 05:53:24 GMT 5a8bd6f2-907e-4c70-b271-7f5340dd7317 While you may not need CSRF if your cookies have the SameSite: Lax configured, it may still be a good idea to … https://r3.sergiodxa.com/articles/adding-csrf-protection-to-remix Mon, 28 Jun 2021 20:49:49 GMT fe7d3efa-8423-4574-a344-0349aa196677 While this works, I recommend you to don't do all of this yourself, instead use Remix Auth with… https://r3.sergiodxa.com/articles/server-side-authentication-with-auth0-in-remix Thu, 17 Jun 2021 23:12:21 GMT b4804544-0c72-4034-bc45-7c59ab1e781f Let's see how to do the setup of TailwindCSS for a project using Remix. Install Tailwind The first thing we ne… https://r3.sergiodxa.com/articles/using-tailwindcss-with-remix Thu, 17 Jun 2021 22:13:00 GMT 75122554-b3a6-4071-ac57-dedfa89f92e9 When testing the logic of an action in Remix, or any function returning a Response, even a Fetch API Response,… https://r3.sergiodxa.com/articles/jest-matchers-for-remix-responses Tue, 01 Jun 2021 22:44:26 GMT ea59b67b-4a21-49ea-bfe8-699835744969 In Remix, each route can export a single action function used to handle any non GET request received b… https://r3.sergiodxa.com/articles/using-form-objects-inside-remix-actions Tue, 01 Jun 2021 05:51:41 GMT 76db0fc4-eb4a-4656-8b9f-00bfafd5f29b A Policy is a design pattern used to define authorization rules that can be re-used easily across an app… https://r3.sergiodxa.com/articles/route-protection-in-remix-with-policies Thu, 27 May 2021 16:12:11 GMT c3a0ced6-c795-48df-a456-2256b171d1ab Para entender esto es un poco útil que aprendan como funcionaban las dependencias antes, hace mucho tiempo atrás (unos 6… https://r3.sergiodxa.com/articles/que-es-un-bundler-de-js Fri, 07 May 2021 03:53:50 GMT 6e7db86f-f174-440e-9f09-636871a52659 I have been using Next for years, since the v1 was released, I even become an early contributor of the framework and… https://r3.sergiodxa.com/articles/remix-vs-next-js-comparison Mon, 26 Apr 2021 05:38:21 GMT d4529a72-dcd2-47c8-a262-7cfad7ac2873 If, for some reason, you need to rename a column in a table you need to create a new migration and r… https://r3.sergiodxa.com/articles/how-to-rename-a-column-in-a-rails-migration Wed, 03 Mar 2021 16:54:48 GMT ad1c837b-5cca-491f-a105-8b1cb29df0e4 Las variables de entorno nos permiten configurar como un software se ejecuta dependiendo de la computadora … https://r3.sergiodxa.com/articles/usar-variables-de-entorno-en-next-js Tue, 23 Feb 2021 05:24:25 GMT e6f84ed9-0195-4b76-b0ef-4a9c324cb660 A photo of me Hi there! I'm a web developer currently based on Lima, Perú. I'm currently working in Silverback Ventures as the web devel… https://r3.sergiodxa.com/articles/about Thu, 14 Jan 2021 06:04:53 GMT 0c4d6b98-9470-4b58-beb8-a5a6edad928f Ayer el team de React… https://r3.sergiodxa.com/articles/que-son-server-components-de-react-y-como-se-relacionan-con-ssr-ssg-isr Wed, 23 Dec 2020 02:42:09 GMT 54b1354a-3615-4dc7-bc12-4e7572201413 When creating an effect in React, avoid arrow function and instead use a function with a name. This wil… https://r3.sergiodxa.com/articles/pro-tip-name-your-useeffect-functions Thu, 17 Dec 2020 20:01:10 GMT 3efca413-7796-4d2e-ab22-c5408383acd9 One of the most common ways to use MDX in a website is to have the .mdx files together with the rest of the webs… https://r3.sergiodxa.com/articles/using-mdx-with-remote-content Mon, 23 Nov 2020 22:25:06 GMT 242dfbae-50c1-4114-9f4f-d4a9025034a3 Conceptos Básicos Introducción En este artículo muy largo vamos a ver como usar esta librería para trabajar con d… https://r3.sergiodxa.com/articles/todo-lo-que-se-de-swr Sun, 13 Sep 2020 10:26:26 GMT 9ca8953b-d514-4d86-ae6c-e9b4d9bf37d9 Let's say you are in charge of building the UI of Twitter, how many states do you think that UI … https://r3.sergiodxa.com/articles/the-states-of-the-ui Tue, 25 Aug 2020 00:32:55 GMT 8a429769-28b6-43d7-9ac4-8f67c023187e This is my current development setup. Tech Stack TypeSc… https://r3.sergiodxa.com/articles/uses Sun, 23 Aug 2020 23:53:18 GMT 00586efd-f1de-4fa9-b4a9-1893fd109f5e Corría el año 2002, tenía unos 10 años, un día me pregu… https://r3.sergiodxa.com/articles/historia Tue, 18 Aug 2020 13:04:37 GMT 6a2ba101-4343-4ee0-bd14-628de716e334 One of the most common architectural styles to build an HTTP API is… https://r3.sergiodxa.com/articles/why-build-a-non-restful-api Sat, 15 Aug 2020 22:49:30 GMT d05bbe1f-081d-447a-85b3-27829908c6c1 Most people when working with tools like webpack te… https://r3.sergiodxa.com/articles/how-i-work-with-static-assets-in-react-apps Thu, 13 Aug 2020 01:43:21 GMT 1eff8d96-87fb-446c-8993-77f8ed806876 Learn how to create nested shallow resource routes in Rails https://r3.sergiodxa.com/articles/how-shallow-true-works-in-rails Tue, 11 Aug 2020 22:55:18 GMT 5a9c4218-4225-454f-bc60-2d0b5655fbbb Use the useMutation hook together with SWR to implement optimistic updates in your React components https://r3.sergiodxa.com/articles/swr/use-mutation Thu, 23 Jul 2020 08:17:26 GMT 17868ea4-917f-4206-aed5-faa65da64f02 Hay muchas formas de organizar aplicaciones de React, con los años esta es la que más me ha convencido https://r3.sergiodxa.com/articles/react/estructura-archivos Thu, 16 Jul 2020 05:56:01 GMT aff77a68-c3a3-432c-998f-be346ad01a79 There are many ways to organize a React application, with the years this the the one I liked the most https://r3.sergiodxa.com/articles/react/file-structure Thu, 16 Jul 2020 04:37:52 GMT 12e6fd5d-8c02-43a7-af43-ded09282b93c Aprende como usar React.Suspense para controlar el estado de carga de imágenes. https://r3.sergiodxa.com/articles/react/cargando-imagenes-con-suspense Wed, 15 Jul 2020 23:07:00 GMT ca95794a-4be1-4ada-98cb-3f2f42597db6 Normalmente, al crear un app de React, un componente necesita un dato del API, ej. el usuario log… https://r3.sergiodxa.com/articles/data-aware-components Wed, 24 Jun 2020 08:02:46 GMT 848c4f5b-53b3-4bf6-b1d1-b5cf6b3ea688 A TypeScript client for the Collected Notes API. TypeScript Support Types for the API returned value Types fo… https://r3.sergiodxa.com/articles/collected-notes-ts-client Sat, 20 Jun 2020 03:24:14 GMT 96d9640f-38cf-4dfd-8eba-b0b8513e3674 Now that Collected Notes has an API to get the notes you wrote here it's possible to use it as a CMS (Content Manag… https://r3.sergiodxa.com/articles/using-collected-notes-as-cms Sat, 06 Jun 2020 10:21:22 GMT a540454c-aa17-4188-bedb-80a31fd52365 Use Immer to make optimistic UI updates with SWR easier to follow https://r3.sergiodxa.com/articles/swr/mutate-immer Sat, 09 May 2020 02:16:03 GMT 342f365e-8b6d-4494-afef-9aba8e99899c Learn how to use the Render as you Fetch pattern with React and SWR. https://r3.sergiodxa.com/articles/render-as-you-fetch Thu, 23 Jan 2020 22:03:45 GMT 6b96d528-4f03-4090-810e-bba18ea80956 Optimizing the performance of a Next.js using SWR and data prefetching. https://r3.sergiodxa.com/articles/next-swr-prefetch Wed, 22 Jan 2020 17:40:27 GMT 7cf66bac-a299-4ab6-bf73-576f6f07f654 Client-Side Applications could have different types of states based on the requirements, let's dig through them and learn their differences. https://r3.sergiodxa.com/articles/type-states-client-side-app Tue, 21 Jan 2020 05:00:00 GMT dcf10c22-6f60-4dc7-8059-f5fe66a37b3b Learn how to use Tailwind in a Next.js application. https://r3.sergiodxa.com/articles/next-tailwind Thu, 26 Dec 2019 20:19:09 GMT 30d1d0bd-68c3-4835-ad4f-6c3872e46ad9 Learn how to use SWR for data fetching with Suspense to handle loading states. https://r3.sergiodxa.com/articles/swr/suspense Thu, 21 Nov 2019 14:30:36 GMT 18861188-65ce-44be-b33b-44aa0c6ec99b Learn how to use SWR to build an infinite scrolled paginated data. https://r3.sergiodxa.com/articles/swr/pagination Wed, 20 Nov 2019 14:30:36 GMT f9b1aeec-5644-4378-be6c-7a4f1bb30f4b Learn how to start using SWR, the ZEIT data fetching library for React applications. https://r3.sergiodxa.com/articles/swr/intro Wed, 20 Nov 2019 06:13:30 GMT 3b121549-d347-4b23-aec5-45e970506198 Use Flagged to detect Feature Flags and render or not a React component https://r3.sergiodxa.com/articles/feature-flags-react Sat, 26 Oct 2019 17:45:34 GMT 746883b5-3b33-4ab9-8d45-61fc5a07b2ee Overview of the file structure I like to use in Next.js projects https://r3.sergiodxa.com/articles/next-file-structure Tue, 27 Aug 2019 22:15:52 GMT 804d1f10-8a26-4653-ae1b-9ee206371e45 Learn how to test components using dynamic imports in a Next.js application. https://r3.sergiodxa.com/articles/testing-in-next-dynamic-imports Thu, 22 Aug 2019 03:14:16 GMT 04f5eb51-78c2-4e02-ab61-1f990a157cb4 Learn how to create redirects when using Next.js in the most efficient way. https://r3.sergiodxa.com/articles/redirects-in-next-the-good-way Tue, 20 Aug 2019 18:20:48 GMT 4c137175-bd4d-4060-9574-616028fb7146 Learn how to work with forms and form elements in React without using another library. https://r3.sergiodxa.com/articles/react-working-with-forms Wed, 19 Jun 2019 20:21:42 GMT c76fd9cc-8277-4f1c-a322-f490fe26c845 Learn how to conditionally render elements and how to properly work with lists in React. https://r3.sergiodxa.com/articles/react-conditions-lists Tue, 18 Jun 2019 17:36:02 GMT 5ac7a1e5-acce-468a-87d2-dfb4680124ff Learn how to start a React project, create your first component and use the State and Effects hooks to implement basic behaviors. https://r3.sergiodxa.com/articles/react-state-effects Sat, 15 Jun 2019 20:54:54 GMT c909ee31-a3e7-4599-9eb3-9ab2e25f9005 Contentz, a Pure Static Site Generator which let you focus on the content and gives you a highly optimized website. https://r3.sergiodxa.com/articles/introducing-contentz Tue, 23 Apr 2019 02:13:19 GMT b494a10b-4dc1-472c-a6ae-7b5ed165f908 List of possible career paths, titles and level you could find while working as Software Engineer. https://r3.sergiodxa.com/articles/career-titles-levels Tue, 09 Apr 2019 21:25:19 GMT 6d966415-8bbd-4206-a6d2-0555b26fafb3 Aprende como llevar tu sitio de Contentz a producción usando Netlify. https://r3.sergiodxa.com/articles/contentz-netlify Thu, 21 Mar 2019 19:56:31 GMT c3f58e8d-6824-465c-bb86-43360fcc3b82 Contentz toma decisiones por uno, a cambio nos ofrece un sitio optimizado para un mejor rendimiento y lectura. https://r3.sergiodxa.com/articles/contentz-es-omakase Thu, 21 Mar 2019 18:33:05 GMT 217b2515-10c6-41de-a13f-3109abe754c6 Aprende a usar Array#forEeach, como se implementa a mano y casos de uso prácticos de este método de los array en JavaScript. https://r3.sergiodxa.com/articles/js-basics/array-prototype-foreach Tue, 12 Mar 2019 17:05:27 GMT cd886e92-81b0-4e8a-a416-6ceabefa6a26 Aprende como crear un módulo y publicarlo a npm configurando Prettier, ESLint, pruebas, tipos y más. https://r3.sergiodxa.com/articles/crear-modulo-npm Mon, 11 Mar 2019 17:12:50 GMT 0f329b04-4483-4a99-a310-fcb67d4b4b60 Introducción a Zero Server, el framework de desarrollo web con cero configuración. https://r3.sergiodxa.com/articles/aplicaciones-web-con-zero-server Wed, 06 Mar 2019 04:56:18 GMT 5923aee3-fc4f-41f6-8c9c-20727e1f126d Contentz, un Pure Static Site Generator para obtener un sitio web super optimizado. https://r3.sergiodxa.com/articles/presentando-contentz Tue, 05 Mar 2019 21:03:17 GMT 9304fb28-95e0-47a9-9788-b0b50206c084 El prop children tiene significado especial para React, veremos para que sirve y como usarlo en nuestros propios componentes. https://r3.sergiodxa.com/articles/react-prop-especial-children Tue, 26 Feb 2019 16:42:36 GMT 1e69000f-1761-497c-b717-41eb4d72db14 Para evitar prop drilling y hacer componentes aún más personalizables vamos a ver como usar un prop para cambiar el contenido de un componentes de React. https://r3.sergiodxa.com/articles/componentes-react-hijos-personalizables Tue, 26 Feb 2019 16:35:48 GMT ad8f8946-0834-49f1-b4a6-5d4f1854b6dc Una de las mejores cosas de React es poder combinar componentes para crear nuevo componentes más complejos https://r3.sergiodxa.com/articles/composicion-componentes-react Tue, 26 Feb 2019 16:27:49 GMT 11bcf889-5a22-476b-a19f-97a6fa271255 Hay varias formas de definir que tipos de datos recibe un componente en React, puede ser TypeScript, Flow o PropTypes https://r3.sergiodxa.com/articles/tipos-datos-react Tue, 26 Feb 2019 16:14:01 GMT dadc6089-991b-4ef5-956c-26b7bd7a8edc Es muy común querer tener props con valores por defecto en nuestros componentes de React, veremos varias formas de lograr este objetivo. https://r3.sergiodxa.com/articles/react-props-valores-predefinidos Tue, 26 Feb 2019 16:09:40 GMT 6cdc25cd-c469-4b86-bad1-af4691c9c37c Los props nos permiten crear componentes de React que sean personalizables y que nos sirven para muchos más casos https://r3.sergiodxa.com/articles/componentes-react-personalizables-props Tue, 26 Feb 2019 16:04:00 GMT ffdbe8f4-a889-4a54-a396-a78285b4a30b Los componentes de React son la unidad básica de cualquier aplicación hecha con esta librería, aprende como crear y usar componentes de React https://r3.sergiodxa.com/articles/componentes-con-react Tue, 26 Feb 2019 15:58:10 GMT 91fd2371-eb8f-47cb-b28f-7e467fe7a067 En este tutorial vamos a ver como crear un Hola Mundo en React sin usar JSX https://r3.sergiodxa.com/articles/hola-mundo-react Tue, 26 Feb 2019 15:58:06 GMT 19376632-addb-4c2a-80b6-2a9c5de24f7e En este tutorial vamos a ver como crear un Hola Mundo en React sin usar JSX. https://r3.sergiodxa.com/articles/cargando-react-cdn Tue, 26 Feb 2019 15:57:55 GMT 318a58c3-1a8c-46c6-8f07-d16a241b662e Un artículo con ideas de como sería mi generador de sitios estáticos ideal https://r3.sergiodxa.com/articles/generador-sitios-estaticos-propio Mon, 25 Feb 2019 18:09:56 GMT 58b7b948-64f4-4a0a-b8bf-a32726d51eba Aprende a usar Shell Scripts para automatizar tareas, todo con un ejemplo práctico para montar un entorno de trabajo para un proyecto en Node.js https://r3.sergiodxa.com/articles/automatizacion-shell-scripts Sat, 23 Feb 2019 04:41:48 GMT 6ca49089-fb24-4800-8521-7320382d0454 Aprende a usar Array#push, como se implementa a mano y casos de uso prácticos de este método de los array en JavaScript. https://r3.sergiodxa.com/articles/js-basics/array-prototype-push Mon, 11 Feb 2019 15:51:40 GMT 9291da82-cf58-4327-b8ac-b8320d3014f8 Aprende a usar Array#filter, como se implementa a mano y casos de uso prácticos de este método de los array en JavaScript. https://r3.sergiodxa.com/articles/js-basics/array-prototype-filter Fri, 08 Feb 2019 17:36:16 GMT a63bffde-a0a6-4b33-92b4-bc5725a4ec75 Aprende a usar Array#map, como se implementa a mano y casos de uso prácticos de este método de los array en JavaScript. https://r3.sergiodxa.com/articles/js-basics/array-prototype-map Thu, 07 Feb 2019 05:44:51 GMT 9b7fe4c8-a642-4ec5-b003-16a5c079ad57 Tutorial sobre como se pueden usar Generadores Asíncronos de ECMAScript 2018 para realizar colas o paginaciones de un API fácilmente en JavaScript https://r3.sergiodxa.com/articles/generadores-asincronos-js Wed, 30 Jan 2019 15:00:00 GMT 4f81c6ad-005a-4dc1-bdf4-d2f216d60405 Tutorial sobre como implementar un carrusel para elementos de diferentes tamaños usando React.js https://r3.sergiodxa.com/articles/carrusel-elementos-dinamicos-react Tue, 29 Jan 2019 18:44:19 GMT 5f09fe41-c392-44ef-8508-13282790d4fb Tips and recommendations to build real-time applications using WebSockets https://r3.sergiodxa.com/articles/scalable-real-time-applications Fri, 11 Jan 2019 05:52:01 GMT 1e1c2e65-b637-4552-8b4b-a0dd99c8fe05 Consejos y recomendaciones para construir aplicaciones en tiempo real usando WebSockets https://r3.sergiodxa.com/articles/aplicaciones-real-time-alta-escala Sun, 06 Jan 2019 07:20:33 GMT 3cbf5aef-9242-4b93-8852-e9bd9505211a Aprende a usar los nuevos features de React v16.6, lazy load, memoize, errores, contexto y más https://r3.sergiodxa.com/articles/react-v-16-6 Wed, 24 Oct 2018 17:32:04 GMT 3e436945-2751-4b5f-88a9-9a00c5be22f8 MDX es un formato de archivos que permite extender Markdown con código JS y JSX (Componentes de React) https://r3.sergiodxa.com/articles/introduccion-a-mdx Wed, 09 May 2018 05:03:59 GMT ea453280-9de3-4198-9676-6bb90ab5e593 After working on the documentation of the API of ZEIT I want to share some insights I learned from it https://r3.sergiodxa.com/articles/documentation Wed, 17 Jan 2018 21:18:58 GMT 17bfb437-2534-4b1f-826b-3ca17614c5a8 Después de trabajar en la documentación del API de ZEIT quiero compartir algunas lecciones que aprendí de ello. https://r3.sergiodxa.com/articles/documentacion Wed, 17 Jan 2018 21:18:58 GMT fb58dec1-fd7b-4437-9a1b-3f112bfd9a80 Cómo mantenerse actualizado es una pregunta común al comenzar, acá hay una lista de maneras útiles de hacerlo y no morir en el proceso. https://r3.sergiodxa.com/articles/como-mantenerse-actualizado-con-el-ecosistema-de-javascript Fri, 12 Jan 2018 17:53:42 GMT a9bdfdbf-b388-4784-9993-cd41a94a04f7 Crea un parser que transforme Markdown a componentes de React.js https://r3.sergiodxa.com/articles/markdown-react Sat, 06 Jan 2018 05:43:35 GMT f8c4dbe2-40f7-44ac-877b-6e101e2af60d Testing is hard. Testing Frontend is harder. But you should do it anyways. https://r3.sergiodxa.com/articles/an-accessible-approach-to-frontend-testing Sat, 30 Sep 2017 00:00:00 GMT 5a359589-c9fb-41a6-baa8-b0b5d8529aac How to keep updated is a common questions when starting, here you can find a list of useful ways to do it and not die in the process. https://r3.sergiodxa.com/articles/how-to-keep-updated-with-the-javascript-ecosystem Sun, 06 Aug 2017 17:26:03 GMT 5393d2b7-3a18-4c28-ad69-6611b83fed77 Explicación paso a paso de como implementar un servidor GraphQL desde cero en Node.js. https://r3.sergiodxa.com/articles/implementando-un-servidor-de-graphql Fri, 07 Jul 2017 15:42:42 GMT 9a41370a-aba3-47a8-a5c7-66fe52ac2fd7 Today I leave my job as Frontend Developer at Platzi to start working as Support Engineer at ▲ZEIT. https://r3.sergiodxa.com/articles/bye-platzi-hi-zeit Fri, 07 Jul 2017 04:50:53 GMT 6e6ca866-0336-4d48-8f34-0052c7bb5d7e Repaso por los diferentes métodos del ciclo de vida de un componente de React.js https://r3.sergiodxa.com/articles/ciclo-de-vida-de-un-componente-de-reactjs Thu, 06 Jul 2017 15:31:07 GMT a95280e2-e0ad-4bb6-9ce6-1fab7f70c761 Manejar flujos de datos síncronos es fácil, con Promises también es fácil hacerlos asíncronos. Ahora veamos como combinarlos. https://r3.sergiodxa.com/articles/mezclando-flujos-sincronos-y-asincronos Fri, 23 Jun 2017 22:39:48 GMT 4a75524b-b17a-4157-b5cb-16538e2e5109 En 2015 Facebook anunció GraphQL, una tecnología que empezaron a desarrollar y usar internamente en 2012. ¿Pero qué es GraphQL? https://r3.sergiodxa.com/articles/introduccion-a-graphql Mon, 29 May 2017 00:42:30 GMT fc7de063-2e99-4b73-b8a1-5306e29e782c Manejar flujos de datos asíncronos es complejo, pero con Promesas esto se vuelve mucho más fácil https://r3.sergiodxa.com/articles/que-son-y-como-funcionan-las-promesas-en-javascript Mon, 06 Mar 2017 00:00:00 GMT 1545ec9e-19e5-4002-bf4d-c9091fc18c2d Desde hace ya un tiempo han ido saliendo un montón de artículos sobre JS Fatigue, tantos que hasta hay artículos sobre la fatiga de esta. https://r3.sergiodxa.com/articles/sobre-el-ecosistema-y-la-fatiga-de-javascript Mon, 10 Oct 2016 14:01:02 GMT beb852ac-86a3-45c3-a8c9-6ea9d55d0a52 Redux es especialmente bueno al usarlo con librerías como React ya que facilita usar React solo para la UI y dejar el estado en Redux. https://r3.sergiodxa.com/articles/combinando-react-y-redux Mon, 28 Mar 2016 07:18:42 GMT 06ae95dd-683a-4005-924b-4acff8f6f3f6 Redux es una librería para controlar el estado de nuestras WebApps fácilmente, de forma consistente entre cliente y servidor y una gran DX. https://r3.sergiodxa.com/articles/introduccion-a-redux Wed, 23 Mar 2016 15:52:14 GMT 9697bd59-81e6-4b00-a570-56a78f00e9d4 Cuando estamos haciendo desarrollo Frontend es una buena práctica separar nuestro código en distintos módulos, tanto el código de JavaScr… https://r3.sergiodxa.com/articles/medium/compilando-frontend-webpack Mon, 28 Sep 2015 00:10:28 GMT d2cc2c4c-78ea-4d6a-8d20-b1617476dafc Guía de como usar FormatJS para internacionalizar aplicaciones hechas con React.js y poder pluralizar o formatear fechas y números. https://r3.sergiodxa.com/articles/medium/i18n-react-formatjs Sun, 27 Sep 2015 03:57:35 GMT a78e9ec6-6d9e-4389-a15b-1487074d4a8a Desde finales del 2014, incluso antes de que se terminara de definir ECMAScript 6 ya se estaba empezando a trabajar en la siguiente versión… https://r3.sergiodxa.com/articles/medium/introduccion-a-ecmascript-2016-7 Fri, 25 Sep 2015 00:00:00 GMT b3284bdc-599d-4ac7-86ca-b127632d1bde El nacimiento de Platzi Hace más de 5 años me enteré que los dueños de Cristalab y Maestros del Web se iban a juntar para crear Mejorando … https://r3.sergiodxa.com/articles/medium/mi-experiencia-como-estudiante-de-los-cursos-de-platzi Thu, 10 Sep 2015 00:00:00 GMT a837d011-8622-4b29-8689-afdb87b21744 React v0.14 es la nueva beta de la librería de Facebook que fue liberada recientemente. Esta primera versión llegará con dos grandes cambio… https://r3.sergiodxa.com/articles/platzi/react-v014 Wed, 08 Jul 2015 00:00:00 GMT b95201d5-b3f3-412f-ab4e-649919b366d2 Algo muy molesto cuando estás usando ES6 con Babel.js y Gulp.js para automatizar tareas es que el archivo gulpfile.js sigue estando en ES5 … https://r3.sergiodxa.com/articles/medium/usando-ecmascript-6-en-tus-tareas-de-gulp Tue, 09 Jun 2015 00:00:00 GMT 9f30c18a-8ef5-454e-b1df-bfb8e0f0348c ECMAScript 2015, comunmente conocido como ECMAScript 6 o ES6, es la nueva versión del lenguaje estandarizado ECMAScript del cual sale JavaS… https://r3.sergiodxa.com/articles/medium/usando-ecmascript-6-2015-con-babel Tue, 09 Jun 2015 00:00:00 GMT 0c39c89c-41b4-4fd6-862f-3165495b6c42 En el desarrollo FrontEnd con el tiempo han ido surgiendo lo que se conoce como buenas prácticas, cosas que normalmente hacemos porque mejo… https://r3.sergiodxa.com/articles/medium/buenas-practicas-del-desarrollo-frontend Mon, 08 Jun 2015 00:00:00 GMT 45180c4b-bfdc-489b-b5a0-59941e81507f React.js cada vez es más popular en el mundo del desarrollo web y una de las razones de esto es que permite crear código isomórfico, esto q… https://r3.sergiodxa.com/articles/medium/renderizando-react-js-en-el-server-con-express-js-y-react-engine Mon, 01 Jun 2015 00:00:00 GMT adc99b09-3754-4cc9-8cec-6379ea393a55 title: '' date: 2015-04-24T00:00:00.000Z published: true lang: es canonical_url: … https://r3.sergiodxa.com/articles/platzi/ecmascript-nueva-sintaxis Fri, 24 Apr 2015 00:00:00 GMT dc4e7bee-bd68-4d31-8bab-e902fd6f83d2 Hasta hace unos años, cuando un desarrollador quería hacer templates de sus páginas, la opción era usar algún lenguaje en el Backend como P… https://r3.sergiodxa.com/articles/cristalab/como-usar-la-etiqueta-template-en-html5 Sun, 04 Jan 2015 00:00:00 GMT 991de6c8-5ad5-4af3-802d-671c5a87c23a Como desarrollador Frontend, hay ciertas tareas que se terminan volviendo repetitivas durante el desarrollo, como compilar el CSS desde un … https://r3.sergiodxa.com/articles/cristalab/automatizando-tareas-frontend-gulp Mon, 22 Dec 2014 00:00:00 GMT 602d194e-b226-4058-95ad-c38c63098b36 JavaScript no tiene (por ahora) un sistema de módulos propio, aunque eso si, la comunidad fue creando varios para suplir esa necesidad. Act… https://r3.sergiodxa.com/articles/cristalab/uso-de-modulos-en-javascript-con-ecmascript-6 Fri, 07 Nov 2014 00:00:00 GMT 9a065518-e2c9-43b6-bee1-495e1410731a Como desarrollador FrontEnd me encuentro constantemente utilizando CSS. Este lenguaje para dar estilos a páginas web tiende a empezar siend… https://r3.sergiodxa.com/articles/medium/escribiendo-css-de-la-forma-correcta Fri, 31 Oct 2014 00:00:00 GMT 3b259fff-6a34-49f2-9d64-6c3b40e21d64 Qué es el Scope El scope es el alcance de una variable, puede ser de dos tipos, global y local. Una variable cuyo scope es global se puede… https://r3.sergiodxa.com/articles/definiendo-conceptos-closures-y-scope Thu, 31 Jul 2014 00:19:09 GMT 65e83c2e-4463-4630-8283-425fed52b416 Usar pre-procesadores de CSS de a poco se convierte un estándar en el mundo del desarrollo web front-end, pero primero empecemos hablando s… https://r3.sergiodxa.com/articles/medium/ventajas-y-desventajas-de-los-pre-procesadores-de-css Tue, 08 Jul 2014 00:00:00 GMT 3f646c6d-fa21-4e5a-8317-b4c58677edf3 Scrum es una metodología de desarrollo ágil. Scrum propone una forma diferente de organizarse en el desarrollo de un proyecto, tanto en sol… https://r3.sergiodxa.com/articles/medium/que-es-scrum Sun, 06 Jul 2014 00:00:00 GMT 2104d5ba-8462-44d6-bc18-30a8a3dfbc63 Flexbox es un módulo de CSS3 que permite crear layouts flexibles de una forma más eficiente controlando la alineación de las cajas, el anch… https://r3.sergiodxa.com/articles/cristalab/el-modulo-flexbox-de-css3 Sun, 15 Dec 2013 00:00:00 GMT 26966f1e-faa2-4a9a-8ac7-fc9097c4095b La programación orientada a objetos o POO (OOP en inglés Object Oriented Programming) es una forma de realizar aplicaciones. Javascript por… https://r3.sergiodxa.com/articles/cristalab/javascript-orientado-a-objetos Fri, 23 Aug 2013 00:00:00 GMT