FWD: Oportunidad Urgente para Reclamar tu Herencia de Newsletter con React + MDX

Hola, mi nombre es Cesar Alberca. Soy un arquitecto front-end freelance de España, y quiero mostrarte cómo enviar spam a través del correo electrónico con React. Sí, lo has oído bien. Voy a mostrarte cómo crear tu propio boletín utilizando MDX, que es un formato que me encanta para crear contenido usando componentes de correo electrónico de React, y Resend para enviar todos los boletines y correos a tu audiencia.

Así que sí, lo último es mostrarte cómo. Hola de nuevo, bienvenido a mi charla. El nombre es bastante largo y parece spam porque sí, esa es la idea. Mostrarte cómo crear un boletín con correos electrónicos. Pensé que sería divertido tener un título un poco spam.

Permíteme presentarme. Mi nombre es Cesar Alberca. Soy un arquitecto front-end de IA. Trabajo como freelance. También publiqué un libro sobre comedia y programación porque, seamos honestos, JavaScript es bastante cómico. También soy un conferencista internacional y un nómada digital. Me gusta viajar. Puedo encontrar aquí... Oh, lo siento. Eso es una pena. Un segundo, no tomará mucho tiempo. Oh, ya veo. Tengo algunos correos electrónicos. Déjame revisarlos porque soy una persona de bandeja de entrada cero, así que no quiero ver seis correos pendientes aquí. Has sido seleccionado para heredar... Oh, está bien. Quiero decir, debería estar bien. Podemos enviar nuestra clave API y creo que esto no debería ser mucho dinero, ¿verdad? No, por supuesto que estoy bromeando. No envíes VTC o APKs a nadie, por favor. A través del correo electrónico, al menos. Quería mostrarte de una manera interactiva cómo crear un boletín y hacerlo divertido.

Así que estaremos en el newsletter dentro de la charla. Primero, pensemos en qué es realmente un newsletter. Necesitamos comenzar con contenido. Necesitamos algún formato, ¿verdad? Necesitamos marcar HTML, texto, o incluso usar un editor visual. Hay muchos en línea. Necesitamos renderizar este contenido en un HTML seguro para correo electrónico. Hablaremos de esto más tarde. Usaremos React email y necesitamos una forma de entregar esos correos electrónicos a las personas. {{^}}Así que usaremos Resend.

Primero, quiero hablarte sobre MDX. MDX es un formato que mezcla Markdown y JSX. Es un formato súper genial. Puede que ya conozcas Markdown. Básicamente te permite agregar algún tipo de símbolos. Por ejemplo, un hashtag, lo llamo, te permite agregar títulos, por ejemplo. O puedes agregar negritas o cursivas. Pero con MDX, también tienes la capacidad de agregar JSX.

Con JSX, ahora de repente puedes importar componentes de React o Vue dentro de este formato. Por qué creo que MDX es una gran herramienta es porque ya podrías conocer Markdown. Es una sintaxis familiar. Se integra increíblemente bien con la IA. Por ejemplo, para el contenido de mi blog le pido a la IA que genere componentes que apoyen las publicaciones. Una cosa que recomendaría es que si eso te da objetivos y creas contenido en línea, por favor no uses IA para eso o para el contenido en sí. Puedes usarla para asegurarte de que no tenga errores gramaticales o tal vez para investigar, por supuesto, si validas después de la investigación. Pero para el contenido, es tan humano. Es increíble leer algo en lo que alguien ha vertido su tiempo y esfuerzo. Por eso, por ejemplo, para mi newsletter, no uso IA para generar el contenido. Puedo usar IA para traducir, para investigar, para generar componentes personalizados. Así que ahora de repente el newsletter se vuelve más interactivo. Es más animado.

Así que es un formato muy interesante y también obtienes la vista previa en la web. Con el formato MDX, puedes servir ese contenido a través de correo electrónico, como te mostraré más adelante, y también servirlo en tu sitio web. Eso servirá como un archivo y es excelente para SEO.

Así que el stack tecnológico, usaremos MDX para escribir los newsletters, componentes, usaremos React email, rendering, también usaremos React email para convertirlo. Tiene una función para convertir. Delivery, usaremos recent. Y para la vista previa, Next.

js. Así que hablemos de la arquitectura. Básicamente, lo que hago es tener una carpeta en mis proyectos que se llama content y luego agrego el Slug. El Slug es la URL y también sirve como mi identificador. Allí dentro del Slug, puedo tener contenido traducible.

Puedo tener enMDX, que es para inglés, o ESMDX para español. Mi newsletter, por ejemplo, la envío en inglés, pero luego si la gente quiere ver la versión en español, pueden ir al sitio web. Ahora leo con Node.js los archivos y evalúo este formato MDX traducido en un cargador que convierte este MDX en React. Tengo un conjunto de plantillas que me permiten reutilizar el mismo aspecto visual para correos electrónicos o para newsletters. Tengo un método de renderizado que toma estos componentes y los convierte en HTML. Y luego recent, lo uso para enviar correos electrónicos.

No tengo un servidor de correo. Y la estructura anterior se ve así. Tengo una carpeta crc con el newsletter Slug. Y en este caso, lo hice de esta manera porque el código lo recibirás más tarde. Si te suscribes, por supuesto, puedes suscribirte al newsletter aquí. Y luego en este proyecto, en este proyecto de GitHub puedes copiar y pegar y agregar algunas variables de entorno para tener tu newsletter en funcionamiento. Pero sí, básicamente, esa es la forma en que lo abordé. Así que es fácilmente compartible, pero normalmente querrás tal vez organizarlo de otra manera diferente.

Así que, por ejemplo, tenemos la API, tenemos los componentes, tenemos el contenido, los correos electrónicos, el MDX, y esto es muy interesante porque tengo componentes para renderizar MDX en correo electrónico y en web porque son objetivos diferentes y usamos polimorfismo para eso. Y luego las plantillas, puedo tener, por ejemplo, dos, pero podemos tener múltiples. Y luego, por supuesto, tengo algunos tipos escritos para poder usar TypeScript y asegurarme de no cometer errores.

Entonces, cuando quiero crear un nuevo número, reviso el contenido anterior de los newsletters, agrego el Slug, luego el archivo, empiezo a escribir el newsletter, y luego creo un correo electrónico para vincularlo a ese archivo enMDX para que luego pueda enviarlo a través de reSend. Y estas son algunas de las variables de entorno que necesito. Clave API de reSend, desde dónde estoy enviando este correo electrónico, el segmento, porque reSend te permite segmentar tu audiencia. Así que en una sola audiencia, puedes tener diferentes segmentos y temas porque las personas dentro del segmento podrían suscribirse a diferentes temas, así que diferentes intereses.

Así que hablemos sobre el renderizado. Los correos electrónicos están literalmente atrapados en 2003. Es simplemente terrible. Así que Gmail usa su propio motor personalizado y tiene soporte parcial para CSS. Tiene muchas limitaciones. Outlook en la versión de escritorio, al menos, sí, usa el motor de Microsoft para renderizar el HTML. Es simplemente una locura. Apple Mail es bastante decente. Yahoo es bastante bueno. Outlook.com es diferente de Outlook de escritorio. Así que cuando envías un correo electrónico, no estás seguro de cómo se va a renderizar a menos que realmente lo pruebes en ese dispositivo, en ese motor.

Y sí, eso es súper difícil. Así que la forma en que puedes manejar eso es con Kana email. Este sitio web es increíble. Te permite verificar si Flex funciona. Oh, no, no funciona. Entonces, ¿cómo hacemos los diseños en correos electrónicos? Bueno, te lo diré más tarde. Entonces, ¿qué funciona en los correos electrónicos? Estilos en línea, sí, necesitamos usarlos. Tablas para el diseño. No podemos usar CSS read, CSS Flexbox, olvídalo. Necesitamos usar tablas. CSS básico, EMGs con URLs absolutas. No puedes usar relativas porque cuando envías un correo electrónico a alguien, esa imagen necesita ser servida desde un servidor, ¿verdad? Así que necesita ser una URL absoluta.

Dato curioso, así es como te rastrean. Ellos añaden imágenes de un solo píxel dentro de los correos electrónicos que te envían, y luego cuando hay una solicitud a esa imagen en el servidor, entonces saben que has abierto el correo electrónico. De todos modos, yo no hago eso. No creo que tú debas hacerlo tampoco.

Así que sí, si estás planeando usar D con Flexbox o grid, no. Position, absolute o fixed, no funciona. Box shadow, por alguna razón, tampoco funciona. Variables CSS, por supuesto que no. Media queries, sí. Todo necesita estar en línea. No puedes tener hojas de estilo externas y luego añadir nombres de clase a los correos electrónicos. No, necesita estar en línea. JavaScript, por supuesto que no.

Bueno, en realidad, algo así. Hay este proyecto de AMP email que te permite añadir algo de interactividad en correos electrónicos. Solo funciona en Gmail, así que no tiene mucho soporte, pero es bastante interesante. Cómo React email ayuda es esta biblioteca que uso. Es bastante agradable porque me permite escribir código como este. Sí, con componentes, con botones, texto, y luego lo que hace es renderizar tablas hasta el final. Es simplemente terrible. Sí, no quiero codificar así. Prefiero este enfoque. Además, me permite usar Tailwind, lo cual es encantador.

¿Cómo previsualizamos y probamos los correos electrónicos? Bueno, hay un servidor de vista previa incluido, que puedes ejecutar con npx email dev, y te permite tener una vista previa en vivo, mantener la recarga. Bueno, eso realmente no funciona todo el tiempo porque se rompe con archivos MDX, así que solo reinicio el servidor cuando hago muchos cambios en mis archivos MDX. Añadieron compatibilidad con lintern y vistas responsivas, lo cual es increíble. Sin embargo, la única forma de probar los correos electrónicos es enviándolos realmente a tu cliente de correo electrónico de elección. Este servidor de vista previa permite hacer precisamente eso, así que puedes enviarlo aquí. Si se ve bien en tu navegador, probablemente lo haga. Se ve terrible.

Ahora mira. Entonces, hablemos de cómo programo realmente mis correos electrónicos. Lo que uso ahora es una GitHub Action que tiene un cron que se ejecuta diariamente a las 7 a.m. Se activa, busca en el repositorio si hay un archivo con un formato específico en el nombre que coincida con la fecha de hoy, y si es así, crea una publicación en una API que es interna, y luego eso se programa en Resend. Pensé que sería divertido usar GitHub Actions para programar el boletín, y hasta ahora todo bien.

Realmente me gusta el proceso. La acción SendNewsletter se ve más o menos así. Tienes el código completo en el repositorio de GitHub. Es bastante simple. También añadí algo de manejo de errores, pero principalmente es esta idea. Y luego la Broadcast API, a la que GitHub Actions se conecta, se ve más o menos así. Yo básicamente importo el slug del boletín, así que ese es el archivo, y luego extraigo el título, y luego renderizo el componente con la función render de React email. Luego, lo que hago es llamar a Resend y luego crear una transmisión con el segmento, el tema y las diferentes variables y parámetros que necesito. Y luego lo programo para las tres en punto ETC. Puedes enviarlo en ese momento.

Aquí puedes hacer lo que prefieras. Entonces, ¿por qué usar GitHub Actions? Bueno, realmente quería un control detallado sobre el envío del boletín. Creo que es un sistema muy flexible y está realmente consciente de la IA. Al final del día, son solo archivos, ¿verdad? Entonces, cuando ejecuto un agente de IA, puedo indicarle que modifique las cosas de la manera que quiero. Así que, tengo un sistema bastante flexible. Me tomó un tiempo llegar aquí, así que al compartirlo contigo, espero facilitarte las cosas.

Ahora, hablemos de diferentes cosas que necesitas tener en cuenta al crear un boletín. Primero que nada, quieres evitar la carpeta de spam. Entonces, hay diferentes cosas que necesitas configurar. Necesitas configurar algo llamado SPF, y DKIN, y luego DMARC. Son solo estos nombres extraños que principalmente lo que hacen es verificar que quien dices ser realmente lo eres. Así que solo necesitas agregar varios registros DNS a tu dominio. Reason maneja parte de esto. Así que, sí, revisa la documentación para ver lo que realmente necesitas.

Luego tienes un límite de tamaño de HTML. Entonces, Gmail y otros clientes de correo electrónico, recortan correos electrónicos más grandes de 102 kilobytes. Así que verás tu hermoso boletín luciendo así con el mensaje recortado, y luego los usuarios necesitan hacer clic aquí en ver mensaje completo para abrir el correo electrónico completo. La forma de mantenerse por debajo de 102 kilobytes. Bueno, minimiza los estilos en línea, con suerte usando Tailwind. Esto no es un problema. No deberías usar base64 para codificar imágenes. Así que, siempre usa URLs alojadas. Mantén el contenido enfocado, y, sí, elimina el espacio web innecesario en las compilaciones de producción. React email maneja esto por ti. Además, si estás agregando mucho código y tienes coloreado de sintaxis para tu código, eso realmente puede hacer que superes el límite. Así que, ten cuidado con eso. Y luego, sí, necesitas que las personas puedan darse de baja de tu boletín. Sí, lo comprobé. No hay otra manera. Entonces, hay estos dos actos.

Se llama spam y luego GDPR y regulaciones que dicen que debes tener un enlace para darse de baja en cada correo electrónico que no sea transaccional, lo que significa que eso significa que en correos electrónicos legales, por ejemplo, o actualizaciones de políticas o cosas así, no deberías tener un enlace para darse de baja allí porque los usuarios, si tienen una cuenta contigo, entonces necesitan recibir esos correos electrónicos legalmente. El botón de darse de baja debe funcionar dentro de 10 días hábiles. Así que, no agregues esperas o tiempos de espera allí. Y luego, debes incluir tu dirección física de correo en tus correos electrónicos. Sí, deberías hacer eso. Si no quieres agregar tu dirección física personal, entonces lo que puedes hacer es, hay servicios que te permiten tener una dirección de correo con ellos y les pagas una tarifa mensual.

Una cosa que me encanta de Reason es que como segmentas tu audiencia y tienes temas, las personas, cuando se dan de baja, pueden darse de baja de temas específicos. Digamos que realizas una promoción de Black Friday y algunas personas han comprado esa promoción, entonces podrían no querer recibir más promociones de Black Friday. Así que, si el teléfono se está dando de baja de todo tu boletín, entonces pueden darse de baja solo del tema. Así que, con Reason, puedes agregar texto especial, para que luego agregue el enlace de darse de baja. Y luego, puedes tener una baja con un solo clic en los encabezados, lo que mostrará aquí un botón que dice darse de baja. Muy útil. Y sí, probar eso fue definitivamente en lo que pasé más tiempo, ¿verdad? Comprobando en Gmail, en Gmail web, Gmail iOS, que es diferente de Gmail Android. Así que sí, eso es muy, muy laborioso.

El modo oscuro es imposible, así que ni siquiera lo intentes. Diferentes clientes lo manejan de manera diferente. Así que, deberías tener un correo electrónico muy simple en blanco y luego si las personas tienen ese modo, es en realidad el cliente quien invierte los colores para tener un modo oscuro para las personas que lo desean. Verifica que tus enlaces funcionen, prueba el flujo de baja, verifica en dispositivos móviles, y sí, aquí tienes una lista de verificación ordenada. Y ahora, bueno, muchas gracias por quedarte hasta el final de esta charla. Así que, un rápido resumen. Usamos MDX para escribir contenido con markdown y usar componentes de React cuando sea necesario. React email, nos permite codificar en React con componentes y luego React email se encarga de traducir esos componentes en tablas. Y luego recientemente, usamos su API para enviar los correos electrónicos. La integración continua la usamos para programar los correos electrónicos. Y luego también hablamos sobre diferentes cosas que necesitas considerar al crear un boletín. Y ahora es la última vez que tienes para suscribirte a este boletín que va a tener una vida muy corta. Va a enviar un correo electrónico y eso es todo. Así que, puedes suscribirte aquí y recibirás el código, las diapositivas y todo lo que necesitas directamente en tu bandeja de entrada. Y ahora es el momento de la demostración en vivo. Así que, la forma en que lo hice fue, por supuesto, a través de aquí.

Así que, aquí veamos. Sí, creo que quiero enviar esto. Bien, deséame suerte. Espero que funcione y enviar. Bien, espero que pronto recibas en tu correo electrónico, si te suscribiste, toda esta información. Pero no te preocupes si no te suscribiste y aún quieres ver lo que la gente realmente recibió. Puedes ir aquí al boletín y luego puedes verificar qué recibió la gente con todas las diapositivas y el código de demostración y enlaces.

Así que, sí, no te lo perderás. Así que, aquí también están algunos de los recursos. Eso fue todo de mi parte. Así que, aquí puedes encontrar todas mis redes sociales o mis enlaces. Y, por supuesto, tengo un boletín donde hablo semanalmente sobre arquitectura de IA en front-end. Y, sí, te muestro cómo puedes usar las mejores prácticas con estos agentes de IA hoy en día. Cómo puedes crear código de mayor calidad para que tengas menos errores y recuperes la confianza en que lo que pones en producción funcionará mañana y dentro de 10 años. Y eso fue todo.

Gracias. Muchas gracias. Por favor, si construyes un boletín, envíame un correo electrónico. Muchas gracias. Adiós.