Front-End Zen

Diferencia entre dom:loaded y window.onload

Uno de los métodos más potentes y usados para controlar los tiempos de carga y ejecución de nuestros scripts en la página, es el uso del Event.observe de Prototype.

Con la línea siguiente:

Event.observe(window, 'load', function() {});

Podremos ejecutar algo una vez la página esté completamente cargada. Muy útil si queremos asegurar por ejemplo que un div al que queremos interactuar está ya cargada en la página, o si queremos realizar cualquier acción tras la carga completa de la página. Esto es que están todos los elementos del DOM renderizados y todo el resto de elementos web cargados también: js, css e imágenes incluidos. Las peticiones AJAX no entrarían en este saco ya que son peticiones asíncronas y no se carga secuencialmente en el waterfall de la carga de la página.

Hasta aquí todo perfecto. Pero también tenemos otra condición que se usa mucho que es:

document.observe('dom:loaded', function(){});

Esta línea es muy similar a la anterior pero no son exactamente iguales. ¿En qué se diferencian?

Read the rest of this entry »

Optimizar y minimizar javascript en Eclipse

He encontrado un plugin de Eclipse que permite optimizar y minimizar los JS con tal solo un clic. Se llama Rockstar Optimizer & Amazon WS Tools y realmente es muy sencillo de usar. Con las primeras pruebas que he hecho he tenido muy buenas sensaciones.

Los pasos para instalar el plugin son*:

1. Ir a “Help -> Install New Software -> Add”
2. Introducir datos
   1. Name: “Rockstar Optimizer”
   2. Url: “http://update.rockstarapps.com”
3. En la lista que se carga debajo, checkear los componentes que quieres instalar (yo puse todos)
4. Ir dando al botón NEXT hasta finalizar la instalación.
5. Te pedirá que resetees el Eclipse. “Yes”.

* La versión Eclipse que he usado para instalar el plugin es “Eclipse IDE for JavaScript Web Developers. Version: Helios Service Release 1. Build id: 20100917-0705″

Read the rest of this entry »

Best practice JS: HTML usando JS o no

El otro día tuve una reunión con mi equipo, y uno de los temas que tratamos fue repasar nuestra metodología de desarrollo en Javascript. Tener clara dicha metodología para mí resulta clave ya que somos 6 programadores Front-End que estamos tocando el mismo código, el mismo framework. Y como no sigamos todos unas guidelines (guías de líneas ), mal vamos…

Para dicha reunión recopilé un par de frases que encontré por Internet y que me resultaron conceptos muy interesantes. Dicen así:

HTML que tenga sentido sin JS no debería ser creado por JS.

HTML que únicamente tenga sentido con JS debería ser generado por JS.

Es un concepto sencillo de entender pero no tan sencillo de aplicar. Entender el concepto permitirá al programador tomar decisiones más acertadas de cuándo o dónde han de generar el código HTML: directamente en la plantilla o desde JS. Incluir este concepto en la metodología de trabajo de todos evitará que de forma totalmente arbitraria nos encontremos con casos mezclados y sin coherencia.

Por lo demás, usamos – al igual que muchos – las convenciones de codificación que recomienda Crockford en su página:

http://javascript.crockford.com/code.html

Todos somos gurús del Javascript

El otro día leí en un tweet algo como que ‘hay toneladas de realmente muy buen JS allí fuera, y que no son dependientes. Sin embargo hay demasiado plugin de escasa calidad de jQuery.’

Pues yo respaldo este comentario de Thomas Fuchs. No porque haya criticado a jQuery en concreto, sino más bien la fuerte dependencia que tienen muchos desarrollador de los frameworks, pero sobretodo de los plugins.

Conocimientos: Javascript, jQuery, etc.

Mi puesto en mi trabajo me ha permitido ver a lo largo de los años un buen puñado de CV’s de front-end developers (fronteros), y algo que me hace gracia es ver cómo muchos muchísimos escriben que tienen conocimientos sólidos en Javascript, y en especial jQuery. ¡Como si fuera más importante saber jQuery que Javascript! Pues voy a ser muy directo para este tipo de personas: Que hayas instalado y personalizado un par de plugins en un blog o una web como el lightbox y otra pijadita más, no te da derecho a indicar que ya sabes programar en Javascript, oh! Que domines jQuery no te convierte en un gurú del Javascript.

A veces, nos flipamos mucho en los CV’s, y eso puede acabar jugando en contra de tus intereses. A veces conviene ser más humilde y sincero, que ser un gurú.

Nueva versión de Prototype 1.7

Hace algo más de 1 semana, salió la esperadísima nueva versión estable 1.7 de Prototype. Tras un eterno periodo con la versión 1.6.x, donde incluso parecía tener síntomas de abandono del framework, finalmente no ha sido así y finalmente publicaron esta nueva versión que incluye más de 50 mejoras importantes.

En un artículo anterior de la página oficial ya hemos podido ver un avance de todo este paquete de mejoras y bugfixes que incluía las release candidates de esta versión 1.7 de Prototype. De dichas mejoras se destacan:

• Migración al motor de selectores CSS llamado Sizzle (el que usa jQuery).
• Nuevos métodos como Element#on, que permite simplificar la gestión de los eventos (handlers); o Element#Layout, perfecto para llevar un control preciso de cada pixel de nuestros elementos del DOM.

Sin duda esta release de Prototype 1.7 es una gran noticia para los que usamos esta gran librería, y parece que el Core Team están haciendo muy bien las cosas, ya que han atacado los puntos débiles que siempre había tenido esta librería como el rendimiento con el uso de selectores CSS para controlar elementos DOM respecto a otras librerías como jQuery.

Y lo siguiente será la llegada del Scriptaculous 2!! Scripty 2 + Prototype 1.7 será explosivo!

¿Ya has actualizado tu versión de Prototype a 1.7 en tu proyecto? ¿Has notado alguna mejora?

Directorio de extensiones javascript para Prototype

Si te gusta la librería Prototype como yo, entonces debes tener la página Scripteka entre tus marcadores favoritos.

Scripteka es un directorio de extensiones y componentes JS para Prototype bastante completo y muy útil. En ella puedes encontrar una diversidad de extensiones desarrolladas por programadores de todo el mundo. Desde diferentes extensiones para crear galerías de imágenes que sigue el estilo del popular Lightbox, extensiones para optimizar la carga de los elementos de la página (LazierLoad), para validar formularios (JSValidate) y un largo etcétera.

Read the rest of this entry »

Test de velocidad de selectores para frameworks de javascript

‘SlickSpeed Selectors Test‘ es una página que testea de forma completísima el rendimiento del uso de selectores css comparando entre sí los frameworks de javascript más importantes o conocidos del mercado. El test nos reporta muchísima información sobre la performance o la velocidad de cada framework. Resulta muy interesante analizar los resultados.

Resultados del test

Según los resultados que me han salido a mí, el framework que mejor y más rápido trabaja con el uso de selectores css es  la última versión de YUI 3.1.0 (39*), y le pisa los talones jQuery (40) y DOMAssistant 2.8 (41). Si lo comparo con Prototype 1.6, que es el framework que más he usado (y uso), ha obtenido un tiempo de 58, que es claramente más alto que estos primeros, y vemos que Prototype rinde menos. No obstante, hay buenas noticias al respecto ya que la última versión  de Prototype, 1.7, que ya está ultimando su salida oficial (ya van por la Release Candidate 3), viene integrado Sizzle, el motor que usa jQuery para los selectores. Aquí explican esta integración, entre otras cosas.

Read the rest of this entry »

Detectar el navegador con javascript

Hay varias formas de detectar en JS qué navegador está utilizando el cliente para visualizar nuestras webs. En un momento dado nos puede interesar saber el navegador que está utilizando para condicionar la funcionalidad de nuestro script.

Internet Explorer

Para detectar si usa Internet Explorer sin tener en cuenta la versión:

var ie=(document.all)? true:false;
if (ie) alert('Su navegador es Internet Explorer');

Internet Explorer 6

Muchos sabemos que IE6 es un caso especial. El siguiente script nos ayudará a detectar este caso y controlarlo:

var is_ie6 = (window.external && typeof window.XMLHttpRequest == "undefined");
if (is_ie6 ) alert('Su navegador es Internet Explorer 6');

Safari

Para detectar el navegador de Apple:

var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1;
if (is_safari ) alert('Su navegador es Safari');

Google Chrome

Aunque es un navegador que cumple bastante fielmente los estándares, sigue comportándose en determinados casos de forma especial. Controlaremos este caso así:

var is_chrome= navigator.userAgent.toLowerCase().indexOf('chrome/') > -1;
if (is_chrome) alert('Su navegador es Google Chrome');

No incluyo ningún script para detectar si el navegador es Firefox ya que es un navegador que cumple al 100% los estándares, el cual nos permite tratarlo como el caso por defecto.

El objeto Navigator

En los últimos 2 casos vemos que usamos el objeto navigator que contiene la info que buscamos. De hecho podríamos usar este objeto navigator para detectar cualquier navegador, ya que navigator.userAgent.toLowerCase() nos indica el tipo de navegador que usa, la versión y más información que nos puede servir para controlar cada caso.

Haz clic aquí para ver un ejemplo del objeto Navigator.

Al hacer clic te debe de salir la siguiente información:

Read the rest of this entry »

Scripty2: Lo más nuevo de Prototype y Scriptaculous

Cualquier Front-End Developer sabe que en la actualidad disponemos de una multitud de herramientas que nos ayuda con el día a día. Para desarrollar en Javascript existen frameworks potentes, entre los más populares están jQuery, Prototype, YUI y Mootools.  Todas estas librerías son proyectos open-source y tienen detrás una comunidad importante que los apoya y los ayuda a crecer y mejorar.

Prototype vs jQuery

De todos estos frameworks, sin duda hay 2 que están por encima de los demás, almenos a lo que a popularidad se refiere, y son el jQuery y el Prototype. En este artículo me voy a ahorrar la explicación de los pros y contras de cada uno, o cual es el mejor de los 2, porque este debate ya se abrió hace mucho en Internet, hay mucha información allí fuera.

Me voy a limitar a mí propia experiencia. Y yo me quedo con Prototype. Con esto estoy llendo en contracorriente porque parece que en la actualidad, jQuery le está ganando terreno a Prototype en cuanto a popularidad. Pero la gente creo que se equivoca cuando Read the rest of this entry »

Problema de transparencia PNG en internet explorer 6 (IE6)

Un desarrollador Front-End tarde o temprano acaba enfrentánose a uno de los múltiples problemas que tiene IE6, y en este caso se trata de las transparencias en las imágenes PNG. Lo normal es recurrir a la alternativa de las imágenes GIF, pero en ocasiones, la calidad no acaba de alcanzar la misma que un PNG. Por suerte, en la actualidad existen distintas librerías que solucionan esta incompatibilidad y nos hacen la vida un poco más fáciles.

Cito algunas de las librerías que he utilizado personalmente y que corrigen la incompatibilidad de Internet Explorer 6 (IE6). Todos ellos son válidos y funcionan a la perfección, por tanto elegir un script es más una elección por gusto que por otra cosa:

PNG fix

Correcto script que habilita las transparencias de PNG en IE6.

http://homepage.ntlworld.com/bobosola/

Unit PNG fix

Otro script que soluciona el problema, esta vez todo en menos de 1kb!
http://labs.unitinteractive.com/unitpngfix.php

SuperSleight

Esta vez un script salido de uno de los sitios web de referencia para todo Front-End o diseñador web.

http://24ways.org/2007/supersleight-transparent-png-in-ie6

IE7-js

Alojado en code.google.com, un script completo que además de corregir el problema de la transparencia, corrige otros problemas con IE6 y versiones anteriores.

http://code.google.com/p/ie7-js/

He probado todas estas librerías y todos hacen más o menos lo mismo:

Le aplica un “filter”  a la imagen (progid:DXImageTransform.Microsoft.AlphaImageLoader(...)). Es un filtro que solo admite IE6 y lo que hace es habilitar las transparencias de la propia imagen.

Cada librería lo aplica a su manera, y su aplicación también varía ligeramente. En mi trabajo actual empecé usando Unit PNG fix pero he acabado usando IE7-js ya que me interesaba el resto del paquete.