RailsCamp Paris 2009

March 4th, 2009

C’est annoncé (et déjà plein), le rails camp paris 2009 aura lieu ce samedi 6 mars. (avec un site d’inscription en Rails!)

J’étais inscrit mais je ne pourrais malheureusement pas me rendre à cet événement :(.

Cela s’annonce en tout cas très intéressant avec le merge de Merb et Rails. J’espère qu’il y en aura un autre avant la fin de l’année pour y participer.

Encore bravo à l’association Ruby pour organiser ça. Toujours étonnant de ne voir personne de RailsFrance à ce genre d’événement.

Trainer for SkillsMatter

January 7th, 2009

I am really proud to be a member of SkillsMatter to deliver courses about:

  • JavaScript, JSON & DOM
  • Ajax Enterprise Web Development

The first 5-day session will start in London on February 2th. I will do this session with my friend Tobie Langel itself. More sessions are coming for 2009 in London (UK), Paris (France) and Aarhus (Danmark).

I will post dates as soon as I know them.

I hope to see some of you there :)

Introduction

May be some of you knows about service I launched more than one year now called who-s-web. Its server-side cluster algorithm is at the origin of a new service launched few weeks ago: Mapeed.

But this site has also an address form when you register with a great feature: you can check your address on a little google map before submitting it, you can even move marker if it’s not correct. This “widget” is something you need when you let someone enter a location like a user’s address or a place’s location for a real better user experience.

After having seeing this same kind of form on Google Local Business Center, I decided to make a Javascript component to bring this behavior with only a couple of lines of code and Mapeed.AddressChooser is born :).

Features

  • Javascript framework-agnostic. You can use it as is or with any great frameworks like Prototype, JQuery …
  • Mapping system independent. The current implementation is based on Google Map using a Google Map proxy object.
  • Interactive map display location while you arex typing an address.
  • Center map on user location (based on its IP) if mapping system allows it.
  • Fully customizable.
  • Fully documented with pdoc.
  • Works on Safari, Firefox, IE 6/7, Chrome and Opera.
  • ...

Download

This component is free, open-source and available on github here: http://github.com/mapeed/addresschooser.

You can also get a zip file or directly download Javascript file, checkout official website.

Enjoy!

I love git and git auto complete bash shell. I get so used to it that I type TAB TAB key even for cap and rake command. I’ve been frustrated so many times to not have auto complete for those commands, so I spent a few time on reading git code and google for it.

And here is my result, a little script to add to your .bashrc and you will have rake and cap completion! And mix of what I read on different code/articles.

My code is available on github: rake_cap_bash_autocomplete You do not need to download the repository, just copy sheel file and check README for installation.

  1. Copy rake_cap_bash_autocomplete.sh to somewhere (e.g. ~/.rake_cap_bash_autocomplete.sh).
  2. Added the following line to your .bashrc: source ~/.rake_cap_bash_autocomplete.sh

Then, if you test it in an empty rails directory for instance, you will have:


$ rake TAB TAB
db:abort_if_pending_migrations  db:schema:dump                  doc:plugins                     rails:freeze:edge               test:recent
db:charset                      db:schema:load                  doc:rails                       rails:freeze:gems               test:uncommitted
db:collation                    db:sessions:clear               doc:reapp                       rails:unfreeze                  test:units
db:create                       db:sessions:create              doc:rerails                     rails:update                    time:zones:all
db:create:all                   db:structure:dump               gems                            rails:update:configs            time:zones:local
db:drop                         db:test:clone                   gems:build                      rails:update:javascripts        time:zones:us
db:drop:all                     db:test:clone_structure         gems:install                    rails:update:scripts            tmp:cache:clear
db:fixtures:identify            db:test:load                    gems:refresh_specs              routes                          tmp:clear
db:fixtures:load                db:test:prepare                 gems:unpack                     secret                          tmp:create
db:migrate                      db:test:purge                   gems:unpack:dependencies        stats                           tmp:pids:clear
db:migrate:down                 db:version                      log:clear                       test                            tmp:sessions:clear
db:migrate:redo                 doc:app                         notes                           test:benchmark                  tmp:sockets:clear
db:migrate:reset                doc:clobber_app                 notes:custom                    test:functionals                
db:migrate:up                   doc:clobber_plugins             notes:fixme                     test:integration                
db:reset                        doc:clobber_rails               notes:optimize                  test:plugins                    
db:rollback                     doc:guides                      notes:todo                      test:profile                    

And when you begin to enter a task command:

$ rake test: TAB TAB
test:benchmark    test:functionals  test:integration  test:plugins      test:profile      test:recent       test:uncommitted  test:units        

If you have more than 128 commands, you will see
$ rake TAB TAB
Display all 128 possibilities? (y or n)

Same for cap

Enjoy!

Introduction

I did this framework first of all for personal use. I could not find what I needed in script.aculo.us and honestly, I do not see any activity in script.aculo.us or scripty2 (alpha version of script.aculo.us 2)

I like also jQuery when I need to just have animation. But as I use a lot Prototype to build complex web applications, I needed something based on this powerfull JS Framework.

So ProtoFX is born :)

It’s a light weight animation framework (base version is less than 7Ko packed) with great features. I decided to use music semantic for class names. Running effects is like playing a song isn’t it?. The object in charge of time synchronization is called Metronome. The “queue” system (I will describe it later, but it’s more powerfull than a classical queue system) is called Score.

Actions are like music player actions: play/stop/reverse/rewind…

But let’s talk about ProtoFX features.

Features

Easy to use

I tryed to make an API really easy to use. You just need to chain methods on an effect object. For example to fade an element, just do:

   1  new FX.Element(element).animate({opacity: 0}).play();

If you need to set some options like duration just call setOptions function in chained methods.

   1  new FX.Element(element).setOptions({duration: 2000}).animate({opacity: 0}).play();

Pretty simple!

Actions

As I said before, actions are like using a music player. You can do:

  • play
  • stop
  • reverse (even if the effect is running, call reverse and your animation will run backward)
  • rewind. Next time you call play it will play from the beginning

Delta

Sometimes you do not know exactly where is your element in the page, you just want to move it of XX pixels to the left. You can use operand +=, -=, /= and *= to specify delta like this

   1  new FX.Element(element).animate({left: "+=100px"}).play();

“Cloneable”

One great feature is to be able to create an effect without specifying an element. Consider that like just specifying effect parameters. To be able to play it on a element, just clone the effect and call play.

This is very usefull for UI widget for instance. UI is usually created dynamically. In this case it’s pretty hard to give an effect as UI option because you do not know the element to apply the effect when you create your UI component.

With ProtoFX, you can have an effect parameter on your widget. The widget will clone it when it needs to play animation.

   1  var fx = new FX.Element().animate({opacity: 0});
   2  ...
   3  ...
   4  fx.cloneFor(element1).play();
   5  fx.cloneFor(element2).reverse().play();

Event notifications and callbacks

As a lot of prototype add-ons, ProtoFX fire events on different actions like ‘fx:started”, “fx:stopped” ... You just need to observe those events if need be, as usual.

But sometimes, I think it needs too much code for simple action, so event notifications are also notify to callbacks. So you can write code like that:

   1  var fx = new FX.Element(element)
   2    .onBeforeStarted(function() {element.show();})
   3    .animate({height: '+=100px'})
   4    .play();

Instead of

   1  var fx = new FX.Element(element)
   2    .animate({height: '+=100px'})
   3    .play();
   4  
   5  
   6  document.observe('fx:beforeStarted', function(event) {
   7    event.element().show();
   8  }  
   9  
  10  // And do not forget to unregister the event!!
  11  

Element methods

I have also added some usefull element methods that I use a lot with scripty like Element#fade/appear, Element#blindUp/blindDown. I will add more if needed.

Based on Penner equations

Effect transitions are based on the famous Penner equations (like jQuery). It gives nice and fluid effects like bouncing effects.

Score

As I said, the queue system is called Score. but Score is an effect itself (subclass of Fx.Base) so you can also call play/stop/reverse/rewind on it!!

You can add effect at the beginning, at the end, after a specific effect. You can add delay between effects, even negative delay for effect overlap.

   1  var group = new FX.Score('group1');
   2  group.add(fx1)
   3       .add(fx2, {delay: -1000, position: 'last'})
   4       .add(fx3, {delay: -1000, position: 'first'})
   5       .add(fx4, {delay: 1000, after: 'fx2'});

Samples

Some samples are included with the distrib on github. Check out this fun example. Play with the play/stop and reverse checkbox. click on it when animation is running!!

Get it!

ProtoFX is under MIT Licence like Prototype. You can get it from github here: http://github.com/xilinus/protofx/tree/master

Documentation is generated with pdoc from Tobie Langel. Just run: rake doc to generate it locally.

Unit tests are coming soon :)

Mapeed is now in public beta

December 13th, 2008

After months of development, Mapeed is now open in public beta.

We are very happy to deliver this first version to anyone who needs to display huge amount of markers on a Google Map.

Mapeed is a server-side clustering plugin for Google Maps. Cluster are created depending on zoom level and location. Use our server API to synchronize your data to our server (only latitude and longitude) and use our Javascript API to manage markers/clusters.

The big picture is - Google map delivers images - Mapeed delivers markers in a efficient way.

To show a way to use Mapeed, we have created CrunchVision a mashup of CrunchBase, Google Map and Mapeed.

This mash-up has even been cited in techcrunch.com !!

This version works only for google maps but if you need to use it on other mapping systems, contact us.

Funny comic

May 27th, 2008

I just saw this little comic on a blog, I really like it!


But this kids should learn ruby instead of C, it will be easier and shorter to write :). It could be something like this:
   1   500.times { puts 'I will not throw paper airplanes in class' }

First RailsCamp in Paris

May 15th, 2008

I will be at the first RailsCamps in Paris organized by Jean-François Tran and the French Ruby comunity.

This is a great event to meet people working with rails and to learn some great stuffs around Ruby frameworks.

I will do a session about google maps and rails. I will try to create a application from scratch!

And may be a talk about Merb and DataMapper.

See you there :)

New Design

May 15th, 2008

Xilinus is changing, design too :)

Xilinus is now a company in web application development based on Ruby frameworks (Ruby On Rails, Merb).

This explains the new design, xilinus.com will be updated soon too.

If you have a project of web application feel free to contact us

Nouveau design (French)

May 15th, 2008

Xilinus change de design!

Xilinus change bien plus que de design, cela devient une compagnie spécialisée dans le développement d’applications Web basée sur des Framework Ruby (Ruby On Rails, Merb). Le site xilinus.com sera aussi bientôt mis à jour.

Si vous avez des projets, des besoins de formations ou de consulting autour des technologies Ruby et Javascript, n’hésitez pas à nous contacter.

Autre nouveauté, un flux RSS pour les articles en français .