8 herramientas gratuitas de desarrollo web frontend que posiblemente no conocias馃帹

Cristian Fernando - Aug 16 '21 - - Dev Community

脥ndice

  1. Introducci贸n
  2. bundlephobia
  3. fontflipper
  4. visbug
  5. spinkit
  6. flatuicolors
  7. pexels
  8. pixabay
  9. iconfinder
  10. Conclusiones

Introducci贸n

A continuaci贸n les comparto algunas herramientas que uso dia a dia en mi trabajo como dev frontend, espero que sea de mucha utilidad para ustedes tambi茅n.

1. bundlephobia

Esta web permite buscar paquetes en NPM brind谩ndote informaci贸n sobre su peso, ello para saber si dicho paquete vale la pena utilizarlo en nuestros proyectos o no. Es muy profesional no usar dependencias a lo loco, sino saber decidir bajo qu茅 escenarios podemos considerar elegir usar paquetes de terceros.

img

2. fontflipper

驴Te cuesta elegir una fuente para tu proyecto? Hay tantas fuentes en Google Fonts que muchas veces se nos hace complicado seleccionar una sola, y es muy engorroso descargar muchas y testearlas para saber cual nos convence.
Fontflipper es una web que nos ayuda a testear un mont贸n de fuentes sin necesidad de descargarlas.

img

3. visbug

Es una extensi贸n/complemento de Google Chrome y Mozilla que nos brinda un mont贸n de herramientas en tiempo real para jugar con los estilos de nuestro proyecto. Desde posicionamiento con flex box hasta modificar colores o texto de la web sin tocar el c贸digo css.

img

4. spinkit

Es un kit de diferentes spinners que podemos usar para dar un poco m谩s de estilo a nuestros proyectos. Son m谩s de 10 diferentes spinners listos para ser usados, solo tienes que copiar y pegar el c贸digo html y css.

img

5. flatuicolors

Esta p谩gina te proporciona paletas de colores completas y listas para ser usadas. Puedes usar los colores en formato hex, rgb o rgba completamente gratis.

img

6. pexels

Banco de im谩genes y videos gratuitos y libres de derechos de autor.
img

7. pixabay

Posiblemente mucho m谩s conocida que la anterior, Pixabay es un banco de im谩genes y videos de alta resoluci贸n que puedes usar libremente en proyectos comerciales sin tener que preocuparte de los derechos de autor.

img

8. iconfinder

Logos de paga y gratuitos para usar en prototipado.

img

Conclusi贸n

  • No reinventes la rueda, casi siempre hay mucho material y herramientas en internet que pueden facilitar enormemente nuestro trabajo como programadores. 脷salos con sabidur铆a.

gif

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player