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 !)

Si vous réaliser l'intégration de sites Web, vous vous êtes surement déjà posé la question de quelle propriété allait être appliqué, selon quel ordre d'importance.

Sitepoint a écrit un article pour vous aidé dans la compréhension de ce mécanisme.

Je vous traduit ici le principe de base, en 5 étapes (par déclaration, on entend définition d'une propriété à appliquer comme la couleur du texte) :

1. Si une déclaration est faite dans l'attribut style de l'élément, (un style en ligne, ex style="color: red;"), elle a la plus grande spécificité. S'il n'y a aucune déclaration en ligne, passer à l'étape 2.
2. Compter le nombre de sélecteur d'ID (#monId). La déclaration avec le plus grand nombre est la plus spécifique. Si plusieurs déclarations ont le même nombre de sélecteur d'ID (ou 0), passez à l'étape 3.
3. Compter le nombre de sélecteur de classes (.maClass), de sélecteur d'attributs ([type="submit"]) et de pseudo classes (:hover). La déclaration avec le plus grand nombre est la plus spécifique. Si plusieurs déclarations ont le même nombre (ou 0), passez à l'étape 4.
4. Compter le nombre de sélecteur de type (div) et de pseudo éléments (:first-letter). La déclaration avec le plus grand nombre est la plus spécifique. Si plusieurs déclarations ont le même nombre (ou 0), passez à l'étape 5.
5. Si deux ou plusieurs sélecteur ont la même spécificité, on applique la dernière règles trouvées.

Bien sûr, à chaque étape, on ne garde que ceux qui arrivent en tête du classement.

Puis l'article va plus loin en indiquant la méthode de calcul et une représentation en matrice, pour finir sur la gestion des éléments un peu plus poussé comme le sélecteur global * ou d'élément enfant avec >.

Un article à lire pour être conscient de comment fonctionne réellement les CSS, et s'éviter quelques maux de têtes dans certains cas...

Un peu de nouvelles de Los Angeles, brut de pomme :

• Fluidesign a déménagé depuis le début d'année. Nouvelle adresse, suivez le lien. Vue sur l'océan depuis la salle de réunion, grande classe pour commencer la semaine. Dans le même immeuble, deux étages plus bas, on trouve le fameux Habbo
• J'en ai profité pour déménager pour ne pas me taper une heure ou plus de bus le soir... 10 minutes de bus pour aller au boulot, un peu moins pour la plage.
• Fluidesign a ouvert son blog au grand public. Pas trop d'activité dessus, mais il est là quand même. Je n'aime pas du tout le graphisme, le précédent était plus sympa. Damned Designer!
• Stage terminé depuis une semaine, je rempile pour 6 mois de plus chez Fluidesign avec énormément de boulot en ce moment.
• le DUT SRC de Montbéliard fêtait ses 10 ans aujourd'hui à l'occasion de la journée des anciens, dommage que je sois à l'autre bout du monde. Rendez-vous pour les 15 ans !
• Aujourd'hui peut-être promenade de 3 heures le long de la plage comme au premier jour. Pantacourt et T-shirt était de rigueur (d'où le titre du billet, juste pour narguer les lecteurs français qui sont dans le froid et que je vais rejoindre)
• Retour en France pour 2 semaines vendredi prochain. Au programme : gala de gym dès l'arrivée, rendez-vous à l'ambassade pour obtenir un nouveau visa, soirées avec les amis, repas avec la famille, soutenance de stage, et encore plein d'autres choses.

Un peu de news logiciels, web, brut de pomme aussi :

• jQuery sort en version 1.2.2; au menu 300% plus rapide pour la sélection d'éléments, fonctions au chargement de la page se font après le chargement des CSS, possibilité d'indiqué quel Mime-Type on veut lors d'une requête ajax, le scroll de la souris est maintenant gérer très facilement par un tout nouveau plugin. A quand des nouveautés dans jQuery UI ?
• TinyMce sort sa version 3 en Release Candidate 2. Sortie prévue de la finale à la fin du mois. A mon avis elle n'arrivera qu'à la mi-février
• Filezilla ajoute quelques fonctionnalités demandés : éditer les fichiers locaux par un clic droit > editer le fichier. Une nouvelle fonctionnalité absoluement démentiel a fait son apparition : la synchronisation entre les dossiers locaux et distants, avec retour visuel pour savoir si les fichiers ne sont présents que d'un côtés ou différent. Vous entrez dans un dossier d'un côté, l'autre se met à jour automatiquement. Un gain de temps énorme. Il me manque toujours une fonction indispensable pour moi : la configuration du double-clic. Après demande sur le forum, le développeur, botg, ne veut pas l'implanté car il considère que Filezilla n'est pas un explorateur de fichiers... Si vous voulez testez, pensez à mon convertisseur automatique et cmplet de config.
• Veille info, mais je n'en avais pas parlé, et cela me tiens à coeur : Prism est un dernier né des labos de Mozilla et permet de mettre vos applis web dans une petite appli, différent de Firefox. Il utilise le moteur de Firefox 3, et est toujours en version beta. D'après ce que j'ai lu ici et là, la prochaine version ne saurait tardé. Je vois en Prism un moyen facile pour faire utiliser le moteur de Firefox à ses clients, et pourquoi pas proposer des administrations en XUL ?
• Encore une vieille info : Android, la plateforme de l'open handset alliance issue du travail de google et open-source. 1er téléphone prévue pour la mi 2008, vraissemblablent un HTC.
• Apple a sorti son MacBook Air : écran 13' qui rentre dans une enveloppe. Ok c'est super, tout petit et beau comme les autres produits Apple, mais c'est bien trop cher selon moi : 1699€. Autant s'acheter un macBook Pro pour 200€ de plus...