D-MO (Data Micro-Optimizer)

Omar Guerrero — Tue, 18 Aug 2026 21:07:05 +0000

En el día a día del desarrollo de software y el análisis de datos, la preparación y limpieza de archivos financieros suele ser una de las tareas más repetitivas y propensas a errores. Tratar con layouts rígidos, filas desfasadas y nombres de columnas que cambian sin previo aviso genera una fricción operativa constante.

Para resolver este problema de raíz—y manteniendo un enfoque estricto en la seguridad de la información—desarrollé D-MO (Data Micro-Optimizer), una potente herramienta web de procesamiento ETL (Extract, Transform, Load) que corre completamente del lado del cliente.

El Origen: Privacidad por Diseño

Cuando manejamos reportes bancarios o información financiera sensible, subirlos a plataformas externas de conversión representa un riesgo crítico de seguridad. D-MO nació bajo la premisa de la privacidad absoluta: todo el procesamiento ocurre en la memoria local del navegador a través del cliente. Los datos estructurados jamás se envían a un servidor externo, eliminando latencias de red y garantizando un entorno de zero server overhead.

Arquitectura del Pipeline (Flujo de Datos)

El sistema procesa la información de manera secuencial a través de un flujo desacoplado, lo que permite transformar archivos complejos en datasets listos para producción en un solo clic:

   [ Archivo Local ] (.csv / .xlsx / .xlsb)
         │
         ▼
   ┌──────────────┐
   │  DropZone    │ ◄── Validación de Extensión y Tamaño
   └──────┬───────┘
         │ (Buffer / Texto plano)
         ▼
   ┌──────────────┐
   │ File Parser  │ ◄── Detección de delimitadores y headers dinámicos
   └──────┬───────┘
         │ (JSON Normalizado)
         ▼
   ┌──────────────┐
   │  ETL Engine  │ ◄── Reglas de Negocio, Mapeo de Alias y Filtros CUSTOM
   └──────┬───────┘
         │ (Dataset Limpio)
         ▼
   ┌──────────────┐
   │ Export File  │ ◄── Generación de reportes limpios listos
   └──────────────┘

Core Técnico y Capas del Sistema

La aplicación está construida sobre Next.js 14 (App Router) y TypeScript, dividiendo su lógica interna en tres componentes principales:

1. Interfaz y Coordinación (`page.tsx`)

Actúa como el orquestador del ciclo de vida de los datos. Captura los archivos cargados mediante una interfaz arrastrar y soltar (DropZone), invoca las utilidades de parseo, alimenta al motor de transformación con el estado actual y actualiza dinámicamente las métricas de la UI.

2. Capa de Parseo y Serialización (`file-parser.ts`)

Utiliza la librería xlsx (SheetJS) para analizar libros de trabajo, normalizando los datos en bruto y resolviendo dinámicamente la fila correcta de cabeceras en archivos de Excel complejos.
Implementa papaparse para realizar una lectura veloz mediante streaming en memoria y detección automática de delimitadores en archivos CSV.

3. Motor de Reglas Tolerante a Variaciones (`etl-engine.ts`)

Es el cerebro de D-MO. Utiliza un sistema robusto de emparejamiento basado en funciones de normalización de cadenas de texto. Esto permite que el motor identifique cabeceras dinámicas mediante un catálogo flexible de alias, procesando layouts con sutiles diferencias en los nombres de las columnas sin romper el flujo de transformación.

// Enfoque conceptual del mapeo dinámico y tolerante a alias
export function resolveColumnHeader(header: string, aliasMap: Record<string, string[]>): string | null {
    const normalizedTarget = header.toLowerCase().trim().replace(/[\s_-]/g, '');

    for (const [key, aliases] of Object.entries(aliasMap)) {
        if (aliases.some(alias => alias.toLowerCase().trim().replace(/[\s_-]/g, '') === normalizedTarget)) {
            return key;
        }
    }
    return null;
}

Panel de Control e Indicadores en Tiempo Real

Para dar soporte visual y trazabilidad completa al proceso técnico, la UI cuenta con dos secciones clave:

Consola de Logs (LogConsole): Proporciona auditoría visual en tiempo real de cada validación y transformación ejecutada por el motor, categorizada por estados mediante un diseño limpio (info, warn, error, success).
Panel de Métricas (StatsBar): Visualización analítica inmediata que muestra las filas procesadas vs. exportadas, el conteo de columnas resultantes y el tiempo exacto de ejecución del pipeline.

Comparativa de Enfoques

Factor	Procesamiento Tradicional (Servidor)	Enfoque D-MO (Cliente)
Privacidad	Riesgo potencial al transferir datos a terceros	Privacidad absoluta; los datos nunca salen del navegador
Costos de Infraestructura	Requiere servidores dedicados y escalabilidad de cómputo	Consumo de infraestructura cero; utiliza el hardware del cliente
Velocidad	Sujeto a la latencia de subida y bajada de la red	Procesamiento instantáneo directo en memoria

Conclusión

D-MO demuestra que no siempre es necesario delegar flujos de datos operativos pesados a arquitecturas de backend complejas. Trasladar la lógica de un pipeline ETL directo al cliente usando TypeScript no solo abarata costos de infraestructura, sino que resuelve el factor más crítico en entornos financieros corporativos: el cumplimiento normativo y el resguardo de la información.

Tip: Al construir herramientas de datos basadas en el cliente, prioriza librerías que soporten lecturas por bloques o streaming para evitar congelar el hilo principal (Main Thread) de la interfaz de usuario al procesar datasets masivos.

Prueba: dmo

Personalised creator-badge and sound player?

Omar Guerrero — Thu, 10 Apr 2025 22:14:58 +0000

Yep... just that.

A few days ago I was wanting to try something new, and seeing the spotify embedded sound player I wanted to replicate it, but with a custom, creator oriented touch. It took me a few days to customize it and it's finally here (visit: creator-badge).

Now I'm thinking of taking it a step further, how would you like it if I added little things like the number of followers on GitHub? Or maybe the number of fans on your main social network, whichever one you like to show the most on your card! I think that will be the mission of some early mornings well accompanied by coffee. ☕

What do you think of this first version, would you embed it on your website? I'd love to hear your feedback - what do you think I could improve or change to make it even cooler?

PS: In fact, I'm already working on a version that will return an SVG (without sound), similar to the cool github-readme-stats, but with its own features.

DEV Community: Omar Guerrero