Herramientas web para Frontends

Hay muchas herramientas gratuitas y geniales disponibles en la web que nos pueden ayudar para diferentes tareas en el día a día como Frontends.

En este artículo te compartiré un listado de 11 herramientas web que me hacen la vida más fácil como Frontend Developer.

ChatGPT

ChatGPT es una herramienta muy útil para agilizar la revisión de bloques de código, logs de errores, documentación, etc.

Ahora siempre tengo a la mano esta herramienta en mi segunda pantalla y me parece genial tener un asistente como ChatGPT.

Wappalyzer

Wappalyzer es una herramienta que nos permite conocer el stack de tecnologías que utiliza una web.

Muy útil para analizar técnicamente a la competencia o referencias que tengamos en cuenta para mejorar nuestra web.

PageSpeed Insights

PageSpeed Insights es una herramienta que nos permite analizar el rendimiento de nuestra web y acciones que podemos corregir o mejorar para optimizar nuestro sistema.

Tener conocimientos sobre Core web vitals, web performance, SEO y accesibilidad web ayuda a entender y aprovechar mejor el reporte generado por esta herramienta.

Bundlephobia

Bundlephobia es una herramienta que nos permite analizar el coste de agregar una dependencia a nuestro proyecto.

Poder identificar el coste de una dependencia permite elegir aquella que es más adecuada para un proyecto. Comparamos en base al peso, dependencias, características como side-effect free u otros.

NPM Trends

NPM Trends es una herramienta que nos ayuda a comparar el uso de dependencias en base a sus descargas.

Puedes ver claramente si una dependencia es un estándar de la industria, si está generando un impacto positivo o si está siendo reemplazada por otras alternativas.

Photopea

Photopea es un editor de fotos online muy fácil.

Esta herramienta se parece a Adobe Photoshop y me ha ayudado a aplicar ediciones con filtros y recortes sencillos.

Caninclude

Caninclude es una herramienta para poder responder a la pregunta ¿Puedo incluir esta etiqueta de HTML en esta otra etiqueta?

Para tener una buena estructura de HTML tener claro que etiqueta puede contener a otra es un aspecto importante que muchas veces se pasa por alto.

Can I use

Can I use nos ayuda a comprobar el soporte de una propiedad de HTML , CSS o JS en los diferentes navegadores web y sus versiones.

Antes de utilizar una nueva propiedad es conveniente revisar previamente el soporte usando esta herramienta.

Squoosh

Squoosh es una herramienta que nos ayuda a optimizar imágenes a partir de ajustes del tamaño, formato, calidad, colores, etc.

Si deseas tener una web optimizada un punto básico es revisar que nuestras imágenes sean adecuadas.

Transform

Transform nos ayuda a transformar bloques de código, por ejemplo de HTML a JSX, de objetos de JavaScript a interfaces de TypeScript, etc.

CSS Gradient

CSS Gradient nos permite obtener el código de CSS para aplicar degradados muy fácil.

¡Gracias por leer!