Contenido

TwitterWeek – 2011-02-27

27 feb

+ 1

En mi twitter he publicado estos enlaces que creo os pueden interesar.

$script.js, otra librería de Javascript ondemand

21 feb

+ 1

Dustin Diaz ha publicado su propia librería javascript para cargar javascript cuando realmente lo necesitemos.

$script('analytics.js');
$script('library.js', function() {
  // do stuff with library.
});

$script.js, nos permite añadir un funcionalidad que será ejecutada al cargar el fichero Javascript que estemos solicitando. Lo que nos permitirá cargar más JS, o ejecutar directamente el código que acabamos de cargar.

$script('yui-base.js', function() {
 // do stuff with base...
 $script(['yui-anim.js', 'yui-connect.js'], function() {
 // do stuff with anim and connect...
 });
 $script('yui-drag.js', function() {
 // do stuff with drag...
 });
});

No es algo nuevo, hace ya tiempo vimos una versión simple de como conseguir esto, y vimos como IncludeJS además nos devolvía el contenido comprimido, pero nunca está de mal conocer otras alternativas.

TwitterWeek – 2011-02-20

20 feb

+ 3

En mi twitter he publicado estos enlaces que creo os pueden interesar.

Propiedades CSS que afectan a la tipografía que usamos

16 feb

+ 5

A finales de Enero, la gente de Typekit publicó una serie de artículos muy interesantes sobre un estudio que habían realizado sobre lo que afecta a una tipografía hasta que llega al usuario en forma de página web. Como ya sabemos, intervienen muchos factores, el sistema operativo, los navegadores, los diseños de la fuente, los ficheros de las fuentes y en algunos casos las propiedades CSS.

  • font-size
  • color
  • -webkit-font-smoothing
  • rotation

Afectan directamente a la apariencia de la fuente al salir por pantalla, debido a que dicha fuente se ha rasterizar y convertir a un piñado de píxeles que el navegador despues ha de saber dibujar.

Como siempre, lo importante es conocer las limitaciones para poder lidiar con ellas.

Internet Explorer 9 vs Firefox 4.0

16 feb

+ 28

@paulrouget publica una interesante comparativa entre Internet Explorer 9 y Firefox 4.0. La versión más reciente y prometedora de Microsoft contra la nueva y mejorada creación de Mozilla.

IE9vsFF4
(Ver Imagen)

El resultado es más que obvio, pero bueno, el que se pueda intentar de comparar ya es una buena señal :D

Internet Explorer 9 RC disponible via actualización automática

15 feb

+ 9

La versión más esperada de Internet Explorer ya está disponible via actualización automática para aquellos usuarios que dispongan de la versión beta de IE9, una buena forma de extender la última versión disponible entre los usuarios que ya estén usando dicho navegador.

iercavau-image2
(Ver Imagen)

Si quieres evitar esta actualización en IEBlog nos ponen información de como desactivar la actualización con “Internet Explorer 9 Automatic Update Blocker Toolkit”, algo que a nivel corporativo va a ser muy útil.

Modularizar aplicaciones escalables javascript con POA

13 feb

+ 11

Hace ya tiempo vimos como construir una aplicación javascript fácilmente escalable basado en una presentación de Nicholas C.Zackas. Una forma de modularizar nuestro código Javascript con la intención de separar competencias haciendo que nuestro código no sea dependiente de otro.

En el código que vimos, además encapsulábamos todos los métodos de los módulos en un gestor de errores básico que se encargaba de evitar que un error en uno de los módulos provocara que la aplicación dejara de funcionar.

...
 for (name in instance){
    method = instance[name];
    if (typeof method == "function") {
      instance[name] = function(name, method) {
      return function(){
          try { return method.apply(this, arguments);}
          catch(ex) { console.log("[Error]" + name + "(): " + ex.message); }
        }
      }(name, method);
    }
  }
...

Programación orientada a aspecto

Por otro lado, hace todavía más tiempo, vimos una implementación de los filtros de WordPress en Javascript. Una forma de acercar la programación orientada a aspectos al lado del cliente.

La programación orientada a aspectos, no es más que un paradigma de programación que nos ayuda modularizar nuestra aplicación de una forma controlada, permitiendo extenderla desde fuera sin alterar el funcionamiento principal de la misma. O lo que es lo mismo, poder desarrollar plugins que modifiquen el funcionamiento principal.

Uniendo conceptos

Uniendo conceptos podríamos disponer de la capacidad de crear aplicaciones escalables gestionadas por un objeto encargado de arrancar y/o parar módulos, con una batería de herramientas disponibles en estos módulos capaces de hacernos disfrutar de las ventajas de la programación orientada a aspectos.

Veamos el código completo:


var debug = false;
var Sandbox = function() {
	var listeners = {};
	return {
		add: function(name, func){
		  if (typeof listeners == 'undefined') return;
		  if (typeof listeners[name] == 'undefined') listeners[name] = new Array();
			listeners[name].push(func);
		},
		remove: function(name, func){
			if (typeof listeners[name] == 'undefined') return;
			var j = 0;
			while (j < listeners[name].length) {
				if (listeners[name][j] == func) { listeners[name].splice(j, 1);}
				else { j++; }
				}
		},
		fire: function(name, args){
			if (typeof listeners == 'undefined' || (!listeners[name]  || typeof listeners[name] == 'undefined')) return;
		    for (var x=0; x<listeners[name].length; x++)
		        listeners[name][x].call(this, args);
		}
	};
};

var Core = function(){
   	var modules = {}, sandbox = new Sandbox(this);
   	function createInstance(moduleID){
   		var instance = modules[moduleID].creator(sandbox),name, method;
    	if (!debug) {
      		for (name in instance){
        		method = instance[name];
        		if (typeof method == "function") {
          			instance[name] = function(name, method) {
						var evname = moduleID + ":" + name;
            			return function(){
              				try {
								sandbox.fire("pre-" + evname, arguments);
								salida = method.apply(this, arguments);
								sandbox.fire("post-" + evname, salida);
								return salida;
							}
              				catch(ex) {
								if (typeof instance["onerror"] == 'function') instance["onerror"].apply(this, [ex]);
								console.log("[Error]" + name + "(): " + ex.message);
							}
            			}
          			}(name, method);
        		}
      		}
    	}
  	return instance;
 	}

 	// Método públicos
 	return {
   		register: function(moduleID, creator) {
     		modules[moduleID] = {
       			creator: creator,
       			instance: null
     		};
   		},
   		start: function(moduleID) {
     		modules[moduleID].instance = createInstance(moduleID);
     		modules[moduleID].instance.init();
   		},
   		stop: function(moduleID){
     		var data = modules[moduleID];
     		if (data.instance) {
       			data.instance.destroy();
       			data.instance = null;
     		}
   		},
   		startAll: function(){
     		for (var moduleID in modules) {
       			if (modules.hasOwnProperty(moduleID)) {
         			this.start(moduleID);
       			}
     		}
   		},
   		stopAll: function() {
     		for (var moduleID in modules) {
       			if (modules.hasOwnProperty(moduleID)) {
         			this.stop(moduleID);
       			}
     		}
   		}
 	};
}();

¿Que nos ofrece?

He modificado el script para añadir 2 puntos de enlace predeterminados a todos los métodos de los módulos, “pre-XXX” y “post-XXX”. Lo que nos permite definir funcionalidades que se ejecutarán antes y después de la ejecución del módulo.  Veamos un ejemplo:

Core.register("test", function($s){
	return {
		init: function(){
			console.log("Constructor");
		},
		destroy: function(){
			console.log("Destroy");
		},
		onerror: function(ex){
			alert("Error: " + ex);
		}
	}
});

Core.register("test2", function($s){
	return {
		init: function(){
                        // Añadimos el evento al contructor del módulo "test"
			$s.add("pre-test:init", function(){
				console.log("Bla bla");
			});
			console.log("Constructor 2");
		},
		destroy: function(){
			console.log("Destroy 2");
		},
		onerror: function(ex){
			alert("Error: " + ex);
		}
	}
});

// Cargamos los módulos
Core.start("test2");
Core.start("test");

// Resultado
// --> Constructor 2

// --> Bla bla
// --> Constructo

Eventos personalizados

Al igual que los eventos por defecto de los que disponemos, podemos especificar eventos propios en nuestro módulos mediante el uso de Sandbox.fire(), que se encargará de ejecutar el contenido asociado al evento especificado.


Core.register("test3", function($s){
	return {
		init: function(){
			console.log("Constructor 2");
			// Ejecutamos el evento "mievento"
			$s.fire("mievento", this);
		},
		destroy: function(){
			console.log("Destroy 2");
		},
		onerror: function(ex){
			alert("Error: " + ex);
		}
	}
});

Como podemos ver, nos permitirá crear aplicaciones escalables y fácilmente extensibles mediante módulos que a su vez serán interoperables entre ellos mediante la programación orientada a aspectos.

TwitterWeek – 2011-02-13

13 feb

+ 1

En mi twitter he publicado estos enlaces que creo os pueden interesar.

TwitterWeek – 2011-02-06

6 feb

+ 0

En mi twitter he publicado estos enlaces que creo os pueden interesar.