home icon contact icon rss icon last FM icon facebook icon LinkedIn icon Delicious icon twitter icon

Archive pour le mot clé Yaps

Facebook Developer Garage - LeWeb09 edition

Yesterday, tuesday december 10th, took place at LeWeb09 a Facebook Developer Garage.

It's an event where local Facebook Application and Facebook Connect developers join together and share on their works. This year, a team of Facebook representatives came from the US to meet local developers and answer specific questions. As a social marketing agency, Sociabliz was naturaly there to share its experience of Facebook development.

I gave a talk on YAPS and other tools i've build to encourage Javascript based UI over Flash based UI in Facebook Application. You can find here the slides of Deep into FBJS. All the event was also live on UStream so you can watch it at this url : http://www.ustream.tv/recorded/2843545 (talks start around 0:50, mine is between 1:19 and 1:35).

The live demo can be found on the yaps demo application

I hate watching me again, I feel so stupid. My english seems so bad, I'm kind of ashamed. Speaking english in front of a hundred people was much harder than I expected. Finding the good words is sometimes painful. Anyway, the talk was good, everybody understood it or at least the slides where helpful.

Javascript image preloader, without document.images nor Image class

I've maid this twit saying that I built a JavaScript image preloader. Since many wanted to see it. There it is.

I wanted to preload image for a Facebook application displaying a JavaScript photo viewer widget. And when developing Facebook applications, you have deal with Facebook JavaScript rules and what they call FBJS. I already built a FBJS framework, YAPS, helping me (and other developpers) to do simple javascript tasks.
But YAPS can't replace the Image JavasScript class nor the document.images that Facebook prevent us tu use. So I built this code to preload images in a Facebook environment.

Code :

// An image preloader without using Image class nor document.images
// Built for a Facebook environment where those two are forbiden. May not work in a regular web page.
// Just change 

function Preloader(options) {
  var defaultSettings = {
    preloaderID: "preloader_id",
    container: document.body
  };

  this.settings = this.extend(defaultSettings, options || {});
  this.buildPreloader();
};

Preloader.prototype = {
  extend: function(destination, source) {
    for (var property in source)
      destination[property] = source[property];
    return destination;
  },

  // Prepare the preloader. Just a IMG html element hidden with css.
  buildPreloader: function(preloaderId) {
    var image = document.createElement('IMG')
      .setId(this.settings.preloaderId)
      .setStyle({display: 'none'});
    this.settings.container.appendChild(image);
  },

  // Update de src attribute of our hidden tag with the passing url.
  // Having the src updated will make the tag to load the image.
  preloadPic: function(imageUrl) {
    var preloader = document.getElementById(this.settings.preloaderId);
    if (preloader) {
      preloader.setSrc(imageUrl);
      // Don't know why, setting the src make the picture visible. 
      // Have to hide it again.
      preloader.setStyle({display: 'none'});
    }
  }

};

Usage :

preloader = new Preloader({
  preloaderID: "my_image_preloader",
  container: document.getElementById("my_container")
});
preloader.preloadPic("http://imeuble.info/assets/2008/5/21/stéphane-akkaoui-maxime-guilbot-discussion_1.jpg");

Improvements :

  • If I use the same Preloader instance multiple time in a row, I'm not sure the previous image is entirely preloaded before with change the src attribut with the new url.
  • It would have been great if I could passe an Array of urls to the preloader and let him do the work.
  • It must be many other possible improvments. This feat my needs for the moment. Please feel free to modify it. Post an updated code in the comments.