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.

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.

• 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.

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.

5) You’ve been advocating using the term “NEWT” instead of talking about HTML5, what does that mean and why not HTML5 as an umbrella term?
Clients and journalists will use “HTML5″ to mean CSS 3/video-that-runs-on-iThings/Geo-enabled applications. It’s the new “Web 2.0″. But we practitioners need to get our nomenclature straight. There are no HTML5 image transitions, just as there are no CSS semantics — and to say there are shows that you didn’t get the 2001 memo about separating style and content.

If we need an over-all term to encompass DAP, CSS 3, HTML5, Geolocation, SVG, WebGL, then let’s call it the Open Web Stack. But, because people seem to like easy-to-pronounce acronyms and cute logos, I proposed NEWT as a tongue-in-cheek way to highlight the jargon abuse I see happening.

Este término lo habia publicado anteriormente en su blog, con una sencilla frase

HTML5 != CSS 3

Y es cierto, últimamente las cosas que me atraen a investigar sobre web no son html5 o css3, si no javascript. Como hacer paginas con mucho mas ajax mucho mas facil. Entonces creo estar cambiando el termino y empezando a usar NEWT.

Node.js me resulto atractivo por una librería llamada Faye, la cual permite crear un servidor de Comet (long-polling) en unas cuantas líneas, a diferencia de su implementación que de otra manera implica instalar APE o CometD. Poco a poco he empezado a usarlo para más y más cosas, principalmente para jugar con websockets (usando Socket.io y Juggernaut), páginas de Internet en tiempo real y scrapping de páginas de Internet con selectores de jQuery. Mi siguiente proyecto será hacer un juego que sea un mash-up entre tetris y canaval usando canvas y web sockets.

Una de las más grandes ventajas que he encontrado es que puedes programar toda tu aplicación en el mismo lenguaje. La base de datos que me agrada usar con node.js, CouchDB, entrega json, nativo de javascript, mi servidor está escrito con javascript y mi aplicación está escrita en HTML, CSS y javascript. Lo cual es una gran diferencia a utilizar SQL, un lenguaje del lado del servido y después javascript del lado del cliente.
Al usar node.js he tenido algunos inconvenientes, pero cada uno me ha hecho mejorar mucho mis skills como programador:

• Por el momento la versión estable de node.js es 0.2.4 y la versión que se encuentra en desarrollo es 0.3. Yo llevo usándolo desde el 0.1.94 y me ha tocado ver cambios en la semántica, en la comunidad y poco a poco verlo crecer. Ha sido una gran experiencia, pero también es complicado trabajar en un lenguaje donde muchas veces las librería y tutoriales no funcionan por conflictos de versiones.
• Usar node.js para hacer aplicaciones web es el equivalente de tomar Apache sin ningún modulo, me ha permitido entender lo que sucede cuando un http request llega a nuestro servidor. Si no les interesa aprender esto, usen Express.js o Meryl desde el día uno.
• La documentación es escasa y existen pocos tutoriales al respeto. Me ha acercado a leer código en github, chats de IRC y Google groups, lo cual ha sido bastante ameno después de darme golpes con la pared las primeras semanas.
• Aprendí jQuery primero y javascript después. El usar node me ha permitido mejorar mucho mi javascript.
  Node.js y javascript están basado en eventos y el aprender que es un evento del lado del servidor no es algo completamente obvio. Node.js es asíncrono, por lo cual hay que entender muy bien el concepto de callback de una función como sucede cuando hacemos AJAX.

Después de 4 meses usándolo para desarrollo en mi tiempo libre, después de todos los topes en la cabeza que me he dado usándolo, me ha servido para ser mejor programador, para entender la complejidad que implica desarrollar algo a gran escala, mejorar mi uso de git y mi habilidad para leer el código de otras personas. Se los recomiendo ampliamente, en especial a todos los estudiantes de algo similar a “computer science” que tienen mucho más tiempo libre que yo.

Como parte de aprender node.js he escrito unos cuantos posts que me gustaría compartirles:

• Instalar CouchDb 1.0 y node.js en Ubuntu nos servirá para generar nuestro ambiente de trabajo. Hoy ya no es tan complicado pero en un momento lo fue. El proceso es muy similar en Mac con home brew y en Windows es posible con cygwin, pero no lo he logrado.
• HTML scrapping con jQuery y node.js. Este es un muy buen primer ejercicio. Es sencillo pero nos muestra un poco del poder de node.js.
• Node.js para WebDevelopers. En este post explico los primeros pasos que hay que tomar cuando empiecen a usar node para desarrollar una aplicación web. Está ligado a un pequeño Shell que tengo en github, el cual ya tiene log in por default, pero aún le hace falta mucho trabajo.
• Faye, node.js y aplicaciones tiempo real y Chat 101: con node.js y Faye muestran como implementar Comet con Faye hasta crear el chat más básico posible.

Espero que esto les sirva para empezar a aprender node.js y no duden en contactarme si tienen alguna duda. Me pueden contactar en @siedrix

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 .

Lo cual es un gran problema debido a que Zend cuenta con MVC y una manera muy amable de accesar a MySql. Mientras que Node.js no cuenta con MVC, ni un sistema de router, ni coneccion a la base de datos ni muchas cosas, todos son módulos que tiene que agregarse.

Hay varios micro-frameworks que permiten un uso de router, manejo del tipo de request(POST, GET) que se a realizado, entre ellos lo mas común es Express.js que esta basado en Sinatra de Ruby, yo he encontrado que Meryl es una muy buena opción.

Ademas de esto tenemos que elegir un sistema de Templating para generar html, yo uso Jade que esta basado en HAML y es compatible con Meryl.

Uso Connect creado por Sencha Labs para manejar sesión de los usuarios y servir archivos estáticos como imágenes, css y javascript.

En cuanto a la base de datos es algo mas complicado, hay que elegir que tipo de base se requiere y esto puede ser un problema ya que hay una gran gama de tipos de bases de datos desde MySQL, pasando por las NoSQL como MongoDB, CouchDB y Redis hasta llegar a NodeDirty que es una base de datos y después elegir de varias librerías que existen para ello.

Yo elegí CouchDB y ya tengo una librería que me agrada bastante, es bastante sencilla y hace todo lo que necesito. Poco a poco me he acostumbrado a pasar de una idea de MySQL a una idea de documentos como lo hacer Couch.

Como parte de ir “Cherry Picking” estos módulos he empezado a crear un shell para empezar a trabajar, por el momento lo único que hace es crear usuarios y hacer log in, pero pueden empezar a checarlo y esta en GitHub, por lo cual pueden usarlo para crear su propia versión muy fácilmente.

Si pudieran dejar en los comentarios los módulos de Node que les parecen interesantes seria muy bueno. Gracias.

La semana pasada me tope con esta platica de Paul Irish, quien tal vez no sea una persona con la que me gustaria ir a chelear un rato, pero en definitiva lo que dice es bastante util; por lo cual, me tomo mas de una session para completar el video.

En este video ensena muchas cosas utiles, pero creo que lo principal que aprender es el hecho de que el codigo esta ahi, para que lo chequemos y jugemos con el.