FancyZoom es un script que nos permite realizar zoom de nuestras imágenes mediante Javascript. Hace aparecer la imagen mediante un zoom progresivo y transparencia. Además muestra el title del enlace en un recuadro.
Las imágenes ser precargan automáticamente cuando el ratón pasa por encima de la imagen, por lo que se reduce la demora en la persentación. El único fallo que encuentro es que hay que añadir un onload en el body, pero bueno, podemos cambiar la librería para que se haga automáticamente. FancyZoom
Buen método para evitar spam en los formularios sin la necesidad de CAPTCHA. Se trata de añadir mediante javascript eventos al formulario que detectan el uso por parte de humanos: focus y click.
Cuando un usuario quiere rellenar el formulario, uno de esos eventos debe lanzarse, por lo que mediante javascrip se añade un valor específico a un input tipo hidden que es el que usaremos para saber si el usuario es un robot o una persona.
En el caso de no tener javascript habilitado (navegadores de algún móvil o lectores de texto para invidentes), mediante la etiqueta NOSCRIPT añadiremos un campo que añada una pregunta tipo: “cuanto son dos más siete”, que sustituirá al captcha. Invisible Human Check for Web Form Validation
Gracias Gerardo por el aviso
Cuando estamos desarrollando un plugin para WordPress y queremos que la administración del plugin tenga estilos y scripts propios, ya sea para darle cierta interactividad o diseño, o bien podremos incluir los estilos o librerías a pelo en la página del plugin, o bien podremos hacer que WordPress añada lo estilos y los scripts en el head del HTML. Para realizar esto, deberemos utilizar las acciones admin_print_styles y admin_print_scripts:
add_action('admin_print_styles', 'incluir_css');
add_action('admin_print_scripts', 'incluir_script');
function incluir_css() {
echo '';
}
function incluir_script() {
echo '';
}
Como ya dije, esta aplicación estará basada en Mongodb, y usaremos mongoose como ODM.
El primer paso es instalar mongoose:
npm i mongoose
Una vez instalado crearemos un controlador que nos permita usar la BD en toda la aplicación Hapi.js. Para ello haremos uso de los decorate del servidor. Los decorations permite extender objectos ofrecidos por Hapi.js, en nuestro caso server y request. Usando un plugin nos conectaremos a mongodb usando mongoose y añadiremos ese objecto con los decorate.
Creamos el fichero /plugins/db.js con el siguiente código:
/**
* DB controller
*
* It uses Mongoose and "stores" it in the server and the request using `decorate`
*/const mongoose = require( 'mongoose' );
exports.plugin = {
name: 'db',
register: asyncfunction( server, options ) {
mongoose.connect( options.url, { useNewUrlParser: true } );
const db = mongoose.connection;
// eslint-disable-next-line
db.on( 'error', console.error.bind( console, 'connection error:' ) );
db.once( 'open', function() {
server.decorate( 'server', 'db', mongoose );
server.decorate( 'request', 'db', mongoose );
// eslint-disable-next-lineconsole.log( 'DB connected' );
} );
},
};
Para configurar la conectividad a mongodb tendremos que añadir los datos a la /config/index.js
Ya tenemos casi todo configurado, ahora vamos a empezar con un ejemplo creando un esquema de moongose que nos permite acceder a colecciones de mongodb.
Lo más común es tener una colección de usuarios, que tendrá los siguientes campos:
userName: de tipo String,
firstName: de tipo String,
lastName: de tipo String,
email: de tipo String,
role: que referencia a otro elemento de otra colección,
isEnabled: de tipo Boolean,
password: de tipo String,
resetPassword: un objeto representado por:
hash: de tipo String,
active: de tipo Boolean,
También crearemos un método estático que devuelva todos los elementos de la colección users para realizar pruebas:
/**
* User model based on Mongoose
*/const mongoose = require( 'mongoose' );
const Schema = mongoose.Schema;
// Mongoose schemaconst userSchema = new mongoose.Schema( {
userName: String,
firstName: String,
lastName: String,
email: String,
role: Schema.Types.ObjectId,
isEnabled: Boolean,
password: String,
resetPassword: {
hash: String,
active: Boolean,
},
} );
/**
* User static model findAll
*
* @returns {array}
*/
userSchema.static( 'findAll', asyncfunction() {
const result = awaitnewPromise( ( resolve, reject ) => {
this.model( 'User' ).find( {} ).exec( ( error, data ) => {
if ( error ) {
reject( error );
}
resolve( data );
} );
} );
return result;
} );
const User = mongoose.model( 'User', userSchema );
module.exports = User;
Ya está todo, ahora solo modificamos el handler de la ruta home.js para mostrar los valores de findAll:
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.
FireUnit es un plugin para Firefox que permite realizar pruebas unitarias de Javascript y mostrar los logs en una pestaña de Firebug. El plugin está desarrollado entre otras personas por John Resig, desarrollador de jQuery.
Se pueden realizar pruebas como las siguientes:
// Simular eventos del navegador
var input = document.getElementsByTagName("input")[0];
fireunit.mouseDown( input );
fireunit.click( input );
fireunit.focus( input );
fireunit.key( input, "a" );