Herramientas y otras Aventuras de un Frontend

Dentro del mundo del Frontend existe infinidad de inconvenientes a la hora de iniciar un proyecto desde cero o sin ninguna base alguna de diseño y por eso en Curiotek quise hacer una pequeña recopilación de algunas herramientas, aventuras o en otros casos desventuras del día a día de un Frontend.

Dimensions, al rescate de las medidas.

Dimensions

Dimensions Logo

Cuando creas una página lo primero que debes tener en cuenta es el tamaño de tus cajas o elementos  y se siembra la duda “¿de qué carajos tamaño debe de ser la cabecera?” y aún hay más apuros cuando no hay un diseñador al alcance, pues esta época se acabó, Dimensions es una extensión para Chrome que te pone una regla superficial en la pantalla de un azul amistoso y te dice el tamaño de el elemento donde estés parado, muy elemental para basarte en algo.

Adaptarse o morir.

extencion responsive design tester

Ejemplo de Uso

En el momento de crear una aplicación o proyecto la comodidad y gusto del usuario es elemental, y no podemos ignorar el 30% de personas que se conectan a Internet, y por eso nuestro proyecto tiene que ser adaptable a móviles o la famosa tendencia llamada Responsive Design, pues Resposive Web Design Tester te ayudará mucho a la hora de emular en una ventana aparte la vista de como se vería tu trabajo en cualquier móvil.

Muerte a los Pixeles.

ish.yet 2.0Cuando estés en el proceso de volver tu proyecto responsive, los pixeles no sirven de mucha ayuda y el flujo no sera muy continuo que digamos, por lo cual tendremos saltos de lineas horribles, letras dispersas y algunos huecos,  “¿entonces qué uso?” para toda pregunta hay una repuesta y para esta son los em¿qué es un em? un em es una medida de puntos en donde un 1 em equivale a 16 puntos tipográficos, Pero “¿qué tiene de especial los em?” Lo especial de los em es que su texto escala según el ancho de la pantalla y si ya estas convencido PXtoEm te ayudará a hacer conversiones de pixeles a em o si quieres hacer unos media query excelentes ish 2.0 te ayuda a calcular el tamaño de una pantalla en em.

Eligiendo materiales

materiales web para contruir

Si no tienes idea con que framework, pre-procesador iniciar o una buena ayuda, ejemplos con experiencia e inspiración, BuiltWith te ayudará a ver con que herramientas fueron hechas las aplicaciones con las que te quieres inspirar, pero esta poderosa herramienta, que es mi preferida, no solo es de ayuda al Frontend, sino también a el Backend, ya que te muestra también en que tipo de servidor donde esta montada la aplicación y los lenguajes que se utilizaron.

Otras Herramientas:

Tagged under:
Pin it

Desarrollado primiparo front-end. En busca del Cloth de acuario. Escritor medio tiempo. Cafe y algo #Geek.