El universo de Paquitosoft

11Jun/14Off

Nueva herramienta de analisis de codigo para Javascript

Cada vez me gusta más Javascript. Es curioso cómo hace no tanto tiempo era un lenguaje desconocido y un poco aterrador para mí. Sin embargo, y gracias a la inestimable ayuda de Mootools, mi atracción por JS no ha dejado de crecer.

Creo que podría decir que hoy en día es mi lenguaje favorito. La comunidad que se ha creado alrededor de él es inmensa y no para de crecer, y no solo para el trabajo en los navegadores, sino ahora (desde hace casi dos años) también en el servidor gracias a ese otro grandísimo proyecto que es NodeJs.

Hablemos de mi libro... A lo largo de los múltiples proyectos escritos utilizando Java en los que he estado involucrado, he ido descubriendo una herramienta asombrosa que se llama Sonar. Se trata de un proyecto Open-Source para el análisis del código que desarrollas en base a un conjunto de reglas que gente mucho más preparada que yo ha ido describiendo a lo largo del tiempo. Lo realmente bueno de esta herramienta es la explotación  y presentación que hace de los resultados. Es realmente ipresionante.

Este tipo de herramientas te ayudan a ser mejor desarrollador. Te resaltan tus defectos y te enseñan cómo solucionarlos. Pues bien, ahora que me he adentrado en el mundo de Javascript, busqué herramientas de este tipo que pudieran existir. Las dos principales son: JSLint (del gran maestros Douglas Crockford) y JSHint (fork de la primera).

Estas dos herramientas sirven para analizar el código Javascript escrito en base a un conjunto de buenas prácticas recopiladas por el señor Crockford (JSLint) y refinadas por la comunidad (JSHint). Sirven para escribir un código que tenga un riesgo bajo en tiempo de ejecución.

Ambas herramientas tienen un sitio web donde puedes insertar tu código y obtener un análisis esxhaustivo y ambas tienen bastantes opciones de configuración.

Cuando empecé a usarlas, pensé que estaría bien tener una herramienta propia que me ayudara a tener información sobre mi código de manera más ágil. Eché un vistazo por internet para ver las opciones que había y encontré este artículo, donde integraban esas herramientas con Growl, dando un buen resultado en Mac.

Sin embargo, me veo obligado a trabajar con Uindous, por lo que se me ocurrió que podría intentar crear mi propia herramienta usando las ya existentes...

Y por fin llegamos al corazón del asunto. JSQA es un proyecto Open Source que utiliza JSHint para analizar el código Javascript que tú le digas y para mostrar el resultado de dicho análisis en tiempo real mediante una página web. La idea es que tú conectas la herramienta a tu código y tienes disponible una web en local donde tienes los resultados del análisis de manera que, si tú cambias uno de tus ficheros, automáticamente es analizado y el resultado se actualiza en la web.

11May/14Off

Refactorizando objetos nativos en Mootools

La lección aprendida de esta semana va sobre el uso de la función Class.refactor del paquete More de Mootools.

Esta función resulta muy útil cuando necesitamos extender la funcionalidad de una clase (ya sea propia de Mootools o una nuestra). Antes de su aparición, era muy fácil incluir nuevos métodos a una clase existente o incluso sobreescribirlos con otra de las funciones que está en el Core, Class.implement. Un ejemplo de su uso podría ser el siguiente:

Element.implement({
 
   // Incluyo un nuevo método en todos los elementos para
   // jugar con su opacidad pudiendo especificar el tiempo
   // de la transición.
   fadeInTime: function(type, time) {
      var endValue = 1;
      if ('out' == type) {
         endValue = 0;
      } else if ('toggle' == type) {
         endValue = (this.get('opacity') == 1) ? 0 : 1;
      }
      new Fx.Tween(this, {
         property: 'opacity',
         duration: time
      }).start(endValue);
   },
 
   // Sobreescribo el método destroy para que no se elimine
   // ningún elemento sino que se oculten
   destroy: function() {
      this.set('opacity', 0);
   }
});

El problema venía cuando realmente queríamos añadir funcionalidad a una función existente, puesto que utilizando implement(), no se puede acceder al código que estamos sobreescribiendo (ej: la palabra clave super en Java).
Así, para sobreescribir una función podríamos hacer:

   // Sobreescribimos la clase FX.Tween para enviar al log los parametros
  // con los que se ejecuta
  Fx.Tween = Class.refactor(Fx.Tween, {
    start: function(property, from, to){
        Log.log("Fx.Tween::start - Parámetros utilizados: " + property + ", " +
          from + ", " + to);
    this.previous(property, from, to);
    }
  });

Utilizando la función previous() podemos ejecutar el código que estamos sobreescribiendo.

Ahora bien, el problema aparece cuando queremos sobreescribir un método de un objeto nativo, por ejemplo Element. La clase Element de Mootools no es sino un envoltorio sobre el objeto Element al que se le añaden una serie de funciones que hacen mucho más fácil la manipulación de los elementos de una página, por lo que la refactorización que hemos utilizado hace un momentos no nos vale, porque solo es aplicable a clases Mootools puras.

Para ejemplificar este problema imaginad que necesitamos mandar al log todas las veces que se añade un evento de tipo mouseover a cualquier elemento.
Nuestra primera aproximación sería la siguiente:

  Element = Class.refactor(Element, {
    addEvent: function(type, fn) {
      if ('mouseover' == type) {
        Log.log("Element::addEvent - Añadiendo evento de tipo mouseover.");
      }
      this.previous();
    }
  });

La idea es buena, pero nos encontramos con la limitación de la función refactor para objetos nativos y, por eso, este código fallará.
En su lugar, para implementar nuestra idea haríamos lo siguiente:

  (function() {
    // Almacenamos en este scope privado el código original del
    // método que vamos a extender
    var originalAddEvent = Element.prototype.addEvent;
 
    // Sobreescribimos el método utilizando la función guardada
    Element.implement({
      addEvent: function(type, fn) {
        if ('mouseover' == type) {
          Log.log("Element::addEvent - Añadiendo evento de tipo mouseover.");
        }
        originalAddEvent(type, fn);
      }
    });
  })();

Es importante rodear nuestro código de una función autoejecutada para aislar la variable donde guardamos la implementación original de la función que extendemos para que no se mezcle en el espacio global de javascript.

El origen de este post está en una pregunta en StackOverflow.

11Apr/14Off

Porque versionar no está tan mal…

Seguro que más de un@ no comparte mi opinión, de hecho, a veces ni yo mismo la comparto; tod@s hemos escuchado versiones que mancillaban el honor (en mayor o aún más mayor medida) de temas originales que hemos adorado hasta ponernos de rodillas.

Sin embargo, y afortunadamente, a lo largo de los años he ido encontrando algunas excepciones, algunas versiones que no tienen nada que envidiar a sus originales, algunas canciones que nos emocionan incluso más que sus padres.

Hoy dejo aquí una lista con mis versiones favoritas, las que más merecen mis alabanzas y las que os recomiendo:

  • José Feliciano versionando Light my fire de The Doors
  • George Michael versionando Roxanne de The Police
  • Velvet Revolver versionando Money de Pink Floyd
  • Molotov versionando Bohemian Rapsody de Queen
  • Mat Weddle de Obadiah Parker versionando Hey ya de OutKast
  • Por supuesto, Guns and Roses versionando Knocking on heaven's door de Bob Dylan
  • Natasha Bedingfield versionando This Love de Maroon 5
  • September versionando Satellites de ella misma
  • Nelly Furtado versionando Promiscuous girl de su misma persona y ser
  • Una de aficionados: Boyce Avenue versionando Umbrella de Rihanna

Se aceptan nuevas entradas...

15Mar/14Off

Notimoo – Notificaciones mediante Mootools

Como indicaba en mi post anterior, la comunidad de progamadores que se está pasando al framework Javascript Mootools es bastante grande y yo me incluyo en el saco.

Después de trastear un poco con esta librería, me he decidido a escribir mi primer plugin para ser utilizado con ella de modo que pueda conocer realmente cómo es desarrollar con Mootools.

La idea de este nuevo plugin viene de Growl, un fantástico sistema de notificaciones existente para Mac OS que me gustaría utilizar en aplicaciones web basadas en AJAX.
Primero busqué si alguien lo había hecho antes y me encontré con el plugin de Daniel Mota. Su trabajo está muy bien, pero no era exactamente lo que yo estaba buscando. Yo quería un sistema más configurable, donde tuviese la posibilidad de configurar el posicionamiento de las notificaciones, cambiar su apariencia, que su tamaño pudiera ser dinámico, que tuviese en cuenta el scroll,...

Así pues, me puse manos a la obra y desarrollé Notimoo, un plugin compacto (4kb) que implementa todas esas funcionalidades que yo buscaba para un sistema de notificaciones.

Está programado utilizando la versión 1.2 de Mootools y también ha sido probado con la 1.2.1.
Si quieres ver un ejemplo simple del sistema pincha aquí.
Para descargar el plugin puedes acceder a la web demostración o al sitio dedicado en Google Code.

Para más información, entra en la página dedicada.

11Nov/13Off

Mootools – Javascript de última generación

Éste es un post dedicado a todos aquellos que, como yo, se acercaron hace unos años al mundo del Javascript y huyeron despavoridos.

Javascript ha evolucionado mucho y gracias sobre todo a los nuevos frameworks que se han ido creando durante los últimos años.
Hoy en día, la pogramación del lado cliente para las aplicaciones web se realiza sobre alguna de estas librerías pues facilitan mucho el trabajo, proveen gran cantidad de componentes prefabricados comunes y, lo que para mí es más importante de todo, incitan a la programación orientada a objetos.

Algunos de los frameworks más importantes hoy en día son:

  • Mootools
  • jQuery
  • Dojo
  • YUI
  • Prototype

Hace unos meses me vi obligado a volver al javascript después de muchos años sin haber hecho nada con él. La idea que yo tenía era la de un lenguaje muy simple pero que se utilizaba de manera muy compleja. El código resultante solía ser enrevesado y difícil de seguir.

Así pues, temía el momento del reencuentro. Sin embargo, no se produjo un reencuentro sino un descubrimiento ya que el Javascript actual dista mucho de las características del "viejo". De hecho, cuando fuí capaz de cambiar el chip en mi cabeza y olvidar lo que sabía de JS para aprenderlo de nuevo al nuevo estilo, me vi completamente sorprendido ante la potencia y flexibilidad que ahora tiene.

Gran parte de mi nueva js-filia tiene como origen el framework Mootools.
A pesar de que, por lo que leo en internet, hoy en día parece que es más popular jQuery, a mí Mootools me parece una obra maestra, y no solo porque facilita muchísimo la escritura de código multi-navegador, sino porque te "obliga" a adquirir buenas prácticas y patrones a la hora de programar.
En un framework con una documentación (tutorial) muy completa, bastantes ejemplos (versión actual, versión anterior) y una comunidad activa (Foro 1, Foro 2), donde gran cantidad de programadores contribuyen escribiendo nuevos componentes basados en este framework (incluido yo -atentos al próximo post-).

Pues eso, a todos aquellos que tengais una mala imagen del Javascript porque hace tiempo que no lo tocais y teneis mal recuerdo de él, visitad la web de Mootools y sorprendeos con el Javascript de nueva generación.