Recopilación de utilidades Javascript

ByLuis June 12, 2006

Una interesante lista de utilidades Javascript, agrupadas por acciones sobre enlaces (buscar enlaces, ocultar visitados, eliminar redirecciones, …), interactuaciÃ³n con formularios (transformar POST en URLs, mostrar ocultos, …), uso de texto y datos (resaltar, ordenar tablas, …), reemplazar objetos (mostrar el texto alternativo de las imÃ¡genes en lugar de estas, quitar plugins, …), desarrollo web (shell, modificar estilos, …), validaciones (urls de imÃ¡genes incorrectas, validacion de HTML, …) y por Ãºltimo un grupo de utilidades varias (traducir la pÃ¡gina, editarla, …).
Bookmarklets
VÃa / aNieto2K

Javascript | PHP

PHP.JS: usar Javaqscript con nomenclatura PHP

ByLuis February 1, 2008

PHP.JS es un script que quiere mover las funciones PHP a Javascript, para que el desarrollador use la misma nomenclatura, ya que hay funciones muy similares y que para desarrolladores poco experimentados puede resultarles confuso.
Yo recomiendo que la gente aprenda ambos lenguajes y que los sepa diferenciar, pero ante la confusión de lenguajes puedes echar mano a este script, aunque de rendimiento puede ir peor.
Entre las funciones nos encontramos las que tratan los arrays, strings, UTF-8, entre otras.
PHP.JS
Vía / dzone

Javascript

Hapi.js + Vue.js modelos mejorados

ByLuis June 25, 2019June 25, 2019

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í

Javascript

qTip: tooltips con jQuery

ByLuis March 31, 2009

qTip es un plugin jQuery que nos permite crear y personalizar tooltips en nuestra página web. Se trata de un plugin muy completo que tiene las siguientes características:

Compatible con IE6+, Firefox 2+, Opera 9+, Safari 3+, Chrome 1+, Konqueror 3.5+
Esquinas redondeadas sin necesidad de imágenes
Posibilidad de indicar la esquina donde se quiere situar el tip (elemento del bocadillo que enlaza con el elemento)
Posibilidad de meterle efectos y Ajax
Configurable

qTip

Vía / crishnakh

Javascript

CodePress: resalta código mediante Javascript

ByLuis September 27, 2007

CodePress permite resaltar el cÃ³digo de diversos lenguajes de programaciÃ³n en nuestras pÃ¡ginas web mediante Javascript. El cÃ³digo se puede modificar en tiempo real y permite entre otras el autocompletado de comillas, parÃ©ntesis y parecidos, la inclusiÃ³n de trozos de cÃ³digo (por ejemplo los parÃ©ntesis y llaves en una sentencia if) y shortcuts (por ejemplo mostrar entidades html).

Los lenguajes que interpreta son PHP, Javascript, Java, Perl, SQL, HTML y CSS. Y existen fallos detectados son que los nÃºmeros no cambian de tamaÃ±o ya que son imÃ¡genes y que el copy/paste falla en algunas ocasiones en Internet Explorer.
CodePress
VÃa / OpenSourceCommunity.org

Javascript

Efecto de luces con javascript

ByLuis May 19, 2009

Realmente definir en el título el experimento javascript que han realizado en Dragon Labs es complicado. Se trata de un efecto de luces, glow, colores en un formulario de contacto (o cualquier otra capa). El usuario verá cómo el contorno de la capa cambia de color por zonas y varia la intensidad de la “luz”.

El efecto es expectacular, pero quizás haya que mejorarlo un poco, ya que entre otras cosas para crear el efecto de colores, usan una imagen de 133k de un tamaño de 3000×900.
Admin panel demo de Dragon Labs

Javascript

Datejs: librería de fechas para Javascript

ByLuis November 28, 2007

La verdad es que trabajar con fechas en Javascript suele ser un poco pesado. Con Datejs podremos trabajar con fechas de una forma increÃblemente fÃ¡cil y potente.

No se trata Ãºnicamente de un parseador, sino que ofrece muchas mÃ¡s funcionalidades.

Algunos ejemplos que nos pueden hacer ver la potencia de esta librerÃa son:

// Â¿QuÃ© fecha es el prÃ³ximo jueves?
Date.today().next().thursday();
// AÃ±adir 3 dÃas a la fecha de hoy
Date.today().add(3).days();
// Â¿Es hoy viernes?
Date.today().is().friday();
// Hace tres dÃas
(3).days().ago();
// Dentro de 6 meses
var n = 6;
n.months().fromNow();
// Ponerlo a las 8:30 AM del dÃa 15 de este mes
Date.today().set({ day: 15, hour: 8, mintue: 30 });
// Convertir un texto a una fecha
Date.parse(â€˜todayâ€™);
Date.parse(â€˜t + 5 dâ€™); // hoy + 5 dÃas
Date.parse(â€˜next thursdayâ€™);
Date.parse(â€˜February 20th 1973â€²);
Date.parse(â€˜Thu, 1 July 2004 22:30:00â€²);

Datejs

VÃa / Ajaxline

Javascript | PHP

PHP.JS: usar Javaqscript con nomenclatura PHP

ByLuis February 1, 2008

Javascript

Hapi.js + Vue.js modelos mejorados

ByLuis June 25, 2019June 25, 2019

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.

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(),
	},
},

/**
 * 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í

Javascript

qTip: tooltips con jQuery

ByLuis March 31, 2009

qTip es un plugin jQuery que nos permite crear y personalizar tooltips en nuestra página web. Se trata de un plugin muy completo que tiene las siguientes características:

Compatible con IE6+, Firefox 2+, Opera 9+, Safari 3+, Chrome 1+, Konqueror 3.5+
Esquinas redondeadas sin necesidad de imágenes
Posibilidad de indicar la esquina donde se quiere situar el tip (elemento del bocadillo que enlaza con el elemento)
Posibilidad de meterle efectos y Ajax
Configurable

qTip

Vía / crishnakh

Javascript

CodePress: resalta código mediante Javascript

ByLuis September 27, 2007

Javascript

Efecto de luces con javascript

ByLuis May 19, 2009

Javascript

Datejs: librería de fechas para Javascript

ByLuis November 28, 2007

La verdad es que trabajar con fechas en Javascript suele ser un poco pesado. Con Datejs podremos trabajar con fechas de una forma increÃblemente fÃ¡cil y potente.

No se trata Ãºnicamente de un parseador, sino que ofrece muchas mÃ¡s funcionalidades.

Algunos ejemplos que nos pueden hacer ver la potencia de esta librerÃa son:

// Â¿QuÃ© fecha es el prÃ³ximo jueves?
Date.today().next().thursday();
// AÃ±adir 3 dÃas a la fecha de hoy
Date.today().add(3).days();
// Â¿Es hoy viernes?
Date.today().is().friday();
// Hace tres dÃas
(3).days().ago();
// Dentro de 6 meses
var n = 6;
n.months().fromNow();
// Ponerlo a las 8:30 AM del dÃa 15 de este mes
Date.today().set({ day: 15, hour: 8, mintue: 30 });
// Convertir un texto a una fecha
Date.parse(â€˜todayâ€™);
Date.parse(â€˜t + 5 dâ€™); // hoy + 5 dÃas
Date.parse(â€˜next thursdayâ€™);
Date.parse(â€˜February 20th 1973â€²);
Date.parse(â€˜Thu, 1 July 2004 22:30:00â€²);

Datejs

VÃa / Ajaxline

Javascript | PHP

PHP.JS: usar Javaqscript con nomenclatura PHP

ByLuis February 1, 2008

Javascript

Hapi.js + Vue.js modelos mejorados

ByLuis June 25, 2019June 25, 2019

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.

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(),
	},
},

/**
 * 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í

Javascript

qTip: tooltips con jQuery

ByLuis March 31, 2009

qTip es un plugin jQuery que nos permite crear y personalizar tooltips en nuestra página web. Se trata de un plugin muy completo que tiene las siguientes características:

Compatible con IE6+, Firefox 2+, Opera 9+, Safari 3+, Chrome 1+, Konqueror 3.5+
Esquinas redondeadas sin necesidad de imágenes
Posibilidad de indicar la esquina donde se quiere situar el tip (elemento del bocadillo que enlaza con el elemento)
Posibilidad de meterle efectos y Ajax
Configurable

qTip

Vía / crishnakh

Javascript

No se trata Ãºnicamente de un parseador, sino que ofrece muchas mÃ¡s funcionalidades.

Algunos ejemplos que nos pueden hacer ver la potencia de esta librerÃa son:

// Â¿QuÃ© fecha es el prÃ³ximo jueves?
Date.today().next().thursday();
// AÃ±adir 3 dÃas a la fecha de hoy
Date.today().add(3).days();
// Â¿Es hoy viernes?
Date.today().is().friday();
// Hace tres dÃas
(3).days().ago();
// Dentro de 6 meses
var n = 6;
n.months().fromNow();
// Ponerlo a las 8:30 AM del dÃa 15 de este mes
Date.today().set({ day: 15, hour: 8, mintue: 30 });
// Convertir un texto a una fecha
Date.parse(â€˜todayâ€™);
Date.parse(â€˜t + 5 dâ€™); // hoy + 5 dÃas
Date.parse(â€˜next thursdayâ€™);
Date.parse(â€˜February 20th 1973â€²);
Date.parse(â€˜Thu, 1 July 2004 22:30:00â€²);

Datejs

VÃa / Ajaxline

Similar Posts