emmgfx

UI is the killer feature

UI development is the hard part. And it’s not the last step, it’s the first step. In my estimation, the difference between:

• software that performs function X; and
• software that performs function X, with an intuitive well-designed user interface

isn’t just a little bit of extra work. It’s not even twice the work. It’s an entire order of magnitude more work. Developing software with a good UI requires both aptitude and a lot of hard work.

str_replace() de PHP en Javascript

El otro día me dio por buscarlo y me di cuenta de que la gente estaba haciendo funciones propias para imitar a str_replace de php en javascript. Es curioso, ya que javascript tiene su propia versión de forma nativa.

Por ejemplo para cambiar un guión bajo por un espacio:

// En ocasasiones puede interesar utilizar nbsp en vez de un espacio
cadena = cadena.replace(/_/g," ");
// El mismo ejemplo con un espacio normal
cadena = cadena.replace(/_/g," ");

Ese ejemplo es utilizando expresiones regulares, pero también se puede utilizar con porciones de cadena:

cadena = 'Buenos tiempos';
cadena = cadena.replace("Buenos","Malos");
alert(cadena); // Mostraría "Malos tiempos"

Recomiendo visitar esta página para aprender a utilizar las expresiones regulares de javascript y leer los comentarios de este articulo para entender mejor el uso de replace. Antes de que me crucifiquen, ya sé que este articulo es muy simple y no explica con demasiada amplitud el uso de replace (de ahí que proponga dos enlaces para entenderlo mejor).

inline-block cross-browser

En Foo Hack publicaron un recurso CSS que a veces utilizo y creo que estaría bien compartir, el problema es que no explican para qué sirve hacer lo que explican, y eso es lo que voy a hacer.

Hay tres valores principales para el atributo display de CSS; normal, block e inline-block.

• El primero no modifica el formato del contenedor al que se aplica, es decir, si es un div y se deja el display normal seguirá ocupando el 100% del ancho que disponga del contenedor padre.
• El segundo si lo modifica, puede usarse por ejemplo para enlaces, para hacer que el enlace ocupe un tamaño determinado y se pueda hacer click en toda la zona que ocupa visualmente, no sólo en el texto. Esto es quizá dificil de entender pero con un par de ejemplos es más fácil: los enlaces de la cabecera de Facebook a día de hoy podrían estar hechos con display:inline-block; por que el enlace ocupa un tamaño determinado y para pulsarlo no hace falta que el click se haga en el mismo texto del enlace. Si el display fuera normal, el enlace sólo serviría desde la zona de texto, si se hace click fuera no serviría de nada.
• display:block sirve para eso, pero puede que no siempre sea lo que se quiere hacer. El valor block posiciona los elementos uno encima del otro, y pocas veces se quiere hacer eso. Lo más normal es que se coloquen uno al lado del otro hasta que llegue al limite de ancho y entonces haga una fila nueva. Para eso se hizo el display:inline-block.

El problema es que en bastantes navegadores el valor inline-block simplemente no existe (en todos los nuevos funciona sin problemas) y ante la duda parece comportarse como un block. Pero hay una forma de que funcione bien en “todos” los navegadores (lo pongo entre comillas por que en Explorer 3, 4.01, 5.01 o 5.55 ni lo he probado). Sólo hay que utilizar estos valores y el hack * para algunos explorers.

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

Aunque yo soy de los que piensa que lo mejor es no dejar acceder a la aplicación a quienes no actualizan su navegador, entiendo que haya quien utiliza navegadores antiguos por razones extrañas; por eso siempre van bien este tipo de “hacks” que ensucian el código y frenan la mejora de la web.

Retrasar eventos y efectos de jQuery

No se si alguien lo habrá necesitado alguna vez, pero estoy seguro de que es un buen recurso a tener en cuenta… con la función setTimeout de Javascript podemos retrasar cualquier cosa, desde un write() hasta mezclas complejas de eventos y efectos en jQuery (o cualquier otro framework). La forma de uso es muy fácil, sólo hay que tener en cuenta una cosa, que funciona en milisengundos.

Por ejemplo:

setTimeout(
   function(){
      //Lo que debe pasar pasados 10 segundos (10mil milisegundos)
   }, 10000);

Es bastante fácil de utilizar, pero si alguien necesita más información puede visitar Klevo Blog, donde he encontrado un articulo que se explica bastante bien… pero esta en inglés.