Consejos para tener un buen código Javascript

ByLuis

Consejos que nunca vienen mal para desarrollar un código Javascript decente:

  • Que sea limpio y esté bien documentado: esto no es exclusivo de Javascript, pero parece que en este lenguaje se olvida. También es recomendable tener dos versiones del script, uno de desarrollo y otro de producción (que estará comprimido).
  • Usa ficheros externos: no incluyas los scripts dentro de tu HTML, usa scripts externos. A parte de ser más eficiente en el gasto del ancho de banda es reutilizable y más legible.
  • Separa la capa de presentación de la capa lógica: no añadas eventos en las etiquetas HTML, create Javascripts no intrusivos que modifiquen los elementos y añadan los eventos.
  • Define el ámbito de las variables: aunque no sea necesario usar var para definir las variables, hay que hacerlo, así evitarás sorpresas de modificación de variables, sobre todo si usas recursividad.
  • No pienses que por defecto se soporta Javascript: no todo el mundo dispone de javascript, por ello no es conveniente llamar a funciones javascript dentro del href de los enlaces, y es conveniente tener acción por defecto en un enlace cuando se quiere modificar su funcionalidad por javascript:
<a href="#" onclick="javascript:accionClick()">enlace</a>
<a href="enlace.html" onclick="accionClick(); return false;">enlace</a>

5 JavaScript Best Practices

Similar Posts

Detección de caras con Javascript y Canvas

ByLuis

Interesante script que usa canvas para detectar rostros en las fotografías. Se basa en openCV y en el post de John Resig para evitar un captcha.
Permite la opción de reconocer una cara o varias caras, este último lo he probado con una foto y no me ha funcionado, pero como bien dice el autor, aún tiene que mejorar más el script.
Interesante opción para servicios como Facebook o Flickr para sus opciones de asociar elementos (usuarios, comentarios, …) a las fotografías. También es útil para avisar de que no se ha subido una cara cuando alguien cambia de avatar.
Face detection in javascript + canvas
Vía / @rafabayona

Algunos scripts para jQuery

ByLuis

He encontrado en Script & Style algunos scripts/pluigns para jQuery que son interesantes:

FireUnit: extensión para pruebas unitarias de Javascript

ByLuis

FireUnit es un plugin para Firefox que permite realizar pruebas unitarias de Javascript y mostrar los logs en una pestaña de Firebug. El plugin está desarrollado entre otras personas por John Resig, desarrollador de jQuery.

Se pueden realizar pruebas como las siguientes:

// Simular eventos del navegador
var input = document.getElementsByTagName("input")[0];
fireunit.mouseDown( input );
fireunit.click( input );
fireunit.focus( input );
fireunit.key( input, "a" );

FireUnit

Vía / John Resig

7 maneras de mejorar tu blog

ByLuis

Las listas siguen de moda, pero da igual que sea mediante lista, que llama más la atención, o mediante un artículo normal, lo importante es poder aprender algo de una serie de consejos. En este caso, os paso una traducción de una serie de consejos para mejorar nuestro blog.

  • Dedícale tiempo a la apariencia: si te fijas en los blogs más importantes para Technorati, cada uno de ellos tiene un diseño propio. Ninguno usa el tema por defecto de WordPress o MovableType. Identifica tu blog con un diseño propio, un buen diseño y un buen contenido deberían ir de la mano.
  • Céntrate en la organización de la información: Contenido de calidad no implica efectividad. Organiza el modo en el que presentas la información, hazlo de forma sencilla para que el lector tenga facilidad para absorver toda el contenido que ofreces. Las entradas largas se siguen mejor cuando están divididas en párrafos cortos y bien estructurados.
  • Hazlo pensando en la escalabilidad y las actualizaciones: la escalabilidad no es algo de lo que se hable mucho en los blogs, pero es importante, piensa como si tu blog tuviera años de contenido y millones de lectores. Escribe entradas no muy largas para evitar problemas con tu servidor en el momento que tengas picos de visitantes. No diseñes con estilos escritos directamente en tu código, así te ahorrarás problemas cuando quieras modificar el diseño.
  • Mantén tu formato en la medida de lo posible: una entrada realizada hace años debe ser igual en diseño, tema y formato que una entrada actual. Se constante en la frecuencia que posteas, el formato de los títulos de tus entradas y en el tema de tus entradas. Estándariza el formato de tu blog.
  • Racionaliza el proceso de publicación: aunque al principio te parezca insignificante, el tiempo que le dedicas a escribir y publicar es importante a lo largo de las semanas, meses o años. Intenta hacer este proceso lo más sencillo y rápido que puedas. Si tienes conocimientos de programación, créate scripts que te ayuden, o instala plugins que te faciliten esta labor.
  • Haz las cosas sencillas: piensa que cada pixel de tu blog es importante, si tienes dudas en incluir algo en tu blog, es porque seguro que hay muchas razones para no incluirlo.
  • Pon a los lectores por encima tuyo: aunque haya veces que lo más importante para tí sean las ganancias por publicidad, piensa que son los lectores quienes te proporcionan esos beneficios. Si añades publicidad contextual en tus entradas, las ganancias puede que aumenten considerablemente, pero tus lectores se pueden cansar de ella y dejar de leerte. Piensa que la relación entre el blogger y el lector es simbiótica, se necesitan unos a otros.

7 Ways to Optimize Your Blog

Vía / Micro Persuasion

|

WebSockets en HTML5

ByLuis

HTML5 introduce una característica que puede mejorar sustancialmente las aplicaciones web, los WebSockets, los cuales permite crear un canal de comunicación bi-direccional entre el cliente y el servidor, solucionando los problemas que presenta Ajax o Comet. El ancho de banda ahorrado tiene una proporción de 500:1 y una latencia de 3:1, resultados increíbles que hacen que los de Google anden muy interesandos en esta tecnología (el ahorro en aplicaciones como GMail puede ser considerable).

Por ahora sólo funciona en Google, pero un código de ejemplo sería el siguiente:

if ("WebSocket" in window) {
  var ws = new WebSocket("ws://websockets.org:8787"); //this service bounces messages back
  ws.onopen = function() {
    // Web Socket is connected. You can send data by send() method.
    ws.send("message to send"); 
  };
  ws.onmessage = function (evt) { var received_msg = evt.data; alert(evt.data);  };
  ws.onclose = function() { /* websocket is closed.*/alert("WebSocket Closed!"); };
}else{
  // the browser doesn't support WebSocket.
  alert("Websocket is not supported in your browser");
}

HTML5 Web Sockets: A Quantum Leap in Scalability for the Web

Vía / DZone

|

Ya tenemos nuevo ThickBox

ByLuis

De muchos es conocido Lightbox, y la popularidad que produjo a su autor en su momento cuando se hizo público. Básicamente es uno de los efectos que más se están viendo en páginas webs a la hora de mostrar imágenes. No hablamos de nada nuevo ni lo descubrimos ahora.
pimp_my_thickbox_20.jpg
Y como alternativa a Lightbox tenemos ThickBox 2.0 mucho más ligera y potente con sólo 27Kb de código. ¿Qué son 27Kb que sirven para cosas como esta?.

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.