Javascript

jsMSX: emulador de MSX con Javascript y Canvas

ByLuis June 25, 2009

MSX es un ordenador de hace la tira de años que cuando eramos pequeños nos parecía increíble y que ahora nos parece paleolítico. jsMSX es un emulador realizado en Javascript y Canvas que permite ejecutar juegos para ese sistema.

En sí la aplicación no tiene mucha utilidad, pero es interesante desde el punto de vista de lo que se está consiguiendo mediante Javascript y Canvas.
jsMSX
Via / @lardissone

Javascript | Quicklinks

PaintbrushJS – Browser Based Image Processing Library

ByLuis August 20, 2010

PaintbrushJS is a lightweight, browser-based image processing library that can apply various visual filters to images within a web page.You use it by applying a class to an element on the page and setting a few parameters with some extra HTML attributes. If the element is an img or it has a background-image set in your CSS, PaintbrushJS will create …

Post original

Javascript

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

ByLuis April 29, 2019April 29, 2019

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í

Javascript

jStorage: plugin jQuery para usar el almacenamiento de HTML5

ByLuis April 13, 2010

Si hace poco comentaba el tema de Web SQL Database de HTML5, ahora encuentro un plugin para jQuery que nos facilita esta labor.

$.jStorage.set(key, value)
value = $.jStorage.get(key)

jStorage

Vía / Script & Style

Javascript

Guía de estilos de Javascript de Google

ByLuis July 19, 2010

Google tiene una guía de estilos para programar en Javascript. Yo no soy muy partidario de ello, ya que cada cual programe como quiera siempre que sea código legible, es decir, ¿por qué usar variables con nombres así: nombreVariable y no así: nombre_variable?. Está claro que en un proyecto o una empresa sí tiene sentido usar guías de estilo, pero que una guía de estilo sea generalizada, no le veo sentido.

De todas formas los consejos están bastante bien y ante la duda de cómo hacerlo, podemos echarle un vistazo a cómo lo hacen en Google. Claro, que luego lo ofuscan y no hay quién entienda sus librerías.

Google JavaScript Style Guide

Vía / DZone

Javascript

JS Bin: edita, testea y haz debug de Javascript online

ByLuis October 22, 2009

JS Bin es una aplicación que nos permite crear nuestros scripts y testearlos o hacerles debug de forma colaborativa. Su interfaz es muy sencilla, consta de tres pestañas: javascript, el html en el que se incluye el javascript y la salida del HTML y el Javascript.

Además, permite añadir librerías javascript con jQuery o YUI, y exportar el trabajo a una URL propia.

JS Bin

Vía / WebAppers

Desarrollo web | Javascript | Laboratorio | XHTML

Laboratorio: indicador de calidad de password

ByLuis July 16, 2007

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.

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.

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

Similar Posts