Preview de imágenes en enlaces con jQuery

ByLuis

Curioso y sencillo plugin de jQuery que permite crear previews de imágenes enlazadas en etiquetas <a> tanto directamente en el atributo href como en el rel. Permite añadir estilos, un contenedor e incluso eventos (onload, onhide, onshow).

imagepreview.png

$('ul#fourth a').imgPreview({
containerID: 'imgPreviewWithStyles',
imgCSS: {
// Limit preview size:
height: 200
},
// When container is shown:
onShow: function(link){
$('' + $(link).text() + '').appendTo(this);
},
// When container hides:
onHide: function(link){
$('span', this).remove();
}
});

New jQuery plugin: ‘imgPreview’

Similar Posts

Librerías Javascript para mostrar información de imagenes y añadir efectos

ByLuis

Dos interesantes y currados scripts que te permiten manipular imágenes. Uno de ellos te devuelve la información EXIF de la imágen: formato, versión, ancho, alto, bits por pixel, alpha, mimeType, tamaño en bytes e información EXIF (solo para JPEG).
La otra librería Javascript te permite realizar efectos en las imágenes, usando canvas o lo propio de IE (no todos los efectos los permite IE): flip horizontal, flip vertical, invertir, desaturacización, blur, sharpen, edges, emboss, laplace, ruido, brillo, sepia e histograma.
Librerías muy interesantes para proyectos que permitan subir o manipular imágenes (tipo fotolog).
Javascript Image Effects e ImageInfo
Vía / @rafabayona

| |

DOMSlides

ByLuis

domslides.gif Supongo que S5, el sistema para realizar presentaciones basado en estándares desarrollado por Eric Meyer, es ya un viejo conocido.

He de confesar que no lo he utilizado nunca. Y seguramente jamás llegue a hacerlo: me parece que es como matar moscas a cañonazos (Si no te gusta Powerpoint, puedes realizar presentaciones con OpenOffice o hacer un bonito PDF).

Pues bien, hace unas semanas que estamos trabajando con otro sistema, basado también en XHTML, CSS y javascript, que nos permite generar la presentación a partir de un solo documento:

DOMSlides de Christian Heilmann, ligero y grácil cual felino. Y sino, compruébalo navegando por la demo.

jsMSX: emulador de MSX con Javascript y Canvas

ByLuis

MSX es un ordenador de hace la tira de años que cuando eramos pequeños nos parecía increíble y que ahora nos parece paleolítico. jsMSX es un emulador realizado en Javascript y Canvas que permite ejecutar juegos para ese sistema.
jsmsx.png
En sí la aplicación no tiene mucha utilidad, pero es interesante desde el punto de vista de lo que se está consiguiendo mediante Javascript y Canvas.
jsMSX
Via / @lardissone

Hapi.js+Vue.js reorganizar la configuración del servidor

Hapi.js+Vue.js reorganizar la configuración del servidor

ByLuis

Algo bastante importante en un proyecto es la configuración y cómo se gestiona. Para facilitar la gestión usaremos dos librerías dotenv y confidence, la primera permite usar ficheros .env en nuestro entorno de desarrollo para simular variables de entorno. La segunda nos ayudará a recuperar las variables de un objeto permitiendo usar filtros, por ejemplo según de las variables de entorno.

Instalaremos los paquetes:

npm i dotenv
npm i confidence

Confidence necesitará un criterio que nos permitirá obtener distintos resultados según su valor. Imaginemos que tenemos el siguiente criterio:

const criteria = {
	env: 'development',
};

Y estos datos de configuración:

{
	debugLevel: {
		$filter: 'env',
		development: INFO,
		production: ERROR,
	},
}

Si queremos acceder al nivel de debug, al ser env igual a development, obtendíamos INFO.

Vale, ¿y cómo lo usamos en el proyecto? Primero creamos una carpeta config, donde crearemos el fichero index.js que tendrá toda la configuración del servidor:

const Confidence = require( 'confidence' );
const Dotenv = require( 'dotenv' );

Dotenv.config( { silent: true } );

// NODE_ENV is used in package.json for running development or production environment
const criteria = {
	env: process.env.NODE_ENV,
};

const config = {
	port: 3001,
};

const store = new Confidence.Store( config );

exports.get = function( key ) {
	return store.get( key, criteria );
};

exports.meta = function( key ) {
	return store.meta( key, criteria );
};

Dotenv simplemente se usa para obtener de las variables de entorno de servidor el valor de NODE_ENV. Por ahora solo tendremos la variable port, pero ya estará preparado para poder añadir otras variables de configuración posteriormente.

Creamos un store de Confidence y exportaremos los métodos get y meta.

Haremos algo parecido para el manifest necesario para Glue, creando el fichero manifest.js dentro del directorio config:

const Confidence = require( 'confidence' );
const Config = require( './index' );

const criteria = {
	env: process.env.NODE_ENV,
};

const manifest = {
	server: {
		port: Config.get( '/port' ),
	},
};

const store = new Confidence.Store( manifest );

exports.get = function( key ) {
	return store.get( key, criteria );
};

exports.meta = function( key ) {
	return store.meta( key, criteria );
};

Como se puede apreciar fácilmente obtenemos el valor de port de forma bastante simple.

Y por último modificamos el fichero index.js para hacer eso de estos nuevos ficheros:

const Glue = require( '@hapi/glue' );
const Manifest = require( './config/manifest' );

const options = {
	relativeTo: __dirname,
};

const startServer = async function() {
	try {
		const manifest = Manifest.get( '/' );
		const server = await Glue.compose( manifest, options );
		await server.start();
		console.log( 'hapi days!' ); // eslint-disable-line
	} catch ( err ) {
		console.error( err ); // eslint-disable-line
		process.exit( 1 );
	}
};

startServer();

Puedes bajarte el código aquí