Similar Posts
jQuery.sheet: inserta hojas de cálculo en tu web
jQuery.sheet es un script de jQuery que permite añadir hojas de cálculo en tu web. Permite bastantes funcionalidades, tal y como cualquier hoja de cálculo: Excel, OpenOffice o Google Docs:
- Redimensionar filas y columnas
- Funciones
- Editar el contenido de las celdas
- Permite temas/css
Vía / WebAppers
Plugin jQuery para validar contraseñas
Aquellos que necesiten que en su aplicación web los usuarios introduzcan contraseñas seguras, podrán añadir este plugin jQuery que comprobará si las contraseñas tienen ciertas carácterísticas que las hacen seguras:
- Uso de mayúsculas y minúsculas
- Uso de números
- Uso de caracteres especiales
- Longitud de la contraseña
- U opcionalmente similar a un username
El plugin mostrará un mensaje indicando la calidad de la contraseña y un color acorde a ésta.
jQuery plugin: Password Validation
Vía / Script & Style
QuickSearch: filtro de contenido con jQuery
QuickSearch es una librería bastante interesante que permite filtrar el contenido de elementos que contengan cierto texto. Tan solo hay que pasar una lista de elemtos y estos los filtrará para mostrar solo aquellos que cumplan cierto filtro de texto.
Se puede pasar lista de elementos (ul), párrafos, tablas, … Se le puede indicar el texto o la imagen que muestre que se está filtrando datos, indicar retraso, añadir clases css, …
QuickSearch
Vía / WebAppers

Hapi.js + Vue.js modelos mejorados
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í
Evitar el caché en las hojas de estilo
Algo que suele ocurrir con frecuencia es que al realizar cambios en la hoja de estilos, estos no se vean reflejados en la página por el caché del navegador.
Para evitar esto, tan solo es necesario un script que cargue los estilos y que le añada un parámetro GET que sea único para que el navegador lo entienda como un fichero nuevo. En este caso el parámetro es la fecha.
function loadStyleSheets(stylelist) {
var head = $$("head")[0];
var date = new Date();
var dateString = Date.parse(date.toString());
for(var i = 0; i < stylelist.length; i++) {
var link = document.createElement("link");
link.href="style/" + styleList[i] + "?" + dateString;
link.type = "text/css";
link.rel = "stylesheet";
head.appendChild(link);
}
}
En este caso el autor hace uso de la función de Prototype $$, pero se podrÃa hacer sin el uso de este framework.
Como consejos sobre el mismo tema yo añadirÃa dos:
- si estás trabajando en local y no ves los cambios, carga en el navegador directamente el fichero .css que hayas modificado, asà los cambios aparecerán, luego los podrás ver en la página.
- si la página se crea mediante PHP le puedes añadir a la etiqueta link el parametro GET directamente:
<link rel="stylesheet" href="estilos.css?refresh=<?php echo time(); ?>" />