Las tecnologías web se mueven tan rápido que puede ser difícil mantenerse al día. Nuevas herramientas aparecen cada año y parece que las viejas herramientas a menudo caen al borde del camino para las nuevas tecnologías emergentes.

Frontend desarrollo es una gran parte de la web y se ha convertido en su propia carrera. Y si usted mira el desarrollador de frontend como una habilidad más o como una carrera viable, necesitará las herramientas adecuadas para el trabajo.

Quiero compartir mis 10 herramientas imprescindibles para el desarrollo de frontend moderno. Estos son completamente gratuitos y son en su mayoría webapps hechas para ayudarle a crear sitios web impresionantes.

 

1. Grid Guide

Primero en mi lista es Grid.Guide, una aplicación web gratuita que te permite generar grillas sobre la marcha. Esta minúscula aplicación le permite definir gutters y columnas personalizadas basadas en sus propias preferencias de cuadrícula.

 

Primero ingresa su ancho preferido para el sitio web junto con el número total de columnas. Desde allí Grid Guide genera un puñado de opciones para elegir.

Incluso puede descargar un PNG de cada cuadrícula para importar a Photoshop o Illustrator. Esto hace que sea mucho más fácil crear nuevas redes desde cero sin hacer todos los cálculos manualmente o depender de una biblioteca de cuadrícula de cortador de galletas.

2. Foundation

La mayoría de los desarrolladores de frontend prefieren Bootstrap y tengo que admitir que es genial. Pero la Fundación Zurb recientemente recibió una revisión y creo que merece la misma atención.

La biblioteca de la Fundación es igual que Bootstrap cuando se trata de clases CSS predefinidas para grids, tipografía, botones y otros elementos dinámicos. Pero el diseño es un poco más simple, por lo que es más fácil personalizar un diseño que no se vea como un marco genérico.

Y la nueva Fundación tiene una biblioteca hermana llamada Fundación para el correo electrónico. Este es un marco específicamente diseñado para el desarrollo de correo electrónico.

Ambas bibliotecas de la Fundación son fantásticas y están fuertemente apoyadas por el equipo de Zurb.

 

3. CodePen

La mayoría de los desarrolladores ya conocen los IDE de la nube y la facilidad con la que desarrollan el frontend. Puede escribir código desde cualquier computadora e incluso guardar sus proyectos en la nube para compartir en línea.

Pero incluso con tantas opciones tengo que decir CodePen es el mejor que hay. Es rápido, súper confiable, fácil de empezar y actualizaciones automáticas siempre que realices cambios.

Sin mencionar que también es compatible con casi todas las bibliotecas que puedas imaginar. Puede escribir código en LESS o SASS junto con preprocesadores para HTML como Haml o Slim. Y CodePen le permite agregar recursos externos para que pueda utilizar un sitio como cdnjs para incluir otras bibliotecas relevantes.

Manos abajo esta es la mejor herramienta de dev para escribir código y jugando con nuevas ideas. Hay algunas alternativas, pero en mi experiencia nada puede superar CodePen.

 

4. Unheap

Es difícil encontrar una lista curada de los plugins JS más recientes. La mayor parte del tiempo tendrá que navegar a través de repos de GitHub o revisar Twitter para proyectos que se vuelven virales.

Pero con un sitio como Unheap puede navegar rápidamente a través de los plugins jQuery más recientes con facilidad. Están organizados por tipo, como navegación, formularios, medios web y otras categorías.

Es básicamente un repositorio para todos los mejores complementos de jQuery en la web. Y se actualiza con frecuencia para que siempre puedas encontrar cosas nuevas.

 

5. LivePage

Las extensiones de explorador son algunas de las mejores herramientas que puede utilizar para el desarrollo. LivePage es una extensión de Chrome gratuita que actualiza automáticamente la página cada vez que realiza cambios en un archivo local.

Esto significa que puede editar sus archivos HTML / CSS / JS localmente y el navegador se actualizará con cada guardar. Sólo puede tardar un segundo en actualizarse, pero hágalo lo suficiente y verá lo molesto que puede ser.

LivePage también tiene un complemento para Firefox llamado LiveReload.

 

6. Fullpage Screen Capture

Utilizo esta extensión todo el tiempo y es una de mis herramientas favoritas al diseñar un diseño. Captura de pantalla Fullpage Captura le permite extraer una captura de pantalla completa PNG de un sitio web completo.

Simplemente haz clic en el botón en el panel de extensión de Chrome y automáticamente creará una instantánea completa de un sitio web completo cosida en una sola imagen. Puede utilizar esto para estudiar los diseños como un todo que es útil al crear su propio sitio.

7. WhatFont

Tipografía es una gran opción para el diseño web y no es algo que tomar a la ligera. Encontrar la fuente correcta puede ser agotador, pero con una extensión como WhatFont puede aliviar algo del dolor gastado buscando.

Acaba de agregar WhatFont a Chrome y cada vez que vea una fuente en un sitio web, puede hacer clic y colocarlo. Esto le da todos los detalles, incluyendo el estilo de las fuentes, el tamaño, e incluso la ubicación de alojamiento, si procede (como TypeKit o Google Webfonts).

8. Node/npm

Esto podría ser obvio, pero Node ha cambiado la cara del desarrollo web. Trajo JavaScript al backend y nos dio npm, uno de los administradores de paquetes de más rápido crecimiento nunca.

Esto es casi una necesidad y por una buena razón. En este punto todos los desarrolladores de frontend deben aprender la línea de comandos porque ahora es una herramienta esencial en el flujo de trabajo de webdev. Pero npm también es parte de este proceso y es totalmente administrado por la línea de comandos.

Puede sacar nuevos paquetes, actualizar los antiguos, y hay mucho que puede hacer con los scripts npm también.

Si nunca has probado npm antes, entonces te recomiendo mojar un dedo del pie para ver lo que todo el alboroto es.

 

9. Mobile Speed Tester

Google conoce UX excelente y siempre están tratando de ayudar a los webmasters a construir mejores sitios. Una de sus mejores herramientas es el Mobile Speed Tester, que califica la puntuación de cualquier sitio web en función de la capacidad de respuesta y el tiempo de carga para el escritorio y el móvil.

Mide la velocidad y la experiencia del usuario de un sitio web para determinar si es compatible con móviles.

Esto está lejos de ser un informe exhaustivo y no es un reemplazo para las pruebas de usabilidad. Sin embargo, para una herramienta gratuita esto ofrece algunas buenas reacciones y puede ayudarle a empezar en el camino correcto.

 

10. Responsive Test

Por último, pero no menos importante es la aplicación web de prueba de respuesta. Es un proyecto de código abierto lanzado en GitHub que te permite probar el diseño de cualquier sitio web en su navegador.

Simplemente ingrese una URL y arrastre la ventana a cualquier ancho que esté tratando de probar. También hay pequeños botones para tamaños predefinidos para iPhone, iPad y resoluciones genéricas de laptop / desktop.

Hay otra herramienta similar de Matt Kersley pero no tiene tamaños ajustables. En su lugar, obtendrá unas pocas ventanas predefinidas para su uso en las pruebas.

Ambos son excelentes herramientas y son mucho más fáciles que arrastrar la ventana del navegador de un lado a otro.

Y con eso hemos llegado al final de mi top 10! Espero que esta lista pueda ser útil y espero que haya al menos una cosa en esta lista para todos.

Y puesto que el panorama de los cambios de desarrollo de frontend tan rápidamente se puede esperar muchas herramientas más impresionantes en un futuro próximo.