John Resig nos ofrece una serie de enlaces y ejemplos para empezar con FUEL:

• FUEL - Página principal (API y ejemplos)
• FUEL - Documentación (API)
• FUEL - Presentación (John Resig)
• FUEL - Presentación (Mark Finkle)
• STEEL - Ejemplo versión para Thunderbird.

Simple Extensions in Firefox 3

Cuando la extensión detecta que la página que accedemos está en su lista de servidores intercambiables, nos mostrará un icono en la ruta de la página que será el que pulsemos para realizar el cambio de servidor.

Entre otras características permite HTTPS, directorios y accesos directos a fichero (file:///D:/www).

Server Switcher

Gracias David por el aviso

Mediante Webrunner podemos ejecutar aplicaciones web en nuestro escritorio. No se trata como en el caso de Adobe AIR y Microsoft Silverlight que pretender crear una alternativa de la web. Se trata de extraer del navegador aplicaciones web y ejecutarlas (mediante XUL) en nuestro escritorio, por lo que estas aplicaciones web podrán hacer uso de HTML, JavaScript, CSS, y <canvas>.

Una buena alternativa para las aplicaciones web que se hacen para empresas.

Prism

Gracias Dani por el aviso

No es necesario reemplazar la versión actual de Firefox, ya que se trata de una versión portable, con lo que podremos tenerlo en nuestra unidad USB u otro soporte para poder ejecutarlo en el ordenador que sea sin necesidad de instalación. Tan solo es necesario cerrar cualquier otra versión de Firefox antes de ejecutar esta.

A parte de hacer un uso más eficiente de CPU y memoria, tiene instalado algunos add-ons que mejoran el rendimiento de Firefox, como son Fasterfox, Flashblock y NoScript.

Firefox Wonder Edition

Vía / Digg

La gran utilidad que le veo a este script es la de poder generar how-to, sobre todo en proyectos para poder generar casos para los tests de prueba.

A parte, existe un repositorio de scripts que comparten con los usuarios .

coScripter

Vía / SitePoint

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.
• CSSMate: edición de ficheros CSS.
• CSS validator: valida los CSS de tu página.
• CSSViewer: visualiza propiedades CSS.
• EditCSS: permite modificar los CSS cargados.
• IE Tab: visualiza la página en Internet Explorer.
• Style Sheet Chooser II: permite seleccionar CSS alternativos para una página.

Debug y análisis

• FireBug: consola para realizar debugs de JavaScript, HTML y llamadas Ajax.
• HTML Validator: valida la página con el estándar HTML de W3C.
• JavaScript Debugger: debug de Javascript.
• Link Checker: comprueba si los enlaces de una página son válidos.
• Load Time Analyzer: muestra gráficas del tiempo de carga de una página en Firefox.
• View Dependencies: busca todos los ficheros que se cargan al visualizar una página.

Otros

• Clipmarks: guarda partes de la página web.
• Codetech: editor web con la apariencia de Dreamweaver.
• ColorZilla: obtiene colores de las páginas visitadas.
• FirePHP: ayuda a depurar PHP.
• Greasemonkey: controla cualquier aspecto del comportamiento de las paginas web.
• Measureit : mide en pixels el tamaño de partes de las páginas web.
• Platypus: una de las mejores extensiones para modificar una página web.
• Poster: permite interactuar con web services y otros recursos web.
• Professor X: comprueba los contenidos de la cabecera de una página web.
• Screen grab: guarda páginas web cómo imágenes.
• TestGen4Web: guarda la actividad de los usuarios en páginas web.
• View Source Chart: visualizador de código fuente.
• Web Developer: colección de herramientas para desarrolladores web.
• X-Ray: permite ver el código fuente de una página y alternar entre ambos de forma sencilla.

30+ Firefox Add-ons for Web Developers & Designers

Vía / Digg

La gente de PC Magazine nos dan una serie de consejos o pasos a seguir para aprender a realizar nuestra propia extensión Firefox.

El primer consejo que nos ofrecen es algo que ya hemos dicho aquí, destripa una extensión ya creada, guarda el fichero .xpi en tu ordenador, renómbralo a .zip, descomprímelo y échale un vistazo a los directorios (muy importante su organización) y sus archivos (sobre todo install.rdf o install.js).

Crea primeramente la interfaz, existen interfaces más complejas, pero es preferible empezar por algo sencillo para ir aprendiendo poco a poco. Una vez creada es hora de empezar a darle funcionalidades, crear el jar con los archivos (aunque también funciona sin comprimirlo en un jar), modificar el fichero de instalación, crear el fichero .xpi (que es un zip con todo el contenido de la extensión) y por último instalarlo en el Firefox.

Make Your Own Firefox Extensions

Se trata de una aplicación gratuita, todavía en fase de desarrollo que nos puede ser de gran utilidad cuando maquetamos un diseño y queremos que se vea correctamente en ambos navegadores. Aunque yo prefiero usar un editor normal y refrescar el contenido en el navegador que esté probando en ese momento.

CSSVista

Vía / Lifehacker

Notación Lambda

La notación Lambda nos permite declarar funciones que devuelvan datos sin necesidad de llaves ({..}), ni de devolver directamente el resultado con return.

Por ejemplo, la siguiente función:

function(x) { return x * x; }

pasaría a ser:

function(x) x * x

Generador de expresiones

Existente ya en Phyton, nos permite generar expresiones como arrays o matrices de forma rápida y elegante. Para una explicación con un poco de profundidad, el autor del artículo usa un solucionador de Sudokus para explicarnos paso a paso cómo funcionan. Quizás un ejemplo más sencillo sea el siguiente:

// Crea un array de 100 posiciones rellenas con cero
[ 0 for ( i in 100 ) ]
 
// Crea una matriz identidad de 10x10
[[ i == j ? 1 : 0 for ( i in 10 ) ] for ( j in 10 )] 

También se pueden utilizar para comprimir arrays, por ejemplo quedarnos solo con los valores pares:

[i for (i in lista) if (i % 2 == 0)]

Reducción de arrays

Permite reducir iterativamente un array a un solo valor usando una función llamada de retorno.

La nomenclatura sería de la siguiente forma:

miArray.reduce( fn [, val_inicial] );

// La función sería de la siguiente manera
miArray.reduce(function(ultimo_valor, valor_actual){
  return ultimo_valor + valor_actual;
});

Si combinamos los dos puntos anteriores, podemos obtener la suma de los cien primeros números de la siguiente manera:

[x for ( x in 100 )].reduce(function(a,b) a+b);

JavaScript 1.8 Progress

Vía / dzone

Este fallo se produce porque el usuario no puede confiar (trust) en el DNS o en la conexión. Extensiones importantes como Google Toolbar, Google Browser Sync, Yahoo Toolbar y Del.icio.us Extension, están expuestas a esta vulnerabilidad, la cual permitiría instalar software peligroso en nuestro sistema.

Las extensiones que se descargan desde https://addons.mozilla.org no nos deben preocupar. A parte del equipo de seguridad de Mozilla, los desarrolladores de las principales extensiones expuestas fueron avisadas hace 45 días sin que haya habido actualizaciónes.

Existe un vídeo que muestra un ataque a Google Browser Sync: (12MB Quicktime).

A Remote Vulnerability in Firefox Extensions

Vía / Techmeme

Entre sus objetivos nos encontramos con la facilidad de acceder a las interfaces, componentes y servicios, disponer de paquetes para abrir ventanas, para tratar el nsIProcess, y para tratar ficheros, texto o stream enviado mediante XMLHttpRequest.

Es importante resaltar también que nos ayudará al acceso a datos (bookmarks, microsumarios y proveedores de búsquedas), al monitoreo de eventos y notificaciones, e interactuación con el UI de la aplicación.

Estoy deseando tener un poco de tiempo para mirarlo con detalle, ya que a veces al desarrollar una aplicación XUL nos encontramos con unas librerías un tanto enrevesadas.

FUEL

Vía / Ajaxline

Las características que nos ofrece Fireclipse son las siguientes:

• Envía los mensajes de error de la consola de Firefox a la consola de Eclipse.
• Apunta el editor de Eclipse en la línea que Firefox ha marcado como errónea.
• Llama a la función dump() en la consola de Eclipse.
• Añade un botón de Eclipse en la extensión Firebug.
• La extensión de Firebug permite: depurar el código eval(), depurar manejadores de eventos, enviar mensajes de error a Eclipse y marcar las líneas ejecutables.

Una ayuda para aquellos que desarrollen con Eclipse y Firofox.

Fireclipse

Vía / Ajaxian

El ejemplo que nos ofrecen muestra cómo se accede a una página de búsquedas de casas y se van introduciendo datos para obtener los resultados deseados. En la extensión para Firefox se va mostrando mediante texto las acciones que se ejecutan, por ejemplo "Acceder a la pagina tal", "Seleccionar '2 habitaciones'" y así con cada una de las acciones que hemos ido realizando. Estos textos son editables y después cuando se ejecuta el script para aprender el howto, se tienen en cuenta los datos cambiados.

La verdad es que estoy deseando que se haga pública esta extensión, a muchos nos podría ahorrar documentación para los proyectos.

Koala

Vía / CNET News.com

El formato más sencillo al que exporta los colores es un fichero de texto con los componentes RGB de cada color en formato decimal. Pero lo que más nos puede ser útil es que lo exporta a formatos de paleta de colores de Adobe, Flash, Paintshop Pro, GIMP y Adobe Fireworks.

Esta herramienta la veo muy útil para cuando te mandan hacer un prototipo de alguna página nueva y hay que basarse en un diseño que no es tuyo, por lo que no tienes el original sobre el que se trabajó.

Palette Grabber

Vamos a ir paso a paso, explicando la estructura, los distintos ficheros y sus contenidos, siempre dentro de mi limitado conocimiento, ya que lo que he aprendido ha sido destripando otras extensiones y mirando la documentación que hay sobre XUL.