JavaScript: Synchroniser des événements asynchrones

Un des problèmes récurrents du développement événementiel est que l’on a parfois besoin de synchroniser l’exécution d’une fonction. En effet, il est parfois important qu’une fonction finisse avant d’en appeler une autre, ou bien elle-même une nouvelle fois. Dans mon cas, je vais vous montrer comment synchroniser un événement JavaScript (en l’occurrence un keydown) pour que le trigger que vous lui avez affecté ne s’exécute pas deux fois en parallèle, grâce à une librairie à l’heure actuelle peu connue: jsAsyncQueue.

Le problème

Prenons comme exemple le code JavaScript suivant (utilisant la librairie jQuery):

Dans cet exemple, on récupère la valeur actuelle d’un input pour la traiter puis mettre à jour la valeur du champ de texte. C’est un exemple un peu bête mais qui résume bien le problème… Si j’appuie rapidement sur mes touches, on comprend bien qu’on peut avoir plusieurs exécutions de la fonction de trigger en parallèle. Ainsi, la valeur que l’on a récupéré au début de notre fonction n’est plus valable à un certain moment parce qu’une autre exécution du trigger l’as modifié en parallèle.

Continue reading JavaScript: Synchroniser des événements asynchrones

facebooktwittergoogle_plusredditpinterestlinkedinmail

Polygones de Thyssen: algorithme de Steven Forture en PHP

Pour des besoins professionnels, j’ai réécrit l’algorithme de Steven Fortune permettant d’obtenir un diagramme de Voronoï à partir de points connus, en transformant la librairie JavaScript de gorhill.

Vous pouvez trouver les fichiers sources (en PHP 5) sur ce dépôt GitHub:

Exemple d’utilisation

Voici un exemple d’utilisation, qui permet de générer un diagramme de Voronoï (ou autrement dit des polygones de Thyssen) à partir de points générés automatiquement:

Voici un exemple d’image:

facebooktwittergoogle_plusredditpinterestlinkedinmail

Optimiser l’affichage de pages avec Google Adsense

Les pages Web contenant des publicités Google Adsense sont nettement plus lentes à charger que les pages qui n’en contiennent pas: c’est à cause de la méthode de chargement des publicités et de leur place dans la page. En général, les publicités se trouvent dans l’en-tête et/ou dans le menu vertical, elles sont donc chargées avant le corps de page.

Le problème

Le code fourni par Google pour afficher ses publicités est le suivant (avec des variables différentes):

Or, lors du chargement d’un fichier JavaScript, le moteur de rendu du navigateur est arrêté et le chargement de tous les éléments autres est suspendu. Par conséquent, le navigateur doit attendre que la page externe finisse de charger avant même de continuer à charger les autres éléments internes de la page Web. Ainsi, la page est nettement plus longue à charger et le ressenti utilisateur est plus mauvais…
Continue reading Optimiser l’affichage de pages avec Google Adsense

facebooktwittergoogle_plusredditpinterestlinkedinmail

Plusieurs fancybox simultanément

Si vous ne connaissez pas, FancyBox est une petite librairie jQuery permettant de mettre en place de manière très simple de petites nouvelles petites sur-fenêtres, ou popup au sein de votre page Web. Le problème de FancyBox, en tous les cas pour la version actuelle, la 1.2.6, c’est qu’il est impossible de créer deux popups en même temps, par exemple on ouvre une popup “inline”, puis dans celle-ci on a par exemple une nouvelle popup, qui affiche des photos, hé bien c’est impossible…

Pour ça, j’ai donc développé une version “multiple” de FancyBox 1.2.6, dont le fichier JavaScript (et CSS) se nomment jquery.fancybox-1.2.6.multiple.js et .css. Vous pouvez les télécharger à ces adresses:

L’utilisation est quasi identique, sauf qu’un nouvel argument est possible lors de l’appel de la méthode fancybox sur un élément. Le deuxième argument attendu est le parent de la fancybox, ce qui permet ainsi de les différencier (un parent par fancybox), qui est par défaut $('body').

N’hésitez pas à me faire des retours. :)

facebooktwittergoogle_plusredditpinterestlinkedinmail

Installer Flash Player 10 Debug sur Ubuntu 64 bits (firefox)

La version de débugage de Flash Player 10 est uniquement disponible pour les architectures x86 (32 bits) sous linux. Si vous essayer néanmoins l’installation vous aurez un magnifique “l’architecture ‘x86_64′ n’est pas supportée”. Pour l’installer sous un Ubuntu x86_64 (64 bits) il faut utiliser nspluginwrapper.

Continue reading Installer Flash Player 10 Debug sur Ubuntu 64 bits (firefox)

facebooktwittergoogle_plusredditpinterestlinkedinmail

Debian/Ubuntu: Changer la résolution de la console

Attention, ne marche qu’avec la version 1 de GRUB – c’est-à-dire pour les versions d’Ubuntu antérieures à la 9.10.

Avoir un petit ordinateur annexe qui sert de serveur c’est bien, ne pas en avoir – ou vouloir utiliser des solutions plus portables – c’est moins pratique. Pour ça, on peut utiliser des Debian virtualisés avec VirtualBox par exemple. Néanmoins, on ne peut pas se connecter à distance sur les consoles de ces machines virtualisées depuis l’hôte. On est donc obligés d’utiliser le système d’exploitation, sans interface graphique, en mode console. Seulement, la console est parfois très petite, on peut donc facilement changer la résolution de celle-ci.
Continue reading Debian/Ubuntu: Changer la résolution de la console

facebooktwittergoogle_plusredditpinterestlinkedinmail

Copies d’écrans et miniatures de sites : Print-Site

Développé par D-Sites, Print-Site est un service qui vous propose de transformer un site en une image de différentes tailles (taille réelle, miniature de 100×100 à 500×500) de manière instantanée et illimitée.

Il repose sur Webkit, le moteur de rendu le plus respectueux des standards (100% à tous les Acid Test !).

Pour plus d’informations, visitez la page dédiée au projet Print-Site.

facebooktwittergoogle_plusredditpinterestlinkedinmail

Debian: Installer un serveur X

Si pour une raison ou une autre, vous avez besoin d’éxécuter des programmes avec un serveur X (graphique), vous pouvez utiliser xvfb (X Virtual Frame Buffer) – comme vu dans l’article présentant les copies d’écrans à la volée depuis votre serveur – avec ses temps de latence important ou installer tout simplement un serveur X.

Vous pensez peut-être que vous allons installer un serveur X avec toute la panoplie de différents services, puis Gnome, etc… Oh non ! Il nous faut uniquement (et obligatoirement) un serveur X virtuel pour pouvoir le démarrer sans clavier, sans souris et sans écran. C’est ainsi que Xvfb nous est à nouveau utile !
Continue reading Debian: Installer un serveur X

facebooktwittergoogle_plusredditpinterestlinkedinmail

Créer des copies d’écran de sites avec votre serveur

Générer des miniatures (ou copies d’écran) de n’importe quel site pour en faire une page de présentation ou pour aider les visiteurs à mieux se repérer dans votre index est quelque chose de plutôt fastidieux si l’on doit le faire soit-même à la main. C’est pourquoi, il existe des solutions pour faire ceci depuis votre ordinateur personnel (sous Debian et ses dérivées – Ubuntu, Xubuntu, etc…) avec (ou sans, avec xvfb) serveur X (graphique).

Information: D-Sites a créer un service nommé Print-Site qui vous permet de créer ces images de sites gratuitement sans aucune installation. Les serveurs de D-Sites s’occupent de tout ! Visitez l’annonce ou la page du projet Print-Site. Continue reading Créer des copies d’écran de sites avec votre serveur

facebooktwittergoogle_plusredditpinterestlinkedinmail

Mettre à jour Apache

Parfois, dans n’importe quel programme, il y a des bugs, qui sont corrigés dans des futures versions. Si vous êtes confronté à un bug, il faut donc mettre à jour le logiciel. Nous allons voir comment mettre à jour Apache vers une version mineure plus récente. C’est-à-dire par exemple de la version 2.2.9 à la version 2.2.13. Mais pas de la 2.0 à la 2.2, encore moins de la 1 à la 2 !

Nous allons prendre des valeurs pour tout l’article, qui sont:

  • Répertoire de l’ancienne version d’Apache: /etc/apache-2.2.9
  • Répertoire de la nouvelle version d’Apache: /etc/apache-2.2.13

Continue reading Mettre à jour Apache

facebooktwittergoogle_plusredditpinterestlinkedinmail