Herramientas gratis para desarrollo web

Como desarrollador/a web es importante mantener familiaridad con herramientas que apoyen a la simplificación y optimización en el trabajo diario. Conocerlas no sólo agiliza el proceso de desarrollo, sino que también garantiza calidad y fiabilidad del producto final, sin olvidar que, al estar al tanto de las herramientas actualizadas disponibles en el mercado, brinda una ventaja competitiva.

En este artículo menciono cuatro herramientas que serán de gran utilidad. Tengo la seguridad que son de mucha ayuda, ya que en algún momento las he usado y sigo usándolas en mis tareas como desarrolladora.

📌 Mermaid

Logo de mermaid.js.

Mermaid es una herramienta de documentación muy fácil de usar que permite crear diagramas de una manera rápida. Funciona creando incluso gráficos tediosos o complejos con mucha precisión, todo según las necesidades de cada proyecto. Su versatilidad la hace adecuada para contextos profesionales donde es requerido o necesaria una visualización de información con base en diagramas. Aunque esté basada en JavaScript, su sintaxis está inspirada en Markdown.

Entre los diagramas que puedes crear, están:

1. Diagrama de estados o State Diagram: Es usado para describir el comportamiento de un sistema, de los cambios que resultan por la ejecución de un evento.

Por ejemplo: Un pequeño diagrama de estado, simulando ir a la tienda donde podemos encontrar o no un producto.

💡 En este ejemplo veremos que la sintaxis es similar a plantUml, ya que intenta ser lo más compatible posible para facilitar la comprensión a los usuarios y así se pueda compartir los trabajos realizados.

💡Para seguir el ejemplo, Mermaid tiene a la disposición una página donde puedes crear y visualizar los diagramas en vivo, accediendo a este link.

---

title: Ejemplo Diagrama de Estado

---

stateDiagram-v2

[*] --> Ir_a_la_tienda

Salir --> [*]

Ir_a_la_tienda --> Buscar_producto

Buscar_producto --> Producto_encontrado

Buscar_producto --> Producto_no_encontrado

Producto_encontrado --> Pasar_a_caja

Producto_no_encontrado --> Salir

Pasar_a_caja --> Salir

Se puede observar que, con unas pocas líneas de código, tenemos un diagrama listo y muy estético. Además, podemos agregar detalles al diagrama, tales como:

Comentarios: Estos se hacen agregando el signo de porcentaje dos veces, seguido de lo que quieras escribir, así:

%% este es un comentario

Textos en los estados: Si se quiere agregar texto en las transiciones de los estados, se puede hacer agregando dos puntos seguido de la palabra, de esta manera:

Ir_a_la_tienda --> Buscar_producto : para

Si quieres mostrar elecciones representadas de una mejor manera, considera realizarlo de esta manera:

state comprar <<choice>>

[*] --> Ir_al_mercado

Ir_al_mercado --> comprar

comprar --> Comida: if dinero > 0

comprar --> Nada : if dinero <= 0

Comida --> Buscar_producto

Nada --> Salir

El cual, añadiéndolo al código anterior, se representa de la siguiente manera, donde depende si hay dinero o no, es donde se busca el producto.

Opcionalmente, si deseas agregar unas pequeñas notas, también se pueden incluir añadiendo al código:

note right of comprar

la nota que se

desee escribir

end note

Si te gustaría usar esta opción en tus proyectos, integrarla es muy fácil. Acá te muestro un ejemplo de cómo hacerlo con un proyecto en JavaScript vanilla.

👉 Estaré usando VSC como editor de código.

Paso 1: Crea un archivo .html, en este caso se llama index.html.

Paso 2: Escribe la sintaxis básica de un archivo HTML.

Paso 3: Agrega el CDN de Mermaid.js en tu archivo, el cual es:

<script src="https://cdn.jsdelivr.net/npm/mermaid@10.8.0/dist/mermaid.min.js">

</script>

Paso 4: Se debe agregar el script de inicialización de Mermaid.js, el cual además de inicializar, configura Mermaid para que se renderice el diagrama tan pronto la página finalice en cargar.

<script>mermaid.initialize({startOnLoad:true});</script>

Paso 5: Crea un contenedor donde tendrás todo el código Mermaid que usarás. Siempre tiene que estar dentro de un componente padre que tenga una clase llamada mermaid, esto para que la biblioteca sepa dónde renderizar y encontrar el contenido. Copiando el ejemplo anterior, queda de la siguiente manera:

<div class="mermaid">

---

title: Ejemplo Diagrama de Estado

---

stateDiagram-v2

[*] --> Ir_a_la_tienda

Salir --> [*]

Ir_a_la_tienda --> Buscar_producto

Buscar_producto --> Producto_encontrado

Buscar_producto --> Producto_no_encontrado

Producto_encontrado --> Pasar_a_caja

Producto_no_encontrado --> Salir

Pasar_a_caja --> Salir

[*] --> Ir_al_mercado

Ir_al_mercado --> comprar

comprar --> Comida: if dinero > 0

comprar --> Nada : if dinero <= 0

Comida --> Buscar_producto

Nada --> Salir

</div>

Paso 6: ¡Listo! Ahora visualiza tu archivo HTML en un navegador y podrás observar el diagrama ya incorporado.

👉 Si deseas visualizar el código completo, te comparto el link del código acá.

2. Diagramas Mentales: Estos diagramas representan conceptos que se relacionan entre sí a partir de una palabra clave, expandiéndose para organizar la información.

Aplicándolo en Mermaid, quedaría de la siguiente manera:

En código, el diagrama queda así:

mindmap

root((Desarrollo Web))

FrontEnd

))Angular((

))Vue((

))React((

BackEnd

)Nest(

)NodeJS(

iCloud

{{AWS}}

{{Azure}}

💡Importante dejar los espaciados de cada línea de código.

Si en este momento consideras usar esta biblioteca, te recomiendo que leas toda su documentación. El repositorio está libre en GitHub y su página oficial, donde tendrás a tu disposición muchos ejemplos y maneras para integrar todos los diagramas que requieras en la documentación de los proyectos.

📌JSON Crack

Logo de JSON Crack.

Herramienta excelente para desarrolladores porque muestra de manera gráfica, detalladamente, la manera en que está estructurado cualquier elemento JSON. También soporta YAML, XML, TOML, y CVS.

Este editor muestra sincronizadamente los cambios en tiempo real que hagamos en el archivo, además de que se puede descargar como archivo SVG, PNG o JEPG, esto último siendo un gran añadido para poder compartir la imagen sin perder calidad en el proceso.

Te invito a que visites el sitio oficial de la plataforma y verás que observar la información de esta manera aporta a una comprensión más rápida de dicha información.

El ejemplo que use para realizar la imagen anterior, es el siguiente:

{

"empresa": "Empresa Ejemplo",

"empleados": [

{

"nombre": "Juan",

"cargo": "Gerente",

"departamento": "Redes",

"colaboradores": [

{

"nombre": "María",

"cargo": "Soporte",

"departamento": "Redes"

},

{

"nombre": "Carlos",

"cargo": "Asistente",

"departamento": "Redes"

}

]

},

{

"nombre": "Laura",

"cargo": "Jefe de Desarrolladores",

"departamento": "Desarrollo",

"colaboradores": [

{

"nombre": "Pedro",

"cargo": "Programador",

"departamento": "Desarrollo"

},

{

"nombre": "Ana",

"cargo": "Analista de sistema",

"departamento": "Desarrollo"

}

]

},

{

"nombre": "Karla",

"cargo": "Encargada Devops",

"departamento": "Infraestructura"

}

]

}

📌 JSON data AI

Es un generador de API que funciona con inteligencia artificial y muy fácil de usar, ideal para pequeños proyectos donde necesitas consumir pequeñas API, o bien cuando se experimenta con nuevos conocimientos y necesitas información que no necesariamente sea real.

Ejemplo práctico
Esta es la interfaz donde puedes generar tu API. Como se aprecia, es muy intuitivo ya que necesita un tema, en este caso: Top de series animadas para adultos en 2022, agregando propiedades de:

• name: Nombre de la serie.
• author: Creador o creadores de la serie.
• year: Año de publicación.
  

Puedes elegir el tipo de dato que sea, escribir una breve descripción de la propiedad, además de agregar o borrar a voluntad las propiedades. También se puede observar en la parte superior el límite de elementos que tendrá la API. Cuando esté listo, se hace clic en el botón blanco que dice Get JSON Data. En mi caso, se generó lo siguiente:

[

{

"name": "Rick and Morty",

"author": "Justin Roiland, Dan Harmon",

"year": "2013"

},

{

"name": "BoJack Horseman",

"author": "Raphael Bob-Waksberg",

"year": "2014"

},

{

"name": "Archer",

"author": "Adam Reed",

"year": "2009"

},

{

"name": "Big Mouth",

"author": "Nick Kroll, Andrew Goldberg, Mark Levin, Jennifer Flackett",

"year": "2017"

},

{

"name": "The Simpsons",

"author": "Matt Groening",

"year": "1989"

},

{

"name": "South Park",

"author": "Trey Parker, Matt Stone",

"year": "1997"

},

{

"name": "Family Guy",

"author": "Seth MacFarlane",

"year": "1999"

},

{

"name": "F is for Family",

"author": "Bill Burr, Michael Price",

"year": "2015"

},

{

"name": "BoJack Horseman",

"author": "Raphael Bob-Waksberg",

"year": "2014"

}

]

👉 Si no tienes una idea clara de la información a generarse, en la parte baja puedes encontrar muchos ejemplos variados para usarse inmediatamente.

💡Sin inicio de sesión solo tendrás dos oportunidades para crear una API. Se puede iniciar con GitHub, cuenta Google o una que puedes crear en el momento. En la nueva interfaz nos invita a poder crear un endpoint completo, pero ya es una versión de paga.

📌Hoppscoth

Logo de Hoppscoth.

Una herramienta conocida por los desarrolladores es Postman. En esta ocasión no la mencionaré, ya que la considero muy conocida. Por otra parte, Hoppscoth es un software para probar API que cuenta con una interfaz minimalista y con funcionalidades útiles para el uso diario. Es accesible a través de la web, con opción de descarga como extensión en Chrome o Firefox. La puedes encontrar en su página oficial, también en versión de escritorio, soporta Windows, Linux y Mac, además de contar con su CLI si lo prefieres así.

En Hoppscoth, puedes trabajar con API Rest, GraphQL, WebSockets, Enchufe.IO, protocolo MQTT y ESS. También puedes crear ambientes de trabajo. Tiene la opción de inicio de sesión y así guardar las peticiones realizadas, colecciones creadas, etc. Si quieres ser parte de la comunidad, tiene Discord, GitHub y X activos. O bien, si te interesa aportar con alguna nueva característica o editando algo, en la documentación oficial se encuentra una guía completa de cómo realizar dichos aportes.

Conclusión

La familiaridad con estas herramientas es esencial para mantenernos actualizados y cumplir con los estándares de la industria, al tiempo que se mejora la experiencia tanto para el desarrollador como para el usuario final.

En pocas palabras, podría decir que:

• Mermaid.js es una librería de JavaScript que ayuda a crear fácilmente diagramas y gráficos a partir de texto simple, lo que hace que sea más sencillo visualizar datos complicados.
  
• JSON Crack es una herramienta que detecta y soluciona problemas en archivos JSON dañados, haciendo que sea más fácil trabajar con datos estructurados.
  
• JSON Data AI es una herramienta que usa inteligencia artificial para entender y procesar datos en formato JSON, ofreciendo consejos útiles para optimizarlos.
  
• Hoppscotch es una plataforma para probar y documentar servicios web de forma colaborativa, lo que agiliza el desarrollo de aplicaciones que los utilizan.
  

Espero que te animes a usar estas herramientas en tus siguientes proyectos. Nunca dejes de practicar todos los conocimientos para ser cada vez mejor 💻.

¡Hasta la próxima! 🚀