Front-end developer es una designación excesivamente genérica que no permite establecer claramente el alcance de todas las tareas que llevamos a cabo.
En nuestro trabajo diario es necesario realizar tareas muy heterogéneas de manera continua. Programar en Javascript, establecer los estilos de websites, migrar webs en WordPress, revisar archivos de registro, editar imágenes, comunicarse con un servidor vía ssh y modificar archivos on-line, modificar registros DNS, etc…
Muchas de estas tareas pueden hacerse de manera completamente rudimentaria, con editores sencillos o utilizando procedimientos sin excesiva complicación pero que son tediosos y poco elaborados.
Ahora bien, el conocimiento y estudio más profundo de las tecnologías y de las herramientas adecuadas permiten poder hacer muchas de estas tareas de manera más rápida, sistemática, homogénea y ordenada.
En este post me propongo comentar algunas de estas herramientas, porque considero que un mínimo conocimiento de las mismas modifica sustancialmente el flujo de trabajo de cualquier fron-end developer.
No se trata de hacer una revisión exhaustiva, si no de apuntar en la dirección adecuada.
Para mi – desde luego- hubo un antes y un después y por ello voy a comentarlas brevemente por si fuera de ayuda para alguien.
Gestión de contraseñas: keepass
Cada vez que das de alta un nuevo website es necesario generar una cierta cantidad de contraseñas: el ftp, la base de datos, los usuarios de la web, la API de google de no se qué, el plugin de pago que hace no se cuantos, etc..
Los métodos más extendidos para guardar estas contraseñas suelen ser o bien fiarse del «recordar contraseña» o bien el socorrido «Excel» de turno.
Estas soluciones me parecen poco seguras, no sistemáticas y por tanto no adecuadas.
Un excelente sistema (software), gratuito, multiplataforma y tremendamente funcional para llevar a cabo de manera adecuada esta tarea es Keepass.
Con Keepass está muy claro dónde tienes que guardar cada contraseña, permite organizar niveles, puedes acceder desde dónde estés con muy poco esfuerzo y es completamente seguro. Solo tendrás que instalarte las aplicaciones pertinentes y recordar una contraseña maestra. (si guardas todas las entradas en un único archivo).
Más información en los siguientes links:
https://es.wikipedia.org/wiki/KeePass
Compiladores de CSS: Sass
Cuando introduces mucho estilo propio en un website te das cuenta de que teclear continuamente listas de jerarquía de clases todas metidas en un archivo css es algo que no parece correcto, es impreciso, tedioso y poco sistemático.
Para simplificar y mejorar la tarea de generación de CSSs existen los compiladores de estilos: LESS, SASS, etc… que permiten redactar los archivos CSS de un manera mucho mejor, limpia , poderosa y gratificante.
Un integrador, diseñador, etc.. utiliza CSS. Un front-end con conocimientos de programación utiliza CSS compilados y solo cuando es una cosa muy sencilla o no hay más remedio CSS puro.
En mi caso me decanté por utiliza SASS que tiene una muy buena integración con GRUNT. Una vez utilizas este stack te das cuenta del tiempo y las posibilidades que perdiste utlizando CSS «a pelo».
Editor de código pesado: Visual Studio Code
Lo que yo buscaba era un editor no muy pesado que me sirviera para varios lenguajes de programación de los que utilizo diariamente (JS, PHP, SASS, HTML,..), que fuera gratuito, estuviera disponible para Linux e incorporara temas oscuros para evitar la fatiga ocular.
Mi andadura con este tipo de software comenzo con Geany, pasando por Eclipse (que instalaciones tan dolorosas!!!), un intento frustrado con VIM y una estancia prolongada con Brackets.
No estaba del todo satisfecho con éste último. Iba bien, pero tenía la permanente sensación de que había características que podrían acelerar mucho mi flujo de trabajo y no estaban disponibles o lo estaban pero no muy accesibles.
Desde que Microsoft «se bajó de la burra» e hizo disponible el Visual Studio Code de manera gratuita y para Linux, ha pasado a ser mi editor de cabecera. Funciona muy bien, es ligero, y hay complementos para todo.
https://code.visualstudio.com/
Editor de código ligero: Micro
El editor de consola Micro es un sustituto interesante para el editor de consola de linux «nano». Sobre todo porque tiene coloreadores de sintaxis y permite un uso del ratón y del teclado casi idéntico al de un editor gráfico. Con nano – yo al menos- tengo excesivos problemas para recordar los shortcuts y me encuentro siempre con dificultades para hacer cosas que deberían ser simples.
Con el editor Micro no tengo tantas dudas. Me invita a utilizar la consola más a menudo y con mayor seguridad. Ya no me vuelvo loco para editar archivos desde la consola.
https://micro-editor.github.io/
Control de Versiones : Git
GIT es el sistema de control de versiones que utilizo. Funciona muy bien y no me hace falta ninguna herramienta gráfica adicional en el lado de cliente porque puede manejarse todo desde la consola de una manera suficiente, rápida y sencilla.
Como servidor opté por la opción que ofrece GOGs , que es una integración de servidor que puedes instalar en tu máquina.
Hay otro post en esta web en el que explico esto con un poco más de detalle.
GRUNT
GRUNT es un automatizador de tareas (requiere Node) que permite que se lleven a cabo múltiples acciones mientras tú – oh front-end developer- estás haciendo cosas sencillas.
Por ejemplo: compilar en SASS tus archivos o unirlos en un único CSS y minificarlo o transpilar tus archivos JSX a archivos JS, etc…
Es una herramienta que debe ser utilizada para gestionar de forma adecuada, moderna y óptima los estilos y script JS de tu proyecto front-end.
Resumen del post
Espero que sirva de ayuda a alguién ya que a mi el uso en concreto de estas herramientas me ha hecho trabajar de una manera más rápida y mejor enfocado a los contenidos de los proyectos. Totalmente recomendables. Espero que sirva de ayuda a alguien.