Antecedentes: Un susto a altas horas de la noche
Como ingeniero, verificar cambios sutiles en el código o comprobar las diferencias en los archivos de configuración es algo cotidiano.
Una noche tarde, mientras estaba absorto en la depuración, intentaba comparar dos archivos de registro (logs) grandes. Como de costumbre, busqué “herramienta Diff online” en mi navegador, abrí el primer sitio que apareció y estaba a punto de pegar el texto.
En ese momento, me quedé helado y un sudor frío recorrió mi espalda.
“Espera un minuto: ¿este registro que voy a pegar contiene direcciones de correo electrónico de clientes o tokens de autenticación?”.
Muchas herramientas en línea envían los datos introducidos a un proceso del lado del servidor, ejecutan el algoritmo de diferencias allí y luego devuelven el resultado. Incluso sin malicia, la posibilidad de que esos datos permanezcan en los registros del servidor o se guarden en caché no es cero.
“Es conveniente, pero da miedo”. Quería utilizar el poder de la tecnología para eliminar esta barrera psicológica exclusiva de los ingenieros.
Esa fue la mayor motivación detrás del desarrollo de la Herramienta de diferencias para DevToolKits.
Ingenio técnico: meter “inteligencia” en el navegador
Para lograr que “los datos nunca salgan”, todos los cálculos de diferencias que normalmente se realizan en un servidor deben completarse dentro del navegador del usuario.
1. Equilibrar la estabilidad con el “ojo del ingeniero”
Los algoritmos de diferencias son sorprendentemente profundos e, incluso con una implementación propia, los errores (bugs) tienden a aparecer en los casos límite (edge cases). Por lo tanto, adoptamos la probada librería jsdiff.
Sin embargo, el simple hecho de utilizar la librería tal cual no era suficiente. Para crear una diferencia que un ingeniero considere “fácil de leer”, necesitábamos controlar con precisión el manejo de los saltos de línea y el significado de los espacios en blanco.
import { diffLines } from 'diff';
// Procesar los saltos de línea claramente como separadores de línea, no solo como caracteres
// Configuración para lograr una comparación intuitiva "basada en líneas"
const changes = diffLines(oldText, newText, { newlineIsToken: false });Al repetir estos ajustes finos, pudimos reproducir la experiencia de comparación en la que más confiamos, como una solicitud de extracción (Pull Request) de GitHub, íntegramente dentro del navegador.
2. Diseño por sustracción
Durante el desarrollo, inicialmente intenté incluir muchas funciones decorativas. Sin embargo, al final, volví a una sencillez que no obstaculiza el pensamiento: “solo introducir y comparar”.
Incluso con la elección de los colores, utilicé esmeralda (adición) y rosa (eliminación) con una saturación ligeramente reducida para que los ojos no se cansen durante las largas sesiones de depuración. Valoré la textura como una “herramienta” que no resulta dolorosa de usar durante horas, en lugar de la vistosidad.
Una obsesión con la “desconfianza del servidor”
En lo que más me obsesioné al desarrollar esta herramienta fue en “no dejar que se filtrara ni un solo byte”.
Una sensación de seguridad que se completa solo en la memoria, sin pasar por una red.
“Los datos están siempre en mis propias manos”. Debido a esta certeza, los desarrolladores profesionales pueden concentrarse en su trabajo con tranquilidad. Creo que esa es la mejor UX que puede ofrecer una herramienta.
Conclusión
La herramienta Diff es muy sencilla, pero detrás de ella se esconde mi propio deseo firme de “resolver las ansiedades de los ingenieros”.
Comparar archivos altamente confidenciales o realizar comprobaciones finales justo antes de desplegar en un entorno de producción.
No podría estar más feliz si esta herramienta sirve como una de tus “cajas de herramientas seguras”.