El caso de uso es que en mi trabajo requiero pasar datos de una página (datos o estilo) a otra página. Ya sea para pasar datos de producción a local para resolver un bug, pasar información de un backup a un sitio que se rompió, etc.

Fuera de mi trabajo se me ocurre que podría usarlo para loggear request de ajax. Guardar el estado de datos en distintos momentos para checar que cambio y mejorar la idea de un bookmarklet para ejecutar javascript en un página.

Esto se puede realizar en 3 lugares, en Mongo, Ruby o Javascript. Dado que Mongo y Ruby son ambientes relativamente nuevos para mi y generalmente implican saltar de un server a otro, mover distintos archivos de lugar en distintas terminales y pasar archivos por SSH, decidí resolver el problema en Javascript.

Exiten distintas maneras de hacer esto, pero había una restricción más que me interesaba tener. Quería una función en la consola que siempre pudiera usar en cualquier página, así que la solución por la que opté fue una Chrome Extension, además tengo una background page que sirve como server y no requiere conexión a un server remoto o algo más instalado en mi computadora.

Las extensiones de Chrome generalmente no permiten acceder el contexto de la página, pero si el dom, por lo cual tuve que hacer un poco de JavascriptFu con estas lineas para tenerlo.

var s = document.createElement('script');
s.innerHTML = 'window.Buffer = ' + Buffer.toString() + '; window.buffer = new Buffer();';
document.body.appendChild(s);

Y un poco de guardar datos en el dom para ser leídos por la extensión y el browser. Al final del día quedó una primera versión que resulve mis problemas.

En cualquier momento puedo abrir la consola (F12), teclear buffer.store, pasarle una etiqueta con la que podré requerir el valor después y un objeto, pasar a otra página teclear buffer.fetch la etiqueta anterior y recibir el valor, ya sea en forma de callback o llamando buffer.lastFetch.

En caso de que alguien tenga un interés de usar la extensión da click aqui, si tienes algún feature request puedes dejarlo en los comentarios y si tienes algo que desees que corrija agregalo en los issues de github.

Un par de conclusiones:
1.- Me agrada mucho la idea de tener una serie de herramientas extra corriendo en mi consola, debido a la cantidad de tiempo que paso en el browser y lo omnipresente que es hoy en día. Me quede con ganas de implementar unas cuantas funciones sobre esta extensión, como salvar un objeto a un archivo o poderlo mandar por mail.

Tengo la idea de crear un chat service que corra dentro de la consola. Para lo cual debo de mejorar el formato en que corre el pasar objetos y eventos de un contexto a otro.

2.- Chrome decide que las extensiones corran en un contexto aislado por seguridad de los usuarios y por facilidad para los desarrolladores pero creo que en el lado de seguridad todavia no estan haciendo un gran trabajo.

Si de empezar esta extensión sabía lo fácil que era crear un key logger como parte de una extensión y ahora se que haciendo un proceso similar a lo realizado en esta extensión se puede robar cookies de manera sencilla.

Lo cual me da un poco de paranoia de tener extensiones instaladas ya que tienes mucho acceso y mucho poder sobre como pueden manipular el comportamiento del browser. Por lo cual requiero darle una hojeada al código o tener confianza en el author del código.

alert "I knew it!" if elvis?

Lo cual ejecuta la funcion alert si y solo si elvis existe. Es una sintaxis agradable y por lo cual en algun punto me intereso aprenderlo a usar.

Hay casos como agregar un callback al evento click en jQuery no cambia mucho la sintaxis. En CoffeeScript es:

$('.account').click(()->alert('account was click'));

$('.account').click(function() {
  alert('account was click');
});

Sin embargo en la mayoría de los casos, lo que escribo es javascript asíncrono y en la mayoría de los casos uso funciones, para ser mas exacto, funciones como la siguiente:

asyncSomething = function(x, callback) {
  x = x * getSomeAsyncvalue();
  return callback(x);
};

y despues la ejecutamos en algun otro lado de la aplicacion de esta manera:

asyncSomething(5, function(data) {
  return console.log(data);
});

Son patrones normales de javascript, sobretodo cuando hacemos cosas que implican animaciones de eventos, emisores de eventos y ajax.
En CoffeeScript se veria de la siguiente manera:

asyncSomething = (x, callback) -> x = x*getSomeAsyncvalue(); callback x;

y en otro lado de mi aplicación la ejecutaremos de esta manera.

asyncSomething(5,(data) -> console.log(data));

El (data) -> console.log(data) al llamar mi funcion es algo que no me agrada, mas alla llamar un parametro despues de hacer esto es imposible. Entonces el siguiente ejemplo:

setTimeout(function(){
   DoSomething()
},1000);

En CoffeeScript se veria como:

setTimeout(()->DoSomething(),1000)

Lo cual primero que nada causa un error de parser y después el declarar ()-> en lugar de function(){} me causa un poco de dolor de cabeza, principalmente si agregas mas de una linea de código. Simplemente me agradan mis parentesis, mis llaves({) y me agrada la sintaxis de javascript.

Para empezar a checar CoffeeScript tienen muchos ejemplos en su pagina, donde todos los ejemplos tiene una opción de load donde pueden empezar a escribir su código y decidir si les gusta o no.

En mi caso, creo que hay algunos casos que la sintaxis es muy bonita, en algunos casos que la sintaxis no aporta mucho a lo que se hace en javascript y ,en muchos casos, solo complica la sintaxis. Espero sus opiniones de coffescript.

En esta plática Rebecca Murphey nos habla de las necesidades y riesgos de aprender javascript de esta manera.  Pasando por ejemplos de código hechos muy DOM céntricos hasta las grandes preguntas que los desarrolladores necesitemos responder para llevar el lenguaje al siguiente nivel.

Espero que hayan disfrutado la platica y si algun dia quieren reunirse por un cafe y hablar de eso, me encantaria. Me pueden contactar por los comentarios del blog o por mi twitter @siedrix .

Estoy usando esta arquitectura para hacer un juego de pelean naval y el código es un poco mas complicado, pero esta es la base de como funciona. Pueden ver el ejemplo aqui, pruebenlo con varias tabs.

Necesitaremos tener Node.js en un servidor que pueden checar como instalar aquí. Como librerías tendremos Faye(tanto en servidor y cliente) y jQuery (no es necesario, pero hacer la vida mas facil).

Empezare con la parte de servidor.

var faye = require('./lib/faye-node'),
	http = require('http');

Con esto tendremos faye para el servidor de comet y http para nuestro servidor web. En node todos los archivos empiezan inicializando los módulos que se necesitan.

var bayeux = new faye.NodeAdapter({
  mount:    '/faye',
  timeout:  45
});

Esto inicializa el servidor de Comet, basado en el protocolo Bayeux, que es la base de pubsub donde cada usuario se podrá subscribir a un canal y tendremos la posibilidad de mandar mensajes a todos en el canal de manera sencilla.

var server = http.createServer(function(req, res){
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
});

Con esto inicializamos el servidor de http, este ejemplo es sacado del Hello World de Nodejs.org, esta parte nos preocupara por el momento.

bayeux.attach(server);

Con esto unimos nuestros 2 servidores, con lo cual el servidor de Comet vivirá en “/faye” y todos los demás request serán pasados al servidor de http.

server.listen(8080);
console.log('server up at port 8080');

Con esto inicializamos nuestros servidores y escucharan en el puerto 8080. Después necesitamos correr en terminal:

iptables -A INPUT -p tcp --dport 8080 -j ACCEPT
node app.js

Con lo que abriremos el puerto 8080(solo se necesita hacer la primera vez) y después corremos node que imprimirá en la terminal

server up at port 8080

En el lado del cliente necesitaremos tener un jquery y faye.

<script src="jquery-1.4.2.js"><!--mce:0--></script>
<script src="faye-browser-min.js"><!--mce:1--></script>

Nuestro HTML tendrá un UL donde estarán llegando nuestros mensajes y un input box para escribiremos nuestros mensajes.

Después necesitaremos conectarnos al servidor de Comet con las siguientes linea:

	var client = new Faye.Client('http://184.106.230.29:8080/faye');

Nota: cambiar la url para su servidor, aunque pueden usar el mio para probar cosas si lo desean. Solo avisen.

Despues necesitamos especificar que hacer cuando llega nuestro mensaje, en este caso haremos un prepend a nuestro ul mensajes.

	client.subscribe('/messages', function(message) {
		$('#messages').prepend('
	<li>'+message.text+'</li>
');
	});

Lo único que falta es programar como hacer para publicar mensajes. Necesitaremos tener un boton para que al darle click lea nuestro input box, mande el mensaje

	$('#publish').click(function(){
		if($('#text').val()){
			client.publish('/messages', {
			  text: $('#text').val()
			});
			$('#text').val('')
		}
	});

De paso validamos que el mensaje contenga texto. Esta es la versión mas básica de un chat que podemos hacer, espero que esto les sirva para empezar a usar Node y hacer aplicaciones con Faye.

Pueden descargarlo de aquí.

Cualquier duda déjenla en los comentarios y tratare de resolverla.

$('#name').click(function(){
	…some code…
});

Hice el cambio a:

$('#name').click(function(){
	location.hash = '#/type/name';
});

Y después tengo a Sammy.js haciendo todas las funciones de la siguiente manera:

	var app = $.sammy(function() {
		this.get('#/type/:query',function(){
			…some code…
		});
		this.get('#/subtype/:query',function(){
			…some code…
		});
		this.get('#/subclass/:query',function(){
			…some code…
		});
		this.get('#/search/:query',function(){
			…some code…
		});
	});
	app.run('#/');

El método probó ser muy eficiente, todavía tengo que trabajar un poco para evitar que cada palabra del search box entre al hash del url. En el momento no es perfecto, pero es pretty nice y bastante sencillo.
Además ahora pueden compartir url con mucha información entre los usuarios sin necesidad de dar instrucciones de cómo encontrar la información.
Espero que esto les sirva para hacer aplicaciones únicamente con Ajax de manera más sencilla.

Esta operación es mecánica y poco necesaria que la haga un humano, sobre todo si se requiere testear varias veces hasta lograr el resultado deseado. He estado leyendo un poco de unit testing en js y próximo proyecto lo empezare con YUI test que estoy aprendiendo.

Por el momento no tengo un framework de unit testing en el proyecto que esto a punto de terminar, pero por que no usar javascript para realizar los click necesarios.

	$($('#related-marks li a')[0]).click();
	ajaxLoad = setInterval(function(){
		if($('#comment23').attr('type')){
			console.log('comment23 was clicker')
			$('#comment23').click();
			clearInterval ( ajaxLoad );
		}else{
		}
	}, 100)

Agregando estas líneas de código al final de mi javascript logro realizar todos los clicks de manera inmediata cada vez que se carga la pagina.

Probablemente esto a algunas personas que ya usen javascript les parezca trivial, pero creo que es un paso hacia adelante en el camino a convertirme en un js ninja.

Un bookmarklet empezara de esta manera:

<a href="javascript:(
function(){
	… Your code
})()">Bookmarklet</a>

He estado trabajando para tener jQuery para manipular el dom u Raphael para poder agregar SVG a cualquier pagina, lo cual requiere cargar un script de manera asíncrona, aunque de la misma manera podría funcionar para Prototype, Mootools o cualquier otra librería de javascript. Lo cual requiere una función para cargar el script:

	function getScript(filename) {
		var script = document.createElement('script');
		script.setAttribute('type','text/javascript');
		script.setAttribute('src', filename);
		if (typeof script!='undefined');
		document.getElementsByTagName('head')[0].appendChild(script);
	}

Y una función para checar que este listo:

	function tryReady(time_elapsed){
		if (typeof $ == 'undefined') {
			if (time_elapsed <= 5000) {
				setTimeout(function(){tryReady(time_elapsed + 100);console.log(time_elapsed);}, 100);
			} else {
				alert('Timed out while loading jQuery.')
			}
		} else {
			getScript('http://localhost/dev/bookmarklet/bookmarklet.js');
		}
	}

Donde en el else, cargamos nuestro script donde esta el código de nuestro bookmarklet. Generalmente lo que tenemos que hacer es tener:

	getScript('http://code.jquery.com/jquery-latest.min.js');
	tryReady(0);

Pero en el caso de jQuery es bastante común, por lo cual podemos checar si lo tiene la pagina y después decidir si lo queremos cargar con la función:

	$().jquery

La cual nos permite checar también la versión, en caso de que necesitemos alguna función como delegate que aparece en jQuery 1.4

Espero que esto les permita hacer bookmarlets de manera sencilla y que agregarles funcionalidades a sus pagina de Internet.

La libreria hace una cosa, controlar el uso de url que llevan #y despues algo mas, lo cual es perfecto para cualquier aplicacion con Ajax. Esta inspirada en Sinatra o cosa que mas o menos entiendo por mi uso de Express en node.js lo cual lo hizo un poco mas facil, pero creo que no es necesario saber nada de eso para utilizar esto.

La libreria functiona en 3 partes:

1. Definir que hacer en cada url, esto se hace definiendo el método del request, definiendo el url despues del # que tendras y una funcion de callback de la siguiente manera:

   this.get('#/redirect/:name',function(){
   	Some code...
   });

   Se pueden usar url estáticas, usar : parámetros o definir regex para las url.

2. Definir que hacer en caso de cada evento.

   this.bind('my-event-name', function(e,data) {
       Some code..
   })

3. Definir agregar que evento sucede en cada url.

   this.trigger('my-event');

Tiene algunas funciones para usar Localstorage, Session, Variables Globales y Cookies, pero creo que eso es irrelevante, lo que me importo fue como manejar las url y eso lo hace muy bien. Creo que empezare a utilizarlo en mis aplicaciones, primero remplazando todas las url de static url a dinamic url y despues tener una manera amena de manejarlas.

Extrañamente en esta pagina que es la original donde encontré el video no permite embederlo, tuve que encontrarlo como video normal. Curioseen los otros video, están muy buenos.

Un ejemplo de lo que podemos crear se encuentra en esta pequeña aplicación para visualizar información de SXSW jalando información de Twitter, Flickr y foursquare.

Tenemos un pequeño laberinto creado enteramente en JS, que es divertido hasta que nos damos cuenta que no tiene final.

Es posible pasar una imagen de vectores a muchos pequeños paths con lo cual podríamos eventualmente dejar de usar imágenes como suceden en este ejemplo donde dibujan un tigre. O si entran a sitio, el logo esta hecho de esta manera.

Cuenta con funciones como Rotate, Traslate y Scale para que podamos manipular la información que se encuentra dentro de nuestro canvas de manera muy sencilla, lo cual generalmente es un pain in the ass que implica pintar el canvas completo y mover el circulo cuando lo pintamos de nuevo, en este caso solo dice:

c.translate(10, 10);

y tienes un elemento 10 px a la derecha y hacia abajo. Recuerden que en los canvas el punto de referencia es la esquina superior derecha.

La manera que funciona para lograr que esto sea tan sencillo es que no usa canvas, usa SVG por lo cual cada elemento es creado como parte del DOM y esto puede hacer que le agreguemos eventos y manipularlo mucho más fácilmente.

Para todos los que estén buscando crear movimiento en la página y crear paginas dinámicas esto es una muy buena opción.