Skip links

Más de 15 herramientas útiles de desarrollo web que quizás no conozca

Las herramientas de desarrollo web ayudan a los desarrolladores a crear un sitio web o una aplicación de forma más fácil y rápida. Simplifica el proceso de desarrollo desde el diseño hasta la codificación y todo lo demás.

Como habrá notado, las tecnologías web están cambiando rápidamente, especialmente en el front-end. Cada año, siempre habrá una nueva tecnología web lanzada. Este también es el caso de las herramientas de desarrollo web.

Con tantas herramientas nuevas, el flujo de trabajo de desarrollo web también está cambiando. Es cada vez más fácil y rápido. Nosotros, los desarrolladores, debemos aprovechar estas herramientas para trabajar de manera más eficiente.

TL;DR;

  1. Quarkly (design tool)
  2. Budibase (low code platform)
  3. Undesign (design tools & resources)
  4. Chrome Dev Tool (debugging tool)
  5. Codekit (compiler configuration)
  6. Zeplin (collaboration tool)
  7. Lighthouse (testing tool)
  8. Selenium (testing tool)
  9. Docker (deployment tool)
  10. GitLab CI/CD (deployment tool)
  11. Devdocs (documentation)
  12. Can I use (documentation)
  13. Sourcetree (Git client)
  14. Postman (API client)
  15. Webcode.tools (code generator)

Herramientas de desarrollo web útiles que debe probar

En esta publicación, no voy a mostrarte las herramientas de desarrollo web esenciales que ya conoces, como el editor de código, git y frameworks populares. En su lugar, enumeraré algunas herramientas útiles y únicas que quizás aún no conozca.

La mayoría de estas herramientas (si no todas) son de uso gratuito. Puedes probarlos todos y decidir si se ajustan a tus proyectos o no. Entonces, ¡echémosle un vistazo!

1. Quarkly (design tool)

Quarkly - design tool for creating websites and web apps

De un vistazo, Quarkly es como otro creador de sitios web sin código que ayuda a los diseñadores a crear un sitio web. Bueno, de hecho, es más que eso.

Quarkly es una herramienta gratuita creada tanto para desarrolladores web como para diseñadores web. Ayuda no solo a los diseñadores sino también a los desarrolladores a crear sitios web y aplicaciones web. La velocidad del flujo de trabajo es más rápida en eso, desde el diseño hasta la implementación.

No solo puede diseñar elementos de arrastrar y soltar, sino también editar, personalizar y administrar los códigos generados con el editor de código integrado.

Puede agregar lógica, conectar API externas y agregar cualquier código que el constructor visual no pueda generar. No solo eso, sino que incluso puede agregar paquetes npm a su proyecto.

De esta manera, tiene control total sobre el código generado y puede mantener la calidad del código. No es algo que pueda hacer en los creadores de sitios web habituales.

El código generado por Quarkly se basa en React, una popular biblioteca de JavaScript. Entonces, si ya conoce React, se sentirá como en casa en Quarkly.

2. Budibase (low code platform)

Budibase

Budibase es una plataforma de código bajo de código abierto que le ayuda a crear aplicaciones internas en su propia infraestructura. Afirma poder crear herramientas internas 50 veces más rápido que crear aplicaciones internas desde cero.

Budibase Builder viene en una plataforma de escritorio que le permite crear su aplicación web y obtener una vista previa.

Con Budibase, puede crear una aplicación web utilizando la tecnología de arrastrar y soltar, integrarla con su propia base de datos, crear tareas de automatización y más.

Aquí está el resumen de las características de Budibase:

  • Cree y envíe software real. A diferencia de otras plataformas, Budibase le permite crear y enviar aplicaciones de una sola página.
  • Código abierto y extensible. Budibase es de código abierto. El constructor tiene licencia AGPL v3, el servidor es GPL v3 y el cliente es MPL.
  • Cargue datos o comience desde cero. Budibase importa datos de múltiples fuentes como MongoDB, CouchDB, PostgreSQL, mySQL, Airtable, Google Sheets, S3, DyanmoDB o REST API.
  • Diseñe y cree aplicaciones con potentes componentes prefabricados.
  • Automatice procesos, integre con otras herramientas y conéctese a webhooks. Ahorre tiempo automatizando procesos y flujos de trabajo manuales.
  • Alojamiento en la nube y autohospedaje. Los usuarios pueden autohospedar o alojar sus aplicaciones con Budibase Cloud.

3. Undesign (design tools & resources)

Undesign

Como desarrolladores web, siempre necesitaremos recursos de diseño como fotos de archivo, ilustraciones, iconos, animaciones, fuentes, etc., que a veces son bastante difíciles de encontrar.

Ahora, gracias a Undesign, no necesitamos buscar en la red manualmente para encontrar los recursos de diseño. Undesign recopila recursos y herramientas de diseño gratuitos y los clasifica por categorías.

¿Necesita ilustraciones para su sitio web? Seleccione la categoría de ilustración y encontrará la lista de los mejores sitios web de ilustraciones gratuitas.

¿Busca animaciones para su sitio? Vaya a la categoría de animaciones y encontrará los sitios web de animación gratuitos allí.

Otras categorías de recursos de diseño de Undesign son inspiraciones de diseño, plantillas, paletas de colores, generadores de CSS, íconos, herramientas de utilidad de diseño, fotos de archivo, videos, audios, etc.

Échale un vistazo para ver más.

4. Chrome Dev Tool (debugging tool)

Chrome dev tool

Puede que conozcas esta herramienta, pero ¿la aprovechas al máximo?

La herramienta de desarrollo de Chrome no solo registra errores en la pestaña de la consola o inspecciona elementos, sino que también le permite verificar el rendimiento del sitio web, su capacidad de respuesta, seguridad, uso de memoria, almacenamiento local, etc.

Alternativas

Otras herramientas de depuración que vale la pena mencionar y que puede usar como alternativas o junto con la herramienta de desarrollo de Chrome son:

  • Edición para desarrolladores de Firefox. Un navegador creado específicamente para desarrolladores con muchas funciones útiles y avanzadas.
  • Escaneo CSS. Una extensión de navegador para inspeccionar y editar estilos CSS (no es gratis)
  • Responsivamente. Una herramienta de código abierto para probar la capacidad de respuesta web de forma más fácil y rápida. Responsively puede probar diferentes dispositivos a la vez.

5. Codekit (compiler configuration)

Codekit

Si eres un desarrollador front-end, puedes usar (o al menos haber oído hablar de) preprocesadores CSS como LESS y SASS, o corredores de tareas como Gulp y Grunt.

Todas son excelentes herramientas para hacer que el estilo sea más rápido y automatizar algunas tareas de front-end. Pero debes escribir el código de configuración para ellos. A veces, se complica cuando se desarrolla un proyecto bastante grande.

Codekit puede resolver este problema. Su lema es «Construir sitios web, no archivos de configuración», por lo que Codekit automatiza la configuración para preprocesadores CSS, ejecutores de tareas y otros lenguajes de scripting. También se puede utilizar para optimizar imágenes y CSS.

Codekit está disponible solo para usuarios de Mac por $ 38 / licencia para uso de por vida. Si es un usuario de Windows o simplemente no quiere pagar por él, siempre puede elegir las alternativas.

Alternativas

6. Zeplin (collaboration tool)

Zeplin

En aquel entonces, cuando desarrollamos un sitio web basado en un diseño, deberíamos haber cortado o extraído manualmente los activos del archivo de diseño. También deberíamos haber elegido los colores manualmente utilizando la herramienta de selección de color. Y si queríamos crear un sitio web con píxeles perfectos, teníamos que medir manualmente el ancho, los rellenos y los márgenes del elemento.

Con Zeplin, esas cosas manuales se pueden automatizar ahora. Los diseñadores solo necesitan cargar el archivo de diseño (de Figma, Photoshop, Adobe XD, Sketch), seleccionar los activos exportables y publicarlo.

Solo los desarrolladores invitados pueden acceder al proyecto Zeplin. Pueden exportar los activos e inspeccionar elementos del proyecto que proporcionan código de color, estilo de fuente, rellenos, márgenes, ancho, alto e incluso estilos CSS generados.

Zeplin los genera todos para que los desarrolladores puedan centrarse más en la codificación.

Para usar Zeplin, cree una cuenta y descargue la versión de la aplicación de escritorio si desea crear un proyecto (cargar diseño).

Una cuenta gratuita es limitada: solo puede crear 1 proyecto. Pero como desarrollador, puede acceder a todos los proyectos en los que está invitado a colaborar.

Alternativa

7. Lighthouse (testing tool)

Lighthouse

Lighthouse es una herramienta automatizada de código abierto para probar y mejorar la calidad de una página web. Audita al menos 4 aspectos de la web: rendimiento, accesibilidad, SEO y aplicación web progresiva.

Comprueba la velocidad de la página, la capacidad de respuesta, la optimización de la caché del navegador, la optimización de los activos, etc. si hablamos de rendimiento. En cuanto al SEO, verifica los parámetros generales de SEO en la página.

Lighthouse es desarrollado por Google y se utiliza en algunos productos de Google, Google Pagespeed insight y https://web.dev/measure/.

También está disponible en las herramientas de desarrollo de Chrome y en la extensión de Chrome, por lo que puede usarlo para escanear sitios web abiertos directamente, tanto localmente como en línea.

Alternativa

8. Selenium (testing tool)

Selenium

Para aplicaciones web de mediana escala, es necesaria una prueba organizada y automatizada para asegurarse de que sus aplicaciones estén libres de errores. No puede confiar en el trabajo manual para probar todas las funciones de su aplicación web, por lo que necesitará una herramienta para reemplazar la prueba manual.

Selenium es un marco de código abierto para probar aplicaciones web. Es una herramienta para automatizar las pruebas de aplicaciones web en navegadores web. Actúa como un humano que usa su aplicación y prueba sus funciones.

Con Selenium, puede crear pruebas funcionales sin tener que aprender un idioma de prueba (Selenium IDE). Puede escribir sus pruebas en Ruby, Java, C #, Python y Javascript.

9. Docker (deployment tool)

Docker

Docker es una plataforma para desarrollar, enviar y ejecutar aplicaciones. Le permite separar sus aplicaciones de su infraestructura para entregar software rápidamente. Con Docker, puede administrar su infraestructura de la misma manera que administra sus aplicaciones.

Docker ayuda a empaquetar y ejecutar una aplicación en un entorno poco aislado llamado contenedor. El aislamiento y la seguridad le permiten ejecutar muchos contenedores simultáneamente en un host determinado.

Docker puede empaquetar una aplicación y sus dependencias en un contenedor virtual que se puede ejecutar en cualquier computadora con Linux, Windows o macOS. Esto permite que la aplicación se ejecute en una variedad de ubicaciones, como en las instalaciones, en una nube pública y / o en una nube privada.

 

10. GitLab CI/CD (deployment tool)

Gitlab CD/CI

GitLab CI / CD es una herramienta integrada en GitLab para el desarrollo de software mediante integración continua, entrega continua e implementación continua.

La integración continua funciona insertando pequeños fragmentos de código en la base de código de su aplicación alojada en un repositorio de Git y, para cada inserción, ejecute una canalización de scripts para compilar, probar y validar los cambios de código antes de fusionarlos en la rama principal.

La entrega e implementación continuas consisten en un paso más allá de la IC, implementando su aplicación en producción en cada impulso a la rama predeterminada del repositorio.

Estas metodologías le permiten detectar errores y errores al principio del ciclo de desarrollo, asegurando que todo el código implementado en producción cumpla con los estándares de código que estableció para su aplicación.

GitLab también puede detectar, compilar, probar, implementar y monitorear automáticamente sus aplicaciones usando Auto DevOps.

11. Devdocs (documentation)

Devdocs

Devdocs.io es una colección de documentación de API de varias tecnologías web. Combina cerca de 500 documentaciones de API en una interfaz rápida, organizada y con capacidad de búsqueda, desde el marco Angular hasta Yii.

Devdocs se puede utilizar como su manual de desarrollo web. También puede funcionar sin conexión, en dispositivos móviles y como una extensión de Chrome.

Alternativas

12. Can I use (documentation)

Caniuse

«Puedo usar» es una herramienta de código abierto que proporciona tablas de compatibilidad y soporte de navegador actualizadas de tecnologías web front-end en navegadores web de escritorio y móviles.

Comprueba la compatibilidad del navegador con las propiedades CSS, las API DOM y las etiquetas HTML para 17 navegadores diferentes en diferentes versiones.

13. Sourcetree (Git client)

Source tree

Como sabes, Git es una herramienta esencial para el desarrollo web. Ayuda a los desarrolladores a colaborar entre sí y a gestionar los cambios y las versiones del proyecto.

Sin embargo, Git es originalmente una herramienta de línea de comandos ya que no tiene GUI. Por lo tanto, los principiantes deben aprender un conjunto de comandos de git antes de poder usarlo. Gracias a Sourcetree, no necesitan aprender todos estos comandos.

Sourcetree es una aplicación de escritorio gratuita que simplifica su interacción con sus repositorios de Git para que pueda concentrarse en la codificación. Está disponible tanto para Windows como para macOS.

Sourcetree visualiza y administra sus repositorios a través de una simple GUI de Git. Puede ejecutar comandos de git con solo unos pocos clics.

Alternativas

14. Postman (API client)

Postman

Postman es una herramienta de cliente API que se utiliza para probar y documentar las API creadas por desarrolladores de backend. Está repleto de características que la convierten en una herramienta poderosa para la exploración y el desarrollo de API. También se utiliza como herramienta de colaboración entre desarrolladores frontend y backend.

Si es un desarrollador de backend, puede publicar la documentación de la API de forma rápida y sencilla. Postman puede extraer automáticamente sus solicitudes de muestra, encabezados, fragmentos de código, etc. para completar su página de documentación con ejemplos dinámicos e instrucciones legibles por máquina.

Si eres un desarrollador de frontend, puedes probar las muestras de API proporcionadas por un desarrollador de backend antes de usarlas en tu aplicación web.

  • Insomnia (Más simple, más liviano que Postman, pero con menos funciones).

15. Webcode.tools (code generator)

Webcode tools

Web Code Tools es un generador de código web que le permite generar HTML5, CSS3, JSON-LD, tarjetas de Twitter, gráficos abiertos y otros fragmentos de código.

Es una gran aplicación para desarrolladores principiantes y, sin embargo, los expertos también pueden encontrar algo para usar en ella.

Herramientas de código web disponibles en línea como sitio web y como extensión de Chrome.

Conclusión

Estas 15 herramientas de desarrollo web son excelentes para ayudarlo con el flujo de trabajo de desarrollo web. Personalmente, utilizo algunos de ellos y los encuentro realmente útiles.

Por supuesto, todavía hay muchas herramientas de desarrollo web que son tan buenas como ellas. Si conoce otras herramientas que vale la pena mencionar aquí, no dude en agregarlas en los comentarios a continuación.

¡Que tenga un lindo día!

 

Originalmente publicado en devaradise.com