12 HERRAMIENTAS ESENCIALES PARA PROGRAMADORES FRONTEND

12 HERRAMIENTAS ESENCIALES PARA PROGRAMADORES FRONTEND

Reduce tu tiempo de trabajo y aumenta tu productividad

 

Two men working at their computers
Foto por Annie Spratt en Unsplash.

¿Eres desarrollador frontend? Ahora conoce y utiliza varias herramientas de desarrollo, pero gana experiencia y la velocidad a la que evoluciona su industria requiere que sea más eficiente y productivo con cada misión.

Necesitas descubrir nuevas herramientas. Aquí hay 12 herramientas que deberían ayudar a los desarrolladores de frontend a reducir su tiempo de trabajo y aumentar su productividad.

1. Sublime Text: para editar sus textos

Sublime Text es un potente editor de texto basado en una interfaz gráfica multiplataforma. Integra características valiosas para el desarrollo de frontend, realiza tareas redundantes y permite a los desarrolladores que dedican tiempo a codificar aumentar su productividad.

Entre las características que ofrece, distinguimos:

  • El autocompletar
    La funcionalidad de buscar y reemplazar
    La sintaxis que resalta Personalizable o el texto resaltado
    La copia de seguridad automática
    Atajos de teclado personalizados
    Los medios macro
    Etc.

Pero Sublime Text va mucho más allá. Ofrece la posibilidad de importar nuevas funciones, nuevos temas, agregar nuevos lenguajes, etc. Y hablando de lenguajes, el editor puede soportar alrededor de 44 lenguajes de programación y es compatible con Windows, Mac y Linux.

2. Bit (GitHub): para compartir componentes

Bit (GitHub) es una herramienta de desarrollo frontend que ayuda a mejorar la colaboración con su equipo, maximizar la reutilización del código, crear un código más escalable y mantener una interfaz de usuario coherente. Por ejemplo, te permite:

Aísle los componentes de diferentes repositorios para asegurarse de que está compartiendo componentes que sean realmente reutilizables y no estén acoplados a su proyecto.
Comparta dichos componentes con otros miembros de su equipo.
Úselos en cualquier otro proyecto.
Descubra los componentes básicos compartidos por otros miembros de la comunidad.

Entonces, Bit (GitHub) es una gran herramienta para construir gradualmente una biblioteca de componentes modulares. Usted y su equipo pueden navegar por la biblioteca e importar un componente compartido usando el «Instalador NPM», modificar dicho componente en su entorno de desarrollo local usando el «Bit Import» y, si es posible, colocar la versión modificada del componente en la biblioteca.

3. GitHub Desktop: para controlar la versión del código fuente

GitHub Desktop es la herramienta gráfica de escritorio para administrar repositorios de Git. Solo es compatible con los sistemas operativos Windows y Mac. La herramienta le ofrece una alternativa gráfica a las arquitecturas Git de uso común.

GitHub Desktop se integra fácilmente con sus repositorios de GitHub que luego puede administrar sin visitar el sitio web. La herramienta GUI le resultará particularmente útil cuando revise el código y explore el historial de un proyecto. Atom también se integra bastante bien con GitHub Desktop.

4. Chrome DevTools: para depuración en tiempo real

Muy importante al probar su producto final en el navegador, Chrome DevTools es una herramienta incorporada con Google Chrome y otros navegadores basados ​​en Chromium. Ofrece un entorno integrado que le permite:

Realiza la depuración y modifica una página web en tiempo real.
Edite CSS y DOM en vivo.
Ejecute JavaScript personalizado para depurar su código en diferentes niveles.
Analice el tiempo de ejecución de funciones para optimizar la velocidad de ejecución de sus aplicaciones.

Todos los navegadores basados ​​en Chromium vienen con una versión de Chrome DevTools, lo que la convierte en una de las herramientas más disponibles para la depuración en tiempo real.

5. CodePen: para Code Playground

CodePen es una plataforma de desarrollo basada en la nube con la que puede desarrollar y probar código HTML, CSS y JavaScript en vivo. Concretamente, le permite crear y compartir demostraciones de su trabajo o un fragmento de código frontend en múltiples plataformas y / o dispositivos.

Con esta herramienta, puede, por ejemplo, compartir fragmentos o una descripción general completamente interactiva de sus proyectos con sus compañeros para obtener comentarios o integrarlos en tutoriales, guías, etc. También puede utilizar recursos alojados externamente en sus demostraciones y proyectos de CodePen.

6. JAWS: para verificación de accesibilidad

JAWS es un lector de pantalla que verifica la accesibilidad de su contenido web. La herramienta lee su contenido y evalúa las vulnerabilidades que pueden limitar el acceso. La accesibilidad web representa la capacidad de los usuarios de todas las capacidades y discapacidades para acceder correctamente a su contenido web.

Concretamente, JAWS comprobará, por ejemplo, si su contenido es accesible a usuarios con un determinado problema visual o si el contenido cumple con las leyes de accesibilidad de los países en los que pretende promocionarlo. Una herramienta de este tipo le resultará de gran ayuda.

7. PageSpeed ​​Insights: para supervisar la velocidad del sitio

PageSpeed ​​Insights es una herramienta gratuita para monitorear la velocidad de carga de la página de su sitio en Google, lo cual es muy importante para la optimización y retención de SEO. Solo necesita escribir la URL de la página para realizar la prueba.

Puede comprobar el funcionamiento de la prueba en un teléfono móvil o una PC. PageSpeed ​​Insights también le dará sugerencias específicas para mejorar la velocidad de su sitio.

8. BrowserStack: para una prueba de varios navegadores

Popular entre los desarrolladores de frontend, BrowserStack le permite evaluar el funcionamiento de las aplicaciones web desarrolladas en una amplia gama de dispositivos y navegadores. La herramienta ofrece la posibilidad de seleccionar combinaciones «navegador-dispositivo» y probar su uso.

BrowserStack utiliza Selenium Server para automatizar las pruebas en dispositivos reales guardados en ubicaciones remotas. Al implementar la aplicación, puede, por ejemplo, activar una serie de pruebas en una lista predeterminada de dispositivos.

9. Adobe Color: para inspirar al diseñador

Anteriormente conocido como Kuler, Adobe Color es una aplicación que le permite crear, explorar y compartir temas de color que luego puede sincronizar con otras aplicaciones de Adobe.

Dado que el uso del color es un componente crucial del diseño, Adobe Color será una fuente de inspiración muy rica para los desarrolladores de frontend que quieran descubrir colores que funcionen bien juntos en sus proyectos.

10. Minify: para una carga más rápida

Minify es una herramienta en línea que permite al desarrollador reducir el tamaño total del código de su aplicación antes de enviarlo a producción. Con Minify, podrá eliminar espacios en blanco, código muerto, etc.

A medida que se reduce el tamaño del código de la aplicación, puede beneficiarse de tiempos de carga más rápidos en los navegadores.

11. Babel REPL: para «retroconvertir»

Babel es un transcompilador JS de código abierto gratuito que se utiliza para convertir el código ES moderno en JavaScript ES5 heredado para que pueda usarse en dispositivos más antiguos.

Le permitirá probar adiciones recientes a ES o ciertas características que se encuentran en ciertas etapas de adición a ECMA. También puede refinar aún más el código, limitar el tamaño de los archivos, etc.

12. BundlePhobia: para optimizar su almacenamiento

BundlePhobia es un servicio web que le permitirá descargar un archivo package.json y ver su tamaño total, tiempo de descarga y la cantidad de dependencias que se instalarán desde él.

Si alguna vez ha dudado del tamaño de sus carpetas node_modules o alguna vez sintió la necesidad de saber el tamaño de un package.json que se instalará en su dispositivo, esta es la herramienta para usted.

13. Wappalyzer: Ver con qué tecnología está desarrollado un sitio web

Wappalyzer es una extensión de Google Chrome que te permitirá ver la(s) tecnologías en la que está desarrollado un sitio web para que de esta manera puedas tener en cuenta las librerías de desarrollo que se utilizaron en un servicio por internet.

Conclusión

Las diversas herramientas de desarrollo de frontend que se enumeran en este artículo lo ayudarán a reducir su tiempo de trabajo y mejorar su productividad. Satisfacen las principales necesidades de desarrollo de frontend.

Si usa alguna de estas 12 herramientas, comparta sus pensamientos en los comentarios. Si utiliza otros, no dude en compartirlos en los comentarios.

Fuente

Deja un comentario

diez + 6 =