Saltar al contenido

Mes: febrero 2015

Code Monkey escrito en Delphi

Si eres programador, probablemente has escuchado la canción Code Monkey, que trata sobre un día de un programador cuyo jefe solo le obliga a escribir código. Pues en el siguiente video, verás la letra de la canción escrita en el lenguaje Delphi al mismo ritmo de la canción y lo mejor de todo es que el código compila, así que disfruta de un rato geek:

Code Monkey as Code in Delphi

Deja un comentario

Liberado jQuery Archive List 3.0

Luego de mas de un año sin poder dedicarme a este proyecto personal, he podido liberar la versión 3.0 de jQuery Archive List un widget de WordPress para mostrar el historial de sitio de una mejor manera y con efectos de jQuery. El salto a la versión 3, es debido a grandes cambios en el código de Javascript y en algunas cosas internas de plugin.

Entre las mejoras de esta nueva versión podrán encontrar:

  • Re-escritura completa del código Javascript, ahora ocupa menos espacio, código mas entendible y debería funcionar mas rápido.
  • Finalmente he agregado soporte para tipos de entradas personalizadas, así que puedes usar este widget si tienes tipos de contenido personalizados.
  • Agregué la clase active a los elementos que enlazan a la página actual.
  • Agregué el atributo de título a los enlaces para generar código HTML validado por la W3C.
  • Se agregó traducción al Holadés (gracias a Patrick Schreibing).
  • Se migró la selección de categorías al API de WordPress.
  • Se solucionó errores de exclusión de categorías.
  • Se solucionó el error de la ausencia de la clase expanded  en los meses (gracias to pjarts).
  • Se solucionó el error de no expandirse los meses al seleccionar algunas opciones.

Descárgalo desde el gestor de Plugins de WordPress o desde el sitio oficial de jQuery Archive List Widget. Y cualquier reporte o duda, no te olvides de reportarla en los foros de soporte de WordPress.

Deja un comentario

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, clean-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.

Deja un comentario

Mi entrevista en Coders Venezuela sobre desarrollo de WordPress y mas

Hace unas semanas acepte la invitación de Osledy Bazo para participar en un proyecto de un podcast para Coders Venezuela sobre desarrolladores web Venezolanos, porque desde hace varios años soy seguidor del sitio y me gusta participar en este tipo de cosas. La entrevista, esta centrada en el desarrollo para WordPress, donde he estado realizando trabajos y plugins de código abierto desde hace tiempo. Sin embargo, en algunas partes hablo un poco sobre mi vida personal, trabajos, ideas, la academia, entre otras cosas.

En fin, les recomiendo escuchar la entrevista y si les gustó, compártanlo para apoyar este proyecto, pues me parece interesante para conocer programadores locales.

Enlace del podcast:

Segundo Podcast de Coders Venezuela – Miguel Angel Useche sobre desarrollo de plugins para WordPress.

Nota: Lamentablemente la página murió y no hay respaldo de este podcast.

Deja un comentario