Lawnchair: ‘base de datos’ clave-valor en Javascript

ByLuis

Lawnchair es una base de datos documental basada en JSON y que funciona en el cliente (Javascript). Puede venir muy bien para desarrollo de aplicaciones para móviles. Es muy fácl de usar y permite operaciones de escritura, lectura, búsqueda y eliminación.

var people = new Lawnchair('people');
// Saving a document async
people.save({name:'frank'}, function(r) {
    console.log(r);
});
// Specifying your own key
people.save({key:'whatever', name:'dracula'});

Lawnchair

Similar Posts

Introducción a JSON

ByLuis

JSON (JavaScript Object Notation) es un formato para intercambiar datos sencillos, entendiendo como sencillos el texto, los números y los valores lógicos, pudiendo estar organizados en estructuras.

La información en JSON se envia mediante un objeto, el cual está formado por pares atributo–valor. El atributo es un identificativo, y el valor puede estar formado por texto, números, valores lógicos (true o false), el valor vacío (null), otros objetos o arrays. Por ejemplo, un objeto puede tener sus propiedades de texto, de números, una propiedad que tenga un array de números y una propiedad que tenga un objeto parecido a sí mismo.

Read More “Introducción a JSON”

Comparativa de Data Stores

ByLuis

Entendiendo por Data Stores los sistemas de almacenamiento tanto RDBMS o NoSQL, el PDF que referencio compara los distintos tipos de data stores que hay:

  • Almacenamientos clave-valor
  • Almacenamiento de documentos
  • Similares al BigTable de Google
  • BD relacionales escalables

De cada tipo de data store explica cuales son y que características tiene, y por último hace comparativa entre ellos. También nos dice posibles ejemplos de uso:

  • Sistemas clave-valor: útil cuando los datos almacenados se basan en el acceso de información mediante un ID (sin joins) y que se actualiza pocas veces o se actualiza siempre de la misma manera.
  • Almacenamiento de documentos: cuando la información almacenada depende de varios campos (por ejemplo un stock de vehículos).
  • Sistemas basados en BigTable: se puede tratar de aplicaciones similares a los almacenamientos documentales, pero con la diferencia de que es necesario un elevado número de registros.
  • RDBMS escalables: cuando nuestra aplicación necesita de relaciones entre distintos datos y nuestro servidor se queda corto para aguantar el volumen de datos o de transacciones.

Me gustaría destacar que entre estos data store, se encuentra Cassandra, proyecto open source de Facebook, que ahora es un proyecto de Apache y que Twitter va a usar para sustituir MySQL.

High Performance Scalable Data Stores

$fx(): librería javascript para animaciones

ByLuis

$fx() es una librería que nos permite realizar animaciones de elementos HTML de forma sencilla. Altera las propiedades CSS a lo largo del tiempo pasando solo una pequeña configuración. Además se pueden combinar efectos, grupos de ellos, encadenarlos o ejecutarlos en paralelo, incluso indicar diferentes callbacks para dar una mayor flexibilidad.
Para aquellos que necesiten tan solo hacer animaciones y no quieran cargar todo el core de jQuery o Mootools, les puede venir muy bien.
$fx()
Vía / Script & Style

PopBox: zoom mediante Javascript

ByLuis

PopBox es un script que nos permite añadir el zoom a nuestras imágenes y poder apliarlas o reducirlas (con efecto de transición) de forma sencilla.
Su uso es simple, pero tiene un problema, que necesita atributos para su funcionamiento que hay que añadir a la etiqueta img, que hace que no valide el XHTML.
popbox.png
La verdad es que no es un script que me guste mucho, no valida, hay que añadir demiasados atributos y eventos, pero pensando en la gente que necesita este tipo de efectos y no les importa mucho la validación, quizás les sea interesante y realmente es fácil de usar.
PopBox
Vía / WebAppers

|

Añadir números de línea en highlight.js

ByLuis

Aprovechando la versión 1.2.0 de Snippet Block, comparto cómo añadir números de línea al código formateado por highlight.js.

El desarrollador del plugin pasa de añadir esta característica a la librería, lo cual me parece muy bien, que cada uno haga lo que quiera con su código. Pero como tampoco hay eventos o algo que permita añadir características, es necesario “hackear” la función antes de su uso.

document.addEventListener( 'DOMContentLoaded', () => {
	const prevHighligth = window.hljs.highlightBlock;
	window.hljs.highlightBlock = block => {
		const newline = '<span class="sw_new_line"></span>';
		// Replace all without regex
		block.innerHTML = block.innerHTML
			.split( newline )
			.join( '' );
		prevHighligth( block );
		if ( block.classList.contains( 'sw_show_line_numbers' ) ) {
			block.innerHTML = newline +
				block
					.innerHTML
					.replace( /\n/g, `\n${ newline }` );
		}
	};
} );

¿Qué es lo que hace este código? Primero guarda el método original highlightBlock para usarlo posteriormente. Y luego se modifica el método para apadir una clase para mostrar los números de línea al principio del código y después de cada salto de línea.

Ahora toca explicar la parte CSS, para ello usaremos CSS counters.

pre code {
	counter-reset: linenumber;
}

pre code .sw_new_line::before {
	content: counter(linenumber, decimal-leading-zero);
	counter-increment: linenumber;
	padding-right: 15px;
	font-size: 0.8em;
	opacity: 0.6;
}