Alpha's Manifesto

A black and white figure's thought-hive

Some best practices for HTML Canvas

by Colin Cieloha from Skilled.co

This is a guest post submitted by Colin Cieloha, who is an American author and content marketer at Skilled.co. He writes about everything that will draw his attention with a focus on the mobile and e-commerce space. When he is not writing he is spending his time traveling the globe and snowboarding. You can follow him on his Twitter at @ColinCieloha or on Linkedin.

His post focuses on performance tips regarding the use of HTML Canvas, and general best practices. Thanks Colin for this content!


So you’ve started using your canvas cheat sheet to acclimatize yourself to all the various uses of the canvas element. In the beginning you were working on some simple 2D drawings and objects, but now you’re looking to become proficient with the canvas element and see what it is capable of.

Finding a set of best practices for the canvas element isn’t always easy, since the element has been evolving for some time, and will continue to evolve. But there are a few great habits that have emerged which will help you achieve a higher level of efficiency with the element than you already have.

(Read more →)

What-now: graficando dependencias

No se resuelve con un par de líneas

what-now-dependencies

Desde hace un par de semanas estoy trabajando en lograr que el proyecto de what-now grafique dependencias entre tareas: si  una tarea depende de otra, una línea debería conectarlos. Esta tarea básica fue muy simple, pero lo desafiante fue lograr que se graficaran de forma que las líneas se cruzaran entre ellas lo menos posible.

Aquí contaré sobre este logro y sobre lo que aprendí en el proceso.

(Read more →)

VS2012, día tres

Novedades de VS2012 en Videos

Hoy tomé una aproximación distinta. Me acerqué a conocer qué hay de nuevo en Visual Studio de una manera no tan exploratoria sino siguiendo lo que Microsoft tiene para contar al respecto. Desde mi última prueba, algunos cambios de nomenclatura ocurrieron. Ahora VS11 se llama VS 2012, y Metro se llama Windows 8 UI (hasta que le encuentren un mejor nombre).

Empecé con una serie de videos de Channel 9. A continuación están los videos más jugosos sobre Visual Studio 11 (2012) y detalle resumido de cada uno.

(Read more →)

Front-end code standards

Una aproximación de best practices

Acabo de leer el artículo de IsoBar Front-end Code Standards & Best Practices. El artículo cubre de forma extensiva varias de las tecnologías utilizadas, con las sugerencias que esta empresa utiliza interamente. Cubre varios aspectos del uso de HTML (y algunas nuevas características de HTML5), CSS (y algunas nuevas características de CSS3), JavaScript, Performance, e integración cross-browser.

Personalmente no me siento de acuerdo con la totalidad de los items mencionados, pero creo que como punto de partida es muy bueno. Tienen una buena cantidad de referencias al por qué conviene hacer las cosas de la forma que ahí están explicadas, y muchas veces las razones son totalmente válidas. Muchas veces también se pesan pros y contras de cada aproximación, lo cual ayuda a tomar una decisión educada del proceso que elijamos seguir.

Soy un zorrinito front-end.

¿Por qué distintos dominios para recursos estáticos?

La razón detrás de las URLs raras...

Sabemos que el nombre no es más que un nombre y que no importa cuál sea el servidor actual en donde se están alojando los datos, pero parecería que es una práctica común de muchos sitios grandes (léase: Facebook, Twitter, Google, etc.) hacer referencia a muchos de sus recursos en dominios externos. Por ejemplo, las imágenes de Facebook se encuentran alojadas debajo de http://static.ak.fbcdn.net/ y no debajo de http://www.facebook.com/, ni siquiera debajo de http://imgs.facebook.com/. ¿Por qué?

Alguien ya hizo esa pregunta y la respuesta fue nueva para mí: hay una limitación en varios browsers (y hastas donde yo sabía, algunos sistemas operativos) que previene hacer más de dos, tres o cuatro conexiones simultáneas a un mismo hostname. De hecho, es parte de la especificación HTTP 1.1 (parece que cumplir el estándar no siempre está tan bueno, ¿no?). Ahora, si notaron, la limitación es por hostname, ¿por qué entonces utilizar distintos dominios? La razón es evitar cookies que pueden estar yendo y volviendo en cada uno de los pedidos, y para evitar eso, se puede usar un dominio extra que nunca devuelva cookies. De esa forma, sitios grandes como estos se ahorran mucho bandwidth.

UPDATE: Gracias a Exos, que claramente estaba más informado que yo en este tema, las limitaciones exactas son de tres conexiones por cada dominio y cinco para cada IP. Los distintos dominios/subdominios ayudan a utilizar CDNs para distribución de contenido con mayor velocidad. Exos está en desacuerdo (y demuestra por qué, miren los comentarios) con que las cookies sean una gran carga respecto del bandwidth. Entonces el por qué de los dominios vs. subdominios queda en duda, pero suponemos que debe estar relacionado con políticas de administración interna de cada empresa.

Soy un zorrinito performante.

Encontrando problemas de performance en SQL

Cuando la respuesta no es obvia

Otro de los foros de Stack Exchange que suelo leer es Database Administrators, en donde, como imaginarán, las preguntas y respuestas rondan sobre bases de datos y tecnologías afines. Cada tanto me encuentro con alguna joyita útil y este fue uno de esos casos.

La pregunta trataba sobre alguien que tenía problemas de performance cuando no se trataba de el acceso a disco ni del consumo de CPU. Muy apropiadamente, la pregunta se llama SQL: What is slowing down INSERTs if not CPU or IO?, y por supuesto, siendo un caso particular puede que no nos sea realmente útil la respuesta. Lo que quiero destacar de esta pregunta es el método de investigación que usaron y las herramientas con las que analizaron la performance interna del motor de base de datos. Puede ser muy revelador para nosotros trabajar con estas herramientas cuando la respuesta no es obvia y los planes de ejecución no son suficientes para detectar problemas de performance.

Soy un zorrinito performante.

22 herramientas para probar usabilidad

Compendio de herramientas para mejor usabilidad

En mashable tienen un artículo muy interesante llamado 22 Essential Tools for Testing Your Website’s Usability. Cane destacar que el artículo no sólo expone las herramientas sino que además las categoriza y da una pequeña explicación de cada categoría, para que sepamos exactamente qué queremos medir en cada caso. Las categorías son: Análisis de tareas de usuario, legibilidad, navegabilidad, accesibilidad, velocidad y experiencia de usuario.

Soy un zorrinito usable.

DotLess

Precompilación de CSS para .NET

Sé que esto no es ninguna novedad, pero lo explico para el que no lo conozca: less es un componente JavaScript que nos permite tener más flexibilidad en el tipo de cosas que podemos escribir en nuestros archivos CSS. Estos archivos pasan luego a llamarse archivos less, con una sintaxis muy parecida a CSS, pero con algunas mejoras, como la definición de variables, mixins (“funciones”) y anidamiento (namespacing?) de declaraciones. Como bien dicen entonces, less is more.

Ahora, uno de los grandes problemas con esto es que less es JavaScript, y por tanto, no está bueno que cada navegador tenga el trabajo de pre-compilar el CSS y aplicarlo a cada página. Es un poco trabajoso (dependiendo de la complejidad de nuestros estilos y nuestras páginas), pero está claro que es demasiado trabajo. Alguien preguntó si había una forma de compilar los archivos less a CSS para que cada navegador no tenga que hacerlo, y obtuvo una buena cantidad de alternativas.

Yo encontré una no mencionada, y sacada directamente de NuGet, dotless es la portación de esto mismo a .NET, con la diferencia de que está implementado en forma de HTTP Handler, lo que significa que el browser se encarga de resolver los pedidos de archivos .less y devolverlos como CSS. Mejor aún, ya puede devolverlos minimizados y cachearlos. Dije que es un paquete Nuget? La instalación en sí son 4 clicks. Muy adecuado.

Soy un zorrinito cómodo.

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: Minify

Tratando de retomar la periodicidad de los links del día, hoy quiero hablar de Minify. Minify es una librería PHP de código abierto autocontenida que podemos utilizar para minimizar, unificar, cachear y definir nombres propios para recursos que queremos utilizar y mejorar la performance de nuestro sitio.

La librería no sólo soporta el trabajo con CSS, JS y HTML, minimizándolo completamente, sino que además puede ser utilizado para minimizar recursos bajo un solo nombre, y mejor aún, también es extensible para que podamos servir cualquier tipo de contenido de cualquier otra fuente. De hecho, lo probé cacheando y sirviendo recursos desde un sitio propio cuando los recursos en realidad son leídos de un lugar ajeno. Las ventajas de eso son el poder servir todo el JavaScript/CSS junto incluso aunque no nos pertenezcan, y ahorramos pedidos, y evitamos que el cliente deba acceder a múltiples dominios.

Y lo mejor, ni siquiera tenemos que andar haciendo referencia a los nombres de los archivos (aunque es la forma más fácil), ya que podemos definir grupos con nombres y utilizarlos. Eso nos brinda la ventaja de poder jugar mucho con eso y con el dinamismo de nuestra aplicación.

Pero en fin, lo interesante es la forma en la que minimiza, y lo simple que es de usar. ¡Dénle un intento!

Soy un zorrinito minimizado.