La curiosidad y el interés son motores de aprendizaje y el deseo de nutrirnos de quienes saben más que nosotros y la generosidad de compartirlo con los que saben menos, generan una relación win-win que nos motiva a seguir ese camino. Como parte del proceso de mejora continua, en Bitlogic se trabaja mucho en los Training Paths. Como una forma de hacer el trabajo más interesante, menos monótono y más transformativo, los Bitlógicos podemos sugerir aquellos cursos, workshops o capacitaciones que nos resulten enriquecedoras a todo nivel.
Hace unos meses, participé del curso Level-up with Modern CSS de Stephanie Eckles y luego de finalizarlo me invitaron a compartir mi experiencia, para contagiar y motivar a los demás en este camino de combatir el aburrimiento o la monotonía del trabajo diario. Me pareció interesante compartir las herramientas y prácticas que me interesan y que llevan mi trabajo a un nivel más alto.
En este artículo, les cuento qué herramientas o recursos son los que utilizo a diario para mantenerme actualizada, entretenida y libre de aburrimiento, qué me llevó a elegir este workshop y cuál es mi “honest review” (crítica honesta) del curso que realicé.
La vanguardia y Smashing Magazine
El desarrollo web no es una tarea fácil: día a día quienes desarrollamos nos enfrentamos a una cantidad inmanejable de librerías, frameworks y módulos npm que en teoría resuelven todos nuestros problemas. Las soluciones que implementamos tienen que ser seguras, responsivas, accesibles y a su vez tener un rendimiento óptimo. Este escenario, indudablemente, implica actualizarse y aprender algo nuevo todos los días. Esta práctica se vuelve una necesidad constante para que los productos y soluciones que diseñamos no queden obsoletos en una cuestión de meses y además sirven para estar activo y proactivo dejando de sentir que todos los días son exactamente iguales.
Uno de los recursos en los que me apoyo para estar up-to-date y de los que tomo ventaja para mantenerme activa es: Smashing Magazine. Les recomiendo leer sus artículos, ya que tienen la profundidad necesaria para resolver los problemas con los que cualquier desarrollador se encuentra en los proyectos en los que está trabajando.
Ir más allá con CSS
En los últimos años, CSS se ha modernizado agregando muchas propiedades nuevas. Por eso, decidí continuar capacitándome y elegí el workshop “Level-up with modern CSS”. A continuación, les cuento los motivos que me impulsaron a ir más allá y elevar mis conocimientos:
Una buena base construye y aporta cimientos a quien desarrolla: gracias a la base que tengo en CSS, soy capaz de implementar los prototipos en mi proyecto en un tiempo razonable y con confianza. Los sistemas de diseño son una ayuda, no una forma de esquivar a CSS.
Que el árbol no te impida ver el bosque: con el entusiasmo de aprender sobre las propiedades nuevas que nos trae CSS, debemos recordar que hay navegadores que aún no soportan dichas propiedades, cómo es por ejemplo el caso con LCH, un nuevo formato para colores que actualmente - Que el árbol no te impida ver el bosque: con el entusiasmo de aprender sobre las propiedades nuevas que nos trae CSS, debemos recordar que hoy solo tiene soporte en Safari.
Un código prolijo y mantenible: al trabajar en equipo, es necesario que el código sea lo más prolijo y mantenible que se pueda para que en un futuro cualquier integrante del equipo pueda entenderlo y extenderlo sin dolores de cabeza. Probablemente, no se avecinan cambios en el front end de nuestro proyecto, pero podemos esforzarnos hoy para que hacer estos cambios que puedan surgir mañana no se vuelvan una pesadilla.
La experiencia del workshop
El workshop se dividió en 5 sesiones remotas desde 2,5 horas cada una. En la primera sesión se comienza con un proyecto en blanco. Stephanie va construyendo un proyecto que ilustra todos los conceptos que desea transmitir. La última media hora de cada día se aprovecha para realizar tareas de Q&A, donde se repasa código del día y del día anterior. También se hacen preguntas a nivel general y se intercambian opiniones acerca de librerías o herramientas con las que los participantes han tenido buenas experiencias.
Los highlights técnicos
A continuación, listo 5 aprendizajes que me resultaron muy reveladores e importantes:
- En absolutamente todo el workshop, Stephanie Eckles tuvo en cuenta la accesibilidad pero también la reducción de movimiento. Particularmente, me gustó cómo actúa basándose en una preferencia de movimiento reducido en el reset de CSS, que sobreescribe el comportamiento de estilos por defecto implementado por los navegadores. Con muy pocas líneas de código, sobreescribe todo el movimiento en la página web completa para que dure tan poco que el ojo no lo pueda percibir.
- En varias ocasiones sentí que el código que Stephanie escribía era muy parecido al código que yo suelo escribir. La diferencia es que ella logra dar una vuelta más de rosca a las instrucciones, entregando una solución mucho más elegante. Esta instrucción de grid es un ejemplo dónde se anida una función minmax a un simple grid-template-columns y se logra evitar overflow a nivel horizontal para pantallas chicas, completamente sin media-query.
- Por lo general, la mayoría de las personas que desarrollan front end aprenden CSS con un par de tutoriales y después mejoran sus habilidades a medida que se les plantean desafíos. Este tipo de aprendizaje puede dejar algunos conocimientos afuera. El uso de selectores de CSS es el caso. Durante el workshop me di cuenta de que me había conformado usando únicamente dos o tres selectores y desconocía que hay muchos más que, aplicados correctamente, ¡pueden reducir mi código considerablemente! En la siguiente captura se puede ver un ejemplo dónde Stephanie Eckles combina los selectores >, * y :not para aplicar padding únicamente a elementos que no son imágenes en una card.
- Una de las clases más interesantes del workshop fue cuando se mostraron nuevas formas de aplicar estilos a inputs, checkboxes y radios nativos de HTML, elementos que siempre me habían resultado muy difíciles al momento de trabajar. Stephanie logró aplicar los estilos necesarios para que los elementos se vean bien, siempre teniendo en cuenta la accesibilidad, pero también el modo de alto contraste de windows y el modo de impresión con el fin de que el usuario no pierda información cuando imprime un formulario. En el siguiente ejemplo, se puede observar cómo se pueden aprovechar las propiedades como clip-path y outline para un checkbox con estilos totalmente personalizados.
Conclusión
Ahora ya saben cuál es la técnica para no aburrirse: mantenerse en constante aprendizaje y tratar de aplicar técnicas que mejoren tu código. Como resumen de esta review, les puedo asegurar que ¡Me encantó el workshop! Me gustó mucho porque ahora tengo un proyecto armado que puedo consultar fácilmente cuando no recuerdo algo que se explicó en la capacitación. A su vez, fue una muy linda experiencia poder ver programar a alguien que tiene un alto nivel de conocimiento. Aprendí mucho y pude realizar varios cambios en mi proyecto para que el CSS quede más moderno y también más prolijo. Me suscribí al blog de Stephanie y a los blogs de varias otras personas que ella mencionó durante el workshop, lo cual me mantiene motivada para seguir leyendo y aprendiendo y entregar un código cada vez mejor.
En el workshop, Stephanie Eckles muestra cómo aprovechar las propiedades nuevas, pero a su vez logra que el código sea compatible con navegadores de versiones anteriores. Esta era una de las inquietudes que me llevó a solicitar esta capacitación. Además, Stephanie no utiliza sistemas de diseño y escribe todos los estilos con CSS puro y algo de SaSS. Por último, me impresionó no solo su habilidad para escribir código en vivo, sino también que sabe exactamente cómo buscar un error cuando lo que estaba haciendo no funcionaba. Vale destacar que esta cualidad no sólo me impresionó a mí: durante las clases y mediante el chat los demás participantes constantemente brindaban palabras de halago por su conocimiento y su elegancia de código, de modo que casi al instante se creó un ambiente muy agradable.
Espero que este artículo te sea útil y te motive para encontrar nuevas ideas y recursos que hagan tus días de trabajo más desafiantes e interesantes. Si me querés conocer más, te invito a que visites mi blog en el que encontrarás consejos útiles basados en mi experiencia y conocimientos de front end.
