|

CSSUtilities: librería Javascript para obtener datos CSS

ByLuis

CSSUtilities es una librería que permite entre otras cosas:

  • encontrar todos los estilos que aplican a un elemento
  • indica qué estilo es propio y cuál heredado
  • soporta el estándar de la W3C y las propias de Internet Explorer
  • admite CSS1, CSS2 y CSS3

Algo muy parecido a lo que nos ofrece Firebug

CSSUtilities

Vía / DZone

Similar Posts

Hapi.js+Vue.js reorganizar la configuración del servidor

Hapi.js+Vue.js reorganizar la configuración del servidor

ByLuis

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:

const criteria = {
	env: 'development',
};

Y estos datos de configuración:

{
	debugLevel: {
		$filter: 'env',
		development: INFO,
		production: ERROR,
	},
}

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 environment
const 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:

const Confidence = require( 'confidence' );
const Config = require( './index' );

const criteria = {
	env: process.env.NODE_ENV,
};

const manifest = {
	server: {
		port: Config.get( '/port' ),
	},
};

const store = new Confidence.Store( manifest );

exports.get = function( key ) {
	return store.get( key, criteria );
};

exports.meta = function( key ) {
	return store.meta( key, criteria );
};

Como se puede apreciar fácilmente obtenemos el valor de port de forma bastante simple.

Y por último modificamos el fichero index.js para hacer eso de estos nuevos ficheros:

const Glue = require( '@hapi/glue' );
const Manifest = require( './config/manifest' );

const options = {
	relativeTo: __dirname,
};

const startServer = async function() {
	try {
		const manifest = Manifest.get( '/' );
		const server = await Glue.compose( manifest, options );
		await server.start();
		console.log( 'hapi days!' ); // eslint-disable-line
	} catch ( err ) {
		console.error( err ); // eslint-disable-line
		process.exit( 1 );
	}
};

startServer();

Puedes bajarte el código aquí

37 plugins para jQuery

ByLuis

Una interesante lista de plugins para usar en jQuery, organizado por temas:

37 More Shocking jQuery Plugins

Vía / aNieto2k

| | |

Los diseñadores de Microsoft también tiene problemas con IE

ByLuis

microsoft.pngCurioso y gratificante ver que no solo los nosotros sufrimos al IE, sino que los propios que trabajan en Microsoft lo sufren. En una de sus CSS se puede apreciar como una clase tiene el nombre StupidIEMarginHack y otra el nombre StupidIEWidthHack. Esto me recuerda la costumbre que solemos tener de poner trazas con insultos, palabras mal sonantes, … debido a la desesperación que sufrimos al desarrollar y que luego se nos olvida quitar.
Vía / Digg

| | |

Laboratorio: indicador de calidad de password

ByLuis

Cuando un usuario se registra en una aplicación web, suele haber casos que cuando se está introduciendo la contraseña, el sistema indica si la password cumple unos mínimos de seguridad o no. En algunas ocasiones suele darnos solo un aviso informativo, pero en otros o cumple todos los requisitos o no admite la contraseña.

En este caso vamos a crear un script que modificará los input password para añadirle una funcionalidad que indique la calidad de la contraseña que se va introduciendo.

password.png

El script añadirá el evento de control de tecla pulsada (onkeyup) y realizará una serie de comprobaciones para conocer la calidad de la contraseña, una contraseña válida será la que cumpla todas las condiciones. Las condiciones que incluimos en el ejemplo son las típicas que suelen pedir: que existan mayúsculas y minúsculas, algún número, caracteres especiales y una longitud mayor de 6.

Para chequear cada condición usaremos expresiones regulares y llevaremos un contador para saber cuántas se cumplen. Cuando hayamos finalizado las comprobaciones calcularemos el porcentaje de calidad y lo indicaremos con una barra de progreso. Esta barra se crecerá según aumente la calidad de la contraseña e irá cambiando de color desde un color rojo para la poca calidad hasta un color verde que indique mucha calidad.

El efecto de barra de progreso lo vamos a realizar de la siguiente manera, tenemos una imagen que va a funcionar como máscara, tendrá dos partes, de igual tamaño y cada parte del mismo tamaño que el ancho del input. Cada mitad tendrá una funcionalidad, la mitad de la derecha servirá para ocultar y la de la izquierda para mostrar, según queramos que se vaya mostrando la barra de progreso, iremos desplazando el fondo hacia la derecha para que se vaya viendo la barra de progreso. Inicialmente la línea discontinua de la imagen que mostramos como ejemplo estará en el lado izquierdo del input.

mascara.gif

El código sería el siguiente:

var __PASSWORD__ = {
colorKO: [255, 0, 0], // Color de contraseña no válida
color50: [127, 127, 0], // Color para el 50% para que no haya un cambio tan brusco
colorOK: [0, 255, 0], // Color de contraseña válida
width: 150,
// Añade el evento onkeyup a la caja input:password y le añade el evento checkpassword
init: function() {
var inputs = document.getElementsByTagName("INPUT");
for (var i=0; i<inputs.length; i++) {
if (inputs[i].type == 'password') {
inputs[i].addEventListener("keyup", __PASSWORD__.checkPassword, false);
inputs[i].className = 'password';
}
}
},
// Obtiene el color porcentual entre un color inicial y otro final, teniendo en cuenta un color intermedio
getColor: function(porc) {
var color = new Array();
var color1 = porc < 50? __PASSWORD__.colorKO:__PASSWORD__.color50;
var color2 = porc < 50? __PASSWORD__.color50:__PASSWORD__.colorOK;
color[0] = parseInt(color1[0]-((color1[0] -color2[0])*porc/100));
color[1] = parseInt(color1[1]-((color1[1] -color2[1])*porc/100));
color[2] = parseInt(color1[2]-((color1[2] -color2[2])*porc/100));
return color;
},
// Comprueba la calidad de la contraseña
checkPassword: function() {
var valor = this.value;
var cont = 0;
var comprobaciones = new Array(
/[A-Z]/, // mayúsculas
/[a-z]/, // minúsculas
/\d/,    // números
/.{6}/,  // más de 6 caracteres
/(\s|\\|\/|!|"|·|\$|%|&|\(|\)|=|\?|¿|\||@|#|¬|€|\^|`|\[|\]|\+|\*|¨|´|\{|\}|\-|_|\.|:|,|;|>|<)/ // Caracteres especiales
);
// Miro todas las condiciones
for (var i=0; i<comprobaciones.length; i++) {
if (valor.match(comprobaciones[i])) {
cont++;
}
}
// Valores posibles en caso de 5 condiciones: 0, 20, 40, 60, 80, 100, pero el valor mínimo tiene que ser 20 para que coincida con el colorKO, ya que si no, al pulsar una tecla ya cambia de color a un paso colorKO+1
var porc = parseInt((cont*100/(comprobaciones.length-1))-(1/(comprobaciones.length-1)*100));
// Desplazo el background tratándolo como una máscara
this.style.backgroundPosition = (parseInt(cont*__PASSWORD__.width/comprobaciones.length)-(__PASSWORD__.width))+"px 0px";
// Cambio el color de fondo
var color = __PASSWORD__.getColor(porc);
if (porc < 0) {
this.style.backgroundColor = '';
} else {
this.style.backgroundColor = 'rgb('+color[0]+', '+color[1]+', '+color[2]+')';
}
}
};
window.addEventListener("load", function() {__PASSWORD__.init();}, false);

Demo

NitobiBug: debug para Javascript

ByLuis

NitobiBug es un script similar a Firebug que nos permite realizar debugs en nuestros scripts. Permite mostrar una ventana emergente con el contenido de objetos (diferenciando entre tipos), elementos DOM o simplemente mensajes.

nitobibug.png

Usarlo es tan sencillo como esto:

var myObject = {a:234523, something:'else', mylist:[32423,4556,'sdfs']}; nitobi.Debug.log(myObject);

Y para instalarlo solo hay que añadir el archivo js.

Una alternativa a Firebug, sobre todo para IE, pero me sigo quedando con Firebug.

NitobiBug

|

Clipping de vídeo usando HTML5 y SVG en Firefox4

ByLuis

La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).

El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:

SVG

Vídeo

Javascript

var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
    play.style.display = 'none';
    pause.style.display = 'block';
    video.play();
  }, true);  
pause.addEventListener('click', function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);  
video.addEventListener("ended", function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);

El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.

Demo

Vía / Project London Trailer