Interesante script que nos permite saber si un usuario ha visitado alguna página, centrada en sitios sociales tipo Facebook, Digg, … aunque se puede ampliar a cualquier web.
La idea es brillante, se crea un iframe, inserta enlaces a las páginas que deseas saber si ha visitado o no, modifica los estilos para ocultar los enlaces visitados (a:visited {display: none}) y luego pregunta por cada enlace si ha sido visitado o no (el estilo debe ser display: none si ha sido visitado).
No es fiable al 100% pero es bastante efectivo. Vote! How to Detect the Social Sites Your Visitors Use
Vía / WebAppers
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:
The Sexy Curls jQuery Plugin nos permite crear esquinas dobladas simulando páginas de forma muy sencilla con jQuery. Para su funcionamiento también es necesario jQuery UI.
Su uso es sencillo, creas una imagen, le asignas un id y ejecutas el siguiente código:
IT Mill Toolkit es un framework open source para crear interfaces de usuario, ofreciendo widgets y herramientas para desarrollar aplicaciones web de alta calidad. Podrás crear RIAs sin tener que preocuparte por imcompatibilidades de navegadores o el DOM de Javascript, tan solo usando herramientas Java.
Además ofrece varios widgets con soporte para AJAX, seguridad para evitar ataques mediante Javascript, está basado en Google Web Toolkit, faclidad para cambiar los estilos y muchas cosas más. IT Mill Toolkit
VÃa / WebAppers
Lo bueno de los SVG es que puedes modificarlos mediante CSS directamente en el HTML, el único problema es que el SVG debe estar incrustado en el HTML, no mediante una imagen <img>, ni mediante la propiedad content de CSS.
Encontré un script muy bueno que te modifica una etiqueta img que contiene un SVG por su contenido SVG real. El problema viene cuando yo añado el SVG como una propiedad content:
.class {
content: url('imagen.svg');
}
Para ello he modificado el script anterior para que coja la propiedad content de los selectores CSS que se indiquen y añada el SVG directamente al elemento:
jQuery(document).ready(function() {
var replaceWithSVG = function(selector, url) {
jQuery('').appendTo('head');
jQuery.get(url, function(data) {
// Replace image with new SVG
jQuery(selector).prepend(data.replace(/<\?xml[^>]+>/, ''));
}, 'text');
}
var selectors = ['.site-title a', '.btn-video']
for(var i in selectors) {
var selector = selectors[i];
var url = window.getComputedStyle(
document.querySelector(selectors[i]), ':before'
).getPropertyValue('content');
url = url.replace(/url\(["']?([^'"\)]+)["']?\)/, '$1');
replaceWithSVG(selectors[i], url);
}
});
Interesante librería que nos permite crear imágenes PNG directamente desde Javascript, para lo cual codifica la imagen usando el formato PNG y devuelve la cadena en base64. Algo parecido a la creación de documentos PDF.
var p = new PNGlib(200, 200, 256); // construcor takes height, weight and color-depth
var background = p.color(0, 0, 0, 0); // set the background transparent
for (var i = 0, num = 200 / 10; i <= num; i+=.01) {
var x = i * 10;
var y = Math.sin(i) * Math.sin(i) * 50 + 50;
// use a color triad of Microsofts million dolar color
p.buffer[p.index(Math.floor(x), Math.floor(y - 10))] = p.color(0x00, 0x44, 0xcc);
p.buffer[p.index(Math.floor(x), Math.floor(y))] = p.color(0xcc, 0x00, 0x44);
p.buffer[p.index(Math.floor(x), Math.floor(y + 10))] = p.color(0x00, 0xcc, 0x44);
}
for (var i = 0; i < 50; i++) {
for (var j = 0; j < 50; j++) {
p.buffer[p.index(i + 90, j + 135)] = p.color(0xcc, 0x00, 0x44);
p.buffer[p.index(i + 80, j + 120)] = p.color(0x00, 0x44, 0xcc);
p.buffer[p.index(i + 100, j + 130)] = p.color(0x00, 0xcc, 0x44);
}
}
document.write('');
Sinceramente, no se me ocurre ninguna utilidad práctica a esta librería, porque puede ser sustituida facilmente por otras alternativas, pero lo que es indudable es que se trata de una gran librería.
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
}