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.

Si quieren quedar bien con estos hipster y early-adopters con dinero que son los usuarios de iPad, les recomiendo que compren el plugin y lo instalen en su sitio. Pero corran antes de que se acaben.

Fue hace poco más de un mes qué Andres y Jason me mostraron la idea y me invitaron a formar parte de este proyecto al que simplemente no me pude negar. Muchas horas de desarrollo y miles de líneas de código después puedo decir que ésta ha sido una de las experiencias más gratificantes en mi carrera como diseñador/desarrollador web.

Las tecnologías involucradas son lo último y lo más avanzado en diseño web basado en estándares: HTML5, CSS3 y Javascript. Es dificil de creer todo lo que es posible hacer cuando tienes permiso de ignorar por completo a Internet Explorer. Es sorprendente.

Aprendí muchísimo con éste proyecto y aunque me falta el tiempo necesario para hacer todos los tutoriales, screencasts, conferencias online, etc. que quisiera, me gustaría compartir algo de lo que aprendí con ustedes. Así que pueden preguntar lo que quieran sobre el desarrollo de PadPressed en los comentarios de este post y prometo que haré mi mejor esfuerzo por responder.

Por cierto, si quieren darse una idea de como se ve PadPressed, pueden visitar este humilde sitio desde una iPad o desde Safari 4 cambiando su User Agent.

Así que se me ocurrió que no era necesario para nada escribir el código “a mano” en el post (lo cual apesta) sino que es más fácil subirlo WordPress, adjuntarlo al post y luego usar un plugin para colorear el código. Y aqui les presento éste plugin.

Bueno, lo presento despues del salto.

CodeHere funciona de esta manera:

1. Instalas el plugin.


2. Creas tu código de ejemplo en un archivo en tu editor de código favorito.


3. Lo adjuntas a tu post usando el dialogo “Upload/Insert” (el mismo que usas para adjuntar fotos) pero no insertas nada, solo copias el nombre del archivo.


4. Lo insertas en tu post mediante un sencillo shortcode: [codehere].

Así que suponiendo que subes un archivo llamado html5.html, lo insertarás en tú codigo escribiendo lo siguiente

Y el resultado será el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE HTML>
<html lang="en-EN">
<head>
    <title>This is an HTML5 document</title>
    <meta charset="UTF-8">
</head>
<body>
    <header>
        <h1>With a header</h1>
    </header>
    <section>
        And a section
    </section>        
</body>
</html>

<!DOCTYPE HTML>
<html lang="en-EN">
<head>
	<title>This is an HTML5 document</title>
	<meta charset="UTF-8">
</head>
<body>
	<header>
		<h1>With a header</h1>
	</header>
	<section>
		And a section
	</section>		
</body>
</html>

Puedes tambien hacerlo mismo con css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.codehere p{
    text-align:right;
    margin:0;
    font-size:11px;
}
 
.hl-main {
    font-size:12px;
    font-family:Monaco, Andale mono, courier, monospace;
    line-height:18px;
    background:#234;
    overflow:auto;
}
 
.hl-default {
    color: #fff;
}

.codehere p{
	text-align:right;
	margin:0;
	font-size:11px;
}

.hl-main {
	font-size:12px;
	font-family:Monaco, Andale mono, courier, monospace;
	line-height:18px;
	background:#234;
	overflow:auto;
}

.hl-default {
    color: #fff;
}

Y hasta ruby

1
2
3
4
5
6
7
8
9

get '/say/*/to/*' do
  # matches /say/hello/to/world
  params[:splat] # => ["hello", "world"]
end
 
get '/download/*.*' do
  # matches /download/path/to/file.xml
  params[:splat] # => ["path/to/file", "xml"]
end

get '/say/*/to/*' do
  # matches /say/hello/to/world
  params[:splat] # => ["hello", "world"]
end

get '/download/*.*' do
  # matches /download/path/to/file.xml
  params[:splat] # => ["path/to/file", "xml"]
end

En este último caso, WordPress no permite subir archivos con extensión .rb (imagino que por cuestiones de seguridad) en este caso, el archivo tiene una extensión .rb.txt pero la parte de txt la ignoraremos en nuestro código.

El plugin está alojado en GitHub y pueden descrgarlo la última versión desde aquí.

Si les es de utilidad alguna, un enlace siempre se agradece.

No está de más decir que fue una fuente de frustración personal, puesto que llevaba casi mes y medio preparando todo para ese día y me daba mucha pena con las casi 200 personas que llegaron a estar viendo el evento en vivo.

Pero bueno, creo que en lo que resuelvo estos problemas técnicos, lo más indicado es entregar lo prometido. Así que grabe de manera offline la conferencia y aqui está para todos ustedes.

Si quieren/necesitan las “diapositivas” de la presentación o el código de ejemplo, pueden obtenerlo desde el sitio de Duperconf

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

Hay una cosa que odio: mezclar bloques de PHP con bloques de HTML. Será que CakePHP me ha mal acostumbrado a tener separadas las vistas de la lógica, pero de verdad me molesta código que se ve así (tomado del tema default de WordPress):

No se a ustedes, pero a mí tanto <? ?> me marea y luego se me hace muy dificil entender donde empieza y donde termina un bloque. Desgraciadamente éste tipo de programación es muy común en el mundo de WordPress, algunos pupulares temas y plugins son verdaderos spaghettis indescifrables, y esto es en cierta manera porque asi es la manera en que WP está escrito.

CakePHP, por otra parte, tiene una solución interesante para este problema (en realidad, creo que es una solución para un problema distinto, pero denme chance) en la forma del HTMLHelper, pero para tags complicados y con muchos atributos, el código se vuelve demasiado y a mi siempre me cuesta recordar el orden de los parametros.

Cuando decidí aventarme a crear temas premium para WP, una solución para éste problema fue una de las principales razones para escribir el Duperrific Theme Engine de donde finalmente extraigo lo que ahora les presento como CSML.

Ejemplo:

Como verás csml::tag() toma un selector como parametro y regresa un tag de HTML, mientras que csml::entag() toma una cadena y la envuelve con el selector designado en el segundo parametro. En el caso de csml::entag() el segundo parametro tambien puede ser un array de selectores, lo que hará que anide los selectores uno dentro de otro, empezando por el último selector del array.

Aunque la forma más facil de utilizar csml, es usando las dos funciones incluídas: t() y en() que son wrappers para csml::tag() y csml::entag() respectivamente y además imprimen el tag.

Un ejemplo más de la vida real:

Apenas estoy empezando en esto de liberar cosas que he hecho, así que espero que les resulte tan útil como a mí me ha resultado. Si la usan me avisan y si encuentran algún bug me dicen o, mejor aún, forkean el proyecto y lo arreglan.

Curiosamente no ha hecho tanto ruido como yo esperaba, jQuery, Prototype y MooTools siguen siendo las herramientas favoritas de muchos de nosotros. Pero viendo esto que están desarrollando, creo que esto puede cambiar en cualquier momento: Atlas, un IDE de desarrollo 100% WYSIWIG corriendo en el navegador

Aqui les dejo un video para qe lo vean en acción:

En fin, la demo me parece increíble y me dan ganas de crear algo así.

Video en Youtube

Uploaded with plasq’s Skitch!

Si te llegaras a encontrar en la muy hipotética situación en la que alguien te envía un gran archivo de HTML para que lo embellezcas y descubres con horror que está lleno de in-line css y casi estás al borde del llanto ante la perspectiva de tener que quitarlo todo a mano, uno por uno, a las 2:53 de la madrugada después de un día ajetreado. ¡No te preocupes! si tu editor de texto (el mío es textmate) permite hacer búsquedas/reemplazos utilizando expresiones regulares, entonces probablemente puedas buscarlas usando la siguiente:

Y listo, solo falta que las remplaces con una cadena vacía. Cabe destacar que esto solo funcionará correctamente cuando el atributo style sea el ultimo del tag como en

pero no funcionará si los atributos son al revés

Pero como este no era el caso, no me preocupé en refinar mi expresión, después de todo eran las 2:53 de la madrugada y aun tenía que terminar de diseñar una pagina para la mañana siguiente. Pero si ustedes no saben nada de expresiones regulares y quieren aprender, yo les recomiendo que comiencen por este sitio donde explican muy bien de que va todo este rollo.