Fork me

En un ya antiguo post, expliqué una modificación hecha a un plugin de jQuery muy usado y genial, el jQuery.Validation. Hace poco recordé aquella modificación,  y se me ocurrió revisar si con los sucesivos updates del plugin habian incluído esa funcionalidad.

Tuvo varios, muy buenos por cierto, pero ninguno añadiendo mi funcionalidad. Entonces hice lo que todo programador debe hacer al menos una vez en su vida: fork, clone local, push, pull request.

Para los que recién empiezan en el mundo de la programación, trataré de resumir los conceptos.

GitHub es un sitio que pone a nuestra disposición distintos proyectos de la comunidad de programadores. No sólo están para descargar, sino para que todos mejoremos los productos, detectando errores y dando las posibles soluciones. Todo esto es posible gracias a GIT como sistema control de versión.  La curva de aprendizaje de GIT es mayor en comparación a SVN, pero es notablemente superior.

Como a mí se me ocurrió una nueva funcionalidad, puedo proponerla. El modo correcto es ir al proyecto en cuestión, clickear en Fork para crear una copia del mismo, pero en nuestro perfil, clonarlo en forma local, hacer los cambios y subirlos, y finalmente, avisarle al creador del original que uno tiene una propuesta nueva. Si le parece correcto, la modificación pasará a formar parte del proyecto original.

Hace un par de días realicé el pull request para mi versión del jQuery.Validation, pueden chequearlo desde acá.

UPDATE: mi aporte ya forma parte del plugin oficial 🙂

Ajuste para jQuery.validationEngine

Uno de mis plugins favoritos de jQuery, es el jQuery.validationEngine. Un muy completo plugin para validación de formularios, muy customizable, desde el tipo de validación, hasta dónde debe aparecer el warning de error.

Pero hoy me pidieron algo que si lo trae por defecto, no lo encontré. El plugin ejecuta la validación de cada campo no sólo cuando el usuario hace el submit del formulario, también lo hace cuando el usuario termina de completar un campo y pasa al siguiente. De esta manera, permite corregir  lo erróneo en el momento.

Si se desea evitar esa validación al pasar de un campo al otro y dejarla activa sólo al hacer submit, uno debe hacer lo siguiente:


$(".registerform").validationEngine({
   bind: false
});

Hoy me pidieron que la validación al pasar de un campo a otro se haga sólo si el usuario empezó a escribir algo en el campo. Por defecto, si un campo es requerido, el usuario hace foco, no lo completa, pasa al siguiente, y se le muestra un error, ya que el campo es obligatorio y lo dejó sin completar.

Pero el pedido tiene sentido. No hace falta ejecutar esa validación del campo antes de siquiera empezar a completarlo. Y además, no debo perder la validación de campo requerido al hacer submit.

La mejor manera que encontré de hacer esta excepción fue editar jquery.validationEngine.js. Viendo el código, llegué a donde necesitaba editar:

_onFieldEvent: function(event) {
   var field = $(this);
   var form = field.closest('form');
   var options = form.data('jqv');
   options.eventTrigger = "field";
   // validate the current field

   window.setTimeout(function() {
      methods._validateField(field, options);
      if (options.InvalidFields.length == 0 && options.onSuccess) {
         options.onSuccess();
      } else if (options.InvalidFields.length > 0 && options.onFailure) {
         options.onFailure();
      }
   }, (event.data) ? event.data.delay : 0);
},

Aquí veo que se ejecuta la validación ante un evento del input (el cual se puede configurar mediante las opciones del plugin). Entonces, sólo debo ejecutar una verificación antes de validar:

_onFieldEvent: function(event) {
   var field = $(this);
   var form = field.closest('form');
   var options = form.data('jqv');
   options.eventTrigger = "field";
   // validate the current field

   if(field.val().length > 0){

      window.setTimeout(function() {
      methods._validateField(field, options);
      if (options.InvalidFields.length == 0 && options.onSuccess) {
         options.onSuccess();
      } else if (options.InvalidFields.length > 0 && options.onFailure) {
         options.onFailure();
      }
      }, (event.data) ? event.data.delay : 0);

   }
},

Y listo. De esta manera, primero chequeo que haya en verdad algo que verificar antes de entrar al proceso de validación. Y como esto está atado sólo a eventos del input, al hacer submit del formulario se ejecutan siempre las reglas de validación.

UPDATE: subí estos cambios a GitHub, más detalles acá.

setInterval error en Chrome y Firefox

Hace unos días encontré un error en una animación que hice en jQuery, que hace uso de setInterval.  SetInterval existe para ejecutar una función cada determinada cantidad de tiempo. Supongamos que estoy en un sitio que hace uso de esta función, pero después voy a otro tab del browser, y me quedo navegando allí durante unos minutos, eso quiere decir que en otro tab (que no estoy viendo…) se debería estar ejecutando una función.

Firefox y Chrome evitan que las funciones con setInterval se ejecuten si uno está viendo otro tab. Tiene sentido, intentan ahorrar memoria para ponerla, justamente, donde el usuario esté mirando. El único problema es que en vez de hacer un «pause», lo que hacen es ir guardando todas las veces que se deberían ejecutar. Lo que provoca que cuando finalmente volvemos a hacer foco, se ejecutan una detrás de la otra!

La solución es increiblemente fácil cuando las funciones con setInterval involucran animaciones, como en mi caso.

Primero les muestro el código sin la corrección:

function magic(elemento){
	$(elemento).animate({
		left: '-=1',
		bottom: '+=2'
	}, 70, function() {
		// Animation complete.
		$(this).animate({
		left: '+=3'
		}, 70, function(){
			$(this).animate({
				left:'-=2',
				bottom:'-=2'
			}, 70)
		});
	});
}

Este código lo que hace es mover un div hacia la izquierda y abajo, y luego hacia la posición original, provocando un ligero temblor. Para ejecutarlo, uso por ejemplo:

setInterval("magic('.banner')",5000);

Lo que hace que cada 5 segundos, el div banner tiemble. Al perder el foco y luego volver al tab, la ejecuciòn en cadena hacia que el banner se fuera no 1, sino por ejemplo 200 pixeles hacia la izquierda (y hacia abajo…). Quedaba horrible por el hecho de quedar en cola de ejecución la función de temblor.

La solución es borrar lo que haya en memoria:

function magic(elemento){
	$(elemento).stop(true,true).animate({
		left: '-=1',
		bottom: '+=2'
	}, 70, function() {
		// Animation complete.
		$(this).animate({
		left: '+=3'
		}, 70, function(){
			$(this).animate({
				left:'-=2',
				bottom:'-=2'
			}, 70)
		});
	});
}

Así de simple…

Más creatividad con CSS

Hace un tiempito escribía sobre la importancia para los diseñadores y creativos de aprender qué se puede hacer con CSS, más allá de que ellos mismos sean o no los que produzcan las páginas. Mi consejo era combinarlo con jQuery, por lo que la «tarea» era doble, aprender CSS y jQuery.

Hicieron la «tarea»? Les paso un ejemplo muy sencillo de lo que intentaba lograr, un sitio muy simple, con un jQuery de los mas fáciles de entender, y CSS de lo básico. Sé que este sitio en particular quizás no es la mejor combinación de creatividad + diseño + impacto + magia + etc. que pueda existir, pero era el complemento que me faltaba para cerrar mi posteo anterior, y no quería dejar de pasar la oportunidad.

PD: Gracias a Dumme por pasarme el link que genero este post.

Aprender para crear

Al hablar con diseñadores web, o que diseñan para web, es innevitable terminar hablando, aunque sea un poco, de hasta dónde deben saber ellos de código HTML, CSS, jQuery, etc. Yo soy un bicho raro, porque soy diseñador y también programador. Ya lo asumí, soy ambas, suelo ejercer más como programador, pero eso es otra cosa. Al tener este doble rol, me es muy fácil entender a ambas partes, y qué encuentran molesto unos de otros.

Respecto a los diseñadores en sí, no pretendo en este post hacer un debate sobre dónde terminan sus obligaciones para con el «conocimiento». Admito que me da un poco de vergüenza haber escrito esa frase, me hace querer aprender algo nuevo en los próximos 5 minutos por respeto a la autocapacitación jajaja. Me interesa que vean esta creación en CSS.

Y ahora sí, pregunto: no te dan ganas de saber qué se puede hacer en CSS? El código usado para esa animación existe hace muchisimos años. Se trata de ser creativo con lo que se tiene. Con lo que sabemos. O sea, no hace falta saber hacerlo, pero sería un error grave ni siquiera saber los fundamentos básicos, que son los que te dan herramientas, a vos que te consideras «creativo», para construir algo nuevo. Dar un mensaje.

Sabén cuánto cuesta hacer este ejemplo en concreto? un par de horas de alguien que sepa los fundamentos de CSS 1 (no deja de ser un jpg con la textura de la lata mapeada). Los invito a aprender qué se puede hacer con CSS, pero especialmente con jQuery. Atención con lo que dije, aprender que se puede hacer, no aprender a hacerlo, es muy diferente.

Y a no se quedarse con que sólo flash puede hacer cosas lindas y animadas. Vamos, búsquen! O mejor dicho, encuentren!

Libre

Libre, nuevamente. Luego de tres meses y medio trabajando para InTacto, decidí dar un paso al costado. Esta vez no le digo adios a una empresa, sino a la relación de dependencia. Lo que queda de agosto pienso tomármelo de vacaciones, para despejar la cabeza, dormir, ver películas y leer blogs. Luego, freelance.

Ya trabajé en esta modalidad. En su momento cambié a relación de dependencia para aprender todo aquello que me faltaba para hacer páginas webs profesionales. Imaginarán entonces como me siento ahora, que descubro luego de este tiempo que mi trabajo freelance es más profesional que el que se hace en (casi) cualquier empresa.

Ojo, no es que estas empresas no sepan hacer páginas web, sino que las condiciones en las que se realizan los trabajos o encargos, se encuentran tan viciados por el cliente que se hace imposible el desarrollo profesional. El hecho de que todos los actores para diseñar una página no puedan estar nunca coordinados desde el comienzo, dificulta todo.

Mi futuro es freelance. Maquetación y jquery de lo que se requiera. Programación al mínimo, salvo que me encarguen un sitio web desde cero (no quiero lidear con la programación de otro). Sitios XHTML, y en flash. Para los que les interesa, ya saben. También estoy terminando de definir un servicio para ofrecer, pero de ese no voy a contar nada hasta que lo redondee.

Free…