Programming & Web Development Tutorials & Tips

Animate your webpage fast and easy with Facebook Animation Library

Today Facebook released an animation javascript library that modifies CSS properties on the fly. You can download it and use it on your webpages.

Its a very light (10.4 Kb compressed version) animation library and its very easy to use. You can chain events or animations to create the effects you want. You can download it on the facebook developer’s resources page.

A typical effect used in websites is the flash effect to alert or notify of some action.

Here’s all you need to accomplish that:

<a href="#" onclick="Animation(this).to('background', '#fff').from('background', '#ffff4b').go(); return false;">Flash</a>

The syntax is easy. All you need to do is call Animation(this) on your element and then specify what CSS property you want to change on the .to and .from methods. In this case: go from yellow background to white background. The last .go() method tells Animation to run the specified animation.

You can also mix animations or transitions instead of playing one animation after another. For this you have to use .checkpoint() function and .duration() to specify how long the transition will take (in milliseconds). The checkpoints indicate when the second animation will start playing, allowing you to tweak the default behavior of playing one animation after the other one stopped.

So you can basically change anything: colors, widths, lengths, margins, positions, etc. For complete documentation of the library, go to the Facebook Developers Wiki. Its worth checking out.

Its a very simple syntax, with familiar terms (CSS properties) and very lightweight compared to using Prototype and Scriptaculous. Maybe Scriptaulous syntax for doing some animations is simpler or shorter, but you must load Prototype in order to use it, so that makes it heavier. Plus, you need to know the Scriptaculous effects functions and sometimes they are not that tweakable.

Its also nice to see Facebook releasing some open source code (BSD licensed) and contributing back.

GNU/Linux Free Software & Open Source Programming & Web Development

PHP 5 OOP implementation quirks

PHP 5 is supposed to be fully object oriented. Yes, it has classes and inheritance and all those things an OOP language is supposed to have. But, is it implemented like most OOP languages?

First of all, I come from a C/C++ background, so there’s where I got all my OOP lessons. Then I started to learn Python and Ruby, and well, finally lots of little OOP details I couldn’t understand were clear. Ruby has a beautiful OOP implementation, sometimes it can get confusing having everything as an object and the object and class themselves are objects. But once you pass that, everything is cystal clear.


What bothers me about PHP 5’s OOP implementation is first of all, constructors. If I declare a Parent class, with a constructor, then a Child class that inherits from Parent, and this Child class has its constructor, when I instantiate an object of the Child class, only the Child class constructor is called.

class Parent
      echo "hello from parent ";
class Child extends Parent
      echo "hello from child ";
dummy = new Child();

This will display only

hello from child

Where in other languages, such as C++, Python or Ruby (don’t know about Java, but I expect the same) the output would be:

hello from parent hello from child

So in order to have this constructor cascading effect, in PHP 5 I have to explicitly call the parent constructor on my child’s constructor like this:

class Child extends Parent
      echo "hello from child ";

Which is not very nice.

Accessor methods

Another aspect that I dislike is the class attribute accessor methods. I call them accessors like in Ruby, but they are commonly called setter and getter methods. So in order to control and filter my input/output for my object, I usually do so with this methods.

If I declare a User class with some methods, I expect the setter and getter methods to filter my I/O everytime I want to access the class’ attributes.

class User
   public $name;
   public $email;
   public $password;
 //set and get functions
  public function __get($variable)
      return $this->$variable;
  public function __set($var, $value)
      if($var != "password")
          $this->$var = $value;
          $this->password = hash('md5',$value);

This is supposed to encrypt the password everytime I set something on my password object attribute. What is wrong with this? That it doesn’t work! The get and set functions only work when you have NO attributes or undefined attributes in the class. So in order for this getter and setter methods to really filter I/O to the instantiated objects is to not declare the attributes, and this methods will generate them, like the PHP people say, “magically”. Maybe its a nice flexibility feature to have attributes generated on-the-fly, but it doesn’t help on object consistency.

PHP 5 is a nice tool, but as a language I think there’s still work to do on the OOP implementation.

GNU/Linux Free Software & Open Source Programming & Web Development

Como arreglar valores NULL en Ruby on Rails con Sqlite3

Para quienes desarrollan en Ruby on Rails con Sqlite3 como base de
datos local, no se si les haya pasado pero un dia Sqlite3 comenzaba a
poner valores NULL por default a fuerzas, inclusive me toco que en una
ocasion mi schema.rb tuviera un

:default =>''''''''''''NULL'''''''''''''''

que claro no tiene ningun sentido. Las
migraciones estan bien, sin valores por default, entonces, que pasa?

Pues despues de buscar y buscar, por fin encontre la respuesta:
Sqlite3 despues de la version 3.3.7 cambio su formato interno y hacia
algun tipo de conflicto con la metadata.

Como lo arreglo? Facil! Primero, desinstala libsqlite3-ruby1.8 de tu
sistema (estoy suponiendo que como yo, usas (K)Ubuntu e instalaste el
paquete desde repositorios).

sudo aptitude purge libsqlite3-ruby1.8

Ahora solo instala la version actual de la gem para sqlite3

sudo gem install sqlite3-ruby

Listo, ahora elimina el archivo de base de datos que estabas
usando, y vuelvelo a crear con rake

rake db:migrate

Revisa tu schema.rb, debe estar limpio de valores default NULL que no
le indicaste en las migraciones.

Espero les sirva, para mi esto fue un grandisimo dolor de cabeza
muchos, muchos dias.

Programming & Web Development

Nuevas adquisiciones para leer

Hoy tuve la oportunidad de ir a Barnes & Noble para ampliar mi biblioteca personal.

Me compre este libro

CSS Mastery
CSS Mastery, Advanced Web Standards Solutions.

Un libro de CSS bastante completo con browser bugs, browser hacks y varios casos de estudio.

Tambien queria actualizar y ampliar mas mis muy basicos conocimientos de javascript y encontre Learning Javascript.
Learning Javascript

Los estare leyendo y escribiendo aqui algunas cosas que me parezcan interesantes y al final vere si los recomiendo o no.

Hasta ahorita el primer libro me ha parecido bastante bueno.

Programming & Web Development Tutorials & Tips

Optimiza la concatenacion de strings en Ruby

En este post realizan un test de rendimiento en las diferentes operaciones de concatenacion de strings en Ruby.

Concluye con que para concatenar dos variables tipo string, la mejor (y optima) manera de hacerlo es asi:
string1 = "Hola "
string2 = "Mundo"

string1 < < string2

Y el resultado es:

"Hola Mundo"

Y si necesitamos un valor dentro de un string, lo hagamos asi:

variable = "palabra en variable"
string_largo = "este es una #{variable} dentro de un string largo"

y el resultado es:

"este es una palabra en variable dentro de un string largo"

Se me hizo buena idea tenerlo como referencia aqui, porque luego se me olvidan los tips…

Programming & Web Development Tutorials & Tips

Una platica de javascript

Una buena clase de javascript por Douglas Crockford