En anieto2k están apareciendo una serie de artículos sobre los navegadores actuales y los nuevas betas que vienen (Firefox 3 y IE8) bastante interesantes que hablan sobre la memoria consumida y compatibilidad con acid3. Copio y pego un par de gráficos interesantes que hablan por sí solos, pero parece que Safari 3.1 se lleva la palma.

Y aquí los artículos completos:

• Camparativa de consumo de memoria
• Acid3 en la actualidad

Vía Ajaxian

Un servidor http programado en bash (una shell de línea de comandos para Linux) en tan sólo 20 líneas.

#!/bin/bash
# web.sh -- http://localhost:9000/hello?world

RESP=/tmp/webresp
[ -p $RESP ] || mkfifo $RESP

while true ; do
( cat $RESP ) | nc -l -p 9000 | (
REQ=`while read L && [ " " "<" "$L" ] ; do echo "$L" ; done`
echo "[`date '+%Y-%m-%d %H:%M:%S'`] $REQ" | head -1
cat >$RESP <<EOF
HTTP/1.0 200 OK
Cache-Control: private
Content-Type: text/plain
Server: bash/2.0
Connection: Close
Content-Length: ${#REQ}

$REQ
EOF
)
done

Visto en anieto2k, código original en http://paulbuchheit.blogspot.com/2007/04/webserver-in-bash.html

Cursiva o itálica:

(Vía Abadía Digital)

Hoy día de reyes, Sonia en un comentario me ha hecho una petición que creo que puede ser interesante:

Te queria preguntar algo de javascript, lo llevo buscando mucho tiempo pero no lo encuentro! No se si me voy a saber explicar bien… necesito un código que en una pagina, una imagen cambie a los segundos por otra imagen del mismo tamaño pero que cada una contenga su propio link. Espero que me entiendas y espero también tu respuesta.

Pues te he entendido perfectamente y la respuesta es muy sencilla. ¡Allá vamos!
Primero necesitas crear una capa vacía y asignarle un identificador único. Después puedes modificar su contenido mediante Javascript, localizando la capa con la función document.getElementById() y modificando su contenido con la propiedad innerHTML (puede asignarle cualquier texto y ¡también código html!). Por ejemplo:

<div id="idCapita"></div>
<script>
    // Obtenemos el elemento por su identificador
    var d = document.getElementById("idCapita");
    d.innerHTML = "El contenido ha sido modificado! <img src='imagen.gif'>";
</script>

Así que sabiendo esto, ¿cual es el siguiente paso? Crear una función que se llame cada cierto tiempo y que cambie el contenido de esta capa. Por ejemplo:

<script>
	var cont = 0;
	var arr = [
		["http://www.google.com","imagen1.gif"],
		["http://www.yahoo.com","imagen2.gif"],
		["http://www.albertovilches.com","imagen3.gif"]
	]
	function cambia() {
		var d = document.getElementById("idCapita");
		cont = cont % arr.length;
		d.innerHTML = "<a href='"+arr[cont][0]+"'><img border=0 src='"+arr[cont][1]+"'></a>";
		cont++;
	}
	function inicio() {
		cambia();
		setInterval(cambia, 1000);
	}
	window.onload=inicio;
</script>
<div id="idCapita"></div>

setInterval() se encarga de llamar a una función cada cierto tiempo. El primer parámetro es el nombre de la función, en nuestro “cambia” y el siguiente el tiempo en milisegundos, por lo que 1000 sería una llamada cada segundo.
Los enlaces y las imágenes se guardan en un array y llevamos la cuenta en una variable llamada cont. Esta variable se incrementa cada vez que llamamos a la función, de manera que se utilice un elemento distinto del array.
Pero el array tiene un tamaño limitado verdad ¿y si nos pasamos? Pues para eso utilizamos un viejo truco: la operación módulo %. Esta operación hace una división entera y se queda con el resto, de manera que al dividir siempre por el tamaño del array, siempre nos dará un número comprendido entre 0 y la longitud del array.
Pruébalo y me cuentas. ¡Feliz día de reyes!

Los selectores de CSS permiten aplicar un estilo en concreto a nuestras etiquetas basandose en el contenido de sus atributos. Así, podemos aplicar un estilo distinto a nuestros enlaces (etiqueta anchor A) en función del contenido de su atributo href.
Por ejemplo, con este ejemplo (sacado de anieto2k) obtenemos lo siguiente:

- Añadir una imagen external.gif a los enlaces externos (los que empiezan por http)
- Añadir una imagen email.gif a los enlaces a correos electrónicos (los que empiezan por mailto)
- Añadir una imagen en concreto en función de la extensión del recurso al que enlazamos. En este último caso, los archivos que acaban en .pdf tienen la imagen acrobat.gif

a[href^=”http:”] {
    background: url(external.gif) no-repeat right top;
    padding-right: 10px;
}
a[href^=”mailto:”] {
    background: url(email.gif) no-repeat right top;
    padding-right: 10px;
}
a[href$=”.pdf”] {
    background: url(acrobat.gif) no-repeat right top;
    padding-right: 10px;
}

A todos los estilos se les añade un padding a la derecha de 10 para que el texto no se solape con la imagen de fondo.

A veces nos puede hacer falta saber el contenido de una cadena en Javascript sin los espacios del principio y del final. Por ejemplo, es común hacer la siguiente validacion de un campo de un formulario para saber si esta vacío:

function valida() {
    if (document.forms['f'].campo.value == "") {
         alert('Campo vacio');
    }
}

O algún mañoso habrá intentado:

function valida() {
    if (document.forms['f'].campo.length == 0) {
         alert('Campo vacio');
    }
}

Estos dos sistemas funcionan, pero solo aparentemente. El usuario puede engañarte y meter un espacio, dejando el campo en blanco, pero que ocupa una posición (o más) y no es exactamente la cadena vacía (”") con la que comparamos.
Podemos intentar algunos trucos para eliminar los espacios, pero buscando por internet, he encontrado el método más eficaz.

String.prototype.trim = function() { return this.replace(/^s+|s+$/g, ""); };

Con esta línea, estamos declarando una función llamada trim() en la clase String. Es decir, que en cualquier cadena de texto podemos llamar al método trim() para que nos devuelva el contenido sin espacios por delante ni por detrás. La sustitución se hace con una expresión regular. Más elegante y sencillo imposible.
Ahora nuestra podemos completar nuestra validación como sigue:

String.prototype.trim = function() { return this.replace(/^s+|s+$/g, ""); };
function valida() {
    if (document.forms['f'].campo.trim().length == 0) {
         alert('Campo vacio');
    }
}

Y aunque inserten espacios en blanco, funcionará.
De todas formas, siempre es más comodo utilizar alguna librería en Javascript de validación de formularios, además de volver a validar los parámetros en el servidor.

Un test de la función:

String.prototype.trim = function() { return this.replace(/^s+|s+$/g, ""); };
var str = "   esto es una prueba   ";
alert("Cadena original: '" + str + "'");
alert("Sin espacios: '" + str.trim() + "'");

La función la he cogido de este post en Bigbold. Fijaos bien en los comentarios porque el primer método propuesto no funciona correctamente, he cogido el del primer comentarista. Ese es el que funciona y el que os acabo de poner aquí.

A raiz del post anterior, he visto que b2evolution te devuelve un bonito "Illegal tag" cuando intentas insertar codigo html que no reconoce, como el de un objeto flash incrustado.

Buscando por internet, he descubierto como conseguir que valide este código flash.
Para esto, teneis que modificar el fichero conf/_formating.php, buscando donde pone:

  'div' => E_Flow,

Y sustituirlo por

  'div' => E_Flow.' object',
  'object' => E_Iinline.' param embed',
  'embed' => E_Iinline,
  'param'  => E_Iinline,

Es decir, se modifica <div> (para que admita la etiqueta <object> en su interior) y se añaden las etiquetas <object>, <embed> y <param>.

Después, teneis que añadir los atributos. Donde pone:

$allowed_attribues = array
(

Añadirle (añadir, no sustituir) lo siguiente:

  'object' => E_Iinline.' type data width height',
  'param'  =>  E_Iinline.' width height name value',
  'embed'  =>  E_Iinline.' src type width height name value',

La única condición es que la etiqueta <object> principal del flash esté en el interior de una etiqueta <div>
Así que con todo esto conseguiremos que el siguiente código html sea válido en nuestros posts con b2evolution.

La solución la he cogido y ampliado de aquí, ya que la que proponen solo admite la etiqueta <object> pero no incluye <embed>

Si alguna vez has utilizado imágenes como fondo de elementos con CSS, te habrás fijado que en Internet Explorer 6.0, cuando pasas por encima el cursor del ratón, se produce un molesto parpadeo o "flick".
Es decir, con tener un código CSS y HTML simplemente como éste:

.mifondo {
    background: url('img/cuadradito.gif') no-repeat;
}

<div class="mifondo">Aqui aparece un cuadradito de fondo</div>

En IE6 para Windows no se va a ver bien al pasar por encima el ratón.
Es un error conocido, y en esta página te explican como reproducir el error y la solución de cada uno (para poder ver los ejemplos de la página hay que utilizar IE6 claro):

• http://www.fivesevensix.com/studies/ie6flicker/

De todas formas, y tras probar varias soluciones, la que he utilizado y que recomiendo, es la siguiente:
Solo tienes que subir al directorio en tu servidor Web donde están las imágenes que vas a utilizar como fondo en tus CSS un fichero .htaccess con el siguiente contenido:

ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000

Esta solución esta completamente explicada en:

• http://dean.edwards.name/my/flicker.html

El resto de soluciones son más laboriosas y algunas no son 100% efectivas. De todas formas sigue siendo muy recomendable leer el artículo para ver los diferentes bugs que tiene el IE6 con los background en CSS.

Si alguna vez os habíais preguntado porque las etiquetas <UL> y <LI> muestran la información con una indentación y unos puntos gorditos tiene facil respuesta: porque así viene definido en el CSS por defecto de nuestros navegadores.
Si no nos gusta este formato o simplemente queremos utilizar estas etiquetas UL y LI para otros fines, podeis probar con este código en vuestra hoja de estilos CSS:

ul, li {
    list-style-type:none;
    padding:0px;
    margin:0px;
}

Por ejemplo, un uso práctico, muy útil (es un menú desplegable) y super sencillo (solo es HTML y CSS, nada de Javascript) lo tenéis aquí mismo:
CSS horizontal navigation list