Optimiza el HTML, CSS, JS e imágenes de tu sitio web con Gulp

Uno de los retos de los desarrolladores web al momento de crear páginas web, es encontrar el equilibrio perfecto entre ofrecer un sitio con excelente apariencia visual y usabilidad, pero cuyo tamaño sea lo menor posible para que la carga sea rápida. Pues un sitio web rápido permite: tener mas visitas con el rendimiento actual del servidor, se ahorran costos de ancho de banda, los usuarios sienten que es una buena página y navegan mas tiempo por ella, entre otras. Este procedimiento incluye varias tareas que realizan muchos desarrolladores web como: usar las versiones reducidas (comprimidas) de Javascript, comprimir y ofuscar nuestro código del lado del cliente,  optimizar las imágenes del sitio, comprimir los archivos CSS, combinar todos los archivos CSS y Javascript en un sólo archivo (para cada tecnología) para reducir el número de conexiones, etc. Algo que no es complicado pero consume tiempo y que se debe repetir cada vez que se hacen cambios en el sitio.

Gulp

Como este proceso es repetitivo y consume tiempo, lo mejor es hacer un script que automatice cada etapa, pero hoy en día existen herramientas como que nos permite facilitar todo lo mencionado anteriormente. En este artículo hablaré sobre Gulp, una herramienta para automatizar tareas que hace lo mismo que GruntJS pero es mas fácil de usar y entender.

¿Cómo empezar?

Para instalarlo, lo hacemos a través Node Package Manager de forma global para que se instale como un comando del sistema y poder ejecutarlo en cualquier parte:

npm install -g gulp

Luego en la raíz del proyecto creamos un archivo gulpfile.js donde especificaremos las tareas a realizar:

var gulp = require('gulp');
gulp.task('default', function() {
});

Añadir una tarea

Una tarea es un conjunto de procesos, por ejemplo, optimizar el código JS consiste en: reemplazar algunas liberias por sus versiones CDN, utilizar las versiones minificadas de librerías de terceros, luego concatenar los archivos, minificar y actualizar las referencias en el HTML. Cada uno de estos procesos podemos encontrarlos en el buscador de complementos de Gulp (en caso de no existir alguna puedes crearla y publicarla en Github) y se instalan con npm.

Gulp posee una importante característica: su sistema de flujos entre tareas. Cada una de ellas recibe un conjunto de data (generalmente archivos), realiza un proceso en ella y produce nueva data para ser enviada como entrada a otro flujo. Esto permite a tareas que modifiquen gran de archivos, hacer este procedimiento en RAM y solo escribir en el disco cuando ya se ha terminado de procesar todos los archivos, por lo que se ejecutará muy rápido.

Para verlo en acción, haremos una tarea para reducir el tamaño de los archivos JS como ejemplo, entonces nuestro primer paso es instalar el plugin uglify con NPM:

npm install --save-dev gulp-uglify

Luego se deben hacer dos cosas en el archivo gulpfile.js, una es importar esta el complemento en las dependencias y asignarla a una variable, luego con esta variable podemos ejecutar la función que se encargará de (en este caso) reducir el tamaño del código javascript. Para ello debemos hacer lo siguiente:

var uglify = require('gulp-uglify');
gulp.task('comprimir', function() {
gulp.src('lib/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'))
});

Como podrás observar, hemos creado una tarea llamada comprimir , que recibe un conjunto de archivos (los archivos JS ubicados dentro de /lib), crea una tubería y ejecuta uglify que se encargará de comprimir cada uno de los archivos, finalmente entrega el resultado a la tubería que se enviará a la ruta de destino (esta se puede definir a donde uno desee). Así sucesivamente podemos ir creando procesos como los mencionados anteriormente y luego agruparlo en unas tareas mas generales, por ejemplo, tareas para generar una versión para depurar (cuya fuente no este comprimida), una versión para producción, una versión de producción para pruebas, entre otros. Esto lo puedes hacer al final haciendo algo como esto:

gulp.task('produccion', ['comprimir', 'copiar','cdn', 'less']);

Ejecutar las tareas

Finalmente puedes ejecutar el comando gulp en la raíz de tu proyecto y empezará a realizar todas las tareas de forma automática. En caso de que quieras ejecutar solo una tarea, puedes pasar por parámetro el nombre de la tarea:

gulp produccion

Con esto generas la versión de producción, o  por ejemplo, si tienes una tarea llamada less para generar los archivos CSS desde LESS, simplemente ejecuta:

gulp less

Tareas recomendadas

Para optimizar un sitio web, generalmente utilizo imagemin, jshint, minify-css, notify, imagemin-pngquant, uglify, usemin. Con estas puedo comprimir imágenes, mejorar el código javascript, concatenar archivos, reducir el tamaño, entre otros. Aunque te recomiendo leer un artículo de Addy Osmani sobre optimización de webs, pues lista una gran cantidad de tareas que puedes ir probando para usar al momento de mejorar tus sitios.

Finalmente, como te darás cuenta con Gulp puedes crear sitios web mas óptimos y ahorrando mucho tiempo. Existen una gran cantidad de tareas existentes que puedes agregar a tu proyecto y facilitar tu trabajo, por eso te recomiendo chequearlas en el buscador de plugins de Gulp y si no existe, puedes crearla y ayudar a otros programadores que necesiten algo similar.

Hace 3 años en esa fecha: Google Chrome para Android

La evolución de la web

Llevo muchos años haciendo desarrollo web, aproximadamente en 1999 hice mi primera página web en el extinto Geocities y de allí hice páginas por entretenimiento hasta que en el 2003, con esta página (antes de ser un blog) y otra de skate he estado involucrando en el mundo web.

Desde entonces ha habido muchos cambios en la web, por una parte, antes solo existía un navegador como tal pues Internet Explorer ocupaba como el 95% de la cuota y pocas personas usaban Netscape, limitando a los desarrolladores a solo crear cosas disponibles en esta aplicación que Microsoft había abandonado. Esto ocasionó el despliegue de complementos de terceros como Flash y Java, que traían a la web mayor interacción, animaciones a cambio de menor seguridad y lentitud. Pero al hacer un sitio con esas tecnologías, estabas seguro que funcionaba en cualquier computadora y que eventualmente tus lectores iban a sufrir vulnerabilidades de seguridad.

Por otra parte, en el año 2004 salió el navegador Mozilla Firefox que logró brindar una alternativa a los usuarios de la web y abrir la posibilidad de nuevos navegadores como Google Chrome que salió en 2008, para así destronar a Internet Explorer y fomentar una sana competencia por ganar usuarios a través de calidad, permitiendo el avance de tecnologías abiertas y el impulso de HTML5/CSS3. Con estas alternativas, los programadores y diseñadores tuvieron que adaptarse a los nuevos tiempos y actualizar o crear sus páginas para funcionar en cada navegador del mercado, pues dar soporte a uno solo no es opción, porque olvidas a sector importante de usuarios de Internet.

Con el lanzamiento de dispositivos móviles ahora la web estaba disponible en todas partes, desde cualquier lado puedes acceder a ella y fuera de tu computadora personal. Creando un nuevo reto pues una página no solo debía funcionar bien en todos los navegadores sino también en múltiples tamaños de pantalla y resoluciones, aumentando un poco el trabajo de los desarrolladores pero creando sitios dinámicos que funcionan en cualquier tamaño de pantalla.

Podría decirse que la evolución de la web siempre pone retos a los desarrolles y a quienes ejercen el diseño de sitios web, pero a su vez, permite a los usuarios disfrutar de una mejor plataforma, cada vez con mas posibilidades audiovisuales de forma nativa, tener videojuegos 2D y 3D en el navegador, contar con sistemas operativos como Chrome OS y Firefox OS que ejecutan aplicaciones web y muchas cosas mas por venir. Demostrando que tenemos a la web por mucho tiempo y seguirá siendo el principal medio de comunicación en el mundo.

Cómo desactivar algunos módulos de Jetpack mejorar la cargar de un sitio

Para quienes tienen alojado un sitio WordPress en un servidor propio, probablemente estén usando el plugin Jetpack para aprovechar muchas de las funcionalidades de WordPress.org: estadísticas de visitas, botones para compartir, mejores comentarios, versión móvil, entre otros. Sin embargo, este plugin añade muchos archivos (innecesarios muchas veces) Javascript al sitio, aumentando el tamaño del sitio y ralentizando la carga del sitio.

Para evitar esto, podemos instalar adicional el plugin Jetpack Lite que elimina todos los módulos exceptuando el de estadísticas y enlaces cortos de wp.com, pero con pequeñas modificaciones en el ćodigo podemos controlar cuáles módulos cargar:

  • Abrimos el archivo jetpack-lite.php  y nos ubicamos en la linea 32.
  • Si observamos, hay una funcion llamada Leave_only_JetpackLite_modules que se llama en el hook jetpack_get_available_modules, esta función devuelve un arreglo con los módulos a activar, por eso debemos simplemente agregar nuevas entradas al arreglo $return desde $modules para activar módulos, por ejemplo:
    $return['stats'] = $modules['stats']; //Estadísticas
    $return['shortcodes'] = $modules['shortcodes']; //Código corto para vídeos
    $return['sharedaddy'] = $modules['sharedaddy']; //Botones para compartir en redes sociales
    $return['comments'] = $modules['comments'];//Mejoras en la caja de comentarios
  • Para obtener la lista de módulos, simplemente navega hasta la ruta /wp-content/plugins/jetpack/modules/ y cada carpeta representa a un módulo, si sabes inglés entenderás que hace cada uno de ellos por su nombre y debes agregarlo al vector comentado en el paso anterior.
  • Una vez agregado todos los módulos al vector $return, debes agregar cada uno de ellos en el array declarado en la función Activate_only_JetpackLite_modules:
    return array( 'stats', 'shortcodes', 'sharedaddy', 'comments','publicize' );
  • Una vez que subas los cambios y recargues el sitio, solo deberías tener activado los módulos necesarios y los archivos Javascript que se requieren sólo para las funcionalidades activas.

Nota: Al instalar Jetpack Lite debes tener instalado Jetpack. Pues el plugin no es un fork sino un pequeño código para eliminar la carga de todos los módulos. Y si tienes alguna duda o problema, no dudes en dejar un comentario para ayudarte.

Hace 5 años en esa fecha: La historia del Hacking

Hace 9 años en esa fecha: Compilación en Linux, Dia del Software Libre

Desarrollo de aplicaciones web con MEAN.io (Mongo, Express, Angular y NodeJS)

Hace unas semanas, elaborando un sistema interno para Oja.la tuve la libertad de escoger la plataforma a desarrollar y como este año me había decidido a realizar una aplicación web escrita 100% en Javascript empecé a investigar sobre como empezar con la plataforma  MEAN (Mongo, Express, Angular y NodeJS), para quienes no la conocen, es como LAMP (Linux, Apache, MySQL y PHP) pero orientada a usar JS tanto en frontend como en el backend. Investigando conseguí MEAN.io, un framework para desarrollar bajo esta plataforma.

Instalación

Al momento de iniciar el proyecto, no sabía utilizar Express ni Mongo, respecto a NodeJS sólo había hecho unos experimentos sencillos para ver como funcionaba, pero ya tenía experiencia en AngularJS y herramientas como: Yeoman, Grunt, Bower y NPM. Por ello, la instalación de este framework me pareció muy sencilla: clonar el repositorio y luego mediante bower instalar todas las dependencias automáticamente. Solo realicé algunos cambios para evitar actualizar versiones no estables de librerías (no me gusta actualizar  en pleno desarrollo para evitar incompatibilidades con funcionalidades ya escritas) y eliminar cosas innecesarias para el proyecto (como autenticación usando redes sociales).

Esqueleto inicial

La forma en como está estructurado me ha gustado mucho, la separación del backend y frontend se hace notable. Respecto a Express,  la estructura es muy sencilla, principalmente se divide en las carpetas: models (los objetos que permiten se comunican con la BD), controllers (donde se guarda la lógica del proceso), routes (maneja las rutas de las peticiones del servicio web), views (las vistas a mostrar desde el servidor, las cuales son diferentes de las vistas generadas en el frontend).

En la parte pública se trabaja como cualquier aplicación de Angular, se crean carpetas por cada módulo a desarrollar, por defecto vienen incluidas 2: auth y system. La primera es el módulo de autenticación que trae MEAN.io para permitir identificarse utilizando redes sociales y la segunda, donde va la aplicación como tal. También se incluyen los archivos para manejar las dependencias del proyecto usando npm, bower y se incluye un archivo de Grunt.

Este último, trae configuraciones para montar un servidor: de desarrollo, pruebas y producción. Cada uno de ellos tiene su propia  configuración, permitiéndote trabajar con diferentes bases de datos, bibliotecas comprimidas solo en la versión de producción y pruebas. Me pareció raro que no incluía la tarea grunt-ngmin, pues permite facilitar la compresión de archivos JS de AngularJS.

Logo de Mean.io

Logo de Mean.io, chévere que sea una chica ninja

Desarrollo

El desarrollo de la aplicación se me hizo fácil gracias a esta plantilla base, si nunca has desarrollado una aplicación bajo este modelo, te recomiendo iniciarte con MEAN.io. Lo único extraño es que generalmente en otras plataformas el código de backend es diferente al de frontend, permitiendo determinar fácilmente la ubicación del código que estas viendo, como aquí todo es JS a veces debes mirar la ruta para ver si estas en frontend o backend, además, probablemente llames a los modelos de Express y Angular con el mismo nombre, confundiendo a veces la apertura de archivos.

La desventajas que vi con esta plataforma fue: la poca documentación debido a su poco tiempo de disponibilidad e incompatibilidad para navegadores antiguos (Android 2.3, IE 8, entre otros), sé de la disminución de la cuota de mercado de estos navegadores, pero aún existen clientes/usuarios que lo utilizan y en el ambiente empresarial se les debe dar soporte. Y finalmente, no me gustó mucho trabajar con MongoDB, es muy chévere almacenar los objetos en JSON y la lectura se hace rápida, pero no sé si es por mi años utilizando BD relacionales pero la falta de restricciones de diseño o tanta libertad de almacenar lo que se desee allí, me parece que puede crear daños en la integridad de datos en el futuro. Tal vez porque estoy acostumbrado a manejar toda la validación de la data en la BD y no en la aplicación, me pareció inseguro que con MongoDB toda la validación se hace en la aplicación (si me equivoco, por favor me lo aclaran en los comentarios).

Recomendaciones

Te recomiendo utilizar Mean.io si deseas hacer una aplicación bajo esta plataforma en poco tiempo, realmente es sencilla de usar si tienes experiencia desarrollando aplicaciones web con Javascript. Probablemente la curva de aprendizaje para un novato sea fuerte pero vale la pena el esfuerzo. Si deseas algo mas sencillo o simple (sin sacrificar calidad), puedes probar Mean.JS un fork realizado por el autor de Mean.io para mejorar algunos problemas de diseño de la plataforma.

 

Hace 4 años en esa fecha: Vota por el futuro logo de Mozilla Venezuela

Hace 6 años en esa fecha: ¡Empezó el E3 2008!

Hace 8 años en esa fecha: Entrevista a Luis Tascon en VTV y mi opinión de él

Automatiza tareas de desarrollo web con Guard

Hace tiempo en una charla de Paul Irish, ví un programa llamado Live-reload para recargar automáticamente una página en el navegador cada vez que realicemos un cambio en ella. Pero nunca había podido configurarla en Linux, luego hace unos días en una entrevista de Addi Osmani vi un comentario que me hizo volver a tratar de instalarla, su comentario fue: “Ya en el 2013 nadie debería perder tiempo en recargar manualmente el navegador”.

Así que me puse instalar el programa y descubrí Guard, una aplicación hecha en Ruby para chequear las modificaciones realizadas a archivos y realizar acciones en base a ello. Esto permite por ejemplo, que al realizar algún cambio en un archivo escrito con SASS o SCSS genere el CSS automáticamente, si modificas un archivo JS de desarrollo genere el archivo final ya comprimido, generar el archivo JS desde CoffeScript, entre otros. De esta manera automatiza gran cantidad de tareas que usualmente harías manualmente a través de comandos del Editor/IDE.

 

 Instalación

Aunque existen instaladores para MacOS y Windows los desarrolladores prefieren instalarlo a través de Ruby GEMs, el proceso es sencillo y se aplica para todos los sistemas operativos que soporten Ruby, para ello en la consola debes ejecutar los comandos:

gem install bundle #facilita el proceso

gem install guard #el programa que estamos comentado

gem install guard-livereload #extensión para actualizar el navegador

gem install guard-sass #para pre-procesado de CSS

 

Configuración

Luego te diriges a la raíz del proyecto que estás elaborando, allí ejecutas el comando:

bundle init

Nota: Si el comando falla es porque no tienes el comando gem en tu variable $PATH
Esto creará un archivo llamado Gemfile que contiene toda la información de los gems utilizados en el proyecto y las dependencias de lo mismos. Una vez creado con el comando mencionado, lo abres y agregas el siguiente contenido:

gem 'guard'

gem 'guard-livereload'

gem 'guard-sass', :require => false

Luego debes crear un archivo con el nombre Guardfile en la raíz del proyecto, en él se definirán las reglas que deben ocurrir para realizar las acciones. El siguiente ejemplo está diseñado para ser usado en un proyecto PHP con el framework Yii:

#Modulo para que al modificar un archivo SASS genere el CSS ya comprimido
guard 'sass',
:input => 'css',
:output => 'css',
:style => :compressed
#reglas para la recarga del navegador
guard 'livereload' do

#actualiza el navegador al ocurrir cambios en las vistas, modelos y controladores.
watch(%r{protected/views/.+\.php})
watch(%r{protected/views/.+/.+\.php})
watch(%r{protected/views/.+/.+/.+\.php})
watch(%r{protected/models/(.+)/(.+)\.php$})
watch(%r{protected/controllers/(.+)\.php$})

#Comprime los archivos de Javascript utilizando un script llamado compressJS ubicado en la carpeta js/
watch(%r{js/.+\.original\.js}) {`js/compressJs`}

#Una vez generado los archivos JS finales (ya comprimidos) recarga el navegador
watch(%r{js/.+\.js})

#Recarga el navegador cuando se modifica un archivo CSS
watch(%r{css/.+\.css})
end

La sintaxis es watch(%r{EXPRESION_REGULAR_DE_ARCHIVOS}) {comando a ejecutar}, con esto puedes jugar a detectar cambios en algunos archivos y realizar a través de una secuencia de comandos, tareas respecto a ese archivo modificado. También noten como por ejemplo al comprimir el archivo JS no se recarga el navegador, sino en otra regla cuando se modifica un archivo JS, es decir, algunas cosas deben hacerse a través de la definición de varias reglas.

Uso del programa

Para ejecutarlo debes iniciar guard con el comando:

bundle exec guard

A partir de ahora guard chequeará los cambios en los archivos y ejecutará las acciones configuradas. Para refrescar el navegador automáticamente, es necesario instalar LiveReload para Firefox o Chrome . Una vez instalada, ve a la pestaña donde estas visualizando el proyecto, presionas el botón de LiveReload y debería conectarse sin problemas a guard.

Complemento de LiveReload

Botón para conectarse con Guard LiveReload

Para probarlo, edita un archivo de vista  y debería actualizarse la página sin problemas. También al editar un archivo SASS (o SCSS) debería generar el archivo CSS y a su vez recargar la página para ver la nueva apariencia, al editar los archivos de Javascript deberían comprimirse y cualquier otra acción que hayas configurado.

Ahora depende de ustedes que utilicen estas herramientas todos los días, pues mejorarán su trabajo al automatizar ciertas tareas y enfocarse en otras mas importantes. Si alguien conoce otra utilidad para Guard, no duden en dejar un comentario.