Charger vos scripts en asynchrone

Le chargement de vos fichiers Javascript ralentit le chargement de page. Ceci est logique car le navigateur doit télécharger les fichiers avant de faire l’affichage. Grâce à Require.js vous allez pouvoir charger vos JavaScript en asynchrone. C’est-à-dire charger le texte, les images, les styles puis seulement une fois que la page est affichée correctement, et que le lecteur peut commencer à lire le contenu, le JavaScript. Require.js permet aussi de détecter les fichiers qui ont déjà été chargés afin de ne pas les recharger.

L’utilisation du script est très simple, dans un premier temps, il faut inclure le fichier contenant require.js :

Puis à la fin du body il faut dire à require.js de charger les autres scripts :

require([
            "scripts/underscore.js",
            "scripts/jquery.js",
            "scripts/backbone.js"
        ], function(){
            $('#exemple').html('Jquery loaded!')
        })

Le gain au chargement de la page est assez intéressant, surtout depuis la refonte complète de la librairie.

Faire un indexof travaillé avec H5AI

H5AI est un projet développé avec HTML5 qui a pour but de remplacer la page indexof par défaut de apache. C’est dans cette optique que H5AI propose plusieurs types de vue, un moteur de recherche interne ou encore un bandeau cliquable nous indiquant notre position dans l’arborescence de fichiers, depuis le root du dossier où H5AI est mis en place.

Voici un exemple en images du type de rendu que vous pouvez avoir sur un dossier contenant plusieurs types de fichiers différents. Vous pouvez remarquer que le projet détecte le type de chacun des fichiers afin d’afficher la bonne icône.

Galerie de photos élégante

Vous êtes photographe, amateur ou professionnel et vous vous demandez comment mettre en valeur vos photos sur votre site web ?

3D Wall Gallery vous permet de les mettre en page sous forme d’un slider plutôt attractif.

Voici comment les images se présentent dans votre navigateur. La barre sur le dessus de la page vous permet de faire glisser la « pellicule » afin de voir d’autres images.

Sur le bas de la page, vous avez un widget qui vous permet de prévisualiser vos images et ainsi de choisir directement celle qui vous intéresse.

Vous l’aurez compris, ce projet basé sur JQuery UI est très intéressant, cependant, le seul bémol est la mise en place de cet outil.

En effet, pour ajouter une image il vous faudra :

  • Votre image en taille normale
  • Votre image en miniature
  • Ajouter votre grande image à la liste des images
  • Ajouter votre miniature à la liste des miniatures
  • Ajouter un lien pour afficher votre grande image à partir du widget

Il est bien dommage que le projet ne soit pas un fichier php qui listerait les images et qui générerait le fichier HTML automatiquement.

Cependant, la version téléchargeable contient un fichier index.html d’exemple, il vous suffira de remplacer les liens des images et de supprimer celles qui sont en trop.

Gestionnaire de fichiers en ligne : elFinder

Si d’une manière ou d’une autre vous êtes amené à partager un espace d’échange de fichiers avec plusieurs personnes via une interface web, mais que vous n’avez pas envie d’avoir la simple vue « Index of » par défaut, voici un projet très complet de gestion de documents en ligne.

ElFinder permet de parcourir les dossiers à partir d’un racine bien définie (coté PHP ou Python), de télécharger, de visualiser et de modifier des fichiers distants sans avoir à les télécharger pour la plupart.

Plusieurs modes sont disponibles : dans une « fenêtre » simulée à l’aide de JQuery UI par le biais d’un widget, ou le mode classique. Par conséquent, vous l’aurez compris, le plugin nécessite d’utiliser JQuery UI en plus de JQuery.

ElFinder permet une gestion des droits que l’on attribue aux utilisateurs anonymes par le biais d’un fichier de configuration PHP ou Python ( connector.php ou connector.py). Vous trouverez toutes les informations relatives aux options sur le site de elFinder. Pour ce type de plugin mieux vaux être sûr de sa config, à mon avis même si les risques se limitent aux fichiers présents dans le dossier file/ (qui peut être positionné n’importe où).

Exemple Démo

J’ai volontairement retiré les droits d’écriture et de suppression à tout le monde pour éviter les mauvaises surprises. Si vous ne voulez plus avoir cette limitation il vous suffit de télécharger l’archive et de la décompresser dans votre serveur web.

Voici un aperçu rapide de l’interface de l’application une fois qu’il y a quelques fichiers dedans :