DEV Community: Jonathan Blanco Hernandez

React email: Por Fin Puedes Construir Emails con Componentes y Decir Adiós al Estrés del HTML.

Jonathan Blanco Hernandez — Fri, 14 Nov 2025 15:54:30 +0000

Hola, Devs!

Si alguna vez has intentado hacer un email que se vea bien en Gmail, Outlook y, peor aún, en el modo oscuro, sabes que es un infierno de tablas anidadas y CSS inline del año 2005. Es la definición de deuda técnica. React email llega como el fix que necesitábamos: una solución de framework que te permite usar React para construir emails con componentes.

Esto no es solo una librería, es un workflow completo que está reescribiendo la forma en que interactuamos con el HTML de correo.

Los 3 Commits Clave

1. ⚛️ Programación Declarativa para el HTML de Correo

El mayor commit es la promesa de escribir HTML de correo usando la sintaxis de React. Esto significa adiós a la lucha contra las reglas arcaicas de los clientes de correo. React email utiliza una capa de abstracción para traducir los componentes de React (<Button>, <Section>, etc.) a HTML compatible con todos los clientes de correo populares.

Punto Clave Dev: Reduce el tiempo de desarrollo de días (prueba-y-error) a horas. Además, permite usar TypeScript para tipado seguro.

2. 🧩 Componentes Modulares y Reusable (¡Por Fin!)

El framework ofrece una colección de componentes *primitives* prediseñados y reusable (como <Column>, <Row>, <Text>, <Link>). Esto te permite construir emails con la misma modularidad que usas en tu frontend React, aplicando principios de Diseño Atómico.

Punto Clave Dev: Centraliza estilos y evita que cada desarrollador reinvente la rueda de accesibilidad y compatibilidad. Simplemente importa y compone tu WelcomeEmail o InvoiceEmail.

3. 🛠️ Entorno de Desarrollo Local con Live Preview

React email incluye un entorno de desarrollo local (Dev Environment) con un servidor de *live preview* que se integra a tu flujo de trabajo. Mientras desarrollas, ves los cambios en tiempo real en una interfaz web. Además, te permite probar el correo en clientes reales (como Gmail) directamente desde el entorno local.

Punto Clave Dev: Elimina el ciclo de build, deploy y envío de prueba, agilizando la depuración de emails y asegurando que tu CSS funcione sin media queries hackeadas.

🧠 Efecto en el Stack y la Industria

Esta herramienta es un game changer para la productividad de cualquier equipo que envíe correos transaccionales (registro, facturación, alertas).

Consistencia Full-Stack: Como desarrollador de React, esto elimina la barrera tecnológica entre tu frontend (ReactJs, NextJs) y tu capa de comunicación (emails). Puedes reutilizar lógica de negocio y mantener la misma sintaxis, permitiendo que un desarrollador full-stack maneje todo el ciclo de vida del usuario con el mismo tooling.
Solución al CSS Inline: La herramienta se encarga de todo el dolor de cabeza del CSS y el inlining automático. Los desarrolladores ya no tienen que gastar tiempo en hacks para viejos clientes de correo, sino en el diseño y el contenido del mensaje.
Facilitador de Arquitectura: Integrado con servicios como Resend (o cualquier otro provider SMTP), React email se convierte en la capa de UI perfecta para tus back-ends (NestJS, Django) que solo necesitan generar la estructura del correo y enviarla.

Moraleja Dev: Dejar de escribir HTML de correo a mano es como migrar de Vanilla JS a React. Es doloroso al principio, pero una vez que pruebas la modularidad y el rendimiento, nunca querrás volver a trabajar con tablas anidadas.

🔗 Fuentes y Documentación

Documentación Oficial de React email: https://react.email/
Resend Blog: React Email v5: https://resend.com/blog/react-email-5

SuperClaude: Tu Agente de IA ya no es Junior, Ahora es Arquitecto y se Sube al Stack.

Jonathan Blanco Hernandez — Wed, 12 Nov 2025 17:12:38 +0000

El hype de la IA generativa para código ha pasado a la fase de Productividad Profesional. SuperClaude es la prueba: no es solo un chatbot que te escupe funciones, sino un meta-programming framework que transforma a herramientas como Claude Code en un socio de desarrollo especializado y consciente del contexto. Esto significa que, por fin, la IA está aprendiendo a pensar como un ingeniero senior.

Los 3 Commits Clave

1. 🤖 Modo Experto a Demanda: Personas Cognitivas

SuperClaude introduce Personas Cognitivas como el "System Architect" y el "Security Engineer". Esto es crucial porque el framework se enfoca en corregir la tendencia de la IA a saltarse pasos críticos de planning, arquitectura y testing. Ya no es solo "hazme un componente", sino "diseña la API con enfoque DDD". Utiliza más de 22 comandos *slash* para tareas específicas, desde análisis de seguridad (/user:analyze --security) hasta la solución de problemas en producción (/user:troubleshoot --prod).

2. 🧠 Pensamiento Multi-Hilos (Multi-Hop Reasoning): Adiós a la Ficción

El framework dota al agente de una capacidad de razonamiento iterativo (Multi-Hop Reasoning) de hasta 5 saltos, permitiéndole profundizar en conceptos y seguir cadenas causales (e.g., Causa → Efecto → Prevención). Más importante aún, utiliza un Quality Scoring (Puntuación de Calidad) para validar la confianza de la fuente y la coherencia de la síntesis. Si el resultado es una alucinación, SuperClaude tiene un built-in para detectarlo.

3. 🔄 Auditoría y Aprendizaje Basado en Casos (Case-Based Learning)

SuperClaude implementa un mecanismo de Auditoría de Razonamiento que rastrea el proceso lógico de la IA, lo cual es esencial para la confianza y la depuración. Además, utiliza el Aprendizaje Basado en Casos (Case-Based Learning) para guardar las estrategias de éxito o fracaso en el prompt inicial. Esto significa que, si le enseñas cómo abordar un problema de React-Native en una sesión, aplicará esa estrategia y mejorará las futuras soluciones, optimizando su comportamiento.

🧠 Efecto en el Stack y la Industria

Esta herramienta marca el pivot de la IA en la industria: de ser una muleta para novatos a ser una herramienta de delegación para seniors.

Reducción del Backlog Trivial: Para un equipo, significa que tareas de bajo valor como corregir errores menores en los build logs o vaciar el *backlog* de pequeñas mejoras (accesibilidad, UI polish) pueden delegarse completamente al agente. El foco del equipo se libera para el desarrollo de features de alto impacto y arquitectura.
Contexto Persistente en Full-Stack: Si trabajas con stacks complejos (como Next.js o un backend con NestJS/Django), sabes que el context switching es el principal asesino de la productividad. SuperClaude está diseñado para mantener el contexto a través de todo el flujo, desde el prompt hasta la solución, gracias a su capacidad de aprendizaje iterativo.
La IA se Vuelve Auditable: El rastreo de la cadena de razonamiento es la clave de la adopción en entornos empresariales. Permite a los Senior Developers confiar en el código generado, ya que pueden revisar por qué la IA tomó esa decisión y asegurarse de que sigue los estándares de arquitectura del proyecto.

Moraleja Dev: Ya no es suficiente con que tu agente sepa escribir una función. En la fase 2.0 de la IA, lo que importa es que sepa planificar, auditar su proceso y aprender de sus errores para que la próxima vez sea más eficiente.

🔗 Fuentes y Documentación

https://superclaude.netlify.app/

Como configurar un emulador android para correr una App desde mi terminal en Mac.

Jonathan Blanco Hernandez — Thu, 19 Mar 2020 08:15:11 +0000

Antes que nada me gustaría comentarle que esto solo lo he hecho en macbook, por lo que no sabría realmente como configurarlo en equipos linux y windows, aunque en linux no debe ser tan diferente.

Trabajo con React-native por lo que no se si esto les ayude para otro tipo de tecnologías, espero que si.

Bueno ¿Porque hago esto?, pues por el simple hecho de que me encontré con el problema de no saber como levantar mi emulador android sin necesidad de abrir android "Come RAM" estudio, y pues la necesidad me llevo a entender el funcionamiento de algunas cosas como Android sdk, tools y emulator, y para no extendernos tanto pues aquí vamos con la configuración de una manera breve.

¿Necesito tener instalado android studio?

SI!!!!

Antes que nada tenemos que tener ya instalado previamente Android Studio en nuestro equipo.

Estoy trabajando con la versión 3.6.1

Al igual que necesitamos la configuración previa de ADB

Configurar emulador en Android Studio

Seleccionamos un proyecto previamente importado o abrimos uno (Nota React-Native: recuerda que se requiere importar la carpeta Android de nuestro proyecto).

Para abrir un proyecto que no ha sido abierto previamente, le damos a Open an existing Android Studio project

Una vez que tengamos abierto nuestro programa, nos vamos a la parte superior derecha a nuestro AVD manager

Nos abrirá la ventana donde se administran los dispositivos virtuales previamente instalados y le damos click a "+ create virtual device..."

Esto nos abrirá la lista de emuladores disponibles para instalar, vamos a crear un dispositivo que tenga la resolución lo mas baja posible, ya que así el uso de memoria sera menor a otros dispositivos, y que cuente con play store, esto es muy importante.

Yo escogí Pixel de 5.0" y le damos Next

En la siguiente pantalla nos toca elegir el sistema a utilizar, recomiendo usar los mas recientes, en este caso yo elegí el Q con el Api Level 29 y su ABI de x86 que es básicamente el Android 10.0 y le dan a download

Una vez que tengamos la imagen del sistema descargado y seleccionado el sistema, le damos next y luego finish (la ultima ventana no es necesario que se configure)

Ya terminado de crear nuestro dispositivo, vamos a verificar que corra bien, en el administrador de dispositivos(AVD manager), le damos play a nuestro dispositivo

Ya que corroboramos, podemos cerrar el dispositivo y ahora nos vamos al SDK Manager que de igual forma se encuentra en la parte superior derecha.

Aquí en la primer ventana vamos a seleccionar Show Package Details

Se desplegaran los recursos sobre nuestra versión sdk que necesitamos, en este caso sobre Android 10.0 (Q)

Verificamos que este seleccionado:

Android SDK Platform 29
Sources for Android 29
Intel x86 Atom System Image
Intel x86 Atom_64 System Image
Google Play Intel x86 Atom System Image

Luego nos movemos a la pestaña SDK Tools en esta misma ventana.

Y verificamos que estén seleccionadas las siguientes herramientas.

Android Emulator
Android SDK Platform-Tools
Android SDK Tools
Intel x86 Emulator Accelerator

Le damos al botón Apply.

Algunas de estas herramientas se descargaran por lo que vamos a esperar un poco dichas descargas e instalaciones.

Configurar terminal (Variables de entorno)

Bueno una vez hemos terminado de configurar nuestras herramientas pasaremos a la configuración de la terminal en mi caso mi archivo .zshrc o .bash_profile dependiendo su configuración de terminal (en este caso yo uso Oh-my-zsh, les dejo el link por si quieren saber mas de el), lo abrimos con nuestro editor preferido.

Una vez abierto nuestro archivo a configurar, nos vamos a la parte de abajo y vamos a declarar nuestra nuevas variables de entorno.

Declaramos las variables de Android tal cual se ve en la imagem.

NOTA: Es importante que declaremos emulator antes que platform-tools, tools, tools/bin.

Guardamos y reiniciamos nuestra terminal

Correr Emulador

En nuestra terminal vamos primero a comprobar que la variable de entorno este bien declarada, vamos a escribir el siguiente comando:

which emulator

OUTPUT:
/Users/myUser/Library/Android/sdk/emulator/emulator

Y vamos a comprobar que nuestro dispositivo se encuentra en la lista de disponibles, el siguiente comando nos dará la lista de dispositivos previamente instalados con el nombre que se le haya asignado, en mi caso quedo con el nombre por default que me dio Android Studio.

emulator -list-avds

OUTPUT:
Pixel_API_29

Y una vez comprobados estos dos puntos vamos a correr nuestro emulador con el siguiente comando y voilà!

emulator -avd Pixel_API_29

Ya solo queda correr nuestra app, con el comando siguiente vamos comprobar que nuestro emulador esta conectado

adb devices

OUTPUT:
List of devices attached
emulator-5554   device

Y en caso que estemos trabajando con React-Native, primero corremos el emulador y luego corremos:

react-native run-android

Y esperamos a que nuestra app se instale y corra en nuestro emulador.

Gracias por llegar hasta aquí, déjame tu comentario, el feedback es muy valioso para mi y si te gusto por favor dale al "Me gusta" y si te encanto regálame un "Unicornio!!!" son gratis!, sigo trabajando para poder apoyar a la comunidad con este tipo de

PD: probablemente algunas herramientas o configuraciones las haya omitido, ya que yo previamente ya trabajaba con Android Studio y sus emuladores, de ser así por favor házmelo saber para poder ayudarte con las configuraciones previamente omitidas.

Nos vemos hasta la próxima.

Fuentes:

https://developer.android.com/docs/
https://developer.android.com/studio/install
https://developer.android.com/studio/run/emulator

¿Como instalar node.js en Servidores Ubuntu 18.04.?

Jonathan Blanco Hernandez — Thu, 05 Mar 2020 01:03:22 +0000

¿Como instalar node.js en Servidores Ubuntu 18.04.?

Hoy les traigo como instalar Node.js y npm dentro de nuestros servidores Ubuntu.

Explicamos un poco más sobre esto y mostrare la manera más fácil de realizarlo.

¿Que es Node.js?

Concebido como un entorno de ejecución de JavaScript orientado a eventos asíncronos de código abierto, Node.js está diseñado para construir aplicaciones en red escalables.

Node.js está influenciado por sistemas como Event Machine de Ruby ó Twisted de Python. Node.js lleva el modelo de eventos un poco más allá, este presenta un bucle de eventos como un entorno en vez de una librería.(1)

¿Que es npm?

Es el registro de software más grande del mundo, los desarrolladores del mundo usan este registro para compartir y utilizar paquetes de código abierto.(2)

Instalacion

Podemos realizar la instalación por medio de NodeSource.

NodeSource es una compañía enfocada a proporcionar soporte de Node.js y cuenta con un repositorio para el uso de las últimas versiones de Node.js

Para instalar Node.js y npm desde repositorio NodeSource, vamos a seguir los siguientes pasos:

Habilitaremos el repositorio por medio del curl, si es necesario tener privilegios recuerda usar Sudo
```
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
```
Instalamos Node.js y npm de la siguiente manera:
```
$ sudo apt install nodejs
```
Este paquete contine tanto node como los binarios de npm.
Y una vez terminado de instalar, verificamos que ambos estén instalados completamente:
```
  $ node --version
  Output
  v10.19.0

  $ npm --version
  Output
  6.13.4
```

voilà, todo listo, esta es la manera más fácil y sin tantos rodeo, hay otras dos maneras de realizarlo ya sea por NVM y/o por repositorios de ubuntu, si quieres un ejemplo de algún otra forma puedes dejarlo en los comentarios, si te ha gustado espero tu like y alguna retroalimentación es muy importante para continuar haciendo estos ejemplos sencillos y básicos.

Nota: Esta forma de instalación no te permite manejar diversas versiones de Node, para eso requieres instalar por medio de NVM.

Nos vemos hasta la proxima.

Fuentes

(1) https://nodejs.org/es/about/

(2) https://docs.npmjs.com/about-npm/

Mejora tus habilidades de Tecleo(mecanografía)

Jonathan Blanco Hernandez — Tue, 26 Nov 2019 02:33:52 +0000

¿Quieres mejorar tu habilidad para teclear y ser más rápido?

Hoy les quiero platicar cómo recomendación, dos herramientas online y muy utilizadas para mejorar día a día, sobre todo que muchos otros desarrolladores han utilizado.

No les voy a dar un tutorial de uso, solo les platico en general sobre ellas, dentro de cada pagina de los creadores vienen recomendaciones de uso y tips.

Las dos paginas están en ingles.

Estas herramientas son zty.pe y keybr

...Y yo ¿Para qué quiero eso?

Bueno en lo personal es muy importante el mejorar dichas habilidades para ser mejores en nuestra área laboral y hasta para redactar un correo electrónico para una amistad, empresa o al realizar cualquier tipo de tarea, y nos volvemos más productivos. Hemos dejado aun lado dicha practica y nos volvemos unos salvajes al utilizar el teclado, en pocas palabras tenemos malas practicas.

Notaran la diferencia de velocidad con el tiempo (la practica hace al maestro)

Empezare hablando primero sobre ztype

Esta aplicación fue creada por typesy y se trata de un juego de naves en la cual van bajando palabras para escribir(en forma de naves y en ingles) y cuando vas escribiendo tu nave va disparando de forma automática y vas destruyendo a dichas naves enemigas cada que completas una palabra. Esta aplicación en verdad es muy divertida y curiosa, los gráficos se me hacen muy buenos y el sonido está excelente, puedes subir tus propias palabras y en cuestiones de estadísticas(por que es un juego, siempre busco ver mis números) si nos deja mucho que desear ya que no cuenta con sesión de usuario ni alguna tabla de puntajes multijugador, su medición es por medio del navegador y mientras tu caché se mantenga podrás ver tu seguimiento, es un punto muy malo pero en verdad sé que les va a gustar esta muy padre.

Keybr

Para mi es la herramienta mas formal que he conocido sobre mejorar estas habilidades, en esta te encuentras con un teclado y textos en ingles con palabras que llevan un seguimiento, te van poniendo textos que te ayudaran a mejorar esas teclas o áreas donde "flaqueas", tienen una buena guía para el uso de su herramienta, cuenta con sesión de usuario(aun tiene google+), llevas un seguimiento increíble de datos(muchos no les entiendo aún jeje) la mayoría se basa en tus fallas y aciertos.

Tiene muchas opciones de uso y configuraciones, puedes utilizar tus propios artículos, tiene multiplayer (es un juego de carrera de autos contra otros usuarios), pero la practica de teclado principal es muy buena en verdad sobre todo por el seguimiento que nos da.

Recuerda usar todos los dedos e ir dandole poco a poco, no importa que lento seas al principio, lo importante es aprender y poco a poco ir agarrando esa velocidad que la practica nos dará.

Visiten estas paginas, dediquen tiempo a la practica y cuenten que tal les va y si tiene alguna otra herramienta que conozcan pueden comentarme y veremos si hablamos de ella más adelante, espero les haya gustado esta pequeña aportación y nos vemos pronto.

Nota 1: Hay que tomar en cuenta que es una buena practica de tecleo y de ingles que es lo que también nos importa mejorar.

Nota 2: Es muy importante que busquen mejorar su ingles, que mas que recomendarles continuamente esto.

Hola Mundo! Ya estoy aquí...

Jonathan Blanco Hernandez — Tue, 05 Nov 2019 07:39:07 +0000

Bienvenida

Finalmente he decido empezar a escribir un blog algo personal. Orientado a dar a conocer un poco de la vida que llevo como desarrollador.

También para apoyar a la comunidad de desarrolladores que van comenzando en este camino tan amplio que es el desarrollo y lo complicado que puede llegar a ser.

Brindar mis pequeños conocimientos sobre las herramientas que uso día a día, así como los lenguajes que utilizo para trabajar.

Haré publicaciones en Español para los programadores que aun no cuentan con ingles avanzado.

Mi recomendación siempre será que lean y se apoyen en documentaciones y publicaciones en Ingles, van a aprender más!.

Dare tips, apoyos y tutoriales.

y antes que nada...

Nos presentamos.

Mi nombre es Jonathan Blanco Hernandez, en mi localidad me conocen como Barril o Barrilito, el por que, esta demás, quizá más adelante les cuento, es una bonita anécdota(eso creo).

Nací en Villa La Venta(Ahora ciudad), Huimanguillo, Tabasco, Mexico.

Ahora mismo radico en Tabasco El edén de Mexico.

Mis padres son originarios de Poza Rica, Veracruz. Ciudad que tiene mucho que no visito pero ha como la extraño.

Mi madre que la amo tanto!
Mi padre que ya se nos adelanto, carajo cuanto lo ame, lo amo y lo amare.

Tengo 3 hermanos, a los cuales adoro con todo mi corazón y si llegan a leer este post pues no esta demás que lo sepan y lo saben.

Tengo una familia hermosa, a mi esposa e hijo, a los que le dedico este primer post y sepan que son de gran inspiración para lo que se viene.

Me gusta trabajar pero también me gusta divertirme. Me gusta pasar tiempo con la familia. Soy muy relajado y me gusta reír mucho(suelo ser muy bromista).

Me gustan los deportes, adoro ver todo tipo de deporte(aunque yo no sea muy deportista). Puedo platicar de cualquier tipo de deporte(o casi cualquier), pero lo que mas me gusta es el Futbol Soccer y Futbol Americano.

Que hago por mi vida?

Bueno soy desarrollador web y móvil en KondoSoft <3, trabajo con ReactJS y React-Native. Tengo un basto conocimiento en Javascript por lo que me dedico en tiempo casi completo al desarrollo en este lenguaje de programación.

También he realizado trabajos con python, sobretodo con él framework Django, aunque últimamente React me ha absorbido mucho más.

Puedo decir que tengo experiencia en el uso de BD como Firebase y Postgres.

...y algo de experiencia en servicio (Sobre todo de google services) y servidores(AWS, Digital Ocean, Ubuntu Server).

KondoSoft?

Bueno es la empresa que me ha otorgado quizá todos los conocimientos actuales y es la casa que me abrió las puertas para llegar a ser lo que soy(Casi nada pero por algo se empieza).

Aquí lleve un programa de entrenamiento intensivo en el cual desarrolle muchas de mis habilidades. Programa que continua en funcionamiento y seguimos entrenando nuevos integrantes.

La verdad no quiero a largar la bienvenida, tengo tema personal para muchos post más, así que me guardare un poco sobre mí y poco a poco me irán conociendo.

Gracias por leerme y espero tener pronto feedback para poder mejorar y seguir creciendo en este mundo de "escribir publicaciones".

Y bueno pues nada, les dejo mis redes y a seguir codeando!.

Me encuentran en las redes como:

Twitter @BarrilitoDev
Facebook @BarrilitoDev
Instagram @barrildev
...proximamente Youtube