Similar Posts
IE7 y Javascript
Aunque Microsoft dijo que se iba a centrar en corregir los errores en CSS y no en Javascript, no está mal decir que cosas se ha corregido y cuales estarían bien para futuras versiones.
Los errores que se han corregido son: los memory leaks cuando se hacían referencias circulares entre elementos, un fallo que cerraba la aplicación cuando se usaba la función normalize() y soporte para XMLHttpRequest de forma nativa en vez de mediante ActiveX.
Los errores que no estaría mal que corrigieran en futuras versiones son: getElementById debería ignorar el atributo name, debería cambiar el window.location cuando se navega entre referencias en el mismo documento mediante el historial, cuando se mueven checkbox mediante métodos del DOM recuperan el estado original y no conservan el que tenían, setAttribute no funciona con el atributo style o con eventos, varios atributos necesitan ser escritos usando las máyusculas en las iniciales de las plabras (camelCase), radio buttons clonados no crean su propio grupo.
Vía / QuirksBlog
Crear ventanas tipo Netvibes con Prototype
Crear ventanas flotantes en HTML es una de las cosas más difÃciles de realizar en una página web. En alguna ocasión hemos hablado de cómo realizar ventanas con HTML y Javascript.
En este caso se trata de una extensión para Prototype que con unas simples lÃneas de código seremos capaces de crear nuestras ventanas de forma rápida.
Para usarlo primero nos deberemos crear la estructura HTML:
<div id="page">
<div id="widget_col_0"></div>
<div id="widget_col_1"></div>
<div id="widget_col_2"></div>
</div>
Con sus CSS:
#page { margin: 10px auto; } #widget_col_0 { float:left; width: 30%; } #widget_col_1 { width: 50%; float:left; } #widget_col_2 { float:left; width: 20%; }
Instanciar la clase:
var portal = new Xilinus.Portal("#page div")
Y por último añadir el contenido:
portal.add(new Xilinus.Widget(), 0)
// O con tÃtulo y contenido
portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("El texto que sea"), 1);
VÃa / WebAppers
typeface.js: hacer render de texto y fuentes con javascript
typeface.js es una librería que nos permite crear texto usando fuentes mediante javascript (canvas, SVG o VML para IE). El uso es muy sencillo:
<div class="myclass typeface-js" style="font-family: Helvetiker">
Text here in Helvetiker font...
</div>
Además ofrece una utlidad en Perl que permite convertir truetypes a trucefaces.
Vía / WebAppers
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);
});
Manejar y generar excepciones en Javascript
Los que hemos trabajado con Java estamos acostumbrados a tratar y lanzar excepciones para controlar los errores, algo que en Javascript no es muy común, pero en librerías algo elaboradas podría ser muy útil.
// Clases de errores
function DivisionByZeroError() {
this.name = "DivisionByZeroError";
}
function DivisionByStringError() {
this.name = "DivisionByStringError";
}
// Funcion que devuelve un error
function divisionCanFail(a, b) {
if (b == 0) {
throw new DivisionByZeroError();
}
if (typeof b == "string") {
throw new DivisionByStringError();
}
return a / b;
}
// Funcion de test
function decoratedDivision(a, b) {
try {
alert(divisionCanFail(a, b));
} catch (error if (error.name == "DivisionByZeroError")) {
alert("A division by zero...");
alert("Exception class: " + error.name);
} catch (error if (error.name == "DivisionByStringError")) {
alert("Exception class: " + error.name);
}
}
decoratedDivision(5, "isThisANumber?!");
decoratedDivision(5, 0);
‘Bocadillos’ en tu web
Albert Lanchas nos ofrece un script que me ha gustado bastante en el que se muestran ‘bocadillos’ con imágenes dentro. El bocadillo se adapta al tamaño de la imagen y su aspecto se puede cambiar mediante CSS.
Es necesario tener instalado prototype para su funcionamiento, y su uso es bastante sencillo, incluir el script, la librerÃa prototype, la css e incluir la siguiente lÃnea para que funcione:
<a href="imagen.jpg" rel="bubble"><img src="images/bubble.png"/></a>
Yo como unica pega, intentarÃa hacer la sombra con una imagen png, para poder usar la transparencia que nos ofrece, aunque en IE6 no funcione.
VÃa / Fresqui