Alpha's Manifesto

A black and white figure's thought-hive

Link del día: debugCSS

Como todo elemento del desarrollo web, los CSS también pueden tener errores, y nuestra forma de utilizarlo puede no ser la óptima. Hay muchas herramientas que nos permiten ver cómo podríamos mejorarlo, pero hasta ahora no había visto ninguna que se enfocara directamente en corregir las buenas prácticas (junto con los errores, claro).

Entonces me crucé on debugCSS, un proyecto en forma de bookmarklet que nos da feedback sobre la página que estamos viendo. Al ser un bookmarklet, no toma más que un click y una arrastrada para instalarlo, y lo podemos usar tanto en páginas web como locales. Estuve probando varias páginas y de verdad que aunque no tenga errores graves, siempre estará dando sugerencias de como hacer el CSS y el HTML, más acorde, y no mancharlo con JavaScript inline.

En fin, otra de las herramientas útiles al momento de hacer desarrollo web.

Soy un zorrinito criticón.

Link del día: BuiltWith

BuiltWith es un servicio web que nos proporciona información sobre las tecnologías que soportan un determinado sitio. Más allá de sólo describir los módulos básicos de Apache y el tipo de servidor sobre el que se encuentre dicho sitio, nos comenta sobre varios tipos de utilización de contenido, como CDN, codificación, qué tipo de frameworks se están utilizando, qué tipo de CMS si se puede reconocer, librerías JavaScript, información sobre HTML si se encuentra disponible, y un poco más.

Nos dejan investigar también sobre otros sitios que usen la misma tecnología, pero no lo veo realmente útil a menos que queramos comparar determinados sitios que usen plataformas algo raras. Por ejempo, una búsqueda entre qué sitios usan WordPress no aportará nada interesante, una búsqueda entre qué sitios utilizan codificación UTF8 creo que no sirve de mucho. De todos modos, este tipo de reportes son pagos, pero la información general no lo es.

Soy un zorrinito curioso.

Link del día: Combres, optimización ASP.NET

Justo ayer, rondando la medianoche, JH me envió por email un link a este proyecto llamado Combres 2.0, una librería para optimización de sitios ASP.NET. Recuerdan el caso de Minify para PHP o mod_pagespeed para Apache, este es el turno de ASP.NET.

Esta librería nos permite incluir recursos haciendo uso de ella, de forma que al momento de generar los links también se hacen referentes a una dirección que esta librería manejará, y se encarga del cacheo, compresión y minimizado de los documentos. La reducción de HTTP requests es, por lejos, una de las ganancias más útiles y menos costosas de lograr que nos ofrece.

En el sitio de CodeProject (en donde se encuentra alojado) se pueden ver varias de las aplicaciones y usos que tiene. Veré si prontamente puedo comenzar a utilizarla.

Soy un zorrinito optimizado.

Link del día: Presentaciones JavaScript

Muchos me felicitaron por cómo se veía mi presentación sobre una pequeña encuesta sobre redes sociales, aunque la verdad los créditos no me los debo llevar yo sino Prezi… pero lo bueno es que todos podemos tener algo así en nuestros sitios sin usar ningún servicio de terceros. Deck.js (lo encontré en CSS Tricks) es una librería JavaScript que utilizando HTML5 nos permite crear presentaciones con una visualización muy atractiva (lo cual también ayuda a llamar la atención y transmitir nuestro mensaje).

Deck.js nos permite crear una variedad de animaciones y formatos de presentación, y lo bueno es que nos ofrecen distintos downloads dependiendo de nuestro nivel de habilidad con HTML/CSS/JavaScript, para que estemos cómodos utilizándolo.

A ver quién me muestra la primera implementación que hayan hecho con deck.js así lo coloco aquí!

Soy un zorrinito animado.

Link del día: HTML Code Quality

Sabemos que medir numéricamente la calidad de cierto código no es nada fácil, tratesé del lenguaje que se trate. Siempre hay muchos factores que no afectan en nada a lo funcional, pero que sí afectan a qué tan legible es el código, qué tan mantenible es, y qué tanto puede evolucionar de forma “grácil” sin ser un peso para el futuro de los programadores.

HTML y CSS son un caso particular, porque a diferencia de otros lenguajes, no son lenguajes de programación, pero sí se hacen aplicaciones con ellos. Alguna vez alguien me dijo que sí deberían considerarse lenguajes de programación porque aunque no fueran instrucciones, de alguna forma estábamos trabajando con datos, su procesamiento, y su salida… pero esa es otra historia.

Al momento de medir la calidad de estos lenguajes, existe un problema extra: ya no hay funcionalidad que medir, sólo el código en sí (porque no tienen interacción directa como un lenguaje que se ejecuta). Entonces el desafío se pone más interesante. Google ha atacado este problema y ha escrito sobre como validar y trackear la calidad del código de sus páginas. El artículo en sí no es ni extenso ni detallado, pero despierta algunas ideas que pueden ser útiles para profundizar en este tema. Un punto muy importante es, cualquiera sea el criterio que se tome, trackearlo. De esa forma podemos ver si hay mejora o no… o si el criterio realmente nos dice algo o no.

Soy un zorrinito de calidad.

Link del día: HTML5 Front End Framework

Para todos aquellos que necesitábamos una forma de fácilmente comenzar con trabajos en HTML5, tenemos la opción de comenzar con algo ya estructurado sobre lo que podemos hacer nuestras modificaciones a gusto.

Me he encontrado principalmente con dos opciones muy interesantes. La primera de ellas es HTML5 BoilerPlate, del cual habíamos hablado algún momento en el pasado. Básicamente es un template que podemos utilizar para arrancar rápidamente con la configuración básica de una aplicación HTML5. Ya incluye un poco de configuraciones para cacheo, optimizaciones para mobile, un framework de testing y varias cosas más.

La segunda opción es G5 Framework, que bajo el mismo concepto tiene también varios elementos sobre los que podemos pararnos para impulsar nuestro proyecto. Este además ya tiene una buena cantidad de librerías incluidas con lo que podemos inmediatamente comenzar a constriur sobre ellas, y sobre un framework CSS, útil como siempre.

Quisiera ver qué trabajos se logran con estos frameworks.

Soy un zorrinito HTML5.

Link del día: En defensa de los hacks CSS

Para mi sorpresa, me encontré con un artículo de Mathias Bynens llamado In defense of CSS hacks – introducing “safe CSS hacks”. Él habla e introduce el concepto de los hacks CSS. Permítanme hablar un poco sobre su idea.

Él menciona que los CSS hacks son básicamente comportamiento especial que podemos invocar en cada navegador, algo que a veces es totalmente deseado, y no tiene por qué ser un problema o una mala práctica, sino que puede ser usado para muchas cosas. El uso más común que se le ha dado hoy en día es hacer “tweaks” específicos para la forma de renderización de cada navegador/versión y entonces lograr una visión consistente a lo largo de todos los navegadores.

Sin embargo, decir que tenemos control sobre el estilo de cada navegador y/o versión no necesariamente quiere decir que lo utilicemos sólo para lograr una vista homogénea. De hecho, gracias a ellas podemos utilizar determinadas características que hacen la exploración en un determinado navegador más natural dentro de las capacidades del mismo.

Esto, combinado con sentencias condicionales, hace que podamos tener mucho control sobre lo que el navegador utiliza de nuestro código.

Los dejo con el último ejemplo que el artículo plantea:

[code lang=”html”]
<!–[if lt IE 9]><html class="lte-ie8"><![endif]–>
<!–[if gt IE 8]><!–><html><!–<![endif]–>
[/code]

[code lang=”css”]
.foo {
color: black;
}

.lte-ie8 .foo {
color: green; /* IE8 and older */
*color: blue; /* IE7 and older */
_color: red; /* IE6 and older */
}
[/code]

Personalmente no me encuentro de acuerdo con esta propuesta, pero veo que tiene sus fundamentos. ¿Ideas? ¿Críticas?

Soy un zorrinito hackeado.

Link del día: Mockups iPhone, funcionales!

Acordándome de cuando hablé de Create Free iPhone Apps, quería charlar sobre esta aplicación web llamada Mokk.me, una aplicación que nos permite visualmente construir elementos de un diseño gráfico para iPhone y personalizar esos elementos a gusto.

Cabe aclarar que todo este sistema funciona en nuestra máquina, quizá la única funcionalidad del servidor es guardar URLs de diseños en particular para luego poder modificarlos. El UI es bastante completo y fácil de utilizar, prácticamente todo se puede hacer con un click, así que es una experiencia muy intuitiva.

Mejor aún, del resultado que tengamos, sólo tenemos que visitar un link para verificar en nuestro iPhone cómo se ve, y luego de eso ya podemos guardar ese HTML para utilizarlo en nuestro producto. Más simple, quizá sólo sea la otra aplicación, que hace todo por nosotros.

Soy un zorrinito mobile.

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: Live.js

Para diseñar y trabajar sobre HTML, mientras más atajos tomemos, mejor. Mucho del trabajo es repetitivo, y cuando queremos aplicar estilos, la cantidad de idas y vueltas de una ventana a otra es innumerable, por lo menos, hasta que logramos la perfección del diseño original.

Ya alguien tuvo la idea de circunvalar ese problema y surgió Live.js, un script más cerca a diseñar en el navegador, que automáticamente detecta cambios en el HTML, el JavaScript, o el CSS y los aplica a la página actual.

El proyecto surgió como una desviación desde BackFire, un sistema un poco más complejo (cliente-servidor) que nos permitía guardar los cambios en CSS que hacíamos con cualquier navegador inline (como FireBug, WebKit developer toolbar, etc.).

El punto es que Live.js automatiza todo eso y nos permite trabajar en los archivos de forma directa y ver los resultados en el navegador de forma transparente. Imaginen utilizarlo en conjunto con dos monitores. La productividad se eleva una muy buena cantidad.

Soy un zorrinito en vivo.