Funciones en Javascript

ByLuis

Normalmente el uso que hacemos de las funciones en javascript es bastante sencillo, pero en algún otro momento puede que necesitemos un uso más avanzado.

El tutorial que os paso explica detalladamente todos los usos que podemos realizar de funciones. Lo que yo desconocía era el uso de callee, que tiene un puntero a la función que se está ejecutando en ese instante, fundamental para la recursividad:

alert((function(n){ if(n <= 1){return 1;}else{return n*arguments.callee(n-1);}})(10));

Functional Javascript

Similar Posts

Memory leaks en Javascript

ByLuis

Mirando una entrada sobre cómo evitar que se puedan producir pérdidas de memoria en Javascript, me he encontrado con una extensión para Firefox que te avisa cuando se produce este tipo de situaciones.
memoryleak.png

De paso, comentaré los tres consejos que nos da para evitar esas perdidas de memoria, que nunca vienen mal.

  • Pon la propiedad onreadystatechange a null del objeto XMLHttpRequest cuando hayas acabado de usarlo.
  • Limpia los eventos en el unload si hay posibilidad de que hagan referencia a objetos DOM.
  • No asignes nada más que valores primitivos (string, int, …) en las propiedades del DOM aunque vayas a limpiarlo después.

La verdad es que estos problemas no me queda muy claro si se dan solo en Firefox o en otro navegador, aún así, buenas costumbres a la hora de programar siempre son bienvenidas.

Leak Monitor

3 Easy Steps to Avoid JavaScript Memory Leaks

Vía / Digg

Hapi.js + Vue.js modelos mejorados

Hapi.js + Vue.js modelos mejorados

ByLuis

En este caso voy a explicar cómo añadir una ruta en el backend para gestionar usuarios.

Antes de nada vamos a instalar tres paquetes:

  • @hapi/joi para validar los datos de entrada
  • @hapi/boom para mostrar errores HTTP de forma sencilla
  • bcrypt para encriptar la contraseña
npm i @hapi/joi
npm i @hapi/boom
npm i bcrypt

Tendremos que añadir la ruta al manifest de glee

const manifest = {
	server: {
		port: Config.get( '/server/port' ),
	},
	register: {
		plugins: [
			{
				plugin: './api/home',
			},
			{
				plugin: './api/user',
			},
			{
				plugin: './plugins/db',
				options: Config.get( '/db' ),
			},
		],
	},
};

Ahora solo falta crear el controlador para las rutas de usuarios, dos en este caso:

  • GET /user/[user] para recuperar un usuario
  • PUT /user para crear un nuevo usuario

Lógicamente aún no hay nada de autenticación, por lo que cualquiera puede crear un usuario realizando una llamada PUT a la URL indicando userName, email y password.

Para comprobar la validez de los datos introducidos, usaremos joi. Usando las opciones de la ruta, indicaremos las reglas que deberá cumplir cada parámetro introducido. Así, para recuperar un usuario, se comprobará que user sea string, alfanumérico y que tenga una longitud de 3 a 20 caracteres:

validate: {
	params: {
		user: Joi.string().alphanum().min( 3 ).max( 20 ),
	},
},

Así de fácil.

En el caso de comprobar los datos de entrada de la llamada PUT, en vez de usar params, usaremos payload:

validate: {
	payload: {
		userName: Joi.string().alphanum().min( 3 ).max( 20 ).required(),
		email: Joi.string().email().required(),
		password: Joi.string().min( 8 ).required(),
	},
},

Por último mostrar el código para crear un nuevo usuario. Primero se comprueba si existe un usuario con ese nickname o email. Si es así, se devuelve error usando boom, si no, se genera la contraseña encriptada (aquí no me he molestado mucho en ello, ya lo haré más adelante), y se crea el usuario usando el método create de moongose:

/**
 * Route handler
 *
 * @param {object} request
 * @param {object} h Hapi object
 * @returns {object}
 */
handler: async( request, h ) => { // eslint-disable-line
	try {
		// TODO: Add role
		const user = await User
			.findOne( {
				$or: [
					{ userName: request.payload.username },
					{ email: request.payload.email },
				],
			} )
			.exec();
		if ( user ) {
			return Boom.badData( 'User exists' );
		}
		const password = await bcrypt.hash( request.payload.password, Config.get( '/hash/PASSWORD_HASH' ) );
		const userData = Object.assign( {}, request.payload, { password } );
		const newUser = await User.create( userData );

		return newUser ?
			{
				response: true,
				message: 'User created',
				userId: newUser.id,
			} :
			Boom.boomify( {
				response: false,
				message: 'There was an error during user creation',
			}, { statusCode: 400 } );
	} catch ( error ) {
		return Boom.badImplementation( 'Error', { error } );
	}
},

Como último apunte, he modificado la configuración para que admita ficheros .env con los datos necesarios.

Como siempre te puedes bajar el código aquí

Corrector ortografico Javascript de Automattic

ByLuis

La gente de Automattic (WordPress) ha sacado su proyecto After the Deadline como open source. Se trata de un corrector ortográfico, de gramática y estilos que podemos incluir en nuestras aplicaciones web. Además ofrece una API para jQuery por si queremos interactuar con él.

El proyecto tiene muy buena pinta y funciona bastante bien, salvo que por lo que he leído está únicamente para inglés. Claro, que también me entra una duda: ¿realmente es necesario un corrector ortográfico en una aplicación web?

After the Deadline

Controlar el número de teclas de un textarea

ByLuis

Algo que hay que tener en cuenta muchas veces cuando trabajamos con formularios es la longitud del texto que introducimos en los textarea, ya que en muchos casos esa información se almacena en la BD y puede que el campo en dónde se guarda tenga un límite de tamaño.

textarea.png

No tengo muy claro según lo que dicta la accesibilidad y la usabilidad, si el ejemplo que muestro es del todo correcto. Lo normal es que si se supera la longitud de texto máximo, no deje introducir ningún carácter más. Pero en este caso simplemente vamos a avisar mediante una barra de progreso cuánto texto hemos introducido y cuánto nos queda. ¿Por qué? pues porque personalmente me ha pasado que muchas veces, al escribir mirando el teclado, ni me fijo en lo que pasa en la pantalla, por lo que me he podido pasar pulsando teclas un buen rato y no fijarme en que no se escribía nada. O también, cuando se hace un copy/paste, el texto puede ser mayor que lo permitido. En ambos casos es mejor tener el texto completo e ir reduciéndolo.

Como creo que quizás pueda serle útil a alguien este ejemplo, el desarrollo va a ser muy sencillo, ya que algunas veces los comentarios que recibimos de scripts antiguos son de gente con poco conocimiento. Luego, quien quiera usar JSON o Ajax (no sé para qué) o lo que quiera, que lo haga.

El procedimiento es sencillo, disponemos de un textarea, con un ancho definido mediante estilos. También existe una capa del mismo ancho que el textarea, y que se situará debajo del textarea. En el textarea se capturará el evento onkeyup, para que cuando se pulse una tecla, podamos ver la longitud del texto y modificar la barra de progreso.

<textarea onkeyup="progreso_tecla(this)" value=""></textarea>
<div id="progreso">(0 / 250)</div>
textarea {
width: 300px;
height: 200px;
}
#progreso {
background: url(textarea.png) no-repeat;
background-position: -300px 0px;
width: 300px;
height: 14px;
text-align: center;
color: #000000;
font-size: 8pt;
font-family: Arial;
text-transform: uppercase;
}

La barra de progreso funciona de la siguiente manera, el fondo es una imagen con el progreso, inicialmente estará desplazada a la izquierda el tamaño de la barra. Por ejemplo, si la barra tiene un ancho de 300px, la posición izquierda del fondo será -300px. Cuando se pulse una tecla, se recalculará la posición izquierda, según la longitud del texto. Si la longitud supera el máximo, el fondo no será la imagen, sino de color rojo para avisar del error.

var max=250;
var ancho=300;
function progreso_tecla(obj) {
var progreso = document.getElementById("progreso");
if (obj.value.length < max) {
progreso.style.backgroundColor = "#FFFFFF";
progreso.style.backgroundImage = "url(textarea.png)";
progreso.style.color = "#000000";
var pos = ancho-parseInt((ancho*parseInt(obj.value.length))/250);
progreso.style.backgroundPosition = "-"+pos+"px 0px";
} else {
progreso.style.backgroundColor = "#CC0000";
progreso.style.backgroundImage = "url()";
progreso.style.color = "#FFFFFF";
}
progreso.innerHTML = "("+obj.value.length+" / "+max+")";
}

Ejemplo