Similar Posts
iUI: librería Javascript/CSS para emular iPhone
iUI es una librerÃa Javascript/CSS creada por Joe Hewitt, co-fundador de Firefox y creador de Firebug, que permite emular el lenguaje nativo visual del iPhone.
Entre las caracterÃsticas que nos ofrece encontramos:
- Controles UI
- Enlaces a páginas externas vÃa Ajax
- EnvÃo de formularios vÃa Ajax
- Soporte para historial del navegador
VÃa / Ajaxline
CodeMirror: consola Javascript para tus páginas web
CodeMirror es una librería realizada con MochiKit que nos permite incluir una consola de Javascript en nuestras aplicaciones web. Un ejemplo perfecto para el funcionamiento es el libro de Javascript online Eloquent Javascript, el cual muestra ejemplos javascript y usa la consola para poder ejecutarlos.
Nos muestra el código parseado y resaltado, además nos permite modificarlo y ejecutarlo, viendo los resultados en una ventana diferente.
Además es sencillo de utilizar:
var editor = new CodeMirror(CodeMirror.replace("inputfield"), {
parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
path: "lib/codemirror/",
stylesheet: "lib/codemirror/jscolors.css"
});
Hacer drag & drop de ficheros fuera del navegador con Chrome
Hace tiempo comenté cómo hacer drag & drop directamente sobre el navegador, lo cual nos venía muy bien para subir ficheros (por ejemplo para un correo, galería de fotos, …). Esta vez se trata de descargar ficheros directamente desde el navegador, algo que permite GMail desde Chrome.
El autor de este post lo ha tenido difícil para poder ver cómo lo hace Google, pero al final el código es bastante sencillo:
var file = document.getElementById("dragout");
file.addEventListener("dragstart",function(evt){
evt.dataTransfer.setData("DownloadURL",fileDetails);
},false);
Sólo disponible en Chrome
Campo password estilo iPhone con jQuery
Una de las cosas más destacadas de iPhone es su usabilidad, como por ejemplo la posibilidad de ver el carácter introducido en un campo password.
Este script de jQuery permite realizar la misma tarea, mostrar el carácter introducido durante unos segundos o hasta que se pulsa la siguiente tecla y ocultar el resto.
iPhone-like password fields using jQuery
Vía / WebAppers

Hapi.js + Vue.js accediendo a mongodb
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: async function( 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-line
console.log( 'DB connected' );
} );
},
};
Para configurar la conectividad a mongodb tendremos que añadir los datos a la /config/index.js
const config = {
server: {
port: 3001,
},
website: {
name: `WP Desk`,
},
db: {
url: 'mongodb://localhost/wpdesk',
},
};
Y en el manifiest usado por glue, tendremos que añadir el nuevo plugin y las nuevas opciones de conexión:
const manifest = {
server: {
port: Config.get( '/server/port' ),
},
register: {
plugins: [
{
plugin: './api/home',
},
{
plugin: './plugins/db',
options: Config.get( '/db' ),
},
],
},
};
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 schema
const 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', async function() {
const result = await new Promise( ( 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:
/**
* Route handler
*
* @param {object} request
* @param {object} h Hapi object
* @returns {object}
*/
handler: async( request, h ) => { // eslint-disable-line
try {
const result = await User.findAll();
return result;
} catch ( error ) {
return { error: 500 };
}
},
Puedes bajarte el código aquí
Laboratorio: filtrado de tablas
Leyendo una de las entradas de Usolab, en la que habla de colocar filtros en las tablas: Icono para el control “filtrar”, no he podido resistirme a llevar a cabo tan buena idea.
En el ejemplo voy a seleccionar una tabla, y modificarla para admitir ordenación por columnas, filtrado mediante expresiones regulares y distinción de filas alternas. Además de incluir un icono en el filtro que indica el estado de filtrado.
Lo primero que debemos hacer es seleccionar la tabla en cuestión y tratarla, modificando la cabecera (th) incluyendo un enlace para poder ejecutar la acción de ordenar, un icono que indica qué columna está ordenada y en qué sentido y una caja de texto para indicar el filtrado.
La caja de texto tiene la particularidad de mostrar un icono que indica el estado del filtro, cuanto más lleno esté de “lÃquido”, más mostrará. Para lo cual usamos una imagen como fondo de la caja de texto e iremos moviendo verticalmente para mostrar los distintos estados.