JSINER es una librerÃa de Javascript que pretende facilitar la programación orientada a objetos y la dependencia en la gestión de scripts en ficheros externos.
Para el tema de la herencia, el autor define una herencia lazy, cuyas caracterÃsticas son las siguientes:
Tiene las mismas caracterÃsticas que la herencia mediante prototype.
No es necesario orden alguno en la declaración de los scripts externos.
En la mayorÃa de los casos la carga del HTML es más rápida, ya que los scripts se cargan solo en el momento en el que se necesitan.
Las dependencias se declaran en un modo más especÃfico y las dependencias entre clases solo en scripts concretos.
FancyZoom es un script que nos permite realizar zoom de nuestras imágenes mediante Javascript. Hace aparecer la imagen mediante un zoom progresivo y transparencia. Además muestra el title del enlace en un recuadro.
Las imágenes ser precargan automáticamente cuando el ratón pasa por encima de la imagen, por lo que se reduce la demora en la persentación. El único fallo que encuentro es que hay que añadir un onload en el body, pero bueno, podemos cambiar la librería para que se haga automáticamente. FancyZoom
Mientras se sigue con el desarrollo de la versión 3 de Firefox, podemos ir viendo que novedades traerá la versión 1.8 de Javascript. Las novedades son muy interesantes, pero creo que necesitarán de un cambio de modo de pensar en Javascript, ya que es algo a lo que no estamos acostumbrados.
Notación Lambda
La notación Lambda nos permite declarar funciones que devuelvan datos sin necesidad de llaves ({..}), ni de devolver directamente el resultado con return.
Por ejemplo, la siguiente función:
function(x) { return x * x; }
pasarÃa a ser:
function(x) x * x
Generador de expresiones
Existente ya en Phyton, nos permite generar expresiones como arrays o matrices de forma rápida y elegante. Para una explicación con un poco de profundidad, el autor del artÃculo usa un solucionador de Sudokus para explicarnos paso a paso cómo funcionan. Quizás un ejemplo más sencillo sea el siguiente:
// Crea un array de 100 posiciones rellenas con cero
[ 0 for ( i in 100 ) ]
// Crea una matriz identidad de 10x10
[[ i == j ? 1 : 0 for ( i in 10 ) ] for ( j in 10 )]
Permite reducir iterativamente un array a un solo valor usando una función llamada de retorno.
La nomenclatura serÃa de la siguiente forma:
miArray.reduce( fn [, val_inicial] );
// La función serÃa de la siguiente manera
miArray.reduce(function(ultimo_valor, valor_actual){
return ultimo_valor + valor_actual;
});
Si combinamos los dos puntos anteriores, podemos obtener la suma de los cien primeros números de la siguiente manera:
$fx() es una librería que nos permite realizar animaciones de elementos HTML de forma sencilla. Altera las propiedades CSS a lo largo del tiempo pasando solo una pequeña configuración. Además se pueden combinar efectos, grupos de ellos, encadenarlos o ejecutarlos en paralelo, incluso indicar diferentes callbacks para dar una mayor flexibilidad.
Para aquellos que necesiten tan solo hacer animaciones y no quieran cargar todo el core de jQuery o Mootools, les puede venir muy bien. $fx()
Vía / Script & Style
Leyendo esta entrada sobre el uso de botones para cambiar el tipo de letra de forma dinámica, se nos ha ocurrido contar cómo poder hacerlo.
Se puede hacer de varias formas: incrementando o decrementando el tamaño de letra según se pulse en los botones de aumentar o reducir el tipo de letra, o de forma fija, aumentando el tamaño de la letra y disminuyéndolo, pero solo a unos tamaños prefijados.
Algo bastante importante en un proyecto es la configuración y cómo se gestiona. Para facilitar la gestión usaremos dos librerías dotenv y confidence, la primera permite usar ficheros .env en nuestro entorno de desarrollo para simular variables de entorno. La segunda nos ayudará a recuperar las variables de un objeto permitiendo usar filtros, por ejemplo según de las variables de entorno.
Instalaremos los paquetes:
npm i dotenv
npm i confidence
Confidence necesitará un criterio que nos permitirá obtener distintos resultados según su valor. Imaginemos que tenemos el siguiente criterio:
Si queremos acceder al nivel de debug, al ser env igual a development, obtendíamos INFO.
Vale, ¿y cómo lo usamos en el proyecto? Primero creamos una carpeta config, donde crearemos el fichero index.js que tendrá toda la configuración del servidor:
const Confidence = require( 'confidence' );
const Dotenv = require( 'dotenv' );
Dotenv.config( { silent: true } );
// NODE_ENV is used in package.json for running development or production environmentconst criteria = {
env: process.env.NODE_ENV,
};
const config = {
port: 3001,
};
const store = new Confidence.Store( config );
exports.get = function( key ) {
return store.get( key, criteria );
};
exports.meta = function( key ) {
return store.meta( key, criteria );
};
Dotenv simplemente se usa para obtener de las variables de entorno de servidor el valor de NODE_ENV. Por ahora solo tendremos la variable port, pero ya estará preparado para poder añadir otras variables de configuración posteriormente.
Creamos un store de Confidence y exportaremos los métodos get y meta.
Haremos algo parecido para el manifest necesario para Glue, creando el fichero manifest.js dentro del directorio config:
Algunas veces no nos paramos a pensar en los cambios que añade una web, en este caso Google, los problemas que pueden aparecer en tema de rendimiento. Y estos problemas suelen ser fundamentales a la hora de la impresión que se lleva un usuario de la web, claro, que Google no se caracteriza por problemas de rendimiento y los expertos que están trabajando allá deben ser de lo mejorcito que existe.
Después de este rollo introductorio, me gustaría apuntar los 3 aspectos que utiliza Google para mejorar el rendimiento que se centran sobre todo en la reducción del número de peticiones HTTP:
Compilación de Javascript: mediante Closure Compiler, consigue reducir el tamaño de los ficheros js, reutilizar variables, …
JSONP bajo demando: JSONP permite envolver la respuesta JSON con una llamada Javascript. Se realizan llamadas directas al script en vez de usar Ajax, lo cual permite hacer llamadas crossdomain y que el navegador lo cachee perfectamente. El problema es que si se añade la llamada con un createElement, el navegador se queda cargando, por lo que es mejor meterlo entre un setTimeout.
DATA URIs: es un método de añadir contenido en URLs usando base64, el problema es que IE8 sólo admite DATA URIs de 32k, por lo que dividen las imagenes en trozos y los “empalman” con etiquetas IMG. También han comprobado que aunque base64 añade hasta un 33% del tamaño, como lo devuelven en gzip, el tamaño final es más o menos el mismo.