10 Essential Firefox Addons

There is a bunch of essential tools that make your life easier and you get used to them. They make your working experience more pleasant and often less awkward. In this post I will introduce you 5 Firefox Addons that no developer should miss, and later other five of general use but no less interesting.

Web Developer
https://addons.mozilla.org/en-US/firefox/addon/60
It adds a toolbar (which I suggest you to disable and use shortcuts instead), from which you can:
-Edit/disable certain elements from a web page (css, js, images).
-Send the current page to the W3C validators, even if the page is not hosted yet.
-Work with forms (auto fill, see parameters information, change properties).
-The Outline tool allows you to see each element that you hover with coloured borders.
-Resize: it comes with several predefined screen sizes to test how your page will look on each one.

URL Params
https://addons.mozilla.org/en-US/firefox/addon/1290
This small addon allows you to see which parameters (get and post) a page received and allows you to modify them, it is very useful to test input scripts without having to fill the forms again.

Firebug
https://addons.mozilla.org/en-US/firefox/addon/1843
This is an excellent tool to analyse your code and page behavior. You can inspect the HTML, JS, dom, see errors, and it has a Net tab which shows you every request that the page made (this is incredibly useful for debugging Ajax applications) and also to see how long it took for your page and its elements to load. Given its high memory requirements it is usually recommended to keep it deactivated and only turn it on when you need it.

IE Tab
https://addons.mozilla.org/en-US/firefox/addon/1419
Want to test your page on IE? you don't need IE!
IE Tab allows you to open an Internet Explorer tab in Firefox.

IMacros
https://addons.mozilla.org/en-US/firefox/addon/3863
IMacros is a recording tool that you can use to record certain activities that you need to do very often and trigger them easily.

---

Adblock Plus
https://addons.mozilla.org/en-US/firefox/addon/1865
This is the ultimate anti-ad solution. It compares the page against a list of common ad systems and HTML ad models, and simply removes them from your view. You can also customize it to be disabled on certain pages and also add your own patterns to the list in case you found an add that Adblock Plus didn't detect.

FoxTab
https://addons.mozilla.org/en-US/firefox/addon/8879
Bored of the normal tab system? FoxTab makes it look cool!

Del.Icio.Us Bookmarks
https://addons.mozilla.org/en-US/firefox/addon/3615
So far until today, most browsers make working with bookmarks a PITA. You switch computers or even user accounts and your bookmarks are gone. To solve this problem Del.Icio.Us was invented, you can create and account and login through Firefox using this plugin, it will replace the Firefox default bookmark system, showing you the bookmarks that are associated to your Del.Icio.Us account.

TabPopup
https://addons.mozilla.org/en-US/firefox/addon/8253
See a preview of your tabs before switching to them.

ColorZilla
https://addons.mozilla.org/en-US/firefox/addon/271
This little addon is very useful if you need an eyedropper to pick colors from your pages, which is something you will be doing a lot if you are a designer.

NOTE: Some of these addons can be out of date or changed their URLs after some time, but most of them still exist, so in case these links don't work feel free to Google them :)

960 Grid System

Any person who is attempting to create a new page layout and wants to be somewhat organized in doing it, will have to start adding guide lines to their graphic designing program before they even start actually designing. The purpose of this is having containers, margins, paddings, widths and heights before they can put content to the design.

To make the designing task a bit simpler, the 960 Grid System was created. The projects proposes a new standard based on a width of 960px for a website, and a group of 12 or 16 columns of fixed size, separated by 20px spaces.

You can find on the website a downloadable kit in which you will find:

• An empty outline on pdf format that you can print and draw on it.
  
• Base files for Photoshop, Fireworks, OmniGraffle and Visio.
• XHTML Strict + CSS code made for those templates.
  

While using this does not imply that your design will be completely resolved, it certainly does help when you need to find a place for each of the components in your layout.

Server-Side video conversion

In a recent project I found this little program: http://ffmpeg.mplayerhq.hu/ (with versions for Linux and Windows). Its main functionality is video processing for several purposes (conversion, compression, cropping, shrinking, joining, resizing, thumbnailing).

This is being very useful for us when converting user uploaded videos in several formats (mov, avi, mpg, wmv) to .flv format, which can be easily played in a web page using a flash component.

I recommend:
For video conversion: http://ffmpeg.mplayerhq.hu/
For video playback: http://www.jeroenwijering.com/?item=JW_FLV_Media_Player

FF3 Download Day: ¡¡¡17 de Junio!!!

No olvides el día 17 de Junio, descargá Firefox 3
y ayudá a batir el record mundial de descarga de software.

¿Cómo lo harán los nuevos?

Encontré este texto hace un tiempo, titulado en inglés "If they come, how will they build it?", pido disculpas por la pésima traducción, pero aún así me gustaría compartirlo con los lectores.

Lo que viene a continuación es un intercambio de e-mails entre dos desarrolladores en una empresa, uno de ellos recién ingresado y el otro un veterano del proyecto:

Fecha: Domingo, 9 de Septiembre, 2007
De: Ed Johnson
A: Mike Cooper

Hola Mike,
Hoy empecé en el proyecto AccountView. Me puedes decir cómo obtener el código y empezar a desarrollar?
Gracias!
Ed.

---

De: Mike Cooper
A: Ed Johnson

Hola Ed,
El código está todo en el CVS, en el módulo llamado AccountView, sólo hazle checkout y estarás listo para seguir. Como habrás notado, todos estamos usando el Eclipse aquí. Es todo lo que necesitas para comenzar.
Mike

---

De: Ed Johnson
A: Mike Cooper

Mike,
Me podrías pasar los datos de la conexión al CVS? Tendré acceso automático? O alguien me tiene que crear una cuenta?
Ed.

---

De: Mike Cooper
A: Ed Johnson

Ed,
Aquí están los datos de mi setup de Eclipse, los tuyos serán similares:
module=AccountView
connection=pserver:/itserver/cvs:
port=1080
login=cooper
Tal vez tengas que pedirle a Arnold que te dé acceso al CVS.
Mike

---

De: Ed Johnson
A: Mike Cooper

>> Tal vez tengas que pedirle a Arnold que te dé acceso al CVS.
Aún no me han presentado a Arnold, o al menos no lo recuerdo, dónde está?

---

De: Mike Cooper
A: Ed Johnson

>> Aún no me han presentado a Arnold, o al menos no lo recuerdo, dónde está?
Oh cierto! lo olvidé, él está enfermo hoy, salvo que puedas encontrar a alguien con los permisos apropiados, tendrás que esperar hasta que vuelva, supuestamente mañana.
M.

---

De: Ed Johnson
A: Mike Cooper

No encuentro a nadie que sepa de cuentas de CVS, así que parece que tendré que esperar hasta que Arnold vuelva.
Ed.

---

De: Ed Johnson
A: Mike Cooper

Mike,
Al fin tuve acceso al CVS por Arnold, así que descargué el módulo AccountView, pero no compila. El proyecto tiene dependencias en más o menos otros 5 proyectos, intenté descargarlos también, pero algunos de ellos tampoco compilan. Cómo puedo hacer para desarrollar sin que las dependencias compilen?
Ed

---

De: Mike Cooper
A: Ed Johnson

Ah sí! olvidé decirte acerca de las dependencias. No me sorprende que no te compilen. Yo tengo versiones en mi máquina que compilan pero no les he hecho checkin en bastante tiempo. Dame 15 minutos y las commiteo, con eso deberías poder comenzar.
M.

---

De: Ed Johnson
A: Mike Cooper

Mike,
Ya tengo tus check ins, pero el proyecto aún no compila. Puede ser que hayas omitido alguna librería?
Ed

---

De: Mike Cooper
A: Ed Johnson

OK - prueba de nuevo.

---

De: Ed Johnson
A: Mike Cooper

Gracias, eso lo arregló pero ha expuesto otro problema! Algunos archivos que utilizaban esa librería también hacen referencia a un package llamado "com.itview.accountview.domain". de dónde lo puedo sacar?

---

De: Mike Cooper
A: Ed Johnson

>> de dónde lo puedo sacar?
Esas clases se generan de los mapping XML. Corre el ant: gen-dom para ese proyecto y las tendrás.

---

From:Ed Johnson
A: Mike Cooper

Gracias! Creo que ya todo compila, pero se cae cuando lo corro. Tengo este error de MySQL: "MySQL - unable to establish connection". Acaso tenía que instalar algún componente de base de datos del que no me hayan informado?

---

De: Mike Cooper
A: Ed Johnson

>> Acaso tenía que instalar algún componente de base de datos del que no me hayan informado?
AccountView tiene una base de datos, pensé que lo sabías! Tendrás que instalar MySQL y correr un par de Ants para setear el esquema. Disculpa que no te puedo ayudar con más detalles ahora pero tengo que lanzar la próxima versión de AccountView y hay un millón de bugs para arreglar. Espero que esto te sirva para empezar.

---

De: Ed Johnson
A: Mike Cooper

Ya instalé MySQL 5.1 y tengo una copia del driver JDBC (supongo que eso hará falta). Incluso creo que instalé el esquema correctamente, tuve que probar con varios ants y correrlos en varios órdenes pero creo que tengo algo que funciona (o al menos se conecta a la base de datos correctamente). Pero al ejecutarlo tengo este error "Query error: Failed to find Deployment variable 'AV_Release'". alguna idea?

---

De: Ed Johnson
A: Mike Cooper

Hola Mike,
Recibiste mi email acerca del "Deployment variable" / problema de SQL que estoy teniendo?
Ed.

---

De: Mike Cooper
A: Ed Johnson

Hola Ed,
Sí, recibí tu email, disculpa que no he tenido tiempo de responderlo pero he estado ocupado con el próximo lanzamiento. Es crítico que yo esté ahí debido a que hay problemas con partes del código que solo yo conozco!
De todos modos, tu problema se resolvería fácilmente. AccountView no funciona con una DB vacía. Tienes que poner datos en algunas tablas, y la aplicación espera que estén ahí. No creo que haya alguna forma de poner la información automáticamente, así que te sugiero que copies los contenidos de una DB del equipo de testing. Eso sería lo más rápido.
Mike

---

De: Ed Johnson
A: Arnold Ng

Arnold,
Hablé con el equipo de testing para obtener una copia de su base de datos para AccountView, pero no parecen saber cómo descargarla, parece que es Mike quien hace ese tipo de cosas generalmente. Tienes idea de cómo puedo conectarme al servidor de testing para bajar la DB?
Ed

---

De: Arnold Ng
A: Ed Johnson

Hola Ed, la máquina que el equipo de test usa es test.iview.com, he creado un login para tí: Ed_1@2@3 y el mismo password.
Cuando estés logueado copia la DB a tu máquina y eso debería ser suficiente. Contáctame si tienes algún problema.

---

De: Ed Johnson
A: Arnold Ng

Hola Arnold,
Me he logueado en la máquina de testing, incluso exporté la base de datos a un archivo, pero es muy pesada! intenté usar el GUI para descargarlo pero no funcionó, el archivo es realmente muy grande, aún comprimido. No sé cómo llevarlo a mi máquina, no puedo enviarlo por mail porque tengo un límite de 10MBs, no puedo soltarlo en la red porque test.iview.com no está mappeada, tienes alguna sugerencia para traer el archivo?
Ed

---

De: Arnold Ng
A: Ed Johnson

Tal vez lo más rápido sea por FTP, te he creado una cuenta para ftp.iview.com. El login es el mismo de tu dominio, y el password: ed123$.

---

De: Ed Johnson
A: Mike Cooper

Hola Mike,
Luego de un montón de problemas he logrado obtener los contenidos de la DB del equipo de testing y la he instalado en mi máquina. No fue tan fácil como pensabas!
De todos modos, creo que ya "casi" lo tengo todo andando. Parece que hace un par de inicializaciones, pero luego cae al no encontrar algo en la tabla DEPLOY_VARS. Parece estar buscando un registro "Instance_name", pero estuve mirando en la tabla y solo encontré "InstanceName". Alguna idea de qué pasó aquí? tengo la última versión del código de CVS, y la base de datos es un dump de esta mañana.
Gracias,
Ed

---

De: Ed Johnson
A: Mike Cooper

Mike, recibiste mi email ayer sobre los problemas de AccountView?

---

De: Mike Cooper
A: Ed Johnson

Ed,
Disculpa por la respuesta retrasada, me quedé ayudando a otra gente ayer por la tarde.
El problema que tienes se debe a que el equipo de testing tiene alguna versión un poco más vieja de AccountView que la que tienes tú. Ellos trabajan con el último Stable Build, y tú usas el HEAD. Tu versión espera unos valores distintos de la DB debido a que he estado limpiando un poco los valores para hacerlos consistentes. Tu mejor opción es cambiar manualmente los contenidos de la DB para ponerlos en los valores que la aplicación espera. En este caso cambia "Instance_Name" por "InstanceName". Hay otros registros en esa tabla en los que tal vez tengas que hacer lo mismo.
Mike.

---

De: Ed Johnson
A: Mike Cooper

Gracias Mike! Hice los cambios en la DB y AccountView arranca correctamente. Hay algunas páginas que no cargan bien de todos modos así que te preguntaré por ellas más tarde.
Por cierto, He notado que JBoss se cuelga luego de 20 minutos de uso con un error de "OutOfMemory", es solo mi problema? o ya lo has visto antes?

---

De: Mike Cooper
A: Ed Johnson

He recibido ese error de "out of memory" anteriormente, nos tomó un largo tiempo intentar resolverlo pero al final decidimos correr JBoss usando el JVM JRockIt en lugar del JVM de Sun. JRockit parece manejar mejor la memoria.

---

De: Ed Johnson
A: Mike Cooper

Gracias por el dato de JRockit. Lo cambié y ahora la performance es mucho mejor.
Sabes, he estado casi 2 semanas intentando tener un entorno de desarrollo para AccountView. Es un verdadero problema de productividad. Has pensado en escribir los pasos necesarios para instalarlo de manera que los nuevos puedan seguir las instrucciones en lugar de poner todas las piezas en su lugar sin saber nada?

---

De: Mike Cooper
A: Ed Johnson

Documentación, me encantaría escribir una guía de setup, pero es que no tengo tiempo!

¡¡No te olvides!!

Comprometete a que Firefox 3 sea el software más descargado en 24 hs. La fundación Mozilla se ha propuesto batir un record Guiness con la descarga de Firefox 3. Más información en Spread Firefox

Sesiones y objetos en PHP

Hoy me encontré con un problema que venía produciendo bugs en aplicaciones y me resultaban bastante difíciles de encontrar. La situación es la siguiente:

Guardé en la sesión un objeto que era instancia de una class User definida por mí en la aplicación. No parecía haber problema alguno, al construir el objeto podía acceder a todos sus miembros, e incluso cuando dicho objeto estaba almacenado dentro de la sesión.

Pero en algunas páginas, noté que el objeto se perdía, existía el índice que correspondía al mismo en el array de sesión, pero no tenía sus miembros. Después de debuggear algún tiempo noté que este error era producido debido a que en esas páginas, estaba iniciando la sesión antes de incluir la clase de la que dichos objetos eran instancias.

Código Incorrecto

include("...");
...
session_start();
include("class.user.php");

Código Correcto

include("...");
...
include("class.user.php");

session_start();

La mejor forma de manejar estos casos es utilizando un framework o desarrollando la aplicación de manera que la sesión se inicie siempre al mismo momento en todas las páginas, y no debamos tener iniciarla manualmente. El código mostrado en los ejemplos anteriores tiene sólamente fines demostrativos.

Sitios varios...

Navegando un par de blogs de sitios hechos con layouts en CSS encontré varios desarrollos que me resultaron agradables y me gustaría compartirlos:

• http://www.5starbaby.com/
• Es una compañía que se dedica a hacer publicidades de bebés recién nacidos de una manera muy original.
  
• http://www.olliekav.com/
• Blog de diseño con css.
  
• http://www.stanseatonphotography.co.uk/
• Sitio del fotógrafo Stan Seaton
  

¡Usar expresiones regulares para emails!

Debido a mi incapacidad casi absoluta de memorizar expresiones regulares, o incluso de poder construirlas medianamente bien, generalmente me dedico a buscarlas en internet. En el caso de necesitar la validación de una dirección de correo electrónico (pongamos por caso, en javascript) si recurrimos a google nos encontramos con un catálogo de cosas que no se deben hacer.

Sin ir más lejos, en el sitio de w3cschools, la función que valida emails es este mamarracho:

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos < 1||dotpos-apos > 2)
 {alert(alerttxt);return false;}
else {return true;}
}
}

Esto no es una muy buena práctica, debido a que la única validación que hace es asegurarse de que haya un punto y una arroba en la dirección. y que eventualmente el punto esté luego de la arroba. Pero por ejemplo no se asegura de que no haya caracteres extraños en la dirección, o que la última parte del dominio sea correcta.

Yo propongo que todas las validaciones de emails se hagan con expresiones regulares, y para ello cuento con el siguiente código.

var Validate = {
'email': function (val){
var regex = new RegExp(/^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/);
return regex.test(val);
}

}

La forma de utilizarlo es la siguiente:

var email = "usuario@servidor.com";
if (!Validate.email(email)){
alert('la dirección: ' + email + ' no es válida.');
}

Mejores calendarios HTML/JS

Cuando se necesita incluir un componente en la página que actúe a modo de datepicker, uno trata de recurrir a algo que se vea bien, pero que a la vez sea crossbrowser y que no lleve horas de implementar

• http://www.dhtmlgoodies.com/scripts/js_calendar/js_calendar.html


• http://calendar.swazz.org/


• http://www.javascriptkit.com/script/script2/dyndateselector.shtml

Menú desplegable sin JS o Flash

Mucha gente cree que para hacer un menú desplegable que sea visualmente atractivo y a la vez funcione como corresponde, se requiere de un complejo trabajo de javascript, css, e incluso mucha gente incurre en un atentado contra la usabilidad.

Para toda esa gente, es mi placer presentar algunos interesantes ejemplos de menúes desplegables que solo requieren de XHTML y CSS.

Mi favorito es CSSPlay, cuyo autor regularmente publica nuevos ejemplos y experimentos variados de CSS, entre ellos: menúes, layouts, boxes y un par de cosas más que pueden resultar dignas de ver.

Otros sitios que recomiendo:

• http://www.13styles.com/
• http://www.alvit.de/css-showcase/
• http://www.cssdrive.com/index.php/menudesigns/
  

Reglas de oro de CSS

Más allá de las controversias y de las diferentes técnicas de programación CSS que uno pueda dominar, hay algunas reglas básicas que no todos conocen, y luego de varios desastres he aprendido.

1- Quitar todos los valores de margin y padding.
Al menos por ahora, cada navegador dispone de sus propias reglas para definir los valores por defecto de margin y padding. En algunos, el margin para los tags h1, h2, h3 es mayor que en otros, lo mismo ocurre con los párrafos, e incluso en internet explorer suele ocurrir que aparecen márgenes para los tags form. La mejor solución como primera medida, es eliminar todos los margin y padding dentro del css, y luego definir los nuestros. Yo he tomado como regla, empezar todos mis archivos .css con la siguiente declaración:

*{
margin: 0px;
padding: 0px;
}

Esto define que absolutamente todos los elementos del documento HTML deben aparecer sin márgenes o espaciados. Luego, se pueden definir manualmente algunos tags:

h1{ margin: 10px 0px 10px 0px; }
h2{ margin: 5px 0px 5px 0px; }

2- Usar Background-image con background-color.
Muchas veces necesitamos que un determinado elemento de la página tenga una imagen de fondo, es importante para que el documento sea CSS válido, que si se define una propiedad background-image, también se defina un background-color. O mejor aún:

elemento.clase{
background: #FFFFFF url("..dirección..");
}

3- Aprovechar la herencia.
La posibilidad de heredar propiedades de un elemento a otros que le suceden es una herramienta muy poderosa, pero si no se tiene en cuenta su existencia, se puede incurrir en casos de trabajo realmente incómodos.

Por ejemplo, ¿es necesario escribir un font-family en 20 etiquetas? Sería mucho más cómodo y legible ubicar dicha declaración sólo en body

body{
font-family: Arial;
}

Luego, todos los demás tags que estén dentro de body, heredarán esta propiedad (todos tendrán el mismo font family), lo que permite definir propiedades más especificas para dichos tags.

h1{font-size: 24px;}
h2{font-size: 20px;}
h3{font-size: 15px;}

La patada inicial

De las cosas que hacés cuando te aburrís un Sábado a la tarde, puedo contar:

• Limpiar tu depto,
• Laburar extras,
• Secar la inundación del baño luego de la ducha,
  
• Abrir un blog de desarrollo.

Al final me decidí por la cuarta, y aquí lo arrancamos.

El objetivo de este blog es dar algunos tips para los pobres seres vivos que se declaran a sí mismos programadores y día a día deben lidiar con aquella peligrosa forma del mal llamada "El Código". Los conocimientos aquí expresados son tan discutibles como cualquiera, se basan en mi propio estudio y experiencia, y deben ser utilizados a riesgo propio. Desde luego, todo tipo de comentario y crítica será bienvenido.