Hoy os vengo a hablar de la de las parte de programación web a la que menos tiempo he dedicado, que es el front-end. Por un lado, porque siempre me he sentido más cómodo en la parte del back-end, esto es, trabajando directamente en el servidor, o en la base de datos, y si bien gran parte de mi trabajo se centra en desarrollo de web apps. Además, el hecho de que Bootstrap sea un framework que facilita mucho la parte front-end, ha hecho que siempre haya investido poco, lo justo más bien, en poner la parte más próxima al usuario lo mejor posible. Por eso, he decidido invertir en el curso CSS Grid, que podeis realizar de forma gratuita.
Preparando las herramientas
Si algo he aprendido y puesto en práctica en estos años, y de lo que sí he hablado mucho en este blog, es de herramientas. Para desarrollo web, os he hablado de varios editores de texto, desde Notepad++, también Atom.io, o Visual Studio Code, aunque hay más.
En este curso, también va a ser necesario disponer de NodeJS, del que casi no he hablado en el blog, y tan vital es para el desarrollo en Javascript (y en TypeScript). Otro aspecto fundamental es que para el curso, el autor anima a utilizar Firefox .
Los archivos completos del curso están disponibles en GitHub, y es casi lo primero que estarás obligado a descargarte, para empezar a aprender, por supuesto, tras instalar NodeJS.
Sin duda, la lección segunda es bastante interesante porque el autor comenta las herramientas fundamentales para front-end, y sin duda, utilizar browser-sync es una de las primeras dependencias que tienes que tener disponible (sinceramente, en pocos minutos ya estaba aprendiendo muchísimas cosas!!).
Aprendiendo CSS grid
CSS grid es una nueva forma de plantear el desarrollo web de la disposición de distintos elementos. No es ni librería ni framework, sino un extra adicional del lenguaje CSS que permite el desarrollo rápido de layouts.
Básicamente, se trata de trabajan con un elemento DIV (por ejemplo) asumiendo que podemos incluir sus elementos hijos como una grilla (grid). La forma de ordenar los elementos se puede realizar con propiedades CSS.
Lo primero que he aprendido es a usar variables en CSS, lo que facilita muchas cosas, sobre todo para la homogeneización de colores, y otras cosas, haciendo más sencillo muchas cosas. La forma de escribir las variables es anteponiendo –:
:root { –variable: valor; }
Y donde sea necesario, utilizas var(–variable). Quizás no es la forma más sencilla, pero al menos, CSS ya dispone de variables, lo que permite hacer códigos más legibles, más homogéneos, reducción de errores, reutilización para crear distintos temas, …. yo creo que tiene bastantes ventajas!!
Adicionalmente, es necesario conocer que todas las variables tienen un ámbito, y por tanto, para disponer del máximo nivel es necesario declararlas mediante :root.
Demasiado simple y sencillo, para haber tardado tanto en emplearlo, sabiendo además que son “case sentive”, esto es, que importa la forma en que se escriben, al igual que ducede con Javascript o Python.
Pero nunca es tarde para aprender! Ah, por cierto, deben de verificar que los navegadores admiten el uso de estas características, si bien los más utilizados Chrome y Firefox los permiten sin problemas!
Nunca he estado muy puesto en temas front-end, pero desde hace muchos años dejó de utilizarse las tablas para maquetar en diseño web, siendo sustituidas por las mallas (o grids). Con la llegada de los smartphones y tablets, se impulsó el que las web fueras “responsivas”, esto es, que se ajusten a distintos formatos de pantalla, y esa adecuación ha requerido también de nuevas funcionalidades, y por supuesto, un buen control de las mallas es fundamental.
Lo fundamental es display: grid;
Algunas propiedades de CSS que ayudan en esto es:
display: grid; grid-template-columns: valor; grid-template-rows: valor; grid-auto-rows: valor; grid-auto-columns: valor; grid-auto-flow: columns; /* default: rows */ grid-gap: valor; grid-column: valor_inicio, valor_fin; grid-column-start: valor; grid-column-end: valor;
Por eso, te animo a que sigas el curso de CSSgrid.io, donde obtendrás un impulso genial para entender un poco más y mejor cómo hacer mejor el tema front-end, incluyendo cómo hacer el mejor uso de las herramientas de depuración incluidas en Dev Tools.
Sinceramente, debo admitir que había muchas cosas de depuración web que desconocía, cómo los grids implícitos y explícitos (los que se generan solos, frente a los que se especifican), y las distintas herramientas de depuración para ver qué hace el navegador.
También he aprendido el uso de fr como fracción, en lugar de usar porcentajes o px o em, que hace que más cómodo la distribución de espacios.
Gracias al uso de grid, se abre un mundo de posibilidades con funciones como repeat, minmax, auto-fill, auto-fit, fit-content, …
Las grid-template-areas es otro recurso que me ha gustado mucho, de forma que puedes “etiquetar” los espacios con nombres, e incluso darle distribuciones diferentes en función del tamaño del display, sin necesidad de utilizar Javascript, todo mediante CSS.
Aquí teneis una entrada donde el autor muestra cómo hacer un genial y sencillo front-end y lo que ha ganado con el uso de grid, frente a lo que usaba antes!
Sin duda, unas cuantas hora muy bien invertidas en aprender un poco de CSS, la parte a la que menos tiempo le he dedicado.
Happy coding.