Recomendaciones para aprender el fino arte de ser Frontend

Esta publicación tiene como objetivo brindar recomendaciones para las personas que inician en los temas relacionados con un Frontend Developer, considerando que ya se tiene previo conocimiento entre lo que es un Frontend Developer y un Maquetador, de lo contrario, puedes leer la siguiente nota para darte una idea.

  1. Aprende CSS desde 0. Gran parte de los errores de los Frontends hoy en día es que no saben darle estilo a un sitio completo sin utilizar un framework que les facilite el proceso; no estoy diciendo que un framework es un error, estoy diciendo que para utilizarlo se debe tener un buen dominio de las hojas de estilo por separado.

  2. Aprende Javascript desde 0. Antes de dar el salto a jQuery o alguna otra librería js, es importante conocer funciones, sintaxis, operaciones matemáticas y selectores de elementos, ya que esto nos ayudará a resolver problemas en algún plugin, de igual manera, nos permite comprender cómo funciona jQuery y crear nuestras propias funciones de animaciones y procesamiento de datos o resolver problemas de compatibilidad con otros navegadores.

  3. Intenta no utilizar imágenes para detalles estéticos. En ocasiones el diseño de un sitio contempla elementos que tienen algunos detalles que se nos hace fácil resolver con una imagen de fondo, lo cual no es del todo malo, lo cierto es que a la hora de hacer un mantenimiento o cambiar el color de algo se vuelve un relajo, ya que tienes que modificar las 1284 (por decir un número random) imágenes pequeñas que utilizaste para afinar esos detalles de ciertos elementos; es mejor utilizar los pseudo-elementos, tal como el “:after” y “:before” por mencionar los más utilizados.

  4. No utilices plugins js para todo. Una de las más grandes diferencias entre el Maquetador y el Frontend es precisamente la habilidad de programar (En Javascript principalmente), Así que la recomendación es que intentes hacer la mayor parte de interacciones y eventos con Javascript por cuenta propia.

  5. Valida la compatibilidad entre navegadores. Una de las principales responsabilidades de un Frontend es garantizar la compatibilidad del sitio web o sistema web que se está desarrollando en los diferentes navegadores que puedan ser utilizados por el usuario (Se recomienda que siempre des soporte a las 3 últimas versiones de cada navegador).

  6. Estructura adecuadamente las hojas de estilo. Es importante que exista orden en la composición de las hojas de estilo, ya sea que estén separadas por módulos, secciones o páginas del sitio, esto ayuda a la hora de dar mantenimiento al sitio, sin mencionar que te permite trabajar de una manera modular y sin entorpecer el trabajo de otras personas si es que es el caso que compartas el proyecto con otro desarrollador.

  7. Aquí hay algunas referencias de sitios web útiles para Frontends:

-http://www.crockford.com/
-https://www.browserstack.com
-http://caniuse.com/
-https://codepen.io/
-http://sass-lang.com/
-http://gulpjs.com/
-http://gruntjs.com/
-http://compass-style.org/

  • Ejemplo de FadeIn y Fade Out con Javascript (sin jQuery, sin librerías: entender este tipo de funciones ayuda mucho a mejorar como programadores):