Web and Beer

Bueno, esto lo pongo porque seguramente en algun momento tendra que obtener las coordenadas de un element con javascript.

function getCoordinates( Element ){
	var coordinates = {left:0,top:0};

	while( Element != null ) {
		console.log(Element, Element.offsetLeft  ,  Element.offsetTop);
		coordinates.left += Element.offsetLeft;
		coordinates.top += Element.offsetTop;
		Element = Element.offsetParent;

	}
return coordinates;
}

La funcion es simple, pasame el element (como objeto, con getElementById) y el script empieza a buscar todos los parents de ese objeto, y calcula su offsetLeft y offsetTop, como resultados obtenemos el total.

Espero que les sea util.

Si les ha pasado lo mismo que a mi, que Reflection en Chrome no esta operativo y muestra 2 veces la misma imagen, es porque deben parchar (yo lo tengo implementado con mootools 1.2.4 y la verdad tube que fixear varias cosas).

El problema es webkit419, que algo anda mal con la implementacion de canvas y objetos 2d… raro.

Solo basta con cambiar estas lineas de JS.

} else {
			var can = new Element('canvas').setProperties({'width':arg.width, 'height':arg.height});
			if(can.getContext && !Browser.Engine.webkit419){
				/*var ctx = can.getContext("2d");
				ctx.save();
				ctx.translate(0,arg.height-1);
				ctx.scale(1,-1);
				ctx.drawImage(i, 0, 0, arg.width, arg.height);
				ctx.restore();
				ctx.globalCompositeOperation = "destination-out";
				ctx.fillStyle = arg.color;
				ctx.fillRect(0, arg.height*0.5, arg.width, arg.height);
				var gra = ctx.createLinearGradient(0, 0, 0, arg.height*arg.ref);
				gra.addColorStop(1, "rgba(255, 255, 255, 1.0)");
				gra.addColorStop(0, "rgba(255, 255, 255, "+(1-arg.ref)+")");
				ctx.fillStyle = gra;
				ctx.rect(0, 0, arg.width, arg.height);
				ctx.fill();
				delete ctx, gra;*/

				 var ctx = can.getContext("2d");
                ctx.save();
                ctx.translate(0,arg.height-1);
                ctx.scale(1,-1);
                ctx.drawImage(i, 0, 0, arg.width, arg.height);
                ctx.restore();
                ctx.globalCompositeOperation = "destination-out";
                ctx.fillStyle = '#000';
                ctx.fillRect(0, arg.height*0.5, arg.width, arg.height);
                var gra = ctx.createLinearGradient(0, 0, 0, arg.height*0.5);
                gra.addColorStop(1, "rgba(255, 255, 255, 1.0)");
                gra.addColorStop(0, "rgba(255, 255, 255, "+(1-0.3)+")");
                ctx.fillStyle = gra;
                ctx.fillRect(0, 0, arg.width, arg.height);

			}
			return can;
		}

Seguramente a varios les habra pasado que quisieron implementar mooflow con una version de mootools bajada por ustedes mismos y se dieron cuenta que no caminaba.

Seguramente su firebug estaba abierto, y vieron el mensaje de error

uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]” nsresult: “0×80040111 (NS_ERROR_NOT_AVAILABLE)”

Bueno, esto no es el fin del mundo, es un simple error conceptual por la gente de mooflow, pero lo solucionamos muy facilmente.

Busquen esta linea y modifiquen segun corresponda.

Element.implement({
reflect: function(arg){
//i = arg.img.clone();
var i = arg.img.clone().set('src', arg.img.src);

He estado revisando un poco los antiguos post a la lista de webandbeer, y encontre uno que inicie hace ya un tiempito, y creo que vale la pena volver a recordar.

Estoy hace semanas matandome con manuales de html5, y experimentando mucho.

Algo que encontre y es muy pero muuuuy interesante, es el pensar en que como
html5 tiene websocket, uno podria en javascript programar toda una etapa que
decida en base a una conf inicial como debe comportarse la app, en base a
por ejemplo los times de repuestas de un servidor.

Por ejemplo, tenemos 3 WS, entonces, si ponemos un “cron” que revise cada WS
en intervalos de 1 minuto por ejemplo, midiendo solo el time de un simple
echo, eso nos permitiria saber que servidor esta teniendo mejor time de
respuestas, y no delegariamos ese laburo a equipos de load o RR.

Estoy pensando mientras escribo obviamente, pero tambien me imagino que si
podemos conectarnos a cualquier lado (websocket elimina la restriccion del
protocolo httprequest), y que javascript tiene un soporte total a utf8,
basicamente podemos escribir cualquier protocolo y armar un client web de
cualquier cosa que viaje por tcp/ip.

Obviamente que el concepto de AJAX desaparece bajo esta implementacion ya
que podemos tener la conexion abierta y escuchando el evento de que algo ha
llegado por ese socket.

Aca dejo un ejemplo de lo que se puede hacer:

http://www.google.com/url?sa=D&q=http://code.google.com/p/websocket-sample/wiki/samples%3Fts%3D1263487925%26updated%3Dsamples&usg=AFQjCNEAH0O2Js_aVLvJLVax4eO6dEytwA

Copie y pegue lo que literalmente escribi en ese post.

Lo dejo para investigar y ver que se puede hacer.

De esta manera se anunció el release oficial de la versión 1.2 del Firebug.

Básicamente es un release final luego de varias betas.

Aquí pueden ver las release notes completas, con todos los bugs corregidos y los nuevos features.

Ah the age old IEPNGFix solution to the problem that we had with IE 5.5 / 6.0 not supporting alpha transparency. The first IEPNGFix solved the problem:

This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full translucency and no more ugly grey borders! It requires only one line in your CSS file, and no changes to your website HTML. tags and background images are both supported.

Now we have a new version that adds the ability to use CSS1 compatible background position and repeat.

En la lista de correo de Web and Beer se mantubo una interesante discucion sobre JavaScript (mas que nada rescatamos los aportes de Demian Rodriguez), asi que aca les posteo algo de lo que se discution.

2008/5/25 Andrés Gattinoni :
Comparto un artículo que vi en el blog de YUI (Yahoo User Interface), donde explica una forma (un hack en definitiva) para aplicar una suerte de visibilidad en javascript.

http://yuiblog.com/blog/2008/05/24/durable-objects/

En definitiva esto es una variación de algo que el chabonito que escribió el artículo definió como “Module Pattern”, que lo explican aca: http://yuiblog.com/blog/2007/06/12/module-pattern/

Saludos

A

Esa forma de implementar propiedades y metodos privados es muy villera e ineficiente. Al definir los metodos dentro del constructor estas copiandolos para cada instancia de la clase, o sea que se debe evaluar e interpretar cada funcion. Si en cambio se definen en el prototype, hay una sola copia del metodo para cada instancia de la clase. Hice una siemple prueba de rendimiento:

function Test() {    var value = [];    this.method = function() {        for (var i=0; i<10; i++) {            value.push(i);        }    };    this.getValue = function() {        return value;    }}

function Test2() {}Test2.prototype = {    value : [],    method : function() {        for (var i=0; i<10; i++) {            this.value.push(i);        }    },    getValue : function() {        return this.value;    }};

var o;var start = Date.now();for (var i=0; i<10000; i++) {    o = new Test();    o.method();}alert(Date.now() - start); // 85ms~

start = Date.now();for (var i=0; i<10000; i++) {    o = new Test2();    o.method();}alert(Date.now() - start); // 45ms~

Y sin tener en cuenta el consumo de memoria.

Bue ya que estamos entonces pongo un ejemplo de propiedades estaticas privadas. Esto no tiene el problema q antes mencioné, pero no se hasta que punto es útil. Se podria hacer una especie de Singleton, q se yo…

function Constructor() {}Constructor.prototype = (function(){    var privateStaticProperty = "Hola mundo";    var privateStaticMethod = function() {

    }    return {        publicProperty : 1,        publicMethod : function() {

        }    };})();

Ahi solo demuestran como tener propiedades y metodos privados pero no mencionan nada en cuanto a rendimiento. Si vas a tener unas pocas instancias de la clase esta todo bien, pero para mi no sirve de nada hacer ese quilombo ya que ademas en los comentarios pusieron varias formas de hackear esa privacidad.
El ejemplo que puse yo sería la forma mas óptima de definir los metodos y propiedades de una clase. Al instanciar una clase (función), el objeto hereda los metodos y propiedades del prototipo de esa función, incluso si fueron agregados despues de la instanciación. Esto es lo que permite extender los objetos nativos de JS y el DOM como hacen muchos frameworks.
Por ej, en Gecko yo puedo agregarle un metodo a todos los

Hace un mes aproximadamente en base a una necesidad puntual (origen de muchas cosas), se me ocurrio crear conceptualmente una nueva forma de hacer Web.

Hoy en dia, el modelo tradicional de desarrollo de sitios desde el punto de vista de JavaScript es que cada “funcion” ejecuta sus request al servidor, y estas funciones procesan el resultado en base a sus necesidades.

Este esquema plantea 2 problemas de inmediato, por un lado la cantidad de request que se hacen al servidor, y por el otro la cantidad de codigo javascript para tomar desiciones en base al resultados.

Vamos a cambiar un poco de tema, pero sin irnos del punto principal.

Por otro lado, tenemos el tema de eventos en JavaScript, los cuales si bien conocemos los clasicos (onclick, mousemove, etc), tambien nos hemos acostumbrado a librerias como prototype o mootools que nos hacen la vida simple, y disparan y agregar oyentes de eventos de todo tipo.

Entonces, vallamos uniendo cabos.

Si podemos agregar eventos de todo tipo (no solo los “reales” por asi decirlos), y agregar oyentes, no seria interezante que los resultados de los request disparan N eventos???.

Para completar la idea, tenemos que plantear el siguiente esquema.

Imaginemos una clase en javascript (estatica) , la que cuenta un metodo para agregar un evento a un array (formado por Id de evento y funcion a ejecutar), y metodo para disparar eventos.

Ahora bien, en una funcion de nuestro codigo hace un resquest para solicitar por ejemplo la descarga de un archivo. En ese mismo sitio, el usuario tiene amigos, y puede ver quien esta online y quien no, mas un contador de archivos bajados.

Ahora bien, vamos a ver el ejemplo-

//Esta funcion se llama cuando queremos bajar un archivo.

function downloadFile(){
//la clase ajax es estatica, ejecutamos send.
RequestAjax.send(url, params);

}

//La clase ajax tiene un metodo estatico que agrega comandos, estos “viajaran” juntos con el
//comando que se envia en el metodo send();
RequestAjax.addCommand(‘getUsersConnected’, {user_id:Site.UserLogged});
RequestAjax.addCommand(‘getTotalDownloadFiles’, {user_id:Site.UserLogged});

//Agregamos funcionalidad cada vez que se ejecute el evento Id 100
Events.addListener(100, function(obj){
Site.refreshTotalDownload(obj.total);
});

//Agregamos funcionalidad cada vez que se ejecute el evento Id 100
Events.addListener(100, function(obj){
if(obj.total>100) alert(“has superado los 100 archivos, felicitaciones);
});

//Agregamos funcionalidad cada vez que se ejecute el evento Id 101
Events.addListener(101, function(obj){
for(…obj…){
Site.setOnline(obj.user);
}
});

Imaginamos como seria la respuesta desde el lado del servidor…

Response['original']={};
Response['Events'][0]={eventId: 100, data:{}};

Esto es mas o menos para que vallan imaginandose por donde biene la mano de esta tecnica de desarrollo.

Es bastante interezante, en proximos articulos se veran casos practicos mas entendibles.

Saludos.