Similar Posts
Motor 3D para jQuery
PaintbrushJS – Browser Based Image Processing Library
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 …
Testear páginas web con AVA y PhantomJS
Estoy colaborando junto a @jlantunez y @belelros en WebSlides, un proyecto open source que permite crear presentaciones usando un navegador web de forma increíble.
Para hacer las cosas bien, vamos a incluir pruebas de testing, y para ello he mirado cómo hacerlo con AVA y PhantomJS. El problema con el que me he encontrado ha sido que todo es asíncrono y a veces da un poco de problemas esperar a cargar la página para que AVA empiece a realizar las pruebas.
Además no es plan de cargar la página en cada una de las pruebas, por lo que cargo la página una vez y luego realizo las pruebas necesarias. Esto me obliga a que las pruebas sean secuenciales en vez de en paralelo, pero bueno, tampoco es mucho problema.
Como me he roto la cabeza intentado averiguar cómo hacer, ya que soy un tanto novato en esto, pongo el código para aquel que lo necesite, aunque bueno, en breve estará en GitHub:
// Cargo las librerías
let phantom = require("phantom");
import test from 'ava';
// Para almacenar lo que PhantomJS necesita
let ph_, page_, status_;
// Función que carga la página
const load = async () => {
await phantom.create().then(async ph => {
ph_ = ph;
return await ph_.createPage();
}).then(page => {
page_ = page;
return page_.open('http://webslides.tv/');
}).then(status => {
status_ = status;
return true;
}).catch(e => console.log(e));
}
// Tests
test.serial("Page loaded", async t => {
await load();
t.is(status_, 'success');
});
test.serial('#webslides exits', async t => {
await page_
.evaluate( () => document.querySelector('#webslides') != null )
.then( ws => { t.truthy(ws); } );
});
test.serial('WebSlides object exits', async t => {
await page_
.evaluate( () => window.ws != null )
.then( ws => { t.truthy(ws); } );
});
/**
* Last test
*/
test.serial('Closing', async t => {
await page_.close();
ph_.exit();
t.true(true);
});
6 razones para utilizar librerías o frameworks Javascript
Últimamente los frameworks de Javascript que aparecen son cada vez más numerosos, y aunque ya en alguna ocasión hemos hablado de esto, no está mal recordar y añadir otros puntos por los que deberÃamos usar estas librerÃas o frameworks.
- No reinventes la rueda: no pierdas en tiempo en hacer algo que ya han hecho otros y que además dan buen resultado.
- Haz más con menos código: estas librerÃas suelen permitir encadenar código, por lo que con menos código se consigue menos espacio, mejor mantenimiento y menos tiempo de desarrollo.
- Ahorra tiempo: por mucho que te guste programar en Javascript, ahorrarás tiempo al realizarlo mediante estas librerÃas.
- No eres el mejor programador: por mucho que tu ego te diga que eres bueno, los hay mejores. Además, estas librerÃas suelen estar apoyadas por una comunidad que hace mejorar el trabajo.
- Velocidad: estas librerÃas suelen ser muy rápidas a la hora de realizar las acciones. Visita esta página para comprobarlo.
- El código se entiende mejor: el código base de Javascript puede ser más complicado de leer y entender.
Nitobi UI: elementos UI para javascript
Impresionante librería para incluir elementos UI en nuestras aplicaciones javascript. Contiene los siguientes elementos:
- Grid: tabla con celdas estilo hoja de cálculo
- TreeGrid: igual que el anterior pero permite desplegar filas
- ComboBox: un combo mas interactivo, como los de auto-sugerencias
- TabStrip: gestión de pestañas
- Tree: árbol de datos, tipo directorios/ficheros
- FishEye: aumentar elementos con efecto “ojo de pez”
- Callout: mensajes popup en plan bocadillo
- Spotlight: resaltar elementos DOM, muy útil para realizar guías interactivas
- Calendar: calendarios
- Toolkit: herramientas varias para Ajax
Sincronicar scrolls entre capas con jQuery
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);
});
});
}