RutaDev

Configurar un dominio de NIC.ar con Cloudflare y GitHub Pages

2026-03-25T00:00:00Z

Si tienes un dominio registrado en NIC.ar y quieres usarlo para tu sitio en GitHub Pages, aquí te dejo los pasos clave para hacerlo sin complicaciones, usando Cloudflare como intermediario. Aunque el proceso es sencillo, no siempre hay información clara sobre cómo hacerlo específicamente con dominios argentinos.

Resumen del proceso

Compra el dominio en NIC.ar.
Delega los DNS a Cloudflare.
Configura los registros DNS en Cloudflare para apuntar a GitHub Pages.
Asocia el dominio en tu repositorio de GitHub.

Paso a paso

1. Agregar el dominio a Cloudflare:

Ingresa a tu cuenta de Cloudflare y haz clic en "Add site".
Escribe tu dominio (por ejemplo, tusitio.com.ar) y selecciona el plan gratuito.
Cloudflare te pedirá que elijas cómo importar los registros DNS. Selecciona la opción: "Introducir manualmente registros DNS".
Se abrirá una tabla para configurar los registros DNS. Aquí debes agregar los siguientes registros:

2. Configurar los registros DNS en Cloudflare

Registros para el dominio raíz (apuntan a GitHub Pages).

Agrega 4 registros de tipo A con las siguientes IP de GitHub:

Tipo	Nombre	IP
A	@	185.199.108.153
A	@	185.199.109.153
A	@	185.199.110.153
A	@	185.199.111.153

Registro para el subdominio www

Agrega 1 registro de tipo CNAME:

Tipo	Nombre	Valor
CNAME	www	`tuusuario.github.io`

Importante: En cada registro, verás un ícono de nube (☁️). Si está en naranja, significa que el proxy de Cloudflare está activado. Desactívalo (debe quedar en gris) para evitar problemas de configuración inicial. Se puede activar después de que los DNS se propaguen.

Guarda los cambios. Luego Cloudflare te proporcionará dos nameservers. Copia estos valores.

3. Delegar los DNS en NIC.ar
A. Inicia sesión en tu cuenta de NIC.ar.
B. Ve a la sección de gestión de tu dominio y busca la opción para cambiar los nameservers.
C. Pega los dos nameservers que copiaste de Cloudflare.
D. Guarda los cambios.

Nota: La propagación de los DNS puede tardar entre 30 minutos y 48 horas. Puedes verificar el estado de la propagación usando herramientas como DNS Checker

Pattern Matching en TypeScript - Explicado de manera sencilla

2025-04-21T00:00:00Z

ts-pattern es una librería de TypeScript para hacer pattern matching, una técnica que permite comparar estructuras de datos de manera elegante y segura. Facilita el manejo de datos complejos, eliminando muchos if y switch anidados.

Con ts-pattern puedes:

Escribir código más limpio y seguro.
Evitar errores al olvidarte de manejar un caso específico.
Tener mejor inferencia de tipos en TypeScript.

Instalación

Para usar ts-pattern, primero instálalo en tu proyecto:

npm install ts-pattern

También puedes usar yarn o pnpm:

yarn add ts-pattern

pnpm add ts-pattern

Ejemplo Básico: Reemplazando un switch

Supongamos que tenemos un estado en una aplicación:

type Estado = "cargando" | "exito" | "error";

const estado: Estado = "exito";

Con un switch tradicional:

switch (estado) {
  case "cargando":
    console.log("Cargando datos...");
    break;
  case "exito":
    console.log("¡Datos cargados con éxito!");
    break;
  case "error":
    console.log("Hubo un error 😢");
    break;
}

Con ts-pattern, el código es más limpio y seguro:

import { match } from "ts-pattern";

const mensaje = match(estado)
  .with("cargando", () => "Cargando datos...")
  .with("exito", () => "¡Datos cargados con éxito!")
  .with("error", () => "Hubo un error 😢")
  .exhaustive(); // Asegura que cubrimos todos los casos

console.log(mensaje);

¿Qué hace este código? match(estado) compara el valor de estado con diferentes patrones ("cargando", "exito", "error") y ejecuta la función correspondiente.

Ventaja: Si olvidamos manejar un caso, ts-pattern nos avisa en tiempo de compilación.

Ejemplo con Objetos: Manejo de Errores

Imagina que estás manejando respuestas de una API con diferentes formatos:

type Respuesta =
  | { tipo: "ok", data: string }
  | { tipo: "error", mensaje: string };

const respuesta: Respuesta = { tipo: "error", mensaje: "No encontrado" };

Con un if tradicional:

if (respuesta.tipo === "ok") {
  console.log(`Datos: ${respuesta.data}`);
} else {
  console.log(`Error: ${respuesta.mensaje}`);
}

Con ts-pattern, el código es más elegante:

const resultado = match(respuesta)
  .with({ tipo: "ok" }, (r) => `Datos: ${r.data}`)
  .with({ tipo: "error" }, (r) => `Error: ${r.mensaje}`)
  .exhaustive();

console.log(resultado);

¿Qué hace este código? Compara respuesta con los patrones { tipo: "ok" } y { tipo: "error" }. Accede a r.data o r.mensaje automáticamente sin necesidad de hacer un if.

Ventaja: TypeScript infiere el tipo correctamente sin necesidad de hacer as o comprobaciones manuales.

Uso con Expresiones Regulares o Rango de Valores

También puedes hacer matching con números, rangos o expresiones regulares. Por ejemplo, clasificamos edades:

const edad = 25;

const categoria = match(edad)
  .when(
    (e) => e < 18,
    () => "Menor de edad"
  )
  .when(
    (e) => e >= 18 && e < 65,
    () => "Adulto"
  )
  .when(
    (e) => e >= 65,
    () => "Tercera edad"
  )
  .otherwise(() => "Desconocido");

console.log(categoria); // "Adulto"

¿Qué hace este código? Usa .when() para definir condiciones personalizadas. Usa .otherwise() como caso por defecto.

Ventaja: Es más declarativo que usar múltiples if.

Tipar `match`

Se puede tipar de forma segura gracias a TypeScript. Normalmente, TypeScript infiere los tipos automáticamente, pero si queremos asegurarnos de que solo acepte ciertos valores, podemos hacerlo manualmente.

Hay dos formas principales de tiparlo:

Tipado automático (sin definir el tipo) Cuando pasamos un valor a match, TypeScript ya infiere el tipo:

import { match } from "ts-pattern";

const estado = "cargando" as "cargando" | "exito" | "error";

const mensaje = match(estado)
  .with("cargando", () => "Cargando datos...")
  .with("exito", () => "¡Datos cargados con éxito!")
  .with("error", () => "Hubo un error 😢")
  .exhaustive();

console.log(mensaje);

¿Qué pasa aquí? Como estado está tipado como "cargando" | "exito" | "error", TypeScript ya valida que match solo acepte esos valores. Si olvidamos un caso, TypeScript dará error con .exhaustive(). Ventaja: No necesitamos definir el tipo manualmente.

Tipado explícito (definiendo el tipo) Si queremos ser más estrictos, podemos tipar manualmente match con match<Tipo>():

type Estado = "cargando" | "exito" | "error";

const estado: Estado = "exito";

const mensaje = match<Estado>(estado) // Aquí forzamos el tipo
  .with("cargando", () => "Cargando datos...")
  .with("exito", () => "¡Datos cargados con éxito!")
  .with("error", () => "Hubo un error 😢")
  .exhaustive();

console.log(mensaje);

Ventaja: Si estado no tiene el tipo correcto, TypeScript mostrará error.

Extra: Tipado en Objetos Cuando usamos objetos, también podemos tipar match para asegurar que todas las propiedades sean correctas.

Ejemplo con un objeto Respuesta:

type Respuesta =
  | { tipo: "ok"; data: string }
  | { tipo: "error"; mensaje: string };

const respuesta: Respuesta = { tipo: "ok", data: "Hola" };

const resultado = match<Respuesta>(respuesta) // Tipamos aquí
  .with({ tipo: "ok" }, (r) => `Datos: ${r.data}`)
  .with({ tipo: "error" }, (r) => `Error: ${r.mensaje}`)
  .exhaustive();

console.log(resultado);

Ventaja

TypeScript detecta automáticamente si olvidamos manejar un tipo de Respuesta.
r dentro de cada .with() ya tiene el tipo correcto (r.data o r.mensaje).

¿Necesito tipar `match`?

No siempre. TypeScript ya infiere los tipos en la mayoría de los casos.
Si queremos asegurarnos, podemos usar match<Tipo>().
Lo mejor: .exhaustive() siempre verifica que no falte ningún caso.

Gestionar configuraciones de Git para múltiples servicios (GIT)

2025-01-07T00:00:00Z

Este blog nació de mi necesidad de organizar las configuraciones de los servicios de control de versiones que utilizo:

GitLab para el trabajo,
GitHub para proyectos personales que quiero compartir,
Gogs (inicialmente como prueba, pero terminó siendo mi espacio para guardar configuraciones y backups privados junto a un familiar).

Separar cada servicio es clave para evitar confusiones y errores al realizar modificaciones.

1. Un solo servicio

Si solo usas un servicio, configura tus credenciales globales:

git config --global user.name "Tu Nombre"
git config --global user.email "tu.email@ejemplo.com"

Estos valores se aplicarán a todos los repositorios.

2. Múltiples servicios

Opción 1: Configuración por repositorio

Para cada repositorio, establece credenciales específicas:

cd /ruta/a/tu/repositorio
git config user.name "Tu Nombre para Gogs"
git config user.email "tu.email@gogs.com"

Configura el remoto correctamente:

git remote add origin https://gogs.ejemplo.com/usuario/repositorio.git
# o para GitHub/GitLab:
git remote add origin https://github.com/usuario/repositorio.git

Opción 2: Uso de SSH (recomendado)

Genera claves SSH (si no las tienes):

ssh-keygen -t rsa -b 4096 -C "tu.email@ejemplo.com"

Agrega las claves al agente SSH:

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_rsa_gogs
ssh-add ~/.ssh/id_rsa_github
ssh-add ~/.ssh/id_rsa_gitlab

Configura ~/.ssh/config:

# Gogs
Host gogs
    HostName gogs.ejemplo.com
    User git
    IdentityFile ~/.ssh/id_rsa_gogs

# GitHub
Host github
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa_github

# GitLab
Host gitlab
    HostName gitlab.com
    User git
    IdentityFile ~/.ssh/id_rsa_gitlab

Usa URLs SSH para los remotos:

git remote add origin gogs:usuario/repositorio.git
git remote add origin github:usuario/repositorio.git
git remote add origin gitlab:usuario/repositorio.git

Bonus: Credenciales temporales

Si necesitas colaborar en un repositorio ajeno sin modificar tu configuración global, usa la URL con credenciales:

git remote set-url origin https://username:token@github.com/usuario/repositorio.git

(Reemplaza token por un Personal Access Token con permisos de repo)

Nota: Verifica siempre el directorio y la configuración antes de ejecutar comandos.

Desarrollo local de módulos Node.js con npm link

2024-06-23T00:00:00Z

En el trabajo, manejamos un módulo de nuestra aplicación como un paquete independiente. Antes, para probar cambios, seguía estos pasos:

Modificaba el código en el repositorio del paquete.
Publicaba una nueva versión.
Actualizaba la dependencia en la aplicación principal.
Verificaba que todo funcionara.

Para cambios pequeños, a veces editaba directamente el código en node_modules y luego copiaba los cambios al repositorio del paquete. Sin embargo, existe una forma más eficiente: npm link.

¿Por qué usar `npm link`?

Permite probar cambios en tiempo real en la aplicación principal sin necesidad de publicar nuevas versiones del paquete.

Uso básico

Crea un enlace simbólico global para el módulo:

cd path/to/your/module
npm link  # Crea un enlace simbólico global

Vincula el módulo a tu proyecto:

cd path/to/your/project
npm link <module_name>  # Usa el módulo vinculado

Escenarios avanzados

Múltiples módulos locales

Si trabajas con módulos interdependientes (ej: module-a y module-b, donde module-b depende de module-a):

cd path/to/module-a
npm link  # Registra module-a globalmente

cd ../module-b
npm link  # Registra module-b globalmente
npm link module-a  # Vincula module-b con module-a

Esto permite desarrollar y probar módulos interdependientes en tiempo real.

Gestionar dependencias entre módulos vinculados

Para asegurar que todos los módulos usen las últimas versiones:

Ejecuta npm update en cada módulo.
Re-ejecuta npm link después de actualizar para sincronizar los cambios.

Alternativas a `npm link`

Herramienta	Descripción	Ventajas	Desventajas
npm link	Crea enlaces simbólicos para desarrollo local.	Ideal para pruebas en tiempo real.	Solo funciona localmente.
npm pack	Genera un archivo `.tgz` del módulo para instalarlo manualmente.	Simula una instalación real.	Requiere reinstalar el paquete manualmente.
yarn link	Similar a `npm link`, pero para Yarn.	Integración con Yarn.	Limitado a Yarn.
Lerna	Herramienta para gestionar monorepos con múltiples paquetes interdependientes.	Optimizado para monorepos.	Curva de aprendizaje.

Enlaces útiles: Medium | ioflood

Cómo integrar Pico.css en un proyecto de Nuxt 3

2024-02-26T00:00:00Z

Introducción

En este artículo, explico cómo agregar Pico.css a un proyecto de Nuxt 3. Tras buscar sin éxito una guía clara, decidí documentar mi solución por si es útil para otros. El proceso es sencillo y rápido.

Nota: Asumo que ya tienes un proyecto de Nuxt 3 creado. Si no, sigue la documentación oficial y ejecuta:
npx nuxi@latest init <project-name>
(Requiere Node.js v18.0.0 o superior)

1. Instalar Pico.css

A. Visita la página oficial de Pico.css y dirígete a la sección "Getting Started". B. Elige el comando de instalación según tu gestor de paquetes (npm, yarn, pnpm). Por ejemplo:

npm install @picocss/pico

C. Verifica la instalación en tu package.json:

{
  "dependencies": {
    "@picocss/pico": "^2.0.3"
  }
}

2. Configurar Pico.css en Nuxt 3

A. Crea un archivo CSS: Dentro de la raíz del proyecto, crea la siguiente estructura:

assets/css/app.css

B. Importa Pico.css: Abre app.css y agrega el siguiente código para importar el archivo CSS desde node_modules:

@import url("@picocss/pico/css/pico.css");

C. Inicia el proyecto: Ejecuta el servidor de desarrollo (ejemplo con pnpm):

pnpm run dev

Pico.css ya estará aplicado a tu proyecto.

Resultado

Al iniciar la aplicación, verás los estilos de Pico.css aplicados automáticamente:

Conclusión: Con estos pasos, tendrás Pico.css integrado en tu proyecto de Nuxt 3 de manera rápida y sin complicaciones. ¡Espero que te sea útil!