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.

How did you get started with Web development, and programming in general?

In high school I started taking classes, I actually got hooked by playing Starcraft back in 1999. The custom level editor has elements of event-driven asynchronous programming and I started geeking out on custom Starcraft maps. And then realized that programming is just Starcraft without the space aliens.

…

Esto me genera 2 preguntas importantes: cuál será la manera correcta de ensenarle a un niño a programar y, qué tan importante es la idea de eventos asíncronos (event-driven programing) en la programación.

El primer lenguaje de programación que utilicé fue logo writer, cuando tenía 6 o 7 años, no me preocupaba mucho la idea de programación, ciclos y funciones, solamente me interesaba hacer que la tortuguita pintara cosas y crear dibujos en la pantalla, me ayudó a generar una idea analítica desde una edad temprana. Creo que lograr introducir estos conceptos a edad temprana y poder hacerlo sin que parezca forzado es la opción correcta. Si a esa edad un niño tiene que entender el concepto de clases y sintaxis será complicado retener su atención.

La importancia de event-driven programing implica por un lado una gran simpleza que puede ser explicada con ejemplos del mundo real, y por el otro, como explica Douglas Crockford en esta plática, tiene un gran poder. En otro post, Nicholas C. Zakas explica la importancia de Loose coupling en Javascript para hacer arquitecturas escalables.

Al entender estos conceptos hacer programación en Javascript es relativamente fácil. Me gustaría poder explicarle esto un niño algún día y contribuir en alguna librería para crear juegos con puro drag&drop.

Espero que la entrevista y los materiales complementarios les parezcan interesantes y los pongan a pensar un rato sobre como hacer la programación algo divertido para niños y adultos.

En uno de los esenarios centrales me toco ver a un grupo llamado ArcAttack que hacen musica con un Tesla Coil. Lo que no vi y ahora me vengo enterando por Fora.tv es que en ese mismo escenario estuvo Adam Savage de Mith Busters explicando los pasos que el usa para resolver conflictos y ademas respondio unas cuantas preguntas.

Es una gran platica, las preguntas del final son agradables para los fanaticos del programa, pero la platica es completamente util para cualquier persona.

Se narra como la cultura hacker se inicia en los talleres de Trenes de Harvard, pasando por las primeras PCs, hablando de las aportaciones al mundo de los Hackers. Se busca definir la diferencia entre un White Hat Hacker y un Black Hat Hacker, lo cual no deberia de pasar, los buenos son hackers y los malos son crackers, pero también se hace esta distinción.

Es un documental entretenido y la historia de Adrian Lamo esta bastante interesante. Noten cuando es entrevistado es por Kevin Rose creador de Digg.

Este documental fue liberado por Pirate Bay y es disponible para todo publico que desee bajarlo.

En muchos casos utilizamos la definición de Paul Graham derivada de su ensayo “Hackers and Painters”. La definición se podría resumir: los hackers son las personas de Computer Science a quienes les gusta crear cosas.

Hoy, como parte de la plática matutina con @cesarsalazar, me pasó este link a “How to Become a Hacker“, de Eric Steven Raymond, y lo primero que empieza diciendo es “What is a Hacker?” o, en español, “¿Qué es un Hacker?”.

Algo importante de esta definición es que expande el término hacker más allá del campo de la computación, explicando que en el campo de la computación es mucho más normal encontrarlos porque su concentración es mayor.

Sin embargo, ha habido personas que al Devhouse van a hackear comida, almohadas y pastelitos. Esperemos tener un poco más de esta diversidad en futuros eventos.

What Is a Hacker?

The Jargon File contains a bunch of definitions of the term ‘hacker’, most having to do with technical adeptness and a delight in solving problems and overcoming limits. If you want to know how to become a hacker, though, only two are really relevant.

There is a community, a shared culture, of expert programmers and networking wizards that traces its history back through decades to the first time-sharing minicomputers and the earliest ARPAnet experiments. The members of this culture originated the term ‘hacker’. Hackers built the Internet. Hackers made the Unix operating system what it is today. Hackers run Usenet. Hackers make the World Wide Web work. If you are part of this culture, if you have contributed to it and other people in it know who you are and call you a hacker, you’re a hacker.

The hacker mind-set is not confined to this software-hacker culture. There are people who apply the hacker attitude to other things, like electronics or music — actually, you can find it at the highest levels of any science or art. Software hackers recognize these kindred spirits elsewhere and may call them ‘hackers’ too — and some claim that the hacker nature is really independent of the particular medium the hacker works in. But in the rest of this document we will focus on the skills and attitudes of software hackers, and the traditions of the shared culture that originated the term ‘hacker’.

There is another group of people who loudly call themselves hackers, but aren’t. These are people (mainly adolescent males) who get a kick out of breaking into computers and phreaking the phone system. Real hackers call these people ‘crackers’ and want nothing to do with them. Real hackers mostly think crackers are lazy, irresponsible, and not very bright, and object that being able to break security doesn’t make you a hacker any more than being able to hotwire cars makes you an automotive engineer. Unfortunately, many journalists and writers have been fooled into using the word ‘hacker’ to describe crackers; this irritates real hackers no end.

The basic difference is this: hackers build things, crackers break them.

If you want to be a hacker, keep reading. If you want to be a cracker, go read the alt.2600 newsgroup and get ready to do five to ten in the slammer after finding out you aren’t as smart as you think you are. And that’s all I’m going to say about crackers.

Versión completa en español.
Versión completa en inglés.

Les recomiendo que chequen todo el artículo a todos los que les interese ser un hacker. Chequen la diferencia entre ser un hacker y un cracker. Espero vernos pronto para hackear en comunidad.

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.

		// Option : Is the CSS adapted for your site ?
		// todo 	instead of hardcoding color:red here, we need a class.
		//       ok this goes deeper. instead of using style="$dayHasEvdent" we should
		//       use class="$dayHasEvent". this is true all over the place...

Lo cual es cierto, era buena idea, por lo cual me dedique a checar como resolver esto, siendo que el problema se encontraba en PHP de WordPress o en jQuery, lenguajes que dómino en cierto nivel.
La respuesta se encontraba en cambiar

.attr('style', '<?php echo $dayHasEventCSS;?>')

por

.addClass('dayHasEvent')

Lo cual no era algo que me tomara más tiempo y facilito mi vida el resto de la modificación a estas cosas que necesitaba hacer.

Después de un par de clicks encontré la cuenta de Twitter de los creadores del plug-in y les mande un reply. Para hoy en la mañana ya tenía un recado de que les mandara a cierto mail el rar del archivo. Por lo cual les mande la modificación inicial que resolvía el ToDo y la modificación que tenia para entregarle al cliente.

Esta es de las primeras líneas de código que comparto para algo que no es mi código y para algo de código que no es de personas que conozca.

Como primer paso se siente bien. Muy bien. Pero más importante es el sentido de pertenecer a una comunidad mayor que tu, una comunidad que está generando un mejor WordPress todos los días y como WordPress es una de las herramientas de trabajo que mas uso, también es algo que agradecerle a todos aquellos que han decidido generar un plug-in. Porque hoy en día me hubiera tardado muchas más horas de las que me tarde resolviendo este ToDo en crear el manejador de eventos para este solo cliente.

Ellos podrían pedir dinero, pero que mejor manera de pagarles su esfuerzo que con mas código. Como pequeña idea tengo ganas de empezar a trabajar en algún proyecto open source y conocer más gente con esta filosofía al programar. Espero acabar la chamba que tengo pronto y poder participar en esto.

Espero que esto también los allá motivado a empezar o a continuar hackeando de esta manera.

Claramente el objetivo de un javascript ninja no es matar sin ser visto, pero si es modificar el DOM como si fuera cortar bambú con una katana y hacer AJAX request con si fuera aventar estrellas ninjas. Hoy, @dfect estaba montando una versión de reddit en culter.com.mx y se necesitaba traducir 672 etiquetas para poderlo liberar en español.

Nuestro interés era traducirlo poco a poco, pero que pudiéramos liberarlo ya; sin embargo eso no era posible, necesitábamos traducir todos. El estaba checando como hacerlo del lado del servidor, cuando le comente que yo estaba checando como hacerlo con javascript, lo cual propicio su respuesta ‘whatchamean javascript?’, claramente @dfect no tenia js como posible solución, mientras que yo hacia un script que habilitara todos los campos para poderlos editar todos de golpe de la siguiente manera:

$('a').each(function(){if($(this).html() == 'edit'){$(this).click()}});

En ese momento todo quedo claro.
Después de un ratito, tenia el siguiente script:

$('a').each(function(){if($(this).html() == 'edit'){
 
tr = $(this).closest('tr');
td = $('td',tr);
original = $(td[0]).text()
 
$(this).click()
input = $('input',$(td[2])).val(original)
 
}});

Que toma el valor predeterminado de la tr[0] y lo agregaba al valor del input que queríamos editar. Tal vez no me convierta en js ninja con este script, pero si subí una cinta en mi camino a ser un javascript ninja.

Hubo un problema de espacios al pasar los valores, pero lo arregle poco después, ahora tenemos algunas etiquetas publicadas en español, y cada día tendremos más. Espero que les agrade compartir ligas con nosotros en culter.com.mx y que tengan el interés de entrenar para ser un ninja del lenguaje de programación de su preferencia.

Realmente fue fácil. Para esta extensión tenemos el manifest, jquery y un archivo con javascript de lo que queremos hacer.

En el manifest tendremos que utilizar la propiedad content_scripts con lo cual podremos declarar que al ingresar a una página haga algún tipo proceso, en este caso cargar jQuery y nuestro script.

{
	"name": "Hootsuite",
	"version": "1.0",
	"description": "Add buttons to a page.",
	"content_scripts": [
    {
      "matches": ["http://hootsuite.com/dashboard"],
      "js": ["jquery.js","optiones.js"]
    },{
      "matches": ["http://twitter.com/*"],
      "js": ["jquery.js","optiones.js"]
    }
	]
}

Después en nuestro script agregaremos un div gris hasta arriba con botones, cada botón cuando le hagamos click llenara la textarea de un texto en particular.

$(document).ready(function() {
	console.log('hello world');
	$('body').prepend('
 
');
	$('#loki').append('
<div id="bunkerBanda" style="padding: 5px; text-align: center; height: 20px; background: white; -webkit-border-radius: 3px; width: 100px;">bunkerBanda</div>
');
	$('#bunkerBanda').click(function(){
		$('textarea').focus();
		$('textarea').html('@boyzo @dfect @anibalruz @altuzar @theRealMaiMai');
	});
});

De esta manera cuando yo desee mandar un tweet a la bunkerbanda, no necesitare escribir sus nombres y no correré el riesgo de olvidar a alguien. Se podrían poner de nenas.
Esto abre una posibilidad muy chida y empezare a jugar con este tipo de hacks a sitios, sobretodo que Chrome ya tiene notificaciones desktop.

La pueden descargar de aqui.