BBVA API Market
Lo hemos dicho en más de una ocasión en BBVA API_Market, 2015 fue el año de JavaScript. No solo del lenguaje de programación, sino de las plataformas o herramientas que trabajan con esta sintaxis. Cada vez existen más marcos de desarrollo y bibliotecas JS para casi cualquier proyecto. PostCSS no es ninguna de estas soluciones, permite transformar el código CSS a JavaScript mediante plugins. En 2015 fue una de las revelaciones del mercado del desarrollo front-end.
En el sistema de estadísticas de npm (Node Package Manager) se puede medir el éxito de una herramienta entre la comunidad de desarrolladores. npm es el gestor de módulos y dependencias para Node.js, el intérprete JavaScript por el lado del servidor estrella en los proyectos actuales. Si se hace una pequeña búsqueda para PostCSS, se ve cómo 2015 fue el gran año de esta solución con más de 9,5 millones de descargas y que 2016 va a batir récords: por ahora van más de 3,8 millones.
En muchas ocasiones se compara PostCSS con preprocesadores de estilos como LESS, Sass o Stylus, pero se hace de forma errónea. PostCSS lo que hace es analizar el código CSS y convertirlo en un documento modificable con plugins en JavaScript. ¿Modificar en qué sentido? Pues depende de cada plugin: desde optimización de código, retoques de color, añadir propiedades y selectores personalizados, metodología de clases BEM y SUIT, análisis y atajos… Es una herramienta de herramientas, un simplificador de procesos para desarrolladores JavaScript.
Los preprocesadores de CSS tradicionales tienen varios problemas importantes con respecto a lo que puede ofrecer una alternativa como PostCSS. Este análisis del sitio especializado para desarrolladores Sitepoint es realmente acertado:
● Los preprocesadores tradicionales no son extensibles. Cada uno de ellos dispone de una serie de características que no se pueden modificar o aumentar. Para ello es necesario crear una extensión propia.
● Cada preprocesador de CSS tiene sus propios estándares, en la mayoría de ocasiones excesivamente alejados de los estándares de W3C. Si se quiere acercar los estándares de diseño de un proyecto a W3C, genera problemas.
● Con PostCSS, los desarrolladores disponen de plugins que sí se ajustan a los estándares de diseño de W3C. Eso quiere decir que todo el proceso de desarrollo del proyecto va en línea con esos estándares sin problemas.
● Si esos plugins no ofrecen lo necesario, con PostCSS existe la posibilidad de diseñar uno propio. Además, los plugins se pueden instalar por separado y decidir en qué orden se ejecutan. También se pueden configurar.
Hay varias formas bastante sencillas de instalar PostCSS. Una de ellas es a través de un configurador de tareas automáticas para JavaScript. Este tipo de herramientas son muy habituales en desarrolladores JS. Algunas de las más interesantes son Grunt, Gulp o Broccoli. En todos los casos, existe una dependencia de Node.js, por lo que es necesario primero tener instalado el intérprete de JavaScript.
Ya con Node.js en el equipo, se debería instalar Gulp. Comando de instalación:
npm install -g gulp
En el caso de tener sistema operativo Linux o Mac OS X, el comando sería este:
sudo npm install -g gulp
Cualquier desarrollador que ya tenga el proyecto totalmente configurado y con Node.js y Gulp en el equipo, lo único que debería hacer para instalar PostCSS es usar la siguiente línea de comandos: npm install –save-dev gulp-postcss. ¿Es necesario tener instalado Gulp para configurar PostCSS en el equipo? No, es una forma de instalarlo si usamos habitualmente este gestor de tareas para proyectos.
También podemos ejecutar el siguiente comando de instalación en npm para configurar PostCSS sin la necesidad de tener Gulp, Grunt o también Broccoli: npm install -g postcss-cli. El mejor método para comprobar que todo está correcto y PostCSS instalado es ejecutar este comando: postcss –help. PostCSS dispone de toda la documentación de configuración en el repositorio de GitHub.
Cada uno de estos plugins realiza funciones y tiene características muy específicas que lo diferencia del resto. Por eso en muchas ocasiones los desarrolladores no usan plugins por separado, sino que prefieren utilizar paquetes de plugins que agrupan funcionalidades. El más conocido es probablemente cssnext. Aquí está el repositorio abierto de este metaplugin en GitHub. Ahí está la documentación.
cssnext tiene características de todo tipo. Este es el listado completo de las más destacadas. Algunas de ellas:
● Selectores de color personalizados.
● Media queries adaptables.
● Propiedades y variables personalizadas.
● Pseudo-clases CSS.
● Filtro de propiedades.
● Función de color.
● Adición de fallbacks en colores RGBA.
● Capacidad para añadir condicionales.
● Sistema de grids.
● Herramientas de optimización.
● Atajos.
No es el único plugin que aúna funcionalidades variadas. PreCSS, un paquete de plugins desarrollado por Jonathan Neal, también es muy utilizado por la comunidad de desarrolladores. El comando para la instalación de PreCSS con npm es el siguiente: npm instalar precss –save-dev. Este es un tutorial bastante completo sobre cómo instalar este paquete de plugins con o sin gestor de tareas como Gulp o Grunt. Todas sus especifidades están bien resumidas.
Los desarrolladores también disponen de algunos repositorios de búsqueda ordenada de plugins específicos para PostCSS. Uno de los más utilizados es PostCSS.parts. Tiene un gran buscador y además los plugins están ordenados por categorías como optimización, media queries, color, fuentes, imágenes o atajos. Es tan sencillo como acudir a la categoría y bucear entre las opciones.
Síguenos en @BBVAAPIMarket
Llevar a un cliente por todo el proceso de compra hasta que este se formaliza es un viaje arduo y que se enfrenta a la posibilidad constante de abandono. Sin embargo, hay formas de lograr que la decisión de compra se haga realidad si se le dan facilidades como una financiación ágil, segura y adaptada a lo que necesita.
En un mundo conectado, las APIs son el pegamento que une todas las piezas que forman nuestra vida diaria. Y de la misma forma que un pegamento solo es potente si sabemos en qué material utilizarlo y conocemos sus propiedades, las APIs son tan útiles como su documentación permita.
Existen diferentes soluciones para monitorizar el rendimiento de una API, tanto en términos de tráfico como de calidad y rapidez de las respuestas que proporciona. Detectar fallos en el código o cuantificar los ingresos que genera también son algunas de las opciones que ofrecen estas útiles herramientas.
