Localizando tu sitio web de Remix

Rate this content
Bookmark
Github

El contenido localizado te ayuda a conectarte con tu audiencia en su idioma preferido. No solo te ayuda a hacer crecer tu negocio, sino que también ayuda a tu audiencia a comprender mejor tus ofertas. En este masterclass, obtendrás una introducción a la localización y aprenderás cómo implementar la localización en tu sitio web de Remix alimentado por Contentful.


Tabla de contenidos:

- Introducción a la localización

- Introducción a Contentful

- Localización en Contentful

- Introducción a Remix

- Configuración de un nuevo proyecto de Remix

- Renderización de contenido en el sitio web

- Implementación de la localización en el sitio web de Remix

- Recapitulación

- Próximos pasos

154 min
16 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El masterclass cubrió varios temas como la introducción a la localización y Remix, configuración del proyecto, creación de componentes, implementación de contenido e internacionalización, diferencias entre Remix y Next.js, configuración de la internacionalización, actualización de títulos y navegación, introducción a Contentful, modelo de contenido y localización, y enrutamiento dinámico. Los puntos clave incluyen la importancia de la localización para las regiones objetivo, las capacidades de Remix como framework, el proceso de configuración de un proyecto de Remix y la internacionalización, el uso de Contentful para gestionar contenido y la implementación de enrutamiento dinámico en Remix.

Available in English

1. Introducción a la Localización

Short description:

Para darles una idea de lo que vamos a construir hoy, es una aplicación web de recetas muy simple. Vamos a aprenderlo desde cero. Los requisitos previos son Node.js, un buen editor de código y una cuenta de Contentful. También es importante tener conocimientos básicos de JavaScript y GraphQL. Sigamos adelante y hablemos de la localización. La localización consiste en hacer que tu aplicación esté disponible en diferentes idiomas y asegurarse de que se vea y se sienta apropiada para la región objetivo. McDonald's en India es un ejemplo de una exitosa localización, centrándose en opciones vegetarianas. La localización es más que simplemente traducción.

Para darles una idea de lo que vamos a construir hoy, es una aplicación web de recetas muy simple. Como pueden ver, en este momento solo tengo tres recetas diferentes. Estas son algunas de mis recetas favoritas. y hay un selector de idioma aquí. Puedo cambiar el idioma y verán que cambia el nombre. También actualiza los valores aquí y el contenido también. Puedo abrir esa receta y obtener esa información también. Si lo cambio a inglés, nuevamente se traduce o me da el contenido localizado en inglés nuevamente. Entonces esto es algo que vamos a construir y también lo vamos a aprender desde cero.

Para darte una breve introducción sobre mí, mi nombre es Harshal Agrawal, y trabajo como defensor del desarrollador en Contentful, que es algo en lo que vamos a profundizar más. Me encanta experimentar con diferentes tecnologías. En mi experimento más reciente, he estado jugando con la API de WebHID. Si no estás familiarizado con la API de WebHID, es una API fantástica que te permite conectar tus dispositivos HID a tus aplicaciones web. Y un proyecto divertido en el que he estado trabajando es conectar mi controlador de PS5 a un juego basado en web. Y si quieres saber más sobre mí, solo contáctame. Puedes ir a ese sitio web donde encontrarás todos los enlaces a mis redes sociales y leer más sobre mí y mi trabajo también.

Muy bien. Volviendo a esto, los requisitos previos son, necesitas tener Node.js instalado en tu máquina. Puedes usar plataformas como Gitpod o algo así, pero voy a ejecutarlo localmente en mi máquina. Entonces, si encuentras errores en esas plataformas en la nube, es posible que no pueda ayudarte completamente con eso. Así que espero que lo estés ejecutando localmente en tu máquina y que tengas node.js instalado. Necesitamos un buen editor de código porque facilita la vida. Si quieres usar, ¿cómo se llamaba? Texto, no sé. El editor de código predeterminado que proporciona Windows. Si quieres usar el bloc de notas, está bien. Adelante y úsalo. Como mencioné, vamos a usar Contentful. Así que tener una cuenta en Contentful será muy útil. Si no tienes una cuenta en Contentful, puedes crear una rápidamente. Solo ve a contentful.com y crea una cuenta. No necesitas una tarjeta de crédito. Puedes comenzar sin necesidad de ingresar tu tarjeta de crédito allí. Y tenemos conocimientos básicos de JavaScript y también es importante tener conocimientos básicos de React. No vamos a usar mucho React aquí porque estamos usando Remix. que es maravilloso. Pero vamos a usar mucho JavaScript. Y una idea básica de GraphQL también sería muy útil porque vamos a usar la API de GraphQL aquí.

Muy bien. Lo que voy a hacer es tomar un par de minutos aquí, ver si hay alguna pregunta hasta ahora sobre los requisitos previos o cualquier otro requisito o cualquiera de esas cosas de las que acabo de hablar. Si no hay preguntas, solo denme un pulgar hacia arriba para que sepa que todo está claro hasta ahora y que puedo seguir adelante, muy bien, está bien, súper, sigamos adelante y hablemos de la localización como mencioné quiero que esto sea más interactivo, así que tengo curiosidad por saber qué significa la localización para ustedes nuevamente siéntanse libres de desactivar el silencio y simplemente hablar sobre lo que significa para ustedes. O si prefieren, si prefieren escribirlo en el chat, adelante y escríbanlo en el chat. Pero tengo curiosidad por saber qué es la localización para ustedes. Y aquí no hay respuestas incorrectas. Así que no se preocupen por, ya saben, preocuparse por dar una respuesta que pueda no ser correcta. así que la localización consiste en hacer que tu aplicación esté disponible en diferentes idiomas cierto, cierto, eso es absolutamente correcto muy bien, voy a construir sobre eso y voy a decir que también se asegura de que no solo sea el idioma, sino también la forma en que tu aplicación se ve y se siente en esa región en particular, ¿verdad? Algunos ejemplos maravillosos sobre la localización que puedo pensar son marcas como McDonald's. India es un país donde la mayoría de la población es vegetariana. así que si piensas en McDonald's, ofrecen hamburguesas, ¿verdad? Y las hamburguesas en su mayoría contienen tienen esas hamburguesas que no son aptas para vegetarianos, por lo que para tener éxito en India McDonald's adoptó su estrategia y sacó opciones que se centraban principalmente en vegetarianos, por lo que todas sus hamburguesas se centraron principalmente en vegetarianos y así es como es un ejemplo de localización, así que nuevamente, para hablar de una definición adecuada de localización, básicamente es una adaptación del producto, la aplicación o el contenido del documento para cumplir con el idioma nuevamente, no solo el idioma, sino también los requisitos culturales y otros requisitos de un mercado objetivo específico y no se trata solo de traducción, es más que eso Tenemos a Emanuel. Espero estar pronunciando tu nombre correctamente, uniéndose. Hola, gracias por unirte. Acabamos de comenzar el masterclass y hablamos sobre qué es la localización.

2. Introducción a la Localización y Remix

Short description:

Si no estás en Discord, te animo encarecidamente a unirte al servidor de Discord. Hemos cubierto los requisitos previos para el masterclass. Discutimos la diferencia entre localización e internacionalización. La internacionalización es el proceso de preparar tus aplicaciones para la localización. Desde el punto de vista de la implementación del proyecto, tanto la localización como la internacionalización son procesos diferentes. Luego presentamos Remix como el framework que utilizaremos. Remix no es solo un framework de React, es un compilador, un controlador HTTP del lado del servidor, un framework del lado del servidor y un framework del navegador. Compila tu código, genera código tanto del lado del servidor como del lado del cliente, y te permite crear APIs. Remix tiene envoltorios integrados para frameworks existentes como Express, lo que facilita su implementación en cualquier plataforma. También es un framework del lado del servidor, lo que significa que puedes construir toda tu API utilizando Remix. Es como la vista y el controlador en el framework MVC.

Si no estás en Discord, te animo encarecidamente a unirte al servidor de Discord. Ya he compartido mi repositorio de GitHub que vamos a utilizar en este masterclass Y solo un breve resumen de los requisitos previos, necesitas tener Node.js, instalar un editor de código, algunos conocimientos básicos de JavaScript, React y GraphQL serían muy útiles para ti en este masterclass.

Muy bien, así que hablamos de la localización. La siguiente parte que a menudo escucho a la gente cuando hablo de la localización es este término llamado internacionalización. Y la gente se confunde cuando hablan de localización o internacionalización a menudo usan estas palabras indistintamente, lo cual no es realmente cierto porque mientras que la localización es adaptar tu producto a una región específica, la internacionalización es el proceso de llegar allí si miramos la definición de internacionalización es diseño y desarrollo de un producto, aplicación o contenido de un documento que permite una fácil localización para un público objetivo nuevamente, este público puede variar en cultura, región e idioma también, ¿verdad? Para resumir esto, la internacionalización es el proceso de uh internacionalización es el proceso de implementar o preparar tus aplicaciones para la localización. ¿Tiene sentido, y aclara la diferencia entre la localización y la internacionalización? Veo un pulgar hacia arriba. Dos pulgares hacia arriba. Vale, siento que puede haber una pregunta aquí. No, vale. Muy bien, eso es perfecto. Voy a esperar un minuto más porque Fez también se está uniendo. Solo quiero asegurarme de que antes de pasar a la siguiente parte, pueda escuchar lo que hemos cubierto y luego podemos seguir rápidamente.

¿Puedo hacer una pregunta mientras tanto? Claro. Desde el punto de vista de la implementación, por supuesto, la definición es diferente para la localización y la internacionalización. Desde el punto de vista de la implementación del proyecto, la forma en que funciona es que a menudo las personas usan estas palabras indistintamente lo cual no es cierto siempre debes si has investigado sobre la localización antes, es posible que hayas encontrado bibliotecas como i18n pero si lo piensas bien, no se trata de localización se trata de internacionalización, ¿verdad? porque ese es el proceso de implementar la localización Entonces, cuando estás trabajando en un proyecto, habilitas que se pueda localizar, aunque es posible que no necesites eso en el futuro. Entonces, básicamente, estás adoptando los principios que están definidos por la intención, uh, por, para la internacionalización porque eso facilita la implementación de la localización. Ahora, uh, la forma en que me gusta pensar en esto es, y creo que tendrás una mejor idea sobre esto cuando comencemos a trabajar en la aplicación es, si vuelvo al ejemplo aquí. Ahora, sé que una cierta parte de mi texto va a cambiar en la aplicación, ¿verdad? Ya he comenzado a trabajar en la implementación de esa parte y sé que, por ejemplo, el mensaje de bienvenida aquí es diferente en alemán. La forma en que creé esto es teniendo en cuenta que esta palabra en particular va a cambiar, pero todo este mensaje en particular va a cambiar. Porque ya sabía qué cosas quería hacer. ¿Eso te da una idea? ¿Eso responde tu pregunta? Sí. Sí, lo hace. Entonces, ¿podemos decir que la internacionalización es un subconjunto de la localización? No lo diría así porque para mí, ambos son dos procesos diferentes. porque la forma en que lo pienso es que la internacionalización te permite preparar tu producto para la localización, ¿verdad? Ahora, es posible que desees luego localizar ese producto solo para una región, pero aún así debes pasar por el proceso de internacionalización y asegurarte de que tu producto esté listo para hacer eso. Más adelante, puedes decidir que quieres ampliarlo a una nueva región, ¿verdad? porque ya has implementado la internacionalización, todo lo que tienes que hacer es preparar ese contenido localizado, hacer que ese contenido esté disponible en ese idioma localizado y luego simplemente publicarlo. Para mí, son dos pasos diferentes, dos procesos diferentes, y no es un subconjunto de otro. Vale, tiene sentido. Gracias. Muy bien. Faz, creo que acabas de unirte. Así que hablamos de la localización. Hablamos de la internacionalización. Y pasamos a la siguiente parte del masterclass. Y veo que ya estás en los servidores de Discord. Ya tienes el repositorio de GitHub, lo cual es fantástico. Entonces, avanzando, vamos a hablar un poco sobre Remix porque ese es el framework que vamos a usar hoy. ahora, ¿cuántos de ustedes han escrito código con Remix antes o han escuchado sobre Remix antes ¿puedo ver un pulgar hacia arriba o nuevamente siéntanse libres de activar el sonido ustedes mismos solo escriban en el chat, está bien Muy bien así que puedo decir que la mayoría de ustedes han escuchado sobre Remix pero uh una persona no lo ha hecho, eso está completamente bien, vamos a verlo uh cuando comencé a explorar Remix cuando comencé a jugar con Remix siempre pensé que era uh otro meta framework que se construye sobre react pero al leer la documentación al trabajar con Remix aprendí que no es solo otro framework un framework de react más, es más que eso porque cuando hablan de Remix como un compilador, en realidad compila tu código y te da código del lado del cliente y del lado del servidor. También genera un archivo de manifestación de activos, que te da un gráfico de dependencias y permite que el código se mapee a la pieza de código específica correctamente. Entonces, básicamente, simplemente compila tu código y te da código tanto del lado del servidor como del lado del cliente. Y me encanta esta parte de Remix que es un controlador HTTP del lado del servidor, lo que significa que simplemente puedes usar Remix como un servidor. Puedes crear APIs utilizando Remix. No necesitas usar ningún otro framework para eso. Porque hace uso de la web, la API de búsqueda web en el fondo, lo que facilita su implementación en cualquier tipo de plataforma realmente, no importa si estás usando Node.js o Deno. En el fondo, te permite hacer eso. Y la forma en que Remix te permite hacer eso es que tiene envoltorios integrados alrededor de los frameworks existentes como Express. Ya tiene esos envoltorios construidos sobre esos frameworks así que ahora no tienes que preocuparte por aprender Express o aprender cómo funcionan los trabajadores de Cloudflare o cómo gestionar servidores en Vielhel o Netlify y cosas así. Y también es un framework del lado del servidor, lo que significa que puedes construir toda tu API solo usando Remix. Y no necesitas proporcionar ninguna salida del cliente o no necesitas tener un front-end para eso. Remix puede manejar todo el proceso. Entonces, la forma en que me gusta pensar en Remix aquí es la vista y el controlador en el framework MVC.

3. Introducción a Remix y Configuración del Proyecto

Short description:

Remix te permite usar el modelo tanto como vista como controlador. Proporciona tres funciones principales: acción, cargador y predeterminado. La función de acción maneja las solicitudes POST y los envíos de formularios, el cargador maneja las solicitudes GET y la obtención de datos, y el predeterminado renderiza el componente. Remix es un framework de navegador que maneja la creación y la hidratación de la interfaz de usuario. Configurar un proyecto de Remix implica usar el comando npx create-remix latest y seleccionar JavaScript como servidor. Tailwind se puede agregar configurando la bandera tailwind en true en el archivo remix.config.js y ejecutando npm install tailwind seguido de npx tailwind init.

Ya no tienes que preocuparte por el modelo. Remix te brinda la posibilidad de usarlo tanto como vista como controlador. Así que cada ruta que vayas a usar en Remix puede tener su propia vista y también puede tener su propio controlador. Esto puede parecer mucho mientras lo estamos hablando, pero una vez que comencemos a trabajar con Remix, lo entenderás mejor.

Pero solo para darte una idea rápida, básicamente hay tres funciones diferentes que exportas en Remix. La primera es una función de acción, que manejará cualquier tipo de solicitud POST o envío de formularios que tengas en tu aplicación. Luego está la función de cargador, que manejará cualquier tipo de solicitud GET o cualquier tipo de obtención de datos que desees hacer. Ahora, usando solo estas dos funciones, puedes tener una API. Pero si quieres dar una salida al usuario, si quieres tener un sitio web para el usuario, todo lo que tienes que hacer es exportar una función predeterminada que contenga el componente que deseas renderizar. Luego, Remix como un framework de navegador. Con el framework de navegador, te permite crear una interfaz de usuario para el usuario, también maneja la hidratación, lo que lo hace realmente fácil. Realmente, Remix tiene muchos conceptos como la interfaz de usuario optimista, la hidratación, que maneja por sí mismo, pero no voy a profundizar en todos esos temas. Porque la mayor parte del tiempo, Remix lo maneja por sí mismo, así que no tienes que preocuparte realmente por eso. Siempre puedes consultar la documentación de Remix y aprender más al respecto.

Bien. Ahora que hemos hablado de Remix, vamos a comenzar con la configuración de un proyecto de Remix. Ahora es el momento en el que voy a dejar de hablar mucho y vamos a sumergirnos en la parte principal de la sesión. Lo primero que quieres hacer es configurar un nuevo proyecto de Remix y para hacerlo, vamos a usar el comando npx create-remix latest. Te dará una buena guía de cómo crear un remix. Tengo un video aquí. Como puedes ver, solo estoy ejecutando el comando npx create remix latest. Y me pedirá el nombre del proyecto. Y me dará un par de opciones aquí. Puedes seleccionar si ya sabes qué servidor quieres usar. Y para este masterclass, vamos a usar JavaScript, no te preocupes por TypeScript. Asegúrate de seleccionar JavaScript, porque no he realizado ninguna integración de tipos en eso. Tiene sentido. Entonces, cuando ejecutes la función, perdón, cuando ejecutes el comando npx create remix latest, asegúrate de seleccionar JavaScript y TypeScript, si quieres, puedes seleccionar plantillas preconfiguradas que tienen, pero eso no es necesario para esta sesión.

Muy bien. Una vez que hayas configurado el proyecto de Remix, dame un pulgar hacia arriba y luego pasaremos a la siguiente parte. Solo asegúrate de estar en las dependencias. Cuando te pida que ejecutes npm install, di que sí y deja que instale las dependencias. Ya he hecho esta parte aquí. Ya tengo mi aplicación de remix configurada aquí, también he agregado Tailwind. Me gusta más Tailwind porque no sé mucho de CSS. No me gusta escribir mucho CSS, y Tailwind te ayuda con eso. También he instalado Tailwind. Si quieres saber cómo instalar Tailwind en tu aplicación de Remix, puedo mostrarte rápidamente cómo hacerlo. Y veo que Mail tiene una aplicación de Remix en funcionamiento. Eso es fantástico. Voy a esperar a que los demás configuren el proyecto de Remix. Muy bien. Mientras los demás configuran el proyecto de Remix, voy a mostrarte rápidamente cómo puedes agregar Tailwind al proyecto. Lo primero que quieres hacer es, en tu archivo remix.config.js, establecer la bandera tailwind en true. Luego, quieres instalar Tailwind, así que ejecuta el comando npm install tailwind, una vez que esté instalado, debes ejecutar npx tailwind init. Eso básicamente creará este archivo de configuración de Tailwind. Ahora, en ese archivo, quieres agregar el contenido que será esto. Básicamente le estás diciendo a Tailwind que busque el componente donde se encuentra el código.

4. Estructura del Proyecto Remix y Configuración de Tailwind

Short description:

En el directorio de la aplicación, crea un archivo tailwind.css e importa los componentes y utilidades basados en Tailwind. Importa Tailwind en el archivo raíz y exporta una función de enlace para agregar Tailwind a tu aplicación de Remix. La estructura del proyecto incluye el directorio de la aplicación con las rutas, los archivos entry.client.js y entry.server, y el archivo raíz para configurar la estructura general de tu página. Utiliza la función de enlace para agregar hojas de estilo y otros enlaces de búsqueda. La función de meta establece información meta como el título y los detalles de SEO. El componente outlet contiene los elementos hijos de una ruta. La estructura de un proyecto de Remix incluye el archivo tailwind.css, el directorio build, los módulos de nodo, la carpeta pública y los archivos de configuración.

Una vez hecho esto, vamos a entrar en el directorio de la aplicación. Vamos a crear un archivo tailwind.css e importaremos los componentes y utilidades basados en Tailwind. Luego, en el archivo raíz, vamos a importar Tailwind. A continuación, vamos a exportar una función de enlace en la que vamos a agregar la hoja de estilos aquí. Así es como puedes agregar Tailwind a tu aplicación de Remix.

Ahora, avanzando, voy a repasar rápidamente la estructura del proyecto aquí. Como puedes ver, hay un directorio de la aplicación. En ese directorio de la aplicación, hay algunas cosas. La primera es la ruta. Aquí es donde puedes definir todas tus rutas. Es similar a la forma en que trabajamos con Next.js. En Next.js, tenemos un directorio llamado pages, mientras que en Remix tenemos un directorio llamado routes. Ahora, en esto puedes crear un nuevo archivo. Si lo llamo, digamos, ejemplo.jsx. La forma en que esto funcionará es que tendrá un dominio slash ejemplo.jsx y luego puede exportar un renderizado de lo que estoy haciendo aquí. Digamos, exportar función predeterminada. Y para ejecutar la aplicación, déjame cerrar este servidor. Puedes hacer NPM run allí. Iniciaremos el servidor de Remix. Vuelve aquí, vemos que ahora tenemos la página predeterminada, y si vamos a ejemplo, es solo un pequeño ejemplo. Así que tenemos una ruta aquí, la creada.

Ahora, con Remix, puedes hacer fácilmente anidamiento de rutas. Puedes hacer anidamiento de diseños y todas estas cosas también. Pero hay entry.client.js. Como puedes ver, podemos eliminar este archivo. Remix se encarga de esto. Básicamente hidrata todo el contenido en el lado del cliente aquí. Luego está el archivo entry.server nuevamente. Esto es generado por Remix, y maneja la parte en el lado del servidor. Luego está el archivo raíz. Diría que este es un archivo importante porque con esto, puedes configurar la estructura general de tu página. En la ruta aquí, puedes ver que importamos Tailwind y lo exportamos como un enlace. Si vuelvo a esta página, abro los registros. Si ves aquí, exportamos los enlaces y ahora obtenemos los enlaces aquí. Si quieres agregar hojas de estilo o si quieres agregar otros enlaces de búsqueda. Así es como lo haces y en remix básicamente puedes agregar la mayoría de las cosas aquí si quieres. Similar a esto, hay otra función llamada función de meta que te permite establecer información meta. Básicamente, el título de tu página. La información de SEO, que son las imágenes de gráficos abiertos, descripción y todas esas cosas en esa función de meta. Y esto viene nuevamente de Remix. Tenemos el cuerpo, este es el outlet. Ahora, el outlet contiene todos los elementos hijos que tiene esta ruta en particular. Debido a que este es un root, tiene todas las demás rutas que están presentes aquí, se convierten en hijos por defecto. Pero si estás creando un diseño que puede tener otro hijo allí, también puedes usar el componente outlet allí. ¿Correcto? Luego está el archivo tailwind.css. Hay un directorio de construcción, esto se generará cada vez que inicies el servidor de remake. los módulos de nodo, la carpeta pública, luego hay algunos archivos de configuración aquí, y esa es básicamente la estructura de un proyecto de Remix. Bien. No estoy seguro si me olvidé de alguien. Sí, no estoy seguro si todos han completado la configuración, pero voy a seguir adelante porque queremos asegurarnos de completar o cubrir la mayoría de las cosas que queremos hacer en este masterclass.

5. Creación de Componentes de Navegación y Tarjeta

Short description:

Actualizaremos el título de la página, crearemos un componente de navegación y un componente de tarjeta para mostrar las recetas. El repositorio de GitHub contiene todos los pasos que hemos cubierto. Necesitamos crear un componente F en el directorio F y agregar la barra de navegación. La barra de navegación tiene un selector de idioma para inglés y alemán. El componente de navegación se importa y se agrega al cuerpo. El siguiente paso es crear un componente de tarjeta que reciba props para el título, la imagen, el ID y la descripción.

Ahora que tenemos la aplicación remix funcionando, lo siguiente que queremos hacer es empezar a trabajar con ella. Lo primero que haremos es actualizar el título de la página. Crearemos un componente de navegación. También crearemos un componente de tarjeta y mostraremos las recetas utilizando el componente de tarjeta. Todo esto está disponible en el repositorio de GitHub. Voy a compartir el enlace aquí también. En el repositorio de GitHub, si vas a las ramas y seleccionas... Esto es extraño. De todos modos, si vas a las ramas y seleccionas el paso uno, verás todos los pasos que hemos cubierto y los pasos que debemos seguir. Necesitamos crear un componente F. Para eso, lo que voy a hacer es no borrar esto, cerrar esto en el propio directorio F. Crearé un nuevo archivo que estará dentro de la carpeta de componentes. Y luego aquí voy a poner la barra de navegación, de nuevo, no la voy a codificar desde cero. Pero esta es la barra de navegación simple que tengo aquí. Remix también tiene un componente de enlace, así que voy a usar eso para que cada vez que el usuario haga clic en Remix recipes en el título, llegue a la página de inicio de nuestro sitio web. Aquí, este div, lo dejaré vacío por ahora, porque aquí quiero agregar un selector de idioma para que si el usuario hace clic en EN, el contenido se muestre en inglés. Si el usuario selecciona DE, el contenido se muestra en alemán. Tengo el componente de navegación en mi ruta. Lo voy a importar. Y lo voy a agregar dentro del cuerpo para que sea accesible para todas mis rutas secundarias. Si vengo aquí, podemos ver que tenemos Aquí, si hago clic en él, me lleva a la página de inicio. El siguiente paso es crear un componente de tarjeta y ahora en este componente de tarjeta, necesitamos pasar props. Estas props serían el título, la imagen y el ID, así como una descripción para esa receta en particular.

6. Creación de Tarjetas de Recetas y Mejora de Apariencia

Short description:

Comencemos creando un componente simple donde pasamos datos a otro componente. Incluiremos una imagen con una fuente y texto alternativo, un título y una descripción. En la ruta de índice, tendremos una etiqueta principal con dos divs. Uno mostrará el título y el otro contendrá el componente de tarjeta. Usaremos datos ficticios para renderizar el componente de tarjeta, mapeando un array de recetas. Por último, actualizaremos el código de la tarjeta, el índice y el root para mejorar la apariencia.

De acuerdo. Voy a intentar crear esto desde cero. Así que empecemos con la exportación. Ahora, como puedes ver, estos son simplemente componentes que no estoy utilizando realmente o no estoy utilizando estos archivos en particular para llamar o obtener data de donde estoy simplemente pasando data a este componente en particular. Este puede ser un componente simple donde no necesito tener ningún tipo de, cómo se dice, ningún tipo de cargador o función de acción aquí. Quiero enlazar esto con el slug que estaré pasando, así que voy a tener que pasar el slug aquí

Lo siguiente que quiero hacer es tener un div dentro de ese div habrá otro div. Este div contendrá la imagen que tendrá una fuente. Voy a pasar una imagen de portada que tendrá la fuente y también un texto alternativo. Llámalo descripción. A continuación, quiero tener el título. Así que vamos a tener el título, que básicamente será el nombre de esa receta, y luego queremos la descripción de la receta. No estoy haciendo ningún estilo aquí por ahora. Solo voy a dejar esto como está. Y vamos a pasar la imagen de portada, que básicamente sería un objeto.

Ahora, tengo la tarjeta, voy a ir a mi ruta de índice. Y no estoy interesado en ninguno de estos. Los voy a eliminar. Voy a tener una etiqueta principal. En esa etiqueta principal, quiero tener tal vez dos divs. Este va a ser... Bienvenido a Remix. Recetas, ¿verdad? Y aquí, como mencioné antes, puedes cambiar el título. Ahora mismo, dice nueva aplicación Remix. Que es el título aquí dice nueva aplicación Remix. Así que puedo seguir adelante y cambiar esto y llamarlo. Recetas Remix. Si guardo esto aquí, podemos ver que el título aquí también cambia. Así es como puedes trabajar con las metatags y Remix. Y luego otro div y aquí tendremos la tarjeta.

Pero para la tarjeta necesitamos tener algunos datos ficticios o alguna información ficticia. De nuevo, he preparado esta información de antemano. Así que voy a usar eso. Y esta información es muy similar a la información que está disponible que vamos a usar y vamos a obtener de Contentful, así que no tienes que preocuparte por esos datos estructura u otras cosas aquí. ¿De acuerdo? Ahora, tenemos un array que contiene toda esta información. Así que lo que vamos a hacer es hacer un map de la receta. Y aquí, vamos a pasar una sola receta. y luego la vamos a renderizar. Hagamos el título. Esto va a ser cp.title ¿Qué más necesitamos? Necesitamos una descripción. Así que hagamos cp.description Teníamos un slug, para el slug aquí voy a usar el ID. Vamos a hacer recipe.ht, y luego la imagen la estamos llamando imagen de portada, y en nuestros datos ficticios, también se llama imagen de portada. Vamos a pasar simplemente ese objeto completo. Y por último, una cosa importante, porque estamos. Usando la función map para crear componentes, necesitamos agregar una clave. Bueno, identificar estos componentes de forma única. La. De acuerdo. Esto debería funcionar con suerte y deberíamos obtener algunas cosas aquí. Puedes ver que tenemos. La página web, que muestra algunos datos ficticios. que no se ve muy bien, pero tenemos algunos datos que se renderizan en nuestro sitio web. Así que lo que voy a hacer es actualizar el código de la tarjeta y el índice y probablemente el root para que se vea bonito.

7. Implementación y Renderizado de Contenido

Short description:

Puedes comenzar a implementar los pasos y renderizar contenido en tu página web. Si tienes alguna pregunta, no dudes en preguntar. El código está disponible en el repositorio de GitHub. Instala y configura Tailwind. Avísame si necesitas ayuda.

Mientras tanto, puedes seguir adelante y comenzar e implementar esto, terminar esta implementación. Nuevamente, el estilo es algo que está completamente bien si no se ve muy bonito. Eso no es para lo que estamos aquí. Estamos aquí para aprender sobre la internacionalización y localización. Ese debería ser nuestro enfoque principal. Una vez que hayas completado estos pasos y puedas renderizar contenido en tu página web, solo dame un pulgar arriba o avísame en el chat para que podamos continuar con los siguientes pasos. También, mientras tanto, si alguno de ustedes tiene alguna pregunta, no dudes en desactivar el silencio o preguntarme en el chat o también puedes simplemente publicarlas en el chat. ¡Vamos a hacer esto! Ahora nuevamente, aún no hemos comenzado con la parte de internacionalización. Todo lo que estamos haciendo es tratar de familiarizarnos un poco con Remix y comprender cómo funciona. Tú Gracias. tú . Veo alguna pregunta que aparece en el chat. Y no creo haber visto ningún pulgar hacia arriba. Voy a asumir que ustedes están trabajando en esta parte e intentando implementarla. Nuevamente, puedes encontrar el código. Puedes encontrar el código en el repositorio de GitHub. Y si quieres mirar esto en tu tiempo, puedes obtener el código allí. Estoy usando Tailwind, así que tendrías que instalar Tailwind y configurarlo. Pero aparte de eso, debería ser bastante sencillo de usar. Si tienes alguna pregunta, avísame.

8. Diferencias entre Remix y Next.js

Short description:

Remix es diferente de Next.js. Proporciona una forma fácil de trabajar con el almacenamiento en caché y gestionar cookies. Remix maneja el envío de formularios y la representación de resultados basados en el éxito o el fracaso. Realiza un trabajo pesado, eliminando la necesidad de preocuparse por muchas cosas. Next.js se está transformando en un marco de pila completa. Se ha compartido un enlace con todos los conceptos sobre Remix en el chat.

Lo que voy a hacer es hacer trampa un poco aquí, y voy a copiar los estilos, básicamente el código, del repositorio de GitHub para que se vea un poco más bonito que esto. tú Esto se ve mucho mejor.

Parece que Bill ha terminado, sí, adelante. No tengo ningún conocimiento previo de Remix, así que tal vez ni siquiera sea una pregunta válida pero me preguntaba cómo es diferente de Next.js, como eso es una buena sí, esa es una buena pregunta, así que si piensas en Next.js antes de Next 13, debería decir que era principalmente un generador de sitios estáticos siempre te daría un sitio estático, pero después de la suspensión de React, se está convirtiendo en más un marco de pila completa. Pero Remix tiene un enfoque diferente a Next.js. Entonces, si... Ahora mismo, no hemos implementado las funciones de carga o las funciones de acción, no implementaremos las funciones de acción para esto. Pero cuando implementemos la función de carga, verás cómo Remix funciona con la obtención de datos y cómo Remix obtiene los datos. Otra cosa que Remix también proporciona, hay muchas cosas que Remix proporciona. Una de esas cosas es una forma fácil de trabajar con el almacenamiento en caché. También tiene funciones o métodos para gestionar fácilmente las cookies. Entonces, de alguna manera, Remix no genera ni te da un sitio estático en sí. Lo que hace es darte un sitio web que no siempre es un sitio estático. Obviamente puedes generar un sitio estático a partir de Remix, pero así no es como está construido Remix. Así que esa es otra diferencia. Y con Remix, realmente no necesitas el suspense de React porque Remix maneja todo por sí mismo. Así que digamos que tienes, estás enviando un formulario, ¿verdad? En el estado actual de la generación de sitios estáticos o los marcos que tenemos, lo que sucede es que cuando se envía el formulario, puedes mostrar un cargador al usuario y luego representar la salida que recibes en función de un mensaje de éxito o fracaso, ¿verdad? Pero Remix maneja eso por sí mismo, solo tienes un envío de formulario. Si tiene éxito, Remix con un bueno, por lo que ese mensaje de éxito o la lógica allí, si no tiene éxito, Remix también representará la salida de esa manera. Así que Remix hace mucho trabajo pesado por ti. No tienes que preocuparte por muchas cosas. Estoy tratando de encontrar un enlace que contenga todos los conceptos sobre Remix, porque eso te ayudará a entender mucho mejor cómo difiere de Next.js. Y también con Next, siento que sin las funciones sin servidor, realmente no puedes crear una API porque nuevamente, era nuevamente un marco primero de front-end. Ahora nuevamente, se está transformando en más de un marco de pila completa, que es algo diferente. Pero eso es lo que era Next, ¿verdad? Así es como está cambiando con el tiempo. He compartido un enlace en el chat.

De acuerdo, gracias. Pongs, tal vez tengas que seleccionar la regla particular. Si puedes ver el canal de elegir tu regla, te sugiero que hagas clic en ese React emoji de la Cumbre. Sí, tienes que ir al canal de recoger tu antiguo antes y seleccionar. Sí, gracias. Gracias, Neil, por eso. Entonces sí, si haces eso, probablemente obtendrás la opción. Espera, ¿qué? Tienes que esperar 10 minutos. De acuerdo. Permíteme compartir el enlace en el chat nuevamente. Así que ahí tienes que no tienes que esperar 10 minutos. ¿De acuerdo? ¿Lo tienes? Perfecto. Es perfecto. Voy a mostrarlo aquí de nuevo, por si acaso. Muy bien, una vez que hayamos completado el primer paso, que fue actualizar el título de la página, crear un nombre de componente, crear un componente de tarjeta, y luego representar algunas recetas simuladas usando un componente de tarjeta. Vamos a esperar dos minutos, y luego pasaremos al siguiente paso. Mientras tanto, si alguien quiere desactivar el silencio, entonces, simplemente dé una breve introducción sobre sí mismo. Eso sería maravilloso. Me gustaría saber desde dónde te unes. ¿En qué estás trabajando actualmente? Y sí, unirse desde Francia, eso es fantástico. ¿Dónde en Francia? Sí, ¿desde dónde en Francia? Estoy bastante seguro de que es hermoso porque he oído que las ciudades de Francia son realmente muy bonitas y realmente hermosas, así que estoy bastante seguro de que es hermoso allí también para ella, hace bastante calor en Francia en este momento estaba hablando con alguien que vive en París si no me equivoco y mencionaron que Francia se pone muy muy muy caliente durante el verano No, no, no hace tanto calor en realidad. Entonces, ¿cómo está la temperatura hoy? Parece que está a 15 grados Celsius.

9. Configuración de Internacionalización

Short description:

Vamos a comenzar con la internacionalización para esta aplicación. Agregaremos paquetes y haremos algunas configuraciones. Luego, crearemos el archivo i18n.js para la configuración básica del proyecto y el archivo i18n.server.js para la internacionalización en el lado del servidor. Finalmente, crearemos las localizaciones en la carpeta pública.

Esa es una buena temperatura, sí. Pero, ¿tienen mucho sol? Está un poco nublado. De acuerdo, bien, avancemos a la siguiente parte, que es comenzar con la internacionalización para esta aplicación en particular en la que estamos trabajando. Ya existen bibliotecas que facilitan la implementación de la internacionalización, no digo que sea muy fácil, pero un poco más fácil porque hacen mucho trabajo por ti, como ayudarte a detectar el idioma seleccionado por el usuario y mostrarle el contenido en ese idioma. Cosas así te permiten hacer. Así que para esto, vamos a comenzar agregando estos paquetes y luego haremos algunas configuraciones. Crearemos algunos archivos y luego crearemos algunos archivos en la carpeta pública que básicamente contendrán las cadenas que queremos localizar. Para esto, voy a cerrar mi servidor. Ya tengo todos estos paquetes conmigo aquí. Esto es nuevamente el paso dos en el repositorio de GitHub. Así que si vas al repositorio de GitHub, permíteme compartir rápidamente el enlace con todos ustedes, y si seleccionas el Paso 2, ahí es donde puedes encontrar todo este código o la información para este paso en particular. Ahora que tenemos estos paquetes instalados, espero haberlo hecho en el repositorio correcto. El siguiente paso es crear un archivo de configuración.

10. Configuración de Internacionalización

Short description:

En el directorio de la aplicación, crea un nuevo archivo llamado i18n.next.options.js. Establece el idioma compatible como inglés de EE. UU. y alemán. Especifica el idioma de respaldo como inglés de EE. UU. Crea un nuevo archivo llamado i18n.server.js para manejar la internacionalización en el lado del servidor. Configura el backend y crea carpetas de localización para cada idioma compatible. Agrega archivos de traducción para los títulos en inglés y alemán. Actualiza los archivos entry.client.gxs, entry.server.gsx y root.gsx agregando el título y el título de la cabeza.

Entonces, una vez más... De acuerdo, no te preocupes. Nuevamente, el código ya está contigo, por lo que, cada vez que regreses, simplemente puedes obtener el código de este repositorio y continuar con los siguientes pasos.

Muy bien, ahora estamos en el directorio de la aplicación y aquí necesitamos crear un nuevo archivo. Lo llamaremos i18n, que es una abreviatura de internacionalización. I 18 next options.js. Sí. Ahora este archivo contiene la configuración básica que queremos tener para nuestro proyecto, como el idioma compatible. Para este caso, voy a elegir inglés de EE. UU. y luego alemán. También puedes tener, es posible que hayas visto el código de localización como simplemente EN, DE para alemán, FR para francés, pero cuando piensas en la localización y en los idiomas, ¿verdad?, el mismo idioma puede hablarse con un dialecto diferente en diferentes partes del mundo, por ejemplo, si hablamos de inglés, se habla de manera diferente en EE. UU. y en el Reino Unido. Lo mismo ocurre con el alemán, hay diferentes dialectos del alemán, el alemán austriaco es un poco diferente, el alemán suizo es un poco diferente, y luego el alemán de Alemania también es diferente de esos dos, por lo que si quieres ser más localizado, puedes especificar los locales de esta manera o si quieres tener un enfoque más general, puedes usar simplemente ENDE FR o sí, este tipo de notaciones también.

Ahora bien, ¿qué sucede si tu aplicación o el usuario ha seleccionado un idioma que tu aplicación no admite? Para eso, tenemos un idioma de respaldo. Y en mi caso, será inglés de EE. UU. Ahora puedes tener un idioma de respaldo diferente según tu caso de uso. Pero para este taller, vamos a elegir inglés de EE. UU. Lo siguiente es el espacio de nombres predeterminado. Básicamente, este es el nombre del archivo que vamos a crear en esas carpetas locales. Idioma compatible, idioma de respaldo, espacio de nombres predeterminado. Ahora, una cosa aquí, como estamos usando Remix, No vamos a usar suspense. Así que vamos a decir que useSuspense es falso. Y esta bandera en particular es opcional. Realmente no tienes que configurar esto. Pero si quieres tener, si quieres registrar información en la consola, cuando estás en desarrollo, siempre puedes configurar debug en verdadero. Entonces, si no está en producción, vamos a decir algo como, Oye, dame toda la información y debe tener la bandera debug habilitada. Este es el archivo de opciones de i18 next. Nuevamente, aquí solo estamos configurando las configuraciones básicas para nuestro proyecto. Lo siguiente que queremos hacer es crear un nuevo archivo y vamos a llamarlo i18n.server.js y este archivo básicamente manejará la parte i18 en el servidor o la parte de internacionalización en el lado del servidor. Esto es vmix i18 next. También queremos las opciones, por lo que vamos a importar i18 next options vamos a importar backend de i18 fs backend y luego resolver desde node y vamos a exportar una nueva instancia de remix iot next y vamos a pasar algunos valores de configuración aquí el primero es la detección de cómo queremos que se realice la detección o qué otros idiomas compatibles porque ya lo hemos configurado en nuestras opciones de iot next, simplemente lo pasaremos por aquí aquí está el idioma compatible, lo siguiente es el idioma de respaldo una vez hecho esto vamos a tener i18 next y aquí vamos a configurar el backend así que digamos load path y hagamos path, ahora lo ponemos en recurso y esto vendrá de Public Locales. Ahora, para cada idioma compatible vamos a crear una nueva carpeta y dentro de esa carpeta vamos a tener. Un archivo que contendrá la traducción para nosotros. ID siguiente está configurado y luego vamos a decir que el backend será backend. Esto está hecho. Vamos a crear las carpetas locales en la carpeta pública. Carpeta. Locales. Locales y ahora aquí, como he configurado enus, voy a nombrar esta carpeta ahora enus. Si lo hubieras configurado simplemente como en, entonces tendrías que nombrarlo simplemente en porque si ves aquí, la forma en que se hace referencia es viene del canal de idioma, ¿verdad? y también vamos a crear una nueva carpeta para DE y ambas contendrán un archivo JSON que contendrá nuestras cadenas así que voy a llamar a esto título y como es en inglés, vamos a decir bienvenido a Make it recipes y voy a hacer lo mismo para el local DE pero voy a cambiar el contenido aquí. No estoy cien por ciento seguro de si así se dice o se escribe en alemán. Todavía estoy aprendiendo alemán, pero supongo que así es como se hace. Entonces, bienvenido a Remix Recipes será el título en alemán. Y Welcome to Remix Recipes será el título en inglés. ¿De acuerdo? Y otra cosa que podemos hacer es, digamos, título de la cabeza o puedes llamarlo título meta si quieres. En inglés, quiero llamarlo receta remezclada. Realmente no sé cómo se llama eso en alemán. Así que voy a... Solo para asegurarme de que hemos actualizado esto también. Lo voy a llamar, de-remix. Voy a volver a las diapositivas y ver, estos son los pasos que he completado. Ahora, nuevamente, voy a hacer una breve pausa aquí solo para asegurarme de que ustedes hayan seguido lo que hemos completado hasta ahora, y si tienen alguna pregunta, y luego continuaré con los siguientes pasos. Gracias. Me da curiosidad, ¿alguno de ustedes también habla alemán? o ¿algún otro idioma aparte de su lengua materna? Pero hombre, supongo que como vives en Francia, hablas francés y al hablar contigo, estabas hablando en inglés, así que también hablas inglés, por lo que ese es el otro idioma que hablas aparte de tu lengua materna, ¿verdad? Bueno, está bien. ¿Cuál de estos es tu lengua materna, es francés o inglés? Bien, entonces hablas inglés y ese es tu idioma no nativo, ¿de acuerdo? Muy bien, vamos a ver los siguientes pasos ahora, así que el siguiente paso, tenemos que actualizar el archivo entry.client.gxs, el archivo entry.server.gsx, el archivo root.gsx, ¿de acuerdo? Tenemos que agregar el título y el título de la cabeza.

11. Configuración de los archivos Entry, Server y Root

Short description:

Hemos configurado el archivo entry.client.jsx, copiado el archivo del servidor desde GitHub y actualizado el archivo root. El archivo del servidor detecta el idioma del usuario y renderiza los datos. En el archivo root, utilizamos el gancho de cambio de idioma para detectar los cambios de idioma y cargar el contenido localizado. Aquí se utiliza la función de carga.

Ya hemos hecho eso. Y tenemos que ejecutar los valores desde la línea de comandos o archivos de partición. Muy bien, así que empecemos con el archivo entry.client.jsx. Y luego pasaremos al archivo server.jsx y luego el archivo root, ¿de acuerdo? Cerraremos todos estos archivos por ahora. componente, no necesitas una ruta, tengo anti.client.server, simplemente borra todo aquí Voy a empezar desde cero. Porque queremos hacer la hidratación aquí, vamos a deshidratar el siguiente import remix browser y también el archivo i18n i18n de i18n next y luego importaremos un proveedor, el proveedor de i18n y en realidad necesitamos una inicialización. Muy bien. Necesitamos algo para detectar el idioma, deberíamos importar el detector de idioma ¿Dónde está? No necesitas las opciones, necesito el detector de idioma eso es interesante, ¿por qué No me muestra el detector de idioma? Puede que me haya perdido algo. No sé, vamos a ver. backend de R18 http y luego importamos get initial namespaces y R18 next Next. Pero lo primero que queremos el objeto React de i18n next. Así que básicamente primero vamos a comprobar si no lo hice. Next está inicializado o no. Vamos a hacer la inicialización y si no está inicializado. Vamos a hacerlo en i18n next. vamos a usar no usar cuando usemos use cuando usemos función seles vamos a hacer el detector de idioma vamos a hacer el detector de idioma vamos a usar el import backhand y en el en el vamos a configurar las opciones vamos a extender estas opciones que vienen de las opciones de i18n next Esto va a ser local, idioma, espacio de nombres JSON. Obtener espacio de nombres inicial Esto nos dará el espacio de nombres que está configurado allí y la detección. Siempre es una buena práctica pasar el idioma con la etiqueta HTML. para ver que quieres hacer eso. Vamos a usar esto. Para la detección de idioma. Y no queremos cachear. No queremos capturar nada, así que es un array vacío. Una vez que se haya completado todo esto. Así que hidratación. Proveedor de i18n next y tomará i18n y leerá el siguiente componente. Y ese es el documento. Correcto. Entonces, hemos configurado el archivo entry.client.jsx. De nuevo, puedes encontrar todo ese código en ese repositorio de GitHub. El siguiente paso es el archivo del servidor. Ahora, para esto, simplemente voy a copiar esto desde GitHub, desde allí lo pego aquí y recorro el código. De nuevo, estamos importando todas las opciones o la configuración que ya tenemos e importando los paquetes de i18n next que hemos instalado. Estamos creando una nueva instancia. Ahora, esta es una función importante porque esta función básicamente detecta el idioma del usuario, y vamos a usar esto un par de veces en el código también. y luego estamos pasando el espacio de nombres y así es como lo inicializamos aquí lo estamos haciendo aquí estamos diciendo que use init react 18 init react i18n next objeto use el backend y luego estamos configurando alguna información aquí Y luego simplemente renderizamos esos datos aquí. Así es como lo estamos haciendo. Es algo estándar similar a cómo lo hicimos para el cliente, pero esto es ahora para el servidor. Hicimos este otro archivo que necesitamos actualizar fue el archivo root. Así que veamos qué tenemos que hacer en el archivo root aquí. Ahora en el archivo root es donde vamos a usar. Vamos a empezar a usar esas cosas que hemos configurado aquí. Lo primero que queremos importar será, luego vendrá de Remix, I18n, y de I18n server. a continuación, queremos hacer el cambio de idioma y luego el gancho de uso de traducción así que el gancho de cambio de idioma detectará que el usuario ha seleccionado el idioma diferente o el idioma ha cambiado y luego lo usará para pasar esa información y en función de eso cargará el contenido localizado.

12. Implementación de la Detección de Idioma y Título Dinámico

Short description:

Utilizamos la función de carga para obtener datos y procesarlos en el lado del servidor. La biblioteca maneja la detección del idioma. Devolvemos el objeto de creación que contiene el idioma. Extraemos el idioma utilizando el gancho useLoadedData. Configuramos el gancho useChangedLanguageHook para que sea dinámico. Solucionamos un error y nos aseguramos de que los datos sigan siendo accesibles. Queremos cambiar el título de la página de forma dinámica. Implementamos la función de carga para detectar el idioma y actualizar el título.

Ahora aquí, vamos a utilizar la función de carga solo una vez. Como mencioné, utilizamos la función de carga para obtener o recuperar cualquier tipo de data que tengamos o también para realizar cualquier tipo de procesamiento en el lado del servidor antes de renderizar la página. Exportamos la función async llamada loader y aquí voy a hacer locale i.getlocal y esto tomará la solicitud así que si ves, esta biblioteca maneja la parte de detección y va a detectar el idioma y luego lo usará así que ahora vamos a ir a la biblioteca de prueba lo siguiente aquí es oh no, vamos a devolver Sí, vamos a devolver la información. Así que voy a hacer remix JSON. Esto debería ser. Viene de remix. Uh, no. vamos a importarlo manualmente y ahora aquí vamos a devolver el objeto de creación que contiene el idioma. Así que vamos a consumir esto y aquí vamos a extraer el idioma utilizando el gancho use loadeddata y también vamos a hacer escribir en un que es igual a use consolation así Y por último, vamos a tener el gancho useChangedLanguageHook, que va a tomar un idioma. Así que he configurado los ganchos que queremos usar ahora. Esto ahora mismo es estático, pero puede cambiar, necesita ser dinámico, así que vamos a actualizar esto y vamos a usar esto que viene de itin. y resolver idioma. Y eso es todo. Eso es todo. Hmm, eso es todo lo que creo que teníamos que hacer aquí. Voy a guardar esto. Solo voy a ejecutar el servidor. Uh, no vamos a. No veremos ninguna diferencia aquí ahora mismo. Pero solo quiero asegurarme de que no hayamos roto nada ahora mismo. Bien, parece que hemos roto algo. F s l e? okay. uh oh aquí? reconstruyendo térmico?�ー Refresh local no está definido. Correcto, uh, esto debería ser local y no loader. Correcto. Correcto. Como puedes ver, todavía tengo data, todavía puedo ir a la ruta de ejemplo y ver alguna información aquí. Eso está bien. Pero queremos que el título de la página, y también el título aquí, cambien. Pero aún no hemos configurado eso, así que para eso tendremos que ir a nuestro archivo de índice y aquí es donde vamos a usar así que vamos a empezar a usar o implementar básicamente estas cosas justo antes de hacer eso, ¿hay alguna pregunta sobre lo que hemos cubierto hasta ahora porque hemos cubierto muchas cosas. Bien, veo un pulgar hacia arriba, así que voy a ampliar todo está más o menos claro. Así que, bien, vamos a meternos en ello. Entonces, de nuevo, lo que vamos a hacer es tener la función de carga aquí. que va a ser de nuevo una función async. Vamos a pasar el parámetro de solicitud y una cosa que queremos hacer es detectar el idioma. Así que hagamos, vamos a obtener la función y la llamaremos t equals a wait. Y tenemos que importar vmix. Y en Espero que lo pases bien Bhaansh y no dudes en contactarme en cualquier momento. Si tienes alguna pregunta, siempre puedes publicar las preguntas en el hilo allí. No dudes en contactarme en Twitter o donde quieras. Gracias por unirte. Get fixed tree y aquí vamos a pasar la solicitud y el espacio de nombres va a ser común. Y esto básicamente nos permite obtener la función que nos ayudará a obtener el valor de los archivos que acabamos de crear. Así que voy a hacer c a const lo voy a llamar título de la página para que no sea confuso y luego t y luego vamos a llamarlo título de la cabecera que es uniforme título de la cabecera y luego vamos a hacer solicitud y Jason. Todavía no estoy seguro de por qué. No muestra la importación correcta. No importa. Importemos Jason. De. Linux Node está escrito. Bien, así que ahora lo que queremos hacer es actualizar dinámicamente esto.

13. Actualización del Título Basado en el Idioma

Short description:

Vamos a pasar datos y actualizar el título basado en el idioma. Esto es útil para la localización y fines de SEO.

Vamos a pasar data. Y. Aquí vamos a decir que será data. Título correcto. Entonces, si guardo esto ahora y si vuelves a la página. realmente no cambió nada porque el título se configuró de esta manera pero si cambiamos el idioma, vamos a intentar esto, he intentado esto, mira esto, lo que sucede es que hacemos p-e-d-e ven aquí puedes ver que el título, no sé cómo hacer zoom en esto pero el título de la página básicamente cambia, bueno, puedo mostrártelo en la consola y también en el inspector, así que aquí ahora vemos que es de remixes si hd, así es como también puedes cambiar los valores que deseas actualizar en las etiquetas meta, así que esto funciona muy bien con esto funciona muy bien si quieres hacer SEO quieres localizar tu parte de SEO también.

14. Actualización del Título y Detección de Idioma

Short description:

Para actualizar el título en la página, utiliza el gancho de traducción y pasa la clave 'title'. Utiliza el indicador 'ready' para asegurarte de que el contenido se muestre cuando esté disponible. Si no está listo, muestra 'cargando'. Verifica si hay errores en el código y reinicia el servidor si es necesario. Asegúrate de que la etiqueta 'lang' y el atributo 'lang' estén presentes en la etiqueta HTML. Detecta el idioma en el archivo raíz utilizando el idioma resuelto. Si hay algún problema, consulta el código en el repositorio. El problema con el título que no cambia se debió a un error de codificación. Ahora funciona correctamente.

Muy bien. Así es como puedes hacer el título, pero también queremos que esto ocurra en nuestra página también, que básicamente es Actualización del título. Para obtener la función aquí. Tenemos uno listo y también vamos a tener I18n, luego vamos a usar el gancho de traducción. No. Aquí vamos a usar la función. Y pasaremos la clave, y la clave es 'title'. Voy a guardar eso. Ahora puedes usar el indicador 'ready' para asegurarte de que el contenido se muestre cuando esté disponible, así que puedes hacerlo si no está listo. Deberíamos devolver. Puede ser 'cargando'. Bien, si volvemos a la página, dirá 'cargando'. Pero debería dejar de cargar. Debería darnos información. No lo hace, eso es extraño. Pero parece que nos encontramos con algún tipo de error aquí, eso es interesante los locales públicos, ¿lo estamos llamando título? llamando a un título, ¿verdad? Una cosa que hacer es reiniciar el servidor. ¿Hice algo mal? Creo que eso está en la entrada que carga el cliente. Creo que ese es el incorrecto. Sí. Que es ES al final de los locales. Correcto. Gracias por eso. Y sí. Locales, pero está bien. Así que voy a reiniciar este servidor muy rápido. Todavía no carga eh pero el título se estaba cargando, así que las cosas funcionan correctamente implementadas, solo que algo no lo estoy haciendo bien primero, si cambio de idioma, el título cambia aquí. Sí, no hay etiqueta 'lang' ni atributo 'lang' en tu etiqueta html. Eso es correcto, ¿por qué no está ahí? Vamos a la raíz, tenemos y el idioma resuelto Creo que me he saltado un paso en algún lugar que está causando este problema correcto, voy a detectar el idioma aquí también ntremix.cat.ocl, pasamos el solicitud que no va a cambiar nada sí, todavía va a marcar una diferencia Muy bien, lo que voy a hacer es obtener el código del repositorio. No quiero perder mucho tiempo depurando. Así que vamos a hacerlo rápidamente. Está aquí. Y solo por si acaso, también voy a copiar el código de entrada. Sé de dónde viene esto. Es porque la propiedad de la tarjeta es imagen y no imagen de portada en el archivo index gs que la parte que hiciste no cubrió Muy bien, esto funciona. Pero ahora la parte interesante es tenemos el título en inglés. Esto es en inglés también. No hace eso. Va al idioma predeterminado. Hmm. Pero esto no cambia por alguna razón. ¡Ok, gracias! eso es lo que hablamos después de hacer el cambio que hizo Jason pasa de Jason. De acuerdo. Entonces, el problema fue que no lo codifiqué correctamente aquí. Por eso no haces codificación en vivo. Sí, no pongas este. Sí. Así que básicamente era con una 'e' minúscula, no una 'E' mayúscula. Y sí, ahora lo sabemos.

15. Actualización de la Navegación e Implementación de Cookies

Short description:

Así que esto está funcionando. Tenemos los datos que llegan y se renderizan según el idioma. Actualizamos el componente de navegación para agregar un selector de idioma. Implementamos cookies para manejar la detección de idioma. Ahora, tomemos un descanso y respondamos cualquier pregunta.

Muy bien. Así que esto está funcionando. No quiero esto. De acuerdo. Así que esto está funcionando. Tenemos los data que llegan. Se renderizan según el idioma. Las cosas lucen bien. Así que avancemos con el siguiente paso, que es actualizar la navegación. componente para agregar un idioma para Joe. Muy bien. Así que ya di una idea muy básica de cómo funciona el cambio de idioma. Así que si ves aquí, tenemos el parámetro ¿Puedo hacer zoom aquí? No creo, pero básicamente tengo un parámetro lng igual y luego el parámetro de idioma. Si lo elimino, vuelve a la palabra predeterminada. Pero si lo agrego de nuevo, tete, va a tomar ese contenido localizado y renderizarlo aquí así que en mi componente de navegación lo que tengo que hacer es básicamente decirle a mi componente o básicamente agregar ese parámetro al final de la URL, así que hagámoslo ya tenemos el componente de enlace renderizado aquí De acuerdo. Así que tendremos, puedes hacerlo de una mala manera, que es hacerlo de forma estática, por cada localización básicamente codificarías el componente de enlace o lo que puedes hacer es tener un array de idiomas. También pueden hacer esto, obtener esta información que viene de IIT Next y crear este objeto en particular. Pero por simplicidad, lo voy a mantener aquí. El valor que queremos pasar será enus. Haremos lo mismo. para alemán, será de te de. Y luego simplemente haremos un mapeo de los idiomas. Y Y aquí estaremos devolviendo el componente de enlace que ahora agregará el parámetro. Así que tengo que hacer la clave, que será language dot value y aquí vamos a tener language dot name. Y creo que no hay nada más que hacer, tal vez no. Voy a guardar esto, volver aquí. Ahora, si hago clic en en, obtenemos el contenido localizado en inglés, si hago clic en de, obtenemos el contenido localizado en alemán lo que voy a hacer es hacer que se vea un poco más bonito para esto voy a usar nuevamente el gancho de traducción nombre de clase FI18N.resolve language es igual al idioma actual luego queremos tener la clase underline clase aquí y luego queremos hacer un relleno a la derecha, tal vez de dos. Solo para que se vea bonito, ahora tenemos un selector de idioma que también tiene este indicador. Así que también implementamos el selector de idioma. Lo siguiente es implementar las cookies. Ahora, esta es una parte opcional. Pero muchas veces, la forma en que funciona esta biblioteca es que primero verifica la cookie. Si la cookie de I18n está presente o no, si no, verifica el parámetro de idioma, que acabamos de implementar. Si también verificaría esto, si has almacenado esta información en esta sesión. Verificará el encabezado de idioma aceptado y si no puede encontrar la información de ese idioma en ninguno de estos lugares, simplemente mostrará el contenido basado en el idioma de respaldo que hayas configurado. Así que simplemente queremos implementar la cookie porque no es mucho trabajo cuando se trata de remix cuando trabajas con cookies. Así que vamos a verlo ahora mismo para implementar la cookie. Todo lo que tenemos que hacer es crear un nuevo archivo. Lo llamaremos cookie.js. Y aquí vamos a usar la función create. una cookie pet y luego exportar const iodine y cookie. Sí. vamos a llamar a esta línea durante mucho tiempo. Era... ¿Dónde estaba el parámetro de detección? Sí, ¿aquí? Queremos decir, hey, también puedes detectar esto. Usando la cookie que acabamos de crear. I18n cookie. y también lo importaremos. De acuerdo, hecho y aquí donde estamos enviando la localización y el título también podemos establecer la cookie, solo hacemos eso, encabezados y luego como cookie esperamos areHating y cookie punto para realizar mirar ¿Por qué estoy ¿estoy obteniendo este error aquí ahora? cambiado Ahora, si verificamos las cookies, tenemos la cookie aquí si la cambio a de, el valor cambia lo cambio de nuevo, el valor también cambia, también implementamos la cookie donde mis diapositivas saltan porque es hora de un descanso, muy bien, pero antes de continuar Entonces, Greg, quiero consultar contigo y ver si tienes alguna pregunta.

16. Introducción a Contentful

Short description:

Comencemos con Contentful, una plataforma de contenido componible con una arquitectura API-first. Contentful te permite orquestar contenido desde múltiples plataformas y publicarlo en cualquier canal digital. Ofrece cinco APIs: Content Management API para acceso de lectura y escritura, Asset API para interactuar con activos, Content Delivery API para obtener y renderizar contenido, Preview API para ver contenido en borrador y GraphQL API para obtener contenido en estados de borrador y publicado. Puedes crear una cuenta en Contentful.com y explorar las diferentes opciones como organizaciones, espacios y entornos. En el modelo de contenido, puedes definir la estructura para tu contenido, incluyendo tipos de contenido de recetas y campos relacionados. Para importar un modelo de contenido existente, usa el comando 'npx contentful cli if then space import' seguido del archivo de contenido. Si has clonado el repositorio de GitHub, puedes encontrar el archivo de contenido en la carpeta Contentful. Asegúrate de proporcionar el ID del espacio cuando se te solicite. Puedes obtener el ID del espacio desde la URL o la sección de claves de API en la configuración.

Hasta ahora. Entonces, comencemos en la siguiente parte de esta masterclass, que trata sobre Contentful. ¿Has oído hablar de Contentful o lo has utilizado antes? No, nunca. Muy bien. Esto es perfecto porque aprenderás desde cero. Para darte una idea rápida sobre Contentful, es una plataforma de contenido componible con una arquitectura API-first. Con Contentful, básicamente puedes orquestar contenido desde múltiples plataformas y publicarlo en cualquier canal digital, ¿verdad? Así que Contentful, anteriormente, cuando hablamos de Contentful, hablamos mucho sobre un sistema de gestión de contenido sin cabeza. Pero ahora estamos evolucionando como una plataforma y nos estamos convirtiendo en una plataforma de contenido componible. Así que obtendrás más ideas sobre Contentful y cómo funciona en las próximas diapositivas, donde te guiaré a través de la aplicación web y los modelos de contenido. Pero para darte una idea rápida, Contentful te ofrece cinco APIs diferentes. La API de Gestión de Contenido, que te permite tanto leer como escribir contenido. Entonces, puedes eliminar contenido. Puedes crear contenido fuera de la aplicación web que tenemos. Luego está la API de Activos, que te permite interactuar con los activos que tienes almacenados en Contentful. A continuación, está la API de Entrega de Contenido. Esta es la API que querrás usar para obtener contenido de Contentful y renderizarlo en cualquier canal digital. La cuarta es la API de Vista Previa. A menudo, cuando estás trabajando con contenido, puede haber contenido que está publicado y otro que está en estado de borrador. ¿Verdad? Entonces, para ver este contenido que está en estado de borrador, usarías algo como la API de Vista Previa, porque la API de vista previa te dará el contenido tanto en el estado de borrador como en el estado publicado. Y luego está la API de GraphQL. La API de GraphQL puede darte contenido tanto en el estado de borrador como en el estado publicado, y básicamente es una API de GraphQL que puedes usar para obtener contenido. Aparte de la API de gestión de contenido, las otras cuatro APIs son solo de lectura, no puedes manipular el contenido o la información que tienes en Contentful utilizando estas APIs. Esa fue una introducción no tan corta sobre Contentful y las APIs en Contentful, así que déjame abrirlo ahora mismo. Así que voy a asumir que has creado una cuenta en Contentful. Pero si no lo has hecho, ve a Contentful.com y regístrate para obtener una cuenta. Una vez que crees una cuenta, verás algunas cosas allí. Y voy a intentar guiarte a través de esas cosas y ayudarte a entender qué son. En Contentful, puedes ser parte de varias organizaciones. Aquí, déjame hacer zoom. Aquí tengo mi organización personal donde hago muchos experimentos y la llamo Herschel. Y en esta organización, tengo varios espacios. Cada espacio es para un proyecto en particular. Similar a esta organización, tengo un par de otras organizaciones y estas organizaciones contienen espacios. Ahora, estos espacios también pueden tener algo que se llama entornos. Aquí tengo un espacio de recetas, que he creado para este taller en particular. Y ese espacio también tiene dos entornos diferentes. El entorno principal y luego el entorno del taller. Entonces, si estoy probando algo, digamos que quiero hacer algunos cambios en el modelo de contenido que tengo. Entonces, en lugar de hacerlo directamente en el principal, puedo crear un nuevo entorno, hacer esos cambios, probar esos cambios y si estoy satisfecho, puedo fusionar esos cambios en el entorno principal. Esa es una descripción general rápida del entorno. Ahora, una vez que inicies sesión en tu espacio de Contentful y crees una cuenta en Contentful y crees un espacio, obtendrás varias opciones. Esta es la pantalla de inicio predeterminada y luego está el modelo de contenido, donde definirás toda la estructura para tu contenido. Para nuestra aplicación, es una aplicación de recetas, por lo que necesitamos un tipo de contenido de receta. Este tipo de contenido contiene un título que es de texto corto, también tiene una descripción corta, luego para que se vea bonito, quiero agregar una imagen, así que he creado un tipo de contenido de activo, que tiene una imagen de portada, y luego estoy creando un campo de contenido de tipo texto enriquecido, que se llama ingredientes, y luego hay otro campo de texto enriquecido, que se llama instrucciones. Luego hay otro tipo de contenido llamado ingrediente, y esto básicamente contiene todos los ingredientes que tengo en mis recetas. Contiene el nombre y tiene un tipo de cantidad. Así que vamos a intentar crear y trabajar en estos modelos de contenido y tratar de crear un tipo de contenido. Volvamos a la diapositiva. Lo primero que queremos hacer es importar un modelo de contenido existente, así que ya he creado un modelo de contenido que contiene actualmente solo el tipo de contenido de receta, que también está un poco incompleto. En el siguiente paso, una vez que hayamos terminado de importar, avanzaremos y comenzaremos a agregar más tipos de contenido a esto. Para importar un modelo de contenido, puedes ejecutar el comando 'npx contentful cli if then space import' y luego especificar el archivo de contenido. Ahora, si has clonado el repositorio de GitHub que compartí anteriormente y si vas a la pestaña 5, creo que hay una carpeta de Contentful en la que se encuentra un archivo JSON llamado workshop.json. Voy a verificar rápidamente si es la etapa 5. Sí, eso es... hmm... bien, todavía está en la etapa 4, aún puedes encontrarlo en la etapa 4 y en la etapa 5. Así que adelante, si alguna vez cierras el repositorio, ejecuta este comando para encontrar... Las diapositivas no están funcionando bien hoy. Sí. Y también te pedirá que ingreses un ID de espacio. Permíteme volver a Contentful y mostrarte cómo puedes obtener ese espacio. Hay dos formas diferentes. La primera es obtenerlo desde la URL. Si vas a la URL, está después de un guion y la palabra 'spaces'. Los caracteres son tu ID de espacio, o lo que puedes hacer es ir a la configuración.

17. Claves de API y Modelo de Contenido de Contentful

Short description:

Esta parte cubre el proceso de generación de claves de API y el ID del espacio en Contentful. También explica la importancia de la autenticación para importar archivos JSON. Después de la importación, el modelo de contenido incluirá el tipo de contenido de receta. Además, la importación incluirá medios y contenido. El siguiente paso es crear un modelo de contenido para ingredientes, que incluye los campos 'nombre' y 'tipo de cantidad'. El campo 'tipo de cantidad' proporcionará una lista de opciones para que el usuario seleccione. Por último, se agregará un nuevo campo llamado 'ingredientes' como un campo de texto enriquecido para mostrar los ingredientes requeridos para una receta.

Claves de API. Haz clic en agregar clave de API. Esto generará las claves de API que necesitarás más adelante y también te dará el ID del espacio. Puedes copiar el ID del espacio y luego tendrás que pasarlo en el comando. Una cosa que también te pedirá hacer es algún tipo de autenticación. Así que asegúrate de hacer esa autenticación porque sin la autenticación no podrás importar este archivo JSON.

Una vez que hayas importado esto, avísame, y luego podemos comenzar a ver el modelo de contenido incompleto y comenzar a agregar o actualizar el modelo de contenido. Así que cuando lo importes, este será el modelo de contenido que obtendrás. Solo tendrá el tipo de contenido de receta y no tendrá el campo de ingredientes aquí. Simplemente no tendrá el contenido de ingredientes tampoco. Está bien. Es importante. La otra cosa que hará por ti es que también importará el contenido. Así que no perderemos mucho tiempo creando ese contenido desde cero para este taller, por lo que ya encontrarás algunos medios y contenido aquí una vez que se complete la importación está bien, es importante correcto, así que si revisas la pestaña de modelo de contenido o si revisas la pestaña de contenido podrás ver el contenido y el modelo de contenido, sí, eso es perfecto, ahora hay dos cosas que necesitamos hacer, necesitamos crear un modelo de contenido para ingredientes y luego queremos referirnos a esto en nuestro tipo de contenido de receta, así que vamos a crear un contenido de ingredientes tipo y debería tener dos campos. El primero es el nombre y el tipo de cantidad. Entonces hacemos clic en agregar tipo de contenido. Voy a llamarlo ingrediente crear. Voy a agregar un campo que será el nombre. Muy bien, puedo hacer clic en agregar y configurar y aquí puedo especificar diferentes configuraciones para este campo en particular, este campo representará el título de la entrada y este es un campo obligatorio. También puedes configurar otros valores de configuración, pero para este campo en particular, esto se ve bien suficiente. Así que voy a hacer clic en confirmar. Muy bien, voy a volver a la diapositiva. Muy bien, esto es lo que es. Y luego eso es el tipo de cantidad, pero con el tipo de cantidad, lo que queremos hacer es darle al usuario una lista de opciones para seleccionar el tipo de cantidad. Entonces, un ingrediente puede venir en una lata. Puede venir en, uh, no sé, paquetes. Entonces quieres especificar como cuánta cantidad se requiere para ese ingrediente en particular así que también vamos a configurar eso, nuevamente en Contentful voy a hacer clic en agregar campo hacer clic en texto, llamémoslo tipo de cantidad uh muy bien, esto va a ser un texto corto, no queremos que sea una lista voy a hacer clic en aceptar y configurar. Y ahora, bajo validación, lo que quiero hacer es decir, hey, solo puedes seleccionar algunos valores específicos. Voy a agregar algunos aquí. Cucharada, tal vez gramos, mililitros. Si estás horneando una taza, si estás horneando un pastel. Puedes usar Taza como valor. Pero por ahora esto se ve bien. Puedo cambiar la apariencia de una sola línea a desplegable. Eso es lo que voy a seleccionar. Y luego voy a hacer clic en confirmar. Ahora puedo guardar esto. Y aquí, si vuelvo a mi modelo de contenido, tengo tanto el tipo de contenido de ingrediente como el tipo de contenido de receta. Esto se ve bien. Esto funciona bastante bien, pero hay una cosa más. No está en las diapositivas, no importa. Pero queremos. Tenemos los ingredientes, pero no estamos mostrando el ingrediente con la receta y sin decirles a los lectores cuáles son los ingredientes requeridos. Tener una receta no tiene sentido. Así que queremos agregar un nuevo campo. Esto será un campo de texto enriquecido. Lo llamaremos ingredientes y aquí. No necesito todos estos formatos. Simplemente los voy a desactivar.

18. Localización en Contentful

Short description:

Agregamos nuevos ingredientes a nuestro contenido de recetas y vimos cómo hacer referencia a ellos. Ahora hablemos de la localización en Contentful. Contentful te permite gestionar contenido localizado para diferentes regiones e idiomas. Cada espacio puede tener un conjunto de localizaciones identificadas por códigos ISO. La localización no se trata solo del idioma, sino también de la región. Puedes agregar nuevos idiomas a través de la aplicación web de Contentful o programáticamente a través de la API de gestión. Contentful también admite localizaciones personalizadas para dirigirse a audiencias específicas. Hay diferentes formas de implementar la localización en Contentful.

Es posible que necesite viñetas o numeración. Así que lo dejaré como estaba. No voy a usar hipervínculos. Pero quiero tener entradas en línea. Lo dejaré como está y haré clic en confirmar. Lo otro que quiero hacer es. Veamos. En la entrada en línea incrustada validation. Quiero aceptar solo. El tipo de ingrediente para que. Si alguien es nuevo y no tiene una capacitación para esto, al menos sepan que no se les permite usar ningún otro tipo de contenido, pero solo tendrán la opción de ingrediente. Confirmaré esto, guardaré esto, y ahora también tenemos el ingrediente. Entonces, sigamos adelante y agreguemos una entrada para el ingrediente. Voy a llamarlo fideos. Digamos que su cantidad será una taza. Si ves aquí, ahora que tenemos una nueva entrada, por defecto, el estado de esa entrada en particular o el estado de ese contenido será el borrador. Si estás satisfecho y quieres que se use en producción, deberás publicar ese contenido, y ahora obtendrás ese contenido en la API de entrega o la API de GraphQL, y no es necesario decirle a Contentful que pase los contenidos que están en borrador. Tenemos fideos. Hagamos dos más. Voy a seleccionar ajo, que serán migas. Lo voy a publicar, crear nuevo ingrediente, cebolla, también serán gramos, y lo voy a publicar. Muy bien, ahora tenemos los ingredientes, hagamos cualquier... Puedo ver cebolla, ajo y fideos, y luego las recetas aquí. Vamos a su cámara. Muy bien, tengo que... Vamos a ingredientes y aquí puedo decir. 500 gramos y luego en la entrada en línea. Puedo seleccionar cebollas. Voy a hacer algo similar, veamos, 200 gramos y luego dos ajos y dos tazas de Ahora tenemos los ingredientes, podemos publicar los cambios. Así que tenemos los ingredientes en nuestro contenido de recetas. Esto se ve bien. A medida que obtenemos los ingredientes, creamos un nuevo tipo de contenido. Vimos cómo hacer referencia a ese tipo de contenido. Muy bien. Antes de continuar, ¿tienes alguna pregunta? No, me parece bien. Muy bien, perfecto. Volvamos a las diapositivas y hablemos de la localización en Contentful. Debido a que puedes gestionar contenido en Contentful, es posible que tengas equipos o que desees tener contenido localizado para diferentes regiones, para diferentes idiomas también. Así que puedes hacer eso en Contentful. Hay diferentes formas de hacer la localización en Contentful. Pero antes de eso, hablemos de las localizaciones. Entonces, en cada espacio, puedes tener un conjunto de localizaciones. Y cada localización, nuevamente, en esos espacios puede ser identificada por un código ISO. Ya vimos esto, que hay ENUS, DEDE. para alemán en alemán es alemán, simplemente puedes usar en o de o fr también y creo que he estado hablando de esto durante todo el taller, como que la localización no se trata solo del idioma, sino también de la región, por lo que es importante tener en cuenta que local no significa solo el idioma. Puedes crear o agregar nuevos idiomas a través de la aplicación web de Contentful, lo cual te mostraré. O si quieres hacerlo programáticamente, también puedes hacerlo a través de la API de gestión. Si por alguna razón quieres crear una localización personalizada. También puedes hacerlo dentro de Contentful. Puedes crear una localización personalizada para dirigirte a una audiencia específica de tu elección. Ahora que hemos hablado un poco sobre las localizaciones, hablemos sobre los tipos de localización que son posibles en Contentful.

19. Métodos de Localización y Gobernanza

Short description:

La localización a nivel de campo te permite localizar cada campo individualmente. La localización a nivel de entrada implica crear una nueva entrada para cada idioma. La localización a nivel de tipo de contenido es la mejor opción para una separación estricta del contenido. La localización a nivel de campo y a nivel de entrada permiten la publicación asíncrona. La localización a nivel de campo y a nivel de entrada tienen opciones de respaldo, mientras que el nivel de tipo de contenido no las tiene. Puedes restringir el acceso a contenido específico utilizando la localización a nivel de tipo de contenido. La localización a nivel de campo no admite la publicación asíncrona.

Hemos analizado los campos. Con los campos, puedes tener una localización a nivel de campo, también puedes tener una localización a nivel de entrada, y luego una localización a nivel de tipo de contenido o espacio. Te guiaré a través de los tres y también hablaré un poco más sobre lo que funciona bien cuando,

Lo primero es la localización a nivel de campo. Con esta localización, básicamente puedes localizar cada campo individualmente. Si vuelvo a mi modelo de contenido, aquí en la receta, si abro la configuración para el título, verás que he habilitado la localización de este campo. Pero si te muestro la descripción, no quiero que se localice. Así que no lo tengo habilitado aquí, puedes seleccionar qué campo quieres localizar y puedes habilitarlo en esa configuración. Ahora esto es mejor en escenarios donde tienes tipos de contenido con menos campos como tenemos ahora aquí y quieres que el contenido se publique de forma sincrónica. Ahora, ¿qué significa eso? Digamos que he habilitado la localización aquí, ¿verdad? y si voy a mi contenido, si voy a una carnicería aquí ahora porque este campo no es obligatorio aún puedo publicarlo sin tener un título en alemán, y también he configurado el respaldo en inglés. Entonces, si no lo encuentra, irá al inglés. Pero eso generalmente no es una buena práctica si estás usando la localización a nivel de campo, porque en la localización a nivel de campo quieres publicarlo de forma sincrónica, y es entonces cuando quieres hacer esto.

Avanzando, tenemos la localización a nivel de entrada. Ahora, la forma en que funciona la localización a nivel de entrada es diferente a la localización a nivel de campo, obviamente y la forma en que funciona es que para cada idioma diferente vas a crear una nueva entrada, ahora en nuestro ejemplo, si no habilité la localización a nivel de campo para el campo del título y quiero localizar todo esto e implementaría la localización a nivel de entrada, crearía una nueva entrada de contenido para esto. Y esa entrada estará en alemán. ¿Correcto? Así que vamos a tomar un ejemplo aquí con los ingredientes. Por ejemplo, quiero implementar la localización a nivel de campo para los ingredientes. Ya he creado uno para las cebollas. Y estoy bastante seguro de que no se llama `we burn`, se llama de otra manera y se me ha olvidado completamente, pero puedo hacer esto. Ahora tendré que crear una entrada similar. Solo para alemán aquí. Ahora esto funciona bien porque ahora lo que sucede es que puedes hacer una publicación asíncrona. Incluso si no tengo una entrada en alemán, aún puedo seguir adelante y publicar ese contenido allí.

Lo siguiente es la localización a nivel de tipo de contenido o la localización a nivel de espacio. La forma en que funciona esto es que para cada idioma, tendrás un tipo de contenido diferente. Entonces, si quiero implementar esto crearé un tipo de contenido diferente para la receta que sea solo para el idioma alemán. También puedo hacer lo mismo para los amigos. Esto es lo mejor cuando tienes una separación estricta del contenido y quieres tal vez tener campos diferentes según el idioma esto es cuando este enfoque funciona muy bien y también permite la publicación asíncrona al igual que la localización a nivel de entrada, por lo que esa fue una breve introducción sobre todos los tipos de formas posibles de implementar la localización con Contentful Voy a hablar un poco sobre la gobernanza, porque cuando trabajas con contenido, tendrás un equipo que te ayudará con esto, y también querrás ver la parte de gobernanza de esto. Entonces, con la localización a nivel de campo, tienes la gobernanza, por lo que básicamente puedes restringir a las personas para crear o editar una parte específica del contenido. contenido. Sin embargo, con la localización a nivel de entrada, porque cualquiera puede crear una entrada particular o nueva, no puedes restringir eso. Pero puedes hacerlo con el tipo de contenido porque con el contenido tipo, estás especificando o estás dando permisos solo a contenido específico a un usuario en particular. No puedes hacer la publicación asíncrona con la localización a nivel de campo, puedes hacerlo con las otras dos. Y puedes tener un respaldo para la localización a nivel de campo y a nivel de entrada. Pero no puedes tener un respaldo para el tipo de contenido. Aún puedes tener un respaldo, pero tendrás que codificar eso en tu código. Entonces, tendrás que hacer algunas comprobaciones en tu código para ver si las cosas están ahí o no. Y si no, tendrás que obtener el contenido de tu idioma de respaldo. Muy bien. He hablado mucho, he dado mucha información. Así que voy a tomar un poco de agua, pero también te daré la oportunidad de hacer preguntas que puedas tener. No, está bien. Me parece claro. Mucha información, por supuesto. Sí, esto es mucha información y realmente vamos a usar esta localización a nivel de campo. Pero quiero decir, ese es el método más popular que he visto en la community, la comunidad de Contentful. Pero según tu caso de uso, es posible que también desees probar diferentes métodos. Ya tenemos la documentación para todo esto. Tenemos cursos para todo esto donde puedes aprender en profundidad. Solo di una visión general y no profundicé.

20. Añadiendo Localización y Obtención de Datos

Short description:

Para agregar una localización en Contentful, ve a configuración, Localizaciones y haz clic en Agregar Localización. Selecciona la localización deseada y establece un respaldo. Habilita la localización y permite campos vacíos si es necesario. Puedes tener limitaciones en la cantidad de localizaciones según tu plan. Habilita la localización para campos específicos y selecciona las localizaciones deseadas para mostrar. También puedes configurar imágenes diferentes según la localización. Importa el modelo final.json para asegurarte de que todos los datos estén en Contentful. Utiliza la API de GraphQL para obtener datos y crea una función para manejar las llamadas a la API.

Avanzando, veamos cómo podemos agregar una localización en Contentful. Para agregar una localización en Contentful, ve a configuración, ve a Localizaciones y haz clic en Agregar Localización. Aquí puedes seleccionar la localización que deseas agregar, también puedes, como mencioné, tener una localización personalizada. No tengo francés aquí, así que voy a agregar francés y veré si hay francés de Francia, que es mundial para esto. Luego voy a establecer un respaldo, que será inglés de Estados Unidos. Voy a habilitar esta localización, habilitar la edición de esta localización, eso es verdadero. Voy a permitir campos vacíos para esta localización porque no voy a configurar este idioma para todo el contenido que tengo aquí. Puedo hacer clic en compartir y ahora tengo una nueva localización aquí. Ahora, solo como información adicional, según el plan que tengas, puedes tener limitaciones en la cantidad de localizaciones que puedes tener en Contentful. Supongo que, como acabas de registrarte, estarás en el nivel gratuito que te permite, si no me equivoco, tener dos localizaciones. Pero si quieres tener más de dos, tendrás que actualizar tu plan. Muy bien, y la forma de ver esto es si voy a Pero te mostraré cómo habilitar esto nuevamente para un breve resumen. Si voy a receta. También quiero localizar la descripción. Hago clic en configuración, habilito la localización de este campo. Hago clic en confirmar. Hago clic en guardar. Ahora, la localización está disponible para este campo también. Hago clic en Haka Noodles. Por defecto, así es como se verá la entrada. Puedes tener solo el título y la descripción. Pero si vas a Traducción, haces clic en Cambiar, puedes seleccionar qué localizaciones deseas mostrar. Puedo seleccionar francés y alemán. Hago clic en guardar y ahora tengo en francés y en alemán también. No sé cómo se llama haka en francés, pero noodles son noodle, no tengo idea de cómo se llama en francés. Creo que es lo mismo que en inglés. ¿Pero se escribe de la misma manera? Sí. Oh, interesante. Bueno. No, simplemente no lo traducimos, entendido, interesante, sí, y luego puedo publicar los cambios y ahora tenemos el título en inglés, francés y alemán. Muy bien, también puedes, según la localización, configurar las imágenes también. Si vuelvo a modelo de contenido, voy a receta, nuevamente hago clic en configuración, nuevamente habilito la localización para este campo. Según cada localización, puedes tener un conjunto diferente de imágenes en la. ¿Correcto? Volvamos a las diapositivas.

Hemos agregado algunas localizaciones, ahora lo que queremos hacer es comenzar a obtener los datos de Contentful, pero antes de hacer eso, asegurémonos de tener todos los datos en Contentful. Al igual que importar el workflow.json, si puedes importar el modelo final.json en lugar de workshop.json y ejecutar el mismo comando, importará todo el contenido con los ingredientes y todo lo demás para ti y luego veremos cómo obtener los datos. Orador 2 De acuerdo. Ya lo hice. De acuerdo. Perfecto. Ahora que tienes el modelo de contenido terminado, podemos comenzar a obtener los datos de contenido. Como estamos usando Remix, también vamos a usar la API de GraphQL aquí. No vamos a usar la API de entrega o el SDK, pero si quieres, puedes usar la API de entrega o el SDK o la API de vista previa también. Lo primero que queremos hacer es crear un archivo contentful.server.ch en el que queremos crear una función que maneje las llamadas a la API. Tendremos que obtener las recetas y luego renderizar todas las recetas. Así que vamos a hacer eso. Dentro de la aplicación, tendrás. Utils Contentful. punto. Server.js. Y en esto voy a. También voy a agregar hmm, y en el archivo de variables de entorno, que voy a usar para almacenar mis credenciales. Esto será contentful. Space ID. Contentful. content for token. Vamos a configuración, vamos a la rama principal.

21. Claves de API de Contentful y Obtención de Recetas

Short description:

Vamos a configuración y claves de API, copiando el ID del espacio y usando el token de API de vista previa. El token de API es de solo lectura, por lo que incluso si se expone, los datos no pueden ser manipulados. El código utiliza la API fetch para obtener recetas de Contentful. Debido a limitaciones de tiempo, el código se copia de GitHub. La función de carga obtiene las recetas y las pasa al componente para su renderización. Se produjo un error, pero se abordará en la próxima parte sobre enrutamiento dinámico en Remix.

Así que vamos a configuración y ahora a claves de API. Voy a cookbook uno, copio el ID del espacio, lo pego aquí. Ahora, como estoy usando la API de GraphQL, voy a usar el token de API de vista previa en lugar del token de acceso a la API de entrega. Copio eso. Lo pego aquí. Ahora, si cometes un error, si te gusta, a menudo recibimos esta pregunta como, eh, ¿qué pasa con nuestros tokens de API que se exponen? Así que voy a reiterar esto de nuevo. Este es un token de API de solo lectura, ¿verdad? Así que incluso si se expone, nadie puede manipular tus data o pueden. Solo obtenemos esa data pero no podemos manipular la data. Estás seguro. Tu contenido no se está. O los actores maliciosos no pueden manipular tu contenido. Obtengamos esto ENV.contentful. Voy a copiar esto porque siempre lo escribo mal. Y luego roto. Así que la forma en que hice esto, aunque estoy usando GraphQL, no estoy usando la API específica de GraphQL, solo estoy usando la API fetch en lugar de usar una API específica de GraphQL, porque en este momento no es un proyecto muy complicado. No quiero implementar cosas complicadas aquí como el almacenamiento en caché y cosas así. Voy a hacer algo así. Aquí vamos a tener opciones que pasaremos al método y luego los encabezados que contendrán el tipo de autorización. correcto y el cuerpo tendrá que ser json.stringify consulta y variables return await fetch URL y las opciones Esta es una función simple y reutilizable que vamos a usar en el resto de nuestro código. Ahora esta función que estoy escribiendo aquí nos va a obtener todas las recetas de Contentful. Acabo de echar un vistazo rápido al tiempo y estamos muy atrasados en el tiempo. Lo que voy a hacer es copiar el código de GitHub y pegarlo aquí, y así puedo revisarlo y explicarte qué está sucediendo aquí. Para obtenerRecetas, lo que queremos hacer es basado en la localización, queremos obtener esa información de receta. Estoy pasando un parámetro de localización y eso va a mi colección de recetas, Y luego básicamente estoy obteniendo esa información, haciendo una llamada a la API y devolviéndola aquí. Guardaré esto y vendré a index.js aquí. En lugar de usar esto aquí, simplemente puedo tener una función de carga que me obtendrá esa receta. También necesito importar esto. Vamos a eso. vmx i 18 y de writing dot server esto es correcto, solo voy a copiar y pegar el código solo para ahorrar tiempo. Básicamente, tengo la función de carga que llama a la función obtenerRecetas. Obteniendo las recetas, pasándolas a mi componente y en el componente es donde las renderizo. Cuando lo llamo. Imagen de portada. Tenemos que reiniciar el servidor. Muy bien, si volvemos a nuestra aplicación, nos encontramos con un error, eso es fantástico. Eso es lo último que quería esta vez. Vamos a verificar rápidamente. hacer clic en contentful server.js misma localización pasando la localización el código en el repositorio funciona así que voy a pasar a la siguiente parte porque solo nos quedan como 5 minutos y realmente quiero asegurarme de cubrir todos los pasos Pero si vuelves a tener algún problema, avísame. Estoy encantado de ayudarte con los siguientes pasos. Así que, suponiendo que las cosas estén funcionando bien. Teníamos una página que renderizaba las recetas provenientes de Contentful, pero había un problema. Si hacíamos clic en cualquiera de esas recetas, iría a una nueva ruta y nos daría un 404 porque no configuramos el enrutamiento dinámico. Entonces, en este paso en particular, veremos el enrutamiento dinámico, especialmente en Remix. La forma en que funciona el enrutamiento dinámico en Remix es usando el signo de dólar. Puedes tener un signo de dólar, puedo llamarlo id, y luego tengo .gsx, GSX. Y luego puedo hacer algo como exportar. Función predeterminada. Solo voy a hacer un rápido retorno.

22. Recapitulación de Enrutamiento Dinámico y Localización

Short description:

Implementamos el enrutamiento dinámico para obtener datos de Contentful basados en el ID proporcionado por el usuario. El texto enriquecido se renderiza utilizando la biblioteca 'rich text react renderer'. El interruptor de idioma en la barra de navegación estaba causando problemas, pero lo resolvimos utilizando el gancho 'uselocation'. Se implementó la internacionalización y localización en nuestro proyecto Remix. La localización en Contentful se puede lograr de tres formas. No cubrimos la localización o implementación basada en rutas, pero puedes implementarlas. Si tienes alguna pregunta o necesitas ayuda, no dudes en contactarnos. ¡Gracias por unirte a la masterclass!

Acabamos de hacerlo ahora. Uno, vemos hola estamos aquí. Si hacemos dos, nuevamente vemos hola. Básicamente, implementamos el enrutamiento dinámico por ahora, pero lo que queremos hacer es cuando pasamos el ID, queremos obtener la información del usuario. Queremos obtener el ID del usuario y luego queremos pasarlo a Contentful, obtenerdata de Contentful y luego renderizarlo aquí. Así que aquí tenemos otra función que se llama GetSingleRecipes. Y ahora en esta función, con la localización, también pasamos el ID. Este ID representa el contenido único que queremos obtener. Entonces, lo estamos pasando y obteniendo toda esta información para obtener los ingredientes y las instrucciones junto con la descripción, el título y la imagen de portada. Ahora, si recuerdas, los ingredientes y las instrucciones son texto enriquecido, es del tipo texto enriquecido. Entonces, para implementar el texto enriquecido, necesitas importar y usar otra biblioteca llamada rich text react renderer. Nuevamente, puedes encontrar todo el código allí, pero básicamente ese archivo maneja cómo se renderiza el texto enriquecido. Para React, tenemos bibliotecas similares. Si solo quieres convertir el texto enriquecido a HTML, puedes hacerlo. Texto enriquecido a Markdown o cualquier otro lado del contenido en el que quieras mostrar el texto enriquecido, puedes hacerlo allí. Así es como funciona el texto enriquecido en Contentful y así es como funciona el enrutamiento dinámico en Next.JS. Lo siento, en Remix. Pero una cosa, una vez que implementes esto, habrá un pequeño problema que podrías enfrentar y eso será en torno al interruptor de idioma. Porque si volvemos al código en nuestra barra de navegación, aquí. Lo que estamos haciendo es decirle que vuelva a la ruta de inicio, pero agregue el parámetro de idioma. Entonces, si agregamos un idioma. Si estás en una página de receta, ¿verdad, como fideos? Si hacemos clic en de, por ejemplo, volverá a la ruta de inicio y obtendrá el contenido localizado en la ruta de inicio. Pero lo mostrará. mostrará la página de inicio y no la página de fideos. Entonces, lo que queremos hacer es usar un gancho nuevamente que proviene de Remix y ese es el gancho uselocation Y desde este gancho, podemos extraer el nombre de la ruta y luego lo pasaremos el nombre de la ruta. Entonces, no importa en qué ruta estemos, ahora cambiaremos los idiomas en en esa ruta en particular. Entonces, veamos si puedo explicarte esto y este repositorio en particular. Entonces, ruta gComponents, nombre aquí. Aquí, como mencioné, use location. Pasamos el nombre de la ruta y luego volvemos a pasar el nombre de la ruta aquí. luego encontramos el parámetro de idioma. Y de manera similar en el archivo IT de la ruta obtenemos la configuración regional, también obtenemos la receta que estás pasando la configuración regional y el ID que obtenemos de los parámetros y luego lo renderizamos. Estas son las opciones de renderizado para el renderizador de texto enriquecido, y luego renderizamos la información que obtenemos. Muy bien. Una breve recapitulación. No es lo mismo la internacionalización que la localización. Lo que hicimos hoy, implementamos la internacionalización para nuestro proyecto Remix. para poder entregar contenido localizado a nuestros usuarios. Remix maneja la vista y la parte del controlador del marco MVC, y la localización en Contentful se puede lograr de tres formas diferentes. Todavía hay un par de cosas que, como puedes ver, no pude cubrir y tuve que apresurarme un poco en este último segmento de la masterclass. Pero una de las cosas que podrías haber observado al usar sitios web es que la localización es una ruta en esos sitios web. Si vas a Spotify, tal vez haya spotify.com/es para alemán, podría ser para francés, podría ser /fr para francés. Eso es más una localización basada en rutas. Las bibliotecas disponibles no lo admiten, por lo que eso debe ser codificado por nosotros en este momento. Para mantener el interés en el tiempo, omití esa parte, pero obviamente puedes seguir adelante e implementar esa estructura para tu aplicación. Lo siguiente es que no lo implementamos en la web, pero si quieres, puedes seguir adelante e implementarlo en la web. Como es Remix, puedes implementarlo en AWS, puedes implementarlo en Vercel, Netlify, donde quieras. Ahora, antes de despedirme, sé que me apresuré en la última parte de esta sesión, así que quiero tomar un par de minutos para ver si tienes alguna pregunta o algo que quieras compartir. Todo estuvo claro para mí, así que muchas gracias por esta masterclass. Genial. Muchas gracias por unirte. Y ya tienes el enlace al repositorio de GitHub. Puedes revisar el código si tienes alguna pregunta, si te quedas atascado en algún lugar, no dudes en contactarme en cualquier momento. Voy a estar pendiente de ese hilo al menos durante los próximos días para poder ayudar a las personas que tengan alguna pregunta. Y gracias una vez más por unirte y quedarte hasta el final. Espero que tengas una tarde maravillosa.

Watch more workshops on topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.