I was a long time since this one was on the boxes, it finally cames out: the new version of my website is online!

Aymeric aka Miho designed it; I think it's very clear and let a good place for the content with a great readability.

I developed it using my own framework which optimizes every to the server by compressing every HTML pages. It also merges and compresses CSS and JavaScript after removing all the comments and useless whitespaces. With that my website gains a A-grade with YSlow - only one F for not using CDN and one B for contents without cookies.

I also enjoyed make it accessible without reloading the page using AJAX and jQuery. I used jQuery address which works perferctly. And nyroModal is also in the party to show the references. Of course all pages are accessible without JavaScript for a better ranking.

In the same time I left phpMyVisites to use Google Analytics, using the manual tracker for Ajax pages.

Finally, I want to thnaks the following personns:

• Miho for the design
• My mother for the French corrections
• Chonchon for the English corrections
• Florian for the new logo

To celebrate this, I created a facebook group and I'm twitting again more often. Don't hesitate to join the group or follow me!

If you have any remarks, suggestions or anything else to say about the new wbesite, the comments are here for you!

Elle traînait dans le cartons depuis plus d'un an, elle arrive enfin : la nouvelle version de mon site est enfin en ligne !

C'est Aymeric aka Miho qui a réalisé le graphisme que je trouve très clair et laissant bien la place pour le contenu avec une bonne lisibilité.

Je l'ai développé en utilisant mon propre framework qui optimise toutes les requêtes vers le serveur en compressant les pages HTML, mais aussi les CSS et les JavaScript. Ces derniers sont aussi fusionnés en une seule URL pour limiter au maximum le nombre de requêtes vers le serveur. Grâce à ça, le site obtient le grade A avec YSlow - un seul F pour ne pas utiliser un CDN, et un B pour les contenus sans cookies.

Je me suis aussi amusé à rendre tout le site accessible sans recharger de page en utilisant AJAX et jQuery. J'ai utilisé le plugin jQuery address qui fonctionne à la perfection. Enfin, nyroModal est aussi de la partie pour afficher les références. Bien sûr, l'ensemble du site reste accessible sans javaScript pour permettre un meilleur indexage.

J'en ai aussi profité pour quitter phpMyVisites pour intégrer Google Analytics, utilisant la tracker manuel lors des changements de pages avec Ajax.

Enfin, je tiens à remercier les personnes suivantes :

• Miho pour le graphisme
• Ma mère pour les corrections de français
• Chonchon pour les corrections d'anglais
• Florian pour le nouveau logo

Pour l'occasion, j'ai créé un groupe facebook et je me mets à twitter plus régulièrement. N'hésitez pas à rejoindre le groupe ou me suivre !

Si vous avez des remarques, suggestions ou n'importe quoi à dire sur le nouveau site, les commentaires sont là pour vous !

That's it, my internship is over since last Friday.

Almost one year by Fluidesign to program, develop, integrate, learn.

I really progressed in JavaScript and Ajax Ajax with jQuery that I can't leave anymore. I also learnt many about HTML/CSS integration, thanks to PJ to whom I always asked his mind.

Anyway, it was one year of happiness with fabulous people. The last weeks looked like holidays for everybody (too bad, they're going to work on Monday...).

To not forget all the website I worked in, here is an alphabetical listing of them with a tweak description of what I've done.

• Amandine Café: Navigation by Ajax
• Amber Ridge: The first website I worked on to update some photos and copies
• Athletes: a few PHP and JavaScript debug
• Broad Academy and Broad Residency: Weekly text and image updates
• California Apparel News: Adding PHP functionalities and HTML/CSS updating
• Coral Tree Café: Contact form debugging
• Coupon Chief: PHP and JavaScript debug, HTML/CSS integration of the blog
• First Announcement: Adding functionnalities (Crop Image) and PHP/JavaScript debug
• Gameworks: Adding functionnalities in the backend, Flash, HTML, and CSS updates
• Infinity Studios: PHP Debug (OsCommerce)
• It's Hospitality: Adding functionalities, templates creating, JavaScript, installing search using Zend Lucene. The website uses Symfony (I spent almost all my time on it during the last 6 months)
• Karma Fundation: Flash Debug and updating
• Karma Kandyland: Flash and HTML updating
• Kayne: Quarterly HTML/CSS Updates
• Lisa Kline: ASP.Net and JavaScript Debug
• Low Impact Living: Debug and Adding functionalities
• Not Neutral: HTML updates and uses of Campaign Monitor for the newsletter
• Regent Properties: HTML and Flash updates
• Rimi Security: whole PHP development
• Say Het There: whole PHP and JavaScript development
• Sinai Temple: PHP Debug and HTML updates
• Temple Emmanuel of Beverly Hills: HTML updates
• Tripkick: PHP and JavaScript development of the frontend using CakePHP
• Wessco: PHP and HTML updaes

You could think it's not a lot for one year. But as I said, It's Hospilaty took me a lot of time because it's really huge.

One more time, I'd like to thanks all the Fluidesign team who was really great during all my internship.

Now I still have 3 weeks in USA. A friend is coming on Monday and we'll travel for a roadtrip which will unforgettable. (Yes you probably got it, you'll probably have more posts with a lot of text and photos...)

Version française de ce billet

Voilà, mon stage s'est terminé vendredi dernier.

Presqu'un an au total passé chez Fluidesign à programmer, développer, intégrer, apprendre.

J'ai beaucoup progresser en JavaScript et Ajax avec jQuery que je ne peux plus quitter. J'ai aussi beaucoup appris en intégration HTML/CSS grâce à PJ à qui je demandais toujours son avis.

Bref, un an de bonheur avec des gens fabuleux. Les dernières semaines avait un petit air de vacances pour tout le monde (je plains ceux qui reprennent le boulot lundi).

Pour ne pas oublier tous les sites sur lesquels j'ai travaillé, je vais les lister ici (par ordre alphabétique) avec une description de ce que j'ai fait dessus.

• Amandine Café : j'ai mis en place la navigation des pages par Ajax
• Amber Ridge : un des tous premiers sites sur lequels j'ai travaillé pour mettre à jour des photos et des textes
• Athletes : un peu de debug PHP et JavaScript
• Broad Academy et Broad Residency : Mises à jour hebdomadaire des textes et images
• California Apparel News : Ajout de fonctionnalités PHP et mises à jour HTML/CSS
• Coral Tree Café : Debug du formulaire de contact
• Coupon Chief : Debug PHP et JavaScript, Intégration HTML/CSS du blog
• First Announcement : Ajout de fonctionnalités (Crop Image) et debug PHP/JavaScript
• Gameworks : Ajout de fonctionnalité dans l'admin, mises à jour Flash, HTML et CSS
• Infinity Studios : Debug PHP d'OsCommerce
• It's Hospitality : Ajout de fonctionnalités, mise en place des templates, JavaScript, mise en place d'une recherche avec Zend Lucene le tout avec Symfony (j'y ai passé la majeure partie de mon temps les 6 derniers mois)
• Karma Fundation : Debug et mise à jour Flash
• Karma Kandyland : Mise à jour Flash / HTML
• Kayne : Mises à jour trimestrielles HTML/CSS
• Lisa Kline : Debug ASP.Net et JavaScript
• Low Impact Living : Debug et ajout de fonctionnalité PHP
• Not Neutral : Mises à jour HTML et Utilisation de Campaign Monitor pour la newsletter
• Regent Properties : Mises à jour HTML et Flash
• Rimi Security : Développement PHP complet
• Say Het There : Développement PHP et JavaScript
• Sinai Temple : Debug PHP et mises à jour HTML
• Temple Emmanuel of Beverly Hills : mises à jour HTML
• Tripkick : Développement PHP et JavaScript de la partie publique du site avec CakePHP
• Wessco : Mises à jour PHP et HTML

Alors oui, on peut se dire que ce n'est pas beaucoup pour un an de travail. Mais comme je l'ai dit, It's Hospilaty m'a pris énormément de temps car il est absolument immense.

Encore une fois, je profite de ce message pour remercier toute l'équipe de Fluidesign qui a été plus que géniale durant mon stage.

Maintenant, il me reste 3 semaines aux USA. Un ami arrive lundi et à nous l'aventure, pour un roadtrip qui s'annonce inoubliable. (oui, vous l'aurez compris, vous aurez surement encore des postes avec plein de textes et plein de photos...)

English Version of this post

2 weeks since my last English post, 1 month before my real new post (the last was only translation of older posts). During this time I was busy to translate these posts, busy at work in Fluidesign, busy to live in LA.

During the last days, I developed my first own jQuery plugin: nyroModal.

Why a new plugin of this kind when there is already too many?

4 answers:

• There is no too much using jQuery, most of them use Prototype/Scriptaculous
• Most of them aren't too customizable as expected
• When you find a bug, it's difficult to contact the developer -who often ask some Paypal donations- or understand the code to fix it
• Because it's still pleasant for his ego to realize the things by himself

My plugin provides all the features I saw in the differents plugins I tried. In bulk:

• Ajax Request
• Display an hidden DOM element
• Image
• Gallery
• Form
• Iframe

But I also added some stuff I don't believe see elsewhere, or not enough:

• You can target the content inside an Ajax request or a form
• Forms works with a file upload
• Background color is modifiable dynamically
• Display an error message if needed
• Ability to resize from an Ajax Request

Moreover I took care about the ability to customize the modal, to allow everybody to change the way the elements are animated. There is alos many possible callbacks to done every JavaScript action tou need. Thus every animation function could be fully rewritten and everything is documented: all available settings and the full modal process to allow each developer to understand how it works et to do what ever he want. I probably create more callback than necessary but better more than not enough!

And yes, it's already the 1.1 version because I showed it to my Fluidesign colleagues and all told me the transition -especially for the gallery- didn't look so good. So I created 2 new animations callback the same evening to get round of that.

• Project Page (en)
• Project Page (fr)
• Google Code Page
• jQuery Plugin Page

If you have any suggestions, bug, improvement idea or if you use it, don't hesitate to let a comment. I'll be glad to answer it.

PS : I know, I didn't search too far for the name...

Version française de ce billet

Bientôt un mois que je n'ai pas publié de billet en français. Occupé à traduire des billets en anglais, occupé à développer chez Fluidesign, occupé à vivre à Los Angeles.

Et puis ces derniers temps, je me suis aussi attelé à développer mon premier plugin jQuery : nyroModal.

Alors pourquoi un nouveau plugin de ce genre alors qu'il en existe déjà tant ?

4 réponses :

• Il n'en existe pas tant que ça sous jQuery, la plupart étant sur Prototype/Scriptaculous
• La plupart ne sont pas autant personnalisable qu'il ne le laisse entendre
• Lorsqu'on trouve un bug, il est difficile de contacter le développeur (qui demande souvent un peu de Paypal) ou d'appréhender le code d'un autre pour le corriger
• Parce qu'il est toujours plaisant pour son égo de réaliser les choses soi-même.

Mon plugin reprend donc l'ensemble des fonctionnalités que j'ai pu voir dans les différents plugins que j'ai testés. En vrac :

• Requête Ajax
• Affichage d'un élément du DOM caché
• Image
• Galerie
• Formulaire
• Iframe

Mais j'ai aussi ajoutés des choses que je ne crois pas avoir vu ailleurs, ou pas assez souvent :

• Il est possible de cibler l'élément affiché au sein d'une requête Ajax ou d'un formulaire
• Les formulaires fonctionnent même avec un upload de fichiers
• La couleur de fond est paramétrable dynamiquement
• Affichage d'un message d'erreur si besoin
• Possibilté de modifier la taille de la modale depuis une requête Ajax

De plus, j'ai beaucoup prêté attention à la personnalisation, pour permettre à chacun de modifier la façon dont sont animés les éléments. Il y a aussi de nombreux callback possible pour effectuer toutes les actions JavaScript dont vous avez besoin. Ainsi, toutes les fonctions d'animations sont entièrement redéfinissable et tout est documenté : l'ensemble des paramètres disponibles et le processus complet de la modale pour permettre à toute personne de comprendre comment il fonctionne et d'en faire ce qu'il en veut. J'ai sans doute créer plus de callback que nécessaire, mais de cette façon tout est possible.

Et oui, on en est déjà à la version 1.1 puisque je l'ai montré à mes collègues de bureau et tous m'ont dit que les transitions (pour la gallerie notamment) n'était vraiment pas bon. J'ai donc créer deux nouvelles fonctions d'animation le soir même pour pallier à cela.

• La page du projet (en)
• La page du projet (fr)
• La page google code du projet
• La page dans le répertoire des plugins jQuery

Si vous avez une suggestion, un bug, une idée d'amélioration ou si l'utiliser sur votre site, n'hésitez pas à laisser un commentaire. J'y répondrai avec plaisir.

PS : hé oui, je ne suis pas allé chercher bien loin pour le nom...

English version of this post

Des news d'ici et d'ailleurs :

• Prism sort en version 0.9
• Si vous chercher l'extension ultime pour rechercher vos messages dans Thunderbird, Seek est votre ami
• Firefox sort en beta 4. Encore une beta 5 avant laversion finale. A noter les améliorations de mémoire.
• IE8 sort en beta
• Les résultats des navigateurs en beta à l'acid test 3
• Vous travaillez sur une version mobile d'un site ? Lisez ceci pour connaitre les bonnes pratiques
• jQuery organise un worldwide sprint ce week-end spécialement pour jQuery UI
• On parle de plus en plus de Piwik
• TinyMCE sort en version 3.0.5
• Netvibes évolue vers le réseau social, sous le nom de Ginger. Ma page est ici, et devrait se remplir ce week-end.
• Marre de créer vos htaccess à la main ? La solution en ligne.
• Après l'Air Guitar, Canal Plus lance l'Air Fuck : filmez-vous et gagner un scooter (wahou, un scooter, j'en ai toujours rêver...)
• Les LoKataires, amis et artistes que j'adore, ont maintenant leur clip, simplement nommé le LoKaclip (Bravo à Pitch pour le montage !)