Muchas veces nuestra forma de aprender Javascript (o cualquier otra cosa) es encontrándonos con cosas desconocidas en scripts que estamos viendo e intentando comprender.
Una de estas nuevas posibilidades que nos ofrece Javascript son los “obtect literal”. Que sustituyen la falta de clases en Javascript, y nos facilita el uso de variables globales entre otras cosas.
Alguna vez te habrás encontrado con algo parecido al siguiente código y lo habrás querido comprender, una sencilla explicación nos la ofrece Wait till I come.
Interesante script que permite sincronizar scrolls en diferentes divs para que al mover uno el resto también se muevan
jQuery.fn.synchronizeScroll = function() {
var elements = this;
if (elements.length <= 1) return;
elements.scroll(
function() {
var left = $(this).scrollLeft();
var top = $(this).scrollTop();
elements.each(
function() {
if ($(this).scrollLeft() != left) $(this).scrollLeft(left);
if ($(this).scrollTop() != top) $(this).scrollTop(top);
});
});
}
Boomerang es una librería desarrollada por Yahoo que permite medir diferentes aspectos de rendimiento de nuestra web desde la perspectiva del usuario final. Añadiendo un script y distintas funciones, podemos comprobar diversos aspectos de nuestra web como:
El tiempo que el usuario cree que tarda en cargarse la web
El tiempo de carga de contenido dinámico
El ancho de banda durante la carga de la página
Tiempo de carga de diferentes módulos, por ejemplo módulos de Twitter o Facebook
Buen script que nos permite mover nuestras capas mediante drag&drop y cambiarlas de tamaño.
Funciona con posicionamiento relativo y absoluto de los elementos en la página. Además permite personalizar los estilos mediante CSS. No es obtrusivo. Es posible indicar tamaños máximos y mínimos para las cajas y es compatible con la mayoría de los navegadores. DragResize
Vía / Ajaxline
Impresionante la librería que ha creado Nicolas Garcia Belmonte que permite crear gráficas RGraph, Treemaps o Hyperbolic Trees. ¿Y qué tipo de gráficas son estas? pues explicándolo llanamente, las que muestran relación entre elementos usándo árboles, pero algo más visuales, centrando nodos.
Por lo poco que he visto, está desarrollado en Canvas y para IE lo simula mediante VML. También estaría bien mirar si permite ampliar nodos dinámicamente. JIT
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: