Dev Blog AF83

Lundi dernier (le 21 juillet), nous avons pu assister à 3 présentations dans le cadre des ateliers du lundi. Le premier était une introduction aux attaques de type CSRF par Ori. Clément a ensuite fait une session sur le javascript avancé avec la bibliothèque MooTools. Vous pouvez télécharger les slides (format Open Office) et la mini-application (format zip). Enfin, Ovidiu nous a expliqué ce qu’est BuildBot et comment il fonctionne.

La prochaine édition aura lieu lundi prochain, avec au programme :

• 10h30 : le protocole HTTP par Ori
• 11h30 : survol de la technologie des mondes virtuels par Thierry : Qu’est-ce qu’un monde virtuel ? Pour quoi faire? Et dans les années à venir ?
• 12h30 : UNIX toolbox par votre serviteur (Bruno) : la magie de la ligne de commande, les commandes utiles…

Rendez-vous au 64 (2ème étage à gauche) pour assister aux ateliers.

According to the Microsoft documentation, there are two dirty ways to catch such objects DOM events :

Here are two exemples using the "PlayStateChange" event :

The two script tag properties "for" and "event" don't appear in the HTML standards, nevertheless that way works fine with Internet Explorer 6, 7 and Firefox 2, but doesn't with Firefox 3 .
The second one works on all those browsers, but a problem appears when several player instances are running. How to know which one has fired the event ?

An alternate way is using DOM level 2 events. However, the WMP plugin for Firefox doesn't fire its events in the DOM. Instead of it, the plugin probably look for matching script tags and eval the content it found.

Then, on Internet Explorer, and contrary to all other events in this browser, the ones from WMP objects are not prefixed by "on" (like "onMouseOut", "onClick" ...).
Since the javascript libraries like mootools or prototype follow that Microsoft "standard", their event listeners on DOM elements are useless.

So, the good syntax (which does work only with IE) is :

La gestion des dates sous PHP a toujours été compliquée (pour ne pas dire pénible). Aussi, nous avons commencé à réfléchir sur une classe Date (ou DateTime) qui simplifierait cela au cours d'un atelier du lundi.

Nous avons également fait une session intitulée "A la découverte de SproutCore". SproutCore est un framework javascript qui a bénéficié du buzz lord de la dernière Keynote d'Apple. Aussi, il nous semblait intéressant de voir quel est le potentiel de ce framework. Nous sommes arrivés à la conclusion qu'il était encore trop tôt pour juger (pas encore de d'applications en ligne, pas de tutoriels à part le Hello World de base, etc.).

Pour ces 2 sessions, les slides sont disponibles : classe Date pour PHP et A la découverte de SproutCore.

Ruby France, Silicon Sentier et AF83 ont le plaisir de vous annoncer l’organisation du premier RailsCamp (BarCamp/DevCamp dédié à Ruby on Rails) parisien. Il aura lieu le samedi 17 mai 2008 dans le cadre convivial de la Cantine, Paris, France.

Le thème de cette non-conférence est bien sûr Ruby on Rails, mais aussi des sujets afférents : Capistrano, Mongrel, Prototype, Script.aculo.us… L’événement est gratuit et
ouvert à tous, des experts Rails aux débutants.

Il sera suivi le lendemain (le dimanche 18 mai) de 11h à 17h par un MashPit. Cette journée sera dédiée à la réalisation collaborative de mini-projets informatiques basés sur Ruby on Rails.

Pour s'inscrire (c'est gratuit, mais limité en nombre de places) : RailsCamp et MashPit

On one of our platforms that uses the geocoding services from the google maps api v2 (using client side javascript) we fell upon a very very weird bug.

For the same city google gives different answers based upon the presence of accents in the query string.

1. When you look for Angoulême (the correct spelling, see the small hat upon the e? called accent circonflexe or by it's html entity name ê) Google's geocoding api gives the incorrect answer of angouleme without the accent.
2. When you look for Angouleme (without the accent) it gives the same incorrect answer angouleme.
3. But when you look for Angoulème (incorrect spelling with an 'accent grave') it outputs the correct answer angoulême !!!

You can test by using the following urls:
angouleme
http://maps.google.fr/maps/geo?hl=fr&oe=utf-8&q=angouleme%2CFR&key=REPLACE BY A VALID GOOGLE API KEY
angoulême
http://maps.google.fr/maps/geo?hl=fr&oe=utf-8&q=angoul%C3%AAme%2CFR&key=REPLACE BY A VALID GOOGLE API KEY
angoulème
http://maps.google.fr/maps/geo?hl=fr&oe=utf-8&q=angoul%C3%A8me%2CFR&key=REPLACE BY A VALID GOOGLE API KEY

The answers are extracted from the json section that looks like this: "SubAdministrativeArea":{"SubAdministrativeAreaName":"Charente","Locality":{"LocalityName":"Angoulême"}}

The same problems appears for other place names with accents but has not been thoroughly tested.

Welcome to probably the most useless blog post on the web.

Now you can happily animate stuff in the address bar (do you remember the nineties and nice status bar animations ? ) .

The beautiful online demo can be found here : Demo of animated address bar

Ever needed to select in a form a start and an end time (meeting, event etc..) this little bit of code will help you have a default interval (here 2 hours). When the first combo box changes the second one is set to two hours later.
As usual this javascript is unobtrusive and degradable, just call somewhere initHourCombos() to initialize it. Make sure you change the name $('start') and $('end') if your elements have a different id.

You must know the $ Function in prototype (also in jQuery and mootools) that helps you target elements in Javascript. Well, here's my take on it.

Here's the code :

How to use it :


$("mainHeader") : returns the first node in document having "mainHeader" for id and anything for tag name.

$("clickMe:a") : returns the first node in document having "clickMe" for id and "a" for tag name.

$("@clickMe:a") : returns all nodes ( as an array ) in document having "clickMe" for id and "a" for tag name.

$("@:div") : returns all divs in document.

$(":img") : returns first img in document

$("@clear:div" , subNode ) : returns all nodes in DOM node "subNode" having "clear" for id and "div" for tag name.

$("@") : returns all DOM nodes in document.

And so on ...