Ça y est, décembre est lancé. Et avec les premières neiges on a envie de rester au chaud et de lire des bons articles qui parlent du Web, n’est ce pas ?

4 calendriers avec des perles à découvrir chaque jour de décembre :

• 24ways remets ça pour la sixième année : des articles de haute qualité qu’on attends toute l’année. Ils contribuent à rendre l’hiver moins dur.
• HTML5 Advent : des démos HTML5 pour en avoir plein les yeux.
• Adfont Calendar : mateurs de typographie, sous chaque case se cache une police d’écriture proposée par FontDec.k
• Performance Calendar : et oui, même les performances Web ont leur calendrier.

Typographie, HTML5 et performances : les sujets chaud du Web de cette année sont là pour se tenir au chaud cet hiver jusqu’à Noël.

Utilisateurs de Deezer vous pouvez enfin envoyer la musique que vous écoutez sur Last.fm. Si si. Carrément. Pincez-vous.

Pour ça il vous faut Firefox armé de GreaseMonkey et installer mon script. Allez sur Deezer, autorisez le script à scrobbler et c’est tout.

Bonne musique ! Voilà un album si vous ne savez pas avec quoi l’essayer. Ah et le code est par ici.

(Désolé utilisateurs de Chrome, l’implémentation de GreaseMonkey est trop pourrie, on peut même pas faire d’XMLHttpRequest.)

Le dix-huitième Apéro Ruby organisé par Ruby France était tourné autour de GitHub. Étaient présents les géniaux Scott Chacon et PJ Hyett de GitHub.

Schacon a présenté ShowOff, son application Ruby pour faire des présentations. Pas aussi bien qu’HTML5 Slides, mais je ne suis pas très objectif sur le sujet. Sinon c’est Sinatra, markdown, HTML, JS, que du bon et plein de bonnes idées pour la suite. Ses slides sont même un fork sur GitHub. Miam.

S’en sont suivi plein de questions sur GitHub. Plein de bonnes choses de prévues comme pouvoir utiliser SVN avec n’importe quel dépôt GitHub, ou auxquelles ils réfléchissent sérieusement comme les tickets et le wiki dans une branche du dépôt. Ils m’ont même assuré que l’internationalisation arrivait d’ici une semaine ou deux. \o/

Oh et c’était open bar. Thanks GitHub!

Google Mobwrite est une petite application web qui sert à synchroniser des champs de formulaires en temps réel.

Avec un brin de JavaScript, n’importe quel champ texte devient un éditeur de texte temps-réel comme SubEthaEdit en appliquant les changements chez tout le monde en même temps.

La synchronisation, la fusion et la résolution des conflits entre différents utilisateurs est un problème compliqué dont Google Mobwrite se charge. Votre application finale aura simplement à conserver en mémoire le dernier formulaire envoyé.

Exemple

Installation

Si vous avez une toute petite application, il vous suffit d’avoir des identifiants uniques sur vos champs de formulaires et d’ajouter ces quelques lignes de JavaScript :

<script type="text/javascript" src="http://mobwrite3.appspot.com/static/compressed_form.js"></script>
<script type="text/javascript">
mobwrite.syncGateway='http://mobwrite3.appspot.com/scripts/q.py';
mobwrite.share('identifiant-du-champ', 'identifiant-du-2eme-champ', ...);
</script>

Si vous comptez utiliser ce service un peu plus vous êtes invités à héberger votre propre application ou de la créer gratuitement sur Google AppEngine (se fait en 5 minutes).

Edith

J’ai implémenté Google Mobwrite sur Edith (edit.sunfox.org) en me créant un compte Google AppEngine très rapidement. Depuis, plus de problème d’écrasement de données si plusieurs personnes ont une page ouverte en même temps.

L’amour des standards

Déjà, avec l’UWA Netvibes a crée un standard simple, basé sur des standards déjà extrêmement utilisés (XHTML, JavaScript, CSS) permettant de fabriquer des widgets multi-plateformes (OS X, Windows Vista, Google, …).

L’amour de l’open-source

« Netvibes Rocks! »Désormais, Netvibes s’ouvre encore d’avantage en permettant facilement d’héberger des widgets ou de les intégrer n’importe où. Pour ça, le site netvibes.org fournit du code PHP et JavaScript qui permet cette réutilisation, sous licence libre.

L’amour d’HTTP et de la portabilité de données

La deuxième grande annonce : une interface REST sur http://rest.netvibes.com/. Elle permet de récupérer ses informations publiques et bientôt ses données privées ainsi que la possibilité de les modifier !

Encore une fois la seule plateforme de widgets à s’ouvrir ainsi.

Le cœur brisé de Tariq

Annoncé à peine un jour avant cette meetup, Tariq Krim, CEO emblématique de Netvibes cède la place à Freddy Mini. On sentait l’émotion quand ce fut au tour de Tariq de parler un peu de son départ.

J’espère que le changement de direction ne changera en rien l’ouverture vers laquelle se tourne Netvibes, qui, avec des changements pareils, réussit à avoir un temps d’avance sur les gros Google ou Yahoo.

Les petites conférences de RailsCampParis sont terminées. Première fois que j’assistais à des conférences de type BarCamp et j’ai adoré à la fois l’ambiance, l’ouverture et la proximité des intervenants. Bref compte-rendu des conférences auxquelles j’ai pu assister.

Sébastien Gruhier nous a donné une excellente démonstration d’intégration de Google Maps dans une application Rails d’exemple. Les cartes s’intègrent extrêmement facilement avec un peu de JavaScript (alors qu’à Paris On Rails 2006, Sébastien nous ventait les mérites de RJS ! ;)) et grâce au plugin geokit. Ce dernier est impressionnant, une fois ajouté acts_as_mappable à un modèle, il permet d’excellentes manipulations, tel que :

origin = MultiGeocoder.geocode('8 rue Boucry, Paris, France')
User.find :all, :origin => origin, :order => 'distance'

Ceci retourne la liste des utilisateurs triés par distance par rapport à chez moi. La requête SQL générée automatiquement a une fière allure :

SELECT *, (ACOS(least(1,COS(0.853356449908079)*COS(0.0412320771281345)
*COS(RADIANS(users.lat))*COS(RADIANS(users.lng))+COS(0.853356449908079)
*SIN(0.0412320771281345)*COS(RADIANS(users.lat))*SIN(RADIANS(users.lng))
+SIN(0.853356449908079)*SIN(RADIANS(users.lat))))*3963.19)
AS distance FROM `users` ORDER BY distance

Pour continuer sur le JavaScript, Samuel Lebeau nous a parlé d’event delegation et des façons qui se développent en ce moment pour créer une syntaxe proche de CSS qui permettrait d’appliquer des comportements JavaScript. Les prototype-fruits sont à suivre…

Moi et mes tags

C’est ensuite à Stéphane Akkaoui de nous expliquer comment créer une application Facebook avec Rails. Je ne m’attendais pas à ce que cela soit aussi simple ! Du coup j’ai très envie de faire une petite application Facebook en utilisant le plugin Facebooker… même si Facebook c’est le mal.

La conférence de Jordan Bracco sur Mongrel vs Thin vs Ebb vs FastCGI était intéressante malgré le fait qu’un souci de MacBook lui ait fait perdre toutes ses slides. Tout ça à cause d’un Dark Vador avec un sombrero ;). De bonnes questions et un sujet qui bouge beaucoup. Pour preuve, c’est le tout récent Ebb qui sort grand vainqueur du benchmark fait pour l’occasion.

J’ai beaucoup apprécié toutes ces conférences à taille humaine et je regrette d’avoir dû choisir entre plusieurs conférences tant les sujets étaient intéressants. Merci aux organisateurs, aux sponsors, aux bonbons, aux boissons, aux pizzas, à la Cantine, aux conférenciers et à tous ceux avec qui j’ai pu échanger quelques mots lors de cette journée.

Grand merci (en retard) à l’association Ruby France ! Vivement RailsCamp 2009.

L’interface utilisateur passe aussi par la forme du curseur. Peu utilisée en CSS, la propriété cursor regorge pourtant de valeurs dont on peut se servir pour aider l’utilisateur dans une application web (wait progress help default pointer text vertical-text crosshair move -moz-grab -moz-grabbing -moz-copy -moz-alias -moz-zoom-in -moz-zoom-out -moz-cell -moz-context-menu not-allowed no-drop nw-resize n-resize se-resize sw-resize s-resize e-resize w-resize ne-resize col-resize row-resize).

Par exemple, pour indiquer qu’un chargement a lieu via Ajax, plutôt que d’afficher une image de loader animée, un style CSS peu suffire :

.loading, .loading a, .loading input, .loading textarea {
	cursor: progress;
}

Ne reste plus qu’à appliquer la classe loading au body dès que la page fait un appel Ajax ou un long traitement.

Si vous utilisez Prototype ajoutez ces quelques lignes pour que la classe soit appliquée automatiquement tant qu’un appel Ajax a lieu :

Ajax.Responders.register({
  onCreate: function() {
    $$('body').first().addClassName('loading');
  },
  onComplete: function() {
    if (Ajax.activeRequestCount == 0)
      $$('body').first().removeClassName('loading');
  }
});

Le livre Prototype and scriptaculous: You never knew JavaScript could do all this bungee jumping, de Christophe Porteneuve est sorti ! Il est totalement à jour avec Prototype 1.6 et script.aculo.us 1.8 fraîchement sortis également.

Cela a été un réel plaisir d’être relecteur technique sur ce livre. C’est une excellente référence pleine de bons exemples d’utilisations de ces deux librairies JavaScript immanquables. Un bon livre de chevet de développeur Web ! :)

Un morceau de code ou un bout de texte à partager ? Il suffit de vous rendre sur http://edit.sunfox.org/cequevousvoulez et de coller. C’est tout. La page s’enregistrera toute seule toutes les deux secondes. Pas besoin de s’identifier, pas de bouton Envoyer ni de redirection, aucun autre choix à faire que cequevousvoulez.

En contrepartie de cette légèreté, tous ceux à qui vous avez fourni l’url peuvent modifier votre page et tout supprimer. Il n’y a pas de moyen d’annuler. Edit ne sert donc pas à stocker quelque chose auquel vous tenez énormément, mais peut tout de même servir de léger petit wiki à condition qu’il reste entre amis.

Son code est disponible, sous GPL.

Impossible de passer à côté des librairies javascript Prototype et script.aculo.us. Elles-deux rendent ruby-esque le JavaScript et permettent d’oublier les différences d’implémentations entre navigateurs. Les fonctions à constamment réécrire soi-même sont déjà là, bien pensées, documentées, optimisées. JavaScript redeviens agréable.

Il ne leur manquait qu’un bon bouquin. C’est à quoi c’est attardé le prolifique Monsieur Porteneuve avec l’écriture du livre Prototype and script.aculo.us à paraître chez Prag’prog’, l’éditeur fétiche de Rails qu’il est bien. Et figurez-vous que la première partie est déjà disponible en pdf en beta publique.

Pour avoir lu cette première partie en avant-première (ai-je oublié de dire que je faisais partie de la petite équipe de relecteurs techniques ?), elle est excellente. Elle vous plonge directement dans la joie de faire du Javascript de la bonne façon avec Prototype, de façon pragmatique, sur d’excellents exemples.

J’ai hâte de m’atteler à la prochaine partie de la relecture technique qui devrait arriver dans la semaine qui vient. Celle-ci portera sur la librairie script.aculo.us, permettant de faire monts et merveilles en trois coups de pinceaux.