Una extensión que nos va a ser muy útil ya que nos permite depurar nuestras aplicaciones web. Entre las opciones que nos ofrece se encuentra la posibilidad de crear trazas en nuestras páginas web, olvidándonos así de los mensajes con alert para ver qué es lo que hace el código; nos avisa de los errores visualmente, algo que siempre he echado en falta en Firefox; inspector del DOM, CSS y eventos; línea de comandos para Javascript, se acabó el escribir el javascript: para ejecutar pruebas aisladas; monitoriza las peticiones AJAX, así como las respuestas; editor de elementos del DOM.
Completa e imprescindible FireBug
Vía / Genbeta
Curioso y sencillo plugin de jQuery que permite crear previews de imágenes enlazadas en etiquetas <a> tanto directamente en el atributo href como en el rel. Permite añadir estilos, un contenedor e incluso eventos (onload, onhide, onshow).
En SitePoint siempre sacan algún tutorial útil y que nos puede facilitar mucho nuestros desarrollos. En este caso se trata de listas de correos, quizás con el tema de las feeds, ya no se usen mucho, pero conozco a unos cuantos que aún tiran de ellas.
A grandes rasgos se trata de lo siguiente:
Un HTML dentro de un PHP que recibe las direcciones de correo de los usuarios.
Un Javascript que leerá cada cierto tiempo el formulario y realizará una llamada AJAX al servidor con la dirección de correo introducida.
Un script PHP que recibe la dirección, comprueba si es correcta, la almacena en la base de datos y manda un mensaje de que todo ha ido bien o de que ha habido error a la página web para que la muestre al usuario.
Hace tiempo comenté cómo hacer drag & drop directamente sobre el navegador, lo cual nos venía muy bien para subir ficheros (por ejemplo para un correo, galería de fotos, …). Esta vez se trata de descargar ficheros directamente desde el navegador, algo que permite GMail desde Chrome.
El autor de este post lo ha tenido difícil para poder ver cómo lo hace Google, pero al final el código es bastante sencillo:
var file = document.getElementById("dragout");
file.addEventListener("dragstart",function(evt){
evt.dataTransfer.setData("DownloadURL",fileDetails);
},false);
Una lista de más de 30 extensiones para Firefox que nos pueden ayudar en nuestros desarrollos web. Algunas ya son conocidas, pero alguna otra que desconocÃa parecen bastante interesantes.
CSS
Aardvark: permite ver atributos CSS, ids y clases seleccionando elementos de la página de forma individual.
chromEdit: permite modificar los CSS y los javascripts de cualquier página.
La jerarquía de las plantillas de wordpress permite definir diferentes plantillas para mostrar según el tipo de contenido. Por ejemplo, la template para mostrar el contenido de un post es single.php, pero si es un custom post type podemos crearnos la template single-miposttype.php y que use esa plantilla específica para mostrar los contenidos del custom post type. Si se trata de una página mostrará page.php, y así con todos los tipos de contenido.
Lo que nos encontramos en ocasiones es que queremos ejecutar un javascript específico asociado a esa plantilla, lo cual podemos hacerlo a la hora de añadir los scripts preguntando por el tipo de contenido. Pero si lo queremos hacer de una forma más automática, podemos añadir en el filtro template_include la acción de añadir el script.
add_filter('template_include', 'js_load_script_template');
function js_load_script_template($template) {
// Obtenemos el fichero de la template que se usa
$js = pathinfo($template);
$js = $js['filename'];
// Me gusta obtener la versión del theme para evitar caches
$my_theme = wp_get_theme();
$version = $my_theme->get( 'Version' );
// Si el fichero js existe, p.e. single-miposttype.js lo añadimos
if (file_exists(get_template_directory().'/js/'.$js.'.js')) {
wp_enqueue_script( $js, get_bloginfo('template_directory').'/js/'.$js.'.js', array(), $version );
}
// Tambien ejecuto el script relacionado con la plantilla generica, p.e. single.js
$js_part = preg_replace('#^([^\-]+)\-.*$#', '$1', $js);
if ($js != $js_part && file_exists(get_template_directory().'/js/'.$js_part.'.js')) {
wp_enqueue_script( $js_part, get_bloginfo('template_directory').'/js/'.$js_part.'.js', array(), $version );
}
return $template;
}
El desarrollador del plugin pasa de añadir esta característica a la librería, lo cual me parece muy bien, que cada uno haga lo que quiera con su código. Pero como tampoco hay eventos o algo que permita añadir características, es necesario “hackear” la función antes de su uso.
¿Qué es lo que hace este código? Primero guarda el método original highlightBlock para usarlo posteriormente. Y luego se modifica el método para apadir una clase para mostrar los números de línea al principio del código y después de cada salto de línea.
Ahora toca explicar la parte CSS, para ello usaremos CSS counters.