Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Joshua Terrones convirtió un portafolio con contenido de muestra en una aplicación conectada a datos e integraciones reales: GitHub para mostrar proyectos, Hackatime para reflejar actividad de programación, Sanity para publicar contenido y Resend para recibir mensajes. Su relato muestra tanto el valor de esas conexiones como el trabajo que requieren: elegir qué datos mostrar, evitar consultas innecesarias y resolver problemas de configuración.
Qué cambió en el portafolio
En su artículo, Joshua Terrones cuenta cómo reemplazó datos de prueba por información conectada a servicios reales. Las cuatro integraciones tienen cometidos distintos; no son alternativas entre sí. En conjunto, hacen que el sitio muestre trabajo, actividad, publicaciones y una vía de contacto funcional.
- GitHub: repositorios seleccionados en la página de inicio y un listado más amplio en la sección de proyectos.
- Hackatime: horas de programación, lenguajes usados y racha de actividad.
- Sanity: contenido administrado desde un CMS headless, en lugar de una lista fija de publicaciones de prueba.
- Resend: entrega de los mensajes enviados mediante el formulario de contacto.
El beneficio para un portafolio no es simplemente tener más datos: es mostrar señales concretas del trabajo y mantener ciertas partes del sitio actualizadas sin editar manualmente cada elemento.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →GitHub: consultas distintas para inicio y proyectos
Terrones relata que usó GraphQL para obtener los repositorios fijados que aparecen en la página de inicio y REST para el listado completo de la ruta /proyectos. Según su artículo, ambas consultas tenían una caché de 24 horas. Esa organización separa una selección breve y destacada de un catálogo más extenso.
#1 Best Overall
El autor estima que, en su arquitectura, la revalidación a las 24 horas redujo las llamadas de miles a unas tres al día. Es una cifra reportada por él para su implementación, no una garantía ni una medición independiente: el tráfico, los despliegues, las revalidaciones y el número de páginas pueden cambiar el total. En Next.js, la revalidación temporal y la invalidación bajo demanda son estrategias disponibles, pero el método y las APIs concretas dependen de la versión y del modelo de caché del proyecto. La documentación de Next.js sobre revalidación describe esos enfoques.
Hackatime: actividad de programación visible
La integración de Hackatime expone tres tipos de información: tiempo de programación, lenguajes y racha de actividad. Terrones describe el proceso como el uso de una clave API y un endpoint. Ese detalle corresponde a su propio relato; no se dispone aquí de documentación oficial del servicio que permita verificar el endpoint o recomendar una configuración concreta.
Rank #2
- Used Book in Good Condition
Mostrar métricas de actividad puede dar contexto al trabajo, pero conviene entender qué representan los datos antes de presentarlos como una medida de productividad o calidad. En este caso, el relato identifica las métricas que el autor eligió mostrar, no establece que sean comparables entre desarrolladores ni que evalúen por sí solas la calidad del código.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteSanity: cambiar publicaciones de muestra por un CMS
Terrones reemplazó un array de publicaciones de prueba con Sanity, un CMS headless cuyo contenido consultaba mediante GROQ. También configuró Sanity Studio para administrar las publicaciones. La ventaja práctica es que el contenido deja de depender de una lista codificada en la aplicación; el relato no especifica todos los detalles de su esquema ni de sus consultas.
Resolver el problema de CORS
Al insertar Studio, el autor se encontró con un problema de origen CORS y relata que agregó el origen de la aplicación con credenciales. CORS controla qué orígenes pueden acceder a una API desde el navegador; no es una solución para habilitar acceso indiscriminado. Sanity indica que la configuración predeterminada permite localhost:3333, y que otros orígenes —por ejemplo, una aplicación servida desde otro puerto— pueden requerir autorización explícita. Su guía de CORS advierte también que los orígenes permitidos deben configurarse con cuidado cuando se usan credenciales, y que no se deben autorizar comodines amplios de plataformas compartidas con credenciales.
Actualizar contenido sin consultar en cada visita
El relato describe consultas GROQ, pero no afirma que Terrones hubiera implementado revalidación bajo demanda; la presenta como trabajo futuro. En general, una caché temporal puede ser suficiente cuando unos minutos u horas de retraso son aceptables. Si las publicaciones deben reflejarse inmediatamente, un webhook puede activar la invalidación de una ruta o etiqueta al cambiar el contenido. Sanity documenta este patrón para Next.js y recomienda validar la firma del webhook, de modo que un endpoint público no procese eventos falsos: validación de webhooks de Sanity en Next.js.
Resend: hacer que el formulario entregue mensajes
Terrones conectó el formulario de contacto a Resend para que los mensajes llegaran por correo y relata que verificó un dominio mediante registros DNS. El artículo no ofrece una guía completa de DNS, ni permite afirmar cuáles son los límites o los pasos actuales del servicio. La conclusión útil para quien replique la idea es que un formulario visible no basta: debe conectarse a un sistema de entrega y el dominio utilizado requiere configuración.
Publicación automatizada y un error de canonical URL
El autor también relata una automatización para sincronizar Sanity con Dev.to mediante un webhook. Durante ese proceso encontró un error 422 relacionado con la canonical URL. Es un problema reportado en su implementación, no un fallo universal de esas plataformas; la causa y la solución pueden depender de la configuración y del formato enviado. El episodio ilustra que automatizar publicaciones implica validar los datos que se transfieren, no solo conectar dos servicios.
Best Value
Qué decidir antes de integrar servicios
- Define qué aporta cada fuente: repositorios, actividad, publicaciones y contacto responden a necesidades distintas. Evita integrar una API solo para añadir una cifra o un logotipo.
- Elige la frescura necesaria: si los datos pueden tardar en actualizarse, la revalidación temporal reduce la dependencia de consultas en cada visita. Si un cambio debe aparecer de inmediato, considera invalidación bajo demanda y el trabajo adicional de proteger webhooks.
- Limita los orígenes autorizados: en configuraciones CORS, añade los orígenes específicos que realmente uses y trata las credenciales con especial cuidado.
- Trata los errores como parte de la integración: el CORS de Studio y el 422 de canonical URL en el relato de Terrones son ejemplos ligados a su configuración, no instrucciones que deban reproducirse a ciegas.
- Presenta las métricas con contexto: las horas o rachas pueden describir actividad, pero no deben confundirse con una evaluación completa del trabajo.
La frase de Terrones, “La caché no es opcional”, expresa la lección que obtuvo de su caso. Para otros proyectos, la decisión concreta depende del coste de las consultas, la frecuencia de cambios y cuán actualizados deban estar los datos.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
