Contenido

SWYM, di lo que sientes

2 ene

+ 0

De los editores WYSIWYM (What You See Is What You Mean) aparece SWYM ( Say What You Mean) un pseudo lenguaje de programación desarrollado sobre Javascript para facilitar algunas tareas.

// Ejemplo de uso
SWYM.Eval(codigo);

Int.toBits: [1,2,4,etc..<=this].Where{(this/it)%2 >= 1};
89.toBits
// [1,8,16,64]

List.MyPrefix: LazyList(.length)
{
 [this.at(0..it)]
}

each-MyPrefix-of[100..106]
// [100]
// [100,101]
// [100,101,102]
// [100,101,102,103]
// [100,101,102,103,104]
// [100,101,102,103,104,105]
// [100,101,102,103,104,105,106]

Como podemos ver, no algo que vayamos a usar en nuestros proyectos, pero resulta un experimento realmente interesante que muestra el potencial de Javascript, aunque el mismo autor comenta que lo implementó pensando en que funcionara, no en que funcionara rápido. Sin duda un gran ejercicio de programación.

Rendimiento extremo de Javascript

10 nov

+ 10

En uno de esos momento de querer pulir scripts en Javascript me pegó la neura de probar diferente formas de hacer lo mismo sacando el cronómetro y midiendo tiempos para ver que era más eficiente y que lo era menos.

Al final, por esas cosas del destino, me tuve que ir al final terminé olvidándome de lo que quería hacer. Hasta ahora que me he encontrado con esta presentación de Thomas Fuchs (author de Script.aculo.us). En ella (la recomiendo) hace exáctamente lo que yo quería hacer, medir los tiempos de ciertas tareas cotidianas y compararlas con alternativas que nos ofrece el mismo resultado.

Algunos de los resultados muestran cosas realmente interesantes:

Rendimiento

Objetos literales frente a clásicos

// Más lento
function literals(){
 var a = [], o = {};
}
// Más rápido
function classic(){
 var a new Array, o = new Object:
}

En la presentación se ven los resultados sobre los diferentes navegadores y podemos ver como de usar uno u otro en Google Chrome podemos multiplicar por 2 el tiempo de proceso.

Loops

Los loops tambien muestran unos resultados curiosos:

var test = '';
for (var i = 0; i<10000; i++)
 test = test + str;

var test = '', i = 10000;
while(i--) test = test + str;

Entre los dos anteriores, no se muestran diferencias en los resultados devueltos.

// Más lenta
function normalLoop(){
 var i = 60, j = 0;
 while(i--) j++;
}

// Más rápida
function unrolledLoop(){
 var j = 0;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
}

Tambien vemos que muy caro hacer un loop, en Firefox multiplicamos por 2 el tiempo y en Google Chrome lo multiplicamos por 5.

Cachear variables globales

// Más rádida
function cache(){
 var w = window, i = 10000;
 while(i--) w.test = 'test';
}

// Más lenta
function nocache(){
 var i = 10000;
 while(i--) window.test = 'test';
}

El cachear variables globables nos ayudará en la mayoría de casos.

Acceder a atributos de un objeto frente a with()

// Más lento
function conwith(){
 var obj = { prop: 'test', str: '' };
 with(obj){
 var i = 10000;
 while(i--) str += prop;
 return str;
 }
}

// Más rápido
function sinwith(){
 var obj = { prop: 'test', str: '' }, i = 10000;
 while(i--) obj.str += obj.prop;
 return obj.str;
}

En los resultados nos muestra que usar with() para acceder a un objeto nos puede penalizar el tiempo de proceso de nuestro Javascript. En el caso de Google Chrome reducimos el tiempo a un 7% del empleado con with().

Pasar a bits frente a parseInt()

// Más lenta
parseInt(12.50);

// Más rápida
~~(1 * "12.5");

Javascript 1.5 integra una serie de operadores a nivel de bit, entre ellos nos encontramos ~(Alt Gr + 4) que representa el NOT a nivel de bit y que en este caso nos ayuda a convertir a entero una cadena como podemos ver en el ejemplo (haciendo un doble NOT para obtener un valor positivo).

Curiosidades del lenguaje

Diferencia entre && y ||

var n = 1;
if (true && (n=2)) ...;
console.log(n);
// --> n = 2
if (true || (n=3)) ...;
console.log(n);
// --> n = 2

Como es lógico, el uso de && evalua las dos condiciones frente a || que si ya se cumple la primera, nos evitamos comprobar la segunda.

(...).toString()

(function(){ return 2 * 3; }).toString();

// IE, Safari y Google Chrome
function(){ return 2 * 3; }

// Firefox
function(){ return 6; }

En este ejemplo vemos como la ejecución de esta función anónima nos muestra un resultado algo extraño en Firefox.

Más info

  1. Extreme Javascript Perfomance (Thomas Fuchs)
  2. JsRocks

Hola mundo en canvas

10 sep

+ 5

En Carsonified.com nos muestran un interesante tutorial con el que iniciarnos en el uso de <canvas /> mediante Javascript.

// Comprobamos que <canvas /> esté disponible
if(drawingCanvas && drawingCanvas.getContext) {
 // Inicializamos el lienzo 2D
 var context = drawingCanvas.getContext('2d');

// Creamos la cara amarilla
 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFF00";
 context.beginPath();
 context.arc(100,100,50,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 // Añadimos 2 ojos verdes
 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFFFF";
 context.beginPath();
 context.arc(80,80,8,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 context.fillStyle = "#009966";
 context.beginPath();
 context.arc(80,80,5,0,Math.PI*2,true);
 context.closePath();
 context.fill();

 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFFFF";
 context.beginPath();
 context.arc(120,80,8,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 context.fillStyle = "#009966";
 context.beginPath();
 context.arc(120,80,5,0,Math.PI*2,true);
 context.closePath();
 context.fill();

 // Creamos una nariz con firma de diamante
 context.fillStyle = "#000000";
 context.beginPath();
 context.moveTo(93,100);
 context.lineTo(100,93);
 context.lineTo(107,100);
 context.lineTo(100,107);
 context.closePath();
 context.fill();

 // Añadimos la sonrisa                   
 context.strokeStyle = "#000000";
 context.beginPath();
 context.moveTo(70,110);
 context.quadraticCurveTo(100,150,130,110);
 context.quadraticCurveTo(100,150,70,110);                
 context.closePath();
 context.stroke();
}

Este código, nos permite generar la cara amarilla que vemos en el “Hello World” que vemos debajo:

hello-world-canvas
(Ver Imagen)

Mucho código pero muchas posibilidades.

Navegadores modernos: ¿para que tanta velocidad?

11 ago

+ 26

Con la llegada de Google Chrome, parece que la palabra “velocidad” se ha puesto de moda.  ¿Pero realmente necesitamos tanta velocidad?

He estado haciendo unas pruebas muy rústicas, osea he copiado la página de Yahoo! España en una copia local y le he añadido 2 líneas de Javascript, una al inicio de la página y otra al final de la misma.

<script type="text/javascript">var timeTest = new Date().getTime();</script>
[...] // Toda la página
<script type="text/javascript">console.log("Tiempo: " + (new Date().getTime() - timeTest) + "ms");</script>

Misteriosamente, tiene un par de <noscript /> fuera del </html>, por eso he puesto la línea al final del fichero, fuera del </html>.

Aclaraciones

No se deben hacer ningún tipo de caso a estas pruebas, no tienen ningún valor científico son simplemente una pequeña prueba que he montado.

La prueba se ha realizado sobre la misma página, en el mismo ordenador, con las mismas aplicaciones abiertas y varios navegadores. Se han hecho 5 cargas y se ha sacado una média aritmética de los resultados obtenidos.

Resultados

Los resultados que he obtenido en la primera carga de la página, la siguientes se notaba el caché de partes de la misma,  son los siguientes.

// Windows XP
Firefox 3.5.2: 2566ms.
Chrome 3.0.195.6: 2435ms *
Safari 4.0: 2450ms.
Opera 10.00 Beta 2: 2422ms.
Internet Explorer 8: 2860ms.

* Despues termina de cargar las imagenes.

imagen(2)
(Ver Imagen)

Hemos de tener en cuenta que Google Chrome, el más rápido de los testeados ha cargado las imagenes despues de mostrar el alert() lo que hace que el tiempo sea tan bajo. Pero esta cutre medición no da para más :D.

La mayor diferencia, la encontramos entre IE8 vs Opera, y es de 438ms. Una diferencia realmente insignificante…

Realmente, ¿es tan importante la velocidad?

PD: No he tenido en cuenta la velocidad de apertura que es la que más fastidia a los usuarios de Firefox.

IE6ify, sientete como en casa con cualquier navegador

29 jul

+ 13

¿Eres un amante devoto de Internet Explorer 6.0? ¿Es el único navegador que muestras las páginas como quieres verlas? ¿Los demás navegadores muestran las páginas demasiado bien? Pues acaba con ello, con IE6ify podrás destrozar cualquier web y sentir que estás de nuevo con tu amado IE6 :D

IE6ify
(Ver Imagen)

Este script, encargado de colocar aleatoriamente todos los elementos de la página, simula a la perfección el algoritmo encargado de interpretar el HTML de Internet Explorer 6. Y nos ayudará mostrar cualquier página con ese toque único que solo un gran navegador puede darnos.

IE6 adictos venir a mi!!!

Mozilla Firefox 3.7, maquetas del nuevo interface

22 jul

+ 19

Acabamos de descubrir Firefox 3.5, y ya vimos algunas de las ideas que podremos disfrutar en Firefox 3.6. Pero la gente de Mozilla no para, y ahora está pensando en rediseñar la interface de la 3.7.

985px-Firefoxnnpre
(Ver Imagen)

A modo de tormenta de ideas con la comunidad de desarrolladores se han generado una serie de maquetas que nos muestran el aspecto que podría tener (para Windows).

Continua —>

Bueno, esto es embarazoso.

7 jul

+ 16

Con esta pantalla tan curiosa me he encontrado al abrir el portátil después de que ayer se me agotara la batería antes de acostarme.
firefox-restore
(Ver Imagen)

Realmente es un detalle  (que ya tienen muchos otros navegadores) que Firefox (Por fin!) lo haya incluido :D

Los usuarios me avisan

29 jun

+ 2

Via email he recibido un par de artículos interesantes que me parece interesante compartir:

  1. Pautas de diseños en Photoshop [peivem.com]
  2. Ventanas gelatinosas con Javascript y CSS Transformations [Turleando.com.ar]
  3. Honda Insight [Vimeo] (Via Hans Christian)

Si quieres compartir algo, solo tienes que hacermelo saber :D

Evita SPAM invirtiendo tu email con CSS

23 jun

+ 23

Via Sentido Web descubro un artículo muy interesante que nos muestra como el ingenio puede ayudarnos a solucionar problemas. En este caso, mediante el uso de la propiedad direction del CSS invertimos nuestro email para mostrarlo correctamente por pantalla.

<style type="text/css">
span.test { direction: rtl; unicode-bidi:bidi-override; }  
</style>
<p><span class="test">moc.liamg@5k2oteina</span></p>

Interesante técnica para evitar el SPAM. Quizás como recomendación recomendaría email con algún punto en el nombre para hacer más dificil la lectura del mismo (xxx.yyy@zzzz.aaa). Incluso deberíamos tener en cuenta a los visitantes que no tengan activas las CSS e informar que ese correo está al revés aunque despues ocultemos el texto mediante CSS para los que si lo tengan activado.

8 innovaciones de los navegadores gracias a Opera

12 jun

+ 21

El otro día nos preguntábamos por que Opera, pese a ser uno de los navegadores más innovadores disponibles era tan poco usado. Al parecer la gente de Geek Technica se pregunta lo mismo y además recuerda 8 de las novedades que Opera introdujo en el mundo de los navegadores web.

  1. SpeedDial: El marcado rápido de los marcadores. Hasta 9 páginas a las que podrás acceder con un simple click.
  2. Tabs: La famosa y tan aclamada navegación por pestañas.
  3. Sesiones: Gestión de diferentes sesiones que permite que diferentes usuarios gestionen el navegador a su antojo.
  4. Bloqueo de Pop-up: Esa maravilla que hizo que al entrar en una página dejaramos de cruzar los dedos por si aparecían miles de ventanas.
  5. Zoom: Opera comenzó haciendo zoom a la página completa y no solo al texto.
  6. BitTorrent: Quizás la más tonta de todas, pero también ha dado lugar a la integración por parte de otros navegadores.
  7. Borrar información privada: La capacidad de eliminar la información almacenada durante la navegación.
  8. Gestos de ratón: Yo no la he usado nunca, pero la gente que lo ha hecho está encantadísima.

En fín, un sin fín de novedades que poco a poco los demás navegadores las van incorporando a sus núcleos.