Build log
Notas técnicas.
Bitácora honesta sobre desarrollo web, IA aplicada, producto y construcción real. Pensado para leer en una taza de café.
- Tutorial8 min
Guía de migración definitiva a Tailwind CSS v4
Cómo actualizar tu proyecto de la versión 3 a la versión 4, limpiando clases obsoletas y depurando directivas heredadas.
- #tailwind-css
- #css
- #next.js
- #migración
- Performance8 min
Monitoreo real de Core Web Vitals en producción
Estrategias prácticas para capturar, analizar y reportar métricas de Web Vitals de usuarios reales (CrUX) y asegurar el SEO técnico de tu sitio.
- #performance
- #seo-tecnico
- #web-vitals
- #next.js
- Tutorial7 min
Cómo configurar Tailwind CSS v4 en Next.js desde cero
Guía paso a paso para integrar Tailwind CSS v4 en un proyecto Next.js con App Router: instalación, @theme, @layer y las diferencias clave con v3.
- #tailwind-css
- #next.js
- #css
- #configuracion
- SEO6 min
Schema JSON-LD avanzado para marcas personales y negocios locales
Aprende a estructurar metadatos semánticos en JSON-LD para que los motores de búsqueda entiendan quién eres, qué ofreces y tus redes oficiales.
- #seo
- #json-ld
- #metadata
- #marcas
- Tutorial7 min
Diseño Mobile-First extremo con Tailwind CSS v4
Cómo diseñar interfaces fluidas sin desbordamientos de pantalla en móvil utilizando flexbox, CSS Grid y los nuevos contenedores dinámicos.
- #tailwind-css
- #responsive
- #design
- #css-grid
- Stack7 min
Por qué uso Supabase en lugar de una BD tradicional para freelance
Supabase como backend para proyectos freelance: auth, base de datos, storage y API en un solo servicio. Cuándo tiene sentido y cuándo no.
- #supabase
- #backend
- #freelance
- #base-de-datos
- Stack6 min
Manejo seguro de variables de entorno en Next.js y Supabase
Buenas prácticas para estructurar tus secretos en entornos local, staging y producción en Vercel sin exponer credenciales críticas en tu repositorio.
- #supabase
- #security
- #next.js
- #env-variables
- DevOps7 min
Implementación de Content Security Policy (CSP) en Next.js
Protege tu portfolio o las webs de tus clientes configurando cabeceras de seguridad estrictas y nonces para bloquear ataques XSS.
- #seguridad
- #next.js
- #csp
- #devops
- AI workflow9 min
Control de tokens y manejo de errores con la API de Claude
Guía técnica sobre cómo estructurar llamadas robustas a Claude API en scripts en segundo plano, controlando los límites de tokens y reintentos automáticos.
- #claude-api
- #ia
- #error-handling
- #tokens
- SEO9 min
SEO técnico en Next.js App Router: metadata, sitemap y JSON-LD
Guía completa de SEO técnico en Next.js App Router: generateMetadata, sitemap.ts, robots.ts, JSON-LD estructurado y las trampas más comunes.
- #seo
- #next.js
- #json-ld
- #metadata
- #sitemap
- Tutorial8 min
Estrategias de Caché en Next.js: revalidatePath y revalidateTag
Un repaso práctico de cómo funciona el modelo de caché en Next.js App Router y cómo invalidar datos en tiempo real de forma selectiva.
- #next.js
- #cache
- #performance
- #app-router
- Tutorial7 min
Server Actions en React 19: Lógica de negocio segura y limpia
Descubre cómo utilizar Server Actions de forma nativa para gestionar mutaciones de base de datos sin crear endpoints de API redundantes.
- #react-19
- #next.js
- #server-actions
- #backend
- Performance6 min
Optimización de bundle en Next.js: recortando Javascript en el cliente
Cómo analizar, depurar y reducir el tamaño del bundle de JavaScript de tus aplicaciones Next.js utilizando importaciones dinámicas y eliminando dependencias infladas.
- #next.js
- #performance
- #javascript
- #optimization
- AI workflow8 min
Claude Code como multiplicador técnico: flujo de trabajo real
Cómo uso Claude Code a diario para leer repos, generar andamiajes, debugging y revisión de código. Ejemplos concretos y reglas para no perder criterio.
- #claude-code
- #ia
- #workflow
- #productividad
- Caso de estudio7 min
Cómo construí una web real para un negocio familiar con Next.js
Caso real: del problema de un negocio tradicional sin presencia digital a una web rápida, clara y profesional entregada en producción con Next.js, Tailwind y Vercel.
- #caso-real
- #next.js
- #negocio-local
- #mobile-first
- AI workflow9 min
Cómo uso Claude Code, Cursor y Antigravity para programar más rápido sin perder criterio
Mi flujo real con herramientas IA para programar: para qué uso cada una, dónde no delego y por qué la velocidad sin criterio es deuda técnica disfrazada.
- #ia
- #claude-code
- #cursor
- #antigravity
- #workflow
- Arquitectura8 min
Cómo estructuro un proyecto Next.js para que escale
La estructura de carpetas, convenciones de naming y patrones que uso en proyectos Next.js para que el código sea mantenible a medida que crece.
- #next.js
- #arquitectura
- #estructura
- #escalabilidad
- Marca personal8 min
Cómo crear un portfolio de desarrollador junior que destaque
Los portfolios junior suelen fallar porque imitan plantillas. La diferencia la marca tratar tu propia presencia como un proyecto serio. Guía práctica.
- #marca-personal
- #portfolio
- #junior
- #seo
- Workflow8 min
IA aplicada al desarrollo web: mi flujo real como estudiante de Ingeniería Informática
Cómo combino estudios, IA aplicada y proyectos reales para acelerar aprendizaje y construir software útil sin perder criterio técnico.
- #ia
- #estudiante
- #ingenieria-informatica
- #ai-assisted-development
- Tutorial7 min
Dark mode con next-themes y Tailwind CSS v4: la solución definitiva
Cómo implementar dark/light mode en Next.js con next-themes y Tailwind CSS v4 sin flash, sin hydration mismatch y con transiciones suaves.
- #dark-mode
- #next-themes
- #tailwind-css
- #next.js
- DevOps6 min
Desplegando en Vercel con dominio en Cloudflare: paso a paso
Cómo configurar un proyecto Next.js en Vercel con un dominio gestionado en Cloudflare: DNS, SSL, cache y los errores que nadie te cuenta.
- #vercel
- #cloudflare
- #deploy
- #dominio
- #dns
- Performance8 min
Core Web Vitals: cómo conseguir Lighthouse 100 en Next.js
Las optimizaciones concretas que aplico en cada proyecto Next.js para conseguir Lighthouse 100: fonts, images, layout shifts y rendering.
- #performance
- #lighthouse
- #core-web-vitals
- #next.js
- Producto7 min
Por qué el copy importa tanto como el código en una web de negocio
Una web puede estar perfecta técnicamente y no convertir. El copy es lo que convierte visitantes en clientes. Cómo lo trabajo en mis proyectos.
- #copy
- #negocio
- #web
- #conversión
- #freelance
- AI workflow8 min
Automatización con Claude API: mi primer agente útil
Cómo construí mi primer agente funcional con Claude API: el problema que resuelve, la arquitectura simple y las lecciones de usar IA en producción.
- #claude-api
- #agentes
- #automatizacion
- #ia
- #produccion