IA al Código Artículos sobre IA, desarrollo web y herramientas para desarrolladores https://francobosg.netlify.app/blog/ es Wed, 29 Apr 2026 00:00:00 GMT 1440 https://francobosg.netlify.app/favicon/android-chrome-512x512.png IA al Código https://francobosg.netlify.app/blog/ contacto@francobosg.netlify.app (Fran Cobos) <![CDATA[Crear un Bot de Telegram con IA en Node.js (Tutorial Completo 2026)]]> https://francobosg.netlify.app/blog/bot-telegram-ia-nodejs-2026/ Wed, 29 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/bot-telegram-ia-nodejs-2026/ Telegram Bot IA Node.js Tutorial } historial * @returns {Promise} */ export async function preguntarIA(historial) { const mensajes = [ { role: 'system', content: SISTEMA_PROMPT }, ...historial ] const respuesta = await openai.chat.completions.create({ model: 'gpt-4o-mini', // barato y rápido messages: mensajes, max_tokens: parseInt(process.env.MAX_TOKENS_RESPUESTA || '500'), temperature: 0.7, }) return respuesta.choices[0].message.content } ``` Si prefieres usar Claude (Anthropic): ```javascript // src/ai.js (versión Claude) import Anthropic from '@anthropic-ai/sdk' const client = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY }) export async function preguntarIA(historial) { const mensajes = historial.map(m => ({ role: m.role === 'user' ? 'user' : 'assistant', content: m.content })) const respuesta = await client.messages.create({ model: 'claude-haiku-4-5', // el más barato de Claude max_tokens: parseInt(process.env.MAX_TOKENS_RESPUESTA || '500'), system: SISTEMA_PROMPT, messages: mensajes, }) return respuesta.content[0].text } ``` O DeepSeek (compatible con la API de OpenAI): ```javascript // src/ai.js (versión DeepSeek — más barata) import OpenAI from 'openai' const openai = new OpenAI({ apiKey: process.env.DEEPSEEK_API_KEY, baseURL: 'https://api.deepseek.com' }) export async function preguntarIA(historial) { const mensajes = [ { role: 'system', content: SISTEMA_PROMPT }, ...historial ] const respuesta = await openai.chat.completions.create({ model: 'deepseek-chat', messages: mensajes, max_tokens: 500, }) return respuesta.choices[0].message.content } ``` --- ## Paso 4: La memoria de conversación ```javascript // src/memoria.js // Almacena el historial por usuario en memoria RAM // Se pierde al reiniciar, pero es suficiente para empezar const historiales = new Map() const MAX_MENSAJES = 20 // Mantener solo los últimos 20 mensajes por usuario /** * Obtiene el historial de un usuario * @param {number} userId * @returns {Array<{role: string, content: string}>} */ export function obtenerHistorial(userId) { if (!historiales.has(userId)) { historiales.set(userId, []) } return historiales.get(userId) } /** * Añade un mensaje al historial * @param {number} userId * @param {'user' | 'assistant'} rol * @param {string} contenido */ export function añadirMensaje(userId, rol, contenido) { const historial = obtenerHistorial(userId) historial.push({ role: rol, content: contenido }) // Mantener solo los últimos N mensajes (ventana deslizante) if (historial.length > MAX_MENSAJES) { historial.splice(0, historial.length - MAX_MENSAJES) } } /** * Limpia el historial de un usuario * @param {number} userId */ export function limpiarHistorial(userId) { historiales.set(userId, []) } /** * Cuenta los mensajes del usuario en las últimas 24h * Para limitar uso — versión simple en memoria */ const contadoresDiarios = new Map() export function puedeEnviarMensaje(userId) { const max = parseInt(process.env.MAX_MENSAJES_POR_USUARIO || '50') const ahora = Date.now() const dia = 24 * 60 * 60 * 1000 if (!contadoresDiarios.has(userId)) { contadoresDiarios.set(userId, { count: 0, resetAt: ahora + dia }) } const contador = contadoresDiarios.get(userId) // Resetear si pasó un día if (ahora > contador.resetAt) { contador.count = 0 contador.resetAt = ahora + dia } if (contador.count >= max) return false contador.count++ return true } ``` --- ## Paso 5: El bot principal ```javascript // src/bot.js import 'dotenv/config' import { Bot } from 'grammy' import { preguntarIA } from './ai.js' import { obtenerHistorial, añadirMensaje, limpiarHistorial, puedeEnviarMensaje } from './memoria.js' const bot = new Bot(process.env.TELEGRAM_TOKEN) // /start — Mensaje de bienvenida bot.command('start', async (ctx) => { const nombre = ctx.from?.first_name || 'amigo' await ctx.reply( `¡Hola, ${nombre}! 👋\n\n` + `Soy un asistente con IA. Escríbeme cualquier cosa y te respondo.\n\n` + `Comandos disponibles:\n` + `/clear — Borrar historial de conversación\n` + `/help — Ver esta ayuda` ) }) // /help — Ayuda bot.command('help', async (ctx) => { await ctx.reply( `*Cómo usarme:*\n\n` + `Escríbeme cualquier mensaje y te respondo con IA.\n` + `Recuerdo el contexto de nuestra conversación.\n\n` + `*Comandos:*\n` + `/clear — Borra nuestra conversación y empezamos de cero\n` + `/start — Mensaje de bienvenida`, { parse_mode: 'Markdown' } ) }) // /clear — Limpiar historial bot.command('clear', async (ctx) => { limpiarHistorial(ctx.from.id) await ctx.reply('Historial borrado. ¡Empecemos de cero! 🧹') }) // Mensajes de texto — la lógica principal bot.on('message:text', async (ctx) => { const userId = ctx.from.id const textoUsuario = ctx.message.text // Ignorar comandos que no manejamos if (textoUsuario.startsWith('/')) return // Verificar límite de mensajes if (!puedeEnviarMensaje(userId)) { await ctx.reply( '⚠️ Has alcanzado el límite diario de mensajes. Vuelve mañana.' ) return } // Mostrar "escribiendo..." mientras procesa await ctx.replyWithChatAction('typing') try { // Añadir mensaje del usuario al historial añadirMensaje(userId, 'user', textoUsuario) // Obtener historial completo y preguntar a la IA const historial = obtenerHistorial(userId) const respuesta = await preguntarIA(historial) // Guardar respuesta en historial añadirMensaje(userId, 'assistant', respuesta) // Enviar respuesta await ctx.reply(respuesta, { parse_mode: 'Markdown' }) } catch (error) { console.error('Error al llamar a la IA:', error) // Quitar el último mensaje del historial si falló const historial = obtenerHistorial(userId) historial.pop() await ctx.reply( '❌ Hubo un error al procesar tu mensaje. Inténtalo de nuevo.' ) } }) // Manejar errores del bot bot.catch((err) => { console.error('Error en el bot:', err) }) // Arrancar el bot bot.start() console.log('🤖 Bot iniciado correctamente') ``` Añade el `type: module` al `package.json`: ```json { "name": "telegram-bot-ia", "version": "1.0.0", "type": "module", "scripts": { "start": "node src/bot.js", "dev": "node --watch src/bot.js" }, "dependencies": { "dotenv": "^16.0.0", "grammy": "^1.30.0", "openai": "^4.0.0" } } ``` --- ## Paso 6: Probarlo localmente ```bash node src/bot.js # 🤖 Bot iniciado correctamente ``` Abre Telegram, busca tu bot por el username y escríbele. Debería responder con IA. --- ## Paso 7: Añadir funcionalidades extra ### Comandos personalizados ```javascript // Añade esto en bot.js — ejemplo: /resume que resume texto bot.command('resume', async (ctx) => { const texto = ctx.message.text.replace('/resume', '').trim() if (!texto) { await ctx.reply('Uso: /resume [texto a resumir]') return } await ctx.replyWithChatAction('typing') // Usar la IA con un prompt específico (sin historial) const respuesta = await preguntarIA([ { role: 'user', content: `Resume esto en 3 puntos clave: ${texto}` } ]) await ctx.reply(`📝 *Resumen:*\n\n${respuesta}`, { parse_mode: 'Markdown' }) }) ``` ### Responder a imágenes (Vision) ```javascript bot.on('message:photo', async (ctx) => { await ctx.replyWithChatAction('typing') // Obtener la foto en mayor resolución const foto = ctx.message.photo.at(-1) const file = await ctx.api.getFile(foto.file_id) const fotoUrl = `https://api.telegram.org/file/bot${process.env.TELEGRAM_TOKEN}/${file.file_path}` const caption = ctx.message.caption || '¿Qué hay en esta imagen?' const respuesta = await openai.chat.completions.create({ model: 'gpt-4o-mini', messages: [{ role: 'user', content: [ { type: 'text', text: caption }, { type: 'image_url', image_url: { url: fotoUrl } } ] }], max_tokens: 500 }) await ctx.reply(respuesta.choices[0].message.content) }) ``` --- ## Paso 8: Deploy gratuito en Railway 1. Sube el código a GitHub (sin el `.env`) 2. Ve a [railway.app](https://railway.app) y crea una cuenta 3. Crea un nuevo proyecto → "Deploy from GitHub repo" 4. Selecciona tu repositorio 5. En **Variables**, añade: - `TELEGRAM_TOKEN` = tu token - `OPENAI_API_KEY` = tu API key 6. Railway detecta automáticamente Node.js y ejecuta `npm start` Tu bot estará online 24/7 de forma gratuita (Railway da $5/mes gratis, suficiente para un bot pequeño). Alternativas gratuitas: - **Render**: plan gratuito, se duerme tras 15min de inactividad (el bot no nota esto porque usa polling) - **Fly.io**: 3 máquinas gratuitas para siempre - **Hetzner VPS**: €4/mes, total control, no hay gratis pero es lo más barato de pago --- ## Resumen del código final ``` telegram-bot-ia/ ├── src/ │ ├── bot.js ← Lógica del bot y comandos │ ├── ai.js ← Llamadas a OpenAI/Claude/DeepSeek │ └── memoria.js ← Historial por usuario + límites ├── .env ← Secrets (no subir a git) ├── .env.example ← Template para el repo ├── .gitignore └── package.json ``` Con menos de 200 líneas de código tienes un bot de Telegram con IA, memoria de conversación y límites de uso. A partir de aquí puedes añadir: - Base de datos con SQLite para persistir el historial - Pagos con Stripe para cobrar por el acceso - Webhooks en vez de polling para mayor eficiencia - Comandos adicionales según tu caso de uso El código completo está pensado para ser el punto de partida, no el destino final.]]> <![CDATA[Next.js 15: Todas las Novedades que Cambian tu Forma de Programar]]> https://francobosg.netlify.app/blog/nextjs-15-novedades-guia-completa-2026/ Wed, 29 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/nextjs-15-novedades-guia-completa-2026/ Next.js React Frontend Tutorial ` component nativo --- ## 1. El caché ya no está activo por defecto Este es el cambio que más confunde a la gente que migra desde v14. ### ¿Cómo era en v14? ```typescript // Next.js 14 — esto se CACHEABA por defecto (force-cache) const res = await fetch('https://api.example.com/productos') const data = await res.json() // ⚠️ Solo hacía la petición UNA VEZ y devolvía el resultado cacheado el resto ``` ### ¿Cómo es en v15? ```typescript // Next.js 15 — NO se cachea por defecto (no-store) const res = await fetch('https://api.example.com/productos') const data = await res.json() // ✅ Hace la petición CADA VEZ que se renderiza el componente ``` Ahora el comportamiento por defecto es el que esperas de cualquier `fetch` normal. **Si quieres caché, tienes que pedirla explícitamente:** ```typescript // Caché estático: igual que v14 por defecto const res = await fetch('https://api.example.com/productos', { cache: 'force-cache' }) // Revalidar cada hora const res = await fetch('https://api.example.com/productos', { next: { revalidate: 3600 } }) // Sin caché (ahora el default) const res = await fetch('https://api.example.com/productos', { cache: 'no-store' }) ``` ### Route Handlers también cambian ```typescript // v14 — GET Route Handler se CACHEABA // v15 — GET Route Handler NO se cachea por defecto // app/api/productos/route.ts export async function GET() { const productos = await db.query('SELECT * FROM productos') return Response.json(productos) // En v15: siempre fresh. En v14: podía quedar stale. } // Para recuperar el comportamiento de v14 en v15: export const dynamic = 'force-static' export async function GET() { ... } ``` ### Client Router Cache ```typescript // v14 — los layouts se cacheaban 5 minutos en el cliente // v15 — el Client Router Cache no cachea por defecto // Recuperar comportamiento v14 en next.config.ts: const config = { experimental: { staleTimes: { dynamic: 30, // segundos static: 180, } } } ``` --- ## 2. React 19 — Las novedades que más usarás ### El hook `use()` — leer Promises y Context ```tsx // Antes (React 18) — suspense con async component async function Productos() { const productos = await fetchProductos() // Solo funciona en Server Components return } // React 19 — use() funciona en Client Components también import { use } from 'react' function Productos({ productosPromise }: { productosPromise: Promise }) { const productos = use(productosPromise) // Suspende automáticamente return } // Uso: const promesa = fetchProductos() }> ``` También funciona con Context (reemplaza `useContext`): ```tsx const tema = use(TemaContext) // equivalente a useContext(TemaContext) pero más flexible ``` ### Server Actions mejorados con `useActionState` ```tsx // React 19 + Next.js 15 import { useActionState } from 'react' async function crearProducto(estado: Estado, formData: FormData) { 'use server' const nombre = formData.get('nombre') as string try { await db.insert({ nombre }) return { exito: true, mensaje: 'Producto creado' } } catch (e) { return { exito: false, error: 'Error al crear' } } } function FormularioProducto() { const [estado, accion, isPending] = useActionState(crearProducto, null) return (
{estado?.error &&

{estado.error}

} {estado?.exito &&

{estado.mensaje}

}
) } ``` ### `useOptimistic` — updates optimistas limpios ```tsx import { useOptimistic } from 'react' function ListaTareas({ tareas }: { tareas: Tarea[] }) { const [tareasOptimistas, addTareaOptimista] = useOptimistic( tareas, (estado, nuevaTarea: Tarea) => [...estado, nuevaTarea] ) async function añadirTarea(formData: FormData) { const texto = formData.get('texto') as string const tareaTemp = { id: Date.now(), texto, completada: false } addTareaOptimista(tareaTemp) // UI actualiza inmediatamente await crearTarea(texto) // Luego hace la llamada real } return (
{tareasOptimistas.map(t => )}
) } ``` --- ## 3. Turbopack estable en desarrollo ```bash # Next.js 15 — activar Turbopack en desarrollo next dev --turbopack ``` O en `package.json`: ```json { "scripts": { "dev": "next dev --turbopack" } } ``` Los números que publica Vercel en proyectos grandes: - **Arranque inicial del servidor**: 76% más rápido - **Hot Module Replacement (HMR)**: hasta 96% más rápido - **Compilación de rutas**: significativamente más rápido Para proyectos medianos/grandes, el cambio en experiencia de desarrollo es muy notable. Para proyectos pequeños la diferencia es menos perceptible. **Compatibilidad:** La mayoría de loaders de webpack tienen equivalente en Turbopack, pero algunos plugins personalizados aún no son compatibles. Revisa tu `next.config.ts` antes de activarlo. --- ## 4. `after()` — Código después de la respuesta Una función muy útil que no existía antes de forma oficial: ```typescript import { after } from 'next/server' export async function GET() { const datos = await fetchDatos() // Envía la respuesta al usuario const respuesta = Response.json(datos) // Este código se ejecuta DESPUÉS de enviar la respuesta // El usuario ya tiene su respuesta, no espera esto after(async () => { await analytics.track('api_called') await cache.actualizar('datos') await logger.guardar({ timestamp: new Date(), ruta: '/api/datos' }) }) return respuesta } ``` Perfecto para: - Analytics y logging sin penalizar la latencia - Invalidar cachés - Enviar notificaciones - Tareas de mantenimiento Funciona en Route Handlers, Server Components y Server Actions. --- ## 5. `forbidden()` y `unauthorized()` — Errores 401/403 nativos ```typescript import { forbidden, unauthorized } from 'next/navigation' // En un Server Component o Route Handler export default async function PaginaAdmin() { const sesion = await getSession() if (!sesion) { unauthorized() // Lanza un 401, renderiza unauthorized.tsx } if (sesion.rol !== 'admin') { forbidden() // Lanza un 403, renderiza forbidden.tsx } return } ``` Crea los archivos de error en `app/`: ``` app/ unauthorized.tsx ← se renderiza con 401 forbidden.tsx ← se renderiza con 403 not-found.tsx ← 404 (existía antes) ``` ```tsx // app/unauthorized.tsx export default function NoAutorizado() { return (

Inicia sesión para continuar

Iniciar sesión
) } ``` --- ## 6. El componente `
` de Next.js Next.js 15 añade un componente `` que extiende el `` de HTML: ```tsx import Form from 'next/form' function BuscadorProductos() { return (
) } ``` Lo que hace diferente: - **Prefetch automático** de la página `/buscar` cuando el formulario es visible - **Navegación del lado cliente** (sin recarga) usando el App Router - **Loading UI** automático (usa `loading.tsx`) - **URL actualizada** con los params del form para poder compartir el resultado --- ## Cómo migrar de Next.js 14 a 15 ### Usa el codemod automático ```bash npx @next/codemod@canary upgrade latest ``` Esto actualiza las dependencias y aplica los cambios de API automáticamente. ### Cambios manuales que el codemod no hace **1. Revisar los fetch con caché implícita:** ```bash # Busca en tu proyecto todos los fetch sin cache explícito grep -rn "await fetch(" src/ --include="*.tsx" --include="*.ts" ``` Para cada fetch en un Server Component, decide si quieres caché o no y añádelo explícitamente. **2. `cookies()`, `headers()`, `params` ahora son async:** ```typescript // v14 import { cookies } from 'next/headers' const cookieStore = cookies() const token = cookieStore.get('token') // v15 import { cookies } from 'next/headers' const cookieStore = await cookies() // ← await obligatorio const token = cookieStore.get('token') ``` El codemod lo migra automáticamente, pero si tienes abstracciones propias encima, revísalas. **3. `params` en Page components ahora es una Promise:** ```typescript // v14 export default function Pagina({ params }: { params: { slug: string } }) { const { slug } = params } // v15 export default async function Pagina({ params }: { params: Promise<{ slug: string }> }) { const { slug } = await params // ← await } ``` --- ## Resumen de lo que afecta a tu código del día a día | Feature | Impacto en migración | Lo que tienes que hacer | |---|---|---| | Caché desactivado | **Alto** | Revisar todos los fetch y añadir `cache` explícito | | `cookies()` async | **Alto** | El codemod lo migra, revisar abstracciones | | `params` async | **Medio** | El codemod lo migra | | React 19 | **Bajo** | Sin cambios breaking para la mayoría | | Turbopack | **Bajo** | Opt-in, añadir `--turbopack` en dev | | `after()` | **Ninguno** | Nueva API, úsala cuando quieras | | `forbidden()`/`unauthorized()` | **Ninguno** | Reemplaza tu manejo manual de errores | Para proyectos nuevos, Next.js 15 con React 19 es la combinación a usar en 2026. Para migrar proyectos existentes: ejecuta el codemod, revisa los fetch y reserva 2-4 horas para los casos edge.]]> <![CDATA[Python para Desarrolladores JavaScript: Guía Definitiva 2026]]> https://francobosg.netlify.app/blog/python-para-javascript-developers-2026/ Wed, 29 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/python-para-javascript-developers-2026/ Python JavaScript Tutorial Backend = 18) { console.log("Mayor de edad") } else if (edad >= 16) { console.log("Casi") } else { console.log("Menor") } // Ternario const estado = edad >= 18 ? "adulto" : "menor" ``` ```python # Python if edad >= 18: print("Mayor de edad") elif edad >= 16: print("Casi") else: print("Menor") # Ternario estado = "adulto" if edad >= 18 else "menor" ``` - `else if` → `elif` - Sin llaves, con `:` al final y sangría - El ternario Python es al revés: `valor_si_true if condicion else valor_si_false` ### Bucles ```javascript // JavaScript for (let i = 0; i < 5; i++) { console.log(i) } // forEach const nums = [1, 2, 3, 4, 5] nums.forEach(n => console.log(n)) // for...of for (const n of nums) { console.log(n) } // while let i = 0 while (i < 5) { console.log(i) i++ } ``` ```python # Python for i in range(5): print(i) # Iterar lista (equivale a for...of) nums = [1, 2, 3, 4, 5] for n in nums: print(n) # enumerate si necesitas el índice for i, n in enumerate(nums): print(f"{i}: {n}") # while i = 0 while i < 5: print(i) i += 1 ``` Python no tiene `for` de 3 partes. Usa `range(n)` para contar, `for x in lista` para iterar. ## Arrays → Listas. Objetos → Diccionarios ### Arrays / Listas ```javascript // JavaScript const frutas = ["manzana", "pera", "uva"] frutas.push("naranja") frutas.pop() const primera = frutas[0] const longitud = frutas.length const sinPrimera = frutas.slice(1) // map, filter, reduce const mayus = frutas.map(f => f.toUpperCase()) const largas = frutas.filter(f => f.length > 4) const total = [1, 2, 3].reduce((acc, n) => acc + n, 0) ``` ```python # Python frutas = ["manzana", "pera", "uva"] frutas.append("naranja") # push → append frutas.pop() # igual primera = frutas[0] longitud = len(frutas) # .length → len() sin_primera = frutas[1:] # slicing nativo # List comprehensions (más idiomático que map/filter) mayus = [f.upper() for f in frutas] largas = [f for f in frutas if len(f) > 4] total = sum([1, 2, 3]) # reduce para sumas → sum() # map y filter existen pero se usan menos mayus2 = list(map(lambda f: f.upper(), frutas)) largas2 = list(filter(lambda f: len(f) > 4, frutas)) ``` Las **list comprehensions** son la forma más pythonica de hacer map/filter. Apréndetelas: ```python # [expresion for variable in iterable if condicion] cuadrados_pares = [x**2 for x in range(10) if x % 2 == 0] # → [0, 4, 16, 36, 64] ``` ### Objetos / Diccionarios ```javascript // JavaScript const usuario = { nombre: "Ana", edad: 28, activo: true } // Acceso console.log(usuario.nombre) console.log(usuario["nombre"]) // Destructuring const { nombre, edad } = usuario // Spread const nuevo = { ...usuario, rol: "admin" } // Verificar si existe una key if ("nombre" in usuario) { ... } if (usuario.hasOwnProperty("nombre")) { ... } ``` ```python # Python usuario = { "nombre": "Ana", "edad": 28, "activo": True } # Acceso print(usuario["nombre"]) # siempre con corchetes print(usuario.get("nombre")) # sin KeyError si no existe # "Destructuring" — no existe igual, pero hay desempaquetado nombre, edad = usuario["nombre"], usuario["edad"] # Merge (Python 3.9+) nuevo = {**usuario, "rol": "admin"} # Verificar si existe una key if "nombre" in usuario: ... ``` En Python las keys de los dicts van siempre con comillas. No hay notación de punto para acceder a valores (eso es para atributos de clases/objetos). ## Funciones ```javascript // JavaScript function sumar(a, b) { return a + b } // Arrow function const multiplicar = (a, b) => a * b // Default params function saludar(nombre = "Mundo") { return `Hola, ${nombre}!` } // Rest params function suma(...nums) { return nums.reduce((a, b) => a + b, 0) } // Objeto como parámetro (named params) function crear({ nombre, edad = 25 }) { return { nombre, edad } } ``` ```python # Python def sumar(a, b): return a + b # Lambda (como arrow function simple) multiplicar = lambda a, b: a * b # Default params def saludar(nombre="Mundo"): return f"Hola, {nombre}!" # Args variables (*args equivale a rest) def suma(*nums): return sum(nums) # Keyword arguments (named params) def crear(nombre, edad=25): return {"nombre": nombre, "edad": edad} crear(nombre="Ana", edad=30) # llamada con kwargs ``` ## Clases ```javascript // JavaScript class Persona { constructor(nombre, edad) { this.nombre = nombre this.edad = edad } saludar() { return `Hola, soy ${this.nombre}` } static crear(nombre, edad) { return new Persona(nombre, edad) } } class Empleado extends Persona { constructor(nombre, edad, empresa) { super(nombre, edad) this.empresa = empresa } } ``` ```python # Python class Persona: def __init__(self, nombre: str, edad: int): self.nombre = nombre self.edad = edad def saludar(self) -> str: return f"Hola, soy {self.nombre}" @staticmethod def crear(nombre: str, edad: int) -> "Persona": return Persona(nombre, edad) class Empleado(Persona): def __init__(self, nombre: str, edad: int, empresa: str): super().__init__(nombre, edad) self.empresa = empresa ``` - `constructor` → `__init__` - `this.` → `self.` (y `self` va siempre como primer parámetro) - `extends` → el nombre de la clase entre paréntesis - `static` → decorador `@staticmethod` ## Async/Await En JavaScript, async/await es para Promises. En Python es para corrutinas. La sintaxis es **casi idéntica**: ```javascript // JavaScript async function obtenerUsuario(id) { try { const response = await fetch(`/api/users/${id}`) const data = await response.json() return data } catch (error) { console.error("Error:", error) throw error } } // Promise.all const [user, posts] = await Promise.all([ obtenerUsuario(1), obtenerPosts(1) ]) ``` ```python # Python (con httpx o aiohttp en vez de fetch) import httpx async def obtener_usuario(id: int): try: async with httpx.AsyncClient() as client: response = await client.get(f"/api/users/{id}") data = response.json() return data except Exception as error: print(f"Error: {error}") raise # asyncio.gather equivale a Promise.all import asyncio user, posts = await asyncio.gather( obtener_usuario(1), obtener_posts(1) ) ``` Para ejecutar código async en Python necesitas `asyncio.run()` o un framework async (FastAPI, Starlette): ```python import asyncio async def main(): resultado = await obtener_usuario(1) print(resultado) asyncio.run(main()) ``` ## Módulos ```javascript // JavaScript (ES Modules) // math.js export const PI = 3.14159 export function sumar(a, b) { return a + b } export default function multiplicar(a, b) { return a * b } // main.js import multiplicar, { PI, sumar } from './math.js' import * as math from './math.js' ``` ```python # Python # math_utils.py PI = 3.14159 def sumar(a, b): return a + b def multiplicar(a, b): return a * b # main.py from math_utils import PI, sumar, multiplicar import math_utils # como import * as from math_utils import multiplicar as mult # alias ``` En Python **no hay `export`**. Todo lo definido en un módulo es importable por defecto. ## Gestión de paquetes: npm → pip + venv ```bash # JavaScript npm init npm install express npm install -D eslint cat package.json # Python equivalente python -m venv venv # crear entorno virtual (como node_modules aislado) venv\Scripts\activate # Windows source venv/bin/activate # Mac/Linux pip install fastapi pip install --dev ruff # no hay -D exacto, usar grupos en pyproject.toml cat requirements.txt # o pyproject.toml ``` **Importante:** Siempre usa `venv` (entorno virtual). Es el equivalente a `node_modules` pero tienes que activarlo manualmente. Sin él, instalas paquetes globalmente (malo). ```bash # Guardar dependencias (como package.json) pip freeze > requirements.txt # Instalar desde requirements.txt (como npm install) pip install -r requirements.txt ``` Para proyectos modernos, usa **`uv`** en vez de pip — es el equivalente a npm para Python, mucho más rápido: ```bash pip install uv uv init mi-proyecto uv add fastapi httpx uv run python main.py ``` ## El ecosistema Python para devs JS | Necesidad | JavaScript | Python | |---|---|---| | API REST | Express, Fastify, Hono | **FastAPI**, Flask, Django | | ORM | Prisma, Drizzle | **SQLAlchemy**, Tortoise, Peewee | | Validación | Zod | **Pydantic** | | Testing | Jest, Vitest | **pytest** | | Linting | ESLint | **Ruff** | | Formatter | Prettier | **Black**, Ruff | | Build tool | Vite, esbuild | **uv**, Poetry | | IA/ML | — | **PyTorch, LangChain, HuggingFace** | | Data | — | **pandas, numpy, polars** | ## Tu primer API con FastAPI (el Express de Python) ```python # main.py from fastapi import FastAPI from pydantic import BaseModel app = FastAPI() # Modelo (como un schema de Zod) class Usuario(BaseModel): nombre: str edad: int usuarios = [] @app.get("/usuarios") async def listar(): return usuarios @app.post("/usuarios") async def crear(usuario: Usuario): usuarios.append(usuario) return {"mensaje": "creado", "usuario": usuario} @app.get("/usuarios/{id}") async def obtener(id: int): if id >= len(usuarios): return {"error": "no encontrado"}, 404 return usuarios[id] ``` ```bash pip install fastapi uvicorn uvicorn main:app --reload # API corriendo en http://localhost:8000 # Docs automáticas en http://localhost:8000/docs ← ¡Esto no tiene Express! ``` FastAPI genera Swagger UI automáticamente. Sin instalar nada extra. ## Resumen rápido de diferencias | Concepto | JavaScript | Python | |---|---|---| | Bloques | `{ }` | Indentación | | Booleanos | `true`/`false` | `True`/`False` | | Nulo | `null`/`undefined` | `None` | | Array | `Array` | `list` | | Objeto | `Object` | `dict` | | String length | `.length` | `len()` | | Console | `console.log()` | `print()` | | Módulos | `import/export` | `import` (sin export) | | Clases | `constructor`, `this` | `__init__`, `self` | | Herencia | `extends` | `class Hijo(Padre)` | | try/catch | `catch (e)` | `except Exception as e` | | Ternario | `cond ? a : b` | `a if cond else b` | Con esto tienes todo lo que necesitas para empezar. Pon en práctica con un script pequeño o construye una API con FastAPI — en 3 días ya no estarás consultando esta guía.]]> <![CDATA[React Native vs Flutter vs Expo 2026: Cuál Elegir para tu App Móvil]]> https://francobosg.netlify.app/blog/react-native-vs-flutter-expo-2026/ Wed, 29 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/react-native-vs-flutter-expo-2026/ React Native Flutter Mobile Tutorial print('Pulsado'), child: Text('Púlsame'), ), ], ), ), ), ); } } ``` Comparado con React Native: ```jsx // React Native equivalente import { View, Text, Button } from 'react-native' export default function MiApp() { return ( Hola Mundo
...
``` ### 4. Clases que cambian o desaparecen Las diferencias más importantes entre v3 y v4: | v3 | v4 | Nota | |---|---|---| | `shadow-sm` | `shadow-xs` | Renombrado | | `shadow` | `shadow-sm` | Renombrado | | `rounded` | `rounded-sm` | Renombrado | | `blur` | `blur-sm` | Renombrado | | `ring` | `ring-3` | Ahora explícito | | `basis-1/2` | igual | Sin cambio | | `bg-opacity-50` | `bg-black/50` | Nueva sintaxis | | `text-opacity-75` | `text-black/75` | Nueva sintaxis | La regla de los `*-sm` / `*-xs`: en v4, la escala de tamaños se ajusta. Lo que antes era el valor "default" (sin sufijo) ahora tiene nombre explícito. ### 5. Variantes de nueva sintaxis ```html
``` Nuevas variantes en v4: - `starting:` — para animaciones de entrada (antes necesitabas JS) - `in-[.selector]:` — aplica estilo cuando el elemento está dentro de ese selector - `**:` — aplica a todos los descendientes (como `*` pero recursivo) - `not-[.active]:` — cuando NO tiene esa clase ## Cómo instalar Tailwind v4 ### En proyecto nuevo con Vite ```bash npm create vite@latest mi-proyecto -- --template vanilla cd mi-proyecto npm install -D tailwindcss @tailwindcss/vite ``` En `vite.config.js`: ```js import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ tailwindcss(), ], }) ``` En tu `src/style.css`: ```css @import "tailwindcss"; /* Tu configuración aquí */ @theme { --color-brand: #6366f1; } ``` **Sin `tailwind.config.js`. Sin `content: []`. Sin PostCSS.** Tailwind v4 detecta las clases automáticamente. ### En proyecto Next.js ```bash npm install -D tailwindcss @tailwindcss/postcss ``` En `postcss.config.mjs`: ```js const config = { plugins: { "@tailwindcss/postcss": {}, }, }; export default config; ``` ### En proyecto Astro ```bash npx astro add tailwind # Selecciona v4 cuando pregunte ``` O manualmente: ```bash npm install -D @tailwindcss/vite ``` Y en `astro.config.mjs`: ```js import tailwind from "@tailwindcss/vite"; export default defineConfig({ vite: { plugins: [tailwind()], }, }); ``` ## Cómo migrar desde v3: paso a paso ### Opción 1: Migración automática (recomendada) ```bash npx @tailwindcss/upgrade ``` Este comando: 1. Actualiza las dependencias en `package.json` 2. Migra `tailwind.config.js` a `@theme` en tu CSS 3. Renombra las clases que cambiaron (`shadow` → `shadow-sm`, etc.) 4. Convierte `bg-opacity-50` a `bg-black/50`, etc. Cubre ~80-90% de los casos. Revisa el diff después. ### Opción 2: Migración manual **Paso 1 — Actualizar dependencias:** ```bash npm install -D tailwindcss@next @tailwindcss/vite npm uninstall autoprefixer ``` **Paso 2 — Borrar `tailwind.config.js` y mover la config a CSS:** ```css /* Antes (tailwind.config.js) */ /* theme.extend.colors.brand = '#6366f1' */ /* Ahora en globals.css */ @import "tailwindcss"; @theme { --color-brand: #6366f1; --color-brand-dark: #4f46e5; } ``` **Paso 3 — Actualizar `vite.config.js` o `postcss.config.js`:** Elimina los plugins de PostCSS para Tailwind y usa el plugin de Vite en su lugar. **Paso 4 — Renombrar clases con búsqueda/reemplazo:** Las más comunes: ``` shadow → shadow-sm shadow-sm → shadow-xs rounded → rounded-sm blur → blur-sm ring → ring-3 ``` Usa este regex en VS Code para encontrarlos: `\b(shadow|rounded|blur)\b(?!-)` **Paso 5 — Migrar opacidades:** ``` bg-{color}-{shade}/opacity → bg-{color}-{shade}/{opacity} bg-black bg-opacity-50 → bg-black/50 text-white text-opacity-75 → text-white/75 ``` ### Problemas comunes en la migración **Error: `Cannot find module 'tailwindcss/plugin'`** En v4 los plugins se importan diferente: ```js // v3 const plugin = require('tailwindcss/plugin') // v4 import plugin from 'tailwindcss/plugin' // o en CSS: // @plugin "./mi-plugin.js" ``` **Las clases de componentes de terceros se rompen** Si usas Flowbite, DaisyUI, Shadcn, etc., pueden necesitar actualización. Comprueba la compatibilidad con v4 en sus docs. **El dark mode no funciona igual** En v3 podías usar `darkMode: 'class'` en config. En v4: ```css @import "tailwindcss"; /* Activar dark mode por clase */ @variant dark (&:where(.dark, .dark *)); ``` ## Las funcionalidades que más me gustan de v4 ### `@utility` — crea clases personalizadas reales ```css @utility container { max-width: 1280px; margin-inline: auto; padding-inline: 1.5rem; } ``` Ahora `container` es una clase de Tailwind real, con variantes responsivas: `sm:container`, `md:container`... ### `starting:` para animaciones sin JavaScript ```html ``` Animas el estado inicial de un dialog o popover sin escribir ni una línea de JS. ### Gradientes dinámicos con variables ```html
Gradiente dinámico
``` ## ¿Vale la pena migrar ahora? **Migra ahora si:** - Es un proyecto nuevo — usa v4 directamente - Tu build tarda más de 2s — la ganancia de rendimiento es enorme - Quieres CSS moderno sin PostCSS - Usas muchas animaciones — `starting:` y `in-out:` son un game changer **Espera si:** - Usas muchos plugins de terceros que aún no son compatibles con v4 - Tu proyecto tiene cientos de archivos y no puedes dedicar tiempo a revisar el diff - Dependes de Tailwind UI (la versión v4 está en roadmap) **Conclusión:** Para proyectos nuevos, v4 es la elección obvia. Para migrar proyectos existentes, usa `npx @tailwindcss/upgrade` y reserva 2-4 horas para revisar los casos que no migra automáticamente. La ganancia de rendimiento y la config en CSS nativo hacen que valga la pena.]]> <![CDATA[Portfolio Profesional a Medida: Caso Real con Next.js 16 y Framer Motion]]> https://francobosg.netlify.app/blog/portfolio-profesional-a-medida-desarrollador-2026/ Mon, 27 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/portfolio-profesional-a-medida-desarrollador-2026/ Código Caso Real Tu navegador no soporta vídeo HTML5. ### Stack elegido | Tecnología | Rol | |---|---| | **Next.js 16 (App Router)** | Framework — Static Export para deploy sin servidor | | **TypeScript strict** | Tipado total en los 8 componentes | | **Tailwind CSS** | Estilos utility-first, responsive sin media queries | | **Framer Motion** | Animaciones de entrada con HOC `FadeIn` reutilizable | | **Lucide React** | Iconografía ligera sin dependencias pesadas | | **Netlify** | Deploy automático desde Git, CDN global, SSL gratis | El build genera una carpeta `/out` con HTML/CSS/JS estático puro — sin servidor Node, sin runtime, sin coste de infraestructura. --- ## Las partes técnicas más interesantes ### 1. Carrusel infinito vertical sin librerías La sección de portfolio tenía que mostrar piezas en un carrusel vertical que girara sin fin. Sin Swiper, sin `react-slick`, sin dependencias externas. La solución fue la **técnica del array triplicado**: ```typescript // Triplicamos el array para poder hacer scroll infinito const tripleCards = [...cards, ...cards, ...cards]; const [idx, setIdx] = useState(cards.length); // Empezamos en el tercio central useEffect(() => { const interval = setInterval(() => { setIdx(prev => prev + 1); }, 3000); return () => clearInterval(interval); }, []); // Cuando llegamos al límite, reseteamos al tercio central sin animación useEffect(() => { if (idx >= cards.length * 2) { setTimeout(() => { // Desactivamos la transición CSS 1 frame para evitar parpadeo setTransition(false); setIdx(cards.length); requestAnimationFrame(() => setTransition(true)); }, 400); } }, [idx]); ``` El truco es **desactivar la transición CSS durante 1 frame** para que el reset al centro sea invisible. El usuario ve un carrusel infinito; por debajo hay un array de 3×N elementos. El tamaño de cada tarjeta también se calcula dinámicamente: ```typescript const cardW = Math.round(window.innerHeight * 0.52 * 0.75); // Para que la sección siempre encaje en pantalla sin overflow ``` ### 2. Hover swap sin parpadeo En el Hero hay una imagen principal que al hacer hover muestra otra imagen diferente. La implementación naive — cambiar el `src` del `` — produce un **parpadeo** mientras la nueva imagen descarga. La solución: **dos `` superpuestas** con `position: absolute`, y una transición de opacidad de 700ms entre ellas: ```tsx
{alt} {alt}
``` Ambas imágenes se cargan al inicio. No hay parpadeo, no hay cambio de `src`, no hay flash. La transición es suave porque solo estamos cambiando opacidad entre dos elementos ya cargados. ### 3. Galería masonry con overlay La galería de piezas usa un **grid masonry** donde cada tarjeta tiene proporciones distintas. Al hacer hover aparece un overlay oscuro con el nombre de la pieza. ```tsx
{piezas.map((pieza) => (
{pieza.nombre}

{pieza.nombre}

))}
``` ### 4. Navbar con scroll spy La barra de navegación resalta la sección activa mientras el usuario hace scroll, sin ninguna librería externa: ```typescript useEffect(() => { const sections = document.querySelectorAll('section[id]'); const observer = new IntersectionObserver( (entries) => { entries.forEach(entry => { if (entry.isIntersecting) { setActiveSection(entry.target.id); } }); }, { threshold: 0.5 } ); sections.forEach(s => observer.observe(s)); return () => observer.disconnect(); }, []); ``` --- ## Resultados Lighthouse | Métrica | Puntuación | |---|---| | Performance | 95/100 | | Accessibility | 97/100 | | SEO | 100/100 | | Best Practices | 100/100 | Carga completa en menos de 1.5 segundos en 4G. El Static Export de Next.js sirve HTML/CSS/JS puro desde el CDN de Netlify — no hay servidor que arrancar, no hay tiempo de cold start. --- ## Qué tipo de portfolios hago No solo para joyeras. He hecho y puedo hacer portfolios para: - **Profesionales creativos** — joyeros, fotógrafos, ilustradores, diseñadores gráficos, arquitectos - **Freelancers técnicos** — desarrolladores, diseñadores UX/UI, consultores - **Músicos y artistas** — con secciones de discografía, fechas, vídeos - **Profesores y formadores** — con cursos, recursos descargables y contacto - **Cualquier profesional que quiera tener presencia digital propia** Cada portfolio es diferente. El stack se adapta a lo que necesita el proyecto: si hay mucha animación, Next.js + Framer Motion. Si es más sencillo, Vite + Vanilla JS es suficiente y más rápido. --- ## ¿Te interesa un portfolio? Si eres profesional y quieres un portfolio que represente tu trabajo de verdad — no una plantilla, no un Wix — puedes contactarme desde [la sección de contacto de mi portfolio](https://francobosg.netlify.app/#contacto) o escribirme directamente. Te cuento qué necesito saber, qué stack tendría sentido para tu caso y una estimación de tiempo y coste. --- *¿Quieres ver el making of de mi propio portfolio? Lo cuento en [este artículo](/blog/como-hice-mi-portfolio-vite-tailwind/).*]]> <![CDATA[Context Window de la IA: Cómo Aprovecharlo al Máximo en Proyectos Grandes]]> https://francobosg.netlify.app/blog/context-window-ia-como-aprovecharlo-2026/ Mon, 27 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/context-window-ia-como-aprovecharlo-2026/ IA Código Herramientas <![CDATA[IA para Revisar Pull Requests: CodeRabbit, Copilot y Cómo Usarlos Bien]]> https://francobosg.netlify.app/blog/ia-para-revisar-pull-requests-2026/ Mon, 27 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/ia-para-revisar-pull-requests-2026/ IA Código Herramientas Tutorial # Instrucciones para Copilot ## Contexto del proyecto - NestJS 11 multi-tenant SaaS - Cada request tiene req.user.tenantId (inyectado por TenantContextGuard) - TODAS las queries deben filtrar por tenantId — si no lo hacen, es un bug crítico - RBAC con @RequirePermissions() — todos los endpoints protegidos lo necesitan ## Al revisar código, prioriza: 1. Falta de filtro por tenantId en queries → Bug crítico de seguridad 2. Endpoints sin @RequirePermissions → Escalada de privilegios 3. DTOs sin validación con class-validator → Input no validado 4. any en TypeScript → Riesgo de runtime errors ``` Este archivo también mejora el autocompletado y las respuestas de Copilot en general, no solo en revisiones. Lo cuento en [cómo sacar el máximo a GitHub Copilot](/blog/cursor-vs-copilot-vs-windsurf-2026/). --- ## Revisión de PRs generados por IA Si usas [vibe coding](/blog/vibe-coding-bien-mal-experiencia-real-2026/) y el agente genera PRs completos, la revisión de IA es especialmente útil — no para sustituir tu revisión, sino para tener una segunda "opinión" sobre el código que la IA generó. El patrón que funciona: **un modelo revisa lo que generó otro modelo**. CodeRabbit (basado en Claude) revisando código generado por Cursor (también Claude) parece redundante, pero en la práctica el review model tiene más contexto del proyecto y detecta inconsistencias que el generation model ignoró. ```bash # El agente generó el módulo → abres PR → CodeRabbit revisa # Resultado habitual: 2-3 puntos que el agente pasó por alto # Los más comunes: # - Falta filter por tenantId (el agente olvida el contexto de multi-tenancy) # - Test no cubre el caso de error 404 # - Import innecesario que quedó del código anterior ``` --- ## Métricas: ¿funciona realmente? En proyectos donde he tenido CodeRabbit configurado durante varios meses: - **~30% de los PRs** tenían al menos un comentario de CodeRabbit que resultó en un cambio real - **~8% de los PRs** tenían un problema detectado por CodeRabbit que se hubiera ido a producción sin la revisión automática - Los problemas más frecuentes detectados: queries sin filtro de tenant (2 veces), tests insuficientes (5 veces), código duplicado que debería haberse refactorizado (4 veces) No es perfecto. Pero el 8% de PRs con bugs reales detectados antes de producción tiene un ROI clarísimo. --- ## Alternativas y complementos | Herramienta | Especialidad | Precio | |-------------|-------------|--------| | **CodeRabbit** | Review automático completo | Gratis / $12/usuario | | **GitHub Copilot** | Review interactivo | $10-19/usuario | | **Sourcery** | Refactor y code quality | Gratis / $14/usuario | | **DeepSource** | Análisis estático + IA | Gratis / $12/usuario | | **Snyk** | Seguridad y vulnerabilidades | Gratis / desde $25 | | **SonarQube** | Calidad y deuda técnica | Gratis (self-hosted) | Para proyectos pequeños o en solitario: CodeRabbit gratuito + Copilot Pro es suficiente. Para equipos: CodeRabbit Pro + Copilot Business + Snyk para seguridad. --- ## Conclusión La IA para revisión de PRs no reemplaza al revisor humano — elimina el ruido para que el revisor humano pueda focalizarse en lo que importa. Configura CodeRabbit en tu repo (es gratuito para empezar), ajusta el `.coderabbit.yaml` para reducir el ruido, y úsalo como primera capa de revisión. Reserva tu atención para la lógica de negocio, los cambios de arquitectura y los edge cases que solo tú puedes evaluar. Y si generas código con IA, combinarlo con un revisor IA es el mínimo que puedes hacer antes de mergear a producción. Los problemas que la IA generadora pasó por alto, la IA revisora los puede pillar — especialmente si usas [MCP servers](/blog/mcp-servers-cursor-copilot-que-son-2026/) para que el revisor tenga contexto real del proyecto.]]> <![CDATA[MCP Servers: Qué Son, Para Qué Sirven y Cómo Usarlos en Cursor y Copilot]]> https://francobosg.netlify.app/blog/mcp-servers-cursor-copilot-que-son-2026/ Mon, 27 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/mcp-servers-cursor-copilot-que-son-2026/ IA Herramientas Código Usa siempre un usuario de solo lectura para esto. Nunca conectes el MCP server con credenciales de superusuario. --- ### 4. `@modelcontextprotocol/server-sqlite` Igual que Postgres pero para SQLite. Muy útil en proyectos con base de datos local o para desarrollo. --- ### 5. `mcp-server-fetch` Permite al agente hacer peticiones HTTP. Útil para consultar documentación online, APIs REST o webhooks. ```bash npm install -g mcp-server-fetch ``` **Caso de uso real**: "Mira la documentación de Coolify y dime cómo configurar las variables de entorno." El agente consulta `docs.coolify.io` directamente. --- ## Configurar MCP en Cursor Cursor guarda la configuración de MCP en `~/.cursor/mcp.json` (global) o `.cursor/mcp.json` en la raíz del proyecto (local, tiene prioridad). ### Configuración básica ```json { "mcpServers": { "filesystem": { "command": "npx", "args": [ "-y", "@modelcontextprotocol/server-filesystem", "/Users/fran/proyectos", "/Users/fran/documentos" ] }, "github": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-github"], "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_tu_token_aqui" } }, "postgres": { "command": "npx", "args": [ "-y", "@modelcontextprotocol/server-postgres", "postgresql://readonly_user:password@localhost:5432/mi_bd" ] } } } ``` ### Verificar que funciona 1. Abre Cursor 2. Ve a **Settings → MCP** (o `Cmd/Ctrl+Shift+P` → "MCP") 3. Deberías ver los servidores listados con estado ✅ o ❌ 4. En el chat, empieza con `@` para ver las herramientas disponibles Si un servidor falla, comprueba el log en la pestaña MCP de Settings. El error más común es que `npx` no encuentra el paquete — en ese caso instálalo globalmente primero. --- ## Configurar MCP en GitHub Copilot (VS Code) GitHub Copilot añadió soporte MCP en VS Code. La configuración va en `settings.json` o en `.vscode/mcp.json` del proyecto. ### Via `.vscode/mcp.json` (recomendado por proyecto) ```json { "servers": { "github": { "type": "stdio", "command": "npx", "args": ["-y", "@modelcontextprotocol/server-github"], "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "${env:GITHUB_TOKEN}" } }, "filesystem": { "type": "stdio", "command": "npx", "args": [ "-y", "@modelcontextprotocol/server-filesystem", "${workspaceFolder}" ] } } } ``` ### Via `settings.json` (global) ```json { "github.copilot.chat.mcp.enabled": true, "mcp": { "servers": { "postgres": { "type": "stdio", "command": "npx", "args": ["-y", "@modelcontextprotocol/server-postgres", "postgresql://..."] } } } } ``` Para usar las herramientas MCP en Copilot, abre el chat en **modo agente** (icono de agente) y el modelo las invocará automáticamente cuando sea relevante. --- ## Crear tu propio MCP server en Node.js Si quieres conectar el agente a tu propia API o lógica personalizada, puedes crear un MCP server en minutos. ### Estructura mínima ```bash npm init -y npm install @modelcontextprotocol/sdk ``` ```javascript // server.js import { Server } from "@modelcontextprotocol/sdk/server/index.js"; import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; import { CallToolRequestSchema, ListToolsRequestSchema, } from "@modelcontextprotocol/sdk/types.js"; const server = new Server( { name: "mi-api-server", version: "1.0.0" }, { capabilities: { tools: {} } } ); // Definir los tools disponibles server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: [ { name: "get_clientes_activos", description: "Devuelve el número de clientes activos en la plataforma", inputSchema: { type: "object", properties: { tenant_id: { type: "string", description: "ID del tenant a consultar", }, }, required: ["tenant_id"], }, }, ], })); // Implementar la lógica de cada tool server.setRequestHandler(CallToolRequestSchema, async (request) => { if (request.params.name === "get_clientes_activos") { const { tenant_id } = request.params.arguments; // Tu lógica real aquí: consulta a BD, llamada a API, etc. const count = await fetchClientesActivos(tenant_id); return { content: [ { type: "text", text: `El tenant ${tenant_id} tiene ${count} clientes activos.`, }, ], }; } throw new Error(`Tool desconocido: ${request.params.name}`); }); // Arrancar el servidor const transport = new StdioServerTransport(); await server.connect(transport); ``` Luego añades el server a tu configuración de Cursor o Copilot: ```json { "mcpServers": { "mi-api": { "command": "node", "args": ["/ruta/a/tu/server.js"], "env": { "API_KEY": "tu_clave" } } } } ``` --- ## Casos de uso reales donde MCP marca la diferencia ### Debugging con contexto de producción Sin MCP: "Tengo este error en producción: [error]" → la IA adivina Con MCP: el agente consulta los logs reales de tu servidor y el estado actual de la BD para dar una respuesta precisa ### Revisión de PRs con contexto del proyecto Sin MCP: pegar el diff en el chat Con MCP + GitHub server: "revisa el PR #47 y dime si hay problemas de seguridad" — el agente lee el PR, los archivos cambiados y el historial de la rama Esto enlaza directamente con lo que cuento en [Cómo usar IA para revisar Pull Requests](/blog/ia-para-revisar-pull-requests-2026/) — los MCP servers son la pieza que hace esa revisión realmente útil. ### Generación de código con schema real Sin MCP: pegar el schema de la BD Con MCP + Postgres server: "crea el DTO de TypeScript para la tabla `campaigns`" — el agente inspecciona la tabla directamente y genera el DTO correcto al 100% ### Documentación actualizada siempre Sin MCP: documentación desactualizada en el contexto Con MCP + Fetch server: el agente consulta la documentación oficial en tiempo real antes de responder --- ## Errores comunes al configurar MCP ### El servidor no aparece en Cursor ``` Error: spawn npx ENOENT ``` Node.js no está en el PATH que usa Cursor. Solución: usa la ruta absoluta: ```json { "command": "/usr/local/bin/node", "args": ["/usr/local/bin/npx", "-y", "@modelcontextprotocol/server-github"] } ``` ### El servidor aparece pero las tools no se invocan El modelo no invoca tools automáticamente si la pregunta no es lo suficientemente específica. Sé explícito: ``` ❌ "¿Cómo van los usuarios?" ✅ "Consulta la tabla users de la base de datos y dime cuántos se registraron esta semana" ``` ### Errores de autenticación con GitHub El token debe tener permisos `repo` (lectura) y `read:org` si necesitas repos de organización. Genera uno en GitHub → Settings → Developer settings → Personal access tokens. --- ## MCP vs Agentes con herramientas propias Si ya usas [agentes con LangChain](/blog/crear-agente-ia-langchain-nodejs-tutorial/) o function calling propio, ¿para qué migrar a MCP? La ventaja principal es la **portabilidad**. Un MCP server funciona con Cursor, con Copilot, con Claude Desktop y con Cline sin cambiar nada. Si mañana cambias de editor, tus herramientas siguen funcionando. Si solo usas un editor y ya tienes herramientas personalizadas, no hay urgencia. MCP brilla especialmente cuando: - Quieres compartir herramientas entre varios editores o agentes - Usas herramientas estándar (GitHub, Postgres, Filesystem) y no quieres implementarlas desde cero - Trabajas en equipo y quieres que todos tengan el mismo contexto disponible --- ## El ecosistema MCP en 2026 El catálogo oficial de MCP servers está en [modelcontextprotocol.io/servers](https://modelcontextprotocol.io/servers). Algunos destacados además de los mencionados: - **Sentry** — el agente puede buscar errores y trazas directamente - **Jira / Linear** — gestión de tareas sin salir del editor - **Slack** — leer mensajes y contexto de canales - **Puppeteer** — automatización de navegador - **Redis** — consultar caché y datos en memoria - **Docker** — inspeccionar contenedores y logs La comunidad está creciendo rápido. Si construyes un MCP server para una herramienta que usas, considera publicarlo — es una buena forma de contribuir al ecosistema. --- ## Conclusión MCP no es una moda pasajera — es la pieza que faltaba para que los agentes de IA dejen de ser asistentes que responden preguntas y se conviertan en herramientas que actúan sobre contexto real. Si usas Cursor o GitHub Copilot a diario, configurar los MCP servers de GitHub y Postgres te va a cambiar cómo trabajas. El setup son 10 minutos y el retorno es inmediato. Y si quieres ir más lejos, echa un vistazo a cómo funcionan los [agentes autónomos con LangChain](/blog/crear-agente-ia-langchain-nodejs-tutorial/) — MCP y agentes con memoria son el siguiente paso natural.]]> <![CDATA[Vibe Coding: Lo Bueno, Lo Malo y Lo que Nadie te Cuenta (Experiencia Real 2026)]]> https://francobosg.netlify.app/blog/vibe-coding-bien-mal-experiencia-real-2026/ Mon, 27 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/vibe-coding-bien-mal-experiencia-real-2026/ IA Código Herramientas { const campaign = await Campaign.findById(req.params.id); res.json(campaign); }); // Necesitas validar que el recurso pertenece al usuario autenticado app.get('/api/campaigns/:id', authMiddleware, async (req, res) => { const campaign = await Campaign.findOne({ where: { id: req.params.id, tenantId: req.user.tenantId } }); if (!campaign) return res.status(404).json({ error: 'Not found' }); res.json(campaign); }); ``` **Credenciales hardcodeadas:** ```javascript // El agente las pone "para que funcione el ejemplo" const apiKey = "sk-proj-abc123..."; // ← va directo al repo si no lo revisas ``` Si estás haciendo vibe coding en producción, lee siempre cualquier código que maneje auth, queries a base de datos y llamadas a APIs externas. ### Deuda técnica silenciosa El agente optimiza para que funcione ahora, no para que sea mantenible. Con vibe coding puro acabas con: - **Funciones de 300 líneas** que "hacen lo que pediste" pero son imposibles de modificar - **Duplicación masiva** — el agente no refactoriza lo que ya existe, añade - **Nombres inconsistentes** — `getUserById`, `fetchUser`, `getUser` para hacer lo mismo en distintas partes - **Sin manejo de errores** — el happy path funciona, los edge cases explotan en producción Yo lo llamo la "deuda de vibe" — a corto plazo avanzas rápido, a medio plazo el código es una mina. ### El agente en bucle Si no supervisas, el agente puede entrar en un bucle intentando arreglar errores que él mismo creó. Cuesta dinero y tiempo. Lo cuento en detalle en [cómo parar un agente en bucle infinito](/blog/agente-ia-bucle-infinito-cline-cursor-2026/). ### Dependencia del contexto Si el proyecto crece y el agente pierde contexto de la arquitectura inicial, empieza a tomar decisiones inconsistentes. Sin un buen manejo del [context window](/blog/context-window-ia-como-aprovecharlo-2026/), el código generado en la sesión 1 y el de la sesión 10 parecen escritos por personas diferentes. --- ## Mi enfoque real: vibe coding supervisado Después de meses, mi forma de trabajar no es vibe coding puro ni programación tradicional. Es algo intermedio que llamo **vibe coding supervisado**: ### 1. Arquitectura manual, implementación con IA Diseño la estructura del proyecto yo: qué módulos, qué modelos de datos, qué patrón de arquitectura. La IA implementa dentro de ese marco. ``` Yo defino: - /modules/auth/ → JWT + refresh tokens - /modules/campaigns/ → CRUD + estado - /modules/users/ → multi-tenancy con guard La IA implementa cada módulo según el patrón que yo he definido ``` ### 2. Revisión de código en puntos críticos No leo todo el código generado, pero sí leo cualquier cosa relacionada con: - Autenticación y autorización - Queries a base de datos - Manejo de datos del usuario - Configuración de CORS, headers de seguridad - Variables de entorno y secrets Para el resto (componentes UI, lógica de negocio sin seguridad crítica), confío más en el agente. ### 3. Tests como red de seguridad Si el agente genera código que pasa los tests, hay más probabilidades de que sea correcto. Los tests los pide el agente también, pero los reviso para asegurar que prueban lo que importa, no que hagan pasar el test con mocks vacíos. Lo cuento en [cómo testear código generado por IA](/blog/testear-codigo-generado-ia-copilot-cursor-2026/). ### 4. Commits frecuentes Antes de pedirle al agente una tarea grande, hago commit. Si el agente rompe algo, `git checkout .` y vuelves al estado anterior. Sin commits frecuentes, el vibe coding puede costarte horas de recuperación. ```bash # Antes de cualquier tarea del agente git add -A && git commit -m "checkpoint antes de refactor auth" # Si el agente lo rompe todo git checkout . ``` --- ## Cuándo usar vibe coding y cuándo no | Situación | Vibe coding | Supervisado | Manual | |-----------|-------------|-------------|--------| | Prototipo/MVP | ✅ | - | - | | Script one-shot | ✅ | - | - | | Boilerplate/DTOs | ✅ | - | - | | Feature nueva en prod | - | ✅ | - | | Refactor grande | - | ✅ | - | | Sistema de auth | - | - | ✅ | | Gestión de pagos | - | - | ✅ | | Queries críticas | - | ✅ | - | | Infraestructura/DevOps | - | ✅ | - | --- ## El elefante en la habitación: ¿está matando el vibe coding a los developers? La respuesta honesta: **no, pero está cambiando qué skills importan**. Lo que importa cada vez menos: - Memorizar sintaxis - Escribir boilerplate rápido - Conocer todos los métodos de una API de memoria Lo que importa cada vez más: - Saber si el código generado es correcto y seguro - Diseñar arquitecturas que el agente pueda implementar bien - Debuggear cuando la IA falla (y falla) - Entender el negocio para hacer las preguntas correctas El vibe coding sin conocimientos previos produce código que funciona en el demo pero explota en producción. Con conocimientos previos, multiplica tu velocidad sin sacrificar calidad. La IA es tan buena como el criterio de quien la dirige. --- ## Herramientas para hacer vibe coding bien - **Cursor** con Agent mode — el mejor para proyectos con múltiples archivos. [Comparativa completa aquí](/blog/cursor-vs-copilot-vs-windsurf-2026/) - **Cline** — agente open source para VS Code, muy configurable - **GitHub Copilot** — más conservador pero más integrado con el flujo de trabajo - **MCP servers** — dan al agente contexto real (BD, repos, APIs). [Cómo configurarlos](/blog/mcp-servers-cursor-copilot-que-son-2026/) - **git** — tu red de seguridad. Sin commits frecuentes, el vibe coding es ruleta rusa --- ## Conclusión El vibe coding es real y es útil. No es el fin de la programación ni la salvación del mundo. Es una herramienta más, con sus casos de uso y sus límites. Mi conclusión después de meses: **vibe coding en proyectos de exploración, vibe coding supervisado en producción, cero vibe coding en seguridad**. Y siempre, siempre, commits frecuentes.]]> <![CDATA[Next.js vs Remix en 2026: Cuál Elegir Según Tu Proyecto (Comparativa Real)]]> https://francobosg.netlify.app/blog/nextjs-vs-remix-cual-elegir-proyecto-2026/ Mon, 27 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/nextjs-vs-remix-cual-elegir-proyecto-2026/ JavaScript React Herramientas ; } // app/actions.ts — Server Action para mutaciones "use server"; export async function crearProducto(formData: FormData) { const nombre = formData.get("nombre") as string; const precio = Number(formData.get("precio")); await db.producto.create({ data: { nombre, precio } }); revalidatePath("/productos"); } ``` ### Remix: Loaders y Actions ```typescript // app/routes/productos.tsx import { json, type LoaderFunction, type ActionFunction } from "@remix-run/node"; import { useLoaderData, Form } from "@remix-run/react"; export const loader: LoaderFunction = async () => { const productos = await db.producto.findMany(); return json(productos); }; export const action: ActionFunction = async ({ request }) => { const formData = await request.formData(); const nombre = formData.get("nombre") as string; const precio = Number(formData.get("precio")); await db.producto.create({ data: { nombre, precio } }); return json({ ok: true }); }; export default function Productos() { const productos = useLoaderData(); return ( <>
); } ``` **La diferencia clave**: En Remix, el `
` funciona **sin JavaScript** (progressive enhancement real). Si el JS falla o tarda en cargar, el formulario sigue enviando datos. En Next.js con Server Actions, el formulario depende del JS del cliente para la mayoría de los casos. --- ## Rendimiento: cuándo importa cuál En apps con mucha navegación e interactividad, Remix tiene una ventaja arquitectural: **prefetching inteligente de datos y código en paralelo**. Next.js tiende a cargar datos en cascada si no tienes cuidado (un componente espera al padre, que espera al abuelo). Con Remix, los loaders de la ruta actual y sus sub-rutas se ejecutan en paralelo. ``` Next.js con anidación de fetch sin cuidado: Layout fetch → Page fetch → Component fetch (cascada: 3x lento) Remix (por defecto): Todos los loaders en paralelo (1x rápido) ``` Para apps de contenido estático (blogs, marketing, documentación), **Next.js gana** gracias a SSG e ISR que Remix no tiene nativamente. Este blog está hecho con Astro precisamente porque para contenido estático se puede ir más lejos que con Next.js. Pero para apps SaaS interactivas, la comparativa es válida. Hablo más sobre esto en el artículo de [migración de React a Astro](/blog/migracion-react-astro-rendimiento-lighthouse-2026/). --- ## Deploy: dónde puedes alojar cada uno ### Next.js - **Vercel**: el deploy más sencillo posible, es de la misma empresa - **Netlify**: soporte oficial - **AWS, GCP**: con adaptadores - **Docker / VPS**: funciona, pero necesitas configuración extra - **Coolify**: [para self-hosting sin DevOps](/blog/coolify-self-hosting-deploy-sin-devops-2026/), funciona razonablemente bien ### Remix / React Router v7 - **Cloudflare Workers**: excelente integración, latencia mínima global - **Vercel**: soporte - **Fly.io**: popular en la comunidad Remix por el control que da - **Node.js nativo**: más sencillo que Next.js porque es un servidor HTTP estándar Si priorizas la libertad de deploy y no depender de Vercel, Remix da más opciones nativas. La discusión de [Vercel vs VPS](/blog/vercel-vs-vps-coste-real-nextjs-2026/) es relevante aquí. --- ## Developer Experience: lo que sientes trabajando ### Qué hace Next.js mejor - Documentación más completa y actualizada - Más tutoriales, más Stack Overflow, más ejemplos en GitHub - `next/image` para optimización de imágenes es excelente - `next/font` para fuentes sin layout shifts - El ecosistema de librerías UI (Shadcn, NextUI) está mayoritariamente pensado para Next.js ### Qué hace Remix mejor - Los errores de routing son más claros y predecibles - El modelo mental de "ruta = loader + action + componente" es más simple una vez lo entiendes - Los `error boundaries` por ruta (si falla un loader, solo falla esa sección, no la app entera) - Progressive enhancement real sin configurar nada ### Lo que los dos hacen mal - **Next.js**: el sistema de caché en App Router ha confundido a toda la comunidad. En v15 lo cambiaron casi todo respecto a v13. La inestabilidad de la API de caché es un problema real - **Remix**: la comunidad es más pequeña y hay menos recursos de aprendizaje. Algunos patrones necesitan más boilerplate --- ## Autenticación en cada uno La autenticación es uno de los casos donde más noto la diferencia práctica. **Con Next.js** uso [Auth.js (antes NextAuth)](/blog/auth-js-nextauth-implementacion-real-2026/) que tiene integración nativa. Funciona muy bien. **Con Remix** la autenticación se implementa con sessions nativas del servidor usando cookies HTTP. Más control, más verboso: ```typescript // remix — session nativa import { createCookieSessionStorage, redirect } from "@remix-run/node"; const { getSession, commitSession } = createCookieSessionStorage({ cookie: { name: "__session", secrets: [process.env.SESSION_SECRET!], secure: process.env.NODE_ENV === "production", httpOnly: true, sameSite: "lax" } }); export async function login(request: Request) { const session = await getSession(request.headers.get("Cookie")); session.set("userId", "123"); return redirect("/dashboard", { headers: { "Set-Cookie": await commitSession(session) } }); } ``` Más código, pero entiendes exactamente qué pasa. Para [proteger APIs con JWT](/blog/proteger-api-nodejs-jwt-auth-guia-2026/), Remix te da más control sobre las cabeceras HTTP. --- ## Tabla comparativa | Aspecto | Next.js 15 | Remix / RR v7 | |---------|------------|---------------| | Ecosistema | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | | Documentación | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | | Rendimiento SSG/ISR | ⭐⭐⭐⭐⭐ | ⭐⭐ | | Rendimiento apps dinámicas | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | | Progressive enhancement | ⭐⭐ | ⭐⭐⭐⭐⭐ | | Modelo de datos (claridad) | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | | Libertad de deploy | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | | Curva de aprendizaje | Suave | Moderada | --- ## Cuándo elegir cada uno ### Elige Next.js si: - Es tu primer framework de React y quieres el camino con más recursos - Necesitas SSG o ISR para contenido que se regenera poco (blog, landing, documentación) - Tu equipo ya conoce Next.js - Quieres el deploy más sencillo posible en Vercel - Usas muchas librerías de UI del ecosistema React (Shadcn, etc.) ### Elige Remix / React Router v7 si: - La app tiene muchos formularios, mutaciones de datos y flujos de usuario complejos - Priorizas el rendimiento en navegaciones y quieres datos en paralelo automáticamente - Quieres deploy en Cloudflare Workers (latencia mínima globalmente) - El equipo entiende bien los conceptos web (HTTP, cookies, forms) - Quieres progressive enhancement sin configurar nada --- ## Mi recomendación honesta Si empiezas un proyecto nuevo en 2026 y no tienes una razón específica para uno u otro: **empieza con Next.js**. No porque sea mejor técnicamente en todo. Sino porque tiene más comunidad, más ejemplos, más soluciones a problemas concretos. Cuando atasques (y atascarás), encontrarás solución más rápido. Si llevas tiempo con Next.js y te frustra el modelo de caché o quieres un framework que "piense en web" en vez de "pensar en React", dale una oportunidad a Remix. El cambio mental merece la pena para ciertos tipos de apps. Y si lo que necesitas es un blog o sitio de contenido estático, ninguno de los dos es la respuesta correcta — te interesa más Astro, como cuento en [cómo migré de React a Astro](/blog/migracion-react-astro-rendimiento-lighthouse-2026/).]]> <![CDATA[PostgreSQL vs MySQL en 2026: Cuál Elegir para Tu Proyecto (Guía Definitiva)]]> https://francobosg.netlify.app/blog/postgresql-vs-mysql-cual-elegir-2026/ Mon, 27 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/postgresql-vs-mysql-cual-elegir-2026/ Backend Bases de Datos Código '{"tema": "dark"}'; -- Query sobre JSON indexado -- Enums nativos CREATE TYPE estado_pedido AS ENUM ('pendiente', 'procesando', 'enviado', 'entregado'); CREATE TABLE pedidos ( id SERIAL PRIMARY KEY, estado estado_pedido DEFAULT 'pendiente' ); ``` MySQL tiene JSON desde v5.7 y arrays se simulan con VARCHAR o tablas pivote. La diferencia es que PostgreSQL hace estos tipos **indexables y eficientes**. ### 2. Transacciones y ACID PostgreSQL tiene cumplimiento ACID más estricto por diseño. Un ejemplo real donde importa: ```sql -- PostgreSQL — DDL dentro de transacciones (MySQL no soporta esto) BEGIN; ALTER TABLE usuarios ADD COLUMN premium BOOLEAN DEFAULT false; UPDATE usuarios SET premium = true WHERE plan = 'pro'; -- Si algo falla, el ALTER TABLE también se revierte ROLLBACK; -- o COMMIT ``` En MySQL, los comandos DDL (`ALTER TABLE`, `CREATE INDEX`, etc.) hacen commit implícito. No puedes revertirlos en una transacción. ### 3. Consultas avanzadas: CTEs, Window Functions, LATERAL ```sql -- PostgreSQL — CTE recursivo para jerarquías (comentarios anidados, categorías) WITH RECURSIVE comentarios_hilo AS ( SELECT id, contenido, padre_id, 0 AS nivel FROM comentarios WHERE id = 1 -- Comentario raíz UNION ALL SELECT c.id, c.contenido, c.padre_id, h.nivel + 1 FROM comentarios c INNER JOIN comentarios_hilo h ON c.padre_id = h.id ) SELECT * FROM comentarios_hilo ORDER BY nivel; -- Window Functions (disponibles en ambos, pero más potentes en PG) SELECT nombre, salario, AVG(salario) OVER (PARTITION BY departamento) AS media_dept, RANK() OVER (PARTITION BY departamento ORDER BY salario DESC) AS ranking FROM empleados; ``` MySQL soporta CTEs y Window Functions desde v8.0, pero el soporte de PostgreSQL es más completo y maduro. ### 4. Full-Text Search ```sql -- PostgreSQL FTS nativo — muy potente SELECT titulo, ts_rank(to_tsvector('spanish', contenido), query) AS relevancia FROM articulos, to_tsquery('spanish', 'typescript & javascript') query WHERE to_tsvector('spanish', contenido) @@ query ORDER BY relevancia DESC; -- Con índice GIN para FTS rápido CREATE INDEX idx_articulos_fts ON articulos USING GIN(to_tsvector('spanish', contenido)); ``` MySQL tiene FTS pero con capacidades más limitadas. Para un blog, un buscador interno, o una app con búsqueda de contenido, PostgreSQL es superior. --- ## Herramientas y ecosistema ### ORMs con Node.js | ORM | PostgreSQL | MySQL | |-----|------------|-------| | **Prisma** | Soporte completo, recomendado | Soporte completo | | **Drizzle** | Soporte nativo | Soporte nativo | | **TypeORM** | Soporte completo | Soporte completo | | **Sequelize** | Soporte completo | Soporte completo | Si usas [Supabase vs Firebase](/blog/supabase-vs-firebase-experiencia-produccion-2026/), Supabase te da PostgreSQL gestionado con API REST y Realtime incluidos. ### Servicios gestionados **PostgreSQL gestionado:** - **Supabase**: la opción más popular para proyectos JavaScript, tier gratuito generoso - **Neon**: PostgreSQL serverless, paga por uso - **Railway**: fácil de configurar, buena DX - **Render**: opción sólida con tier gratuito - **AWS RDS**: enterprise, costoso pero muy estable **MySQL gestionado:** - **PlanetScale**: MySQL serverless con branching (ahora de pago) - **AWS RDS MySQL**: muy estable - **Google Cloud SQL**: buen soporte - **Hosting compartido**: la mayoría incluye MySQL, menos PostgreSQL Si haces [self-hosting con Coolify](/blog/coolify-self-hosting-deploy-sin-devops-2026/), ambas bases de datos están disponibles como contenedores con un click. --- ## Cuándo MySQL sigue siendo la respuesta correcta No todo es PostgreSQL. MySQL tiene ventajas reales en algunos escenarios: **1. Hosting compartido básico** Si tu cliente tiene un hosting de 5€/mes, probablemente solo ofrece MySQL (cPanel, Plesk). No vale la pena la discusión. **2. Proyectos WordPress / PHP** WordPress es MySQL. El ecosistema PHP está más orientado a MySQL. Si tu stack es PHP, no te compliques. **3. Equipo con experiencia profunda en MySQL** Si tu equipo lleva 10 años con MySQL, conoce sus quirks, sabe optimizarlo y tiene procedimientos internos, no hay razón para cambiar por moda. **4. Replicación master-slave simple** MySQL tiene una replicación más sencilla de configurar para casos de lectura escalada. PostgreSQL tiene streaming replication pero es más complejo. --- ## Rendimiento: los benchmarks honestos Los benchmarks de bases de datos son notoriamente difíciles de interpretar porque dependen del workload. Lo que sí puedo decir con experiencia: **Lecturas simples con índice**: MySQL puede ser marginalmente más rápido (1-10%). En la práctica, irrelevante. **Escrituras concurrentes**: PostgreSQL gana. El sistema MVCC de PostgreSQL maneja mejor la concurrencia sin bloqueos de tabla. **Queries complejas (JOINs múltiples, agregaciones, CTEs)**: PostgreSQL gana claramente. El planificador de queries es más sofisticado. **JSON / datos semi-estructurados**: PostgreSQL con JSONB gana ampliamente. **Full-text search**: PostgreSQL gana. La conclusión es que para el 95% de las apps web, el rendimiento de la base de datos no es el cuello de botella — son los índices mal diseñados, las N+1 queries y la falta de caché. --- ## Ejemplo real: migrar un proyecto de MySQL a PostgreSQL Cuando migré un proyecto de MySQL a PostgreSQL, los cambios más comunes fueron: ```sql -- MySQL -- PostgreSQL AUTO_INCREMENT → SERIAL o GENERATED ALWAYS AS IDENTITY TINYINT(1) → BOOLEAN TEXT con collation → TEXT (sin necesidad de especificar) LIMIT x, y (offset, rows) → LIMIT y OFFSET x IFNULL(col, 'default') → COALESCE(col, 'default') GROUP BY sin agrupar todo → Error (PG es más estricto, y correcto) Backticks `nombre_tabla` → Comillas dobles "nombre_tabla" (o nada) ``` El cambio más molesto: PostgreSQL es case-sensitive en identificadores sin comillas y los convierte a minúsculas. `SELECT "UserName" FROM Users` en MySQL funciona, en PostgreSQL necesitas comillas si usaste mayúsculas al crear la tabla. --- ## Integración con IA y APIs modernas Para proyectos que usan IA, PostgreSQL tiene una ventaja significativa: **pgvector**. ```sql -- Instalar extensión pgvector CREATE EXTENSION vector; -- Tabla para embeddings de IA CREATE TABLE documentos ( id SERIAL PRIMARY KEY, contenido TEXT, embedding vector(1536) -- Dimensiones de OpenAI text-embedding-3-small ); -- Búsqueda por similitud coseno SELECT contenido, 1 - (embedding <=> $1) AS similitud FROM documentos ORDER BY embedding <=> $1 LIMIT 10; ``` Si construyes un chatbot RAG o un sistema de búsqueda semántica como el que explico en [crear un chatbot RAG con OpenAI](/blog/crear-chatbot-rag-openai-tutorial-2026/), pgvector convierte PostgreSQL en una base de datos vectorial sin necesitar servicios externos como Pinecone o Weaviate. --- ## Veredicto final ``` ¿Proyecto nuevo en 2026? ├── ¿Usa WordPress o PHP legacy? → MySQL ├── ¿Solo tienes hosting compartido? → MySQL (o busca mejor hosting) ├── ¿Equipo con experiencia profunda en MySQL? → Quédate en MySQL └── Cualquier otro caso → PostgreSQL ``` PostgreSQL es mejor en casi todo lo que importa en 2026: tipos de datos modernos, JSONB, arrays, FTS, ACID estricto, pgvector para IA, consultas complejas. La única razón para elegir MySQL es una razón práctica (ecosistema existente, hosting, equipo) no técnica. Si estás construyendo un SaaS nuevo, lee [lo que nadie te cuenta sobre construir un SaaS en 2026](/blog/construir-saas-2026-lo-que-nadie-te-cuenta/) — la elección de base de datos es uno de los puntos que trato.]]> <![CDATA[TypeScript para Desarrolladores JavaScript: La Guía Práctica que Ojalá Hubiera Tenido]]> https://francobosg.netlify.app/blog/typescript-para-javascript-developers-guia-2026/ Mon, 27 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/typescript-para-javascript-developers-guia-2026/ TypeScript JavaScript Código = | { ok: true; datos: T } | { ok: false; error: string }; type IdONombre = string | number; ``` La diferencia práctica más importante: las interfaces se pueden **extender y combinar**, los types no se pueden redeclarar: ```typescript interface Animal { nombre: string; } interface Animal { patas: number; // Válido — TypeScript las fusiona } // ✅ Ahora Animal tiene nombre Y patas type Coche = { marca: string }; type Coche = { modelo: string }; // ❌ Error: Duplicate identifier 'Coche' ``` Para trabajar en proyectos como los que describo en [construir un SaaS desde cero](/blog/construir-saas-2026-lo-que-nadie-te-cuenta/), tener bien tipadas las interfaces de tu dominio es la diferencia entre un código mantenible y un caos. --- ## Generics: el superpoder de TypeScript Los generics asustan al principio. No son más que **tipos reutilizables con parámetro**: ```typescript // Sin generics — necesito duplicar para cada tipo function primeraStringArray(arr: string[]): string { return arr[0]; } function primerNumberArray(arr: number[]): number { return arr[0]; } // Con generics — una función para todos los tipos function primero(arr: T[]): T { return arr[0]; } primero(["a", "b", "c"]); // TypeScript infiere T = string primero([1, 2, 3]); // TypeScript infiere T = number primero([true, false]); // TypeScript infiere T = boolean ``` El patrón de generic que más uso en APIs: ```typescript // Respuesta tipada de API interface ApiResponse { data: T; status: number; message: string; } interface Producto { id: number; nombre: string; precio: number; } async function fetchProducto(id: number): Promise> { const res = await fetch(`/api/productos/${id}`); return res.json(); } const respuesta = await fetchProducto(1); respuesta.data.nombre; // TypeScript sabe que es string ✅ respuesta.data.precio; // TypeScript sabe que es number ✅ ``` --- ## Tipado de funciones async y promesas El punto donde más gente se atasca: ```typescript // Forma correcta de tipar funciones async async function obtenerUsuario(id: number): Promise { const res = await fetch(`/api/usuarios/${id}`); if (!res.ok) { throw new Error(`HTTP error: ${res.status}`); } return res.json() as Promise; } // Con manejo de errores tipado type ResultadoApi = | { success: true; data: T } | { success: false; error: string }; async function obtenerUsuarioSafe(id: number): Promise> { try { const usuario = await obtenerUsuario(id); return { success: true, data: usuario }; } catch (error) { return { success: false, error: error instanceof Error ? error.message : "Error desconocido" }; } } ``` Este patrón se combina muy bien con [proteger tu API con JWT en Node.js](/blog/proteger-api-nodejs-jwt-auth-guia-2026/), donde los tipos te obligan a manejar todos los casos de error. --- ## Errores comunes y cómo evitarlos ### ❌ Error 1: Usar `any` para todo ```typescript // Mal — pierdes todo el beneficio de TypeScript function procesarDatos(datos: any) { return datos.nombre.toUpperCase(); // Runtime error si datos no tiene nombre } // Bien — usa unknown y valida function procesarDatos(datos: unknown) { if (typeof datos === "object" && datos !== null && "nombre" in datos) { const { nombre } = datos as { nombre: string }; return nombre.toUpperCase(); } throw new Error("Datos inválidos"); } ``` ### ❌ Error 2: No usar type guards ```typescript // Mal — TypeScript no sabe qué tipo es function procesarEvento(evento: MouseEvent | KeyboardEvent) { console.log(evento.key); // Error: 'key' no existe en MouseEvent } // Bien — type guard function procesarEvento(evento: MouseEvent | KeyboardEvent) { if (evento instanceof KeyboardEvent) { console.log(evento.key); // ✅ TypeScript sabe que es KeyboardEvent } else { console.log(evento.clientX); // ✅ TypeScript sabe que es MouseEvent } } ``` ### ❌ Error 3: `as` para silenciar errores ```typescript // Trampa — le dices a TypeScript que confíe en ti ciegamente const usuario = await fetch("/api/user").then(r => r.json()) as Usuario; usuario.nombre; // TypeScript confía en ti, pero puede ser undefined en runtime // Mejor — valida con zod o una función de validación import { z } from "zod"; const UsuarioSchema = z.object({ id: z.number(), nombre: z.string(), email: z.string().email() }); const datos = await fetch("/api/user").then(r => r.json()); const usuario = UsuarioSchema.parse(datos); // Lanza error si no coincide ``` --- ## TypeScript con React y Next.js En proyectos React, el tipado más usado: ```typescript import { FC, ReactNode, useState, useEffect } from "react"; // Componente tipado interface TarjetaProductoProps { producto: Producto; onAgregar: (id: number) => void; children?: ReactNode; } const TarjetaProducto: FC = ({ producto, onAgregar, children }) => { return (

{producto.nombre}

{producto.precio}€

{children}
); }; // useState con tipo explícito const [productos, setProductos] = useState([]); const [loading, setLoading] = useState(false); // useEffect tipado useEffect(() => { const cargar = async () => { const data = await fetchProductos(); setProductos(data); }; cargar(); }, []); ``` Si usas [Auth.js / NextAuth con Next.js](/blog/auth-js-nextauth-implementacion-real-2026/), TypeScript te permite tipar la sesión correctamente y evitar acceder a campos que no existen. --- ## TypeScript con Node.js y Express ```typescript import express, { Request, Response, NextFunction } from "express"; // Extender el tipo Request para añadir propiedades custom declare global { namespace Express { interface Request { usuario?: Usuario; } } } // Middleware tipado const autenticar = (req: Request, res: Response, next: NextFunction): void => { const token = req.headers.authorization?.split(" ")[1]; if (!token) { res.status(401).json({ error: "Token requerido" }); return; } // Verificar token... req.usuario = { id: 1, nombre: "Fran", email: "fran@example.com", rol: "admin" }; next(); }; // Route handler tipado const obtenerPerfil = async (req: Request, res: Response): Promise => { if (!req.usuario) { res.status(401).json({ error: "No autenticado" }); return; } res.json({ usuario: req.usuario }); }; ``` --- ## Herramientas esenciales del ecosistema TypeScript | Herramienta | Para qué sirve | |-------------|----------------| | **Zod** | Validación de datos en runtime con inferencia de tipos | | **tRPC** | APIs tipadas end-to-end sin código extra | | **Prisma** | ORM con tipos generados automáticamente desde el schema | | **ts-node** | Ejecutar TypeScript directamente sin compilar | | **tsx** | Alternativa más rápida a ts-node | | **type-fest** | Utilidades de tipos para casos avanzados | Para proyectos que usan IA, TypeScript brilla especialmente: puedes tipar las respuestas de la API de OpenAI o Claude y asegurarte de que [parseas el JSON correctamente](/blog/parsear-json-ia-sin-errores-openai-claude-2026/). --- ## Plan de aprendizaje en 4 semanas **Semana 1**: Tipos básicos, interfaces, funciones tipadas. Convierte un archivo JS tuyo a TS. **Semana 2**: Generics básicos, union types, type guards, async/await. Convierte un módulo completo. **Semana 3**: Tipos de utilidad (`Partial`, `Required`, `Pick`, `Omit`, `Record`). Empieza a usar Zod. **Semana 4**: Tipos condicionales, infer, decorators si usas NestJS. Proyecto completo en TS. El objetivo no es entender TODO TypeScript. Es eliminar el 90% de los errores de tipo que te llegarían a producción. --- ## Recursos adicionales - Si usas IA para programar, leer código TypeScript tipado le da **mucho más contexto** a herramientas como Cursor o Copilot — te genera código mejor - TypeScript es casi obligatorio si sigues los patrones de [NestJS sobre Express](/blog/por-que-nestjs-sobre-express-saas-2026/) - Para estructurar bien tus carpetas TypeScript en proyectos React, echa un vistazo a [estructura de carpetas en React/Next.js](/blog/estructura-carpetas-react-nextjs-2026/) TypeScript no es una carga — es un radar que detecta los misiles antes de que impacten. Cuanto antes lo adoptes, más bugs evitarás sin esfuerzo adicional.]]> <![CDATA[Variables de Entorno en Node.js y Next.js: La Guía Completa para No Filtrar Secretos]]> https://francobosg.netlify.app/blog/variables-de-entorno-nodejs-nextjs-guia-2026/ Mon, 27 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/variables-de-entorno-nodejs-nextjs-guia-2026/ Node.js Backend Seguridad <![CDATA[Construir un SaaS en 2026: Lo que Nadie te Cuenta Antes de Empezar]]> https://francobosg.netlify.app/blog/construir-saas-2026-lo-que-nadie-te-cuenta/ Thu, 23 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/construir-saas-2026-lo-que-nadie-te-cuenta/ SaaS Arquitectura Backend Full-Stack NestJS FastAPI Docker Negocio { return this.repo.find({ where: { companyId } }); } ``` Si te olvidas de añadir el filtro en un endpoint, tienes un data leak entre clientes. El guard lo hace imposible de olvidar. > Para ver este patrón en acción en un proyecto real, revisa [Caso Real: SaaS Multitenant con NestJS y React](/blog/caso-real-saas-atrapaclientes-nestjs-react/). ### Monolito modular, no microservicios Todos los tutoriales de SaaS en YouTube muestran microservicios. La realidad: - Con microservicios necesitas service discovery, comunicación entre servicios (gRPC/mensajería), distributed tracing, y cada servicio tiene su propia CI/CD, logs y monitoring. - Un solo developer o equipo pequeño no tiene tiempo para todo eso. **Lo que funciona en la práctica:** ``` src/ modules/ auth/ # JWT, refresh tokens, RBAC companies/ # Gestión de tenants users/ # Usuarios por tenant billing/ # Stripe, suscripciones [feature]/ # Módulos de negocio common/ guards/ # TenantGuard, AuthGuard, RolesGuard decorators/ # @CurrentUser(), @Roles() filters/ # Manejo global de errores ``` Cada módulo es independiente. Si en el futuro necesitas extraer `billing` como microservicio, lo puedes hacer. Pero no lo hagas prematuramente. --- ## 2. El auth que parece simple y no lo es JWT de "Hello World" son 30 minutos. JWT de producción en un SaaS son 2-3 días. Lo que necesitas realmente: ```typescript // Lista de lo que necesitas implementar, no un "npm install passport" // ✅ Access token (15-60 min expiración) // ✅ Refresh token (7-30 días, rotación en cada uso) // ✅ Revocación de refresh tokens (tabla en BD o Redis) // ✅ Logout en todos los dispositivos // ✅ Rate limiting en /auth/login // ✅ Bloqueo por intentos fallidos // ✅ Roles: superadmin / company_admin / company_user // ✅ Permisos granulares dentro de cada rol // ✅ Middleware que verifica rol en cada endpoint ``` El flujo de refresh tokens es lo que más gente omite y luego duele: ```typescript @Post('refresh') async refresh(@Body() dto: RefreshTokenDto) { // 1. Verificar que el refresh token existe en BD y no está revocado const stored = await this.tokenRepo.findOne({ token: dto.refreshToken }); if (!stored || stored.revokedAt) throw new UnauthorizedException(); // 2. Verificar expiración if (stored.expiresAt < new Date()) throw new UnauthorizedException(); // 3. Rotación: revocar el anterior, crear uno nuevo await this.tokenRepo.update(stored.id, { revokedAt: new Date() }); const newRefreshToken = await this.tokenRepo.save({ userId: stored.userId, token: generateSecureToken(), expiresAt: addDays(new Date(), 30), }); return { accessToken: this.jwt.sign({ sub: stored.userId }), refreshToken: newRefreshToken.token, }; } ``` > Para una guía completa de JWT en Node.js: [Cómo Proteger una API Node.js con JWT](/blog/proteger-api-nodejs-jwt-auth-guia-2026/). --- ## 3. El flujo de registro que nadie piensa En un SaaS multitenant, el flujo de registro no es solo "email + contraseña". Necesitas decidir: **¿Registro libre o con aprobación?** - Registro libre: el usuario se registra y accede inmediatamente. Simple, bueno para B2C. - Con aprobación: el usuario solicita acceso, un admin lo aprueba. Necesario cuando el acceso tiene coste o cuando quieres controlar quién usa el producto. El flujo con aprobación que implementé en iECO: ``` Usuario rellena formulario de solicitud ↓ Estado: PENDING (no puede hacer login) ↓ Notificación al superadmin ↓ Superadmin aprueba → Estado: ACTIVE → email de confirmación Superadmin rechaza → Estado: REJECTED → email de rechazo ↓ Usuario activo puede hacer login ``` En la BD: ```sql CREATE TYPE user_status AS ENUM ('pending', 'active', 'rejected', 'suspended'); CREATE TABLE users ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), email VARCHAR(255) UNIQUE NOT NULL, password_hash VARCHAR(255) NOT NULL, status user_status DEFAULT 'pending', company_id UUID REFERENCES companies(id), role VARCHAR(50) DEFAULT 'company_user', approved_at TIMESTAMPTZ, approved_by UUID REFERENCES users(id) ); ``` --- ## 4. El panel de admin que necesitarás aunque no lo planifiques Todo SaaS acaba necesitando un panel de administración. Si no lo planificas, lo construirás reactivamente cuando un cliente llame diciendo que no puede entrar. Lo mínimo viable: - **Gestión de usuarios**: listar, suspender, cambiar rol, resetear contraseña - **Gestión de empresas** (si es multitenant): crear, editar, suspender tenant - **Solicitudes pendientes**: aprobar/rechazar registros - **Logs básicos**: últimos accesos, errores críticos Un truco: separa claramente los endpoints de admin con un prefijo y un guard dedicado: ```typescript @Controller('admin') @UseGuards(AuthGuard, RolesGuard) @Roles('superadmin') export class AdminController { // Solo superadmin puede acceder aquí } ``` --- ## 5. El despliegue: self-hosted es la opción más inteligente a escala pequeña Los costes de Vercel/Railway/Render escalan rápido. Para un SaaS small con <50.000 visitas/mes: | Opción | Coste/mes | Control | Setup | |--------|-----------|---------|-------| | Vercel Pro | $20+ | Bajo | Mínimo | | Railway | $5-30+ | Medio | Fácil | | Hetzner VPS + Coolify | ~5€ | Total | 2-3h inicial | Con Coolify en un VPS tienes SSL automático, deploys desde GitHub, gestión de variables de entorno y todas las apps que quieras en el mismo servidor. > Guía completa: [Coolify: Despliega tus Apps sin ser DevOps](/blog/coolify-self-hosting-deploy-sin-devops-2026/) y el [Análisis de costes Vercel vs VPS](/blog/vercel-vs-vps-coste-real-nextjs-2026/). --- ## 6. Lo que nadie menciona: el tiempo no técnico El código es la parte fácil. Lo que no verás en tutoriales: **Stripe y los impuestos**: integrar Stripe Billing para suscripciones recurrentes lleva 1 semana. Gestionar IVA para clientes europeos, facturas, créditos y upgrades/downgrades: otra semana más. **Los emails transaccionales**: registro, bienvenida, aprobación, factura, aviso de pago fallido, recordatorio de trial... fácilmente 15-20 emails distintos. Cada uno con HTML que funcione en Outlook y en Gmail. No los subestimes. **El onboarding**: el usuario que se registra a las 11 de la noche y no entiende cómo funciona el producto va a abrir un ticket. El onboarding (guía inicial, tooltips, email de día 1, email de día 7) reduce el churn más que cualquier feature nueva. **El GDPR**: para clientes europeos necesitas política de privacidad, aviso de cookies, mecanismo de borrado de cuenta y portabilidad de datos. No es opcional. --- ## Stack que volvería a usar Después de dos SaaS en producción, esto es lo que elegiría hoy: ``` Backend: NestJS + TypeORM + PostgreSQL (FastAPI si hay mucho procesamiento IA) Frontend: Next.js 15 + TypeScript + Tailwind CSS + shadcn/ui Auth: JWT propio (access + refresh) o Auth.js para auth social Pagos: Stripe Billing Email: Resend + React Email Deploy: Hetzner VPS + Coolify Monitoring: Sentry (errores) + Plausible (analytics) ``` Lo que **no** volvería a usar para un SaaS pequeño: - Microservicios (complejidad innecesaria) - Supabase Auth (pierde control sobre los tokens y los roles) - MongoDB (las relaciones entre datos en un SaaS son relacionales por naturaleza) --- ## Por dónde empezar Si vas a construir un SaaS hoy: 1. Define los roles y el multitenancy **antes** de escribir código 2. Diseña el schema de BD con `tenant_id` desde el día 1 3. Implementa auth completo (access + refresh + roles) en la primera semana 4. Construye el panel de admin básico en paralelo con el producto 5. Despliega en VPS desde el inicio, no esperes a tener clientes El orden importa. El multitenancy y el auth son los únicos elementos que no puedes añadir sin reescribir. Todo lo demás (features, UI, integraciones) se puede añadir después. --- ## Recursos relacionados - [Caso Real: SaaS IA para Reuniones — iECO (FastAPI + Next.js + Multitenancy)](/blog/caso-real-ia-reuniones-gemini-supabase/) - [Caso Real: SaaS Multitenant con NestJS y React — Atrapaclientes](/blog/caso-real-saas-atrapaclientes-nestjs-react/) - [Por qué NestJS sobre Express para un SaaS](/blog/por-que-nestjs-sobre-express-saas-2026/) - [Proteger una API Node.js con JWT: guía real](/blog/proteger-api-nodejs-jwt-auth-guia-2026/) - [Coolify: Despliega tus Apps sin ser DevOps](/blog/coolify-self-hosting-deploy-sin-devops-2026/) - [Vercel vs VPS: el coste real de desplegar Next.js](/blog/vercel-vs-vps-coste-real-nextjs-2026/) - [Docker para Developers: guía práctica sin teoría innecesaria](/blog/docker-para-developers-guia-practica-2026/)]]> <![CDATA[Coolify: Despliega tus Apps con Docker sin ser DevOps (2026)]]> https://francobosg.netlify.app/blog/coolify-self-hosting-deploy-sin-devops-2026/ Thu, 23 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/coolify-self-hosting-deploy-sin-devops-2026/ Docker DevOps Self-hosting Tutorial Coolify Traefik Backend Si quieres comparar costes reales de self-hosting vs plataformas como Vercel, lee [Vercel vs VPS: Cuánto Cuesta Realmente una App Next.js](/blog/vercel-vs-vps-coste-real-nextjs-2026/). --- ## Instalación paso a paso ### 1. Prepara el servidor (10 min) Entra por SSH como root y crea un usuario no-root: ```bash # Crear usuario adduser francobosg usermod -aG sudo francobosg # Copiar SSH keys al nuevo usuario rsync --archive --chown=francobosg:francobosg ~/.ssh /home/francobosg # Desde ahora, usa este usuario ``` Configura el firewall básico: ```bash ufw allow OpenSSH ufw allow 80/tcp ufw allow 443/tcp ufw allow 8000/tcp # Puerto de Coolify ufw enable ``` ### 2. Instala Docker ```bash curl -fsSL https://get.docker.com | sh sudo usermod -aG docker $USER # Cierra y vuelve a abrir la sesión SSH ``` Verifica: ```bash docker run hello-world # Hello from Docker! ``` > Si es tu primera vez con Docker, revisa [Docker para Desarrolladores: Guía Práctica sin Teoría Innecesaria](/blog/docker-para-developers-guia-practica-2026/) antes de continuar. ### 3. Instala Coolify (2 min) ```bash curl -fsSL https://cdn.coollabs.io/coolify/install.sh | bash ``` Eso es todo. El script instala Docker si no lo tienes, configura Traefik como reverse proxy y arranca el panel de Coolify. Abre `http://TU_IP:8000` en el navegador. Verás el wizard de setup inicial. --- ## Configuración inicial de Coolify ### Cuenta de admin En el wizard, crea tu cuenta de administrador. Email y contraseña robusta — esta es la única cuenta con acceso total. ### Apunta tu dominio Antes de configurar SSL necesitas: 1. Un dominio (o subdominio) apuntando a la IP de tu servidor 2. Esperar a que propague (5-60 min) En Coolify: **Settings → General** → pon tu dominio en "Instance Domain". Coolify generará automáticamente SSL para `coolify.tudominio.com`. ### Conecta GitHub **Sources → Add → GitHub App** Coolify crea una GitHub App en tu cuenta con permisos mínimos (solo read de repos). Así puede hacer checkout del código y configurar webhooks para deploys automáticos. --- ## Desplegar tu primera app ### Ejemplo: API FastAPI 1. **New Project → New Resource → Application** 2. Selecciona el repo de GitHub 3. Branch: `main` 4. Build Pack: `Dockerfile` (o Nixpacks si no tienes Dockerfile) Si tienes un `Dockerfile` en la raíz del repo: ```dockerfile FROM python:3.11-slim WORKDIR /app COPY requirements.txt . RUN pip install --no-cache-dir -r requirements.txt COPY . . EXPOSE 8080 CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8080"] ``` Coolify detecta el puerto expuesto (`8080`) y configura el reverse proxy automáticamente. 5. **Domain**: `api.tudominio.com` — Coolify genera el certificado SSL solo 6. **Variables de entorno**: añade `DATABASE_URL`, `SECRET_KEY`, etc. de forma segura 7. **Deploy** — el primer deploy tarda 2-3 min (build de la imagen) Desde ese momento, cada `git push` a `main` dispara un deploy automático. ### Desplegar PostgreSQL No instales PostgreSQL directamente en el servidor. Usa el servicio de Coolify: **New Resource → Database → PostgreSQL** Coolify levanta un contenedor PostgreSQL con: - Contraseña generada automáticamente - Volumen persistente para datos - Red interna de Docker (no expuesta al exterior por defecto) Copia la connection string interna (`postgresql://user:pass@postgres:5432/db`) y pégala en las variables de entorno de tu app. --- ## Deploys automáticos y rollback Coolify guarda las últimas N builds. Si un deploy rompe algo: 1. Panel de la app → **Deployments** 2. Elige una build anterior 3. **Redeploy** — vuelves al estado anterior en 30 segundos Para deploys en ramas de feature antes de mergear a main: ```yaml # En Coolify: configurar Preview Deployments # Cada PR genera una URL temporal: pr-123.tudominio.com ``` --- ## Monitorización básica Coolify incluye monitorización básica out of the box: - **Logs**: streaming en tiempo real de cada contenedor - **Métricas**: CPU y RAM del servidor (gráfica simple) - **Health checks**: reinicia el contenedor automáticamente si falla Para monitorización avanzada puedes conectar Prometheus + Grafana como servicio adicional en Coolify, o usar Plausible (que también se despliega en Coolify) para métricas de usuario. --- ## Lo que aprendí usándolo en producción **1. El primer setup tarda más de lo que dicen.** El script de instalación son 5 min, pero preparar el servidor, configurar el DNS, crear la GitHub App y hacer el primer deploy bien configurado son fácilmente 2-3 horas la primera vez. **2. Usa dominios internos para las bases de datos.** PostgreSQL y Redis no deben estar expuestos con dominio público. La connection string interna de Docker (`postgres:5432`) es más rápida y segura. **3. Los volumes de Docker son tu backup.** Los datos de las BDs están en volumes de Docker. Haz snapshots del VPS periódicamente o configura backups automáticos en Coolify. **4. Nixpacks es magia para apps sin Dockerfile.** Para un proyecto Next.js o FastAPI sin Dockerfile, Nixpacks detecta el framework y construye la imagen automáticamente. Funciona el 90% de las veces. **5. Coolify no reemplaza conocer Docker.** Si algo falla, necesitas saber qué es un contenedor, cómo ver logs y qué hace un `docker-compose.yml`. No entres en producción sin haber leído antes [Docker para Desarrolladores](/blog/docker-para-developers-guia-practica-2026/). --- ## ¿Cuándo no usar Coolify? - **Alta disponibilidad real** (99.99% uptime): necesitas Kubernetes + múltiples nodos - **Equipo de DevOps dedicado**: probablemente ya tienen su stack - **Apps con requisitos de compliance estrictos** (PCI-DSS, HIPAA): los managed services tienen certificaciones que tú tendrías que conseguir solo Para todo lo demás — proyectos propios, SaaS small, apps de clientes, prototipos en producción — Coolify es la mejor relación calidad/precio que he encontrado. --- ## Recursos - [Documentación oficial de Coolify](https://coolify.io/docs) - [Vercel vs VPS: comparativa de costes reales](/blog/vercel-vs-vps-coste-real-nextjs-2026/) - [Docker para Developers: guía práctica sin teoría innecesaria](/blog/docker-para-developers-guia-practica-2026/) - [Caso real: SaaS de IA con Coolify en servidor dedicado montado desde cero](/blog/caso-real-ia-reuniones-gemini-supabase/) - [Caso real: SaaS multitenant con NestJS y React desplegado con Coolify](/blog/caso-real-saas-atrapaclientes-nestjs-react/)]]> <![CDATA[React 19: Las Novedades que Cambian tu Código en 2026]]> https://francobosg.netlify.app/blog/react-19-novedades-que-cambian-tu-codigo-2026/ Thu, 23 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/react-19-novedades-que-cambian-tu-codigo-2026/ React Tutorial Frontend JavaScript TypeScript Next.js (null); const [success, setSuccess] = useState(false); async function handleSubmit(e: React.FormEvent) { e.preventDefault(); setIsPending(true); setError(null); try { await enviarFormulario(new FormData(e.target as HTMLFormElement)); setSuccess(true); } catch (err) { setError('Error al enviar. Inténtalo de nuevo.'); } finally { setIsPending(false); } } return ( {/* campos del formulario */} {error &&

{error}

} ); } ``` **React 19 — con Actions y useActionState:** ```tsx import { useActionState } from 'react'; async function enviarAction(prevState: any, formData: FormData) { try { await enviarFormulario(formData); return { success: true, error: null }; } catch { return { success: false, error: 'Error al enviar. Inténtalo de nuevo.' }; } } function FormularioContacto() { const [state, action, isPending] = useActionState(enviarAction, { success: false, error: null, }); return (
{/* campos del formulario */} {state.error &&

{state.error}

}
); } ``` El `isPending`, el try/catch y el reset de estado lo gestiona React. Tu código se encarga solo de la lógica de negocio. --- ## 2. useOptimistic: UI instantánea antes de que el servidor responda Uno de los patrones más útiles para UX en apps con servidor. Antes necesitabas hacerlo a mano. **Caso de uso**: lista de comentarios donde el nuevo comentario aparece al instante al enviarlo, antes de que el servidor confirme. ```tsx import { useOptimistic, useActionState } from 'react'; function ListaComentarios({ comentariosIniciales }: { comentariosIniciales: Comentario[] }) { const [comentarios, addOptimistic] = useOptimistic( comentariosIniciales, (state, nuevoComentario: string) => [ ...state, { id: Date.now(), texto: nuevoComentario, pendiente: true }, ] ); const [, action, isPending] = useActionState(async (_: any, formData: FormData) => { const texto = formData.get('comentario') as string; addOptimistic(texto); // UI actualiza INSTANTÁNEAMENTE await guardarComentario(texto); // esto puede tardar 300ms }, null); return (
{comentarios.map((c) => (
{c.texto}
))}
); } ``` El comentario aparece en la lista inmediatamente. Si el servidor falla, React hace rollback automático. --- ## 3. El hook use(): Promises y Context en medio de un render `use()` es el primer hook que puedes llamar dentro de condicionales (rompiendo la regla de siempre). **Leer una Promise (con Suspense):** ```tsx import { use, Suspense } from 'react'; function Usuario({ promesaUsuario }: { promesaUsuario: Promise }) { // Esto se puede llamar dentro de un if, un bucle, etc. const usuario = use(promesaUsuario); return

Hola, {usuario.nombre}

; } function App() { const promesa = fetchUsuario(1); // Promise return ( Cargando...

}> ); } ``` **Leer Context de forma condicional:** ```tsx function Boton({ mostrarAdmin }: { mostrarAdmin: boolean }) { if (mostrarAdmin) { // Antes esto era imposible — los hooks no se pueden usar en condicionales const admin = use(AdminContext); return ; } return ; } ``` --- ## 4. ref como prop — adiós a forwardRef Uno de los cambios más celebrados. Antes, para pasar una `ref` a un componente hijo necesitabas `forwardRef`: **React 18:** ```tsx const Input = forwardRef((props, ref) => ( )); ``` **React 19:** ```tsx function Input({ ref, ...props }: InputProps & { ref?: React.Ref }) { return ; } // Uso igual que antes: const inputRef = useRef(null); ``` `forwardRef` sigue funcionando pero está deprecado. La migración es mecánica. --- ## 5. El React Compiler: memoización automática Esta es la novedad más grande en el largo plazo. El compilador analiza tu código en build time y añade `useMemo` y `useCallback` automáticamente donde es necesario. **Antes (React 18 con optimización manual):** ```tsx function ProductoCard({ producto, onAgregar }: Props) { const precioFormateado = useMemo( () => new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR' }).format(producto.precio), [producto.precio] ); const handleAgregar = useCallback(() => { onAgregar(producto.id); }, [onAgregar, producto.id]); return (

{producto.nombre}

{precioFormateado}

); } ``` **Con React Compiler:** ```tsx function ProductoCard({ producto, onAgregar }: Props) { // Sin useMemo ni useCallback — el compilador los añade solo const precioFormateado = new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR' }).format(producto.precio); return (

{producto.nombre}

{precioFormateado}

); } ``` El output compilado incluye la memoización, el código fuente no. Limpio y eficiente. Para activarlo en Vite: ```bash npm install babel-plugin-react-compiler ``` ```js // vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [ react({ babel: { plugins: [['babel-plugin-react-compiler', {}]], }, }), ], }); ``` --- ## 6. Document metadata nativo Ya no necesitas `react-helmet` para gestionar ``, `<meta>` y `<link>` en el head: ```tsx function PaginaBlog({ post }: { post: Post }) { return ( <> <title>{post.titulo} | Mi Blog

{post.titulo}

{/* contenido */}
); } ``` React eleva estos elementos al `` automáticamente, sin portals ni librerías externas. --- ## Cómo migrar desde React 18 ```bash npm install react@19 react-dom@19 @types/react@19 @types/react-dom@19 ``` Los cambios que probablemente romperán algo: 1. **`ReactDOM.render` eliminado** → usa `ReactDOM.createRoot` 2. **`react-dom/test-utils` eliminado** → importa de `@testing-library/react` 3. **`defaultProps` en funciones** → usa parámetros por defecto de JS 4. **`propTypes` eliminado** → usa TypeScript Para el 95% de proyectos modernos (Vite + TypeScript, Next.js 14+), la migración es sin cambios o con 1-2 pequeños ajustes. --- ## Cuándo adoptar cada feature | Feature | ¿Cuándo usar? | |---------|--------------| | `useActionState` | Formularios con lógica asíncrona. Ya. | | `useOptimistic` | UX de apps tipo chat, likes, listas. | | `use()` con Promises | Data fetching con Suspense. | | `ref` como prop | Migra cuando toques esos componentes. | | React Compiler | Proyectos nuevos. Pruébalo en uno existente. | | Document metadata | Sustituye react-helmet cuando puedas. | --- ## Recursos relacionados - [Estructura de carpetas en React y Next.js que escala](/blog/estructura-carpetas-react-nextjs-2026/) - [Por qué dejé Redux y qué uso ahora](/blog/por-que-deje-redux-alternativas-2026/) - [Animaciones con Framer Motion: el nivel que parece de agencia](/blog/animaciones-framer-motion-premium-2026/) - [Autenticación con Auth.js (NextAuth v5): implementación real](/blog/auth-js-nextauth-implementacion-real-2026/) - [Caso real: SaaS con React 19 en producción](/blog/caso-real-saas-atrapaclientes-nestjs-react/)]]>
<![CDATA[Deploy Gratis con GitHub Actions: Automatiza tu Web en Netlify y Vercel (2026)]]> https://francobosg.netlify.app/blog/deploy-gratis-github-actions-netlify-vercel-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/deploy-gratis-github-actions-netlify-vercel-2026/ Tutorial Código Herramientas Gratis **Preview Deploys**: Cuando abres un PR, GitHub Actions genera una URL temporal como `pr-42--tu-sitio.netlify.app`. Puedes revisar los cambios antes de mergear. ## Opción 2: Deploy a Vercel con GitHub Actions ### Paso 1: Obtener token de Vercel ```bash # Instala Vercel CLI npm i -g vercel # Login y linkea tu proyecto vercel login vercel link ``` Esto genera `.vercel/project.json` con tu `orgId` y `projectId`. ### Paso 2: Secretos en GitHub - `VERCEL_TOKEN`: desde [vercel.com/account/tokens](https://vercel.com/account/tokens) - `VERCEL_ORG_ID`: de `.vercel/project.json` - `VERCEL_PROJECT_ID`: de `.vercel/project.json` ### Paso 3: El workflow ```yaml # .github/workflows/deploy-vercel.yml name: Deploy to Vercel on: push: branches: [main] pull_request: branches: [main] env: VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 22 cache: 'npm' - run: npm ci - run: npm run lint --if-present - run: npm test --if-present deploy: needs: test # Solo si los tests pasan runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Install Vercel CLI run: npm i -g vercel # Producción (push a main) - name: Deploy Production if: github.event_name == 'push' run: vercel --prod --token=${{ secrets.VERCEL_TOKEN }} # Preview (PRs) - name: Deploy Preview if: github.event_name == 'pull_request' run: vercel --token=${{ secrets.VERCEL_TOKEN }} ``` **Nota**: separar `test` y `deploy` en dos jobs permite que se ejecuten en paralelo si no hay dependencia, y deja claro que el deploy necesita que los tests pasen primero (`needs: test`). ## Ejemplo real: Portfolio + Blog (Vite + Astro) Este es un workflow adaptado al setup que uso en este blog — un [portfolio Vite + blog Astro](/blog/como-hice-mi-portfolio-vite-tailwind/) con build combinado: ```yaml # .github/workflows/deploy.yml name: Deploy Portfolio + Blog on: push: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 22 cache: 'npm' # Portfolio (Vite) - name: Install portfolio deps run: npm ci - name: Build portfolio run: npx vite build # Blog (Astro) - name: Install blog deps working-directory: ./blog run: npm ci - name: Build blog working-directory: ./blog run: npm run build # Deploy combinado - name: Deploy to Netlify uses: nwtgck/actions-netlify@v3 with: publish-dir: './dist' production-deploy: true env: NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} ``` ## Optimización: Caché de dependencias Si tu build tarda mucho, la mayor parte del tiempo es `npm ci`. Con caché de node_modules, los builds posteriores son mucho más rápidos: ```yaml - uses: actions/setup-node@v4 with: node-version: 22 cache: 'npm' # Cachea node_modules basándose en package-lock.json ``` Si tienes un monorepo con múltiples `package-lock.json`: ```yaml - uses: actions/setup-node@v4 with: node-version: 22 cache: 'npm' cache-dependency-path: | package-lock.json blog/package-lock.json ``` ## Notificaciones: Saber si el deploy falló ### Opción A: GitHub Status Checks Ya viene incluido. En cada PR ves el estado del workflow: ✅ verde o ❌ rojo. ### Opción B: Notificación por email GitHub te notifica por email si un workflow falla (activado por defecto en Settings → Notifications). ### Opción C: Discord webhook ```yaml - name: Notificar a Discord if: failure() run: | curl -X POST ${{ secrets.DISCORD_WEBHOOK }} \ -H "Content-Type: application/json" \ -d '{"content": "❌ Deploy fallido en `${{ github.repository }}`\nCommit: ${{ github.sha }}\nAutor: ${{ github.actor }}"}' ``` ## Workflow avanzado: Matrix builds Si quieres probar tu código en múltiples versiones de Node: ```yaml test: runs-on: ubuntu-latest strategy: matrix: node-version: [20, 22] steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} - run: npm ci - run: npm test ``` Esto ejecuta los tests en Node 20 y Node 22 en paralelo. Si falla en alguna versión, lo sabrás antes de deployar. ## Errores comunes ### "npm ci can only install with an existing package-lock.json" ```bash # Asegúrate de tener package-lock.json commiteado git add package-lock.json git commit -m "add lockfile" git push ``` ### El deploy funciona pero la web no se actualiza Verifica que `publish-dir` apunte a la carpeta correcta: ```yaml # ❌ Incorrecto si tu build genera dist/ publish-dir: './build' # ✅ Correcto publish-dir: './dist' ``` ### Secretos no encontrados Los secretos de un fork NO se comparten. Si alguien hace fork + PR, el workflow no tendrá acceso a tus secrets. Esto es intencional (seguridad). ## ¿Cuánto cuesta? | Plan | Repos públicos | Repos privados | |------|---------------|----------------| | GitHub Free | Minutos ilimitados | 2.000 min/mes | | GitHub Pro | Minutos ilimitados | 3.000 min/mes | Un build típico de Vite + Astro tarda ~2 minutos. Con 2.000 minutos al mes puedes hacer **1.000 deploys/mes** en repos privados. Para proyectos personales, es gratis de facto. ## Resumen ``` 1. Configura secretos en GitHub (tokens de Netlify/Vercel) 2. Crea .github/workflows/deploy.yml 3. El workflow: checkout → install → lint → test → build → deploy 4. Push a main → deploy a producción 5. PR → preview deploy con URL temporal 6. Si los tests fallan → deploy cancelado ``` ## Recursos relacionados - [Cómo hice mi portfolio con Vite y Tailwind](/blog/como-hice-mi-portfolio-vite-tailwind/) — el proyecto que desplegamos con este workflow - [Docker para desarrolladores](/blog/docker-para-developers-guia-practica-2026/) — containeriza tu app antes de deployar - [Comandos Git esenciales](/blog/comandos-git-esenciales-2026/) — domina Git antes de automatizar con Actions]]> <![CDATA[Docker para Desarrolladores: Guía Práctica sin Teoría Innecesaria (2026)]]> https://francobosg.netlify.app/blog/docker-para-developers-guia-practica-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/docker-para-developers-guia-practica-2026/ Docker Tutorial Código Backend **Truco**: `depends_on` solo espera a que el contenedor arranque, NO a que el servicio esté listo. Para esperar a que PostgreSQL acepte conexiones, usa un health check. ### Health checks ```yaml db: image: postgres:16-alpine environment: POSTGRES_PASSWORD: secret healthcheck: test: ["CMD-SHELL", "pg_isready -U postgres"] interval: 5s timeout: 5s retries: 5 api: build: . depends_on: db: condition: service_healthy ``` Ahora `api` no arranca hasta que PostgreSQL esté realmente listo para recibir conexiones. ## Dockerfile para producción (multi-stage) El Dockerfile básico funciona, pero incluye herramientas de build (npm, compiladores) que no necesitas en producción. Multi-stage build lo soluciona: ```dockerfile # --- Stage 1: Build --- FROM node:22-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build # --- Stage 2: Production --- FROM node:22-alpine WORKDIR /app COPY --from=builder /app/dist ./dist COPY --from=builder /app/node_modules ./node_modules COPY --from=builder /app/package.json ./ EXPOSE 3000 USER node CMD ["node", "dist/index.js"] ``` ### ¿Qué cambia? | Aspecto | Single-stage | Multi-stage | |---------|-------------|-------------| | Tamaño imagen | ~400MB | ~150MB | | Herramientas de build | Incluidas | Excluidas | | Superficie de ataque | Mayor | Menor | | `USER node` | No | Sí (no corre como root) | > **Importante**: Nunca corras contenedores como root en producción. La línea `USER node` usa el usuario `node` que viene incluido en las imágenes oficiales de Node.js. ## Ejemplo real: API NestJS + PostgreSQL + Redis Este es un `docker-compose.yml` de un proyecto real, similar al que usamos en [el caso real de Atrapaclientes](/blog/caso-real-saas-atrapaclientes-nestjs-react/): ```yaml services: api: build: context: . dockerfile: Dockerfile target: production ports: - "3000:3000" env_file: - .env depends_on: db: condition: service_healthy redis: condition: service_started restart: unless-stopped db: image: postgres:16-alpine environment: POSTGRES_USER: ${DB_USER} POSTGRES_PASSWORD: ${DB_PASS} POSTGRES_DB: ${DB_NAME} volumes: - pgdata:/var/lib/postgresql/data healthcheck: test: ["CMD-SHELL", "pg_isready -U ${DB_USER}"] interval: 10s timeout: 5s retries: 5 restart: unless-stopped redis: image: redis:7-alpine command: redis-server --requirepass ${REDIS_PASS} volumes: - redisdata:/data restart: unless-stopped volumes: pgdata: redisdata: ``` **Notas clave:** - `env_file: .env` carga variables de entorno. **Nunca hardcodees contraseñas** en el compose. - `restart: unless-stopped` hace que los contenedores se reinicien si caen (excepto si los paras manualmente). - Los volúmenes (`pgdata`, `redisdata`) persisten datos entre reinicios del contenedor. ## Errores típicos y cómo evitarlos ### 1. "Port already in use" ```bash # Algo ya está usando el puerto 5432 docker compose up -d # Error: port is already allocated # Solución: encuentra qué lo usa # Windows netstat -ano | findstr :5432 # Linux/Mac lsof -i :5432 ``` ### 2. Cambios en el código no se reflejan En desarrollo, monta tu código como volumen para que los cambios se apliquen en caliente: ```yaml api: build: . volumes: - ./src:/app/src # Monta el código fuente command: npm run dev # Usa nodemon o tsx --watch ``` ### 3. La imagen pesa demasiado ```bash # Ver el tamaño de tus imágenes docker images # Usa alpine como base (mucho más ligera) FROM node:22-alpine # ~130MB # vs FROM node:22 # ~1.1GB ``` ### 4. "Cannot connect to database" al arrancar Tu API arranca antes que la DB esté lista. Usa health checks (explicado arriba) o añade retry en tu código: ```javascript // Retry de conexión a la DB async function connectWithRetry(retries = 5, delay = 3000) { for (let i = 0; i < retries; i++) { try { await dataSource.initialize(); console.log('DB conectada'); return; } catch (err) { console.log(`Intento ${i + 1}/${retries} fallido, reintentando...`); await new Promise(r => setTimeout(r, delay)); } } throw new Error('No se pudo conectar a la DB'); } ``` ## Cheatsheet: Comandos Docker esenciales ```bash # --- Imágenes --- docker build -t nombre . # Construir imagen docker images # Listar imágenes docker rmi nombre # Eliminar imagen docker image prune -a # Limpiar imágenes sin usar # --- Contenedores --- docker run -d -p 3000:3000 nombre # Ejecutar en background docker ps # Ver contenedores activos docker stop $(docker ps -q) # Parar TODOS docker rm $(docker ps -aq) # Eliminar TODOS # --- Compose --- docker compose up -d # Levantar servicios docker compose down # Parar servicios docker compose logs -f api # Logs de un servicio docker compose exec api sh # Entrar en un servicio # --- Limpieza --- docker system prune -a # Limpiar TODO lo que no se usa docker volume prune # Limpiar volúmenes huérfanos ``` ## Próximos pasos - Si quieres automatizar el deploy de tu imagen Docker, mira cómo hacerlo con [GitHub Actions y Netlify/Vercel](/blog/deploy-gratis-github-actions-netlify-vercel-2026/) - Para proyectos reales con NestJS y Docker, revisa el [caso real de Atrapaclientes](/blog/caso-real-saas-atrapaclientes-nestjs-react/) - Si estás aprendiendo desarrollo, la [guía para estudiantes DAW/DAM](/blog/guia-estudiantes-daw-dam-smr-2026/) incluye recursos de Docker para principiantes]]> <![CDATA[Proteger tu API en Node.js con JWT: Guía Completa de Autenticación (2026)]]> https://francobosg.netlify.app/blog/proteger-api-nodejs-jwt-auth-guia-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/proteger-api-nodejs-jwt-auth-guia-2026/ Backend Tutorial Código NestJS **Genera secretos seguros** con: `node -e "console.log(require('crypto').randomBytes(64).toString('hex'))"`. Nunca uses strings como `"mi-secreto"`. ## Paso 2: Generar y verificar tokens ```typescript // src/tokens.ts import jwt from 'jsonwebtoken'; import { config } from './config'; interface TokenPayload { userId: string; email: string; } export function generateAccessToken(payload: TokenPayload): string { return jwt.sign(payload, config.accessTokenSecret, { expiresIn: config.accessTokenExpiry, }); } export function generateRefreshToken(payload: TokenPayload): string { return jwt.sign(payload, config.refreshTokenSecret, { expiresIn: config.refreshTokenExpiry, }); } export function verifyAccessToken(token: string): TokenPayload { return jwt.verify(token, config.accessTokenSecret) as TokenPayload; } export function verifyRefreshToken(token: string): TokenPayload { return jwt.verify(token, config.refreshTokenSecret) as TokenPayload; } ``` **¿Por qué dos secretos diferentes?** Si alguien roba el access token secret, no puede generar refresh tokens (y viceversa). Minimizas el daño de una filtración. ## Paso 3: Middleware de autenticación ```typescript // src/middleware/auth.ts import { Request, Response, NextFunction } from 'express'; import { verifyAccessToken } from '../tokens'; declare global { namespace Express { interface Request { user?: { userId: string; email: string }; } } } export function authenticate(req: Request, res: Response, next: NextFunction) { const authHeader = req.headers.authorization; if (!authHeader?.startsWith('Bearer ')) { return res.status(401).json({ error: 'Token no proporcionado' }); } const token = authHeader.split(' ')[1]; try { const payload = verifyAccessToken(token); req.user = payload; next(); } catch (err) { return res.status(401).json({ error: 'Token inválido o expirado' }); } } ``` ## Paso 4: Rutas de autenticación ```typescript // src/routes/auth.ts import { Router, Request, Response } from 'express'; import bcrypt from 'bcryptjs'; import { generateAccessToken, generateRefreshToken, verifyRefreshToken } from '../tokens'; const router = Router(); // Simulación de DB — en producción usa PostgreSQL, MongoDB, etc. const users = new Map(); // --- REGISTRO --- router.post('/register', async (req: Request, res: Response) => { const { email, password } = req.body; if (!email || !password) { return res.status(400).json({ error: 'Email y contraseña requeridos' }); } if (users.has(email)) { return res.status(409).json({ error: 'El email ya está registrado' }); } // Hash de contraseña — NUNCA guardes contraseñas en texto plano const passwordHash = await bcrypt.hash(password, 12); const id = crypto.randomUUID(); users.set(email, { id, email, passwordHash }); return res.status(201).json({ message: 'Usuario creado' }); }); // --- LOGIN --- router.post('/login', async (req: Request, res: Response) => { const { email, password } = req.body; const user = users.get(email); if (!user) { // Mensaje genérico — no reveles si el email existe o no return res.status(401).json({ error: 'Credenciales inválidas' }); } const validPassword = await bcrypt.compare(password, user.passwordHash); if (!validPassword) { return res.status(401).json({ error: 'Credenciales inválidas' }); } const payload = { userId: user.id, email: user.email }; const accessToken = generateAccessToken(payload); const refreshToken = generateRefreshToken(payload); // Refresh token en cookie httpOnly (inaccesible desde JS del navegador) res.cookie('refreshToken', refreshToken, { httpOnly: true, // No accesible desde JavaScript secure: true, // Solo HTTPS sameSite: 'strict', // Protección CSRF maxAge: 7 * 24 * 60 * 60 * 1000, // 7 días path: '/auth/refresh', // Solo se envía a esta ruta }); return res.json({ accessToken }); }); // --- REFRESH TOKEN --- router.post('/refresh', (req: Request, res: Response) => { const token = req.cookies?.refreshToken; if (!token) { return res.status(401).json({ error: 'Refresh token no proporcionado' }); } try { const payload = verifyRefreshToken(token); const newPayload = { userId: payload.userId, email: payload.email }; // Rotación de tokens: genera AMBOS de nuevo const newAccessToken = generateAccessToken(newPayload); const newRefreshToken = generateRefreshToken(newPayload); res.cookie('refreshToken', newRefreshToken, { httpOnly: true, secure: true, sameSite: 'strict', maxAge: 7 * 24 * 60 * 60 * 1000, path: '/auth/refresh', }); return res.json({ accessToken: newAccessToken }); } catch { // Refresh token inválido o expirado — el usuario debe hacer login de nuevo res.clearCookie('refreshToken'); return res.status(401).json({ error: 'Sesión expirada, inicia sesión de nuevo' }); } }); // --- LOGOUT --- router.post('/logout', (_req: Request, res: Response) => { res.clearCookie('refreshToken', { path: '/auth/refresh' }); return res.json({ message: 'Sesión cerrada' }); }); export default router; ``` ### Detalles de seguridad clave | Decisión | Por qué | |----------|---------| | `httpOnly: true` en cookie | El JS del navegador no puede leer el refresh token → previene XSS | | `secure: true` | La cookie solo se envía por HTTPS → previene man-in-the-middle | | `sameSite: 'strict'` | La cookie no se envía en peticiones cross-origin → previene CSRF | | `path: '/auth/refresh'` | La cookie solo se envía al endpoint de refresh → minimiza exposición | | Mensajes genéricos en login | No revelas si un email existe → previene enumeración de usuarios | | Rotación de refresh tokens | Si roban un refresh token viejo, ya no sirve → reduce ventana de ataque | ## Paso 5: Servidor principal ```typescript // src/index.ts import express from 'express'; import cookieParser from 'cookie-parser'; import { config } from './config'; import authRoutes from './routes/auth'; import { authenticate } from './middleware/auth'; const app = express(); app.use(express.json()); app.use(cookieParser()); // Rutas públicas app.use('/auth', authRoutes); // Rutas protegidas — necesitan access token válido app.get('/me', authenticate, (req, res) => { res.json({ user: req.user }); }); app.get('/dashboard', authenticate, (req, res) => { res.json({ message: `Bienvenido, ${req.user!.email}` }); }); app.listen(config.port, () => { console.log(`API corriendo en http://localhost:${config.port}`); }); ``` ## Flujo completo ```bash # 1. Registrar usuario curl -X POST http://localhost:3000/auth/register \ -H "Content-Type: application/json" \ -d '{"email": "dev@example.com", "password": "S3gur0!2026"}' # 2. Login → recibe accessToken + refreshToken en cookie curl -X POST http://localhost:3000/auth/login \ -H "Content-Type: application/json" \ -d '{"email": "dev@example.com", "password": "S3gur0!2026"}' \ -c cookies.txt # Respuesta: { "accessToken": "eyJhbGc..." } # 3. Petición protegida con el access token curl http://localhost:3000/me \ -H "Authorization: Bearer eyJhbGc..." # 4. Cuando expira → refresh curl -X POST http://localhost:3000/auth/refresh \ -b cookies.txt -c cookies.txt # Respuesta: { "accessToken": "eyJhbGc...(nuevo)" } # 5. Logout curl -X POST http://localhost:3000/auth/logout -b cookies.txt ``` ## Versión NestJS (Guards) Si usas NestJS (como en [nuestro caso real con Atrapaclientes](/blog/caso-real-saas-atrapaclientes-nestjs-react/)), la autenticación se implementa con Guards: ```typescript // auth/jwt.guard.ts import { Injectable, CanActivate, ExecutionContext, UnauthorizedException } from '@nestjs/common'; import { JwtService } from '@nestjs/jwt'; @Injectable() export class JwtAuthGuard implements CanActivate { constructor(private jwtService: JwtService) {} canActivate(context: ExecutionContext): boolean { const request = context.switchToHttp().getRequest(); const authHeader = request.headers.authorization; if (!authHeader?.startsWith('Bearer ')) { throw new UnauthorizedException('Token no proporcionado'); } try { const token = authHeader.split(' ')[1]; const payload = this.jwtService.verify(token); request.user = payload; return true; } catch { throw new UnauthorizedException('Token inválido o expirado'); } } } ``` ```typescript // users/users.controller.ts import { Controller, Get, UseGuards, Req } from '@nestjs/common'; import { JwtAuthGuard } from '../auth/jwt.guard'; @Controller('users') export class UsersController { @Get('me') @UseGuards(JwtAuthGuard) getProfile(@Req() req) { return { user: req.user }; } } ``` ## Errores comunes de seguridad (y cómo evitarlos) ### 1. Guardar JWT en localStorage ```javascript // ❌ NUNCA hagas esto localStorage.setItem('token', accessToken); // Un ataque XSS puede leer localStorage y robar el token // ✅ Guarda el access token en memoria (variable JS) let accessToken = null; async function login(email, password) { const res = await fetch('/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, password }), credentials: 'include', // Para recibir la cookie httpOnly }); const data = await res.json(); accessToken = data.accessToken; // Solo en memoria } ``` ### 2. Access token con expiración larga ```typescript // ❌ Expiración de 30 días — si roban el token, tienen acceso un mes jwt.sign(payload, secret, { expiresIn: '30d' }); // ✅ Expiración corta (15 min) + refresh token para renovar jwt.sign(payload, secret, { expiresIn: '15m' }); ``` ### 3. No hashear contraseñas (o usar MD5/SHA) ```typescript // ❌ MD5 — se crackea en segundos con rainbow tables const hash = md5(password); // ❌ SHA256 — más seguro que MD5 pero no tiene salt automático const hash = crypto.createHash('sha256').update(password).digest('hex'); // ✅ bcrypt — salt automático, computacionalmente costoso const hash = await bcrypt.hash(password, 12); ``` ### 4. Revelar si un email existe en el login ```typescript // ❌ Revela que el email existe if (!user) return res.status(404).json({ error: 'Usuario no encontrado' }); if (!validPassword) return res.status(401).json({ error: 'Contraseña incorrecta' }); // ✅ Mensaje genérico para ambos casos return res.status(401).json({ error: 'Credenciales inválidas' }); ``` ## Checklist de seguridad para tu API - [ ] Secretos JWT generados con `crypto.randomBytes(64)` - [ ] Access token con expiración <= 15 minutos - [ ] Refresh token en cookie `httpOnly`, `secure`, `sameSite` - [ ] Contraseñas hasheadas con bcrypt (rounds >= 12) - [ ] HTTPS obligatorio en producción - [ ] Mensajes de error genéricos en login - [ ] Rotación de refresh tokens - [ ] Rate limiting en `/auth/login` para prevenir fuerza bruta - [ ] CORS configurado solo para dominios de confianza - [ ] Headers de seguridad (Helmet en Express) ## Recursos relacionados - [Error 429 Too Many Requests: cómo manejar rate limiting](/blog/error-429-too-many-requests-api-ia-2026/) — aplica también a tus endpoints de login - [Por qué NestJS sobre Express para un SaaS](/blog/por-que-nestjs-sobre-express-saas-2026/) — Guards, interceptores y módulos para auth escalable - [Caso real SaaS Atrapaclientes](/blog/caso-real-saas-atrapaclientes-nestjs-react/) — autenticación JWT en un producto real con multi-tenancy]]> <![CDATA[Mi Agente de IA Ha Entrado en un Bucle Infinito: Cómo Pararlo y Prevenirlo]]> https://francobosg.netlify.app/blog/agente-ia-bucle-infinito-cline-cursor-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/agente-ia-bucle-infinito-cline-cursor-2026/ IA Código Herramientas Si usas [Aider](/blog/aider-ia-terminal-barata-alternativa-cursor-2026/), cada iteración es un commit — puedes hacer `git revert` del último commit del agente sin perder nada. ## Cómo prevenir los bucles ### 1. Configura un límite de iteraciones **Cline:** En la configuración de la extensión: ```json { "cline.maxIterations": 5, "cline.autoApprove": false // NUNCA actives auto-approve sin límite } ``` **Cursor:** En Settings → AI → Max iterations: pon 5-10 como máximo. **API directa:** Si tienes tu propio loop de agente: ```javascript const MAX_ITERATIONS = 5; let iterations = 0; while (hasErrors && iterations < MAX_ITERATIONS) { const fix = await agent.suggestFix(currentError); await applyFix(fix); const result = await runBuild(); hasErrors = !result.success; iterations++; if (iterations >= MAX_ITERATIONS) { console.log('⚠️ Límite de iteraciones alcanzado. Revisión manual necesaria.'); break; } } ``` ### 2. No le des autonomía total ``` // ❌ Prompt peligroso "Arregla todos los errores de TypeScript del proyecto hasta que compile" // ✅ Prompt controlado "Arregla el error de tipo en src/auth/service.ts línea 45. Solo modifica ese archivo. Si el fix requiere cambiar otros archivos, dime cuáles ANTES de hacerlo." ``` ### 3. Divide los errores en tareas pequeñas En vez de "arregla los 15 errores de TypeScript", haz: ``` Tarea 1: "Arregla el error en src/auth/service.ts:45" → Verifica que compila Tarea 2: "Arregla el error en src/users/controller.ts:12" → Verifica que compila ... ``` Un error a la vez. Si un fix introduce un error nuevo, lo detectas inmediatamente. ### 4. Usa el modo "Dry Run" o "Plan" Antes de que el agente ejecute cambios, pídele un plan: ``` ANTES de hacer cambios, analiza el error y dame: 1. Qué archivos necesitas modificar 2. Qué cambio harás en cada uno 3. Qué otros archivos podrían verse afectados NO hagas cambios todavía. Solo el plan. ``` Revisa el plan. Si ves que va a tocar 10 archivos para un "error simple", probablemente el agente no entiende el problema y va a entrar en bucle. ### 5. Guarda un checkpoint antes de cada tarea del agente ```bash # Antes de darle una tarea al agente git add -A && git commit -m "checkpoint: antes de refactor auth" # Si el agente la lía, vuelves al checkpoint git reset --hard HEAD ``` ## Coste real de un bucle: Caso con números Un bucle típico de 20 iteraciones con Cline + Claude Sonnet 4: | Concepto | Tokens | Coste | |----------|--------|-------| | Input por iteración (código + instrucciones) | ~8.000 | $0.024 | | Output por iteración (fix + explicación) | ~2.000 | $0.030 | | **20 iteraciones** | **200.000** | **$1.08** | Con Claude Opus 4 el mismo bucle cuesta **~$6.40**. Con GPT-4.1 cuesta **~$1.60**. Si el agente está en modo autónomo y nadie lo para, puede hacer 100+ iteraciones antes de que llegues al límite de la API. Eso son **$5-30 quemados** por un error que podrías haber arreglado manualmente en 5 minutos. > Para controlar estos costes, revisa [cómo programar con IA sin arruinarte](/blog/programar-con-ia-sin-arruinarte-guia-2026/) y [caveman prompting para ahorrar tokens](/blog/caveman-prompting-ahorrar-tokens-ia-2026/). ## Checklist anti-bucle - [ ] Límite de iteraciones configurado (5-10 max) - [ ] Auto-approve desactivado - [ ] Commit/checkpoint antes de cada tarea del agente - [ ] Tareas pequeñas y específicas (un error a la vez) - [ ] Plan antes de ejecución en tareas complejas - [ ] `git diff` después de cada tarea para revisar los cambios - [ ] Rate limit o presupuesto diario configurado en la API ## Artículos relacionados - [Errores comunes al configurar Copilot, Cline y Cursor en VS Code](/blog/errores-comunes-ia-vscode-copilot-cline-2026/) — problemas de configuración - [Aider: programar con IA desde la terminal](/blog/aider-ia-terminal-barata-alternativa-cursor-2026/) — el agente que hace commits automáticos (fácil de revertir) - [Error 429 Too Many Requests](/blog/error-429-too-many-requests-api-ia-2026/) — qué hacer cuando el bucle agota tus rate limits]]> <![CDATA[Cómo Resolver un Git Merge Conflict Masivo Provocado por Código de IA]]> https://francobosg.netlify.app/blog/git-merge-conflict-codigo-ia-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/git-merge-conflict-codigo-ia-2026/ Git IA Herramientas r.json()) // La IA "mejoró" el mismo archivo: + const response = await fetch(url); + const result = await response.json(); ``` Semánticamente es lo mismo, pero Git ve líneas diferentes → conflicto. ### 3. Imports reorganizados ```diff // Rama original: - import { useState } from 'react'; - import { useRouter } from 'next/router'; // La IA reorganizó: + import { useRouter } from 'next/router'; + import { useState } from 'react'; ``` Solo cambió el orden. Git: **CONFLICT**. ## Paso 1: No entres en pánico — Evalúa el daño ```bash # ¿Cuántos archivos tienen conflicto? git diff --name-only --diff-filter=U # ¿Cuántos conflictos por archivo? grep -rn "<<<<<<< " --include="*.ts" --include="*.tsx" --include="*.js" | wc -l # Ver un resumen visual git mergetool --tool=vimdiff # O usa VS Code ``` Clasifica los conflictos: | Tipo | Cantidad típica | Estrategia | |------|----------------|------------| | Solo formato (misma lógica) | 60% | Acepta una versión completa | | Cambio real en ambos lados | 25% | Merge manual | | Archivos que solo tocó la IA | 10% | Acepta la versión de la IA (o la tuya) | | Archivos nuevos/eliminados | 5% | Decide cuáles mantener | ## Paso 2: Resuelve los conflictos fáciles primero ### Acepta una versión completa para archivos de solo formato ```bash # Acepta la versión de la rama actual (la tuya / la de la IA) git checkout --ours src/utils/format.ts # Acepta la versión de la otra rama (main) git checkout --theirs src/utils/format.ts # Marcar como resuelto git add src/utils/format.ts ``` ### Resolver varios archivos de golpe ```bash # Aceptar TODOS los archivos de un directorio desde la otra rama git checkout --theirs src/styles/* git add src/styles/* # Aceptar todos los archivos que solo cambió la IA # (archivos que no existen en la otra rama = solo IA los tocó) git diff --name-only --diff-filter=U | xargs git checkout --ours ``` > **Cuidado**: `--ours` y `--theirs` se invierten en `git rebase` vs `git merge`. En merge: `ours` = tu rama, `theirs` = la rama que estás mergeando. En rebase es al revés. ## Paso 3: VS Code Merge Editor para conflictos complejos VS Code tiene un editor de merge visual: 1. Abre un archivo con conflicto 2. VS Code muestra botones: **Accept Current | Accept Incoming | Accept Both | Compare** 3. Usa "Compare Changes" para ver las diferencias lado a lado Para archivos más complejos: ``` Ctrl+Shift+P → "Merge Editor: Open Merge Editor" ``` El editor de 3 vías muestra: - **Izquierda**: Tu versión (current) - **Derecha**: La otra versión (incoming) - **Abajo**: El resultado combinado Puedes seleccionar líneas de cada lado y construir el resultado. ## Paso 4: Pedir a la IA que resuelva el conflicto Para conflictos específicos, puedes pasar el diff a un modelo: ``` Este archivo tiene un merge conflict. Aquí está el diff completo: [Pega el contenido del archivo con los marcadores <<<<<<< ======= >>>>>>>] Resuelve el conflicto combinando ambas versiones. Mantén toda la funcionalidad de ambas ramas. Dame el archivo completo resuelto, SIN marcadores de conflicto. ``` **Cuándo funciona bien**: Conflictos en imports, cambios de formato, renombrado de variables. **Cuándo NO usarlo**: Lógica de negocio diferente en ambas ramas, cambios en la estructura de datos. ## Paso 5: Verificar y commitear ```bash # Verificar que no quedan conflictos grep -rn "<<<<<<< " --include="*.ts" --include="*.tsx" --include="*.js" # (debe devolver 0 resultados) # Verificar que compila npm run build # Verificar que los tests pasan npm test # Commit del merge git add -A git commit -m "merge: resolver conflictos con main tras refactor IA" ``` ## Cómo prevenir conflictos masivos con IA ### 1. Commits pequeños y frecuentes ```bash # ❌ Un commit gigante tras 3 días de refactoring con IA git add -A && git commit -m "refactor everything" # ✅ Un commit por cada tarea del agente git add src/auth/ && git commit -m "refactor: auth module con Cursor" git add src/api/ && git commit -m "refactor: api client con Cursor" ``` ### 2. Merge main frecuentemente ```bash # Cada mañana, antes de seguir trabajando con la IA: git fetch origin git merge origin/main # Resolver conflictos pequeños es más fácil que uno masivo ``` ### 3. Configura Prettier ANTES del refactoring de IA Si todos usan el mismo Prettier config, la IA no puede reformatear "a su estilo": ```bash # Antes del refactoring, formatea todo el proyecto npx prettier --write "src/**/*.{ts,tsx,js,jsx}" git add -A && git commit -m "style: formateo con prettier" # AHORA deja que la IA trabaje # Los cambios serán solo de lógica, no de formato ``` ### 4. Pide a la IA que no reformatee ``` Modifica SOLO la lógica de autenticación en src/auth/service.ts. NO cambies el formato, el orden de los imports ni renombres variables que no sean necesarias. Minimiza los cambios — menos líneas cambiadas = menos conflictos en git. ``` ### 5. Usa ramas cortas ```bash # ❌ Rama de 2 semanas con 200 commits de IA git checkout -b feature/mega-refactor # Conflictos garantizados # ✅ Ramas de 1-2 días máximo git checkout -b fix/auth-validation # Merge rápido, pocos conflictos ``` ## Herramientas útiles | Herramienta | Para qué | |-------------|----------| | **VS Code Merge Editor** | Merge visual de 3 vías integrado | | **git mergetool** | Abre la herramienta de merge configurada | | **IntelliJ Merge** | El mejor merge visual (disponible en Community Edition gratis) | | **meld** | Herramienta visual de merge para Linux | | **delta** | Mejor visualización de diffs en terminal | | **git rerere** | Recuerda cómo resolviste conflictos anteriores | ### Activar git rerere (muy recomendado) ```bash git config --global rerere.enabled true ``` `rerere` = "reuse recorded resolution". Si resuelves un conflicto y luego haces otro merge con el mismo conflicto, Git lo resuelve automáticamente con la misma solución. ## Resumen | Situación | Acción | |-----------|--------| | Conflicto de solo formato | `git checkout --ours/--theirs` | | Conflicto de lógica simple | VS Code Merge Editor | | Conflicto complejo | Pasar a ChatGPT + revisar manualmente | | Prevención | Commits pequeños + merge diario + Prettier | | Monorepo con IA | Ramas cortas + no reformatear + `rerere` | ## Artículos relacionados - [Comandos Git esenciales](/blog/comandos-git-esenciales-2026/) — los comandos que necesitas para manejar conflictos - [Cursor vs Copilot vs Windsurf](/blog/cursor-vs-copilot-vs-windsurf-2026/) — qué editor genera cambios más limpios - [Errores comunes al configurar IA en VS Code](/blog/errores-comunes-ia-vscode-copilot-cline-2026/) — problemas con extensiones de IA]]> <![CDATA[La IA Me Da Código Incompleto: Cómo Solucionar el 'Lazy Coding' de ChatGPT y Claude]]> https://francobosg.netlify.app/blog/ia-codigo-incompleto-lazy-coding-solucion-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/ia-codigo-incompleto-lazy-coding-solucion-2026/ IA Código Herramientas {/* ... resto del JSX ... */}
); } ``` **60% del código es `// ...`**. No te ha dado nada útil. Has perdido 30 segundos esperando la respuesta y ahora tienes que juntar las piezas como un rompecabezas. Este problema tiene nombre: **Lazy Coding**. Y todos los modelos de IA lo hacen — unos más que otros. ## Por qué la IA hace lazy coding ### 1. Límite de tokens de salida Cada modelo tiene un máximo de tokens que puede generar en una respuesta: | Modelo | Max output tokens | ¿Suficiente para código largo? | |--------|------------------|-------------------------------| | GPT-4.1 | 32.768 | Sí, pero se "cansa" antes | | GPT-4.1 mini | 16.384 | Justo para archivos medianos | | Claude Sonnet 4 | 16.384 | Buen balance | | Claude Opus 4 | 32.768 | El más generoso | Pero el problema no es solo el límite técnico — los modelos están **entrenados para ser concisos**. En el entrenamiento, las respuestas cortas y resumidas se premiaron más que las respuestas exhaustivas. ### 2. El modelo "cree" que ya sabes el resto Cuando le pasas tu código existente y pides un cambio, el modelo interpreta que solo quieres ver **la diferencia**. Es lógico para una conversación humana, pero inútil cuando necesitas copiar-pegar el archivo completo. ### 3. Repeticiones penalizadas Los LLMs penalizan la generación de texto repetitivo. Si tu archivo tiene 50 líneas de JSX similares, el modelo las resume con `// ... resto del JSX` porque generar cada una le "cuesta" probabilísticamente. ## Cómo evitarlo: Prompts que funcionan ### Prompt directo anti-lazy ``` Reescribe este archivo COMPLETO con los cambios aplicados. NO omitas código. NO uses "// ..." ni "// existing code". Incluye TODAS las líneas del archivo, incluidas las que no cambian. Necesito poder copiar y pegar tu respuesta directamente. ``` ### Prompt para cambios parciales (cuando es un archivo enorme) ``` Muéstrame SOLO las funciones que cambian, pero cada función COMPLETA (desde la declaración hasta el cierre). No omitas líneas dentro de las funciones. ``` ### Prompt estilo diff (ahorra tokens y es preciso) ``` Dame los cambios en formato diff (unified diff). Solo las líneas que cambian con 3 líneas de contexto. ``` Respuesta del modelo: ```diff @@ -15,7 +15,9 @@ export function Dashboard() { const [data, setData] = useState(null); + const [loading, setLoading] = useState(true); useEffect(() => { - fetchData().then(setData); + setLoading(true); + fetchData().then(setData).finally(() => setLoading(false)); }, []); ``` Esto es mucho más útil que recibir medio archivo con `// ...`. ## Comparativa: ¿Qué herramienta hace menos lazy coding? Probé el mismo prompt ("refactoriza este componente de 180 líneas para añadir cache") en 5 herramientas: | Herramienta | Código completo | Lazy coding | Notas | |------------|----------------|-------------|-------| | ChatGPT (web) | ❌ 40% | 60% omitido | El peor — resume todo | | Claude (web) | ⚠️ 70% | 30% omitido | Mejor, pero aún corta | | GitHub Copilot Chat | ⚠️ 65% | 35% omitido | Depende del prompt | | Cursor (Agent mode) | ✅ 95% | 5% omitido | Edita el archivo directamente | | Aider + Claude | ✅ 98% | 2% omitido | El mejor — edita con diffs | > Los editores que trabajan directamente con archivos (Cursor, Aider, Copilot Edits) hacen mucho menos lazy coding porque no necesitan "mostrar" el código en chat — lo aplican directamente. ## Técnica avanzada: System prompt para APIs Si usas la API directamente (no la web), puedes añadir un system prompt persistente: ```javascript const response = await openai.chat.completions.create({ model: 'gpt-4.1', messages: [ { role: 'system', content: `Eres un asistente de código. Reglas estrictas: 1. SIEMPRE escribe el código completo, nunca omitas líneas 2. NUNCA uses "// ..." o "// existing code" o "// resto del código" 3. Si el archivo es muy largo, divide la respuesta en partes numeradas 4. Cada función debe estar completa de principio a fin` }, { role: 'user', content: `Refactoriza este archivo:\n\n${fileContent}` } ], max_tokens: 16384, // Asegúrate de dar suficiente espacio }); ``` > Para APIs, revisa [cómo usar la API de ChatGPT y Claude sin arruinarte](/blog/programar-con-ia-sin-arruinarte-guia-2026/). El max_tokens alto sube el coste pero evita respuestas cortadas. ## Técnica nuclear: Divide el archivo antes de pedir Si tu archivo tiene +300 líneas, **no se lo pases entero**. Divídelo: ``` Tengo un archivo con 3 secciones: 1. Imports y tipos (líneas 1-30) 2. Hooks y lógica (líneas 31-120) 3. JSX/render (líneas 121-300) Necesito cambiar la sección 2. Te la paso completa. Dame la sección 2 COMPLETA con los cambios. Yo la pegaré en su sitio. [Pega solo las líneas 31-120] ``` Así el modelo no tiene la tentación de resumir las otras secciones porque no las tiene. ## Configuración en editores para reducir lazy coding ### Cursor ```json // .cursorrules (en la raíz del proyecto) Always write complete code. Never use placeholder comments like "// existing code" or "// ...". When editing a file, rewrite the entire function or component, not just the changed lines. ``` ### GitHub Copilot En VS Code, usa el modo **Copilot Edits** en lugar del chat normal. Edits modifica el archivo directamente y no necesita "mostrar" el código. ### Cline / Claude Dev ```json // En la configuración de Cline, system prompt personalizado: "When writing code, always provide complete implementations. Never abbreviate with comments. Write every line." ``` ## ¿Cuándo está bien que la IA resuma? No siempre es malo. A veces **quieres** que resuma: - **Revisión de código**: "¿Ves bugs en este archivo?" → No necesitas que reescriba todo - **Explicaciones**: "¿Qué hace esta función?" → Solo necesitas la explicación - **Diffs pequeños**: Si cambias una línea, no necesitas las otras 299 El lazy coding solo es un problema cuando necesitas **código ejecutable que puedas copiar y pegar** o que el editor aplique directamente. ## Resumen | Situación | Solución | |-----------|----------| | Chat web (ChatGPT/Claude) | Prompt explícito: "código COMPLETO, sin omisiones" | | API directa | System prompt + max_tokens alto | | Archivo enorme (+300 líneas) | Divide en secciones, pide una a la vez | | Editor (Cursor/Copilot) | Usa modo Agent/Edits en vez de chat | | Terminal (Aider) | Ya genera código completo por defecto | ## Artículos relacionados - [Mejores prompts para programar con IA](/blog/mejores-prompts-programar-ia-2026/) — técnicas avanzadas para sacar código de calidad - [Cursor vs Copilot vs Windsurf](/blog/cursor-vs-copilot-vs-windsurf-2026/) — qué editor genera código más completo - [Errores comunes al configurar Copilot y Cline](/blog/errores-comunes-ia-vscode-copilot-cline-2026/) — soluciones rápidas para problemas del editor]]> <![CDATA[La IA Me Sugirió un Paquete NPM que No Existe: Alucinaciones en Desarrollo Web]]> https://francobosg.netlify.app/blog/ia-alucina-paquetes-npm-no-existen-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/ia-alucina-paquetes-npm-no-existen-2026/ IA Código Herramientas **Regla general**: Si el nombre del paquete describe exactamente lo que quieres hacer, probablemente la IA lo inventó. Los paquetes reales suelen tener nombres más creativos (express, lodash, zod, prisma). ## Cómo pedir dependencias a la IA sin riesgo ### Prompt seguro ``` Necesito implementar autenticación OAuth2 en Express.js. Dame el nombre EXACTO del paquete npm más popular para esto. Incluye el enlace a su página en npmjs.com o su repositorio de GitHub. NO inventes paquetes — si no estás seguro del nombre exacto, dímelo. ``` ### Prompt de verificación ``` ¿El paquete "express-oauth2-simple" existe realmente en npm? Si no existe, ¿cuál es la alternativa real más usada? ``` La mayoría de modelos recientes (GPT-4.1, Claude Sonnet 4) son más honestos cuando les preguntas directamente si están seguros. ## Script para auditar dependencias alucinadas Si ya tienes un proyecto con muchas dependencias y quieres verificar que todas son legítimas: ```bash #!/bin/bash # audit-deps.sh — Verifica que todas tus dependencias existen en npm echo "🔍 Verificando dependencias..." for pkg in $(node -e " const pkg = require('./package.json'); const deps = { ...pkg.dependencies, ...pkg.devDependencies }; console.log(Object.keys(deps).join('\n')); "); do result=$(npm view "$pkg" name 2>&1) if echo "$result" | grep -q "404"; then echo "❌ $pkg — NO EXISTE en npm" else downloads=$(npm view "$pkg" --json 2>/dev/null | node -e " let d='';process.stdin.on('data',c=>d+=c);process.stdin.on('end',()=>{ try{console.log(JSON.parse(d).name)}catch{console.log('?')} })") echo "✅ $pkg" fi done ``` ## Resumen | Acción | Cuándo | |--------|--------| | Buscar en npmjs.com | **Siempre** antes de instalar un paquete sugerido por IA | | `npm info paquete` | Cuando tienes dudas sobre un nombre | | Verificar descargas semanales | Si el paquete existe pero no lo conoces | | Revisar la API en la documentación | Cuando la IA usa métodos que no reconoces | | Pedir enlace a GitHub/npm al prompt | Como hábito en cada prompt | ## Artículos relacionados - [Testear código generado por IA](/blog/testear-codigo-generado-ia-copilot-cursor-2026/) — no confíes ciegamente en lo que genera - [Mejores modelos de IA para programar](/blog/mejores-modelos-ia-para-programar-2026/) — qué modelos alucinan menos - [Errores comunes al configurar Copilot y Cline](/blog/errores-comunes-ia-vscode-copilot-cline-2026/) — más problemas con IA en el editor]]> <![CDATA[Prettier No Formatea al Guardar en VS Code: Guía Definitiva Paso a Paso]]> https://francobosg.netlify.app/blog/prettier-no-formatea-guardar-vscode-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/prettier-no-formatea-guardar-vscode-2026/ VS Code Herramientas JavaScript Hay extensiones falsas/antiguas como "Prettier+" o "JS Beautify Prettier". Desinstálalas si las tienes. ## Paso 2: Activa formatOnSave Abre tu `settings.json` (`Ctrl+Shift+P` → "Preferences: Open User Settings (JSON)"): ```json { "editor.formatOnSave": true } ``` **Atención**: Hay DOS archivos settings.json: - **User settings** (global): aplica a todos los proyectos - **Workspace settings** (`.vscode/settings.json`): aplica solo a este proyecto Si el workspace settings tiene `"editor.formatOnSave": false`, **anula** el user settings. Verifica ambos: ```bash # User settings (global) # Windows: %APPDATA%\Code\User\settings.json # Mac: ~/Library/Application Support/Code/User/settings.json # Linux: ~/.config/Code/User/settings.json # Workspace settings (local) # .vscode/settings.json en la raíz del proyecto ``` ## Paso 3: Configura Prettier como formateador por defecto Este es el paso que más gente olvida. VS Code puede tener varios formateadores instalados y no sabe cuál usar. ### Opción A: Desde la interfaz 1. Abre cualquier archivo `.js`, `.ts`, `.css` o `.html` 2. `Ctrl+Shift+P` → "Format Document With..." 3. Selecciona **"Configure Default Formatter..."** 4. Elige **"Prettier - Code formatter"** ### Opción B: En settings.json ```json { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" } ``` ### Opción C: Por lenguaje (recomendado) ```json { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } ``` ## Paso 4: Crea un .prettierrc Sin un archivo de configuración, Prettier a veces se niega a formatear porque no sabe qué reglas aplicar. Crea `.prettierrc` en la raíz del proyecto: ```json { "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5", "printWidth": 100, "arrowParens": "always", "endOfLine": "lf" } ``` > Si trabajas en un proyecto con más gente, acuerda las reglas primero. Un `.prettierrc` cambiado genera cientos de cambios en un solo commit. ## Paso 5: Resuelve conflictos con ESLint El conflicto Prettier + ESLint es el problema más sutil. ESLint formatea el archivo, luego Prettier intenta reformatear, detecta un conflicto y no hace nada. ### Síntomas - Prettier funciona en archivos `.css` o `.json` pero NO en `.js`/`.ts` - Ves warnings de ESLint sobre formato (comillas, punto y coma) - El archivo "parpadea" al guardar (se formatea y se vuelve a cambiar) ### Solución ```bash npm install --save-dev eslint-config-prettier ``` En tu `eslint.config.js` o `.eslintrc`: ```javascript // eslint.config.js (flat config) import eslintConfigPrettier from 'eslint-config-prettier'; export default [ // ... tus reglas de ESLint eslintConfigPrettier, // SIEMPRE al final — desactiva reglas conflictivas ]; ``` ```json // .eslintrc.json (formato legacy) { "extends": [ "eslint:recommended", "prettier" // Siempre al final ] } ``` Esto desactiva todas las reglas de ESLint que entran en conflicto con Prettier. Ahora ESLint detecta errores de lógica y Prettier se encarga del formato. ## Paso 6: Verifica que no está en .prettierignore Si tienes un `.prettierignore` en la raíz del proyecto, verifica que tu archivo no está excluido: ```bash # .prettierignore dist/ node_modules/ *.min.js # ¿Tienes algo como src/** o *.ts aquí por error? ``` ## Paso 7: Output panel — El log que nadie mira Si todo lo anterior está bien y sigue sin funcionar, VS Code tiene un log de Prettier: 1. `Ctrl+Shift+P` → "Output: Show Output Channel" 2. En el desplegable, selecciona **"Prettier"** 3. Guarda un archivo y mira qué dice Errores comunes en el log: | Error en Output | Causa | Solución | |-----------------|-------|----------| | `Cannot find module 'prettier'` | Prettier no está instalado en el proyecto | `npm install --save-dev prettier` | | `Invalid configuration` | `.prettierrc` tiene syntax error | Valida el JSON | | `File is ignored` | Archivo excluido por `.prettierignore` | Edita `.prettierignore` | | `Multiple formatters` | Dos extensiones compiten | Desinstala la otra | ## Paso 8: Prettier como dependencia del proyecto La extensión de VS Code puede usar su propio Prettier interno o el del proyecto. Para evitar inconsistencias: ```bash npm install --save-dev prettier ``` Y en `.vscode/settings.json`: ```json { "prettier.requireConfig": true } ``` Esto obliga a la extensión a usar el Prettier instalado en `node_modules` y a requerir un `.prettierrc` — si falta, no formatea (y te avisa en el Output). ## Settings.json final (copia y pega) ```json { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "prettier.requireConfig": true, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } ``` ## Resumen | Problema | Solución | |----------|----------| | Extensión no instalada | Instalar `esbenp.prettier-vscode` | | `formatOnSave` desactivado | Activar en settings.json | | No es el formateador por defecto | `editor.defaultFormatter: esbenp.prettier-vscode` | | Conflicto con ESLint | Instalar `eslint-config-prettier` | | Sin `.prettierrc` | Crear en la raíz del proyecto | | Archivo ignorado | Revisar `.prettierignore` | | Error invisible | Revisar Output panel → Prettier | | Prettier global vs local | `npm install --save-dev prettier` | ## Artículos relacionados - [Errores comunes al configurar IA en VS Code](/blog/errores-comunes-ia-vscode-copilot-cline-2026/) — problemas similares con extensiones de IA - [Comandos Git esenciales](/blog/comandos-git-esenciales-2026/) — si Prettier formatea un archivo entero y genera un diff enorme - [Cursor vs Copilot vs Windsurf](/blog/cursor-vs-copilot-vs-windsurf-2026/) — editores que incluyen formato integrado]]> <![CDATA[TSServer Consume Mucha CPU o Se Bloquea en VS Code: Cómo Solucionarlo]]> https://francobosg.netlify.app/blog/tsserver-consume-cpu-vscode-solucion-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/tsserver-consume-cpu-vscode-solucion-2026/ VS Code TypeScript Herramientas <![CDATA[5 Animaciones con Framer Motion que Uso en Todos Mis Proyectos React]]> https://francobosg.netlify.app/blog/animaciones-framer-motion-premium-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/animaciones-framer-motion-premium-2026/ React Código Tutorial {children} ); } ``` **Uso:** ```tsx

Este título aparece suavemente

 ``` **Por qué funciona**: `viewport: { once: true }` hace que la animación solo se ejecute una vez (no cada vez que scrolleas arriba y abajo). El `margin: '-100px'` hace que se active un poco antes de que el elemento sea visible, para que el usuario ya lo vea animándose, no apareciendo de golpe. **Error que cometí**: Al principio usaba `duration: 1.5` pensando que más lento = más elegante. No. Las animaciones largas se sienten lentas y molestas. **0.3 - 0.6 segundos** es el sweet spot. --- ## 2. Stagger List (items que aparecen en cascada) Cuando tienes una lista de cards, features, o cualquier grupo de elementos, hacer que aparezcan uno detrás de otro queda genial. ```tsx 'use client'; import { motion } from 'framer-motion'; const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.2, }, }, }; const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'easeOut' }, }, }; interface StaggerListProps { children: React.ReactNode; className?: string; } export function StaggerList({ children, className }: StaggerListProps) { return ( {children} ); } export function StaggerItem({ children, className }: StaggerListProps) { return ( {children} ); } ``` **Uso:** ```tsx ``` **El truco**: `staggerChildren: 0.1` significa que cada hijo espera 0.1s más que el anterior. Con 3 items el efecto es sutil pero elegante. Con 10+ items, sube a `0.05` para que no tarde siglos. --- ## 3. Modal con backdrop animado Los modales sin animación se sienten rotos. Con Framer Motion + `AnimatePresence`, entran y salen suavemente. ```tsx 'use client'; import { motion, AnimatePresence } from 'framer-motion'; interface ModalProps { isOpen: boolean; onClose: () => void; children: React.ReactNode; } export function Modal({ isOpen, onClose, children }: ModalProps) { return ( {isOpen && ( <> {/* Backdrop */} {/* Modal */}
e.stopPropagation()} > {children}
)} ); } ``` **Uso:** ```tsx const [isOpen, setIsOpen] = useState(false); setIsOpen(false)}>

Confirmar acción

¿Estás seguro?

 ``` **Detalle clave**: `AnimatePresence` es lo que permite la animación de salida (`exit`). Sin él, React elimina el componente del DOM inmediatamente y nunca ves la animación de cierre. Me costó un bug de 2 horas descubrir esto la primera vez. **El backdrop con `backdrop-blur-sm`** es ese efecto de desenfoque que usan las apps de Apple. Se ve premium y cuesta 0 esfuerzo extra. --- ## 4. Skeleton Loader animado Los skeleton loaders (esos rectángulos grises pulsantes mientras carga el contenido) son estándar en 2026. Pero los de CSS puro se ven planos. Con Framer Motion quedan más suaves. ```tsx 'use client'; import { motion } from 'framer-motion'; export function Skeleton({ className }: { className?: string }) { return ( ); } // Ejemplo: Skeleton de una card export function CardSkeleton() { return (
); } ``` **Uso:** ```tsx function PostList() { const { data: posts, isLoading } = useQuery({ queryKey: ['posts'], queryFn: fetchPosts }); if (isLoading) { return (
); } return (
{posts.map(post => )}
); } ``` **Tip**: El skeleton debe tener la **misma estructura visual** que el contenido real. Si tu card tiene imagen arriba + título + 2 líneas de texto + tags, tu skeleton debe tener las mismas formas. Si no, hay un "salto" feo cuando se carga el contenido. --- ## 5. Transiciones entre páginas (Next.js App Router) Esta es la más compleja pero la que más impacto visual tiene. Cuando navegas entre páginas, en vez de un corte brusco, el contenido sale suavemente y el nuevo entra. ```tsx // app/template.tsx (NO layout.tsx — template se re-renderiza en cada navegación) 'use client'; import { motion } from 'framer-motion'; export default function Template({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` **Importante**: Usa `template.tsx`, no `layout.tsx`. Los layouts en Next.js no se re-renderizan entre navegaciones — persisten. El `template.tsx` sí se re-renderiza, que es lo que necesitas para que la animación se dispare. **Versión con exit animation** (más compleja, requiere `AnimatePresence` en el layout): ```tsx // app/layout.tsx 'use client'; // Solo si necesitas AnimatePresence import { AnimatePresence } from 'framer-motion'; import { usePathname } from 'next/navigation'; export default function RootLayout({ children }: { children: React.ReactNode }) { const pathname = usePathname(); return ( {children} ); } ``` **Ojo**: Esta versión convierte el layout en Client Component, lo que deshabilita Server Components para todo el tree. Para la mayoría de landing pages no importa. Para apps con mucho data fetching en el servidor, usa la versión `template.tsx` que es más simple y no tiene este trade-off. --- ## Bonus: Hover scale para cards/botones Este no cuenta como "animación" pero lo pongo en todo: ```tsx ``` `whileHover: { scale: 1.02 }` es sutil pero se siente responsive. El `whileTap: { scale: 0.98 }` da feedback táctil al hacer clic. La transición con `spring` se siente más natural que `easeOut`. --- ## Mi checklist antes de animar 1. **¿La animación tiene propósito?** Si es decorativa y no ayuda al usuario a entender qué pasa → la quito 2. **¿Dura menos de 0.5s?** Las animaciones de UI no deberían durar más (las de scroll pueden llegar a 0.6) 3. **¿Respeta `prefers-reduced-motion`?** Siempre: ```tsx // En tu CSS global o Tailwind config @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` 4. **¿La animación se ejecuta solo una vez?** `viewport: { once: true }` para scroll animations 5. **¿El contenido es usable sin la animación?** Si JavaScript falla, el contenido debe ser visible ## Artículos relacionados - [10 Ejemplos de Landing Pages con Tailwind CSS](/blog/landing-pages-tailwind-ejemplos-codigo-2026/) — estos diseños con estas animaciones - [Cursor vs Copilot vs Windsurf](/blog/cursor-vs-copilot-vs-windsurf-2026/) — las herramientas que uso para codear más rápido - [Cheat sheet de CSS Grid y Flexbox](/blog/cheat-sheet-css-grid-flexbox-2026/) — los layouts que animo con Framer Motion]]> <![CDATA[Cómo Implementar Autenticación con Auth.js (NextAuth) Sin Volverte Loco]]> https://francobosg.netlify.app/blog/auth-js-nextauth-implementacion-real-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/auth-js-nextauth-implementacion-real-2026/ Tutorial Full-Stack Código { const user = await db.user.findUnique({ where: { email: credentials.email as string }, }); if (!user || !user.hashedPassword) return null; const isValid = await bcrypt.compare( credentials.password as string, user.hashedPassword ); if (!isValid) return null; return { id: user.id, email: user.email, name: user.name }; }, }), ], callbacks: { jwt({ token, user }) { if (user) { token.id = user.id; } return token; }, session({ session, token }) { session.user.id = token.id as string; return session; }, }, pages: { signIn: '/login', // Tu página de login custom }, }); ``` ### 4. Crear la API route ```typescript // src/app/api/auth/[...nextauth]/route.ts import { handlers } from '@/lib/auth'; export const { GET, POST } = handlers; ``` ### 5. El middleware para proteger rutas ```typescript // src/middleware.ts import { auth } from '@/lib/auth'; export default auth((req) => { const isLoggedIn = !!req.auth; const isOnDashboard = req.nextUrl.pathname.startsWith('/dashboard'); const isOnAuth = req.nextUrl.pathname.startsWith('/login') || req.nextUrl.pathname.startsWith('/register'); if (isOnDashboard && !isLoggedIn) { return Response.redirect(new URL('/login', req.nextUrl)); } if (isOnAuth && isLoggedIn) { return Response.redirect(new URL('/dashboard', req.nextUrl)); } }); export const config = { matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'], }; ``` ## Los errores que vas a tener (y cómo solucionarlos) ### Error 1: "OAUTH_CALLBACK_ERROR" — el más común ``` [auth][error] OAuthCallbackError: ... ``` **Causa**: El redirect URI en la consola de Google no coincide con tu URL real. **Solución**: Ve a Google Cloud Console → Credentials → OAuth Client → Authorized redirect URIs y añade: ``` http://localhost:3000/api/auth/callback/google # Para dev https://tudominio.com/api/auth/callback/google # Para producción ``` El formato siempre es: `{tu-url}/api/auth/callback/{provider}`. Me pasé 2 horas la primera vez porque puse `/auth/callback/google` sin el `/api`. ### Error 2: La sesión desaparece al refrescar **Causa**: Si usas `strategy: 'database'` (el default con un adapter), Auth.js guarda las sesiones en la BD. Pero si el adapter no está bien configurado, la sesión no se persiste. **Solución**: Usa `strategy: 'jwt'` (como en mi config arriba). Los JWT van en una cookie httpOnly y no necesitan BD para las sesiones. Es más simple y funciona siempre. ```typescript session: { strategy: 'jwt' }, ``` ### Error 3: El user.id no está en la sesión ```typescript const session = await auth(); console.log(session.user.id); // undefined 😱 ``` **Causa**: Auth.js no incluye el `id` del usuario en la sesión por defecto (por seguridad). **Solución**: Añadir los callbacks `jwt` y `session` como en mi config arriba. Y extender los tipos: ```typescript // src/types/next-auth.d.ts import { DefaultSession } from 'next-auth'; declare module 'next-auth' { interface Session { user: { id: string; } & DefaultSession['user']; } } ``` ### Error 4: Credentials provider + Adapter = sesiones rotas **Causa**: Auth.js no persiste sesiones en BD para el Credentials provider (es una decisión de diseño — los passwords no se consideran "seguros" para sesiones de larga duración). **Solución**: Con Credentials, **siempre** usa `strategy: 'jwt'`. Si usas solo OAuth (Google, GitHub), puedes usar `strategy: 'database'`. ## Login con Google — Componente completo ```tsx // features/auth/components/LoginForm.tsx 'use client'; import { signIn } from 'next-auth/react'; import { useState } from 'react'; import { useRouter } from 'next/navigation'; export function LoginForm() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const [loading, setLoading] = useState(false); const router = useRouter(); const handleCredentialsLogin = async (e: React.FormEvent) => { e.preventDefault(); setLoading(true); setError(''); const result = await signIn('credentials', { email, password, redirect: false, }); if (result?.error) { setError('Email o contraseña incorrectos'); setLoading(false); return; } router.push('/dashboard'); }; return (
{/* Google OAuth */}
o
{/* Credentials */}
{error && (

{error}

)} setEmail(e.target.value)} required className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm" /> setPassword(e.target.value)} required className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm" />
); } ``` **Detalle importante**: `redirect: false` en el `signIn` de credentials permite manejar el error en el cliente en vez de redirigir a una página de error genérica. Para OAuth (Google), usamos `callbackUrl` porque el flujo OAuth necesita la redirección. ## Obtener la sesión en Server Components ```tsx // En cualquier Server Component import { auth } from '@/lib/auth'; export default async function DashboardPage() { const session = await auth(); if (!session) { redirect('/login'); // Por si acaso (el middleware ya lo cubre) } return (

Hola, {session.user.name}

Tu ID: {session.user.id}

); } ``` ## Obtener la sesión en Client Components ```tsx 'use client'; import { useSession } from 'next-auth/react'; export function UserMenu() { const { data: session, status } = useSession(); if (status === 'loading') return ; if (!session) return null; return (
{session.user.name}
); } ``` **No olvides** el `SessionProvider` en tu layout: ```tsx // app/layout.tsx import { SessionProvider } from 'next-auth/react'; export default function RootLayout({ children }) { return ( {children} ); } ``` ## Proteger API Routes ```typescript // app/api/tasks/route.ts import { auth } from '@/lib/auth'; import { NextResponse } from 'next/server'; export async function GET() { const session = await auth(); if (!session) { return NextResponse.json({ error: 'No autorizado' }, { status: 401 }); } const tasks = await db.task.findMany({ where: { userId: session.user.id }, }); return NextResponse.json(tasks); } ``` ## El esquema de Prisma que uso ```prisma // prisma/schema.prisma model User { id String @id @default(cuid()) name String? email String @unique emailVerified DateTime? image String? hashedPassword String? // null si se registró con OAuth accounts Account[] sessions Session[] tasks Task[] createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } model Account { id String @id @default(cuid()) userId String type String provider String providerAccountId String refresh_token String? access_token String? expires_at Int? token_type String? scope String? id_token String? user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@unique([provider, providerAccountId]) } model Session { id String @id @default(cuid()) sessionToken String @unique userId String expires DateTime user User @relation(fields: [userId], references: [id], onDelete: Cascade) } ``` ## Checklist de seguridad Antes de ir a producción, verifico: - [ ] `AUTH_SECRET` generado con `npx auth secret` (no un string inventado) - [ ] Passwords hasheadas con `bcrypt` (nunca en texto plano) - [ ] `redirect: false` en credentials para no filtrar info en la URL - [ ] Cookies con `httpOnly` y `secure` (Auth.js lo hace por defecto en producción) - [ ] CSRF protection activo (Auth.js lo incluye por defecto) - [ ] Variables de entorno en `.env.local`, no hardcodeadas - [ ] Redirect URIs en la consola de OAuth actualizadas para el dominio de producción - [ ] Rate limiting en el endpoint de login (Auth.js NO lo incluye — implementar con `upstash/ratelimit`) ## Artículos relacionados - [Estructura de carpetas en React/Next.js](/blog/estructura-carpetas-react-nextjs-2026/) — cómo organizo la feature de auth - [Proteger tu API Node.js con JWT](/blog/proteger-api-nodejs-jwt-auth-guia-2026/) — auth desde cero sin Auth.js - [Supabase vs Firebase en producción](/blog/supabase-vs-firebase-experiencia-produccion-2026/) — alternativas de auth as a service]]> <![CDATA[Cómo Implementar el Banner de Cookies (RGPD) Correctamente en Tu Web — Paso a Paso]]> https://francobosg.netlify.app/blog/banner-cookies-rgpd-implementacion-correcta-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/banner-cookies-rgpd-implementacion-correcta-2026/ Tutorial Código `, mostraba un banner bonito, y cuando el usuario hacía clic en "Aceptar" guardaba un flag en localStorage. El problema: GA ya estaba trackeando desde el primer milisegundo. Esto es lo que hago ahora, y es lo que exige la RGPD. ## El principio fundamental ``` 1. Cargar la web SIN cookies no esenciales 2. Mostrar el banner 3. El usuario elige: Aceptar / Rechazar / Configurar 4. SOLO si acepta → cargar Analytics, AdSense, etc. 5. Guardar la preferencia para no preguntar otra vez ``` **No al revés.** Primero el consentimiento, después las cookies. ## Implementación completa (HTML + JS puro) ### El banner HTML ```html ``` **Detalles de diseño que importan legalmente:** - Los botones de "Aceptar" y "Rechazar" tienen el **mismo tamaño visual**. Si haces el de aceptar gigante y el de rechazar pequeño/gris, es un *dark pattern* y la AEPD puede multarte. - El texto es claro y directo. Nada de "utilizamos cookies para mejorar tu experiencia" (demasiado vago). - Hay enlace a la política de cookies. ### El JavaScript ```javascript // cookie-consent.js (function() { 'use strict'; const CONSENT_KEY = 'cookie-consent'; const banner = document.getElementById('cookie-banner'); const acceptBtn = document.getElementById('cookie-accept'); const rejectBtn = document.getElementById('cookie-reject'); // Si ya hay una decisión guardada, no mostrar el banner const savedConsent = localStorage.getItem(CONSENT_KEY); if (savedConsent === 'accepted') { loadAnalytics(); return; } if (savedConsent === 'rejected') { return; // No cargar nada, no mostrar banner } // Primera visita: mostrar el banner if (banner) { banner.classList.remove('hidden'); } if (acceptBtn) { acceptBtn.addEventListener('click', function() { localStorage.setItem(CONSENT_KEY, 'accepted'); if (banner) banner.classList.add('hidden'); loadAnalytics(); }); } if (rejectBtn) { rejectBtn.addEventListener('click', function() { localStorage.setItem(CONSENT_KEY, 'rejected'); if (banner) banner.classList.add('hidden'); }); } function loadAnalytics() { // Google Analytics 4 if (!document.querySelector('script[src*="googletagmanager"]')) { var gaScript = document.createElement('script'); gaScript.async = true; gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX'; document.head.appendChild(gaScript); gaScript.onload = function() { window.dataLayer = window.dataLayer || []; function gtag() { window.dataLayer.push(arguments); } window.gtag = gtag; gtag('js', new Date()); gtag('config', 'G-XXXXXXXXXX', { anonymize_ip: true // Anonimizar IP — recomendado por RGPD }); }; } // Aquí puedes cargar otros scripts: AdSense, Facebook Pixel, Hotjar, etc. } })(); ``` **Lo importante:** - `loadAnalytics()` solo se ejecuta si el usuario acepta o si ya aceptó antes - `anonymize_ip: true` anonimiza la IP del usuario (recomendado por RGPD aunque no es obligatorio desde GA4) - Si el usuario rechaza, no se carga nada. Ni ahora ni en visitas futuras - El script se ejecuta en un IIFE para no contaminar el scope global ### Cómo cargarlo en tu web ```html ``` En mi caso con Astro, lo cargo así: ```astro --- // BlogLayout.astro --- ``` ## La política de cookies (página obligatoria) Necesitas una página `/cookies` (o `/cookies.html`) con: ```markdown ## Política de Cookies ### ¿Qué son las cookies? Las cookies son pequeños archivos de texto que se almacenan en tu navegador... ### Cookies que utilizamos | Cookie | Tipo | Proveedor | Propósito | Duración | |--------|------|-----------|-----------|----------| | `cookie-consent` | Técnica (propia) | Este sitio | Guardar tu preferencia de cookies | Permanente | | `_ga` | Analítica (tercero) | Google Analytics | Distinguir usuarios únicos | 2 años | | `_ga_XXXXXXX` | Analítica (tercero) | Google Analytics | Persistir estado de sesión | 2 años | | `color-theme` | Técnica (propia) | Este sitio | Guardar preferencia de tema oscuro/claro | Permanente | ### Cómo gestionar las cookies Puedes cambiar tu preferencia en cualquier momento haciendo clic en [Gestionar cookies]. También puedes configurar tu navegador para bloquear cookies... ### Base legal El tratamiento se basa en tu consentimiento (art. 6.1.a RGPD). Las cookies técnicas se basan en interés legítimo (art. 6.1.f RGPD). ### Contacto Si tienes dudas: [tu email] ``` ## Checklist de cumplimiento ### Obligatorio - [ ] El banner aparece en la primera visita - [ ] NO se cargan cookies de tracking antes del consentimiento - [ ] Hay opción de **rechazar** con la misma visibilidad que aceptar - [ ] La preferencia se guarda y no se pregunta en cada página - [ ] Hay un enlace a la política de cookies desde el banner - [ ] Existe una página de política de cookies accesible - [ ] La política lista todas las cookies con su proveedor, propósito y duración ### Recomendado - [ ] Opción de "configurar" cookies por categoría (analíticas, marketing, etc.) - [ ] Botón para cambiar la preferencia después (en el footer, por ejemplo) - [ ] `anonymize_ip: true` en Google Analytics - [ ] Las cookies se eliminan si el usuario cambia de "aceptar" a "rechazar" ### Prohibido (dark patterns que multa la AEPD) - [ ] Botón de "Aceptar" mucho más grande/visible que "Rechazar" - [ ] Solo opción de "Aceptar" y "Más información" (sin rechazar) - [ ] Cookie wall: "Acepta las cookies o no puedes ver la web" - [ ] Pre-marcar casillas de cookies no esenciales - [ ] Requerir más clics para rechazar que para aceptar ## Versión avanzada: con categorías Si quieres ir más allá y permitir que el usuario elija por categorías: ```javascript const CATEGORIES = { essential: true, // Siempre activas, no se pueden desactivar analytics: false, // Google Analytics, Hotjar marketing: false, // AdSense, Facebook Pixel }; function getConsent() { const saved = localStorage.getItem('cookie-categories'); return saved ? JSON.parse(saved) : null; } function setConsent(categories) { localStorage.setItem('cookie-consent', 'configured'); localStorage.setItem('cookie-categories', JSON.stringify(categories)); if (categories.analytics) loadAnalytics(); if (categories.marketing) loadMarketing(); } // Aceptar todo function acceptAll() { setConsent({ essential: true, analytics: true, marketing: true }); } // Rechazar todo (solo esenciales) function rejectAll() { setConsent({ essential: true, analytics: false, marketing: false }); } ``` ## Mi implementación real En mi portfolio uso una versión simple (aceptar/rechazar) porque solo tengo Google Analytics. No necesito categorías si solo tengo un tipo de cookie no esencial. El código está en mi [portfolio con Vite y Tailwind](/blog/como-hice-mi-portfolio-vite-tailwind/), y el consentimiento se comparte entre el portfolio y el blog porque ambos están en el mismo dominio (`francobosg.netlify.app`). El `localStorage` es compartido, así que si aceptas en el portfolio, el blog ya lo sabe. ## Herramientas que NO recomiendo - **CookieBot, OneTrust, Iubenda**: Son soluciones SaaS de pago (50-200€/mes). Para una web personal o un blog, es matar moscas a cañonazos. El script que te puse arriba hace exactamente lo mismo. - **Plugins de WordPress**: Si no estás en WordPress, no te sirven. Y si estás en WordPress, muchos cargan 100KB+ de JavaScript para algo que se hace con 30 líneas. - **Google Consent Mode**: Es un layer adicional que Google recomienda para "medir sin cookies". En la práctica, sigue necesitando consentimiento para tracking completo. Úsalo solo si tienes ads. ## Artículos relacionados - [Configuración definitiva de CORS en Node.js](/blog/cors-nodejs-express-configuracion-produccion-2026/) — otra pieza de seguridad web - [Cómo hice mi portfolio con Vite y Tailwind](/blog/como-hice-mi-portfolio-vite-tailwind/) — donde implementé este banner - [Deploy gratis con GitHub Actions + Netlify](/blog/deploy-gratis-github-actions-netlify-vercel-2026/) — donde corre esta web]]> <![CDATA[Cheat Sheet Visual de CSS Grid y Flexbox — La Guía que Siempre Busco]]> https://francobosg.netlify.app/blog/cheat-sheet-css-grid-flexbox-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/cheat-sheet-css-grid-flexbox-2026/ Tutorial Código <![CDATA[Configuración Definitiva de CORS en Node.js/Express para Producción]]> https://francobosg.netlify.app/blog/cors-nodejs-express-configuracion-produccion-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/cors-nodejs-express-configuracion-produccion-2026/ Tutorial Full-Stack Código <![CDATA[¿Vale la Pena Pagar Cursor Pro? Comparativa Real con GitHub Copilot en 2026]]> https://francobosg.netlify.app/blog/cursor-pro-vs-copilot-vale-la-pena-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/cursor-pro-vs-copilot-vale-la-pena-2026/ IA Herramientas Código Desde que Copilot lanzó el modo "Edits" y el Agent mode en VS Code, la diferencia se ha reducido. Pero Cursor sigue siendo más rápido porque fue diseñado para esto desde el inicio. ### Refactoring multi-archivo | Tarea | Copilot | Cursor Agent | |-------|---------|-------------| | Renombrar entidad en 8 archivos | 15 min (manual con Find & Replace) | 3 min (lo hace solo) | | Añadir endpoint + tests | 25 min | 8 min | | Migrar de API antigua a nueva | 40 min | 15 min | | Crear CRUD completo | 30 min | 10 min | Cursor Agent me ahorra ~60% del tiempo en tareas multi-archivo. Pero hay una trampa... ## La trampa de Cursor: Las 500 solicitudes El plan Pro incluye 500 solicitudes "fast" al mes. Suena a mucho. No lo es. Mi consumo real en un mes: | Semana | Solicitudes | Acumulado | |--------|------------|-----------| | 1 | 180 | 180 | | 2 | 155 | 335 | | 3 | 140 | 475 | | 4 | 25 (modo slow) | 500 | **A la tercera semana ya estaba en modo slow**. El modo slow usa modelos menos potentes y tarda 10-30 segundos por respuesta. Es usable pero frustrante. ¿Cuántas solicitudes gasta cada acción? - Autocompletado Tab: 0 (no cuenta) - Chat simple: 1 solicitud - Agent (tarea pequeña, 2-3 archivos): 3-5 solicitudes - Agent (tarea grande, 5+ archivos): 8-15 solicitudes Una sesión intensa con el Agent puede gastar 30-50 solicitudes en una hora. Si usas el Agent para todo, las 500 no llegan al mes. ### ¿Solución? Tu propia API key Puedes poner tu API key de OpenAI o Anthropic en Cursor. Pero entonces pagas por token: ``` Tarea mediana con Claude Sonnet (input ~8K tokens, output ~3K tokens): = $0.024 (input) + $0.045 (output) = ~$0.07 por solicitud 50 solicitudes/día × 22 días = 1.100 solicitudes 1.100 × $0.07 = ~$77/mes ``` Sí, **$77/mes** si usas tu key intensamente. Más caro que los $20 del plan Pro. ## Copilot: Precio imbatible | Plan | Precio | Incluye | |------|--------|---------| | **Copilot Free** | $0 | 2.000 autocompletados + 50 chats/mes | | **Copilot Individual** | $10/mes | Ilimitado + chat + Agent mode | | **Copilot Business** | $19/mes | + políticas empresa + IP indemnity | | **Cursor Free** | $0 | 50 solicitudes + autocompletado limitado | | **Cursor Pro** | $20/mes | 500 fast + ilimitado slow + Agent | | **Cursor Business** | $40/mes | + admin + roles | Copilot Individual a $10/mes con uso ilimitado es difícil de superar. Cursor Pro a $20 con 500 solicitudes limitadas es el doble de caro y con menos "gasolina". ## Mi flujo de trabajo real (después de 3 meses) Terminé usando **ambos**, pero para cosas diferentes: | Tarea | Herramienta | Por qué | |-------|-------------|---------| | Escribir código nuevo línea a línea | Copilot | Autocompletado más rápido | | Refactoring multi-archivo | Cursor Agent | 60% más rápido | | Generar tests | Cursor Agent | Entiende el contexto del proyecto | | Debugging rápido | Copilot Chat | Más rápido para preguntas simples | | Crear features completas | Cursor Agent | Edita archivos directamente | | Documentar código | Copilot | Suficiente para JSDoc/comentarios | Pero pagar $30/mes por dos herramientas de IA es excesivo. Tengo que elegir una. ## Mi veredicto: ¿Cuál merece tu dinero? ### Si eres junior o estás aprendiendo → Copilot ($10/mes) - El autocompletado te enseña patrones mientras escribes - El chat es suficiente para preguntas - $10/mes no duele - Se integra en VS Code que ya conoces ### Si eres mid/senior y facturas tu tiempo → Cursor Pro ($20/mes) - El Agent te ahorra 1-2 horas al día en refactoring - Si cobras +$30/hora, los $20/mes se pagan solos en un día - Necesitas saber "guiar" al agente (es una skill) - Vigila las 500 solicitudes ### Si eres freelance con presupuesto ajustado → Copilot Free ($0) - 2.000 autocompletados al mes es suficiente para proyectos pequeños - 50 chats dan para resolver dudas puntuales - Cuando necesites más, paga el mes concreto ### Lo que yo hago ahora Cancelé Cursor Pro y me quedé con Copilot Individual ($10/mes). Para las 2-3 veces al mes que necesito un refactoring masivo, uso [Aider](/blog/aider-ia-terminal-barata-alternativa-cursor-2026/) con mi API key de Claude — me cuesta ~$3-5 por sesión y no pago suscripción. **Total**: $10/mes (Copilot) + ~$5/mes (Aider con API key) = **$15/mes** por lo mejor de ambos mundos. ## Lo que mejoraría de cada uno ### Cursor - Las 500 solicitudes son pocas para el precio. Deberían ser 1.000 o ilimitadas slow más rápido. - El autocompletado debería ser tan fluido como Copilot. - Necesita mejor integración con Git (Copilot muestra diffs inline mejor). ### Copilot - El modo Agent necesita mejorar la edición multi-archivo. - El chat debería poder ejecutar comandos de terminal (como Cursor). - Debería soportar modelos de Anthropic (Claude es mejor para código). ## Artículos relacionados - [Cursor vs Copilot vs Windsurf: Comparativa técnica](/blog/cursor-vs-copilot-vs-windsurf-2026/) — la comparativa más detallada con benchmarks - [Aider: programar con IA desde la terminal por céntimos](/blog/aider-ia-terminal-barata-alternativa-cursor-2026/) — la alternativa barata - [Programar con IA sin arruinarte](/blog/programar-con-ia-sin-arruinarte-guia-2026/) — cómo controlar el gasto en herramientas de IA - [Errores comunes con Copilot y Cline en VS Code](/blog/errores-comunes-ia-vscode-copilot-cline-2026/) — soluciones rápidas]]> <![CDATA[Cómo Estructuro las Carpetas en un Proyecto Grande de React/Next.js (Vida Real)]]> https://francobosg.netlify.app/blog/estructura-carpetas-react-nextjs-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/estructura-carpetas-react-nextjs-2026/ React Arquitectura Full-Stack ; } ``` 3 líneas. Sin lógica. La página solo decide qué componente de feature renderizar y le pasa los datos necesarios. ### 5. Imports con alias `@/` siempre ```json // tsconfig.json { "compilerOptions": { "paths": { "@/*": ["./src/*"] } } } ``` ```typescript // ✅ Claro, corto, no se rompe al mover archivos import { Button } from '@/components/ui/Button'; import { TaskList } from '@/features/tasks'; // ❌ Infierno de puntos relativos import { Button } from '../../../components/ui/Button'; import { TaskList } from '../../features/tasks/components/TaskList'; ``` ## Cuándo empiezo con esta estructura **No desde el minuto 1.** Para un proyecto nuevo o un MVP, empiezo plano: ``` src/ ├── app/ ├── components/ # Todo junto al principio ├── lib/ └── types/ ``` Cuando llego a **~20 componentes** o cuando noto que toco 4+ carpetas para una feature, es el momento de refactorizar a feature-based. Antes de eso es over-engineering. La migración es gradual: 1. Creo `features/tasks/` 2. Muevo los archivos relacionados con tareas 3. Actualizo los imports 4. Repito para la siguiente feature VS Code con "Move to file" y el rename de TypeScript actualiza los imports automáticamente. ## Errores que he cometido ### Error 1: Carpetas dentro de carpetas dentro de carpetas ``` // ❌ Demasiada anidación features/tasks/components/list/items/card/TaskCard.tsx ``` Si necesitas más de 3 niveles de profundidad, algo va mal. La carpeta `features/tasks/components/` con archivos planos funciona perfectamente hasta 15-20 componentes. Si necesitas más, probablemente la feature es demasiado grande y habría que dividirla. ### Error 2: Features que se importan entre sí de forma circular ```typescript // ❌ features/tasks importa de features/projects // Y features/projects importa de features/tasks // → Dependencia circular ``` Si dos features se necesitan mutuamente, hay algo que debería estar en `lib/` o en una feature compartida. Los tipos compartidos van a `types/`, los utils compartidos a `lib/`. ### Error 3: Mover TODO a features/ desde el principio No todo necesita ser una feature. Si solo tienes un componente de auth (LoginForm) y un hook (useAuth), no necesitas una carpeta `features/auth/` con subcarpetas. Ponlo en `components/` y cuando crezca, muévelo. ## La estructura para un proyecto de portfolio o blog Para proyectos pequeños (portfolios, blogs, landing pages), esta estructura es overkill. Para esos uso: ``` src/ ├── app/ │ ├── page.tsx │ ├── blog/ │ │ ├── page.tsx │ │ └── [slug]/page.tsx │ └── layout.tsx ├── components/ │ ├── Hero.tsx │ ├── ProjectCard.tsx │ ├── BlogPost.tsx │ └── ContactForm.tsx ├── lib/ │ ├── posts.ts # Fetch de posts del blog │ └── utils.ts └── content/ └── posts/ # Markdown files ``` Plano, simple, suficiente. La estructura feature-based solo tiene sentido cuando hay **múltiples dominios de negocio** (users, tasks, billing, projects...). ## Artículos relacionados - [Por qué dejé de usar Redux (y qué uso ahora)](/blog/por-que-deje-redux-alternativas-2026/) — cómo organizo el estado sin Redux - [Caso real: SaaS con NestJS y React](/blog/caso-real-saas-atrapaclientes-nestjs-react/) — esta estructura en un proyecto real - [Auth.js (NextAuth) sin volverte loco](/blog/auth-js-nextauth-implementacion-real-2026/) — cómo estructuro la feature de auth]]> <![CDATA[10 Ejemplos de Landing Pages Modernas con Tailwind CSS (Código Completo y Listo)]]> https://francobosg.netlify.app/blog/landing-pages-tailwind-ejemplos-codigo-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/landing-pages-tailwind-ejemplos-codigo-2026/ Tutorial Código Full-Stack
Nuevo: Integración con IA

Construye tu SaaS
10x más rápido

Framework completo con autenticación, pagos, dashboard y API. Deja de reinventar la rueda y lanza en días, no en meses.

Empezar gratis → Ver demo

Sin tarjeta de crédito · Setup en 5 minutos · Cancela cuando quieras

``` **Por qué funciona**: Gradiente sobrio (no rainbow), badge de novedad arriba, headline con contraste de color, subtítulo que habla de beneficios, dos CTAs con jerarquía visual (primario azul, secundario outline), y texto de confianza debajo. --- ## 2. Feature Grid — 3 columnas con iconos ```html

Todo lo que necesitas para lanzar

Cada feature está probada en producción con miles de usuarios.

🔐

Autenticación

Login con Google, GitHub y email. Sesiones seguras con JWT y refresh tokens. Listo en 5 minutos.

💳

Pagos con Stripe

Suscripciones, one-time payments y webhooks configurados. Portal de cliente incluido.

📊

Dashboard

Panel de admin con gráficas, tablas con filtros, y exportación a CSV. Dark mode incluido.

📧

Emails transaccionales

Templates de email con React Email. Welcome, reset password, invoices — todo listo.

🚀

Deploy en 1 clic

Vercel, Railway o Docker. CI/CD con GitHub Actions preconfigurado. De git push a producción.

🤖

IA integrada

Streaming con OpenAI/Claude listo para usar. RAG con embeddings y vector search incluido.

``` **Tips de diseño**: Las tarjetas con `hover:border-blue-500/50` dan feedback visual sin ser agresivas. Los iconos con fondo de color roto por sección (azul, verde, morado...) crean variedad. El grid pasa a 1 columna en móvil automáticamente. --- ## 3. Pricing Table — 3 planes con plan destacado ```html

Precios simples, sin sorpresas

Empieza gratis. Escala cuando lo necesites.

Free

Para proyectos personales

0€/mes

  • ✓ 1 proyecto
  • ✓ 1.000 usuarios
  • ✓ Auth básica
  • ✗ Custom domain
  • ✗ Soporte prioritario
Empezar gratis
Más popular

Pro

Para SaaS en producción

29€/mes

  • ✓ Proyectos ilimitados
  • ✓ 50.000 usuarios
  • ✓ Auth + OAuth providers
  • ✓ Custom domain
  • ✓ Soporte por email
Empezar con Pro

Enterprise

Para equipos grandes

99€/mes

  • ✓ Todo lo de Pro
  • ✓ Usuarios ilimitados
  • ✓ SSO / SAML
  • ✓ SLA 99.9%
  • ✓ Soporte prioritario 24/7
Contactar ventas
``` **Por qué funciona**: El plan central tiene `border-2 border-blue-600` + `shadow-xl` + badge "Más popular" para llamar la atención. Los checkmarks en verde y las X en gris crean un contraste visual inmediato. El CTA del plan Pro es el único con fondo lleno. --- ## 4. Testimonios — Tarjetas con avatar ```html

Lo que dicen nuestros usuarios

★★★★★

"Lancé mi SaaS en 2 semanas usando este boilerplate. Lo que más me gustó es que los pagos con Stripe ya estaban configurados — eso solo me habría llevado 3 días."

ML

María López

Fundadora de TaskFlow

★★★★★

"El código está limpio y bien documentado. No es un boilerplate de esos que necesitas 2 días para entender la estructura. Lo abrí y ya sabía dónde estaba todo."

DR

David Ruiz

Senior Dev en Acme Corp

★★★★★

"El soporte es de 10. Tuve un problema con los webhooks de Stripe y me respondieron en 2 horas con una solución que funcionó a la primera."

AC

Ana Castillo

Freelance fullstack

``` **Tip**: Los avatares con gradientes (en vez de imágenes) se ven modernos y no necesitas fotos reales. Si tienes fotos, usa ``. --- ## 5. CTA Final — Fondo con gradiente ```html

¿Listo para lanzar tu próximo proyecto?

Únete a +2.000 desarrolladores que ya están construyendo más rápido.

Empezar gratis → Ver documentación
``` --- ## 6. Stats Counter — Números que impresionan ```html

2.5K+

Desarrolladores

450+

Apps en producción

99.9%

Uptime

4.9/5

Valoración

``` --- ## 7. FAQ Accordion (solo CSS, sin JavaScript) ```html

Preguntas frecuentes

¿Necesito saber TypeScript? +

Recomendable pero no obligatorio. Todo el código tiene tipos, lo que te ayuda con el autocompletado. Si solo sabes JavaScript, podrás seguir igualmente.

¿Incluye actualizaciones? +

Sí. Todas las actualizaciones menores y de seguridad están incluidas de por vida. Las major versions nuevas tienen un 50% de descuento para clientes existentes.

¿Puedo usarlo en múltiples proyectos? +

Sí. La licencia es por desarrollador, no por proyecto. Puedes usarlo en todos los proyectos personales y comerciales que quieras.

``` **Tip**: El `
` + `` HTML nativo funciona como accordion sin JavaScript. El `group-open:rotate-45` gira el `+` en `×` cuando se abre. --- ## 8. Navbar — Sticky con blur ```html ``` **El truco del blur**: `bg-white/80 backdrop-blur-lg` crea ese efecto glassmorphism donde la navbar es semi-transparente y el contenido de debajo se difumina al hacer scroll. Muy popular en 2025-2026. --- ## 9. Footer — Limpio con columnas ```html ``` --- ## 10. Banner de oferta — Sticky top ```html

🎉 Black Friday: 50% de descuento con el código BF2026 — Ver oferta →

``` --- ## Cómo combinar estos bloques Para montar una landing completa, apílalos en este orden: ``` 1. Banner de oferta (si aplica) 2. Navbar sticky 3. Hero section 4. Stats counter 5. Feature grid 6. Testimonios 7. Pricing table 8. FAQ accordion 9. CTA final 10. Footer ``` Copia cada bloque, pégalos uno debajo del otro, y cambia los textos. En 30 minutos tienes una landing profesional. ## Artículos relacionados - [Cómo hice mi portfolio con Vite y Tailwind](/blog/como-hice-mi-portfolio-vite-tailwind/) — este mismo portfolio en acción - [Cursor vs Copilot vs Windsurf](/blog/cursor-vs-copilot-vs-windsurf-2026/) — herramientas de IA que te ayudan a maquetar más rápido]]> <![CDATA[Pasé Mi Web de React a Astro: Estos Son los Resultados de Rendimiento (Lighthouse)]]> https://francobosg.netlify.app/blog/migracion-react-astro-rendimiento-lighthouse-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/migracion-react-astro-rendimiento-lighthouse-2026/ Astro React Código

Blog

{posts.map(post => ( ))}
); } ``` ```astro --- // ✅ Después (Astro) — index.astro import { getCollection } from 'astro:content'; import BlogLayout from '../layouts/BlogLayout.astro'; import PostCard from '../components/PostCard.astro'; const posts = await getCollection('posts'); const sortedPosts = posts.sort((a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime() ); ---

Blog

{sortedPosts.map(post => ( ))}
``` Los cambios principales: - `className` → `class` - La lógica va en el frontmatter (`---`) - No hay `export default function` — el HTML va directamente - `key` no es necesario en `.astro` (no hay virtual DOM) - Content Collections reemplazan el fetch de markdown manual ### Paso 4: Convertir componentes Componentes sin interactividad → `.astro`: ```astro --- // components/PostCard.astro const { post } = Astro.props; const url = `/blog/${post.id.replace(/\.md$/, '')}/`; --- ``` **0 JavaScript enviado al navegador.** Este componente se renderiza en build time como HTML puro. Componentes CON interactividad → mantuve React con `client:` directive: ```astro --- // En una página .astro import SearchBar from '../components/SearchBar.tsx'; --- ``` ### Paso 5: Content Collections para los posts ```typescript // src/content.config.ts import { defineCollection, z } from 'astro:content'; const posts = defineCollection({ schema: z.object({ title: z.string(), description: z.string(), date: z.coerce.date(), tags: z.array(z.string()).default([]), image: z.string().optional(), }), }); export const collections = { posts }; ``` Los markdowns van en `src/content/posts/` y Astro los valida contra el schema automáticamente. ## Los problemas que tuve ### Problema 1: No existe `useRouter()` en Astro En React hacía: ```tsx const router = useRouter(); router.push('/blog'); ``` En Astro, los links son `` normales. Sin client-side routing. Cada clic es una navegación completa del navegador. "¿Eso no es más lento?" — pensé. Pero no. Con HTML pre-renderizado, la navegación del navegador es **más rápida** que el client-side routing de Next.js porque no hay JavaScript que parsear y ejecutar. El HTML llega y se pinta. Punto. Para las pocas transiciones que quería animar, usé la View Transitions API de Astro: ```astro --- // En el layout import { ViewTransitions } from 'astro:transitions'; --- ``` Una línea y tienes transiciones animadas entre páginas. Sin Framer Motion, sin AnimatePresence, sin 32KB de JavaScript. ### Problema 2: El search necesitaba JavaScript Mi barra de búsqueda era un componente React con estado. En Astro lo mantuve como isla de React: ```astro ``` `client:idle` carga el JavaScript cuando el navegador está idle. El usuario ve la página inmediatamente, y cuando el navegador no tiene nada que hacer, carga el search. Sin bloquear el render. ### Problema 3: Dark mode con FOUC Astro genera HTML estático, así que si pones la clase `dark` en `` con JavaScript del cliente, hay un flash de tema claro antes de que el script se ejecute. Solución: script inline en el `` que se ejecuta antes del render: ```astro ``` `is:inline` en Astro evita que el script se bundlee y lo ejecuta inmediatamente. ## ¿Merece la pena migrar? **Sí, si tu web es principalmente contenido** (blog, docs, portfolio, landing page). Los números hablan solos: - 98 en Lighthouse vs 62 - 12 KB de JS vs 187 KB - 0.6s FCP vs 2.1s **No, si tu web es una app interactiva** (dashboard, SaaS con mucho estado, editor visual). Astro no está diseñado para apps con mucha interactividad — para eso sigue con Next.js o Remix. **La zona gris**: Webs que son 80% contenido + 20% interactividad (un blog con un buscador, un portfolio con un formulario de contacto). Ahí Astro con islas de React es perfecto — HTML estático para todo, React solo para los 2-3 componentes que lo necesitan. Mi portfolio actual usa exactamente eso: Astro para todo el contenido estático, y las pocas piezas interactivas son vanilla JS con `is:inline`. Zero framework runtime en el navegador. ## Artículos relacionados - [Cómo hice mi portfolio con Vite y Tailwind](/blog/como-hice-mi-portfolio-vite-tailwind/) — el portfolio que migré - [Deploy gratis con GitHub Actions + Netlify](/blog/deploy-gratis-github-actions-netlify-vercel-2026/) — cómo despliego Astro - [Cheat sheet de CSS Grid y Flexbox](/blog/cheat-sheet-css-grid-flexbox-2026/) — los layouts que uso en Astro sin JavaScript]]> <![CDATA[Por Qué Dejé de Usar Redux en 2026 (Y Qué Uso Ahora)]]> https://francobosg.netlify.app/blog/por-que-deje-redux-alternativas-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/por-que-deje-redux-alternativas-2026/ React Arquitectura Código { try { const response = await fetch('/api/tasks'); return response.json(); } catch (err) { return rejectWithValue(err.message); } } ); const taskSlice = createSlice({ name: 'tasks', initialState: { items: [], loading: false, error: null }, reducers: { clearError: (state) => { state.error = null; }, }, extraReducers: (builder) => { builder .addCase(fetchTasks.pending, (state) => { state.loading = true; }) .addCase(fetchTasks.fulfilled, (state, action) => { state.loading = false; state.items = action.payload; }) .addCase(fetchTasks.rejected, (state, action) => { state.loading = false; state.error = action.payload; }); }, }); // 2. El store (store.ts) // 3. Los selectors (taskSelectors.ts) // 4. El Provider en el layout // 5. Los types de RootState y AppDispatch // 6. Los hooks tipados useAppSelector/useAppDispatch ``` ~80 líneas de código para... hacer un fetch y guardar el resultado. ### 2. El 90% del "estado global" no necesita ser global Hice una auditoría de mi store de Redux: | Dato en el store | ¿Realmente necesita ser global? | |-----------------|-------------------------------| | Lista de tareas | No — solo la usa una página | | Usuario logueado | Sí — se usa en muchos sitios | | Estado de un modal | No — es local del componente | | Datos de un formulario | No — es local del formulario | | Filtros de búsqueda | No — pertenece a la URL | | Tema dark/light | Sí — se usa globalmente | | Notificaciones | Quizás — un Context bastaría | De 12 slices en mi store, solo 2 necesitaban ser realmente globales. El resto era estado local o estado del servidor que debería venir de una caché de queries. ### 3. React Server Components cambiaron las reglas Con Next.js App Router y React Server Components, muchos datos ya no pasan por el cliente: ```tsx // Antes (con Redux): fetch en el cliente → store → componente // Ahora (con RSC): fetch en el servidor → componente directamente // Este componente NO necesita Redux. Los datos llegan del servidor. export default async function TaskList() { const tasks = await db.task.findMany({ where: { userId: session.user.id } }); return (
    {tasks.map(task => )}
); } ``` No hay loading state. No hay error state. No hay cache invalidation. El servidor hizo el fetch, renderizó el HTML, y el cliente lo recibe listo. ## Qué uso ahora (y por qué) ### Para datos del servidor: TanStack Query ```typescript // Antes: 80 líneas de Redux para un fetch // Ahora: 5 líneas con TanStack Query function TaskList() { const { data: tasks, isLoading, error } = useQuery({ queryKey: ['tasks'], queryFn: () => fetch('/api/tasks').then(r => r.json()), }); if (isLoading) return ; if (error) return ; return
    {tasks.map(t => )}
; } ``` TanStack Query te da gratis: caché, deduplicación, refetch automático, optimistic updates, retry, y stale-while-revalidate. Todo lo que en Redux tenías que implementar a mano. ### Para estado global simple: Zustand ```typescript // Antes: slice + store + provider + selectors + hooks tipados // Ahora: un archivo de 10 líneas import { create } from 'zustand'; interface AppStore { theme: 'light' | 'dark'; toggleTheme: () => void; user: User | null; setUser: (user: User | null) => void; } export const useAppStore = create((set) => ({ theme: 'dark', toggleTheme: () => set((s) => ({ theme: s.theme === 'dark' ? 'light' : 'dark' })), user: null, setUser: (user) => set({ user }), })); // Uso: const theme = useAppStore(s => s.theme); ``` Sin Provider, sin boilerplate, con selectores automáticos, tipado perfecto. Para el 95% de necesidades de estado global, Zustand es todo lo que necesitas. ### Para formularios: React Hook Form ```typescript // Antes: Redux Form (2.000 líneas de código para 5 formularios) // Ahora: React Hook Form const { register, handleSubmit, formState: { errors } } = useForm(); return (
{errors.title && {errors.title.message}}
); ``` ### Para estado en la URL: nuqs (o useSearchParams) Los filtros de búsqueda, la paginación, los tabs activos... todo eso pertenece a la URL, no al store: ```typescript import { useQueryState } from 'nuqs'; function TaskFilters() { const [status, setStatus] = useQueryState('status', { defaultValue: 'all' }); const [page, setPage] = useQueryState('page', { defaultValue: '1' }); // URL: /tasks?status=pending&page=2 // Compartible, bookmarkeable, persistente al refrescar } ``` ## La migración: Cómo eliminé Redux paso a paso No lo hice de golpe. Fui slice por slice en 2 semanas: ### Semana 1: Datos del servidor → TanStack Query ```bash npm install @tanstack/react-query ``` 1. Identifiqué qué slices eran "estado del servidor" (datos que vienen de una API) 2. Creé hooks con `useQuery` y `useMutation` para cada uno 3. Eliminé los slices, thunks y selectors correspondientes 4. **Resultado**: -1.800 líneas de código, misma funcionalidad ### Semana 2: Estado local + global → Zustand + estado local 1. Los modals, dropdowns y UI state → `useState` local en cada componente 2. El estado genuinamente global (tema, user, notificaciones) → un store de Zustand de 25 líneas 3. Los filtros de URL → `useSearchParams` 4. **Resultado**: -1.300 líneas más ### Total ``` Antes: 3.100 líneas de Redux Después: 180 líneas (Zustand store + custom hooks de TanStack Query) Reducción: 94% menos código de gestión de estado ``` Y la app funciona igual. Mejor, de hecho, porque TanStack Query gestiona la caché mucho mejor que mi implementación manual con Redux. ## ¿Cuándo SÍ tiene sentido Redux? No voy a decir "Redux nunca". Hay casos donde sigue siendo la mejor opción: - **Editores visuales** (tipo Figma, Photoshop web): Undo/redo nativo con Redux + Immer - **Apps offline-first**: Redux Persist + middleware de sincronización - **Estado compartido entre muchos componentes con lógica compleja**: Middleware, sagas, epics - **Equipos grandes** que necesitan una arquitectura predecible y estandarizada Si estás en alguno de estos casos, Redux Toolkit sigue siendo sólido. Para todo lo demás, hay alternativas más ligeras. ## Resumen: Mi stack de estado en 2026 | Necesidad | Solución | Líneas de setup | |-----------|----------|----------------| | Datos de API | TanStack Query | 5 por query | | Estado global | Zustand | 20-30 (un store) | | Formularios | React Hook Form | 0 (por form) | | Estado de URL | nuqs | 3 por param | | Estado local | useState/useReducer | 1-5 | | **Total** | | **~60 líneas** | Vs las **3.100 líneas** que tenía con Redux. No hay comparación. ## Artículos relacionados - [Cómo estructuro mis carpetas en React/Next.js](/blog/estructura-carpetas-react-nextjs-2026/) — organización sin Redux - [Caso real: SaaS con NestJS y React](/blog/caso-real-saas-atrapaclientes-nestjs-react/) — un SaaS sin Redux - [Testear código generado por IA](/blog/testear-codigo-generado-ia-copilot-cursor-2026/) — testing de hooks de estado]]> <![CDATA[Supabase vs Firebase en 2026: Mi Experiencia Real en Producción Tras 1 Año]]> https://francobosg.netlify.app/blog/supabase-vs-firebase-experiencia-produccion-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/supabase-vs-firebase-experiencia-produccion-2026/ Arquitectura Backend Caso Real =', today).orderBy('date') -- En Supabase requiere entender queries: SELECT m.*, u.name as organizer_name FROM meetings m JOIN users u ON m.organizer_id = u.id WHERE m.date >= CURRENT_DATE ORDER BY m.date ASC LIMIT 20 OFFSET 0; ``` La ventaja: una vez que sabes SQL, puedes hacer **cualquier cosa**. Joins, aggregations, window functions, CTEs. Firestore no puede hacer un JOIN ni pagando. ### Row Level Security (RLS) es mejor... pero más complejo Las políticas RLS de Supabase son SQL estándar: ```sql CREATE POLICY "Users can see their own meetings" ON meetings FOR SELECT USING (auth.uid() = organizer_id OR auth.uid() = ANY(member_ids)); ``` Ventajas sobre Firebase Security Rules: - SQL estándar (no un lenguaje inventado) - Se pueden testear con queries normales - Soportan joins y subqueries Desventaja: si te olvidas de activar RLS en una tabla, **todos los datos son públicos por defecto**. Me pasó en desarrollo (gracias a Dios no en producción) con la tabla de `api_keys`. Supabase te avisa con un warning, pero si lo ignoras... ### El tier gratuito se te queda corto rápido | Recurso | Free tier | Mi uso real (mes 3) | |---------|-----------|---------------------| | Base de datos | 500 MB | 380 MB (bien) | | Storage | 1 GB | 2.1 GB (superado) | | Edge Functions | 500K invocaciones | 1.2M (superado) | | Bandwidth | 2 GB | 4.5 GB (superado) | | **Coste Pro** | $0 | **$25 + $12 extras** | Con el plan Pro ($25/mes) tienes 8 GB de DB, 100 GB de storage y 2M edge functions. Para un SaaS con <5.000 usuarios es suficiente. ### Realtime tiene límites Supabase Realtime (equivalente a los listeners de Firestore) funciona bien para ~100 conexiones simultáneas. A partir de ahí necesitas el add-on de Realtime ($0.0015/mensaje). Firebase Realtime Database maneja mejor las conexiones masivas out-of-the-box. ## Comparativa directa | Aspecto | Firebase | Supabase | Ganador | |---------|----------|----------|---------| | **Setup inicial** | 5 min (consola web) | 5 min (consola web) | Empate | | **Curva de aprendizaje** | Baja (NoSQL, SDK sencillo) | Media (SQL, RLS) | Firebase | | **Base de datos** | Firestore (documento) | PostgreSQL (relacional) | **Supabase** | | **Auth** | Excelente (muchos proveedores) | Muy bueno (GoTrue) | Firebase (por poco) | | **Storage** | GCS integrado | S3-compatible | Empate | | **Realtime** | Excelente | Bueno (límites) | Firebase | | **Edge Functions** | Cloud Functions (Node) | Deno (edge) | Depende | | **Vendor lock-in** | **Alto** | **Bajo** (SQL estándar) | **Supabase** | | **Precio predecible** | No (lecturas variables) | Sí (plan fijo) | **Supabase** | | **SQL/Joins** | No | Sí | **Supabase** | | **Self-hosting** | No | Sí (Docker) | **Supabase** | | **Comunidad/Docs** | Enorme (10+ años) | Grande y creciendo | Firebase | ## Costes reales: Mes a mes para una app con ~2.000 usuarios ### Firebase | Mes | Lecturas | Storage | Functions | Total | |-----|----------|---------|-----------|-------| | 1 | $12 | $1 | $5 | **$18** | | 3 | $28 | $3 | $12 | **$43** | | 6 | $47 | $5 | $18 | **$70** | | 12 | $65 | $8 | $25 | **$98** | El problema: las lecturas crecen exponencialmente con los usuarios porque cada interacción genera más lecturas. ### Supabase | Mes | Plan | Extras | Total | |-----|------|--------|-------| | 1 | Free | $0 | **$0** | | 3 | Pro $25 | $5 (storage) | **$30** | | 6 | Pro $25 | $10 | **$35** | | 12 | Pro $25 | $15 | **$40** | Supabase escala mejor en coste porque PostgreSQL no cobra por lecturas — cobra por almacenamiento y compute. ## ¿Cuál elegiría hoy? **Para un MVP que quiero lanzar en 1 semana**: Firebase. El SDK es más rápido de integrar y la curva de aprendizaje es menor. **Para cualquier proyecto que vaya a durar más de 3 meses**: Supabase. PostgreSQL es una base de datos seria que no te va a limitar cuando necesites hacer queries complejas, y el vendor lock-in es mínimo. **Para un SaaS con suscripciones y facturación**: Supabase sin duda. Necesitas JOINs para reportes, transacciones ACID para pagos, y la capacidad de migrar si Supabase cierra o sube precios. > Si quieres ver cómo estructuré un SaaS con PostgreSQL, lee mi [caso real de AtrapaClientes con NestJS y React](/blog/caso-real-saas-atrapaclientes-nestjs-react/). ## Cómo migré de Firebase a Supabase ### 1. Auth (1 día) ```bash # Exportar usuarios de Firebase firebase auth:export users.json --format=json # Script para importar a Supabase (simplificado) node migrate-auth.js ``` Firebase permite exportar los hashes de contraseñas, así que los usuarios no tienen que hacer "olvidé mi contraseña" después de la migración. ### 2. Datos (2 semanas) ```javascript // Script de migración Firestore → PostgreSQL const meetings = await db.collection('meetings').get(); for (const doc of meetings.docs) { const data = doc.data(); await supabase.from('meetings').insert({ id: doc.id, title: data.title, organizer_id: data.organizerId, date: data.date.toDate(), // Flatten subcollections into related tables member_ids: data.members || [], }); // Migrar subcollection de transcripciones const transcriptions = await doc.ref.collection('transcriptions').get(); for (const trans of transcriptions.docs) { await supabase.from('transcriptions').insert({ meeting_id: doc.id, content: trans.data().text, created_at: trans.data().createdAt.toDate(), }); } } ``` ### 3. Storage (3 días) ```bash # Descargar de Firebase Storage gsutil -m cp -r gs://my-project.appspot.com/ ./backup/ # Subir a Supabase Storage # (usé un script con el SDK de Supabase) ``` ### 4. Reescribir queries (1 semana) De `collection().where().get()` a queries SQL con el SDK de Supabase. Esta fue la parte más lenta pero también la más satisfactoria — las queries SQL son más claras y potentes. ## Conclusión honesta Firebase es un producto excelente para prototipar rápido. Pero cuando tu app crece, la factura se descontrola, las Security Rules se vuelven inmanejables, y el vendor lock-in te atrapa. Supabase requiere más conocimiento inicial (SQL, RLS), pero a cambio te da un stack estándar que puedes migrar a cualquier PostgreSQL del mundo si lo necesitas. **Mi regla**: si el proyecto va a durar más de un sprint, empieza con Supabase. Tu yo del futuro te lo agradecerá. ## Artículos relacionados - [Caso real: SaaS con NestJS y React](/blog/caso-real-saas-atrapaclientes-nestjs-react/) — cómo construí AtrapaClientes sobre PostgreSQL - [Caso real: IA para reuniones con Gemini y Supabase](/blog/caso-real-ia-reuniones-gemini-supabase/) — el proyecto que empecé en Firebase - [Deploy gratis con GitHub Actions](/blog/deploy-gratis-github-actions-netlify-vercel-2026/) — cómo desplegar sin depender de una sola plataforma - [Proteger tu API con JWT](/blog/proteger-api-nodejs-jwt-auth-guia-2026/) — auth hecha a mano vs BaaS]]> <![CDATA[Vercel vs VPS: Cuánto Cuesta Realmente Mantener una App Next.js en 2026]]> https://francobosg.netlify.app/blog/vercel-vs-vps-coste-real-nextjs-2026/ Mon, 20 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/vercel-vs-vps-coste-real-nextjs-2026/ Arquitectura Full-Stack Tutorial Vercel tiene un "Spend Limit" que puedes configurar para que tu app deje de funcionar si llegas a un límite. Pero tu app **deja de funcionar**. Si es un SaaS de pago, eso no es aceptable. ## VPS (Hetzner): La factura desglosada ### Setup | Recurso | Especificaciones | Precio | |---------|-----------------|--------| | VPS CX22 | 2 vCPU, 4 GB RAM, 40 GB SSD | **4,50€/mes** | | IPv4 dedicada | (incluida) | 0€ | | Backups automáticos | 20% del precio del VPS | 0,90€/mes | | **Total** | | **5,40€/mes (~$5.80)** | Sí. **$5.80 al mes**. Independientemente del tráfico. ### Lo que tuve que configurar ```bash # 1. Ubuntu 24.04 + Docker apt update && apt install docker.io docker-compose-v2 nginx certbot # 2. Dockerfile para Next.js # (Next.js tiene un Dockerfile oficial en su repo) # 3. Nginx como reverse proxy server { listen 443 ssl http2; server_name miapp.com; ssl_certificate /etc/letsencrypt/live/miapp.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/miapp.com/privkey.pem; location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } } # 4. Certbot para SSL automático certbot --nginx -d miapp.com # 5. GitHub Actions para deploy automático # (git push → build → docker push → restart en el VPS) ``` **Tiempo de setup inicial**: ~3 horas la primera vez. Después tengo un script que lo replica en 15 minutos. ### Mi factura real del VPS en 6 meses | Mes | VPS | Extras | Total | |-----|-----|--------|-------| | 1-6 | 5,40€ | 0€ | 5,40€ | | **Total** | | | **32,40€ (~$35)** | | **Media** | | | **$5.80/mes** | Cuando el post se viralizó en HN, ¿qué pasó con el VPS? Nada. La CPU subió al 60%, Nginx sirvió páginas cacheadas, y la factura fue... $5.80. Como siempre. ## Comparativa directa | Aspecto | Vercel Pro | VPS Hetzner | |---------|-----------|-------------| | **Precio base** | $20/mes | ~$5.80/mes | | **Precio real (mi caso)** | ~$29.50/mes | ~$5.80/mes | | **Setup** | 0 minutos | 3 horas | | **Deploy** | git push | git push (con CI/CD) | | **SSL** | Automático | Certbot (automático tras setup) | | **CDN** | Incluido (Edge Network) | Necesitas Cloudflare (gratis) | | **Escalado** | Automático | Manual (resize VPS) | | **Serverless Functions** | Nativas | No (usas Node.js normal) | | **Image Optimization** | Incluida | Necesitas sharp + cache | | **Factura sorpresa** | Posible | Imposible | | **Mantenimiento** | 0 | ~1h/mes (updates) | | **ISR/SSR** | Nativo | Funciona con `next start` | | **Monitoring** | Dashboard incluido | Necesitas Uptime Kuma/similar | ## Cuándo elegir Vercel - **Equipo sin DevOps**: Si nadie en tu equipo sabe configurar un servidor, Vercel vale la pena - **Preview Deployments**: Cada PR genera una URL de preview → genial para equipos - **Edge Functions**: Si necesitas lógica en el edge (geolocalización, A/B testing) - **Presupuesto > $30/mes es aceptable**: Para empresas que facturan, $30/mes es nada - **MVP que necesitas YA**: Deploy en 30 segundos vs 3 horas de setup ## Cuándo elegir un VPS - **Presupuesto ajustado**: $5.80 vs $30/mes es una diferencia del 80% - **Tráfico impredecible**: Un VPS no te penaliza por ser viral - **Control total**: Logs, SSH, cron jobs, lo que necesites - **Multi-app**: En un VPS de $5.80 puedo correr 3-4 apps a la vez - **Aprendizaje**: Montar un servidor te enseña cosas que Vercel te oculta ## Mi setup actual (lo mejor de ambos mundos) ``` Blog/Portfolio (este sitio) → Netlify (gratis, estático) SaaS frontend (Next.js) → VPS Hetzner ($5.80/mes) SaaS API (NestJS) → Mismo VPS Base de datos → Supabase ($25/mes) CDN/Caché → Cloudflare (gratis) CI/CD → GitHub Actions (gratis) Monitoring → Uptime Kuma (self-hosted en el mismo VPS) ``` **Total: ~$31/mes** para un stack completo de producción. Con Vercel sería ~$55/mes para lo mismo. > Si quieres configurar el deploy automático con GitHub Actions, lee mi [guía de deploy gratis](/blog/deploy-gratis-github-actions-netlify-vercel-2026/). ## El elefante en la habitación: Next.js sin Vercel Next.js es propiedad de Vercel. Las features más nuevas (Partial Prerendering, Server Actions optimizados) funcionan mejor en Vercel. En un VPS con `next start`, todo funciona, pero sin las optimizaciones de edge. Alternativas si esto te preocupa: - **Astro**: Lo uso para este blog. Genera HTML estático, funciona en cualquier hosting - **Remix**: Funciona en cualquier servidor Node.js sin preferencia por un hosting - **SvelteKit**: Idem, adapter para cualquier plataforma Si estás empezando un proyecto nuevo y no quieres depender de Vercel, considera estas opciones. Si ya tienes una app Next.js, funciona perfectamente en un VPS — solo te pierdes las optimizaciones de edge. ## Artículos relacionados - [Docker para developers: Guía práctica](/blog/docker-para-developers-guia-practica-2026/) — lo que necesitas para el VPS - [Deploy gratis con GitHub Actions](/blog/deploy-gratis-github-actions-netlify-vercel-2026/) — CI/CD para tu VPS - [Supabase vs Firebase en producción](/blog/supabase-vs-firebase-experiencia-produccion-2026/) — la base de datos que va con ambos - [Cómo hice mi portfolio con Vite y Tailwind](/blog/como-hice-mi-portfolio-vite-tailwind/) — un ejemplo de hosting estático gratis]]> <![CDATA[Aider: Programa con IA desde la Terminal (Alternativa Barata a Cursor)]]> https://francobosg.netlify.app/blog/aider-ia-terminal-barata-alternativa-cursor-2026/ Fri, 17 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/aider-ia-terminal-barata-alternativa-cursor-2026/ IA Herramientas Tutorial Código Añade validación de email en el login antes de llamar a la API # Aider edita login.ts, muestra el diff y hace auto-commit # Deshacer el último cambio /undo # Ver qué archivos están en contexto /ls # Cambiar de modelo en caliente /model claude-sonnet-4 # Salir /exit ``` ## Configuración optimizada para ahorrar tokens ### 1. Limitar el repo map Aider genera un "mapa" de tu repositorio (funciones, clases, exports) para que la IA entienda la estructura sin enviar todo el código. Limita los tokens del mapa: ```bash # Por defecto usa ~1024 tokens de mapa. Para proyectos grandes: aider --map-tokens 512 # Para proyectos pequeños, puedes desactivarlo aider --map-tokens 0 ``` ### 2. Añadir solo los archivos necesarios ```bash # ❌ No hagas esto (envía todo al contexto) aider --model gpt-4.1 . # ✅ Añade solo lo que vas a editar aider --model gpt-4.1 /add src/auth/login.ts /add src/auth/middleware.ts ``` ### 3. Usar modelos diferentes por tarea ```bash # Tarea simple → modelo barato aider --model gpt-4.1-nano > genera tests unitarios para esta función # Tarea compleja → modelo potente aider --model claude-sonnet-4 > refactora este módulo para soportar multi-tenencia ``` ### 4. Combinar con caveman prompting Los prompts que escribes en Aider también consumen tokens. Usa [caveman prompting](/blog/caveman-prompting-ahorrar-tokens-ia-2026/): ```bash # ❌ Prompt largo > Por favor, podrías crear una función que reciba un array de usuarios > y devuelva solo los que tienen el campo "activo" en true, ordenados > por fecha de registro de más reciente a más antiguo? # ✅ Caveman > fn: filtrar usuarios activos, ordenar por fecha desc ``` ## Usar Aider con modelos locales (gratis) Si tienes [Ollama instalado](/blog/ollama-ia-local-gratis-sin-api-2026/), puedes usar Aider completamente gratis: ```bash # Instalar Ollama y descargar modelo ollama pull deepseek-coder-v3:16b # Usar Aider con modelo local aider --model ollama/deepseek-coder-v3:16b # O con Qwen (más ligero, 8GB RAM) aider --model ollama/qwen2.5-coder:7b ``` ### ¿Cuándo usar local vs API? | Tarea | Modelo local | API | |-------|-------------|-----| | Añadir docstrings | ✅ Perfecto | Innecesario | | Generar tests simples | ✅ Suficiente | Innecesario | | Renombrar variables | ✅ Perfecto | Innecesario | | Refactoring complejo | ❌ Limitado | ✅ Claude/GPT-4.1 | | Nuevo módulo desde cero | ❌ Poca calidad | ✅ Necesario | | Debugging de errores raros | ❌ No tiene contexto | ✅ Mejor con API | ## Flujo de trabajo real: mi día con Aider ```bash # Mañana: empezar feature con modelo potente aider --model gpt-4.1 /add src/payments/stripe.ts src/payments/types.ts > implementa checkout con Stripe. soporta: tarjeta, SEPA, Apple Pay # Aider genera el código, lo reviso, y hace commit automático # git log: "feat: implement Stripe checkout with card, SEPA, Apple Pay" # Tarde: tests y refactoring con modelo barato aider --model gpt-4.1-nano /add src/payments/stripe.test.ts > genera tests para stripe.ts. cobertura: happy path + errores de pago # Noche: debugging con modelo potente si hace falta aider --model claude-sonnet-4 /add src/payments/stripe.ts src/payments/webhook.ts > el webhook de Stripe falla con "signature verification failed". debug + fix ``` ## Comparativa de costes real: Aider vs Cursor Medí mi uso real durante 4 semanas: ### Semana típica: ~150 consultas | Herramienta | Coste semanal | Coste mensual | |-------------|--------------|---------------| | **Cursor Pro** | $5.00 (fijo) | **$20.00** | | **Aider + GPT-4.1** | ~$2.40 | **~$9.60** | | **Aider + GPT-4.1 nano** (simple) **+ GPT-4.1** (complejo) | ~$1.20 | **~$4.80** | | **Aider + Ollama** (simple) **+ GPT-4.1** (complejo) | ~$0.80 | **~$3.20** | ### Uso intensivo: ~500 consultas/semana | Herramienta | Coste semanal | Coste mensual | |-------------|--------------|---------------| | **Cursor Pro** | $5-10 (cuota extra) | **$20-40** | | **Aider + GPT-4.1** | ~$7.50 | **~$30** | | **Aider mixto** (nano + 4.1 + local) | ~$3.50 | **~$14** | **Conclusión**: para hasta ~300 consultas/mes, Cursor y Aider cuestan parecido. Para más, Aider mixto gana siempre. ## Archivo de configuración `.aider.conf.yml` Crea este archivo en la raíz de tu proyecto para no repetir flags: ```yaml # .aider.conf.yml model: gpt-4.1 map-tokens: 768 auto-commits: true git-commit-verify: true dark-mode: true stream: true # Archivos que Aider nunca debe tocar ignore: - "*.lock" - "dist/**" - "node_modules/**" - ".env" ``` ## Integraciones útiles ### Con VS Code (como extensión) ```bash # Aider tiene extensión experimental para VS Code code --install-extension aider.aider ``` ### Con tmux/screen (sesiones persistentes) ```bash # Iniciar en tmux para no perder la sesión tmux new -s aider aider --model gpt-4.1 # Desconectar: Ctrl+B, D # Reconectar: tmux attach -t aider ``` ### Con scripts de CI/CD ```bash # Aider en modo no-interactivo para automatización aider --model gpt-4.1-nano --no-auto-commits --message "actualiza deps y fix breaking changes" --yes ``` ## Troubleshooting ### Error: "Model not found" ```bash # Verifica que el modelo existe aider --list-models openai/ # Si usas Ollama, verifica que está corriendo ollama list ``` ### Aider edita archivos incorrectos ```bash # Sé específico con los archivos en contexto /drop * # Quita todo /add src/specific-file.ts # Añade solo lo necesario ``` ### Tokens consumidos más de lo esperado ```bash # Revisa cuántos tokens usa el repo map /tokens # Reduce el mapa si es muy grande /map-tokens 256 ``` Si te encuentras errores de rate limit, consulta [cómo solucionar el error 429 Too Many Requests](/blog/error-429-too-many-requests-api-ia-2026/). ## Conclusión Aider no reemplaza a Cursor para todos — si te gusta la UX visual y no te importa el coste fijo, Cursor está bien. Pero si: - Quieres **control total** sobre qué modelo usas y cuánto pagas - Trabajas mucho por **SSH o terminal** - Se te **agotan las peticiones** de Cursor/Copilot - Quieres **auto-commits** limpios en Git Aider es la herramienta. Con el setup correcto (modelo mixto + caveman + local para lo simple), puedes programar con IA por **$5-15/mes** sin límites. Para ver todos los repos que complementan Aider, revisa los [7 repos de GitHub imprescindibles para devs de IA](/blog/repos-github-desarrolladores-ia-2026/). Y para la guía completa de ahorro, lee [cómo programar con IA sin arruinarte](/blog/programar-con-ia-sin-arruinarte-guia-2026/).]]> <![CDATA[Caveman Prompting: Ahorra un 70% en Tokens con la Técnica Cavernícola]]> https://francobosg.netlify.app/blog/caveman-prompting-ahorrar-tokens-ia-2026/ Fri, 17 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/caveman-prompting-ahorrar-tokens-ia-2026/ IA Código Tutorial Gratis **Nota**: El ahorro es solo en tokens de **input**. El output del modelo no cambia. Para modelos caros como Claude Opus 4 ($15/M input), la diferencia es aún mayor. ## Reglas del Caveman Prompting ### 1. Elimina artículos y preposiciones ``` // ❌ Normal "Necesito que me crees una función que calcule el total de una factura incluyendo el IVA correspondiente" // ✅ Caveman "función calcular total factura con IVA" ``` ### 2. Usa abreviaturas comunes ``` // ❌ Normal "Crea una interfaz de TypeScript para el objeto de respuesta de la API" // ✅ Caveman "interfaz TS respuesta API" ``` ### 3. Separa instrucciones con puntos o saltos de línea ``` // ❌ Normal "Primero analiza el error, después busca la causa raíz, y finalmente dame la solución con un ejemplo de código" // ✅ Caveman "1. analiza error 2. causa raíz 3. solución + código" ``` ### 4. Mantén los tecnicismos intactos Los nombres de tecnologías, funciones y conceptos técnicos NO se simplifican: ``` // ❌ Demasiado caveman (pierde contexto) "arregla cosa que no va en servidor" // ✅ Caveman correcto (mantiene tecnicismos) "fix CORS error express middleware. req desde localhost:3000 a API :8080" ``` ### 5. El código nunca se comprime El código fuente se pasa tal cual. Caveman es solo para las **instrucciones**, no para el código que analizas: ``` // ✅ Instrucción caveman + código completo refactora. reduce complejidad ciclomática. function processOrder(order) { // ... código completo sin comprimir ... } ``` ## Caveman Prompting en agentes y flujos automáticos Donde más impacto tiene es en **system prompts de agentes** que se repiten miles de veces: ### System prompt normal (210 tokens): ``` Eres un asistente experto en desarrollo web full-stack. Tu objetivo es ayudar al desarrollador a resolver problemas de código. Cuando el usuario te pida ayuda, debes analizar el problema cuidadosamente, considerar las mejores prácticas, y proporcionar una solución clara con código funcional. Siempre explica tu razonamiento paso a paso. Si no estás seguro de algo, indícalo claramente en vez de inventar una respuesta. ``` ### System prompt caveman (62 tokens): ``` experto dev web fullstack. analiza problemas código. da solución con código funcional. explica razonamiento. si no seguro → dilo, no inventar. ``` **148 tokens ahorrados por llamada.** Si tu agente hace 1.000 llamadas/día: | Modelo | Ahorro diario | Ahorro mensual | |--------|--------------|---------------| | GPT-4.1 | $0.30/día | **$9/mes** | | GPT-4.1 mini | $0.06/día | **$1.80/mes** | | Claude Sonnet 4 | $0.44/día | **$13.20/mes** | | Claude Opus 4 | $2.22/día | **$66.60/mes** | Con Claude Opus en flujos automatizados, caveman prompting puede ahorrarte **$66/mes** solo optimizando el system prompt. ## Combinando Caveman con otras técnicas de ahorro Caveman Prompting es la capa más fácil de aplicar, pero se multiplica con otras optimizaciones: ### 1. Caveman + Modelo barato para tareas simples ```javascript // Triage: modelo nano para clasificar, modelo potente solo cuando hace falta const triage = await openai.chat.completions.create({ model: 'gpt-4.1-nano', // $0.10/M tokens messages: [{ role: 'user', content: 'clasifica intención: bug, feature, pregunta. input: "no me funciona el login"' }], }); if (triage.includes('bug')) { // Solo aquí usamos el modelo caro await openai.chat.completions.create({ model: 'gpt-4.1', messages: [{ role: 'user', content: 'debug login. error: ...' }], }); } ``` Para una comparativa completa de precios por modelo, consulta la [calculadora de precios de IA](/blog/calculadora-precios-ia-2026/). ### 2. Caveman + Prompt Caching El prompt caching de OpenAI y Anthropic cachea el prefijo estático de tus mensajes. Si tu system prompt caveman se repite idéntico, consigues **hasta un 90% de descuento** en esos tokens. Más detalles en el artículo de [prompt caching en OpenAI y Claude](/blog/prompt-caching-openai-claude-ahorrar-tokens-2026/). ### 3. Caveman + RAG (solo contexto relevante) No envíes todo el documento — solo los fragmentos relevantes, y escribe la instrucción en caveman: ``` responde pregunta usando SOLO este contexto. no inventar. contexto: {fragmentos_relevantes} pregunta: {pregunta_usuario} ``` Para implementar RAG desde cero, sigue el tutorial de [cómo crear un chatbot RAG con OpenAI](/blog/crear-chatbot-rag-openai-tutorial-2026/). ## ¿Cuándo NO usar Caveman Prompting? | Escenario | ¿Caveman? | Por qué | |-----------|-----------|---------| | System prompts de agentes | ✅ Sí | Se repiten miles de veces | | Clasificación / triage | ✅ Sí | Instrucciones simples, alta frecuencia | | Prompts de usuario final | ❌ No | El usuario escribe como quiere | | Prompts con matices legales/médicos | ⚠️ Con cuidado | La ambigüedad puede ser peligrosa | | Código a analizar | ❌ Nunca | El código va completo siempre | | Few-shot examples | ⚠️ Parcial | Reduce la instrucción, mantén los ejemplos | ## Caveman en editores de código (Copilot, Cursor) Si usas [Cursor, Copilot o Windsurf](/blog/cursor-vs-copilot-vs-windsurf-2026/), los prompts en el chat inline también consumen tokens de tu cuota: ``` // ❌ En el chat de Cursor "¿Podrías por favor crear una función de TypeScript que reciba un array de objetos de tipo Product y devuelva solo los que tengan un precio mayor a un valor dado como parámetro?" // ✅ Caveman en Cursor "fn TS: filtra Product[] por precio > parámetro" ``` En Cursor ($20/mes con límite de peticiones premium), cada prompt optimizado te deja hacer **más consultas antes de agotar la cuota**. Si buscas una alternativa más barata, [Aider](/blog/aider-ia-terminal-barata-alternativa-cursor-2026/) funciona directamente desde la terminal con tu propia API key. ## Herramienta: comprime tus prompts automáticamente Si no quieres comprimir manualmente, puedes crear un compresor simple: ```javascript function cavemanify(prompt) { // Eliminar artículos y preposiciones comunes en español const stopWords = new Set([ 'el', 'la', 'los', 'las', 'un', 'una', 'unos', 'unas', 'de', 'del', 'en', 'por', 'para', 'con', 'que', 'al', 'es', 'son', 'está', 'están', 'fue', 'ser', 'como', 'su', 'sus', 'este', 'esta', 'ese', 'esa', 'mi', 'tu', 'me', 'te', 'se', 'lo', 'le', 'nos', 'les', 'muy', 'más', 'ya', 'también', 'pero', 'sin embargo', 'por favor', 'necesito que', 'quiero que', 'podrías', ]); return prompt .toLowerCase() .split(/\s+/) .filter(word => !stopWords.has(word)) .join(' ') .replace(/\s+/g, ' ') .trim(); } console.log(cavemanify( 'Por favor analiza el siguiente código JavaScript y encuentra los errores' )); // → "analiza siguiente código javascript encuentra errores" ``` > **Importante**: Esto es una simplificación. Para producción, usa esto como primer paso y revisa manualmente que no se pierda contexto clave. ## Comparativa final: impacto real en costes Para un flujo de agente que procesa 500 tareas/día con 5 llamadas cada una (2.500 llamadas/día): | Configuración | Tokens/día | Coste mensual (GPT-4.1 mini) | Coste mensual (Claude Sonnet 4) | |--------------|-----------|------------------------------|-------------------------------| | Prompts normales | 725K | **$8.70** | **$65.25** | | Caveman Prompting | 260K | **$3.12** | **$23.40** | | Caveman + modelo nano para triage | 180K | **$1.62** | **$16.20** | | Caveman + caching + triage | 95K | **$0.57** | **$4.28** | De **$65/mes a $4/mes** con Claude Sonnet. Un ahorro del **93%** combinando las técnicas. Si quieres usar APIs sin gastar nada para probar estas técnicas, revisa las [APIs de IA gratuitas disponibles](/blog/usar-api-chatgpt-claude-gratis-2026/). Y para escribir prompts más efectivos (caveman o no), consulta los [mejores prompts para programar con IA](/blog/mejores-prompts-programar-ia-2026/). ## Conclusión Caveman Prompting no es un hack — es sentido común aplicado a tokens: 1. **Elimina palabras que no aportan información** al modelo 2. **Mantén tecnicismos y código** intactos 3. **Aplícalo en system prompts y flujos automáticos** donde se repite miles de veces 4. **Combínalo con caching y triage** para multiplicar el ahorro Es la optimización con mejor ratio esfuerzo/resultado: cambias cómo escribes prompts y ahorras un 70% desde el primer día.]]> <![CDATA[Error 'Context Length Exceeded' en OpenAI y Claude: Cómo Solucionarlo]]> https://francobosg.netlify.app/blog/error-context-length-exceeded-openai-claude-2026/ Fri, 17 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/error-context-length-exceeded-openai-claude-2026/ IA Código Tutorial **Nota**: que un modelo acepte 1M de tokens no significa que debas enviarlos. Más contexto = más coste y peor calidad de respuesta (la IA se "pierde" en textos largos). ## ¿Por qué ocurre? Las 3 causas ### 1. Documento demasiado grande Intentas enviar un archivo completo como contexto: ```javascript // ❌ Esto rompe si el archivo tiene más de ~500KB const doc = fs.readFileSync('manual-completo.txt', 'utf-8'); await openai.chat.completions.create({ model: 'gpt-4.1-mini', messages: [{ role: 'user', content: `Resume esto:\n${doc}` }] }); // 💥 context length exceeded ``` ### 2. Historial de conversación acumulado Cada mensaje del chat se envía como contexto. Después de 50+ mensajes, el historial supera el límite: ```javascript // ❌ El historial crece sin control messages.push({ role: 'user', content: nuevoMensaje }); messages.push({ role: 'assistant', content: respuestaIA }); // Tras 100 mensajes → 💥 ``` ### 3. System prompt demasiado largo Un system prompt con instrucciones detalladas + ejemplos puede ocupar miles de tokens: ```javascript // ❌ System prompt de 10.000 tokens const systemPrompt = `Eres un asistente experto en... [200 líneas de instrucciones, ejemplos, formato de salida, reglas...]`; ``` ## Técnica 1: Chunking inteligente Divide el documento en fragmentos que quepan en el contexto. La clave es cortar en **puntos lógicos** (párrafos, secciones) y no a mitad de frase. ```javascript /** * Divide un texto en chunks respetando párrafos. * @param text - El texto completo * @param maxTokens - Tokens máx. por chunk (dejar margen para prompt) * @param overlap - Tokens de solapamiento entre chunks */ function chunkText(text, maxTokens = 3000, overlap = 200) { const paragraphs = text.split(/\n\n+/); const chunks = []; let currentChunk = ''; let currentTokens = 0; for (const paragraph of paragraphs) { const paragraphTokens = Math.ceil(paragraph.length / 3); // estimación español if (currentTokens + paragraphTokens > maxTokens && currentChunk) { chunks.push(currentChunk.trim()); // Solapamiento: mantener últimos N caracteres const overlapText = currentChunk.slice(-(overlap * 3)); currentChunk = overlapText + '\n\n' + paragraph; currentTokens = Math.ceil(currentChunk.length / 3); } else { currentChunk += (currentChunk ? '\n\n' : '') + paragraph; currentTokens += paragraphTokens; } } if (currentChunk.trim()) chunks.push(currentChunk.trim()); return chunks; } // Uso: procesar un documento grande chunk a chunk const chunks = chunkText(documentoGrande, 4000); const resultados = []; for (const chunk of chunks) { const response = await openai.chat.completions.create({ model: 'gpt-4.1-mini', messages: [ { role: 'system', content: 'Extrae los puntos clave de este fragmento.' }, { role: 'user', content: chunk } ] }); resultados.push(response.choices[0].message.content); } // Síntesis final const resumenFinal = await openai.chat.completions.create({ model: 'gpt-4.1-mini', messages: [ { role: 'system', content: 'Combina estos resúmenes parciales en uno coherente.' }, { role: 'user', content: resultados.join('\n---\n') } ] }); ``` ## Técnica 2: RAG (Retrieval-Augmented Generation) En vez de enviar todo el documento, busca solo los fragmentos relevantes para la pregunta. Es la técnica más eficiente para documentos grandes. ```javascript import { ChromaClient } from 'chromadb'; import OpenAI from 'openai'; const chroma = new ChromaClient(); const openai = new OpenAI(); // 1. Indexar documento (una sola vez) const collection = await chroma.getOrCreateCollection({ name: 'docs' }); const chunks = chunkText(documento, 500); // chunks pequeños para búsqueda await collection.add({ ids: chunks.map((_, i) => `chunk-${i}`), documents: chunks, }); // 2. Buscar solo lo relevante async function askWithRAG(question) { const results = await collection.query({ queryTexts: [question], nResults: 5, // solo los 5 chunks más relevantes }); const context = results.documents[0].join('\n\n'); return openai.chat.completions.create({ model: 'gpt-4.1-mini', messages: [ { role: 'system', content: 'Responde basándote SOLO en el contexto proporcionado.' }, { role: 'user', content: `Contexto:\n${context}\n\nPregunta: ${question}` } ] }); } ``` > Para un tutorial completo de RAG con ChromaDB, revisa [cómo crear un chatbot RAG con OpenAI desde cero](/blog/crear-chatbot-rag-openai-tutorial-2026/). Si quieres ir un paso más allá y crear un agente que use RAG como herramienta, mira el tutorial de [agentes de IA con LangChain](/blog/crear-agente-ia-langchain-nodejs-tutorial/). ## Técnica 3: Sliding Window para chat Para conversaciones largas, mantén solo los últimos N mensajes + un resumen de los anteriores: ```javascript const MAX_MESSAGES = 20; async function manageChatHistory(messages) { if (messages.length <= MAX_MESSAGES) return messages; // Resumir los mensajes antiguos const oldMessages = messages.slice(0, -MAX_MESSAGES); const recentMessages = messages.slice(-MAX_MESSAGES); const summary = await openai.chat.completions.create({ model: 'gpt-4.1-nano', // modelo barato para resumen messages: [ { role: 'system', content: 'Resume esta conversación en 3-5 puntos clave. Mantén datos concretos.' }, ...oldMessages ] }); return [ { role: 'system', content: `Resumen de la conversación anterior:\n${summary.choices[0].message.content}` }, ...recentMessages ]; } ``` ## Técnica 4: Contar tokens antes de enviar Prevén el error comprobando el tamaño antes de la llamada: ```javascript import { encoding_for_model } from 'tiktoken'; const encoder = encoding_for_model('gpt-4.1'); function countTokens(messages) { let total = 0; for (const msg of messages) { total += 4; // overhead por mensaje total += encoder.encode(msg.content).length; } total += 2; // overhead final return total; } async function safeChatCompletion(messages, maxOutputTokens = 4096) { const inputTokens = countTokens(messages); const modelLimit = 1_047_576; // gpt-4.1 if (inputTokens + maxOutputTokens > modelLimit) { console.warn(`⚠️ ${inputTokens} tokens de input + ${maxOutputTokens} output = ${inputTokens + maxOutputTokens} (límite: ${modelLimit})`); // Aplicar sliding window o truncar messages = await manageChatHistory(messages); } return openai.chat.completions.create({ model: 'gpt-4.1', messages, max_tokens: maxOutputTokens, }); } ``` Si combinado con este error estás viendo errores 429, es probable que estés enviando demasiadas peticiones con contextos grandes. Revisa la guía de [Error 429 Too Many Requests en APIs de IA](/blog/error-429-too-many-requests-api-ia-2026/) para implementar rate limiting. ## Cuándo usar cada técnica | Escenario | Técnica | Por qué | |-----------|---------|---------| | Documento de 1 uso (resumir, analizar) | **Chunking** | Simple, no necesita base de datos | | Base de conocimiento + preguntas | **RAG** | Solo envía lo relevante | | Chat conversacional largo | **Sliding Window** | Mantiene contexto reciente | | Prevención en cualquier caso | **Conteo de tokens** | Evita errores antes de que ocurran | | Documento + necesitas JSON exacto | **Chunking + RAG** | Combina con [parseo JSON robusto](/blog/parsear-json-ia-sin-errores-openai-claude-2026/) | ## Error relacionado: respuesta truncada A veces el modelo cabe en el contexto pero la **respuesta** se corta por `max_tokens`: ```javascript const response = await openai.chat.completions.create({ /* ... */ }); if (response.choices[0].finish_reason === 'length') { // ⚠️ La respuesta se cortó — pedir continuación o aumentar max_tokens console.warn('Respuesta truncada. Aumentando max_tokens...'); } ``` Esto es especialmente problemático si pides respuestas en JSON — un JSON truncado es JSON inválido. Consulta las [técnicas para parsear JSON de IA sin errores](/blog/parsear-json-ia-sin-errores-openai-claude-2026/) para manejar este caso. ## Optimizar costes con contextos grandes Enviar muchos tokens no solo genera errores — es caro. Algunas tácticas: 1. **Usa modelos con context window grande y barato**: GPT-4.1 nano (1M tokens, $0.10/M) 2. **Cachea respuestas**: si el mismo documento se consulta varias veces, guarda el resultado 3. **Preprocesa**: extrae solo texto relevante antes de enviar (quita HTML, headers, footers) Si quieres probar estas técnicas sin coste, revisa las [APIs de IA gratuitas disponibles](/blog/usar-api-chatgpt-claude-gratis-2026/). Para ejecutar modelos con contexto ilimitado en local, [Ollama](/blog/ollama-ia-local-gratis-sin-api-2026/) es la mejor opción. ## Conclusión El error de "context length exceeded" no es un callejón sin salida — es una señal de que necesitas una estrategia de gestión de contexto: 1. **Chunking** para documentos de un solo uso 2. **RAG** para bases de conocimiento con múltiples consultas 3. **Sliding Window** para chats largos 4. **Conteo preventivo** como red de seguridad La técnica más robusta para producción es **RAG**: envías solo lo relevante, reduces costes y mejoras la calidad de las respuestas.]]> <![CDATA[Function Calling en OpenAI y Claude: Conectar IA con APIs sin Alucinaciones]]> https://francobosg.netlify.app/blog/function-calling-openai-claude-conectar-ia-apis-2026/ Fri, 17 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/function-calling-openai-claude-conectar-ia-apis-2026/ IA Código Tutorial { // Llamada real a API de clima const res = await fetch( `https://api.weatherapi.com/v1/current.json?key=${process.env.WEATHER_KEY}&q=${encodeURIComponent(city)}` ); const data = await res.json(); return { city, temperature: units === 'celsius' ? data.current.temp_c : data.current.temp_f, condition: data.current.condition.text, units }; }, search_products: async ({ query, max_price, category }) => { // Consulta real a base de datos const filters = { query }; if (max_price) filters.max_price = max_price; if (category) filters.category = category; // Simulación — en producción sería una query a tu DB return [ { name: 'Auriculares Sony WH-1000XM6', price: 299, category: 'electrónica' }, { name: 'Auriculares Apple AirPods Pro 3', price: 279, category: 'electrónica' } ]; } }; ``` ### El bucle de ejecución ```javascript async function chatWithTools(userMessage) { const messages = [ { role: 'system', content: 'Eres un asistente útil. Usa las herramientas cuando necesites datos reales.' }, { role: 'user', content: userMessage } ]; // Bucle: el modelo puede pedir múltiples funciones while (true) { const response = await openai.chat.completions.create({ model: 'gpt-4.1-mini', messages, tools, }); const choice = response.choices[0]; // Si el modelo responde con texto, hemos terminado if (choice.finish_reason === 'stop') { return choice.message.content; } // Si el modelo pide funciones, ejecutarlas if (choice.finish_reason === 'tool_calls') { messages.push(choice.message); // Añadir la petición del modelo for (const toolCall of choice.message.tool_calls) { const functionName = toolCall.function.name; const args = JSON.parse(toolCall.function.arguments); console.log(`🔧 Ejecutando ${functionName}(${JSON.stringify(args)})`); // Ejecutar la función real const fn = availableFunctions[functionName]; if (!fn) { throw new Error(`Función desconocida: ${functionName}`); } const result = await fn(args); // Devolver resultado al modelo messages.push({ role: 'tool', tool_call_id: toolCall.id, content: JSON.stringify(result) }); } // El bucle continúa — el modelo procesará los resultados } } } // Uso const respuesta = await chatWithTools('¿Qué tiempo hace en Madrid?'); console.log(respuesta); // → "En Madrid ahora mismo hay 23°C con cielo despejado." ``` ## Tool Use con Claude (Anthropic) Claude usa el mismo concepto pero con sintaxis diferente: ```javascript import Anthropic from '@anthropic-ai/sdk'; const anthropic = new Anthropic(); const tools = [ { name: 'get_weather', description: 'Obtiene el clima actual de una ciudad', input_schema: { type: 'object', properties: { city: { type: 'string', description: 'Nombre de la ciudad' }, units: { type: 'string', enum: ['celsius', 'fahrenheit'] } }, required: ['city'] } } ]; async function chatWithToolsClaude(userMessage) { const messages = [{ role: 'user', content: userMessage }]; while (true) { const response = await anthropic.messages.create({ model: 'claude-sonnet-4-20250514', max_tokens: 4096, tools, messages, }); // Si termina sin pedir herramientas if (response.stop_reason === 'end_turn') { const textBlock = response.content.find(b => b.type === 'text'); return textBlock?.text || ''; } // Si pide herramientas if (response.stop_reason === 'tool_use') { messages.push({ role: 'assistant', content: response.content }); const toolResults = []; for (const block of response.content) { if (block.type !== 'tool_use') continue; const fn = availableFunctions[block.name]; const result = await fn(block.input); toolResults.push({ type: 'tool_result', tool_use_id: block.id, content: JSON.stringify(result) }); } messages.push({ role: 'user', content: toolResults }); } } } ``` ## Parallel function calling GPT-4.1 puede pedir **múltiples funciones a la vez** si las necesita. Por ejemplo: "¿Qué tiempo hace en Madrid y Barcelona?" ```javascript // El modelo devuelve tool_calls con 2 funciones: // tool_calls: [ // { function: { name: 'get_weather', arguments: '{"city":"Madrid"}' } }, // { function: { name: 'get_weather', arguments: '{"city":"Barcelona"}' } } // ] // Ejecutar en paralelo para mejor rendimiento const results = await Promise.all( choice.message.tool_calls.map(async (toolCall) => { const fn = availableFunctions[toolCall.function.name]; const args = JSON.parse(toolCall.function.arguments); const result = await fn(args); return { role: 'tool', tool_call_id: toolCall.id, content: JSON.stringify(result) }; }) ); messages.push(choice.message, ...results); ``` ## Function calling + streaming Puedes combinar function calling con streaming para que el usuario vea la respuesta final en tiempo real: ```javascript async function streamWithTools(userMessage, onToken) { const messages = [ { role: 'system', content: 'Usa las herramientas cuando necesites datos reales.' }, { role: 'user', content: userMessage } ]; // Fase 1: obtener tool calls (sin streaming) const initial = await openai.chat.completions.create({ model: 'gpt-4.1-mini', messages, tools, }); if (initial.choices[0].finish_reason === 'tool_calls') { messages.push(initial.choices[0].message); // Ejecutar funciones for (const tc of initial.choices[0].message.tool_calls) { const fn = availableFunctions[tc.function.name]; const result = await fn(JSON.parse(tc.function.arguments)); messages.push({ role: 'tool', tool_call_id: tc.id, content: JSON.stringify(result) }); } } // Fase 2: respuesta final con streaming const stream = await openai.chat.completions.create({ model: 'gpt-4.1-mini', messages, stream: true, }); for await (const chunk of stream) { const content = chunk.choices[0]?.delta?.content; if (content) onToken(content); } } ``` Para una implementación completa de streaming con SSE hasta el navegador, consulta el tutorial de [streaming SSE con ChatGPT y Claude en Node.js](/blog/streaming-sse-chatgpt-claude-nodejs-2026/). ## Seguridad: validar antes de ejecutar **NUNCA** ejecutes funciones que el modelo pida sin validación. El modelo podría intentar ejecutar funciones que no has definido o pasar argumentos maliciosos. ```javascript // ✅ Whitelist de funciones permitidas const ALLOWED_FUNCTIONS = new Set(['get_weather', 'search_products']); function executeToolCall(toolCall) { const { name, arguments: rawArgs } = toolCall.function; // 1. Verificar que la función existe y está permitida if (!ALLOWED_FUNCTIONS.has(name)) { throw new Error(`Función no permitida: ${name}`); } // 2. Parsear y validar argumentos const args = JSON.parse(rawArgs); // 3. Ejecutar return availableFunctions[name](args); } ``` ## Function calling vs. agentes Function calling es el **mecanismo base**. Un agente lo usa dentro de un **bucle de razonamiento**: | Aspecto | Function calling | Agente | |---------|-----------------|--------| | **Llamadas** | 1-3 por turno | Múltiples en bucle | | **Decisión** | Modelo elige función | Modelo planifica y ejecuta secuencia | | **Complejidad** | Baja | Alta | | **Ejemplo** | "¿Qué clima hace?" → 1 API call | "Planifica un viaje" → buscar vuelos + hotel + clima | | **Framework** | SDK nativo de OpenAI/Claude | LangChain, CrewAI | Si necesitas un agente completo que encadene múltiples herramientas, revisa el tutorial de [cómo crear un agente de IA con LangChain y Node.js](/blog/crear-agente-ia-langchain-nodejs-tutorial/). ## Caso práctico: asistente de e-commerce ```javascript const ecommerceTools = [ { type: 'function', function: { name: 'search_products', description: 'Busca productos en el catálogo', parameters: { type: 'object', properties: { query: { type: 'string' }, category: { type: 'string' }, max_price: { type: 'number' } }, required: ['query'], additionalProperties: false } } }, { type: 'function', function: { name: 'get_order_status', description: 'Consulta el estado de un pedido por ID', parameters: { type: 'object', properties: { order_id: { type: 'string', description: 'ID del pedido (ej: ORD-12345)' } }, required: ['order_id'], additionalProperties: false } } }, { type: 'function', function: { name: 'check_stock', description: 'Verifica el stock disponible de un producto', parameters: { type: 'object', properties: { product_id: { type: 'string' } }, required: ['product_id'], additionalProperties: false } } } ]; // Ahora el chatbot puede: // "¿Tienen auriculares por menos de 100€?" → search_products // "¿Dónde está mi pedido ORD-12345?" → get_order_status // "¿Hay stock del Sony XM6?" → check_stock + search_products ``` ## Errores comunes ### 1. No manejar funciones desconocidas El modelo puede alucinar un nombre de función. **Siempre** verifica contra tu whitelist. ### 2. No devolver errores al modelo Si la función falla, devuelve el error para que el modelo pueda informar al usuario: ```javascript try { const result = await fn(args); return { role: 'tool', tool_call_id: tc.id, content: JSON.stringify(result) }; } catch (error) { return { role: 'tool', tool_call_id: tc.id, content: JSON.stringify({ error: error.message }) }; } ``` ### 3. Descripciones vagas en las herramientas El modelo decide qué función usar basándose en `description`. Si es vaga, elegirá mal: ```javascript // ❌ El modelo no sabe cuándo usarla { description: 'Hace cosas con datos' } // ✅ El modelo sabe exactamente cuándo usarla { description: 'Busca productos en el catálogo por nombre, categoría o rango de precio. Devuelve nombre, precio y disponibilidad.' } ``` Para escribir mejores descripciones de herramientas (y prompts en general), revisa los [mejores prompts para programar con IA](/blog/mejores-prompts-programar-ia-2026/). ## Conclusión Function calling es la pieza clave para pasar de un chatbot que inventa datos a uno que **consulta información real**: 1. **Define herramientas** con schemas JSON claros 2. **Implementa un bucle** que ejecute las funciones y devuelva resultados al modelo 3. **Valida siempre** que las funciones y argumentos son legítimos 4. **Combina con streaming** para UX en tiempo real Es más sencillo de lo que parece — el 80% del trabajo es definir buenos schemas y descripciones. El modelo se encarga del resto. Si quieres que las respuestas del modelo sean JSON estructurado (no solo texto), revisa [cómo parsear JSON de IA sin errores](/blog/parsear-json-ia-sin-errores-openai-claude-2026/). Y para ejecutar todo esto con modelos gratuitos en local, [Ollama](/blog/ollama-ia-local-gratis-sin-api-2026/) es tu mejor opción.]]> <![CDATA[Cómo Parsear JSON con IA sin Errores: Evitar Alucinaciones en OpenAI y Claude]]> https://francobosg.netlify.app/blog/parsear-json-ia-sin-errores-openai-claude-2026/ Fri, 17 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/parsear-json-ia-sin-errores-openai-claude-2026/ IA Código Tutorial **Tip pro**: Con Claude, añadir `Responde SOLO con JSON` al system prompt reduce el texto extra en un 95%. Si necesitas prompts más efectivos, revisa la guía de [mejores prompts para programar con IA](/blog/mejores-prompts-programar-ia-2026/). ## Solución 3: Validación con Zod (la capa de seguridad) Parsear JSON no es suficiente. Necesitas **validar** que los campos existen, tienen el tipo correcto y no hay campos inventados. [Zod](https://zod.dev) es el estándar para esto en TypeScript. ```typescript import { z } from 'zod'; // Define el schema UNA vez — sirve para validación y como tipo const ProductoSchema = z.object({ nombre: z.string().min(1), precio: z.number().positive(), specs: z.array(z.string()).min(1), disponible: z.boolean().default(true), }); type Producto = z.infer; function parseProductoIA(raw: string): Producto { const parsed = parseAIJson(raw); // extrae JSON del texto return ProductoSchema.parse(parsed); // valida y tipa } // Uso try { const producto = parseProductoIA(respuestaIA); console.log(producto.nombre); // ✅ TypeSafe } catch (error) { if (error instanceof z.ZodError) { console.error('La IA devolvió datos inválidos:', error.issues); // → Reintentar con prompt más específico } } ``` ### Patrón completo: retry con validación En producción, combinas las 3 técnicas con retry automático: ```typescript async function extractWithRetry( schema: z.ZodType, prompt: string, maxRetries = 3 ): Promise { let lastError: Error | null = null; for (let i = 0; i < maxRetries; i++) { try { const response = await anthropic.messages.create({ model: 'claude-sonnet-4-20250514', max_tokens: 1024, system: `Responde SOLO con JSON válido. Sin texto adicional.`, messages: [{ role: 'user', content: prompt }] }); const raw = response.content[0].text; const parsed = parseAIJson(raw); return schema.parse(parsed); // ✅ Válido } catch (error) { lastError = error as Error; console.warn(`Intento ${i + 1} fallido:`, error.message); } } throw new Error(`Fallo tras ${maxRetries} intentos: ${lastError?.message}`); } // Uso const producto = await extractWithRetry( ProductoSchema, 'Extrae datos: MacBook Air M4, 1.299€, 16GB RAM, 512GB SSD' ); ``` Si estás experimentando errores 429 durante los reintentos, consulta la guía de [cómo solucionar el Error 429 en APIs de IA](/blog/error-429-too-many-requests-api-ia-2026/) para implementar backoff exponencial. ## Cuándo usar cada técnica | Escenario | Técnica recomendada | |-----------|-------------------| | Solo usas OpenAI (gpt-4.1) | Structured Outputs (`strict: true`) | | Usas Claude o modelos open-source | Parser robusto + Zod | | Multi-proveedor (OpenAI + Claude) | Structured Outputs en OpenAI, parser + Zod en el resto | | Datos críticos (pagos, médicos) | Structured Outputs + Zod como segunda validación | | Prototipo rápido | `JSON.parse()` + try/catch básico | ## Errores comunes y cómo evitarlos ### 1. No definir `additionalProperties: false` Sin esto, la IA puede inventar campos que pasan el parseo pero rompen tu lógica: ```javascript // ❌ Sin restricción schema: { properties: { nombre: { type: 'string' } } } // La IA puede añadir: { nombre: "X", opinion_personal: "Me encanta este producto" } // ✅ Con restricción schema: { properties: { nombre: { type: 'string' } }, additionalProperties: false } ``` ### 2. Prompt demasiado vago ``` // ❌ Vago → la IA decide el formato "Dame los datos del producto" // ✅ Específico → formato predecible "Extrae nombre (string), precio (number en €) y specs (array de strings)" ``` Para aprender a escribir prompts que produzcan output estructurado fiable, revisa los [20 mejores prompts para programar con IA](/blog/mejores-prompts-programar-ia-2026/). ### 3. No manejar JSON truncado Si el `max_tokens` es bajo, el JSON puede cortarse: ```javascript // Detectar respuesta truncada if (response.choices[0].finish_reason === 'length') { throw new Error('Respuesta truncada: aumenta max_tokens'); } ``` Este problema está directamente relacionado con el [error de context length exceeded](/blog/error-context-length-exceeded-openai-claude-2026/): si tu prompt de entrada consume casi todo el límite, queda poco espacio para la respuesta. ## Checklist para producción - [ ] Schema definido con Zod (validación + tipos) - [ ] `additionalProperties: false` en schemas de OpenAI - [ ] Parser robusto que maneja texto extra y markdown - [ ] Retry automático (2-3 intentos) con backoff - [ ] Detección de respuesta truncada (`finish_reason`) - [ ] Logging de respuestas inválidas para mejorar prompts - [ ] Fallback a modelo alternativo si falla el principal Si estás construyendo un sistema que integra la IA con APIs externas, el [function calling](/blog/function-calling-openai-claude-conectar-ia-apis-2026/) es una alternativa más robusta que parsear JSON manualmente. ## Conclusión El JSON roto es el error más común al integrar LLMs, pero tiene solución: 1. **OpenAI**: usa Structured Outputs — JSON garantizado 2. **Claude y otros**: parser robusto + prompt estricto 3. **Siempre**: valida con Zod antes de usar los datos La combinación de estas tres capas elimina el 99.9% de los errores de parseo en producción. Si quieres probar esto con APIs gratuitas antes de pagar, revisa [cómo usar la API de ChatGPT y Claude gratis](/blog/usar-api-chatgpt-claude-gratis-2026/).]]> <![CDATA[Cómo Programar con IA sin Arruinarte: Guía Completa 2026]]> https://francobosg.netlify.app/blog/programar-con-ia-sin-arruinarte-guia-2026/ Fri, 17 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/programar-con-ia-sin-arruinarte-guia-2026/ IA Gratis Tutorial Herramientas c.pageContent).join('\n---\n'); ``` Tutorial de RAG: [Cómo crear un chatbot RAG con OpenAI](/blog/crear-chatbot-rag-openai-tutorial-2026/). ## Técnica 8: Batching de requests Si haces 10 llamadas secuenciales a la API, combínalas en una sola con instrucciones claras: ```javascript // ❌ 10 llamadas separadas (10x coste de prompt) for (const archivo of archivos) { await analizar(archivo); // Cada una envía el system prompt completo } // ✅ 1 llamada con batch const prompt = `analiza estos 10 archivos. por cada uno: bugs + sugerencias. ${archivos.map((a, i) => `### Archivo ${i+1}: ${a.nombre}\n${a.codigo}`).join('\n\n')}`; await analizar(prompt); // 1 sola llamada, 1 solo system prompt ``` **Cuidado**: esto funciona bien hasta ~20-30K tokens de input. Más allá, la calidad baja. Para modelos con ventana grande (1M tokens), funciona mejor. Si te encuentras errores de contexto demasiado largo, lee [cómo solucionar el error "context length exceeded"](/blog/error-context-length-exceeded-openai-claude-2026/). ## Técnica 9: Caché local de respuestas Para preguntas frecuentes o repetidas, cachea las respuestas: ```javascript import { createHash } from 'crypto'; const cache = new Map(); async function consultarConCache(prompt, model = 'gpt-4.1-mini') { const key = createHash('md5').update(`${model}:${prompt}`).digest('hex'); if (cache.has(key)) { console.log('Cache hit — $0'); return cache.get(key); } const response = await openai.chat.completions.create({ model, messages: [{ role: 'user', content: prompt }], }); const result = response.choices[0].message.content; cache.set(key, result); return result; } ``` Para una solución más avanzada con búsqueda semántica, usa [GPTCache](/blog/repos-github-desarrolladores-ia-2026/#5-gptcache--cachea-respuestas-y-ahorra-un-90). ## Técnica 10: Monitoriza lo que gastas No puedes optimizar lo que no mides. Activa el tracking de tokens: ```javascript const response = await openai.chat.completions.create({ model: 'gpt-4.1', messages: [...], }); // OpenAI te dice exactamente cuánto consumiste const { prompt_tokens, completion_tokens, total_tokens } = response.usage; const coste = (prompt_tokens * 2 + completion_tokens * 8) / 1_000_000; console.log(`Tokens: ${total_tokens} | Coste: $${coste.toFixed(4)}`); ``` ### Dashboard semanal de costes Lleva un registro semanal. Si notas un pico, revisa qué agente o flujo lo causó: | Semana | Tokens usados | Coste | Modelo principal | |--------|--------------|-------|-----------------| | Sem 1 | 2.4M | $12.30 | Claude Sonnet 4 | | Sem 2 | 1.1M | $4.20 | GPT-4.1 (tras optimizar) | | Sem 3 | 0.8M | $1.80 | GPT-4.1 + caching | | Sem 4 | 0.6M | $0.95 | + caveman + triage | ## Plan de acción: de $80/mes a $10/mes | Paso | Acción | Ahorro estimado | |------|--------|----------------| | 1 | Clasificar tareas por complejidad → modelo adecuado | 60% | | 2 | [Caveman prompting](/blog/caveman-prompting-ahorrar-tokens-ia-2026/) en system prompts | +15% | | 3 | [Ollama](/blog/ollama-ia-local-gratis-sin-api-2026/) para autocompletado y tareas simples | +10% | | 4 | [Prompt caching](/blog/prompt-caching-openai-claude-ahorrar-tokens-2026/) en flujos repetitivos | +10% | | 5 | Reducir contexto enviado (solo código relevante) | +5% | | **Total** | | **~80-90%** | ## Ejemplo real: mi setup actual | Herramienta | Uso | Coste/mes | |-------------|-----|-----------| | **Ollama** (local) | Autocompletado, prototipos | $0 | | **GPT-4.1 nano** (API) | Triage, clasificación | ~$1 | | **GPT-4.1** (API) | Código, agentes | ~$5 | | **Claude Sonnet 4** (API) | Refactoring complejo | ~$4 | | **Aider** (terminal) | Editor IA principal | $0 (usa mis API keys) | | **Total** | | **~$10/mes** | Antes gastaba $75/mes. Ahora $10. La diferencia no es usar peor IA — es usar la IA correcta para cada tarea. ## Conclusión No necesitas gastar $100/mes para programar con IA en 2026. Con las técnicas correctas: 1. **Elige el modelo por tarea**, no por marca 2. **Comprime prompts** con caveman prompting 3. **Usa modelos locales** para lo que no necesita nube 4. **Cachea** todo lo que puedas 5. **Mide** y ajusta cada semana La IA más cara no es siempre la mejor para tu caso de uso. La IA **más eficiente** es la que resuelve tu problema al menor coste. Para empezar a probar APIs sin gastar nada, revisa las [alternativas gratuitas a ChatGPT](/blog/alternativas-gratis-chatgpt-2026/) y los [mejores modelos de IA para programar](/blog/mejores-modelos-ia-para-programar-2026/).]]> <![CDATA[Prompt Caching en OpenAI y Claude: Ahorra hasta un 90% en Tokens]]> https://francobosg.netlify.app/blog/prompt-caching-openai-claude-ahorrar-tokens-2026/ Fri, 17 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/prompt-caching-openai-claude-ahorrar-tokens-2026/ IA Código Tutorial 1024 tokens para activar caché) const systemPrompt = `Eres un revisor de código experto en TypeScript, Node.js y React. REGLAS: 1. Analiza el código línea por línea 2. Busca: bugs, vulnerabilidades de seguridad, problemas de rendimiento 3. Clasifica cada issue: critico / medio / bajo 4. Da la solución con código corregido 5. Si el código está bien, di "Sin issues" FORMATO DE RESPUESTA: - archivo: nombre del archivo - linea: número de línea - severidad: critico | medio | bajo - descripcion: qué pasa - solucion: código corregido CONTEXTO DEL PROYECTO: Framework: NestJS 11 con TypeScript 5.8 Base de datos: PostgreSQL con Prisma ORM Auth: JWT con refresh tokens Testing: Jest + Supertest Arquitectura: módulos por dominio (users, auth, payments, notifications) Convenciones: camelCase, barrel exports, DTOs con class-validator ...`; // Esto ya pasa de 1024 tokens // Primera llamada — se cachea el system prompt const resp1 = await openai.chat.completions.create({ model: 'gpt-4.1', messages: [ { role: 'system', content: systemPrompt }, { role: 'user', content: 'Revisa este código:\n```ts\n' + codigoArchivo1 + '\n```' }, ], }); console.log(resp1.usage); // { prompt_tokens: 2847, completion_tokens: 340, // prompt_tokens_details: { cached_tokens: 0 } } ← primera vez, no hay caché // Segunda llamada — system prompt viene del caché const resp2 = await openai.chat.completions.create({ model: 'gpt-4.1', messages: [ { role: 'system', content: systemPrompt }, // idéntico → cacheado { role: 'user', content: 'Revisa este código:\n```ts\n' + codigoArchivo2 + '\n```' }, ], }); console.log(resp2.usage); // { prompt_tokens: 2650, completion_tokens: 280, // prompt_tokens_details: { cached_tokens: 2048 } } ← ¡2048 tokens cacheados! ``` **En `resp2`, esos 2048 tokens cacheados te cuestan la mitad**: $1.00/M en vez de $2.00/M con GPT-4.1. ## Prompt Caching en Anthropic (Claude) ### Cómo se activa En Anthropic **necesitas activarlo explícitamente** añadiendo `cache_control` a los bloques de mensaje que quieres cachear. ### Requisitos - Mínimo **1024 tokens** para Claude Sonnet/Opus, **2048** para Haiku - Máximo **4 bloques** con cache_control por request - El caché dura **5 minutos** (se renueva con cada uso) - Modelos soportados: Claude Opus 4, Claude Sonnet 4, Claude Haiku 3.5 ### Descuento - **Escritura al caché**: 25% más caro que el precio normal (solo la primera vez) - **Lectura del caché**: **90% de descuento** (las siguientes veces) El breakeven está en **~3-4 llamadas** con el mismo prefijo. A partir de ahí, todo es ahorro. ### Ejemplo en Node.js ```javascript import Anthropic from '@anthropic-ai/sdk'; const anthropic = new Anthropic(); const systemPrompt = `Eres un revisor de código experto en TypeScript... [mismo prompt largo de antes, >1024 tokens]`; // Llamada con cache_control const response = await anthropic.messages.create({ model: 'claude-sonnet-4-20250514', max_tokens: 1024, system: [ { type: 'text', text: systemPrompt, cache_control: { type: 'ephemeral' }, // ← Esto activa el caching }, ], messages: [ { role: 'user', content: `Revisa:\n${codigoArchivo}` }, ], }); console.log(response.usage); // Primera llamada: // { input_tokens: 2847, output_tokens: 340, // cache_creation_input_tokens: 2048, cache_read_input_tokens: 0 } // Siguientes llamadas: // { input_tokens: 799, output_tokens: 280, // cache_creation_input_tokens: 0, cache_read_input_tokens: 2048 } // ↑ 2048 tokens al 10% del precio ``` ### Cachear también el contexto (documentos, código base) Puedes cachear no solo el system prompt sino también documentos de referencia: ```javascript const response = await anthropic.messages.create({ model: 'claude-sonnet-4-20250514', max_tokens: 2048, system: [ { type: 'text', text: systemPrompt, cache_control: { type: 'ephemeral' }, // Caché bloque 1 }, ], messages: [ { role: 'user', content: [ { type: 'text', text: `Documentación del proyecto:\n${documentacion}`, cache_control: { type: 'ephemeral' }, // Caché bloque 2 }, { type: 'text', text: `Código base:\n${codigoBase}`, cache_control: { type: 'ephemeral' }, // Caché bloque 3 }, { type: 'text', text: 'Añade endpoint POST /api/users con validación', // Solo esto es nuevo }, ], }, ], }); ``` Así solo pagas precio completo por la instrucción final. Todo lo demás viene del caché al **10% del precio**. ## Ejemplo en Python ### OpenAI (automático) ```python from openai import OpenAI client = OpenAI() system_prompt = """...[prompt largo >1024 tokens]...""" # Misma API de siempre — el caché es transparente for archivo in archivos_a_revisar: resp = client.chat.completions.create( model="gpt-4.1", messages=[ {"role": "system", "content": system_prompt}, {"role": "user", "content": f"revisa:\n{archivo.codigo}"}, ], ) # resp.usage.prompt_tokens_details.cached_tokens > 0 a partir de la 2ª llamada print(f"Cacheados: {resp.usage.prompt_tokens_details.cached_tokens}") ``` ### Anthropic (explícito) ```python import anthropic client = anthropic.Anthropic() system_prompt = """...[prompt largo >1024 tokens]...""" for archivo in archivos_a_revisar: resp = client.messages.create( model="claude-sonnet-4-20250514", max_tokens=1024, system=[{ "type": "text", "text": system_prompt, "cache_control": {"type": "ephemeral"}, }], messages=[ {"role": "user", "content": f"revisa:\n{archivo.codigo}"}, ], ) print(f"Cache read: {resp.usage.cache_read_input_tokens}") ``` ## Comparativa de ahorro real ### Escenario: Agente revisor de código - System prompt: 2000 tokens - Código por request: 800 tokens - 100 requests/día | Sin caching | Con caching (OpenAI) | Con caching (Anthropic) | |------------|---------------------|------------------------| | 280K tokens/día (100%) | 80K nuevos + 200K cacheados | 80K nuevos + 200K cacheados | | **GPT-4.1**: $0.56/día | $0.36/día (**-36%**) | — | | **Claude Sonnet 4**: $0.84/día | — | $0.30/día (**-64%**) | | **Mensual GPT-4.1**: $16.80 | **$10.80** | — | | **Mensual Claude Sonnet**: $25.20 | — | **$9.00** | ### Escenario: Chatbot con contexto largo - System prompt + base de conocimiento: 15.000 tokens - Pregunta del usuario: 200 tokens - 500 requests/día | Sin caching | Con caching (OpenAI) | Con caching (Anthropic) | |------------|---------------------|------------------------| | 7.6M tokens/día | 100K nuevos + 7.5M cacheados | 100K nuevos + 7.5M cacheados | | **GPT-4.1**: $15.20/día | $7.70/día (**-49%**) | — | | **Claude Sonnet 4**: $22.80/día | — | $2.55/día (**-89%**) | | **Mensual Claude Sonnet**: $684 | — | **$76.50** | En contextos largos repetitivos, Anthropic con caching es brutalmente más barato. ## Cuándo usar y cuándo NO usar prompt caching ### ✅ Usar cuando: | Caso | Por qué | |------|---------| | System prompts fijos en agentes | Se repiten idénticos miles de veces | | Chatbots con base de conocimiento | El contexto es el mismo para todos los usuarios | | Revisión de código en batch | Mismo prompt para N archivos | | RAG con documentos estables | Los docs no cambian entre queries | | Flujos multi-paso | El contexto del paso 1 se reutiliza en pasos 2-5 | ### ❌ No usar (no tiene efecto) cuando: | Caso | Por qué | |------|---------| | Cada prompt es único | No hay prefijo común que cachear | | System prompt < 1024 tokens | No cumple el mínimo | | Llamadas espaciadas > 10 min | El caché expira | | Prompt dinámico que cambia siempre | Nada que cachear | ## Combinando Prompt Caching con otras técnicas El caching se multiplica con otras optimizaciones: ### Caching + Caveman Prompting Usa [caveman prompting](/blog/caveman-prompting-ahorrar-tokens-ia-2026/) para las instrucciones. El system prompt caveman es más corto, pero **se cachea igual**. Ahorras en ambos frentes: ```javascript // System prompt caveman (más corto) + caching (más barato) const systemPrompt = `revisor código TS/Node/React. reglas: analizar línea a línea. buscar bugs, seguridad, rendimiento. clasificar: critico/medio/bajo. dar solución con código. formato: archivo, linea, severidad, descripcion, solucion. proyecto: NestJS 11, TS 5.8, PostgreSQL, Prisma, JWT, Jest.`; ``` ### Caching + Modelo correcto No uses Claude Opus 4 ($15/M) con caching si Claude Sonnet 4 ($3/M) con caching resuelve la tarea. Primero elige el modelo correcto, luego activa caching. Para una comparativa completa de precios, consulta la [calculadora de precios de IA](/blog/calculadora-precios-ia-2026/). ### Caching + Batching Si haces 10 requests seguidos, el caché se mantiene vivo entre ellos: ```javascript // Procesar 50 archivos seguidos = caché activo todo el rato for (const archivo of archivos) { const resp = await revisar(archivo); // A partir del 2º archivo, el system prompt viene del caché } // ❌ No hagas esto: esperar 15 min entre llamadas mata el caché ``` ## Monitorizar el uso del caché ### OpenAI ```javascript const resp = await openai.chat.completions.create({ ... }); const { prompt_tokens, cached_tokens } = { prompt_tokens: resp.usage.prompt_tokens, cached_tokens: resp.usage.prompt_tokens_details?.cached_tokens || 0, }; const hitRate = cached_tokens / prompt_tokens * 100; console.log(`Cache hit rate: ${hitRate.toFixed(1)}%`); // Objetivo: >70% en flujos repetitivos ``` ### Anthropic ```javascript const resp = await anthropic.messages.create({ ... }); const cacheRead = resp.usage.cache_read_input_tokens || 0; const total = resp.usage.input_tokens + cacheRead; const hitRate = cacheRead / total * 100; console.log(`Cache hit rate: ${hitRate.toFixed(1)}%`); ``` Si tu hit rate es bajo (<50%), revisa que el prefijo sea **idéntico byte a byte** entre llamadas. Una diferencia de un espacio rompe el caché. ## Conclusión Prompt caching es la optimización más infravalorada para reducir costes de API: 1. **En OpenAI es gratis y automático** — solo asegúrate de que tu system prompt > 1024 tokens y las llamadas sean frecuentes 2. **En Anthropic necesitas `cache_control`** pero el descuento del 90% lo compensa con creces 3. **Combínalo con [caveman prompting](/blog/caveman-prompting-ahorrar-tokens-ia-2026/)** y **modelo correcto** para ahorrar un 80-90% total 4. **Monitoriza el hit rate** para verificar que funciona Si estás construyendo agentes o chatbots con contexto repetitivo, prompt caching puede ser la diferencia entre $500/mes y $50/mes. Para la guía completa con las 10 técnicas de ahorro, lee [cómo programar con IA sin arruinarte](/blog/programar-con-ia-sin-arruinarte-guia-2026/). Y para los repos que implementan estas técnicas, revisa los [7 repos de GitHub para devs de IA](/blog/repos-github-desarrolladores-ia-2026/).]]> <![CDATA[7 Repositorios de GitHub que Todo Desarrollador de IA Debería Clonar en 2026]]> https://francobosg.netlify.app/blog/repos-github-desarrolladores-ia-2026/ Fri, 17 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/repos-github-desarrolladores-ia-2026/ IA Herramientas Código str: # Lógica de clasificación con modelo barato return resultado ``` **Ventaja de ahorro**: el planificador automático de Semantic Kernel puede elegir qué modelo usar según la complejidad de la tarea, similar al routing de LiteLLM pero con un framework más completo. --- ## Tabla resumen: ¿cuál clonar primero? | Repo | Para qué | Ahorro potencial | Dificultad | |------|----------|-----------------|------------| | **LiteLLM** | Gateway multi-modelo | 30-50% (routing) | ⭐ Fácil | | **Aider** | Código con IA en terminal | 40-60% vs Cursor | ⭐ Fácil | | **CrewAI** | Agentes coordinados | 60% (modelo por rol) | ⭐⭐ Media | | **Ollama** | IA local gratis | 100% (sin API) | ⭐ Fácil | | **GPTCache** | Caché de respuestas | 80-90% (repetidas) | ⭐⭐ Media | | **Instructor** | Outputs estructurados | 20-30% (sin reintentos) | ⭐ Fácil | | **Semantic Kernel** | Orquestación enterprise | 30-50% (planner) | ⭐⭐⭐ Alta | ## Mi stack recomendado para máximo ahorro ``` LiteLLM (gateway) → routing por coste entre modelos ├── Ollama (modelos locales) → tareas simples, gratis ├── GPT-4.1 nano (API) → clasificación, triage ├── Claude Sonnet 4 (API) → código complejo └── GPTCache → evitar llamadas duplicadas + Instructor → JSON sin fallos + Caveman Prompting → 70% menos tokens en instrucciones ``` Con este stack, un proyecto que antes costaba **$120/mes en APIs** puede bajar a **$15-25/mes**. Para comparar todos los precios actualizados de modelos, usa la [calculadora de precios de IA 2026](/blog/calculadora-precios-ia-2026/). Y si quieres explorar alternativas totalmente gratuitas, revisa las [mejores alternativas gratis a ChatGPT](/blog/alternativas-gratis-chatgpt-2026/).]]> <![CDATA[Cómo Testear Código Generado por IA: Tests Automáticos para Copilot, Cursor y Claude]]> https://francobosg.netlify.app/blog/testear-codigo-generado-ia-copilot-cursor-2026/ Fri, 17 Apr 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/testear-codigo-generado-ia-copilot-cursor-2026/ IA Código Herramientas { // Happy path it('aplica 10% para compras > 100€', () => { expect(calculateDiscount(150)).toBe(135); }); // Edge cases que la IA probablemente ignorará it('no aplica descuento para compras <= 100€', () => { expect(calculateDiscount(100)).toBe(100); expect(calculateDiscount(50)).toBe(50); }); it('maneja 0€ correctamente', () => { expect(calculateDiscount(0)).toBe(0); }); it('rechaza valores negativos', () => { expect(() => calculateDiscount(-10)).toThrow(); }); it('redondea a 2 decimales', () => { expect(calculateDiscount(101)).toBe(90.90); }); it('maneja valores no numéricos', () => { expect(() => calculateDiscount('abc')).toThrow(); expect(() => calculateDiscount(null)).toThrow(); }); }); // 2. Ahora le pides a Copilot/Cursor que implemente calculateDiscount // 3. Corres los tests: vitest run ``` > **Tip**: Puedes pedirle a la IA que genere el esqueleto de tests, pero **siempre** revisa y añade edge cases manualmente. La IA tiende a generar tests que "pasan" su propia implementación — no los que la desafían. ## Estrategia 2: Snapshot Testing para output complejo Cuando la IA genera funciones que producen output complejo (HTML, JSON, configuraciones), usa snapshot testing para detectar regresiones: ```javascript import { describe, it, expect } from 'vitest'; import { generateEmailTemplate } from './email.js'; describe('generateEmailTemplate', () => { it('genera template de bienvenida correctamente', () => { const html = generateEmailTemplate({ type: 'welcome', userName: 'Fran', planName: 'Pro' }); // La primera vez crea el snapshot, las siguientes compara expect(html).toMatchSnapshot(); }); it('escapa caracteres HTML en el nombre de usuario', () => { const html = generateEmailTemplate({ type: 'welcome', userName: '', planName: 'Pro' }); expect(html).not.toContain(' ``` ## Paso 6: Ejecutar ```bash # Terminal 1: ChromaDB docker run -p 8000:8000 chromadb/chroma # Terminal 2: Indexar documentos (solo la primera vez) node src/ingest.js # Terminal 3: Servidor node src/server.js ``` Abre `http://localhost:3000` y pregunta lo que quieras sobre tus documentos. ## Mejoras para producción ### 1. Añadir historial de conversación ```javascript // Mantener contexto entre mensajes const chatHistory = []; app.post('/api/chat', async (req, res) => { const { question } = req.body; chatHistory.push({ role: 'user', content: question }); // Incluir historial en el contexto const historyText = chatHistory.slice(-6) // Últimos 3 pares .map(m => `${m.role}: ${m.content}`) .join('\n'); const answer = await ragChain.invoke({ question: `Historial:\n${historyText}\n\nPregunta actual: ${question}` }); chatHistory.push({ role: 'assistant', content: answer }); res.json({ answer }); }); ``` ### 2. Usar modelos más baratos | Modelo | Coste por consulta (~2K tokens) | Calidad | |--------|-------------------------------|---------| | GPT-4.1 | ~$0.006 | ⭐⭐⭐⭐⭐ | | GPT-4.1 mini | ~$0.001 | ⭐⭐⭐⭐ | | GPT-4.1 nano | ~$0.0003 | ⭐⭐⭐ | Para un chatbot de FAQ, GPT-4.1 nano alcanza perfectamente y cada consulta cuesta **$0.0003** (3000 consultas = $1). ### 3. Alternativas gratuitas Reemplaza OpenAI por Ollama para coste $0: ```javascript import { ChatOllama } from '@langchain/community/chat_models/ollama'; import { OllamaEmbeddings } from '@langchain/community/embeddings/ollama'; const llm = new ChatOllama({ model: 'llama4' }); const embeddings = new OllamaEmbeddings({ model: 'nomic-embed-text' }); ``` ## Estructura final del proyecto ``` mi-chatbot-rag/ ├── docs/ # Tus documentos │ ├── faq.md │ └── politicas.txt ├── public/ │ └── index.html # Frontend ├── src/ │ ├── ingest.js # Indexar documentos │ ├── ragChain.js # Lógica RAG │ └── server.js # API Express ├── .env # API keys └── package.json ``` ## Costes totales | Componente | Coste | |----------|-------| | ChromaDB | $0 (self-hosted) | | Embeddings (indexar 100 docs) | ~$0.01 | | GPT-4.1 nano (1000 consultas) | ~$0.30 | | Hosting (VPS básico) | $5/mes | | **Total** | **~$5/mes** | Con Ollama local: **$0/mes** total. Para más detalle sobre los costes de cada modelo, consulta la [calculadora de precios de IA](/blog/calculadora-precios-ia-2026/). Si quieres convertir este chatbot en un agente completo con herramientas y búsqueda web, sigue mi [tutorial para crear un agente de IA con LangChain](/blog/crear-agente-ia-langchain-nodejs-tutorial/). Y si buscas APIs gratuitas para tu chatbot, mira cómo [usar la API de ChatGPT y Claude gratis](/blog/usar-api-chatgpt-claude-gratis-2026/). --- ¿Quieres ver más proyectos que construí con IA? En [mi portfolio](/) muestro cada proyecto con su stack y proceso de desarrollo.]]> <![CDATA[TanStack Query v5 Tutorial en Español 2026: Data Fetching en React sin Dolor]]> https://francobosg.netlify.app/blog/tanstack-query-v5-tutorial-2026/ Tue, 10 Feb 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/tanstack-query-v5-tutorial-2026/ React TypeScript Herramientas ); } ``` --- ## useQuery: leer datos ### Básico ```tsx import { useQuery } from '@tanstack/react-query'; // Función de fetch (fuera del componente) async function getUsuarios(): Promise { const res = await fetch('/api/usuarios'); if (!res.ok) throw new Error('Error al cargar usuarios'); return res.json(); } function ListaUsuarios() { const { data: usuarios, isLoading, isError, error } = useQuery({ queryKey: ['usuarios'], // clave de caché única queryFn: getUsuarios, }); if (isLoading) return
Cargando...
; if (isError) return
Error: {error.message}
; return (
    {usuarios.map(u => (
  • {u.nombre}
    • ))}
); } ``` ### Con parámetros dinámicos ```tsx async function getUsuario(id: string): Promise { const res = await fetch(`/api/usuarios/${id}`); if (!res.ok) throw new Error('Usuario no encontrado'); return res.json(); } function PerfilUsuario({ userId }: { userId: string }) { const { data: usuario, isLoading } = useQuery({ queryKey: ['usuarios', userId], // ← incluye el parámetro en la key queryFn: () => getUsuario(userId), enabled: !!userId, // no ejecuta si userId es undefined }); if (isLoading) return ; return
{usuario?.nombre}
; } ``` --- ## useMutation: crear, actualizar, borrar ```tsx import { useMutation, useQueryClient } from '@tanstack/react-query'; async function crearPost(datos: { titulo: string; contenido: string }) { const res = await fetch('/api/posts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(datos), }); if (!res.ok) throw new Error('Error al crear post'); return res.json(); } function FormNuevoPost() { const queryClient = useQueryClient(); const [titulo, setTitulo] = useState(''); const mutation = useMutation({ mutationFn: crearPost, onSuccess: (nuevoPost) => { // Invalida la caché para que se recarguen los posts queryClient.invalidateQueries({ queryKey: ['posts'] }); // O añade optimistamente a la caché existente queryClient.setQueryData(['posts'], (old: Post[] = []) => [ ...old, nuevoPost, ]); setTitulo(''); }, onError: (error) => { console.error('Error al crear:', error.message); }, }); return (
{ e.preventDefault(); mutation.mutate({ titulo, contenido: '' }); }}> setTitulo(e.target.value)} placeholder="Título del post" /> {mutation.isError &&

Error: {mutation.error.message}

}
); } ``` --- ## Invalidación de caché ```typescript const queryClient = useQueryClient(); // Invalida todas las queries con esta key queryClient.invalidateQueries({ queryKey: ['posts'] }); // Invalida queries específicas (con parámetros) queryClient.invalidateQueries({ queryKey: ['posts', postId] }); // Invalida todas las queries que empiecen con 'usuario' queryClient.invalidateQueries({ queryKey: ['usuario'] }); // Actualiza la caché directamente sin refetch queryClient.setQueryData(['posts', postId], (old: Post) => ({ ...old, titulo: 'Nuevo título', })); ``` --- ## Paginación ```tsx async function getPosts(page: number) { const res = await fetch(`/api/posts?page=${page}&limit=10`); if (!res.ok) throw new Error('Error al cargar posts'); return res.json() as Promise<{ posts: Post[]; totalPages: number }>; } function ListaPaginada() { const [page, setPage] = useState(1); const { data, isLoading, isPlaceholderData } = useQuery({ queryKey: ['posts', page], queryFn: () => getPosts(page), placeholderData: (prevData) => prevData, // muestra datos anteriores mientras carga }); return (
{isLoading ? ( ) : (
    {data?.posts.map(p =>
  • {p.titulo}
    • )}
)}
Página {page} de {data?.totalPages}
); } ``` --- ## Scroll infinito con useInfiniteQuery ```tsx import { useInfiniteQuery } from '@tanstack/react-query'; import { useIntersectionObserver } from '@uidotdev/usehooks'; async function getPostsInfinite({ pageParam = 1 }) { const res = await fetch(`/api/posts?page=${pageParam}&limit=10`); return res.json() as Promise<{ posts: Post[]; nextPage: number | null; }>; } function FeedInfinito() { const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({ queryKey: ['posts', 'infinite'], queryFn: getPostsInfinite, initialPageParam: 1, getNextPageParam: (lastPage) => lastPage.nextPage, }); const [ref, entry] = useIntersectionObserver({ threshold: 0.1 }); // Auto-cargar al llegar al final useEffect(() => { if (entry?.isIntersecting && hasNextPage) { fetchNextPage(); } }, [entry, hasNextPage, fetchNextPage]); const posts = data?.pages.flatMap(p => p.posts) ?? []; return (
{posts.map(post => )}
{isFetchingNextPage && }
); } ``` --- ## Optimistic Updates Muestra el resultado al usuario antes de que el servidor confirme: ```tsx const mutation = useMutation({ mutationFn: (id: string) => fetch(`/api/posts/${id}`, { method: 'DELETE' }), onMutate: async (postId) => { // Cancela queries en vuelo await queryClient.cancelQueries({ queryKey: ['posts'] }); // Guarda el estado anterior por si hay error const anteriores = queryClient.getQueryData(['posts']); // Actualiza optimistamente queryClient.setQueryData(['posts'], (old: Post[] = []) => old.filter(p => p.id !== postId) ); return { anteriores }; // contexto para el rollback }, onError: (err, postId, context) => { // Rollback en caso de error queryClient.setQueryData(['posts'], context?.anteriores); }, onSettled: () => { // Revalida siempre al terminar queryClient.invalidateQueries({ queryKey: ['posts'] }); }, }); ``` --- ## Diferencias clave v4 → v5 ```typescript // ❌ v4 (ya no funciona) useQuery(['usuarios'], getUsuarios, { onSuccess: (data) => {...} }); useQuery(['usuarios'], getUsuarios); // ✅ v5 (todo en objeto) useQuery({ queryKey: ['usuarios'], queryFn: getUsuarios }); // ❌ v4 const { data } = useQuery(['posts', id], () => getPost(id)); // ✅ v5 const { data } = useQuery({ queryKey: ['posts', id], queryFn: () => getPost(id), }); // ❌ v4: cacheTime // ✅ v5: gcTime ``` Si usas shadcn/ui para la interfaz, TanStack Query es el complemento natural para el fetching de datos. Combínalo con [shadcn/ui](/blog/shadcn-ui-guia-completa-espanol-2026/) para tener una base sólida de UI + data fetching en cualquier proyecto React.]]> <![CDATA[Mejores IAs para Generar Imágenes en 2026 (Comparativa)]]> https://francobosg.netlify.app/blog/mejores-ia-generar-imagenes-2026/ Wed, 04 Feb 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/mejores-ia-generar-imagenes-2026/ IA Herramientas <![CDATA[Mejores Alternativas Gratis a ChatGPT en 2026 (Sin Pagar)]]> https://francobosg.netlify.app/blog/alternativas-gratis-chatgpt-2026/ Wed, 28 Jan 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/alternativas-gratis-chatgpt-2026/ IA Gratis Herramientas <![CDATA[Sobre Mí: Fran Cobos — Desarrollador Full-Stack e IA]]> https://francobosg.netlify.app/blog/sobre-mi-fran-cobos-desarrollador-fullstack-ia/ Thu, 22 Jan 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/sobre-mi-fran-cobos-desarrollador-fullstack-ia/ Sobre Mí Carrera IA Aprendizaje Full-Stack <![CDATA[Cómo Hice mi Portfolio con Vite, Tailwind y Netlify]]> https://francobosg.netlify.app/blog/como-hice-mi-portfolio-vite-tailwind/ Thu, 15 Jan 2026 00:00:00 GMT contacto@francobosg.netlify.app (Fran Cobos) https://francobosg.netlify.app/blog/como-hice-mi-portfolio-vite-tailwind/ Código Tutorial Tu navegador no soporta vídeo HTML5. ## El stack (y por qué lo elegí) | Tecnología | Por qué | |------------|---------| | **Vite** | Build ultrarrápido (< 2s), HMR instantáneo, zero config | | **Tailwind CSS** | Utility-first, dark mode trivial, no escribo CSS custom | | **Flowbite** | Componentes UI accesibles sobre Tailwind | | **Vanilla JS** | Sin framework — un portfolio no necesita React | | **Netlify** | Deploy automático con git push, SSL gratis, CDN global | ### ¿Por qué no React/Next.js? Un portfolio es contenido estático. No necesita estado global, routing SPA, ni hidratación. Con Vanilla JS + Vite tengo: - **Lighthouse Performance 98+** sin esfuerzo - **0 KB de framework** en el bundle - **Build en 1.8 segundos** Si necesitara un blog dinámico, usaría Astro (spoiler: es lo que usa este blog). ## Dark mode con localStorage (sin FOUC) El truco más importante: prevenir el "flash" de tema incorrecto al cargar. ```html ``` Este script es **inline y síncrono** — se ejecuta antes de que el navegador pinte nada. Así el usuario nunca ve un flash blanco si tiene modo oscuro configurado. ## i18n sin librerías (ES/EN) No necesitas `i18next` ni `react-intl` para un sitio bilingüe sencillo. Mi enfoque: 1. El texto en español va directo en el HTML 2. Un atributo `data-i18n` marca los elementos traducibles 3. Un diccionario JS mapea texto español → inglés 4. Una función recorre los elementos y reemplaza el texto ```javascript const en = { 'Sobre mí': 'About me', 'Proyectos': 'Projects', 'Contacto': 'Contact', // ... }; function applyTranslations(lang) { document.querySelectorAll('[data-i18n]').forEach(el => { const key = el.getAttribute('data-i18n'); el.textContent = lang === 'en' ? (en[key] || key) : key; }); } ``` **Ventaja**: Cero dependencias, funciona con cualquier framework (o sin ninguno), el HTML es legible en español. ## Estructura de archivos ``` ├── index.html ← Todo el portfolio en un solo HTML ├── assets/ │ ├── css/style.css ← Tailwind + custom styles │ └── js/ │ ├── main.js ← Entry point (imports) │ ├── i18n.js ← Sistema de traducción │ ├── themeToggle.js │ ├── techSkills.js ← Skills renderizadas dinámicamente │ └── ... ├── public/ │ ├── images/ ← Imágenes estáticas │ ├── robots.txt ← SEO │ └── sw.js ← Service Worker (PWA) └── blog/ ← Astro (este blog) ``` ## Performance: cómo conseguí 98+ en Lighthouse **Las 5 cosas que más impacto tuvieron:** 1. **Lazy loading de imágenes** — `loading="lazy"` en toda imagen below the fold 2. **Font Awesome diferido** — Cargado con `defer` para no bloquear el renderizado 3. **Preconnect** a Google Fonts — `` 4. **Imágenes WebP** — 60-80% menos peso que JPEG/PNG 5. **Service Worker** — Cachea assets estáticos para visitas repetidas ```html ``` ## Cookie consent (RGPD) Si usas Google Analytics o AdSense en España, necesitas consentimiento **previo**. Mi solución: 1. GA4 y AdSense **NO se cargan** por defecto 2. Un banner aparece (sutil, esquina inferior) 3. Si el usuario acepta → `localStorage.setItem('cookie-consent', 'accepted')` → se cargan los scripts 4. Si rechaza → no se carga nada analítico ```javascript function loadAnalytics() { if (localStorage.getItem('cookie-consent') !== 'accepted') return; // Inyectar GA4 dinámicamente const s = document.createElement('script'); s.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXX'; s.async = true; document.head.appendChild(s); } ``` ## Errores Comunes al Crear un Portfolio con Vite (y Soluciones) | Error | Solución | |-------|----------| | Cargar GA4 antes del consentimiento | Bloquear scripts hasta aceptación | | FOUC en dark mode | Script inline síncrono en `` | | i18n keys como `cookie_text` | Usar texto español como key | | Service Worker cacheando todo | Excluir HTML, solo cachear assets | | 404 genérica fea | Página 404 custom con Netlify | ## Deploy en Netlify ```toml # netlify.toml [build] command = "npm run build" publish = "dist" [[headers]] for = "/*.html" [headers.values] Cache-Control = "public, max-age=0, must-revalidate" [[headers]] for = "/assets/*" [headers.values] Cache-Control = "public, max-age=31536000, immutable" ``` **Truco clave**: HTML con `max-age=0` (siempre revalida) y assets con hash en el nombre con `max-age=1 año` (inmutables). Así el usuario siempre ve la última versión. Si estás empezando en el mundo del desarrollo, no te pierdas mi [guía para estudiantes de DAW, DAM, SMR y ASIR](/blog/guia-estudiantes-daw-dam-smr-2026/) donde explico qué aprender y cómo destacar. --- *¿Te ha servido? Puedes ver el resultado final en [mi portfolio](/) y si quieres algo similar para ti, [cuéntame tu proyecto](/blog/servicios/).*]]>