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.

He descubierto que es un proceso sencillo y estaré buscando maneras de hacerlo más estético a como lo tengo ahora.

El primer paso para migrar una librería es incluir toda la librería en una función que sea invocada inmediatamente. Hay varios patrones para esto, chequen este link para más información sobre funciones invocadas inmediatamente.

Esto sucede para homogenizar el contexto global de los 2 ambientes. En el browser nos interesa trabajar con window y en node nos interesa trabajar con exports.

(function (global){
 
}(typeof window  === 'undefined' ? exports : window));

El siguiente paso implica cargar todas las dependencias que utilizaremos en nuestras librerías, en este caso tenemos que hacerlo de manera distinta en el browser que en node. Por lo cual preguntaremos si existe require para cargar librerias en node de la siguiente manera

typeof require !== 'undefined'

Y en caso de no existir la función require, asumiremos que ya exiten las dependencias en nuestro browser. Como ejemplo está este código donde cargamos Neon en Tellurium

if(typeof require !== 'undefined'){
    var Neon = require('./vendor/neon/neon.js');
 
    var Module = Neon.Module;
    var Class = Neon.Class;
    var Interface = Neon.Interface;
 
}else{
    var Module = global.Module;
    var Class = global.Class;
    var Interface = global.Interface;    
}

El último paso es exponer nuestra libería al ambiente global para que pueda ser usada por otros módulos.

global.Tellurium = Tellurium;

Como parte de mis futuros experimentos para realizar esto, se incluye checar correr requirejs en node y probar cómo funciona. Para más información chequen este artículo.

Les informaré como me va.

Bien, primero instalamos node. La manera en que lo instalo es del repositirio de git, para que sea fácil de actualizar, aunque es más fácil instalarlo del tar.

sudo apt-get install build-essential git-core curl libssl-dev
git clone git://github.com/joyent/node
git checkout v0.6.6
./configure
make
sudo make install

Pueden checar si ya tienen node corriendo

node -v

Recuerden que ahora node viene con NPM, por lo cual no necesitan instalarlo

npm -v

Para instalar Cloud9 necesitarán algunas dependencias más

sudo apt-get install -y build-essential g++ curl libssl-dev apache2-utils git libxml2-dev libssl0.9.8

El siguiente proceso es bajar el repositorio e inicializar los submodulos

git clone git://github.com/ajaxorg/cloud9.git
cd cloud9/
git submodule update –init –recursive

El siguiente punto es inicializarlo

sudo bin/cloud9.sh -p 8080 -w /opt/lampp/htdocs/

Por default corre en el puerto 3000, pero prefiero correrlo en el puerto 8080 por que el proyecto de la chamba corre en el 3000 por default y suelo correr mis módulos de node sobre lamp para probar que mis librerías corran tanto en el browser como en node.

Chequen bin/cloud9.sh –help para más opciones.

Este escrito esta pensado para el blog del Hacker Garage, donde sera el evento, somo me gusta llevar un recopiliacion en este blog, para mas informacion chequen el blog del Hacker Garage. Gracias a @RuyCer y a @CelesteNorth por su ayuda a estructurarlo.

Ve pláticas de gente fenomenal, escribe código y toma chela con tu comunidad favorita.

Hola! Soy Siedrix (Daniel Zavala) y he participado de varias comunidades técnicas del DF, como en organización del SuperHappyDevHouse, Hackspedition y otros eventos. También he participado de cerca con varias comunidades técnicas alrededor de México y en otras partes del mundo. En estas experiencias he oído muchas veces, de mucha gente diferente, la misma opinión:

En México hay una gran comunidad y gran talento

Creo que en México tenemos la dedicacion y el interés de hacer las cosas en grande. Creo también que a veces en México nos hace falta un pequeño empujón: un poco de guía en lo que queremos hacer,y hacer mas visible el gran trabajo que hemos venido realizando.

Hace un mes me mudé a Guadalajara, y durante este tiempo he visto muchos grupos haciendo cosas bastante interesantes. Me gustaría contribuir a los esfuerzos de los grupos que convergen en el HackerGarage, y me gustaría ayudar a generar un ambiente similar al del Hacker Dojo.

Para generar este ambiente que todos estamos tratando de logar de innovación, creatividad y comunidad, creo que la guía de grandes personas nos ayudaría a avanzar mas rápido. Por ejemplo, el Hacker Dojo las pláticas de personas como Rasmus Lerdorf, David Weekly, Progrium, Lee Felsenstein y muchos otros, han contribuido mucho al crecimiento de los miembros de aquella comunidad.

En el HackerGarage se realizan constatemente pláticas donde los miembros comparten su conocimiento. Y eso está muy, muy bien. Pero les propongo algo que complementa este esfuerzo: reunirnos en comunidad a ver la gran cantidad de contenido de calidad disponible en línea–presentaciones, cursos, seminarios–para generar un evento donde veamos al otro tipo de personas, y donde podamos platicar entre nosotros sus ideas. Platicar de tecnología, escribir código, tomar chela y esas cosas que los geeks necesitamos.

Esta es una idea que ya tenia pensada llevar acabo desde que vivía en el DF, pero la vida me llevó a moverme a Guadalajara, y me agrada ver que hay una comunidad igual de entusiasta con la puedo compartir este tipo de eventos. Ahora, despues de un periodo de adaptación creo que estoy listo para ayudar a la organizacion del HackerGarage y del SuperHappyDevHouse Guadalajara con los eventos que se organizan.

La primera sesión de Beer and Code será el próximo viernes 19 de agosto en el HackerGarage, buscando poner la siguiente plática en un proyector, programar un rato, platicar de tecnología con otros asistentes, tomar chela y relajar el estrés de la semana.

Making Apps That Dont Suck

La idea es empezar a organizar este tipo de eventos seguido, como algún día paso con los hackups en la Ciudad de México.

Daniel Zavala

Esta clase buscaremos hacer una pequeña web app que permita controlar que se muestra en un browser de manera remota por medio de web sockets. Estaré publicando la aplicación en DotCloud y espero que todos podamos usar la aplicación.

Temario:

• Generar un pequeño modulo que nos permita generar slides y que estas sean guardadas en una base de datos por presentación.
• Que una página despliegue todas las slides.
• Que en una página podamos cambiar el slide desplegado en todos los browsers que lo estén viendo.

Para hacer esto usaremos:

• Persistencejs para manejo de información.
• Socket.Io para usar Websockets
• Y Express + Jade como web server

Busque que la plática usara Persistance Js por que corre sobre MySql, en algún futuro me gustaría pasar a cosas como Redis o CouchDb.

Tratare de dar la plática en una hora, para tener de 9 a 10 para hackear un rato y agregar algunas funcionalidades extras a esta aplicación.

Ademas @nRikeDiaz comento en twitter “Yay, @Siedrix es más famoso que Duane Nickull, al menos en el Hacker Room .” y yo culpo a adobe por eso.

Me gustaria compartirles el video(no se grabaron las primeras 2 o 3 slides) y los materiales de la platica, dejen cualquier duda en los comentarios y tratare de resolverla.

• El video se encuentra en el ustream del hackerroom, link directo a la presentación.
• El codigo se encuentra en mi github, link directo al código.
• Las presentaciones se encuentran en este link

El próximo miércoles a las 8 de la noche tendremos la siguiente platica, había comentado que fuera sobre localstorage y como hacer one page ajax aplications, pero varias personas pidieron que continuaremos con Nodejs, por lo cual voten que desean de platica.

• Como hacer scripts para consola.
• Ventajas para uso de cosas en tiempo real para complementar aplicaciones hechas en otros lenguajes.
• Cómo montar un MVC eligiendo distintas librerías, ya que poco a poco ha logrado tener Web Frameworks bastante completos.

Esto genera los siguientes temas en específico:

• Una pequeña aplicación de mensajería usando Web Sockets (Socket.io) con Node sobre una aplicación en php.
• Agregar un chat a cualquier página de Internet (con un par de scripts de Javascript usando Faye).
• Uso de un MVC con Express, Jade, Stylus y Cradel (CouchDb, esto podría cambiarse por Mongose (MongoDb)).
• Usar un script en terminal que permita observar un archivo de templates y parsearlo (Como hace SASS).

Si prefieren podría dar una clase de Nodejs 101 antes de entrar a estos temas.

Voy a estar haciendo deployment de los ejemplos en dotCloud mientras lo vemos en la clase.

Les comparto esta lista para que comenten sobre los posibles temas y sugieran algunos otros a través de los comentarios. Pueden sugerir nuevos temas que les interesen, estaré cerrando la recepción de temas el Domingo 17 para poder tener tiempo de preparar los temas.

Como una plática secundaria el Martes 26 daré hablaré sobre localstorage donde mostrare ejemplos para hacer caching de Ajax request y uso de la base de datos que viene con WebKit. También estoy pensando dar una plática para usar SammyJs, y Templates. Estaré abriendo otro tema para votar al respecto.

El concepto es muy sencillo, está basado en que a todas las páginas les puedas agregar .json al final. Con esto, en vez de recibir la página en formato normal, recibes la información importante en json. Además si pasas un callback por get te regresa jsonp lo cual permite pedirla desde cualquier página de Internet por medio de Javascript.

Por el momento lo tenemos funcionando en la página principal (http://www.noticiashacker.com/), en la página de nuevo (/nuevo) y en la página donde se muestran los comentarios (/noticias/*). Si quisieran tener la portada en json podrían poner http://www.noticiashacker.com/.json y si desean llamarla desde Javascript en algún sitio pueden usar http://www.noticiashacker.com/.json?callback=? Lo estaremos extendiendo a distintas páginas del sitio.

Para utilizar de manera fácil y sencilla la funcionalidad de jsonp chequen la función getJSON de jquery y este ejemplo de código que les permite tener en consola la estructura de la portada de NH en su consola de Javascript en cualquier sitio que tenga jquery:

$.getJSON('http://www.noticiashacker.com/.json?callback=?',function(data){
     console.log(data);
});

En esta página tengo un blogpost dedicado únicamente a esta función.

Entonces ¿qué podemos hacer con esto? Podemos hacer widgets para WordPress, analizar la información, desarrollar un cliente para android y tantas cosas como nuestra imaginación le interese.

Lo primero que se me ocurrió hacer es hacer un pequeño script de php que se llama cada hora y guarda en una base de datos. Además agregar una página de Internet donde se pueden pedir la portada de NH en las últimas 24 horas. La pueden consultar en http://hack.org.mx/noticias-hacker/last.php y si le agregan un callback tienen el mismo poder para llamarla desde una página de Internet (MetaAPI FTW!).

Es el equivalente a tener un archivo histórico de todo lo que sucede en Noticias Hacker para utilizarlo como deseemos.

Una vez realizado esto, decidí usar un poco de Javascript trickster y hacer un dashboard donde se presentara de manera entendible para un humano esta información. Agregue calcular diferenciales entre las posiciones, votos y comentarios de NH hora por hora. Lo pueden checar aquí y pueden ver el código en mi Github.

Estos son los primeros pasos y las primeras señales de un API completo. Los siguientes pasos son agregar .json a los perfiles y conversaciones, eventualmente tener la posibilidad de compartir noticias y votar. Nuestra imaginación es el límite.

Quedo a su disposición para preguntas sobre el API. Dejen sus comentarios aquí o en @Siedrix.

La herramienta se llama sprintloops y tiene los siguientes features para cada proyecto que tienes dado de alta:

• Tickets: Tienes la posibilidad de levantar tickets para cada tarea que requieres realizar, los puedes asignar con una prioridad y tienen un estado que puede ser abierto, en proceso, resuelta o cerrada.
• Milestones: funciona para agrupar varios tickets, cada milestone tiene una fecha para la que debe de ser resuelto.
• Un repositorio para el código del proyecto: puede ser un SVN o un GIT, tienes un bonito visualizar en el browser de tus archivos y una manera de saber las diferencias entre cada commit.
• Entregar el código a tu servidor: puedes agregar una dirección de ftp, sftp o algunas cosas más de tu servidor y con eso entregar el código a tu servidor. Tengo que confesar que funciona mucho mejor con mis proyectos de PHP que lo que realizo con Node, por que no he logrado resetear el proceso en node sin entrar al servidor por ssh.

Además de todos estos features tienes la posibilidad de tener encargados para cada tarea y tener un timeline de los cambios que van sucediendo en el proyecto, pero como trabajo solo, no he hecho mucho uso de esto.

Espero que esta herramienta les ayude un poco a mejorar su organización, en el caso de que ustedes ya tengan una herramienta que usen para organizar sus proyectos me gustaría probarla, les agradecería que dejaran un comentario con el link a la herramienta y porqué les agrada.

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.