Categorie: Programmation

Message subliminal à caractère d'auto-satisfaction

En parcourant les sites de vente en ligne à la recherche d'un nouvel ordinateur portable, j'ai fait escale sur le site de Boulanger.

En cliquant sur la vignette pour voir la photo en grand, j'ai tout de suite reconnu nyroModal. Après une petite vérification dans les sources, il s'agit bien de la version 1.1 de mon plugin qui est utilisé là !

Grand plaisir pour moi que le voir ce plugin utilisé sur un site de vente en ligne national !

J'ai contacter l'équipe technique du site via leur formulaire pour leur poser 2/3 questions quant à ce choix, et leur indiquer qu'il devrait mettre à jour, mais pas encore eu de réponse à ce jour. Si par hasard une personne travaillant dessus ou responsable de ce choix passe par ici, je serai ravi qu'il me contacte.

2 months day for day after the first release of plugin nyroModal, it's time to make a first overview.

Let's start with some numbers:

• Visits: 28 800
• Unique Visitors: 23 660
• Pages viewed: 26 039
• 11 Releases (the 1.2.7 just came out)
• 2 859 download (and more made directly in the jQuery plugin page where there is no stats available)

The problem with this kind of script, you never know where it's used. I can't make a long list here.

• Tripkick: No glory here, I developed this website during my internship in Fluidesign
• Wedding website of Brock and Kristina: integrated by my colleague, I help him to correctly place the button. PJ spoke about it here
• Sling Media (Screenshot tab)
• Right here, for the pictures

And maybe elsewhere that I didn't hear about... If you're using it (or saw it somewhere), don't hesitate to write a quick comment here.

This is the first open-source script I did. And the experience is great, regarding the numbers shown aboce, and the quotes below. More than 2000 visits the second day after the first release. I didn't thought it could be so much in this time. Then the numbers calmed down to around 300 daily visits (less during the weekend).

I had a proposal from the New-York Times to integrate my script in a future website. But I didn't get any news...

If you still hesitate between open-source or keep it for you, especially for a javascript code, don't hesitate! If this script is good, you'll have some return for sure. Event if it's not directly in money or contract, you'll gain recognition from others developers, but more important, Experience! You'll learn that you have to make many tests (and maybe more...) before every releases, and retest everything everytime in every browser.

What the people said:

jarro:

Nice job, trying it on a site and so far works great.

Leo:

I dig your scripts - I like this clean & correct code ;) Great work! Thanks for your nice work. Best wishes!

Clocal:

Oui félicitations ce plugin m'a l'air très bien, bonne doc, ça fait en plus plaisir de voir des français à l'oeuvre! Bonne continuation.

Jmc:

At this point i must congratulate and thank you for what i'd call the best modal plug-in for jquery EVER!!

C. Spenser Beggs (New-York Times):

I have been looking for an elegant modal box script and think that nyroModal is one of the best I have seen.

sunbeatn:

Thank you, and keep creating great scripts. Your contributions keep us newbies inspired.

A guy after reporting a bug:

Great! And thank you for a great plugin - it's been a real time saver! :)

Finally, the websites which linked:

• Un loup blessé pour a comparison modal script (French)
• AjaxRain (English)
• Planete OZH for another comparison (English)
• Coliss.com : a first post when it cames out, a second for a listing (Japanese)
• Blog.html.it for a small post on the jQuery plugin (Italian)
• DesignWalker for another listing (Japanese)
• Fxposter who explain he looked for a modal jQuery plugin. He found Thickbox but was disappointed because of the lack of personalization (Russian)
• Denis au fil du web, for a simple post/bookmark (French)
• Booto'Blog again for a listing (Japanese)
• Inovatis for another comparison (French)
• Giz style, one more time for a listing (Italian)
• Again a listing by LagunaBeach (Japanese)

And many others... The page was also bookmarked a lot, especially in delicious. The page went in the homepage for a few hours:

Version française de ce billet

2 mois jour pour jour après la première sortie de mon plugin nyroModal, il est temps de faire un 1er bilan.

Pour commencer quelques chiffres :

• Visites : 28 800
• Visiteurs uniques : 23 660
• Pages vues : 26 039
• 11 Releases (la 1.2.7 vient de sortir)
• 2 859 téléchargements (plus tous ceux effectués directement depuis jQuery Plugins où il n'y a pas de statistiques)

Le problème avec de tels scripts, c'est qu'on ne sait jamais où il est utilisé. Je ne peux donc pas dresser ici une longue liste.

• Tripkick : Pas de grande gloire ici, c'est moi qui ai développer le site dans le cadre de mon stage chez Fluidesign
• Site du mariage de Brock et Kristina : intégré par mon collègue, je l'ai aidé pour placer correctement les boutons. PJ en parle ici
• Sling Media (onglet Screenshot)
• Ici même, pour les photos

Et sans doute d'autres dont je n'ai eu aucun écho... Si vous l'avez utilisez (ou l'avez vu quelque part), n'hésiter à mettre un petit commentaire ici.

C'est le premier script que je rends open source. Et je dois dire que l'expérience est plus que satisfaisante, au regard des chiffres annoncés au dessus, et des citations des gens plus bas. Près de 2000 visiteurs le 2ème jour après son lancement. Je ne pensais pas avoir autant en si peu de temps. Puis les compteurs sont très vite retombé à un peu plus de 300 visiteurs journaliers (moins le week-end).

J'ai eu une proposition du New-York Times pour intégrer ce script dans un de leur prochain site, mais je n'ai pas eu de nouvelles...

Si vous hésitez entre open-source ou bien garder pour vous, surtout dans le cadre d'un script javascript, néhsitez pas. Si votre script est bon, vous aurez forcément des retours. Même si cela ne se traduit pas en contrat ou rémunération directe, vous acquériez de la reconnaissance par vos pères (ça fait bien juteux quand même là) mais surtout de l'expérience. Vous apprendrez qu'avant de rendre publique une nouvelle version, vous devez par toute une batterie de test, et surtout à retester l'ensemble du script à chaque fois.

Ce que les gens ont dit :

jarro :

Nice job, trying it on a site and so far works great.

Leo :

I dig your scripts - I like this clean & correct code ;) Great work! Thanks for your nice work. Best wishes!

Clocal :

Oui félicitations ce plugin m'a l'air très bien, bonne doc, ça fait en plus plaisir de voir des français à l'oeuvre! Bonne continuation.

Jmc :

At this point i must congratulate and thank you for what i'd call the best modal plug-in for jquery EVER!!

C. Spenser Beggs (New-York Times) :

I have been looking for an elegant modal box script and think that nyroModal is one of the best I have seen.

sunbeatn :

Thank you, and keep creating great scripts. Your contributions keep us newbies inspired.

Une personne après avoir reporté un bug :

Great! And thank you for a great plugin - it's been a real time saver! :)

Enfin, les sites qui ont fait un lien :

• Un loup blessé pour un comparatif de nombreux script du genre (français)
• AjaxRain (anglais)
• Planete OZH pour un autre comparatif (anglais)
• Coliss.com : un premier billet lors de la sortie du plugin, un second pour un listing (japonais)
• Blog.html.it pour un petit billet sur les plugins jQuery de sortie (italien)
• DesignWalker pour un autre listing (japonais)
• Fxposter qui explique qu'il recherchait un plugin avec jQuery. Il a trouvé thickbox, mais en a été déçu par manque de possibilité de personnalisation (russe)
• Denis au fil du web, pour un simple billet/marque-page (français)
• Booto'Blog encore pour un listing (japonais)
• Inovatis pour un nième comparatif (français)
• Giz style pour encore un listing (italien)
• Encore un listing par LagunaBeach (japonais)

Et d'autres encore... La page a été aussi beaucoup bookmarké, notamment dans delicious, au point de me faire monter en 1ère page pour quelques heures :

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