Aujourd’hui je voudrais vous présenter un projet que j’ai réalisé en quelques jours cet été, et dont je suis particulièrement fier au point de vue de la technique pure. En effet, le code est particulièrement propre, plutôt court et intelligemment pensé ! Vous devez trouver ça plutôt habituel, mais je vous assure qu’il m’arrive souvent d’écrire du code “rafistolé avec du scotch” : qui fonctionne, mais qui n’est pas optimisé. De plus, Internet Facts utilise des effets intéressants de jQuery, le CDN d’OVH, de beaux CSS sprites, des modules Facebook et Twitter, du HTML5 et du CSS3. En clair un condensé de belles choses pour avoir un site agréable !

Internet Facts, c’est quoi ?

Le concept du site peut sembler similaire à un autre de mes projets : Teen Quotes et Kotado. Les fonctions principales sont l’affichage des citations, que l’on peut ensuite commenter, trier en fonction de l’auteur, afficher aléatoirement, s’inscrire à une newsletter etc.

Internet Facts présente des faits étonnants sur le monde qui nous entoure. Ces informations ont été trouvées le plus généralement sur Wikipédia. D’ailleurs, Internet Facts est associé au compte Twitter @FactsWikipedia pour proposer du contenu.

Le code peut donc se reprendre facilement pour un autre site qui propose des citations en ligne.

Le mieux étant encore de voir le site directement : internet-facts.com.

Et le code, il est où ?

L’intégralité du code (à l’exception du fichier de configuration) est disponible sur mon GitHub (comme beaucoup de mes projets) : https://github.com/AntoineAug/internet-facts.

Bien évidemment, si vous avez des remarques ou des questions, je vous invite à me les poser.

Un CDN, c’est quoi ?

Un Content Delivery Network (CDN) est constitué d’ordinateurs reliés en réseau à travers Internet et qui coopèrent afin de mettre à disposition du contenu ou des données (généralement volumineuses ou statiques) à des utilisateurs. Le réseau est constitué :

• De serveurs d’origines, où les contenus sont injectés dans le CDN pour y être repliqués (les serveurs maîtres) ;
• De noeuds répartis géographiquement où les contenus sont repliqués (le CDN) ;
• D’un mécanisme de routage permettant à une requête utilisateur sur un contenu d’être servie par le noeud “le plus proche” dans le but d’optimiser la transmission des données.

L’optimisation se traduit par une réduction des coûts de bande passante sur vos serveurs maîtres (le contenu statique, les images, les feuilles de style, le JS et les vidéos sont gérées par le CDN) et de l’amélioration de l’expérience utilisateur (le site est chargé plus rapidement).

Pour donner un exemple concret, les vidéos de YouTube sont répliquées dans des dizaines de milliers d’ordinateurs répartis en réseau dans le monde. Ainsi, lorsque vous chargez une vidéo, le groupe d’ordinateurs le plus proche va se charger de vous transmettre la vidéo. Ainsi, la bande passante globale est partagée entre plusieurs milliers d’ordinateurs et le contenu est acheminé plus rapidement.

Le CDN d’OVH

OVH propose un CDN gratuitement, même si vous ne possédez ni hébergement, ni serveur dédié, ni nom de domaine chez eux. Exceptionnel, n’est-ce pas ? La seule condition est d’avoir un compte chez eux, c’est tout. OVH met à disposition son infrastructure de serveurs à travers le monde pour répliquer votre contenu et s’occupe du mécanisme permettant de rediriger vers le point géographique le plus proche ou vers vos serveurs maîtres si le contenu n’est pas hébergé sur le CDN.

Concernant la présence géographique, elle est assez impressionnante. Vous pouvez regarder la carte tout en haut de cet article pour visualiser ceci. Le réseau CDN d’OVH est disponible :

• En Europe. Paris, Milan, Madrid, Amsterdam, Londres, Francfort, Varsovie ;
• En Amérique. Chicago, Dallas, Newark, New York, San José, Ashburn, Atlanta, Los Angeles, Miami, Seattle, Palo Alto, Toronto ;
• En Asie. Hong Kong, Tokyo, Singapour.

Voilà déjà de quoi vous offrir une présence géographique mondiale plutôt efficace. Vous avez accès à l’ensemble de ces villes pour votre CDN. Merveilleux n’est-ce pas ?

CDN ou serveurs maîtres ?

Voici un petit schéma explicatif récapitulant la procédure qui est exécutée à chaque requête HTTP. Le schéma provient du site d’OVH :

Temps de vie des fichiers

Vous pouvez paramétrer un temps de vie par fichier, par extension ou par dossier sur votre hébergement. Le CDN d’OVH gardera sur les différents serveurs dans sa cache locale les fichiers pendant le temps spécifié par la règle de chaque fichier. Une fois ce temps écoulé, chaque fichier sera redemandé à votre serveur maître afin d’être répliqué à nouveau sur l’ensemble des serveurs du CDN.

Méthode d’utilisation

La meilleure utilisation possible consiste à placer toutes vos ressources statiques sur un sous-domaine de la forme static.votresuperdomaine.com : images, feuilles de style, JavaScript, vidéos, animations Flash. Tout ce qui n’est pas du contenu dynamique en clair, qui n’est pas amené à changer. Lorsqu’un visiteur arrive sur votre site, CDN charge immédiatement les contenus statiques tels que les images sur static : <img src=”static.votresuperdomaine.com/images/…” alt=”” />

Votre hébergement ne s’occupe plus que de vos contenus dynamiques.

Utiliser le CDN d’OVH

Pour utiliser le CDN d’OVH il faut d’abord se rendre sur www.ovh.com/fr/cdn/fr, renseigner vos identifiants OVH puis le nom de domaine sur lequel vous souhaitez mettre en place le CDN. Un email vous sera envoyé et vous devrez changer l’adresse IP du champ A de votre domaine ou de votre sous-domaine par celle qui est inscrite dans cet email pour activer le CDN. Vous n’avez rien à changer dans votre code. La configuration du temps de vie par type de fichier se fait via un manager proposé par OVH, en français, facile d’utilisation.

Rendu en production

J’ai testé le CDN d’OVH sur plusieurs de mes domaines, pas encore sur de gros sites en production. J’ai obtenu des résultats très intéressants sur un site qui héberge du contenu multimédia. J’ai réussi à économiser 93 % de ma bande passante. Un chiffre assez impressionnant !

Conseils d’utilisation

Attention, le CDN d’OVH n’est pas à utiliser sur un projet encore en développement. Vous allez vite être embêtés par la gestion des caches alors que vous modifiez régulièrement des images, des feuilles de style… Même si OVH propose de vider le cache du CDN et de répliquer une nouvelle version des fichiers, vous pouvez avoir des soucis avec le cache de votre navigateur ensuite. Le CDN d’OVH est donc très utile sur un site déjà en production, où les changements sont très rares.

Bonne utilisation !

Project Euler est un site web proposant de nombreux problèmes d’algorithmique à résoudre. La difficulté des 388 problèmes proposés à ce jour est croissante et mettra à contribution vos méninges. La résolution du problème se fait généralement par une réflexion mathématique puis par une programmation de son idée pour obtenir le résultat attendu. Pas besoin d’avoir un super calculateur de la Nasa pour obtenir le résultat, les problèmes peuvent être résolus en “moins d’une minute” de calcul par un ordinateur domestique. Il est précisé qu’il faudra néanmoins parfois quelques heures de réflexion pour arriver à calculer un résultat, une optimisation de l’algorithme étant nécessaire pour rentrer dans des délais de calcul acceptés par l’ordinateur.

Résolution d’un problème

Tous les langages de programmation et tous les logiciels sont acceptés pour résoudre le problème. Le résultat de chaque problème demandé est un nombre, il ne faudra donc pas soumettre les méthodes de calcul de votre algorithme mais uniquement le résultat. Voici un net avantage pour vous :

• Vous pouvez utiliser toutes les méthodes que vous souhaitez pour résoudre un problème.
• Vous n’avez pas besoin d’attendre une quelconque validation de votre algorithme par quelqu’un de l’équipe.
• Vous savez tout de suite si vous avez le bon résultat (ou si vous devez encore vous creuser la tête…).

Après avoir résolu un problème, vous avez la possibilité de consulter le forum associé à ce problème (et surtout pas avant l’avoir résolu !). Dans ce forum vous trouverez les solutions proposées par d’autres programmeurs qui sont arrivés au même résultat que vous, mais avec d’autres méthodes et d’autres langages. Une excellente opportunité pour découvrir de nouvelles techniques ou des optimisations très ingénieuses. Si vous vous sentez prêt, vous pouvez aussi exposer votre algorithme afin de partager votre technique avec les autres membres !

Statistiques

Quelques chiffres, pour vous donner envie de participer vous aussi :

• 231 349 personnes ont résolu au moins un problème.
• 3 700 797 résultats justes ont été proposés, avec une moyenne de 16 par membre.
• 41 090 personnes ont résolu au moins 25 problèmes, ce qui représente 18 % de la totalité des membres.
• 113 personnes ont résolu plus de 350 problèmes.

Vous pouvez trouver des statistiques sur les langages de programmation utilisés juste ici : projecteuler.net/languages.

Je veux participer !

Vous aussi vous souhaitez vous arracher les cheveux sur des problèmes mathématiques pendant des heures et exploser de joie lorsque vous aurez trouvé le bon résultat ? L’inscription se fait à cette adresse : projecteuler.net/register.

Nous participons actuellement en équipe à la résolution de ces problèmes, si vous souhaitez voir ce que nous faisons ou partager vos algorithmes avec nous : @AntoineAugusti et @ThibaudDauce sur Twitter. Et nos codes source sur GitHub : https://github.com/AntoineAug/Euler. Nous avancerons beaucoup plus durant le mois de juillet et d’août.

Bonne chance à vous dans la résolution des problèmes !

On est souvent amenés lorsque l’on crée un site web à utiliser beaucoup d’icônes. A ce sujet, je vous conseille l’excellent site www.iconfinder.com où je suis sûr que vous trouverez votre bonheur. Pensez à rechercher en anglais !

Dans une optique d’optimisation, il est opportun de regrouper ses icônes dans un seul fichier à l’aide de la technique du CSS Sprite. J’avais déjà abordé cette technique dans un précédent article : les outils pour développeurs web. Grâce à cette technique, vous ne faites plus qu’une seule requête HTTP (sinon, ce sera une requête par fichier…) et vous possédez moins de fichiers. Il suffit alors de mettre en cache chez l’utilisateur cette image, et voilà une bonne partie de la bande passante économisée ! Une belle optimisation, facile à réaliser.

La création du CSS sprite

Pour mes icônes, que j’utilise sur la nouvelle version de mon site personnel (www.antoine-augusti.fr), j’ai choisi d’utiliser des images de dimension 24×24. J’ai redimensionné à ce format les icônes qui étaient plus grandes.

Une fois ceci fait, j’ai utilisé l’excellent site www.csssprites.com pour créer mon CSS Sprite. Il suffit d’ajouter toutes les images au bon format, de choisir dans les options de les aligner comme vous souhaitez, de réduire l’espace entre elles (1px est suffisant) et le site s’occupe de générer votre image et le code CSS associé à celle-ci ! Magique !

Résultat

J’obtiens donc l’image suivante :

Et j’ai créé le CSS suivant :
J’ai associé une simple fonction en PHP :

Que l’on utilise de la manière suivante :

Afin de générer de belles icônes associées aux bons liens, très facilement.

Bien évidemment, vous pouvez créer une autre fonction pour pouvoir utiliser ces icônes sans des liens, par exemple dans le corps de votre site, en complément du contenu !

La génération de nombres aléatoires a souvent posé des soucis avec des algorithmes. Cette génération se fait le plus souvent en fonction de l’heure de la machine sur laquelle la fonction permettant de générer un nombre aléatoire est exécutée. Dès lors, il se pose un souci majeur : si les algorithmes sont fonction du temps, il peut être possible de prévoir le nombre aléatoire que va sortir la machine. On s’intéresse à ce risque en cryptographie et le but est de produire un algorithme rapide à exécuter, qui ne génère pas des nombres aléatoires périodiquement et dont on ne puisse pas prévoir les résultats.

Voici quelques tests que j’ai réalisé pour tester la qualité de deux fonctions permettant de générer aléatoirement des nombres en PHP rand et mt_rand.

Voici ce que dit la documentation de PHP à propos de ces fonctions.

“De nombreux générateurs de nombres aléatoires provenant de vieilles bibliothèques libcs ont des comportements douteux et sont très lents. Par défaut, PHP utilise le générateur de nombres aléatoires de libc avec la fonction rand(). mt_rand() est une fonction de remplacement, pour cette dernière. Elle utilise un générateur de nombres aléatoire de caractéristique connue, le “Mersenne Twister” qui est 4 fois plus rapide que la fonction standard libc.”

Création d’une image

Ce test permet de se représenter visuellement les résultats donnés par les fonctions. Voici le principe : on part sur une base d’une image complètement noire et on demande aux fonctions de colorier des coordonnées de l’image, calculées aléatoirement, en blanc. On balaie l’intégralité des coordonnées de l’image (en x et en y) et on regarde si certains pixels n’ont pas été coloriés plusieurs fois ou si on peut observer des formes, ce qui montre le caractère non parfaitement aléatoire de la fonction.

Voici le code PHP pour réaliser ceci :
Voici l’image que l’on obtient (lien vers l’image taille réelle) :

(lien vers l’image taille réelle)
Et voici un zoom au centre de l’image, pour pouvoir comparer la nette différence entre rand et mt_rand : Le résultat est assez bluffant : on remarque sur l’image générée par la fonction rand des formes qui ressemblent à des lignes discontinues tandis que l’image générée par mt_rand ressemble bien à une image de bruit, ce qui est la représentation qu’on pouvait attendre.

Vérification de l’équiprobabilité

Nous allons maintenant nous intéresser à la vérification de la règle de l’équiprobabilité d’un tirage de chiffres. Le test est le suivant : on demande à l’algorithme de générer un chiffre aléatoire entre 0 et 9 inclus, soit 10 possibilités. Pour un grand nombre de tirages, la probabilité est de 10 % par chiffre. Vérifions ce résultat avec les fonctions rand et mt_randet regardons les différences. Le code PHP pour ce test, pour la fonction rand est le suivant :

Le test est le même pour la fonction mt_rand, sauf que l’on change le nom de la fonction permettant de générer le nombre à la ligne 44.

Voici les résultats que l’on obtient. Pour rand :

Et pour mt_rand :

Ouf, l’équiprobabilité est vérifiée pour les deux fonctions ! Résultat étrange en revanche, l’erreur moyenne et le temps de calcul sont plus grands pour la fonction mt_rand alors que la documentation PHP indique que cette fonction est “4 fois plus rapide”. Il faudrait réaliser plusieurs fois ce test pour s’assurer de ce résultat.

Le précédent test ne permet donc pas de dire que la fonction rand est “mauvaise” et elle génère quand même bien des nombres aléatoires, malgré ce que l’image obtenue pouvait laisser penser.