Si conoces bien JavaScript no te costará nada de trabajo aprender CoffeeScript y muy probablemente agradecerás lo elegante y simple de su sintáxis, la cual se inspira mucho en Ruby o Python. Pero CoffeeScript no se trata solo de quitar parentesis y corchetes a JavaScript, sino que el lenguaje incluye bondades como comprensiones y herencia pseudo-clásica. Además de que el código generado está tan optimizado no es de sorprender que a menudo el JavaScript resultante es mucho más eficiente que uno generado a pesar de seguir siendo bastante legible.

Habrá una inevitable y comprensible resistencia al cambio de parte de algunos desarrolladores, pero la importancia de CoffeeScript es evidente para cualquiera que esté prestando atención. Personalmente, empecé a experimentar con CoffeeScript a finales del 2010 y ahora se ha vuelta una herramienta indispensable en mi workflow.

Si los ejemplos en la documentación oficial no te bastan, el mejor recurso para aprender a entender CoffeeScript es el excelente tutorial de PeepCode.

Como ustedes seguramente saben, el nuevo Twitter es una aplicación ligera construida íntegramente con Javascript/HTML/CSS sobre la API misma de Twitter. En aplicaciones Ajax, es común el uso del hash (lo que sigue del # en la url) para denotar estado y para preservar el uso de los botones atrás y adelante del navegador así como hacer links permanentes.

Éste uso del hash es más o menos un hack, puesto que no fue diseñado para eso sino para enlazar secciones dentro de un documento (como este enlace a la forma de comentarios de este post. Pero este nuevo uso, sin embargo, se ha vuelto tan popular que existen frameworks enteros desarrollados alrededor de esta idea, como Sammy, que inspirado en Sinatra, usa el hash para simular rutas.

Rsuelto eso, aún quedaba el misterio uso del (!) bang (Nosotros le llamamos signo de admiración, lo cual es aburrido, asi que perdonen si uso el término gringo). ¿Qué ventaja tiene usar twitter.com/#!/mentions por sobre el más clásico twitter.com/#mentions? para averiguarlo, desempolvé mi cuenta y pregunté en Quora (requirer registro).

Para mi sorpresa, un empleado de Twitter se tomo la molestia de resolver mi duda.

Yo trabajo en Twitter. Este esquema fue elegido deliberadamente para estar alineado con la especificación de Google para indexar applicaciones web AJAX.

¡Problema resuelto! La especificación a la que se refiere—que yo noconocía— es una especificación de Google para que las aplicaciones AJAX puedan ser indexadas por sus robots (alerta SEO).

En corto, la solución funciona de esta manera: el crawler encuentra una URL AJAX bonita (esto es, una URL que contiene un fragmento #! en el hash). Éste entonces hace una petición por el contenido de esta URL a tu servidor en una manera un tanto distinta. Tu servidor web regresa el contenido en la forma de un snapshot HTML, que es entonces procesada por el crawler. El resultado de búsqueda mostrará la URL original.

La especificación completa está publicada en éste sitio: Making AJAX Applications Crawlable

Ahora espero que sepan algo que antes no sabían, porque como dicen, saber es la mitad de la batalla.

¿Les ha pasado? Están de suerte, pues descubrí una manera muy simple de solucionarlo con solo un poquito de jQuery.

Primero, asumo que están desplegando estilos exclusivamente para iPhone (y otros dispositivos móviles) más o menos así:

Cómo ven, estoy aplicando una propiedad max-width de 300px (nota al margen: estoy utilizando max-width ¿No es hermosa la vida cuando no hace falta pensar en Internet Explorer?) lo cual funciona bastante bien suponiendo que el dispositivo siempre este en modo vertical (mi forma favorita de navegar en el iPhone/iTouch) pero si por alguna razón el usuario pone el aparato en formato horizontal, entonces el ancho de la pantalla pasa de 320px a 480px, donde nuestras imágenes se ven demasiado pequeñas.

Una cosa notable, sin embargo, es que cambiar de vista vertical a horizontal y viceversa lanza el evento resize del navegador, el cual podemos cachar desde javascript para redimensionar nuestras imágenes.

¿Existe la palabra “redimensionar”?

Bueno, este es el pequeño snippet de jQuery que yo utilicé para redimensionar las imágenes acorde al tamaño del viewport. Espero que les sea de utilidad:

Nótese que lo que cambiamos con jQuery es la propiedad max-width y no width, así evitamos que, si la imagen ya es más pequeña que el viewport, ésta se deforme.

P.D. Aún queda un problema que no se como solucionar: No es posible acercarte a las imágenes haciendo el gesture de pinch/zoom. Si tienen la respuesta a este enigma y quieren compartirla, por favor haganlo.