Buen truco para darle la misma altura a diferentes bloques cuando mediante CSS no es fácil de hacer.
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}Equal Height Columns with jQuery
Vía / CSS Globe
Me avisa Javier que ha desarrollado una aplicación para comprimir CSS y Javascript, parecida a Minify (del cual se obtiene gran parte del código empleado) o YUI Compressor
GameJS es una librería javascript pensada para desarrollar juegos en 2D. Aunque no tiene mucha lógica realizar juegos en Javascript, sobre todo cuando en Flash pueden realizarse mucho mejor, esta librería es aún así bastante curiosa.
Hace mucho uso de la etiqueta canvas, por lo que solo es posible usarla en los navegadores que lo soportan, posiblemente en IE también gracias a IECanvas, pero el rendimiento puede ser pobre. Dispone de varias clases de las que se hay extender para poder realizar nuestro juego.
GameJS
Vía / dzone
HTML5 a parte de añadir nuevas etiquetas, también incluye otras posibilidades javascript, como los Web Workers, los cuales permiten ejecutar scripts en paralelo (background). Por ejemplo, tenemos un proceso costoso en recursos que no es interrumpible, podemos utilizar un Worker y evitar que el navegador se nos colapse.
Su uso es bastante sencillo, se instancia un Worker que estará en un fichero javascript independiente, se indica qué hacer cuando se reciba un mensaje y ya solo queda que el javascript y el Worker se comuniquen mandándose mensajes.
El script que instancia el Worker sería así:
// Crea el Web Worker
var worker = new Worker("worker.js");
// Envía un mensaje al worker
worker.postMessage(0);
// Recibe los mensajes del Worker
worker.onmessage = function (evt) {
// evt.data es el valor devuelto por el Worker
alert(evt.data);
}
// Trata los errores
worker.onerror = function (evt) {
alert(evt.data);
}Y el worker.js sería el siguiente:
// Ejemplo de Worker
onmessage = function (evt) {
// evt.data es el valor enviado desde el javascript
for (var i=evt.data, il=1000001; iLos Workers también admiten el evento onconnect, aunque tan sólo he visto que funcione en Webkit:
onconnect = function(evt) {
postMessage('Hola, acabas de conectarte al Worker');
}Using HTML5 Web Workers to have background computational power
Uno de los trabajos iniciales con los que nos solemos encontrar al empezar un proyecto web es la de realizar el diseño inicial de la estructura de la página (layout). Normalmente se suele hacer un copy/paste de un proyecto anterior, pero en el caso de que no dispongamos de esa base previa, siempre podemos buscar en un lugar donde nos lo ofrezcan.
CSSeasy nos ofrece 8 diseños, 4 estáticos y 4 fluidos. Siendo los 4 diseños para los dos diferentes tipos los siguientes: 1 columna sin navegación, 1 columna con navegación arriba, 2 columnas con navegación izquierda y 2 columnas con navegación derecha.
Lo que se echa en falta es una explicación más detallada, ellos recomiendan ver el código fuente y experimentar con él, el código está algo comentado, pero quizás no sea necesario para gente que se esté iniciando en el diseño web o que pasen de diseño con tablas a diseño sin tablas.
CSSeasy.com
VÃa / Digg
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
En CSS ManÃa acabamos de anunciar el primer certamen que premiará a los mejores diseños en CSS.
Desde el primer dÃa que lanzamos CSS ManÃa, tenÃamos en mente el galardón. Pensábamos organizarlo mediante votación popular pero sabiendo del lÃo que se podrÃa montar qué mejor opción que contar con un prestigioso y relevante jurado como el que forman: Andy Budd, Cameron Moll, Molly E. Holzschlag, Roger Johansson y Sergio Villareal donde la calidad y el valor de los futuros premiados obtiene mayor reconocimiento.