JavaScript

EcoTaskApp: Aplicación Web de Gestión de Tareas Ecológicas con Angular

Introducción La concienciación medioambiental se ha convertido en uno de los principales retos de la sociedad actual. Cada vez más personas desean adoptar hábitos sostenibles, pero en muchas ocasiones carecen de herramientas que les permitan organizar, controlar y realizar un seguimiento de sus acciones ecológicas. Ante esta necesidad surge EcoTaskApp, una aplicación web desarrollada con Angular cuyo objetivo es facilitar la gestión de tareas relacionadas con el cuidado del medioambiente y promover hábitos sostenibles mediante un sistema de seguimiento y recompensas. EcoTaskApp permite a los usuarios registrarse, iniciar sesión, crear tareas ecológicas, clasificarlas…continue reading →

Paradigmas de la Observabilidad en Aplicaciones Modernas: Un Análisis Riguroso de Logs, Métricas y Trazas Distribuidas

Paradigmas de la Observabilidad en Aplicaciones Modernas: Un Análisis Riguroso de Logs, Métricas y Trazas Distribuidas La transición hacia arquitecturas descentralizadas en la nube ha transformado la infraestructura de software en un ecosistema dinámico y, a menudo, opaco. Esta guía técnica analiza la Observabilidad no como un conjunto de herramientas de monitoreo reactivo, sino como un imperativo arquitectónico. A través del estudio de los tres vectores de telemetría esenciales —logs estructurados, métricas de series temporales y trazas distribuidas—, examinaremos cómo diagnosticar fallos imprevistos, mitigar la latencia en cascada y optimizar el tiempo medio…continue reading →

Sincronización de LocalStorage con React en Next.js

Objetivo del sistemaEl objetivo principal era evitar que los datos de los héroes desaparecieran cada vez que el usuario recargaba la página.Sin un sistema de persistencia, la aplicación siempre empezaría desde cero, perdiendo cualquier modificación realizada.Por eso implementamos un flujo donde:La primera vez se cargan los datos iniciales.Se guardan en el navegador.En futuras visitas, se recuperan automáticamente.Arquitectura de la soluciónPara conseguir una solución limpia y escalable, se separó la lógica en dos partes:1. Hook personalizado (useHeroes)Se encarga de:Gestionar el estado de la aplicación.Decidir de dónde vienen los datos.Conectar React con la lógica de…continue reading →

Dashboard visual para microservicios con .NET 8, API

En este artículo presento un dashboard microservicios API Gateway desarrollado con .NET 8, ASP.NET Core y JavaScript. El proyecto tiene un objetivo claro: crear una aplicación visual para consultar varios microservicios desde una sola pantalla. Para conseguirlo, he utilizado un API Gateway como punto de entrada principal. Gracias a este enfoque, el frontend no necesita llamar directamente a cada servicio. En su lugar, todas las peticiones pasan primero por el Gateway. Después, el Gateway decide qué microservicio debe responder. Esta solución ayuda a organizar mejor la arquitectura. Además, permite explicar el funcionamiento de…continue reading →

Arquitectura SPA desacoplada: Angular + API REST con JWT paso a paso

🚨 El problema: cuando el frontend y el backend viven pegados Si llevas un tiempo desarrollando aplicaciones web, es probable que hayas empezado con proyectos donde el servidor genera el HTML directamente y lo manda al navegador. Funciona, pero escala mal. ¿Qué pasa cuando el equipo de front y el de back quieren trabajar por separado? ¿O cuando la misma API necesita servir a una app móvil además de a la web? Aquí es donde aparece la arquitectura SPA desacoplada: el frontend es una aplicación completamente independiente que vive en el navegador, y…continue reading →

Auditoría Automática de Aplicaciones Web con Playwright e IA

Introducción En el desarrollo web moderno, la calidad del software es clave para ofrecer una buena experiencia a los usuarios. Evaluar el rendimiento, accesibilidad, errores y seguridad de una aplicación web es una tarea fundamental que puede ser tediosa si se hace manualmente. En este blog, exploraremos cómo automatizar una auditoría web utilizando Playwright, IA (axe-core) y PDFKit, generando informes detallados con gráficos para una representación visual clara de los resultados. El objetivo es la automatización de auditorías web con Playwright e IA para mejorar el rendimiento y la accesibilidad de aplicaciones. Planteamiento…continue reading →