Contenido

Cargando javascript asincronamiente

19 mar

+ 9

Hace unos meses, Steve Souders publicó un artículo realmente interesante en el que nos mostraba técnicas para mejorar el rendimiento de carga de nuestros ficheros javascript.

En el artículo nos comenta el problema de cargar ficheros Javascript en el <head /> de nuestras páginas web.

sorttable-normal-577x69

En la imagen vemos el problema, y es que hasta que el fichero no esté correctamente cargado no sigue renderizando la página lo que significa unos milsegundos (o segundos) de carga sin mostrar nada de la página. Por ello nos propone desplazar estas llamadas al pié de la página, justo encima de </body> para mostrar el contenido, imagenes y demás y posteriormente cargar el javascript y aplicarlo.

De esta forma, además de mostrar algo al usuario nos evitamos problema con el window.onload() y los problemas de intentar llamar mediante javascript a elementos aún no pintados.

Esta solución, solventa el problema visual, pero no mejora el tiempo de carga de los ficheros ya que estos se ejecutan secuencialmente uno detrás de otro. Para solventar esto nos propone 2 opciones:

Asynchronous Script Loading

Mediante el uso del tag <script />, nos propone generar dicho tag directamente en javascript, ejecutado en nuestro <head /> para que este se cargue de forma asíncrona.

<head>
<script type="text/javascript">
	var script = document.createElement('script');
	script.src = "sorttable-async.js";
	script.text = "sorttable.init()";
	document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>

De esta forma, al pasar por aquí el navegador ejecuta las sentencias y genera el tag <script /> cargando el Javascript. Mediante la propiedad text, insertamos la llamada que deseamos ejecutar mediante el sistema Degrading Script Tags de John Resig, para más información sobre el tema os recuerdo este artículo que escribí hace unos meses.

sorttable-async-529x69

Como podemos ver en la imagen, conseguimos nuestro objetivo. Cargar el script y la imagen a la vez, mejorándo el tiempo de carga (comparar con imagen anterior).

Lazy Loading

Entonces, el problema ya estaba resuelto, pero aún se podía mejorar. Para ello se ha hecho uso del método  onload() del objeto window para cargar el fichero una vez la página este completamente cargada.

<head>
<script type="text/javascript">
    window.onload = function() {
       var script = document.createElement('script');
       script.src = "sorttable-async.js";
       script.text = "sorttable.init()";
       document.getElementsByTagName('head')[0].appendChild(script);
    }
</script>
</head>

De esta forma el contenido de la página se carga antes y obtenemos unos milisegundos realmente interesantes.

sorttable-lazyload-519x69

Conclusiones

Programar puede programar cualquiera. Preocuparse por unos milisegundos de carga de nuestro javascript cuando  unos iluminados nos hacen poner imagenes de varios megas de tamaño no puede soportarlo todo el mundo ;)

Echarle un vistazo a los tiempos en la página que Steve Souders montó de ejemplo:

Actualización

Acabo de ver que hace 81 días comentamos algo sobre el tema. Sorry.

Confirmado: Internet Explorer 8 hoy, apartir de las 18:00

19 mar

+ 8

Como se iba diciendo, Internet Explorer 8.0 saldrá hoy al público, concretamente a las 18:00 hora Española.

Google presenta una nueva Beta, pero sigue sin acordarse de Mac

18 mar

+ 5

Google Chrome ha presentado una nueva beta mejorando aún más las espectaculares resultados obtenidos por las versiones anteriores.

graph1graph2

Estos gráficos nos muestran la mejoría en cuanto al rendimiento de V8 y del procesamiento de Javascript en general. Algunas de las nuevas funcionalidades harán las delícias de los usuarios y de los desarrolladores web.

  • Form autofill, posibilidad de auto rellenar fomularios.
  • Zoom, capacidad de aplicar zoom a las páginas que visitamos.
  • AutoScroll, mediante el movimiento del ratón la página se moverá en esa dirección.
  • Drag Tabs, una curiosa forma de organizar nuestros tabs.

Descargar

Si estás usando Windows XP o Windows Vista, puedes descargar la versión directamente desde aquí.

Gracias Luigi

iPhone 3.0 con SquirrelFish Extreme

18 mar

+ 0

En Ajaxian comentan hoy que la nueva versión del iPhone, la 3.0 (si la del copy&paste) también puede traer una actualización de mobileSafari con la que podriamos ver SquirrelFish Extreme.

iphone30

Para los que no lo sepan, SquirrelFish es el motor javascript que implementa WebKit y los resultados mostrados en las pruebas son realmente espectaculares.

sfx-perf

Incluso el rendimiento de este motor, puede hacer que V8 y TraceMonkey se vean ensombrecidos por él.

4a2cx550y1000

Sin duda, podría ser una noticia de la que Apple no se ha pronunciado.

Crea una galería de polaroids con CSS3 y jQuery

18 mar

+ 2

Interesante desarrollo con jQuery usando las propiedades de CSS3 que dan como lugar a este espectacular galería de Polaroids completamente dinámica. Por el momento únicamente funciona en Safari/Webkit, Chrome y Firefox 3.1.[Demo][Descargar]

Snapfit.js, convierte imagenes en puzzles con Javascript

18 mar

+ 1

Con Snapfil.js puedes convertir imagenes en puzzles… para lo que sea que lo quieras usar. [Demo y Descargar]

Sunday Morning: jQuery + Google Translator

18 mar

+ 6

Sunday Morning, detrás de este curioso nombre, hay una interesante aplicación, compuesta de la interacción entre un script en jQuery, Google Translator en un Bookmarklet que puedes ejecutar en cualquier página que desees.

sunday_morning

Simplemente hemos de personalizar nuestro Bookmarklet y almacenarlo en nuestro navegador. Una vez almacenado, bastará con ejecutarlo en cualquier página para diponer de las opciones de traducción de Google.

  • Doble-click sobre una palabra: Nos muestra la traducción como podemos ver en la imagen.
  • Doble-click + (Ctrl o Shift) sobre un párrafo: Nos reemplaza el párrafo por la traducción.

User twitter para controlar los errores de tus apps

18 mar

+ 10

Lo que no se pueda hacer con twitter no se puede hacer con ninguna otra aplicación y es que es una idea tan simple que cualquier idea se puede adaptar a él.

Lo último es usarlo como log de errores de aplicaciones, y en un principio pensé:

No creo que ayude a nadie que entre “Me voy a comer!!” y “Acabo de llegar a casa, que cansado estoy” veamos un “Error en aNieto2k – El login introducido es incorrecto”.

Pero profundizando más en la idea, puede ser interesante, tener un usuario recopilatorio en el que meter todos los errores detectados en todas tus aplicaciones. O incluso enviarte mensajes directos usando la api de Twitter.

function tweet_error ($error, $description) {
	$username = 'yourusername';
	$password = 'yourpassword';
	$status = "#$error - $description";

	$update_url = 'http://www.twitter.com/statuses/update.xml'; // http://identi.ca/api/statuses/update.xml will use identi.ca instead.

	$curl = curl_init();
	curl_setopt($curl, CURLOPT_URL, "$update_url");
	curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 2);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($curl, CURLOPT_POST, 1);
	curl_setopt($curl, CURLOPT_POSTFIELDS, "status=$status");
	curl_setopt($curl, CURLOPT_USERPWD, "$username:$password");

	$result = curl_exec($curl);
	$resultArray = curl_getinfo($curl);

	curl_close($curl);

	return ($resultArray['http_code'] == 200);
}
// Modo de empleo
tweet_error("404", $_SERVER[SCRIPT_URL]);

Si queremos enviar un mensaje directo tendremos que modificar un poco la función.

function tweet_error($error, $description, $user) {
	$username = 'yourusername';
	$password = 'yourpassword';
	$status = "#$error - $description";

	$update_url = 'http://twitter.com/direct_messages/new.xml';
	$curl = curl_init();
	curl_setopt($curl, CURLOPT_URL, "$update_url");
	curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 2);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($curl, CURLOPT_POST, 1);
	curl_setopt($curl, CURLOPT_POSTFIELDS, 'user='.urlencode($user)."text=$status");
	curl_setopt($curl, CURLOPT_USERPWD, "$username:$password");

	$result = curl_exec($curl);
	$resultArray = curl_getinfo($curl);

	curl_close($curl);

	return ($resultArray['http_code'] == 200);
}
// Modo de empleo
tweet_error("404", $_SERVER[SCRIPT_URL], "anieto2k");

Si a esto le añadimos el uso de set_error_handler() de php podemos conseguir que nos avise automáticamente de los errores que se está produciendo en nuestras aplicaciones.

function tweet_error ($num_err, $cadena_err, $archivo_err, $linea_err) {
	$username = 'yourusername';
	$password = 'yourpassword';
	$status = "#$num_err - $cadena_err ($archivo_err:$linea_err)";

	$curl = curl_init();
	curl_setopt($curl, CURLOPT_URL, 'http://www.twitter.com/statuses/update.xml');
	curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 2);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($curl, CURLOPT_POST, 1);
	curl_setopt($curl, CURLOPT_POSTFIELDS, "status=$status");
	curl_setopt($curl, CURLOPT_USERPWD, "$username:$password");

	$result = curl_exec($curl);
	$resultArray = curl_getinfo($curl);

	curl_close($curl);

	return ($resultArray['http_code'] == 200);
}

set_error_handler("tweet_error");
// Parámetros enviados por el callback de set_error_handler ($num_err, $cadena_err, $archivo_err, $linea_err)

keyTable, muevete por tus tablas con el teclado

18 mar

+ 1

keyTable nos permite movernos por las tablas de datos mediante las flechas del teclado, como si del Microsoft Excel se tratara.

keytable

Sin duda me parece una técnica muy interesante que nos permite dar a nuestras tablas un valor añadido.

¿Como usarlo?

var keys = new KeyTable();

Este código nos aplicará esta funcionalidad a todos los elementos <table /> que encuentre en la página y que contengan la class keyTable como atributo.

Compatibilidad

El script está testeado y funcionando correctamente sobre:

  • IE6+
  • Firefox 3+
  • Safari 3+ (Safari 4 recomendado)
  • Opera 9.6+

Descargar

Versión 1.0.2

20+ librerías PHP para usar cada día

18 mar

+ 14

Las librerías están ahí para usarlas. Cuando el tiempo es un factor determinante de nuestros proyectos estas nos ayudan a mitigar un poco la presión (aunque no siempre :D ) y hacernos respirar un poco más tranquilos. Por eso conocer algunas de ellas nunca viene mal:

Continua —>