Tag : CSS

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...