Modernizr es una librería que permite detectar las nuevas características de HTML5, CSS3, Canvas, … que admite el navegador. Tan sólo habrá que acceder a propiedades para saber si admite o no una característica en particular:
if (Modernizr.geolocation) {
// Admite geolocalización
}
if (Modernizr.csstransitions) {
// Transacciones CSS
}
if (Modernizr.rgba) {
// RGBA
}
Muchas veces el diseño que creamos nos hace usar listas no ordenadas, las cuales queremos que tengan descripción, pero por la falta de espacio, queremos que esta ocupe poco espacio.
Para crear este efecto, usaremos una lista y una capa por cada descripción que queremos mostrar, a parte de un script que mostrará la descripción cuando pasamos el ratón sobre el elemento de la lista.
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?
Leyendo esta entrada sobre el uso de botones para cambiar el tipo de letra de forma dinámica, se nos ha ocurrido contar cómo poder hacerlo.
Se puede hacer de varias formas: incrementando o decrementando el tamaño de letra según se pulse en los botones de aumentar o reducir el tipo de letra, o de forma fija, aumentando el tamaño de la letra y disminuyéndolo, pero solo a unos tamaños prefijados.
Los heatmaps son muy útiles para ver qué zonas de nuestras webs atraen la atención de los usuarios. Esta función de Javascript permite mostrar en tiempo real el heatmap que se va produciendo gracias a Javascript y el elemento HTML de Canvas.
AnythingSlider es un plugin jQuery que permite crear slides con cualquier elemento HTML. Permite ir hacia adelante y hacia atrás, enlaces a posiciones en concreto, autoplay, vueltas infinatas, … AnythingSlider jQuery Plugin
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: