Tips de Chrome para desarrolladores web

Trabajando en unas páginas web, descubrí una funcionalidad de Google Chrome que lo convierte en mi browser favorito para el desarrollo web.

Suelo retocar y probar cambios de CSS en el "inspector" de la solapa "Elements".  El problema es copiar los cambios de vuelta al código fuente: no solo es incomodo, si no que a veces me olvido que elementos cambie.

En todo este tiempo no le había dado importancia a la solapa "Resources". La usaba de vez en cuando para ver que un archivo no se se este cargando del cache y cosas por el estilo.

Ayer por casualidad descubrí que los archivos se pueden editar directamente (haciendo click en el botón del lápiz que pueden ver  en la imagen).

Pero lo bueno recién comienza: si hacen cambios estos se ven de forma instantánea en la pagina; si "graban" (Ctrl-S o Cmd-S en Mac) van a poder ver la historia en el editor que además muestra los cambios con colores.

Obviamente el archivo no se guarda en el servidor, pero haciendo botón derecho pueden hacer un "Save As..." y guardarlo.

Probablemente no sea algo nuevo, pero descubrirlo me ahorro tanto tiempo que me dieron ganas de bloggearlo :)

Nota: Firebug también tiene una funcionalidad similar, aunque sin historial de cambios y con una UI un poco más incomoda a la hora de editar.

Juego de la vida (2da parte: implementación)

Hecha la introducción sobre el juego de la vida de Conway en el post anterior, paso a contarles algunos detalles de implementación.
No voy a referirme al algoritmo: es el primero que me salió,  en cambio vamos a ver algunas cosas interesantes para aprender de JavaScript y HTML5.

Doctype 

La primer duda que me surgió a la hora de escribir el HTML5, es ¿Qué DOCTYPE uso?

Quienes recién comienzan con HTML quizás no entiendan esta duda, es una larga historia resumida de forma excelente en "Dive into Html 5": http://diveintohtml5.org/semantics.html#the-doctype .

En pocas palabras, el DOCTYPE que debe usarse en HTML5 es simplemente: <!DOCTYPE html >

Progressive Enhancement

Progressive enhancement es una técnica que consiste comenzar con el contenido, usando los tags de HTML para estructurarlo (títulos, párrafos, listas, etc) y luego ir agregando el diseño y "comportamiento" mediante CSS y JavaScript.

Pueden encontrar una buena introducción en este articulo.

Claro que en la pequeña aplicación JavaScript no hay contenido :), en fin el objetivo era aprender y practicar técnicas útiles para el desarrollo web.


CSS

Los stylesheets son sumamente engorrosos de mantener. Afortunadamente existen lenguajes de macros que permiten generar stylesheets usando constantes y funciones.
Uno de ellos es LESS, que lo elegí por dos razones: pueden usar JavaScript en el cliente para hacer pruebas y para aplicaciones Java cuentan con un servlet.
Otra alternativa para quienes usan Ruby es Sass.


Canvas y gráficos dinámicos

Para los gráficos comence usando un Canvas.
Lamentablemente el API de Canvas es en cierto sentido de "bajo" nivel: provee primitivas para dibujar directamente, pero carece de algunas abstracciones convenientes.
Luego de frustrarme (por alguna razón que no pude encontrar, los gradients en el stylesheet que uso modifican el estilo de dibujo del Canvas... algo muy engorrozo que me paso tanto Chrome como en Firefox) decidí buscar algun framework JavaScript que me facilite las cosas.
Entre los frameworks que estube mirando me encontré a gusto con raphaeljs.
No usa Canvas si no SVG (que al parecer no esta disponible en algunos browsers para smartphones).
Pero el API me pareció simple e ideal para hacer visualizaciones en HTML.


Local storage
Guardar y retornar información local en HTML5 es extremadamente fácil:

localStorage.setItem("key", "hello");
var value = localStorage.getItem("key");

Claro que este "map" es bastante rudimentario, hay otras opciones pero funcionan solo en ciertos browsers.
Aunque no lo use en este ejemplo, también pueden proveerle al browser información de que archivos mantener localmente para que la aplicación funcione offline.


Debugging y profilling

Con la ayuda de Diego Camera, conoci algunas herramientas de debugging y profiling de Google Chrome.
Tanto si usan Chrome o no, cuentan con la extensión FireBug que les agrega un API de consola extremadamente útil para hacer debugging y profiling (en Chrome no necesitan instalar una extensión para acceder a este API).

Para destacar: console.dir(object) les permite inspeccionar rápidamente el objeto pasado como parámetro.

Una cosa que me gusta de trabajar con estas herramientas es que me dio casi la misma sensación que en Smalltalk: uno puede inspeccionar y modificar en "entorno" en cualquier momento. Quizás en algún momento con proyectos como Ace (antes Mozilla Bespin/Skywriter) y  Eclipse Orion se llegue a lo que hacían los entornos de Smalltalk hace más de 20años ;-)

Para terminar....
Este post solo tiene algunas "puntas" a mirar para aprender más sobre JavaScript y HTML5.

Si están interesados en hacer algo para aprender, la implementación del juego de la vida que presente en el post anterior tiene muchas cosas pendientes, y con distintos niveles de complejidad:

• Cada celda tiene su propio event handler, se podría usar un unico event handler para ahorrar recursos.
• Las celdas se pintan haciendo click, lo cual es bastante incomodo si quieren pintar más de una celda. Se podrían cambiar los event handlers para permitirlo.
• La función de "Save/Load" solo permite grabar una instancia, se podria modificar para soportar mas de una.
• Seria útil poder insertar patrones de celdas predefinidos
• Se puede cambiar la implementación para usar el tag canvas en lugar de raphaeljs
• ... y si son unos "grosos" de los algoritmos, podrían simular que el "mundo" es infinito en lugar de hacer la simplificación que hice