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 :)
AddressChooser widget by Mapeed
January 5th, 2009
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!
rake and cap auto complete for bash shell
January 3rd, 2009
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.
- Copy
rake_cap_bash_autocomplete.shto somewhere (e.g.~/.rake_cap_bash_autocomplete.sh). - 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:
And when you begin to enter a task command:
$ 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
If you have more than 128 commands, you will see
$ rake test: TAB TAB
test:benchmark test:functionals test:integration test:plugins test:profile test:recent test:uncommitted test:units
$ rake TAB TAB
Display all 128 possibilities? (y or n)
Same for cap
Enjoy!
ProtoFX a new effect engine for Prototype
December 13th, 2008
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
New component (auto_complete) in prototype UI
February 22nd, 2008
I have added a new component in Prototype UI after having seeing this auto_complete from InteRiders
First of all, I want to thanks those guys and also Guillermo Rauch for the first version based on mootools.
For a customer, I needed an component based on prototype butn with content set by Ajax request and with some other features. I decided to port this component in prototype UI.
The main advantage of being part of Prototype UI is I can use some great functionnalities of this frame work without adding complicated code like:- Shadowing system for a better look and feel and better user experience. It does not look like a “flat” div under the input field
- IFrameShim to avoid the bug of having select box over the completion
- packr version
The component is fully unobtrusive, all HTML code needed for displaying completion is built by the script. As always, I try to make component skinnable. You can see below a “facebook” style as the original version and a more Apple like look and feel.
Facebook style

Apple style
It’s only available in trunk version right now but it will be included in the next release candidate planned for March.
If you really want to use it :), you can dowload a zip file with functionnal tests included.
I will add some features like serialization or a way to hand automatically hidden fields for an easier submit process. I have also to work on unit tests and documentation before the release.
If you want to try it, check those two functional tests: non ajax and ajax fill (be aware that it’s faking an ajax request, some browser do not like it :)).
PS: I will be away from my computer for a week, so I won’t reply to any comments before March.
First Release Candidate of Prototype UI
February 6th, 2008
I am very proud to announce First Release Candidate of Prototype UI.
This release only includes Window and Carousel. In trunk version you will find also Context Menu and an experimental Dock. Really soon, we will add Tooltips, Calendar (from Min), Accordion and more
So stay tuned :)
Easy error display on rails ajax form
January 30th, 2008
I have never found a easy way to handle errors in rails with ajax form. Here is my implementation.
You have nothing to change in your view and in your controller, just few line of Javascript.
Here is how it works:
The form
Let’s imagine we have a contact form 3 required fields, name, email and message like this1 2 <%- form_remote_for @contact, :html => {:class => :contact, :id => :contact_form} do |f| -%> 3 <label for="name">Name *</label> 4 <%= f.text_field :name, :class => :text %> 5 <br/> 6 7 <label for="email">Email *</label> 8 <%= f.text_field :email, :class => :text %> 9 <br/> 10 11 <label for="message">Message *</label> 12 <%= f.text_area :message , :class => :text%> 13 <br/> 14 15 <label for="submit"> </label> 16 <%= submit_tag "Submit" %> 17 <br/> 18 <%- end -%>
We use form_remote_for for ajax post and we set an id to the form for later use. It should look like this

The model
Contact model just have some validations1 2 class Contact < ActiveRecord::Base 3 validates_presence_of :name, :email, :message 4 end
The controller
The controller is a classic REST action create. In this example I just handle Ajax post but you can add code for HTML or XML request. The only thing we need to do is to return an JSON response.1 2 def create 3 @contact = Contact.new(params[:contact]) 4 respond_to do |format| 5 format.js { 6 if @contact.save 7 render :json => {:object => "contact", :success => true} 8 else 9 render :json => {:object => "contact", :success => false, :errors => @contact.errors} 10 end 11 } 12 end 13 end
Javascript
So how our code will handle this JSON response. The view is a classic remote_form, the model just have validation and our controller returns a JSON string. It’s pretty easy.
With Prototype, you can register function on Ajax callback, here comes the magic:1 2 Ajax.Responders.register({ 3 onComplete: function(responder, request){ 4 var response = (request.responseText.evalJSON(true)); 5 if (response.object) { 6 // Remove old erroes 7 $(response.object + "_form").select(".error").invoke("removeClassName", "error"); 8 $(response.object + "_form").select(".error_message").invoke("remove"); 9 10 // Success: clear all input with text 11 if (response.success) { 12 var form = $(response.object + "_form"); 13 form.select(".text").each(function(element) {element.value = ""}); 14 } 15 // Else add error by creating a div with error message 16 else { 17 response.errors.each(function(error) { 18 var element = $(response.object + "_" + error[0]); 19 if (element) { 20 element.addClassName("error"); 21 element.insert({after: new Element("div", {className: "error_message"}).update(error[1])}); 22 } 23 }) 24 } 25 } 26 } 27 });The result will be like this:

Explanation
If fact everything is JSON data, it contains object name, and errors.
The JS just create divs after any field with error with error message and add an error class to the input. You just need to set some CSS attributes.
Prototype UI beta version (PWC reloaded)
November 4th, 2007
I am very happy and proud to announce prototype UI is officially open today.
At the beginning of the project, it was only a full rewrite of Prototype Window but it became quickly a UI library based on Prototype 1.6 and script.aculo.us 1.8 to include all my previous components like Prototype Carousel ....
This library is developed by Samuel Lebeau and myself. Sam worked hard on the core classes and the object design. It’s also done with help of Juriy Zaytsev and Vincent Le Moign for the design.
And I want to thank Emanuel ‘Mila76’ for his help on IE (BIG HELP) and for his div version of PWC (the new window system is based on it).
This version is only for developer and early adopters. You can only download it with subversion. The final release will be done when prototype 1.6 will be stable and of course when prototype UI too :).
You will be able to download a JS per component, a JS file with the full library and a build page will allow you to create your own JS file with UI components you need.
This goal is to build to best free UI library (under MIT licence) based on Prototype.
In the current version you have- window
- skinnable
- shadowing system independent from window and skinnable
- div based
- resizable from all borders and corners
- custom buttons
- Dialogs (like it’s done in PWC) are not yet implemented but will be done soon
- carousel: only HTML content (no Ajax content)
- dock (experimental)
- shadow: a simple class to add shadow on any element with a absolute position.
Stay tuned ;) and long life to prototype UI.
Here is a sample test to see the new window system (from functional tests included in the distrib)
PS: Any feedback is really appreciated (bugs, documentation, patches, API …)
Simple Layout Manager with Prototype 1.6
October 3rd, 2007
Aaron (Aaron @ ennerchi) ask me to develop a simple layout manager for a web application. First of all, I want to thanks him for accepting to release this layout manager in open source under MIT-license.
This class is inspired by RUZEE.LayoutManager but based on prototype 1.6. RUZEE version was to slow on complex layout.
It’s an unobtrusive script based on CSS classes. This picture shows what CSS class to use.
Inside a lm_container you can add:
- lm_top / lm_bottom for top/bottom rows with fixed height and resizable width, you can add as many rows as you want,
- lm_left / lm_right for left/right columns with fixed width and resizable height, you can add as many columns as you want,
- lm_center, middle content with resizable width and height, you can have only one per container.
1 <div class="lm_container"> 2 <div class="lm_top"></div> 3 4 <div class="lm_left"></div> 5 6 <div class="lm_center"></div> 7 8 <div class="lm_right"></div> 9 10 <div class="lm_bottom"> </div> 11 </div>And just included layoutmanager.js in your head section
1 <script type="text/javascript" src="prototype.js"></script> 2 <script type="text/javascript" src="layout_manager.js"></script>
You can see it in this simple example
Of course layout can be nested like this:1 <div class="lm_container"> 2 <div class="lm_top"></div> 3 4 <div class="lm_left"></div> 5 6 <div class="lm_center"> 7 <div class="lm_container"> 8 <div class="lm_top"></div> 9 <div class="lm_left"></div> 10 <div class="lm_center"></div> 11 <div class="lm_right"></div> 12 <div class="lm_bottom"> </div> 13 </div> 14 </div> 15 16 <div class="lm_right"></div> 17 18 <div class="lm_bottom"> </div> 19 </div>
You can see it in this embedded example
If you work with ajax request and want to add dynamically content, you just need to call
1 layoutManager.add('your_element_id');
because you have a global variable: layoutManager. This zip file contains a sample with an Ajax Request.
So download it and focus on your web application :)
A pastis for pastie
September 30th, 2007
If you use pastie service to share code (or may be you are already addicted to it), Samuel Lebeau has released a perfect ruby gems to pastie anything in one command line.
It’s called pastis (if you are French you know what a Pastis:”http://en.wikipedia.org/wiki/Pastis” is :), it’s a great alcohol from south of France).
You can get details on his blog.
The best is you can add a command on TextMate to pastie selected text. When you workk remotely and you want to share code with co-workers it’s a great time saver.
Here is the command taken from his article:
1 2 #!/usr/bin/env ruby 3 require 'rubygems' 4 require 'pastis' 5 6 input = ENV['TM_SELECTED_TEXT'] || File.read(ENV['TM_FILEPATH']) 7 8 languages = { 9 /source\.ruby/ => :ruby, 10 /text\.html\.basic/ => :html, 11 /text\.html\.ruby/ => :rhtml, 12 /source\.js/ => :javascript, 13 /source\.(c|c\+\+)/ => :c, 14 /source\.sql/ => :sql, 15 /source\.diff/ => :diff 16 } 17 18 language = languages[languages.keys.find { |pattern| ENV['TM_SCOPE'] =~ pattern }] || :plaintext 19 20 paste = Pastis.paste(input, :language => language) 21 22 `open #{paste.url}` 23
Prototype Portal Class #2
September 4th, 2007
I have added a new option to prototype portal window class to be able to have multiple portals on the same page. The new option is accept, based on accept option of Droppable. So you can do something like this;
1 var portal = new Xilinus.Portal("#page2 div", { accept:"portal1"}); 2 var portal = new Xilinus.Portal("#page2 div", { accept:"portal2"});for having to portal in the same window. With a new HTML file:
1 <div id="page1"> 2 <div id="widget_col_0"></div> 3 <div id="widget_col_1"></div> 4 <div id="widget_col_2"></div> 5 </div> 6 <div id="page2"> 7 <div id="widget_col_3"></div> 8 <div id="widget_col_4"></div> 9 </div>I have added a new sample file. you can give it a try. I have updated widget.js javascript file or check out code from svn:
svn co http://svn.itseb.com/public/prototype-portal/trunk prototype-portal

