|

Animated Table Sort with REGEXP Friendly

ByLuis

Animated Table Sort is a plugin that allows you to animatedly sort a table based on a column’s <td>s, or on the content/value of a child/descendant element within those <td>s. The various <td>s fly to their new homes, giving a nice …

Post original

Similar Posts

|

PaintbrushJS – Browser Based Image Processing Library

ByLuis

PaintbrushJS is a lightweight, browser-based image processing library that can apply various visual filters to images within a web page.You use it by applying a class to an element on the page and setting a few parameters with some extra HTML attributes. If the element is an img or it has a background-image set in your CSS, PaintbrushJS will create …

Post original

Sincronicar scrolls entre capas con jQuery

ByLuis

Interesante script que permite sincronizar scrolls en diferentes divs para que al mover uno el resto también se muevan

jQuery.fn.synchronizeScroll = function() {
var elements = this;
if (elements.length <= 1) return;
elements.scroll(
function() {
var left = $(this).scrollLeft();
var top = $(this).scrollTop();
elements.each(
function() {
if ($(this).scrollLeft() != left) $(this).scrollLeft(left);
if ($(this).scrollTop() != top) $(this).scrollTop(top);
});
});
}

Synchronizing Scrollbars using JQuery

Hapi.js + Vue.js empezando con las routes

Hapi.js + Vue.js empezando con las routes

ByLuis

Empezamos a mostrar contenido, hasta ahora solo mostraba un error 404 cuando se accedía a la URL del servidor.

Ahora vamos a añadir una route simple que muestre un objeto JSON cuando se acceda a la home. Recordad que la parte del servidor solo va a devolver respuestas JSON que tratará el frontend.

Usaremos plugins para tratar todas las rutas que incluiremos en glue. En este ejemplo tan solo añadiremos un route al server que devuelva un mensaje:

const Config = require( '../config' );

const websiteName = Config.get( '/website/name' );

const register = function( server, serverOptions ) { // eslint-disable-line
	server.route( {
		method: 'GET',
		path: '/',
		options: {
			tags: [ 'api', 'home' ],
			description: 'Server home',
			notes: 'Server home',
			auth: false,
		},
		handler: function( request, h ) { // eslint-disable-line
			return {
				message: `Welcome to ${ websiteName }`,
			};
		},
	} );
};

module.exports = {
	name: 'api-home',
	dependencies: [],
	register,
};

Ahora solo falta añadir el plugin en el manifest.js

const manifest = {
	server: {
		port: Config.get( '/server/port' ),
	},
	register: {
		plugins: [
			{
				plugin: './api/home',
			},
		],
	},
};

Puedes bajarte el código aquí

Mejor técnica para herencia en Javascript

ByLuis

Muy buen artículo que nos explica paso a paso cómo conseguir implementar la herencia en Javascript. Aunque Javascript no es un lenguaje pensado en la orientación a objetos, últimamente debido al Ajax y a las librerías que van apareciendo, nos solemos encontrar con la necesidad de implementar OO en nuestras aplicaciones clientes y, en casos menos frecuentes, tratar el tema de la herencia en Javascript.
Este artículo nos explica desde el inicio de herencia entre clases, hasta los problemas con los que nos vamos encontrando. El problema más frecuente es cuando una clase llama a un método de la clase padre, si se usa this en la clase padre, usará la clase padre, y no la hija, que es lo que se supone que se espera que haga.
Otro problema que nos explica, es la necesidad de indicar cuál es la clase padre, para poder referenciarla. Si se especifica directamente, se puede solucionar el problema, pero si la estructura de clases es compleja, especificar en cada una de ellas cuál es el progenitor, nos encontramos con una estructura difícil de mantener.
A parte de resolvernos la realización de herencia entre clases en Javascript, este artículo nos enseña a resolver los problemas que nos podemos encontrar, ya que hubiera sido más sencillo darnos la solución, explicarla y listo, pero sin embargo lo que hace es ofrecer soluciones iniciales, ver que problemas representa y luego solucionarlos y pasar a otra versión mejorada.
También me gustaría destacar la explicación de los métodos call() y apply() que poseen las funciones en Javascript. Hay que tener en cuenta que en Javascript las funciones son tratadas como objetos, admiten propiedades y métodos. El método call() permite especificar el this utilizado, mientras que el método apply() el array de argumentos que se le pasa a la función.
Introducing the best Javascript Inheritance Technique