Tag: Programmation

Pour un script de tooltip développé rapidement sur un gros projet en cours, j'ai utilisé le plugin position de jQuery UI.

Cette fonction permet de positionner exactement comme on veut un élément par rapport à un autre. La fonction utlime pour une infobulle.

Et ce plugin vient même avec une détection de collision avec la fenêtre. Autrement dit, si l'élément positionné dépasse de la fenêtre, alors on le positionne de l'autre côté. Un must !

Le seul problème est qu'il n'existe actuellement aucune possibilité de détecter lorsque cela arrive.

En lisant le code de ce plugin, il existe en réalité un moyen très simple pour détecter cette collision et ajouter une classe à l'élément positionné. Dans mon cas, cela me permet de modifier l'affichage de l'infobulle de façon à avoir la flèche du bon côté.

Le code en question :

var currentlyPositionning,
    initPos;
$.ui.position.custom = {
    left: function(position, data) {
        initPos = position.left;
        $.ui.position.flip.left(position, data);
        if (initPos != position.left) {
            currentlyPositionning.addClass('tooltipFlip');
        }
    },
    top: function(position, data) {
        initPos = position.top;
        $.ui.position.flip.top(position, data);
        if (initPos != position.top) {
            currentlyPositionning.addClass('tooltipFlip');
        }
    }
};

En réalité, on ajoute simplement une option custom au plugin position. Pour chacune des propriétés top ou left pour lesquels le plugin détecte une collision, on vérifie si la propriété a été modifié par la fonction de détection originelle du plugin. Et si oui, dans mon cas, j'ajoute une classe à l'élément.

Vous avez sans doute remarqué la variable currentlyPositionning ; Elle doit correspondre à l'élément sur lequel on applique actuellement la position. En effet, aucune information dans l'objet data ne permet de remonter jusqu'à cet élément.

Enfin, pour utiliser cette nouvelle fonctionnalité, il suffit d'appeler le plugin position comme suit :

currentlyPositionning = elem;
elem.position({
    of: me,
    my: 'left bottom',
    at: 'right top',
    offset: '15px',
    collision: 'custom'
});

Et voilà, le tour est joué.

English version of this post.

You probably know embed.ly. It is a service which, as its name suggests it, lets embed external content on your own website pretty easily.

The idea of their API is simple: send a media URL of a sharing website (youtube, dailymotion, twitter, google maps, etc... and many others) and the API returns many informations about the media: author, inserted dat, and more important the HTML code to embed the content on your website such as flash player, iframe or others things regarding the needs.

In one word, a real advantage with big time savings for the developper who may propose in a few lines of code a huge number of content sharing sites.

Yeah ok, but why are these guys better than others?

I'm coming to it.

Since it'sversion 2, nyroModal uses embed.ly to display these kind of content directly on modal windows. From only youtube, my open-source project is passed to a multitide of différent video sites, as well as tweets, google maps, and so on...

So great!

the Embed.ly API was at this time free and without limits, requires no registration and no account on their website.

Then Embed.ly evolved. To monetiez their API, they set up various plans and prices. There is still a free API with a minimum of services - same as before - with a 10 000 queries limit per month.

In order to keep nyroModal working, I updated source code on September 17th. I created an API key on embed.ly and use it on my demo page

The commit on GitHub.

Ok good. But... nyroModal runs at an average of 1,000 visits per day. A rate of 3 urls that send request to embed.ly, we arrive at the limit in 3 days. Moreover, there is a embed.ly demo page with almost 170 demo links.

In his great goodness, embed.ly sent me an email on September 25 telling me that I came close to this limite (around 8,000). So I decided to place a PHP script to cache embed.ly queries to solve this problem.

On September 26, the commit was sent and I thougt I definitvely solved this problem. Some tests later, it's working great.

Good, and embed.ly is when they are friendly and the best of the world?

I'm there.

September, I've got an email telling me I exceeded the limit... Neither one nor two, I plunged back into the code, I analyze and I draw what I send to embed.ly and how I create the file name cache. In fact, jQuery adds a parameter to the query, simply named "_"  to not cache the response.

I immediately coorectedthe bug, commit it, set it up and test it again.

It does not work at all! The answers to embed. Ly are simply empty.

Normal, I exceeded the quota and have to go with a pay plan to continue using the API.

I read the email from embed.ly and see : "Please reply to this email with questions."

Without much hope, I write an email explaining the situation and that I did not pay because I do not make money with.

Then I click around on the Embed.ly dashboard, read their FAQ, prices, etc...

And only 9 minutes later, I received two answers from embed.ly employees:

Hey Cedric,

If you are just using the key as a demo for nyroModal, then there is no
reason for us to charge you. I've updated your account, but I ask that you
add the IPs that your proxy server is going to hit Embedly from here:
https://app.embed.ly/organizations/nyrodev--nyromodal/ip.

This way we can assure that the key is only being used by the demo site.

Thanks,

Sean

Sean just set my API key to a 50 000 queries par month. Free and without further requests for explanations. I quickly my server IP address as requested, and another answer from another employee came up:

Cédric,

I've reset your monthly counter. Enjoy my friend!

Bob Corsaro

Bob put my account of queries to zero for the current month. Exactly what I expected too.

And voilà. These people got it all. Where some companies would surely seek to charge or request futher explanattions, embed.ly, in 10 minutes solved my probelm and encourage me to make open-source:

We love it when people incorporate Embedly into open source projects and we are happy to help out the developers.

I'm confident that this flexibility in their management is because they are only 4 in the team. They can react quickly as they wish.

Finally, use embed.ly! This service works really rellay good and people behing it are at the top of the developper mountain.

Vous connaissez sûrement embed.ly. C'est un service qui, comme son nom l'indique à tout anglo-développeur qui soit, permet d'incroporer des contenus externes sur son site facilement.

L'idée de leur API est simple : on envoie une URL d'un média sur un site de partage de contenu (youtube, dailymotion, twitter, google Maps, etc etc... et de nombreux autres) et l'API nous renvoie un maximum d'informations sur cette vidéo : auteur, date d'ajout, mais surtout, le code HTML pour embeder la vidéo sur son site ; c'est à dire e player Flash, l'iFrame ou autre selon les besoins.

Bref, un réel avantage et gain de temps pour le développeur qui peut proposer, en quelques lignes de code un nombre impressionnant de sites de partage de contenus.

Oui bon ok, mais en quoi ils sont géniaux ces gens ?

J'y viens.

Depuis sa version 2, nyroModal utilise embed.ly pour afficher les contenus de partage directement dans une modale. De simplement youtube auparavant, le projet open-source est donc passé à une multitude de sites de vidéos différents, mais aussi des tweets, des cartes google, etc...

Un must!

L'API d'Embed.ly était alors gratuite et sans aucune limite, ne nécessitant aucun inscription et compte chez eux.

Puis, Embed.ly a évolué. Pour monétiser leur API, ils ont mis en place différents plans et prix pour leur API. Il existe toujours une API libre avec un minimum de service - les mêmes qu'avant- avec une limite de 10 000 requêtes par mois.

Pour que nyroModal continue de fonctionner, j'ai donc mis à jour le code source le 17 septembre en créant une clé chez Embed.ly et en l'incluant sur ma page de démo.

Le commit en question sur GitHub.

Oui mais voilà. nyroModal tourne à une moyenne de 1 000 visites par jours. A raison de 3 urls qui envoient des requêtes vers embed.ly, on arrive à la fameuse limite gratuite de 10 000 en 3 jours. Qui plus est, sur la page de démo spéciale embed.ly, on a quelques 170 liens de démo.

Dans sa grande bonté, embed.ly m'a envoyé un email le 25 septembre m'indiquant que j'arrivais près de cette limite (environ 8 000). J'ai donc décider de mettre en place un cache en PHP des requêtes faites à embed.ly pour régler le problème.

Le 26 septembre, le commit était envoyé et je pensais avori réglé le problème et être tranquille de ce côté là. Quelques tests, ça marche.

Bon, et embed.ly, c'est à quel moment qu'ils sont sympa et les best of the world ?

J'y suis.

Le 27 septembre, je reçois un nouvel email m'indiquant que j'ai dépassé la limite. Ni une ni deux, je replonge dans le code, j'analyse et je trace ce que j'envois à embed.ly et comment je créer le nom du fichier du cache. En réalité, jQuery ajoute un paramètre à la requête, nommé simplement "_" qui permet de ne pas mettre en cache la réponse.

Je corrige immédiatement le bug, le commit, le met en place et teste à nouveau.

Ça ne marche plus du tout ! Les réponses d'embed.ly sont simplement vide.

Normal, j'ai dépassé le quota et dois passer à un plan payant pour continuer à utiliser l'API.

Je relis l'email d'embed.ly et je vois : "Please reply to this email with questions."

Sans trop d'espoirs, j'écris un email leur expliquant la situation et que je ne voulais pas payer car je ne gagne pas d'argent avec.

Puis je me balade sur le dashboard d'Embed.ly, à lire leur FAQ, leurs prix, etc...

Et seulement 9 minutes plus tard, je reçois 2 réponses d'employés d'embed.ly.

Hey Cedric,

If you are just using the key as a demo for nyroModal, then there is no
reason for us to charge you. I've updated your account, but I ask that you
add the IPs that your proxy server is going to hit Embedly from here:
https://app.embed.ly/organizations/nyrodev--nyromodal/ip.

This way we can assure that the key is only being used by the demo site.

Thanks,

Sean

Ce Sean a simplement passé mon abonnement à 50 000 requêtes par mois. Gratuitement et sans autres demandes d'explications. Je m'exécute à ajouter l'adresse IP de mon serveur comme demandée, et une autre réponse d'un autre employé :

Cédric,

I've reset your monthly counter. Enjoy my friend!

Bob Corsaro

Lui a remis mon compte à zéro pour le mois en cours. Niquel aussi.

Alors voilà. Ces gens ont tout compris. Là où certaines entreprises auraient sûrement chercher à faire payer ou demander plus d'explications, recherche un peu plus que ça, eux ont, en 10 minutes seulement, résolu mon problème et même encourager à faire de l'open-source :

We love it when people incorporate Embedly into open source projects and we are happy to help out the developers.

Je suis persuadé que cette souplesse dans leur gestion est dû au fait qu'il ne soit que 4 dans l'équipe. Ils peuvent réagir rapidement et comme ils le veulent.

Pour conclure, utilisez embed.ly ! Ce service fonctionne du feu de dieu et les gens qui sont derrière sont au top.

A small technical post for nyroModal, after a question posted on github.

The demand is simple: add a link in the title of a modal.

On this post, I'll explain step by step the method to add this functionality to nyroModal on image. The URL of the link will be add on the rev attribute of the opener link.

All files are available at the bottom of the post.

Step 1 : Download nyroModal

First step is obviously to download the last nyroModal version. You can choose to download the whole package, but I always prefer create my own package to suit exactly my needs.

For this example, here is element I used:

• anims.fade : not mandatory, but it prettier to have some animations during opening and closing the modal
• filters.title : we need it, we'll base our code on this filter to add the link
• filters.link : mandatory too, this is the filter which permit to react on the click of a link
• filters.image : I decided to open an image, so I need it.

Once you've got the zip download, extract all the files where you want. We are now ready to work.

Step 2 : Create the basic HTML file

Before adding our behavior, let's start by creating a HTML with the minimum elements in there:

<!DOCTYPE HTML>
<html>
<head>
    <title>nyroModal : Link in title</title>
    <link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" />
</head>
<body>
    <a href="http://images.easyart.com/i/prints/rw/lg/1/3/Romero-Britto-Flower-Power-IV-130134.jpg" class="nyroModal" title="Flower Power IV">Flower Power IV</a>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.nyroModal.custom.js"></script>
    <!--[if IE 6]>
        <script type="text/javascript" src="js/jquery.nyroModal-ie6.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
    jQuery(function($) {
        $('.nyroModal').nm();
    });
    </script>
</body>
</html>

On this page, nyroModal CSS is loaded and a link to an image is added. Then the needed javascripts are loaded. Using one line of code, the nyroModal behavior is finally added.

The link already have it's title attribute to automatically create, using filters.title, the modal title.

Step 3 : Study filters.title

To try add out functionality on the title of the modal, we first have to understand how it works. To do that, we can read the source on github.

We can see the h1 element is stored on variable nm.store.title and created by the beforeShowCont callback.

nyroModal is developed in order to call all filters callbacks. Then callbacks defined during creating of the nyroModal objects on the callbacks settings are called.

To add the behavior, we'll so add it in the beforeShowCont callback of this setting, using nm.store.title variable and usual jQuery.

Step 4 : Add the functionality

We now know how to proceed. Let's dot it!..

We add the rev attribute containing the URL of the link to add, and the code to add the behavior. The HTML page becomes:

<!DOCTYPE HTML>
<html>
<head>
    <title>nyroModal : Link in title</title>
    <link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" />
</head>
<body>
    <a href="http://images.easyart.com/i/prints/rw/lg/1/3/Romero-Britto-Flower-Power-IV-130134.jpg" class="nyroModal"
        title="Flower Power IV" rev="http://www.easyart.fr/posters/Romero-Britto/Flower-Power-IV-130134.html">Flower Power IV</a>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.nyroModal.custom.js"></script>
    <!--[if IE 6]>
        <script type="text/javascript" src="js/jquery.nyroModal-ie6.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
    jQuery(function($) {
        $('.nyroModal').nm({
            callbacks: {
                beforeShowCont: function(nm) {
                    if (nm._hasFilter('title') && nm.opener.is('[rev]')) {
                        nm.store.title.html('<a href="'+nm.opener.attr('rev')+'">'+nm.store.title.text()+'</a>');
                    }
                }
            }
        });
    });
    </script>
</body>
</html>

What's inside the callback?

We first check if the filter title is activated and if the opener link has a rev attribute => Conditions are reach to add the link.

The next line update the h1 stored in nm.store.title to replace it's content by a link pointing to rev attribute and containing the text of the original content.

Voilà, done. 2 lines of effective code to add this functionality.

Conclusion

To add a behavior to an open-source project, 2 questions must be asked before starting:

• What are we trying to do?
• How can I do that?

Then, by analyzing code and documentation, we find a way to develop what we want more or less simply.

I always tell to my clients: "Yes, everything is possible. We just need to have time for that."

Files

You can see the sources here: http://nyrodev.info/dl/nyroModalLinkTitle/

You can download all files on a Zip archive here: http://nyrodev.info/dl/nyroModalLinkTitle/nyroModalLinkTitle.zip

French version of this post

Un petit billet technique pour nyroModal, suite à une demande postée sur github.

La demande est simple : ajouter un lien dans le titre de la fenêtre modale.

Dans ce billet, je vais expliquer pas à pas la méthode pour ajouter cette fonctionnalité à nyroModal sur une image. L'url du lien a ajouter devra se trouver dans l'attribut rev du lien ouvrant la fenêtre modale.

L'ensemble des fichiers est téléchargeable à la fin du billet.

Étape 1 : Télécharger nyroModal

La première étape consiste évidemment à télécharger la dernière version de nyroModal. Vous pouvez choisir de télécharger l'ensemble des fichiers, mais je préfère toujours créer mon propre package avec uniquement les éléments dont j'ai besoin.

Pour l'exemple, voici ceux que j'ai sélectionné :

• anims.fade : pas obligatoire, mais toujours plus agréable d'avoir quelques animations pour l'ouverture ou la fermeture de la modale.
• filters.title : on en a évidemment besoin, on va se baser dessus pour ajouter le lien
• filters.link : obligatoire aussi, c'est le filtre qui permet d'ajouter la réaction au click sur le lien
• filters.image : j'ai décidé d'ouvrir une image pour l'exemple, donc j'en ai besoin.

Une fois le zip téléchargé, une petite extraction là où en a envie. On va pouvoir commencer à travailler.

Étape 2 : Créer le fichier HTML de base

Avant d'ajouter la fonctionnalité, commençons par mettre en place notre fichier HTML avec le strict minimum :

<!DOCTYPE HTML>
<html>
<head>
    <title>nyroModal : Link in title</title>
    <link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" />
</head>
<body>
    <a href="http://images.easyart.com/i/prints/rw/lg/1/3/Romero-Britto-Flower-Power-IV-130134.jpg" class="nyroModal" title="Flower Power IV">Flower Power IV</a>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.nyroModal.custom.js"></script>
    <!--[if IE 6]>
        <script type="text/javascript" src="js/jquery.nyroModal-ie6.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
    jQuery(function($) {
        $('.nyroModal').nm();
    });
    </script>
</body>
</html>

Dans cette page, je charge la CSS de nyroModal, ajoute un lien vers une image et charge les JavaScript nécessaires. Puis en une ligne, nyroModal est instanciée.

Le lien vers l'image a déjà l'attribut title pour créer automatiquement, via le filters.title le titre de la fenêtre modale.

Étape 3 : Étudier filters.title

Pour tenter d'ajouter une fonctionnalité au titre de la modale, il faut d'abord comprendre comment il fonctionne. Pour ce faire, on regarde la source sur github.

On y voit que l'élément h1 du titre est stocké dans la variable nm.store.title et est créé dans le callback beforeShowCont.

nyroModal est développé de sorte que tous les callbacks des filtres sont appelés. Puis, les callbacks définis lors de l'instanciation de nyroModal (via le paramètre callbacks) sont appelés.

Pour ajouter la fonctionnalité, nous allons donc pouvoir la mettre dans le callback beforeShowCont de ce paramètre, en utilisant la variable nm.store.title et du jQuery habituel.

Étape 4 : Ajouter la fonctionnalité

On sait maintenant comment procéder. Il ne reste plus qu'à...

On ajoute l'attribut rev destiné à contenir l'URL du lien à ajouter, puis dans le code de l'instanciation des liens nyroModal, on ajoute un callback. La page HTML devient :

<!DOCTYPE HTML>
<html>
<head>
    <title>nyroModal : Link in title</title>
    <link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" />
</head>
<body>
    <a href="http://images.easyart.com/i/prints/rw/lg/1/3/Romero-Britto-Flower-Power-IV-130134.jpg" class="nyroModal"
        title="Flower Power IV" rev="http://www.easyart.fr/posters/Romero-Britto/Flower-Power-IV-130134.html">Flower Power IV</a>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.nyroModal.custom.js"></script>
    <!--[if IE 6]>
        <script type="text/javascript" src="js/jquery.nyroModal-ie6.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
    jQuery(function($) {
        $('.nyroModal').nm({
            callbacks: {
                beforeShowCont: function(nm) {
                    if (nm._hasFilter('title') && nm.opener.is('[rev]')) {
                        nm.store.title.html('<a href="'+nm.opener.attr('rev')+'">'+nm.store.title.text()+'</a>');
                    }
                }
            }
        });
    });
    </script>
</body>
</html>

Alors, qu'y a t-il dans ce callback ?

On vérifie d'abord que le filtre title soit bien activé et que le lien ouvrant possède un attribut rev => Les conditions sont remplis pour ajouter la fonctionnalité.

Puis la ligne en dessous, on modifie le h1 stocké dans nm.store.title pour remplacer le simple texte par un lien vers l'URL de l'attribut rev et le texte est conservé.

Voilà, fini. 2 lignes de code effective pour ajouter cette fonctionnalité.

Conclusion

Pour ajouter des fonctionnalité à un script open-source, il faut toujours se poser deux questions avant de commencer :

• Qu'est-ce qu'on veut réaliser ?
• Comment va-t-on le mettre en place ?

Puis, par l'analyse du code et de la documentation, on trouve un moyen de développer ce qu'on veut plus ou moins simplement.

Je dis toujours à mes clients : "Oui, tout est possible. Il suffit d'avoir le temps."

Les fichiers

Vous pouvez voir les source ici : http://nyrodev.info/dl/nyroModalLinkTitle/

Vous pouvez télécharger l'ensemble des sources au format Zip ici : http://nyrodev.info/dl/nyroModalLinkTitle/nyroModalLinkTitle.zip

Version anglais de ce billet