Front-End Zen

PHP Barcelona Conference 2011

Mañana voy a asistir por primera vez a la PHP Barcelona Conference. Sé que puede sonar raro viniendo de mí, siendo un perfil descaradamente Front-End, pero yo también he tenido un pasado oscuro, en Back-End, programando en PHP. Y gracias a mis proyectos personales como Cine25 sigo tocando cosas de Back-End. Creo que ser multidisciplinar es positivo, pero a la vez estar especializado también. Es buscar el equilibrio para ser muy bueno en algo y saber lo suficiente de lo demás para tener esa visión global que a veces hace falta.

La edición de este año promete, tiene una agenda muy atractiva y unos speakers de auténtico peso: Rasmus Lerdof, Fabien Potencier o Carlos Buenosvinos, para citar a algunos. Habrán charlas y temas más que interesantes como “Caching on the edge” (técnicas de cacheado, cabeceras y demás), Team Engaging o el indispensable resumen de PHP que dará Rasmus Lerdof.

Van a ser 2 días intensos de mucha agitación, de aprender mucho muchísimo (espero), y como no, aprovechar para volver a ver caras conocidos y viejos compañeros de trabajo. Solo por esto último ya merece la pena ir.

Nos vemos en la #pbc11 (hashtag del evento) !!!

Si tú también vas a estar allí o quieres seguir de cerca mis impresiones, sígueme en Twitter.

Diferencia entre dom:loaded y window.onload

Uno de los métodos más potentes y usados para controlar los tiempos de carga y ejecución de nuestros scripts en la página, es el uso del Event.observe de Prototype.

Con la línea siguiente:

Event.observe(window, 'load', function() {});

Podremos ejecutar algo una vez la página esté completamente cargada. Muy útil si queremos asegurar por ejemplo que un div al que queremos interactuar está ya cargada en la página, o si queremos realizar cualquier acción tras la carga completa de la página. Esto es que están todos los elementos del DOM renderizados y todo el resto de elementos web cargados también: js, css e imágenes incluidos. Las peticiones AJAX no entrarían en este saco ya que son peticiones asíncronas y no se carga secuencialmente en el waterfall de la carga de la página.

Hasta aquí todo perfecto. Pero también tenemos otra condición que se usa mucho que es:

document.observe('dom:loaded', function(){});

Esta línea es muy similar a la anterior pero no son exactamente iguales. ¿En qué se diferencian?

Read the rest of this entry »

Comparativa de salarios de ingenieros informáticos

Interesante gráfica/comparación sobre los salarios en los Estados Unidos.

Comentemos esta gráfica…

Vendo ipod touch, escritorio ikea y otras cosas por mudanza

Abro un paréntesis técnico en mi blog, para publicar un off-topic en toda regla.

El tema es que me mudo de piso y como suele pasar durante una mudanza, uno aprovecha para deshacerse ciertas pertenencias que ya no usa, o no interesa llevarse al nuevo piso. Este es mi caso,  y estas son las cosas que pongo en venta, en mi particular “mercadillo”!

Si te interesa alguna cosa, deja un comentario aquí y me pondré en contacto contigo. El escritorio y las altavoces, idealmente debería ser para alguien de Barcelona o alrededores, ya que son productos que pesan mucho y no creo que salga a cuenta enviarlo por correo postal.

Novedades del Firebug 1.8

En Sitepoint he leído la noticia de que Firebug ha sacado una nueva versión que trae interesantes novedades. “La contra” es que para poder disfrutar del 1.8 necesitas Firefox 5. No funciona con las versiones anteriores. digo “en contra”, porque yo todavía no me he atrevido a instalarme el Firefox5 en el trabajo por temas de incompatibilidades de plugins. Pero tras leer esta noticia, creo que daré el paso de forma inminente. Si prefieres quedarte por ahora en Firefox 3 o 4, entonces te quedarás estancado al Firebug 1.7.3.

Entre las novedades que explica Sitepoint, me ha parecido interesantísimo:

console.timeStamp

Han añadido un nuevo comando API console.timeStamp(), que permite marcar una linea de tiempo en la gráfica de tiempo-carga que hay en el panel Red. Esto me parece buenísimo ya que permitirá depurar más y mejor, se podrá trabajar mucho mejor temas de optimización y velocidad de carga de la web, etc.

Solo por esta característica ya me lo estoy bajando.

Read the rest of this entry »

Optimizar y minimizar javascript en Eclipse

He encontrado un plugin de Eclipse que permite optimizar y minimizar los JS con tal solo un clic. Se llama Rockstar Optimizer & Amazon WS Tools y realmente es muy sencillo de usar. Con las primeras pruebas que he hecho he tenido muy buenas sensaciones.

Los pasos para instalar el plugin son*:

1. Ir a “Help -> Install New Software -> Add”
2. Introducir datos
   1. Name: “Rockstar Optimizer”
   2. Url: “http://update.rockstarapps.com”
3. En la lista que se carga debajo, checkear los componentes que quieres instalar (yo puse todos)
4. Ir dando al botón NEXT hasta finalizar la instalación.
5. Te pedirá que resetees el Eclipse. “Yes”.

* La versión Eclipse que he usado para instalar el plugin es “Eclipse IDE for JavaScript Web Developers. Version: Helios Service Release 1. Build id: 20100917-0705″

Read the rest of this entry »

Tienes un email

¡Gran verdad!

Cargar fuentes para usar en web con Google Web Fonts

La lacra del diseño web

El uso de fuentes de letra chulas en nuestras webs siempre había sido mucho más complicado de lo que debería. Suerte que hoy en día tenemos a disposición distintas técnicas y scripts como el Cufon que nos ayudan renderizar las páginas con la tipografía que mejor le sienta al diseño.

Google (como no) nos trae una alternativa más, y ha sacado una nueva versión 2 de su Google Web Fonts. ¡La pinta no puede ser mejor!

Usar fuentes en la web nunca fue tan fácil

Google Web Fronts es una herramienta online con una colección generosa de fuentes a elegir, y el uso es algo tan sencillo como introducir una línea en el HEAD como:

<link href='http://fonts.googleapis.com/css?family=Redressed&v2' rel='stylesheet' type='text/css'>

Read the rest of this entry »

La clave de un buen informático: ser vago

Recuerdo mi primer día de facultad, que el profesor nos dijo nada más comenzar algo como:

Aquí estáis para aprender a ser vagos. Un informático es vago. El informático más vago es el que más lejos llega. ¿Por qué? Porque es un experto en “hacer lo máximo con el menor esfuerzo”.

Dicho de otra manera, automatizar todo lo que sea automatizable, para que la máquina haga el trabajo por ti.

Best practice JS: HTML usando JS o no

El otro día tuve una reunión con mi equipo, y uno de los temas que tratamos fue repasar nuestra metodología de desarrollo en Javascript. Tener clara dicha metodología para mí resulta clave ya que somos 6 programadores Front-End que estamos tocando el mismo código, el mismo framework. Y como no sigamos todos unas guidelines (guías de líneas ), mal vamos…

Para dicha reunión recopilé un par de frases que encontré por Internet y que me resultaron conceptos muy interesantes. Dicen así:

HTML que tenga sentido sin JS no debería ser creado por JS.

HTML que únicamente tenga sentido con JS debería ser generado por JS.

Es un concepto sencillo de entender pero no tan sencillo de aplicar. Entender el concepto permitirá al programador tomar decisiones más acertadas de cuándo o dónde han de generar el código HTML: directamente en la plantilla o desde JS. Incluir este concepto en la metodología de trabajo de todos evitará que de forma totalmente arbitraria nos encontremos con casos mezclados y sin coherencia.

Por lo demás, usamos – al igual que muchos – las convenciones de codificación que recomienda Crockford en su página:

http://javascript.crockford.com/code.html