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.

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 .

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.

$('#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.

También tiene un ejemplo usando PHP y GD para generar el thumbnail.

Pueden descargar la librería desde esta pagina y checar los ejemplos aquí.

Espero que esto les permita hacer interfaces para que sus usuarios suban imágenes de sus perfiles o compartir fotos.

Hoy tuve un rato para jugar con el templating engine, que se encuentra hoy como plug in hosteado en GitHub y la documentación ya se encuentra disponible en jQuery.com.

Consiste en 3 sencillos pasos:
Crear mi template y después compilarlo:

var markup = "
	<li><strong>${Name}</strong> (${ReleaseYear})</li>
";
 
  // Compile the markup as a named template
  $.template( "movieTemplate", markup );

Después obtener mi información:

 var movies = [
      { Name: "The Red Violin", ReleaseYear: "1998" },
      { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
      { Name: "The Inheritance", ReleaseYear: "1976" }
  ];

Renderearlo y agregarlo al DOM:

$.tmpl( "movieTemplate", movies )
      .appendTo( "#movieList" );

La información puede obtenerse por medio de ajax o jsonp. Esta manera de trabajar me agrada mucho mas que generar el dom para cada elementos y es mucho mas eficiente por que el template se logra optimizar y ademas solo se pega una vez al DOM.

En algún momento había probado Mustache.js que funciona con los {} de una manera muy similar. Tenemos la posibilidad de agregar each, if y else dentro del template, ademas de algunas cosas mas que no me dio tiempo de probar.

Espero que esto les permita realizar web apps de manera mas concisa y sencilla. Espero tener tiempo para jugar con el Data binder pronto.

Lo primero que necesitamos hacer es cargar unas librerias con NPM(Node Packet Manager) que es algo muy similiar a las gemas de Ruby. Si no tienen installado NPM, solo necesitas correr el siguiente comando en la terminal

sudo curl http://npmjs.org/install.sh | sh

Despues necesitaremos unas librerias para hacer el http request y para cortar el html.

npm install request htmlparser jsdom

Y necesitaremos tener un folder con el archivo de node que llamaremos app.js y jQuery en el archivo jquery.js. Nuestro Archivo app.js requiere llamar las siguientes variables para cargar las librerias que agregamos a node.

var request = require('request'),
    jsdom = require('jsdom'),
    sys = require('sys');

Con lo cual tendremos las variables de sistema(Node 0.2 la carga por default y el comando cambio a console.log()), request es un wrapper de la funcion httpClient de node que nos pemirte pedir una pagina y reciibir los headers y contenido de manera sencilla y jsdom nos permite crear un dom tree con el contenido de la respuesta.

En este codigo pediremos la pagina principal de Reddit, si la respuesta es distinta a un error y el codigo de la respuesta es 200(que todo esta chido), entonces crearemos objeto window(nuestro arbol de dom) y pediremos todas las ligas de los titulos.

request({uri:'http://www.reddit.com'}, function (error, response, body) {
  if (!error && response.statusCode == 200) {
    var window = jsdom.createWindow(body);
    jsdom.jQueryify(window, './jquery.js', function (window, $) {
		$('.content a.title ').each(function () {
			sys.puts($(this).attr('href'));
		});
    });
  }
});

La ventaja de hacerlo con jQuery es que podemos seleccionar elementos en la pagina de manera sencilla como lo hacemos cuando asignamos eventos o programamos cualquier cosa con jQuery de manera tradicional. Espero que esto les sirva un poco para hacer HTML scrapping de manera sencilla y que cuando haya tags semanticos con HTML5 en muchos sitios hagamos cosas fancys con ellos.

Lo cual fue posible gracias a que cargo conmigo notas de cómo realizar este proceso. Estas notas no son archivos o cosas escritas en papel; son blog posts. Llevo escribiendo este blog de manera seria alrededor de mes y medio. La razón de escribirlo es que, una vez termino un random hack o aprendo algo, ponerlo en un par de párrafos me ayuda a solidificar la idea.

Ya sea pasar de un random hack a un tutorial, o presentar un snippet de manera que pueda recordar por qué fue hecho de esta manera. En algunos casos he regresado, leído lo que hice y pensar: “cómo es posible que hiciera esto”, o en otros casos he pensado: “sí, lo que necesito es este pedazo de código y todo listo”.

Hoy fue ese caso. Llegué al post que tengo de cómo hacer un plug-in de jQuery, copié un poco de material, pasé al de la extension de Chrome, me volé el manifest y el .ico y todo estaba listo. Por lo cual, si en algún punto me paré en una silla en el devhouse y les propuse que tuvieran su blog de desarrollo para compartir con todos lo que desarrollaban y aprendían, hoy les doy una razón más para poner su blog de desarrollo.

La he probado durante el fin de semana y he encontrado algunas cosas muy agradables. Lo primero es que todas las búsquedas que hago en Google se mantienen abiertas, lo cual es excelente. También, al leer artículos en blogs, tiendo a darle click a algunas cosas y me atención se pierde, pero ahora se queda el tab abierto y puedo regresar después.

Otra cosa que me ha agradado es que mis random searches, cuando ya sé el resultado, se quedan, y entonces me empiezan a mostrar páginas en Google que probablemente no necesitaba buscar. No sé si es útil para alguien, pero es bueno saberlo.

Espero que les agrade la extensión.

El manifest es:

{
  "name": "LinkMe",
  "version": "0.1",
  "description": "I like my links my way...",
  "icons": {
		"16": "elephant16.png",
        "48": "elephant48.png",
        "128": "elephant128.png"
	},
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["jquery.js", "myLinks.js"]
    }
  ]
}

El script es este:

(function($){
	$.fn.myLinks = function() {
		$('a').each(function(){
			if($(this).attr('href').search(location.host)>0 || $(this).attr('href').search('http') < 0){
				$(this).attr('target','');
			}else{
				$(this).attr('target','_blank');
			}
		});
	}
})(jQuery);
$(document).ready(function(){
	$(this).myLinks();
})

Puntos extras para los que notaron que está empaquetado como plug-in de jQuery y podrían llamar en cualquier parte en su sitio. Espero que les agrade y, si gustan algún feature, dejen un comentario.

Posibles desarrollos: si estoy en algún sitio definido anteriormente y el tab sólo recibió un click, que se cierre después de un minuto. No sé cómo programar esto, pero ese es el chiste. Descargala aqui.

		$('#twitter').timeline({
			'user':'Siedrix',
			'count':2
		})

Con lo cual nuestra podrá construir un url que necesitamos para pedir a Twitter la información y después lo agregara el div con id twitter.

		var url = "http://twitter.com/status/user_timeline/"+ options.user +".json?count="+ options.count +"&callback=?";
		$.getJSON(url,
			function(data){
				$.each(data, function(i, item) {
					$(that).append("
	<li><img src="+ item.user[" alt="" />" + replaceURLWithHTMLLinks(item.text) + " <span class="created_at">" + relative_time(item.created_at) + " </span>");
				});
			});
		}</li>

Como parte de este plug in tenemos 2 funciones que nos permiten agregar ligas al texto que regresa Twitter y presentar la fecha de manera decente, pare tener un resultado como este.

Puedes descargarlo de aqui.