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é.
- Performance9 min
Motion en scroll sin romper el SSR ni la accesibilidad
Cómo montar animaciones con scrub y pin usando GSAP y ScrollTrigger en Next.js App Router, dejando el contenido legible sin JavaScript y con prefers-reduced-motion.
- #gsap
- #scrolltrigger
- #next.js
- #accesibilidad
- #performance
- #motion
- Producto6 min
Poner los precios en la web: qué gano y qué pierdo
Por qué publiqué el precio de entrada de mis tres servicios en vez de esconderlo tras un formulario, y qué cambia realmente en los mensajes que llegan.
- #producto
- #freelance
- #conversion
- #posicionamiento
- SEO7 min
SEO de entidad con sameAs y banners de consentimiento sin Layout Shift (CLS: 0)
Cómo consolidar la autoridad de marca en el Knowledge Graph de Google y diseñar banners de consentimiento que no penalicen el SEO móvil ni las Core Web Vitals.
- #seo
- #json-ld
- #sameas
- #cls
- #core-web-vitals
- #marcas
- Performance6 min
Pipeline de optimización de assets e imágenes sin servidor dedicado
Estrategias para convertir, comprimir y servir catálogos pesados de marcas y fotografías en WebP/AVIF con entrega ultra-rápida en CDN.
- #imagenes
- #performance
- #webp
- #avif
- #wadibrico
- #cdn
- AI workflow6 min
Detección de directos de YouTube en tiempo real con Edge Cache en Cloudflare Workers
Cómo consultar el estado de streaming de un canal con la YouTube Data API v3 sin agotar la cuota diaria de 10.000 unidades ni exponer API keys en el cliente.
- #cloudflare-workers
- #edge-cache
- #youtube-api
- #streaming
- #itsjaruba
- Performance7 min
Motion avanzado con GSAP y ScrollTrigger en Next.js sin destrozar el INP
Cómo implementar parallax multicapa y scroll pineado de alto impacto visual manteniendo 60 FPS estables y cero penalización en Core Web Vitals.
- #gsap
- #scrolltrigger
- #motion
- #performance
- #next.js
- #itsjaruba
- DevOps6 min
Migración de dominios entre registrars (Strato → Cloudflare) sin caída de servicio
El proceso técnico real paso a paso para transferir la gestión de dominios y zonas DNS entre proveedores sin interrumpir correo corporativo ni tráfico web.
- #cloudflare
- #dominios
- #dns
- #migracion
- #devops
- #wadibrico
- Producto6 min
Llevar cinco proyectos freelance a la vez sin bajar la calidad
Cómo organizo el trabajo cuando tengo varios proyectos de cliente activos al mismo tiempo, sin que ninguno reciba una versión de mí con menos criterio.
- #freelance
- #productividad
- #gestion-proyectos
- Performance7 min
Auditoría Lighthouse 100: el checklist real que uso antes de dar un proyecto por cerrado
La lista de comprobación técnica que reviso en cada proyecto de cliente antes de entregarlo, para acercarme al máximo real de Lighthouse en las cuatro categorías.
- #lighthouse
- #performance
- #checklist
- #seo
- SEO8 min
SEO de marca personal: qué hacer cuando Google corrige tu nombre por otra palabra
Google autocorrige 'vruz' a 'cruz' en algunas búsquedas. Esto es lo que la evidencia técnica dice sobre por qué pasa y qué medidas reales existen para reforzar la marca.
- #seo
- #marca-personal
- #entidades
- DevOps6 min
Vercel o Cloudflare Workers: cómo decido dónde desplegar un proyecto Next.js
Después de desplegar el mismo stack en ambos proveedores en distintos proyectos, esta es la checklist real que uso para decidir dónde vive cada uno.
- #vercel
- #cloudflare-workers
- #deploy
- #decision
- Performance5 min
next/font con tipografías editoriales sin penalizar el rendimiento
Cómo uso fuentes como Cormorant Garamond o Playfair Display en proyectos de cliente con carácter editorial, manteniendo el mismo estándar de performance que en cualquier otro proyecto.
- #next-font
- #tipografia
- #performance
- #next.js
- DevOps5 min
Cloudflare Workers Builds: CI/CD sin GitHub Actions
Cómo configuro despliegue automático a Cloudflare Workers conectando el repo directamente, sin escribir un pipeline de GitHub Actions a mano.
- #cloudflare
- #ci-cd
- #deploy
- #workers-builds
- Producto5 min
WhatsApp como CTA de contacto vs formulario: qué convierte más
Por qué en varios proyectos de negocio local he sustituido el formulario de contacto por un botón directo a WhatsApp, y cuándo sigue teniendo sentido el formulario.
- #conversion
- #producto
- #negocio-local
- DevOps5 min
El ChunkLoadError de Turbopack + Cloudflare y cómo evitarlo
Un bug real de producción: combinar Turbopack con el adaptador de Cloudflare Workers rompe el build. Esto es lo que pasa y la solución que aplico.
- #turbopack
- #cloudflare
- #next.js
- #debugging
- Arquitectura5 min
Feature flags simples en Next.js sin librerías externas
Cómo implemento feature flags con una constante booleana y un comentario claro, sin añadir un servicio de terceros para decisiones que cambian una vez cada varias semanas.
- #next.js
- #feature-flags
- #arquitectura
- SEO6 min
JSON-LD Restaurant y LocalBusiness: SEO local para negocios físicos
Cómo estructuro datos JSON-LD de tipo Restaurant y LocalBusiness para negocios físicos, y qué diferencia hace frente a un schema genérico.
- #seo
- #json-ld
- #local-business
- #restaurant
- Performance6 min
Framer Motion en Next.js App Router sin penalizar el rendimiento
Cómo uso Framer Motion en proyectos de cliente para animaciones cuidadas sin arrastrar JavaScript innecesario al bundle inicial.
- #framer-motion
- #next.js
- #animaciones
- #performance
- Performance6 min
Cloudflare Image Resizing vs next/image: optimización de imágenes en el edge
Qué cambia al optimizar imágenes con Cloudflare en vez del optimizador nativo de Next.js, y cómo lo configuro en proyectos desplegados en Workers.
- #cloudflare
- #next-image
- #performance
- #imagenes
- Producto6 min
Panel de administración a medida vs SaaS genérico: cuándo construir el tuyo
Después de construir varios paneles a medida para clientes freelance, esta es la regla que uso para decidir entre un SaaS de terceros y un panel propio.
- #producto
- #paneles
- #saas
- #decision
- Tutorial6 min
Generar PDFs desde Next.js con pdf-lib: propuestas y acuerdos automáticos
Cómo construí un generador de propuestas y acuerdos en PDF dentro de una Server Action de Next.js, sin servicios externos ni HTML-a-PDF pesado.
- #pdf-lib
- #next.js
- #server-actions
- #automatizacion
- DevOps8 min
Desplegar Next.js en Cloudflare Workers sin Vercel: @opennextjs/cloudflare
Por qué he movido varios proyectos de Vercel a Cloudflare Workers con el adaptador OpenNext, y qué se gana y se pierde en el cambio.
- #cloudflare-workers
- #opennext
- #next.js
- #deploy
- Tutorial7 min
i18n real en Next.js App Router con next-intl
Cómo implementé un sitio en tres idiomas (ES/EN/IT) con next-intl y middleware de Edge, sin duplicar rutas a mano ni romper el App Router.
- #next-intl
- #i18n
- #next.js
- #app-router
- Stack7 min
Cloudflare D1 + Drizzle ORM en Next.js: guía práctica
Cómo monté una base de datos SQLite en el edge con Cloudflare D1 y Drizzle ORM para un panel de gestión en Next.js, con migraciones y binding tipado incluidos.
- #cloudflare
- #d1
- #drizzle
- #next.js
- #base-de-datos
- 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