Comma Separator Tool

Contexto general

La idea de realizar este proyecto fue que muy constantemente estoy haciendo uso de la página (delim.co)[delim.co] por algunas consultas que algunos compañeros de trabajo suelen realizarme constantemente.

Las consultas suelen venir sobre solicitando información de base de datos basado en ciertos reportes que vienen en formato de Excel, y la información que utilizo como clave para consultar es de algunas columnas que justamente tengo que separar por comas en un solo registro y en algunos casos añadir comillas al inicio y final de cada valor. Este es el funcionamiento base del sitio mencionado anteriormente.

Pero mi objetivo de realizarlo es que en algunas ocasiones necesito que se remuevan ciertos valores al inicio o al final de cada valor y eso es algo que no realiza el sitio, además siempre consideré que esto era un proyecto demasiado sencillo de realizar y no me equivoqué mucho, pero llegado a cierto punto si me bloqueo.

Funcionamiento General:

El valor que se ponga en el cuado de texto del lado izquierdo es el que será separado por el delimitador (por defecto es una coma, pero se puede cambiar por uno de los seleccionados por el menú desplegable o en las configuraciones), por cada salto de línea.

Para aplicar dicho cambio se tiene que dar clic en el botón de la flecha hacia la derecha y el resultado será visible en el cuadro de texto de lado derecho.

Si lo que necesitas es lo opuesto, separar valores a partir de un delimitador en saltos de línea, lo que tendrías que hacer sería colocar tus valores de lado derecho y hacer clic en el botón de la flecha hacia la izquierda.

Configuraciones que se pueden realizar:

Los valores por defecto se encuentran entre paréntesis

Eliminar saltos de línea (Sí): Indica si quieres eliminar los saltos de línea en el resultado final.
Delimitador (,): Es el valor que se utilizará como delimitador/separador de los valores.
Remover duplicados (No): Remueve valores duplicados entre todos los valores existentes.
Etiquetas: Puedes añadir valores personalizados al inicio y/o al final de cada valor, muy útil para añadir etiquetas de HTML.
Detonador (Salto de línea): Indica que los valores son a partir de un salto de línea, espacio, coma o punto y coma;
Añadir comillas: Permite añadir comillas simples (') o comillas dobles (") al inicio y final de cada valor.
Intervalos: Añade una nueva línea cada X valores, siendo X el valor que se indique como intervalo.
Etiquetas de intervalos: Permite añadir valores al inicio y/o al final de cada intervalo.
Recortar al inicio: Remueve X caracteres al inicio de cada valor, siendo X el valor que se indique como intervalo.
Recortar al final: Remueve X caracteres al final de cada valor, siendo X el valor que se indique como intervalo.

Tecnologías utilizadas

Para este proyecto decidí utilizar:

Astro
React
Tailwind CSS

Resultados y Logros

Este proyecto fue algo rápido de realizar, lo más complicado fue trabajar con astro y no precisamente porque fuese difícil sino porque al ser la primera vez que lo utilizaba había cosas que desconocía (como el poder aplicar la funcionalidad en las islas dinámicas) fue algo que tuve que investigar y aprender.

Desafíos

El mayor desafío que considero haber tenido fue el hacer que cada una de las funciones/configuraciones que tiene el proyecto original funcionen en conjunto, debido a que hacer cada una de forma individual no es complicado, pero el hacerlas en conjunto si te hace pensar en que orden se debe ejecutar cada configuración, cuál es la mejor forma de trabajar.

Aprendizaje

De principal aprendizaje me llevo el poder trabajar con Astro, que a pesar de que se pueden realizar cualquier tipo de proyectos considero que lo utilizaría más para realizar sitios estáticos debido a que sentí algo de complejidad al trabajar con las funcionalidades y para hacer una aplicación dinámica sería un dolor de cabeza.
Se debe prestar atención a los pequeños detalles, yo creía que este proyecto me tomaría menos de un día en realizar y no, si fue un desafío interesante de realizar.

Contexto general

Funcionamiento General:

Para aplicar dicho cambio se tiene que dar clic en el botón de la flecha hacia la derecha y el resultado será visible en el cuadro de texto de lado derecho.

Configuraciones que se pueden realizar:

Los valores por defecto se encuentran entre paréntesis

Eliminar saltos de línea (Sí): Indica si quieres eliminar los saltos de línea en el resultado final.

Delimitador (,): Es el valor que se utilizará como delimitador/separador de los valores.

Remover duplicados (No): Remueve valores duplicados entre todos los valores existentes.

Etiquetas: Puedes añadir valores personalizados al inicio y/o al final de cada valor, muy útil para añadir etiquetas de HTML.

Detonador (Salto de línea): Indica que los valores son a partir de un salto de línea, espacio, coma o punto y coma;

Añadir comillas: Permite añadir comillas simples (') o comillas dobles (") al inicio y final de cada valor.

Intervalos: Añade una nueva línea cada X valores, siendo X el valor que se indique como intervalo.

Etiquetas de intervalos: Permite añadir valores al inicio y/o al final de cada intervalo.

Recortar al inicio: Remueve X caracteres al inicio de cada valor, siendo X el valor que se indique como intervalo.

Recortar al final: Remueve X caracteres al final de cada valor, siendo X el valor que se indique como intervalo.

Resultados y Logros

Desafíos

Aprendizaje

De principal aprendizaje me llevo el poder trabajar con Astro, que a pesar de que se pueden realizar cualquier tipo de proyectos considero que lo utilizaría más para realizar sitios estáticos debido a que sentí algo de complejidad al trabajar con las funcionalidades y para hacer una aplicación dinámica sería un dolor de cabeza.

Se debe prestar atención a los pequeños detalles, yo creía que este proyecto me tomaría menos de un día en realizar y no, si fue un desafío interesante de realizar.