Herramientas web para Frontends

Como Frontend Developers, estamos constantemente buscando formas de trabajar más rápido, mejor y con menos fricción. Por suerte, hay un montón de herramientas geniales (¡y gratuitas!) que nos pueden facilitar muchísimo la vida en el día a día.

En este artículo te comparto 11 herramientas web que uso con frecuencia y que me han salvado más de una vez. ¡Espero que a ti también te sirvan!

🧠 ChatGPT

ChatGPT es un verdadero copiloto para revisar código, entender errores, mejorar documentación o simplemente desbloquear ideas.

Siempre lo tengo abierto en una segunda pantalla. Es como tener a alguien que nunca se cansa de ayudarte.

🔍 Wappalyzer

¿Quieres saber qué stack usa una web? Wappalyzer te lo muestra al instante.

Ideal para analizar a la competencia o inspirarte en otras implementaciones.

⚡ PageSpeed Insights

PageSpeed Insights es una herramienta de Google que analiza el rendimiento de tu sitio y te da recomendaciones claras para mejorarlo.

Conocer conceptos como Core Web Vitals, SEO, accesibilidad y performance te ayudará a sacarle el máximo provecho.

📦 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

Un editor de imágenes online muy parecido a Photoshop.

Photopea es ideal para recortes rápidos, retoques sencillos o cuando no tienes acceso a software de edición instalado.

🧩 Caninclude

¿Puedo meter esta etiqueta HTML dentro de esta otra?

Caninclude resuelve esa duda en segundos, perfecta para mantener una estructura semántica limpia y válida.

🌐 Can I use

Antes de usar una nueva propiedad CSS, HTML o JS, revisa en Can I use su compatibilidad con navegadores.

Evita sustos con usuarios que aún viven en versiones antiguas de su browser.

📷 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

¿Quieres un degradado bonito sin pelearte con el CSS?

Con CSS Gradient puedes generar uno visualmente y copiar el código listo para pegar.

✨ ¿Tienes alguna otra herramienta favorita?

Estas son algunas de las que más uso y recomiendo. Si tú también tienes una que te salva en el día a día, ¡me encantaría conocerla!

¡Gracias por leer!