Alpha's Manifesto

A black and white figure's thought-hive

Link del día: Trucos de consola de Chrome

De parte de la gente de HTML5 Rocks! tenemos un pequeño post con dos videos cortos (7 minutos cada uno), llamado 7 minute videos: Javascript Console Protips & newish DOM APIs, en donde Paul Irish nos cuenta sobre determinados truquillos que podemos utilizar para debuggear JavaScript, mayormente en Chrome (aunque dos de los trucos se aplican a Firefox y a Opera).

Personalmente no me encuentro desarrollando mucho JavaScript pero creo que adoptaré alguno de estos trucos, especialmente el $0 que hace las cosas terriblemente más fácil, junto con keys(), console.time() y copy(). A ver si puedo ponerlos en mi navaja suiza diara.

Soy un zorrinito loggeado.

Link del día: Reportando bugs de browsers: qué, cómo y por qué

Este artículo de Smashing Magazine habla muy en detalle sobre la comunidad de desarrolladores de navegadores (una buena gran mayoría de ellos) y cómo es bienvenido el feedback de los usuarios para mejorar los navegadores mismos.

Explica un poco de qué forma se puede encontrar o aislar algo que creemos que es un bug, que también sirve para método de solución de problemas: una vez aislado el comportamiento no deseado siempre podemos idear un workaround  (que es, de hecho, como surgieron muchos de los hacks vigentes para hacer las cosas funcionar cuando no funcionan como deberían). El resto del artículo nos explica cómo reportar este comportamiento, bajo las líneas básicas de: ver si realmente es inesperado lo que ocurre, ver si no fue reportado antes, y cómo hacer un buen reporte de bug.

Allí están también los links a los bugtrackers de los navegadores más importantes: Internet Explorer, Firefox, Opera, Webkit (Safari/Chrome) y Chrome. (Chrome también tiene otro para el sistema de Javascript, V8).

Para los investigadores, también es interesante poder revisar esos links para ver el estado de avance y noticias de implementaciones de cada navegador.

Soy un zorrinito buggeado.

Link del día: HTML5 Speech input

Esta noticia la vengo guardando desde Marzo, así que ya de nueva no tiene demasiado. Pero no deja de ser interesante. Resulta que para una de las versiones beta de Google Chrome (que de hecho, ya no es más beta), hay un nuevo attributo para los elementos input de HTML5 que básicamente permite obtener reconocimiento de voz. Este atributo, debería hacer que el navegador automáticamente reconozca nuestra vos como para rellenar un campo de texto, permitiendo búsquedas más rápidas o entrada de datos más correctas (si es que el usuario tiene problemas con la ortografía).

Por supuesto, como con todo reconocimiento de voz, hay que ver qué tal funciona. Yo estuve jugando un poco con el que ya está disponible en Google y parece funcionar bastante bien (en inglés). Por supuesto que con palabras raras tampoco funciona bien, parece estar muy basado en un diccionario… pero es una muy buena aproximación. Además de innovador, es en cierta forma divertido.

Soy un zorrinito reconocido por voz.

Link del día: Performance HTML5, CSS3 y DOM, Parte 1: Intro

Acabo de ver dos videos de Paul Irish, del grupo de Google Chrome. Uno de ellos era Google Chrome Developer Tools: 12 Tricks to Develop Quicker. Aquí básicamente nos da una explicación de los Chrome Developer Tools con algunos trucos que no son tan sabidos. Interesante y útil.

Sin embargo, el video que más interesante me resultó es uno de media hora llamado HTML5, CSS3 and DOM Performance.

Este video es terriblemente informativo sobre varias temáticas. Quiero en el futuro poder dedicarle un poco más de tiempo a cada una, pero mientras tanto, dejenmé hacer un resumen de las cosas que se tratan en el video:

  • Reflows: primero se habla de este concepto, relacionado a las operaciones de repintado que un navegador debe realizar. Nos cuenta el caso de Chrome y de Safari (WebKit) y de ciertas operaciones y trucos para evitar. Nos muestra cómo efectivamente podemos monitorear y mejorar esa performance.
    Herramientas relacionadas: Comandos ocultos de Chrome.
  • Animaciones CSS con aceleración por hardware: Mucho del trabajo de repintado puede hacerse de forma tal que el navegador termine delegándolo al GPU de mando en la máquina cliente. Esto trae experiencias muy distintas, y puede forzarse con pocos truquitos, que en este momento son básicamente hacks. Incluso podemos ver el efecto en ciertos dispositivos móviles.
    Herramientas relacionadas: Improving the performance of your HTML5 App (artículo), Elements Complete (demostración)
  • Animación y web workers: Mucho del trabajo que nuestro javascript hace no tiene por qué estar en el thread principal de pintado de la página, esto lleva a las páginas frizadas y funcionando lento. Para eso podemos delegar nuestra ejecución a web workers, que tienen una buena performance y es amigable con la batería.
    Herramientas relacionadas:  WebGL Field (demo)
  • Benchmarking: relacionado a todo lo anterior, necesitamos de una forma objetiva y poderosa de poder probar qué elementos son mejores. El ejemplo que Paul menciona es: realmente es más performante usar el === en lugar del == en JavaScript? Ahora tenemos la forma de probarlo fácilmente.
    Herramientas relacionadas: jsPerf (herramienta de test cases para benchmarking), BrowserScope (versión colectiva de pruebas en browsers), Benchmark.js (librería JavaScript para benchmarking y testing).
  • Build scripts: la posibilidad de automatizar el generado de los sitios puede ahorrar muchos problemas en la performance. Así como alguna vez hablamos de mod_pagespeed, Paul menciona otras alternativas.
    Herramientas relacionadas: HTML5 BoilerPlate (librería de startup para generar aplicaciones bajo buenas prácticas).

Espero poder ahondar en cada uno de estos en el futuro. Estén atentos!

Soy un zorrinito performante.

Link del día: Firefox 4 + Mozilla demos

Ayer salió a la luz la versión definitiva de Firefox 4, y en unas 24 horas ya logró tener más de 6 millones y medio de descargas. Un navegador popular, sin dudas. Podemos bajarlo y al mismo tiempo ver el movimiento en tiempo real de descargas a través de Firefox 4 Download Stats.

Cabe aclarar que Firefox 4 viene totalmente renovado, al menos en su interfaz gráfica y mucho de su funcionamiento interno. Las características que Firefox siempre ofreció permanecen ahí, y hay varias otras más. Por otro lado, su interfaz es mucho más limpia y minimalista (parece que todos los navegadores están siguiendo una tendencia que Chrome marcó) y por supuesto, soporta muchos de los nuevos estándares que se están desarrollando para la nueva web.

Fue de casualidad, gracias a un post en Twitter, en donde encontré un dashboard de ejemplos y características de HTML5 y tecnologías relacionadas, llamado HTML5 & Friends, en donde podemos ver muchas de las nuevas características en funcionamiento, y tener una explicación pequeña que podemos extender. Por otro lado, la web de Mozilla Demos (llamada Web O’pen Wonder) contiene muchos ejemplos e implementaciones de las cuales podemos aprender.

Soy un zorrinito actualizado.

Link del día: Herramientas para Chrome

Aquellos que tenemos que ver con el desarrollo web muy seguramente nos hemos apegado mucho a nuestro querido Firefox, gracias a la enorme cantidad de herramientas que la comunidad tiene para poder desarrollar. Muchos de nosotros también han encontrado en Chrome una alternativa muy interesante y hasta preferible, pero siempre tuvimos el problema de que la cantidad de extensiones para desarrollo era muy limitada.

Por suerte, Chrome mismo ha evolucionado al punto de poseer unas herramientas de desarrollo integradas muy profundas e interesantes, sin necesidad de ninguna extensión. Pero aún así, el mercado de extensiones para Chrome ya ha crecido bastante, y es hora de ver alguna de las opciones que tenemos para personalizar el uso que le damos en nuestra tarea de desarrollo.

Rosa Gutiérrez fue quien me compartió a través de Google Reader esta enorme colección de extensiones para desarrollo en Chrome llamada 40 Useful Google Chrome Extensions for Web Designers. La verdad no las he contado, pero creo que son más de 40. Aunque no lo fueran, realmente valen la pena, les recomiendo a los usuarios de Chrome que le echen un vistazo, muy seguramente encontrarán algo de su agrado.

Soy un zorrinito cromado.

Link del día: Proyectos ágiles de verdad

No sé si alguno de ustedes está subscripto al Dev Channel de Google Chrome, en donde pueden obtener features nuevas más rápidamente, por supuesto, sabiendo que no están del todo probadas. Si están ahí, sabrán que la cantidad de cambios y updates es realmente mucha, y que a pesar de todo eso, el proyecto sigue creciendo y trabajando en el ambiente, uno se pregunta:

¿Cómo hacen para mantener ordenado un proceso tan dinámico?

Esa pregunta me fue respondida por un link provisto por @Woork, quién nos otorga una presentación sobre el Ciclo de Vida del proyecto Chrome, presentado por parte de Anthony LaForge, llamado Chrome Release Cycle. En esta presentación podemos ver los distintos problemas a los que se enfrentaron al momento de manejar tiempos y los distintos problemas de la programación común, y cómo fueron adaptando la estrategia para lograr un punto más dinámico y accesible.

Quienes estemos subscriptos a esa rama de desarrollo sabemos ahora que funciona, y que da resultados visibles.

Soy un zorrinito apurado.

Link del día: HTML5 Test

Ya hace tiempo venimos mencionando lo nuevo que se viene con HTML5 y CSS3, de cómo van a hacer más fácil la vida de los usuarios de internet, de cómo van a hacer más fácil la vida de los desarrolladores y diseñadores web, de cómo van a volver a la web un entorno semántico de información, etc. Sabemos también que aunque estamos algo lejos todavía de que el estándar se apruebe completamente, muchos navegadores ya han comenzado a implementar sus características. Si mal no recuerdo, fue noticia hace bastante tiempo ya que Firefox comenzó a aceptar los tags <video> de HTML5. (Aunque ya parece que cambió el standard y seguramente tengan que cambiar la implementación de Firefox.)

Si queremos verificar cuánto acepta de estas nuevas tecnologías nuestro navegador en cuestión, no tenemos más que visitar la página del HTML5 Test, que nos dará un puntaje para nuestro navegador, dependiendo en la cantidad de elementos que soporte. Yo ando usando Chrome 5.0 y me da un puntaje de 142. Y a ustedes?

Soy un zorrinito 5.

Link del día: Chrome Inspector

Para aquellos que usamos Google Chrome (Safari también aplica), seguro ya sabemos que tenemos una sección llamada Developer Tools en donde podemos trabajar con el código fuente de una página, los estilos CSS y demás. Pero si es que no le hemos prestado mucha atención (yo no lo había hecho), tenemos muchísimas herramientas detalladas para trabajar con los sitios y no estaría bueno desaprovecharlas. Para las últimas features, aclaro, hace falta la versión del Developing Channel de Google Chrome, o el nightly build de Safari. De todos modos, tarde o temprano serán parte de alguna versión estable.

Con lo primero que me crucé es con el blog de BogoJoker, uno de los desarolladores involucrados en este tema, en donde cuenta varias características amigables al usuario del visor de HTML, del visor de propiedades CSS, y cómo editarlos. También trabajaron un poco con el resaltador de sintaxis para esas secciones, y otros arreglos menores. De ahí él linkea al blog de WebKit en donde podemos encontrar información más detallada sobre varias de sus características y cómo usarlas: la interfaz, la consola, cómo editar HTML, cómo editar CSS, cómo usar el panel de Recursos, cómo debuggear Javascript, cómo hacer profiling de sitios (Chrome agrega snapshots de memoria), cómo jugar con las bases de datos de HTML5, y la búsqueda.

Sabemos que todo esto está en desarollo y todavía está lleno de bugs, pero eso no hace que sea terriblemente útil y que podamos sacarle provecho. Para más ayuda sobre cómo hacer ciertas cosas, check out the enclosed instruction book, o checkeen los resultados de Youtube.

Soy un zorrinito cromado.