Francois Guillaume Ribreau

Trouver le selecteur jQuery d'un élément HTML (Reverse Selector)

2010-06-09T11:26:00.010+02:00

Je développe depuis quelques heures un module web permettant de "monitorer" de manière générique les mouvements et actions d'un visiteur. L'objectif est de reproduire en temps réel via XMPP toutes ces actions dans un autre navigateur (donc DOM différent).

Je devais donc trouver un moyen d'identifier un élément de manière unique sur une page, puis de transférer cet "ID" au navigateur - de l'administrateur par exemple - afin que le module reproduise l'événement.

Il y a 2 ans (déjà!) j'avais développé une fonction permettant de trouver le chemin XPath d'un élément html. Voici une variation afin de trouver un possible sélecteur jQuery pour un unique élément HTML donné (et non à partir d'un $('a.className') car dans ce cas, le selector est simplement un attribut de l'objet jQuery: $('a.className').selector).

Fork Reverse jQuery Selector Finder on Github

[MAJ] XPath ainsi que $('*').index(htmlElement); sont aussi d'autres moyens pour arriver à la même finalité.

Modifier openWYSIWYG afin qu’il supporte Google Chrome

2009-02-21T00:38:00.002+01:00

L’outil pour ajouter sa signature HTML à Gmail utilise l’éditeur openWYSIWYG que j’apprécie particulièrement pour son côté cross-browser, open-source et son interface très léger. Seulement, même la dernière version ne supporte pas Google Chrome.

Après un bref regard sur le code, je me suis aperçu que la vérification de la compatibilité s’effectuait au niveau de la méthode isBrowserCompatible :

isBrowserCompatible: function() {    
// Validate browser and compatiblity     
if ((navigator.userAgent.indexOf('Safari') != -1 ) || !document.getElementById || !document.designMode){     
//no designMode (Safari lies)     
return false;     
}     
return true;     
},

N’ayant pas Safari et ne pouvant donc pas vérifier si oui ou non “Safari lies” j’ai préféré simplement ajouter le support de Chrome tout en laissant le blocage de Safari. Il suffit donc de modifier le test et d'y ajouter l'expression booléen suivante :

if ((navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 ) || !document.getElementById || !document.designMode){

C’est fini ? Eh bien non, après un test cela ne fonctionnait toujours pas, Chrome retournait une erreur Uncaught TypeError: Object # has no method 'insertAdjacentHTML'. Une recherche plus tard, je découvre ce block de code :

/**    
* Emulates insertAdjacentHTML(), insertAdjacentText() and     
* insertAdjacentElement() three functions so they work with Netscape 6/Mozilla     
* by Thor Larholm me@jscript.dk     
*/     
if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement){ HTMLElement.prototype.insertAdjacentElement = function (where,parsedNode){     
    HTMLElement.prototype.insertAdjacentElement = function (where,parsedNode) {.. };
    HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr) {…}; 
    HTMLElement.prototype.insertAdjacentText = function (where,txtStr) {… };      
}

Or sous Chrome l’objet HTMLElement ET sa méthode insertAdjacentElement existe mais pas la méthode insertAdjacentHTML. Cette condition n’était donc pas validée. Il suffisait de modifier la condition comme ceci pour que openWYSIWYG supporte Chrome :

if((typeof HTMLElement!="undefined" && (!HTMLElement.prototype.insertAdjacentElement || !HTMLElement.prototype.insertAdjacentHTML))){

Remarque: il est préférable ici de ne pas agir en fonction du navigateur (donc un test sur le user-agent) mais plutôt sur la présence ou non de la fonctionnalité sur le navigateur. En utilisant cette méthode on code ainsi de façon plus générique et les scripts deviennent compatibles (ou inversement) avec les mises à jour des navigateurs.

Ps : En bon webnaute j’ai proposé cette modification sur le forum dédié afin qu’elle soit intégrée à la prochaine release.

Première apparition de Vistavatar dans la presse

2006-12-07T17:15:00.003+01:00

Je venais tout juste d'uploader une nouvelle version de Vistavatar, la beta 3.2. Et je me suis dit, "pourquoi ne pas en faire profiter plus de monde ?".

Je cherche donc un site dans mon Rss Reader qui pourrait comprendre l'utilité d'une telle geekerie, et voici venir Net-actuality, parfait, exactement le genre de site que j'aime bien lire, alors je prends mon courage à deux main, et je compose une lettre via le formulaire de contact. Plof c'est envoyé.

Ne voyant point de réponse venir quelques heures plus tard, je me dit alors que Vistavatar dans la presse, ça sera pour une autre fois.

Les heures passent, et Nitrax (un pseudo-designer et très bonne amis, qui me confectionne de beau et in programmable design) me contact par msn en m'annonçant que Vistavatar est sur Net-actuality, je me rend sur le site, et que voit-je ??
Un avatar, c'est une petite image que l'on met sur son logiciel de messagerie instantannée ou sur les forums pour se représenter.

Une personne nous a contacté sur notre mail pour nous faire part d'une application web originale : Vistavatar.
Comme vous avez pu le constater, ce nom de logiciel est composé de Vista, nom du nouveau système d'exploitation de Microsoft, et avatar, bah comme ...euh... avatar !

Cette petite application web transforme votre vieux avatar tout moche en avatar avec effets Windows Vista.
Très compliqué à expliquer, voici les célèbres images "avant/après" :

Avant

Après

Malheureusement, cette application web coute 50.99€ par avatar transformé, et n'accepte que les mandats postaux pour le réglement... mais non, je rigole, c'est gratuit, et le site est on-ne-peut-plus intuitif.

Le site

Le topic sur le forum du site BetaTesteur.com

Je n'ai toujours reçut aucun mail de la part du staff, mais ça valait le coup :).

Sinon, niveau programmation, et aspect technique, Vistavatar est basé client-side sur Moo (pour la gestion des effets & transition), et server-side, eh bien c'est un engine maison, avec cette bonne librairie GD & Php.

Slt tt le monde !!!

2004-08-30T10:43:00.002+02:00

[[ Le 13 Aout 2010.
Le message qui suit est mon premier billet sur ce blog de développement. J'avais 15 ans à l'époque. Soyez indulgent ^^ ]]

Bienvenue sur mon blog perso !!!

Ben , voila après mon site perso (www.persofg.fr.st) voici mon blog ;-) , pour l'instant ya pas grand chose , mais ça va venir !

Site LP Informatique en ligne !!!

2004-08-31T21:11:00.002+02:00

Et voila, je suis super content car je viens de finir le site de LP Informatique !!

Au début c'était pour améliorer mes connaissance en php/mysql , (eh oui , c'est beau d'avoir des bouquins mais la pratique c'est mieux !!). Quoi au programme ?

Création d'un panneau d'administration :

ajout/modification/suppression de produit
ajout/modification/suppression de fournisseur
modification offre du mois
compteur du site
programme de sauvegarde
etc ...

Un fois cela fait (déja 1 semaine de passé), il manquait quelque chose au site ... Mais quoi?? J'ai donc déposé un tutos sur mon forum de programmation pour savoir quoi ajouté pour que le site soit plus pro et savoir s'l était toujours (j'ai dût modifier pas mal de fois le css et le javascript) compatible avec tous les navigateurs , donc j'ai posté sur progforum .

Après quelques commentaires et pas mal de modification voici le résulat www.lpinformatique.fr.st !

Oufff !! Mon premier site d'entreprise enfin terminé ! Au suivant
PS : N'hésitez pas à poster vos commentaires sur le site ...

Création d'un moteur de recherche en php/mysql

2004-09-22T20:21:00.003+02:00

[[ Nous sommes le 13 Aout 2010, je relis ce message posté le 22 Septembre 2004. J'en ai fait du chemin depuis ce temps là :). ]]

Eh bien ce n'est pas facile du tout !!!
En effet je croyais créer ce moteur en un jour (ben oui je passe quand même + de 14h devant mon pc )

Pour l'aspect technique il ne supporte pour l'instant qu'un seul mot clé ... En fait ma requête sql est "SELECT * FROM matable WHERE nom OR description LIKE '%" . $motsclef . "%' ORDER BY nom ASC "

Le problème c'est que j'ai (la flemme) de créer une array de $motsclef enfin voila , cela permet quand même de faire une recherche simple et c'est ce que je voulais :-) .

Si vous voulez voir le moteur de recherche c'est ici .

PS : Essayer de faire "%" dans le moteur cela affiche tout ...

Site perso de FG version 4 !!!!

2004-10-13T08:00:00.002+02:00

Voila,
Je suis en train de programmer la version 4 de mon site . Elle est exclusivement programmée en php/msql, j'ai changé l'interface et ajouté des liens j'espère qu'il vous plaira . En attendant vous pouvez voir la version bêta à cette adresse :
http://fg.logiciel.free.fr/serveur/site3/

@++

JSDIAPO

2004-11-06T00:35:00.001+01:00

Je viens de développer une libraire de création de diaporama nommée JSDIAPO , pour moi , il n'y a pas plus simple et plus efficace que ce script (enfin c'est un point de vue perso ;-) .

Quelques liens :
Informations
Démonstration en ligne
Aide en ligne
Code source

Bien sur il faut préciser que pour l'instant JSDIAPO.lib est marqué "Version bêta 0.2" mais cela n'à rien à voir avec la fiabilité car j'utilise cette librairie pour FGJSDIAPO .

PS : Pour les devs, créer un diaporama avec JSDIAPO.lib (bouton premier , précédent , suivant , dernier ) , et l'image prend moins de 1min !!! Montre à la main . Essayez-vous verrez :-)

Chat avec Olvier Ezratty

2004-11-06T00:41:00.001+01:00

J'ai parlé avec le directeur de developpement microsoft france !!!

Pour plus d'information quelques liens :

La conversation sur fg.logiciel.free.fr.
Conversation chat intégral (journaldunet.com)

Preview FGJSDIAPO

2004-11-06T00:46:00.001+01:00

Hoyé Hoyé brave gens , voici venir FGJSDIAPO. Le digne successeur de FGXMLDIAPO.

How to make Firebug methods chainable.

2010-06-16T07:00:00.003+02:00

I just wrote this piece of code (mainly for fun) which let you use Firebug methods with chained calls.

Usage:

Ps: If you want to create chainable methods, just add "return this;" at each methods end. makeChainable is only usefull with already created objects.

[Video] Some experiments with HTML5 Canvas

2010-08-08T21:16:00.001+02:00

Here is some experiments I've done on a sunday afternoon with an HTML5 Canvas element and some neat javascript stuff. Enjoy !

jQuery FireEvent - A Plugin for firing real DOM events

2010-08-10T18:17:00.001+02:00

Or in other words: "How to fire real javascript events". But why? jQuery has already a trigger method for this kind of need ! If you can't get why you have to use this plugin. Try to inject jQuery on this Mootools demo page and run:
jQuery('#v_toggle').click(); //or .trigger('click')
Nothing happens... That's because Mootools & jQuery have their own way to create and fire events. They do this way to support bind namespacing, multiple binding ...

jQuery FireEvent allows you to fire real DOM events. Now, come back to the Mootools page, inject jQuery fireEvent plugin and run:
jQuery('#v_toggle').fireEvent('click');
Even if the v_toggle element was binded with some Mootools magic, because we're firing a real DOM event, all works great ! This plugin is really useful in high conflicted environment where we can't find if an element was binded by one or more javascript libraries.

Fork jQuery FireEvent on GitHub

iMovie pour iPhone == nul !

2010-07-19T01:56:00.001+02:00

Il n'y a pas de mots assez fort pour exprimer mon mécontentement vis à vis de iMovie pour iPhone. L'application après 3 jours d'utilisation devient totalement buguée. L'ajout d'un clip au projet empeche la lecture, les transitions ne se lancent plus, le passage d'un clip à un autre ne s'effectue pas (les clips suivants ne sont pas lu). Seul la musique est lancée en arrière plan. Il est possible de redimensionner le dernier clip avec des comportements improbables: réduire le clip au delà de sa taille, entraine la réduction du temps total du projet (et donc la réduction des autres clips)

Comment Apple peut promouvoir un produit aussi bugué lors d'une keynote? Apple est pour moi une marque représantant la fiabilité... iMovie pour iPhone est tout sauf fiable (Il faut parfois plusieurs démarrages avant qu'il ne daigne se lancer)

Le chargement de l'applications et des clips dépassent largement les 10secs (4 projets, plus de 160 vidéos).

Bref, en tant qu'utilisateur je suis extrement irrité par cette application dont les performances et la fiabilitée se rapprochent plus d'une version alpha qu'autre chose.

J'attends une mise à jour gratuite et une application à la hauteur des produits Apple.

[Snippet PHP] apc_exists for APC < 3.1.4

2010-08-02T16:59:00.005+02:00

Problem:

Fatal error: Call to undefined function apc_exists() in xxxx.php on line xx
That's because APC may not be activated or because your APC version is less than 3.1.4.

Fix:

How to know if $ is jQuery ?

2010-08-02T07:00:00.001+02:00

Sometime (mostly in highly conflicted environement) you may want to know if $ is really a jQuery alias. Because $ can be an alias for Mootools too (and of course other libs).

Here is a way to detect jQuery:

How to get the call-stack of a javascript function

2010-08-02T07:00:00.000+02:00

And to be more precise: How to get the call-stack of a Javascript function everytime she's called without blocking the execution.

From time to time you may want to see every call-stack of a specific function for profiling concerns.

Here is a naive approach:

When executed in firebug, only 1 Error is shown. We miss the alert() and the second call from doAnotherThing.

Solution? Prefer console.log instead of throw:

Now our 2 error (with call-stack) appear in Firebug while the alert('ok') pop-out as expected.

[Fun] The Inception Code ! (spoiler)

2010-07-30T17:18:00.004+02:00

While watching Inception I couldn't stop thinking about recursion (a dream in a dream).
And here we are...

Diaporama de ma conférence "Découverte HTML5/CSS3"

2010-01-09T15:47:00.007+01:00

Voici le diaporama de ma conférence "Découverte HTML5/CSS3" avec une introduction aux bonnes pratiques dans le développement web:

Découverte HTML5/CSS3

N'hésitez pas à commenter, mettre en favoris le diaporama sur la page slideshare.

Spritely in PURE CSS3

2010-03-24T12:20:00.008+01:00

(Disclaimer: I've tried in an entirely week-end to animate birds using only CSS3 but without great success... sorry about that).

1) animate the clouds (#clouds):

@-webkit-keyframes animClouds{
    0%    {background-position: 0px 102px; }
    100%  {background-position: -1068px 102px; }
}

#clouds {
-webkit-animation-name: animClouds;
-webkit-animation-duration: 70s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;

/* is the same as */
-webkit-animation:animClouds 70s linear 0s infinite;
}

2) animate the hills (#hill2 & #hill1):


@-webkit-keyframes animHill2{
      from    {background-position: 0px 258px; }
      to  {background-position: -1110px 258px; }
}

@-webkit-keyframes animHill1{
      0%    {background-position: 0px 104px; }
      100%  {background-position: -2220px 104px; }
}

#hill2{
  -webkit-animation: animHill2 25s linear 0s infinite;
}

#hill1 {
  -webkit-animation: animHill1 25s linear 0s infinite;
}

And that's all ! Check the demos here (Safari/Chrome only): Demo 1 Demo 2

Approfondissement CSS3

jQuery 1.4: What's new & useful

2010-01-13T13:04:00.010+01:00

You may not have noticed but I've tweeted about jQuery 1.4 new features. Here is my selection of the best jQuery 1.4 brand-new methods:

#jQuery 1.4 .delay( duration, [ queueName ] ) method seems very useful ! http://api.jquery.com/delay/

#jQuery 1.4 .toArray(); //helper
toArray: function() { return slice.call( this, 0 ); }
#jQuery 1.4 .prevUntil() .nextUntil() .parentsUntil() ROCKS! http://bit.ly/5DDcsv //A new way for traversing the DOM :)

#jQuery 1.4 jQuery.noop() ? I Don't get the point... http://api.jquery.com/jQuery.noop/
noop: function(){}
#jQuery 1.4 .isEmptyObject(obj) //helper
isEmptyObject: function( obj ) { for ( var name in obj ) { return false; } return true; }

Don't forget to follow me on twitter @FGRibreau :)

My (unofficial) Kuripotxt PHP API

2009-11-30T19:35:00.008+01:00

If you follow me on twitter, you may have seen these tweets :

Kuripotxt.net, my new free #sms gateway #Hijack (flickr) http://flic.kr/p/7iRJpK 3:38 PM Nov 28th

Kuripotxt, free sms "api": Hijack Part2 http://flic.kr/p/7iVJtm 3:48 PM Nov 28th

Yeah... It works ! (on my blog in less than 1 hour :)
$myGateway = new Kuripotxt();
$myGateway->sendSms(33600000000,"Hello World"); 16 minutes ago

After one hour of development, I am glad to show you a PHP Class for Kuripotxt using the HttpClient library.

Usage:

include "kuripotxt.class.php";

$mySender = new Kuripotxt();
//International number format without "+"
$phoneNumber = 33612345678;
$mySender->sendSms($phoneNumber,'Hello world');//one method

[Download ZIP] [Browse on GitHub]

[Video] Mon Passage à France 3

2009-11-30T10:07:00.002+01:00

Simon Robic et moi même avons été interviewés lundi par France 3 Pays de la Loire. Le reportage a été diffusé jeudi dernier, et le voici en ligne :)

Gérer les éléments input radio avec jQuery

2009-03-24T18:18:00.004+01:00

J’ai eu hier une question sur la manipulation des éléments radio en Javascript. La personne voulait vérifier que pour chacun de ses groupes de radio, au moins un radio était sélectionné.

Plusieurs solutions en Javascript “pur” existent sur Internet mais aucune ne semblait simple à appliquer par cette personne. Je propose donc ici quelques snippets jQuery pour exploiter simplement les éléments Radio.

Nous partirons donc d’une page incluant la librairie jQuery et le code XHTML suivant :

<form action="?" method="get" id="monForm">
<input type="radio" name="opt1" value="1" checked="checked"  />
<input type="radio" name="opt1" value="2" />
<input type="radio" name="opt1" value="3"/>

<input type="radio" name="opt2" value="1" />
<input type="radio" name="opt2" value="2" checked="checked" />
<input type="radio" name="opt2" value="3" />

<input type="radio" name="opt3" value="1" checked="checked" />
<input type="radio" name="opt3" value="2" />
<input type="radio" name="opt3" value="3"/>
</form>

Accéder aux inputs de type radio en jQuery

Il existe plusieurs façon d’accéder aux inputs de type radio en jQuery, j’ai réalisé quelques tests afin de définir quelles expressions étaient les plus rapides :

Il en ressort que l’expression input[type=radio] est plus rapide que input:radio (mais est-elle autant générique ?)

Le résultat sont très variable lorsque l’on précise un contexte (ici #monForm) et un grand nombre de radio. Je pense donc que les trois dernières expressions ne sont pas à prendre en compte dans l’analyse, du moins pour le moment. (Je travaille actuellement à améliorer mon outils de Benchmark afin que chacun puisse tester ses propres expressions jQuery).

Récupérer tous les inputs radios appartenant à un même groupe

$('input[type=radio][name=opt1]');//ici retourne 3 éléments input

Connaître si un groupe de radio à une valeur

$('input[type=radio][name=opt1]:checked').length; // Doit être égal à 1 si un radio à été sélectionné dans le groupe de opt1.

Vérifier que tous les radios ont été sélectionnés

$('input[type=radio]:checked').length; // Si au moins un radio est sélectionné pour chaque groupe, ce snippet retourne 3 (dans notre exemple)

Récupérer la valeur d’un groupe de radio

$('input[type=radio][name=opt1]:checked').attr('value'); //Retourne la valeur du radio sélectionné dans le groupe opt1. Retourne vide si aucun radio sélectionné

Lancement des versions localisées de Twitter

2009-10-28T16:48:00.005+01:00

Billet très rapide pour annoncer le lancement officiel de :

J'essayerai d'écrire un autre billet pour donner plus d'informations techniques sur l'architecture des sites.