Herramientas básicas para maquetas

Desde hace ya algún tiempo venimos experimentando, en el mundo del desarrollo, un camino profesional muy definido (mucho más que antes): el camino del UI developer, el maquetador web de toda la vida. Una disciplina que además en Redradix se ha cuidado prácticamente desde sus orígenes, con un equipo dedicado en exclusiva. Esto ha permitido entender mejor sus necesidades y sacar lo mejor de cada uno de ellos.

Ha llovido mucho desde que tocaba hacer maquetas con tablas, y hoy en día un maquetador necesita tener una pequeña mochila con unas cuantas “herramientas” para hacer que su magia sea mantenible, escalable, accesible y, sobre todo, de calidad. Eso entre otra muchas cosas.

A veces, estas herramientas las descubres por redes sociales, en blogs, las comparte contigo un compañero. Pero también hay muchas otras ocasiones en las que no las encuentras cuando lo necesitas.

Pues justo este artículo trata de esto. Un breve listado de tools que vienen muy bien para el día a día de cualquier maqueta. Algunas de ellas indispensables en cualquier proyecto. Vamos allá.

Básicas

• CanIUse Una herramienta indispensable y de sobra conocida en el mundo del desarrollo. Se utiliza para comprobar la compatibilidad de una propiedad entre navegadores y sus versiones. Recomendable echar un ojo de vez en cuando a la sección de noticias.

• CanInclude Siempre nos pasa: ¿puede ir un < p> dentro de un < a>? ¿Estará bien escrito sintácticamente? Pues bien, este regalito nos recomienda lo que está correcto y lo que no lo está tanto. Importante tenerla a mano para cuando surgen las dudas.

En general, en cualquier ámbito, la accesibilidad es fundamental e indispensable. Y en el mundo digital no tenemos por qué ser menos. Como estamos viendo, hay herramientas para todo, sobre todo para hacer las cosas bien. En nuestra mano tenemos hacer la vida un poquito más fácil a todas esas personas que tienen alguna discapacidad.

• WebAIM Contrast Checker Un clásico de la gente de WebAIM en el que se puede comprobar el nivel de contraste entre dos colores.
• ColorHexa Nos proporciona información útil sobre colores y además tiene un simulador de daltonismo.
• Lighthouse Esta fantástica herramienta audita la web, ya sea privada o pública, marcándote los puntos mejorables de ella, en concreto analiza los siguientes campos: progressive web apps, performance, accessibility, best practices y SEO.
• WAVE Es una megaHerramienta que evalúa y ayuda a que tu web sea más accesible. Es muy visual, practica y útil. Además, tiene extensión para navegadores.
• Pa11y. Ya la última sobre accesibilidad que traemos por aquí (aunque hay muchas más). Esta cuenta con un CLI para para poder trabajar desde la terminal.

Hay muchos constructores, editores de código, IDE´s y plugins para estos. Por eso, con este punto no quiero contaminar mucho y creo que es mejor que cada uno vaya por dónde este más cómodo. Aun así, os dejo un par de recursos que personalmente creo que son muy recomendables.

• Prettier Tras una configuración inicial, formatea el código para hacerlo mas legible. Algo a tener muy en cuenta si trabajas en equipo. Creo que es muy importante que todos tengan la misma configuración, si no os volveréis locos viendo código modificado en el repositorio: tabulaciones, comas simples o dobles...
• Parcel Magia. Una Build tool súper sencilla de configurar. Para cuando te toca hacer un estático para ayer (sí, es posible 😉).

Como ya he comentado, "siempre existe algo que nos haga la vida mas fácil". Pues bien, hablamos de los generadores. Algunos algo más complejos que otros, unos los utilizas más, otros menos… pero está bien tenerlos siempre a mano en favoritosLocalizables.

• Smooth shadows Un generador de sombras.
• Fancy border radius Generador de border radius, algo peculiares y diferentes, desarrollado por Mirko.
• CSS Gradient Un generador de gradientes. Un clásico desde siempre. Ha cambiado varias veces su diseño pero siempre es igual de práctico… En su web podemos encontrar también recursos, ejemplos y tutoriales.
• Gradient Generator Otro generador de gradientes, esta vez del gran Josh Comeau.
• Cubic Bezier Generador de curvas Bézier, sencillo y también muy práctico.

En ocasiones (casi siempre) el tiempo de entrega nos adelante por la derecha. Esto hace que sea muy necesario repasar tu trabajo antes de pasar a producción y hacerlo publico. Porque, recuerda siempre: trabajo incompleto, doble tarea.

En este sentido, estas dos herramientas de checklist serán tus dos mejores colegas a partir de ahora:

• The Front-End Checklist Desarrollada por David Dias
• a11y checklist Esta ultima es similar a la anterior, pero se centra en aspectos relacionados con la accesibilidad.

Lógicamente no son todas las que están ni están todas las que son. Pero había que empezar por algún punto. Aquí hemos recogido las básicas, pero este tema de las herramientas para mejorar nuestro día a día da para mucho más de si… ¡afortunadamente!