Catégorie : Web

Aurelia Webpack : créer les fichiers compressés (gzip et brontli) du package de production

Par défaut Aurelia JS ne génère par d'option de compression gzip (*.gz) ou brontli (*.br)  des fichiers produits par  Webpack.
Si ces fichiers existent sur le  serveur Web  ils sont envoyés à la place du fichier non compressé  afin de gagner de la bande passant et du temps de chargement...

Lire la suite

Installer l’indicateur de chargement « nprogress » sur Aurelia

nprogress

Sous Aurelia lorsque vous naviguez ou chargez une ressource il est bien de faire patienter l’utilisateur avec une animation bloquant l’interface.
Le composant « nprogresse » permet de faire cela.

Installation de « nprogress »

Installer « nprogress » dans votre projet Aurelia

 
 
npm install nprogress --save

Configuration de « nprogress » sous Aurelia

Dans le dossier « src/resources/elements » créez le fichier « loading-indicator.js » avec le script suivant :

 
 
import * as nprogress from 'nprogress';
import {bindable, noView} from 'aurelia-framework';
import 'nprogress/nprogress.css';
@noView
export class LoadingIndicator {
      @bindable loading = false;
      loadingChanged(newValue) {
        if (newValue) {
            nprogress.start();
        } else {
            nprogress.done();
        }
      }
}

Ce code crée un composant HTML « loading-indicator » non relié à une vue (de même non), mais important une feuille de style « nprogress/nprogress.css ».

Définissez le plug-in dans le fichier « resources/index.js » en ajoutant :

 
 
 import {PLATFORM} from 'aurelia-framework';
  
  export function configure(config) {
    config.globalResources([PLATFORM.moduleName('./elements/loading-indicator')]);
  }

Positionner le composant HTML de nprogress dans la page HTML principale « App.html »  en ajoutant le code suivant :

 
 
<loading-indicator loading.bind="router.isNavigating || context.isRequesting"></loading-indicator>

Pour activer ce composant il  suffit de mettre a « true » la variable de « context.isRequesting », on d’appeler la méthode « nprogress.start() ». Une barre bleue de progression s’affichera en haut.

Pour le cacher, appelez-la méthode « nprogress.stop(); »

Personnalisation de la barre de progression

Vous pouvez changer le style de la barre de progression en ajout le code suivant dans votre fichier style CSS principale :

 
 
#nprogress {
      display: block;
      position: fixed;
      z-index: 1030;
      left: 0;
      top:  0;
      right: 0;
      bottom: 0;
      opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    background-color: #fff;
}
#nprogress .bar {
      height : 8px;
}
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 50%;
}

 

 

 

 

 

Ajouter la police CSS Font-Awesome dans Aurelia JS

Le package « Font Awesome » vous permet d’utiliser des icônes libres et proportionnelles dans vos pages Web. Effectivement la feuille de style proposé par Font Awesome utilise une police vectorielle représentant des icônes.

Regarder sur les exemples suivant http://fontawesome.io/examples cela va vous plaire.

Lorsque vous utilisez Aurelia CLI, le package NodeJS de « Font awesome » est mal configuré et génère des erreurs.
Je vous propose  donc une recette simple pour bien l’intégrer dans vos développements Aurelia  JS.

1) Installer le package Font-Awesome dans NodeJS :

 
 
npm install font-awesome --save

2)  Dans le fichier « aurelia-project/aurelia.json » ajouter dans le « build » la copie des polices vectorielles dans le dossier « fonts » de votre projet :

 
 
...
"build": {
      ...,
      "copyFiles": {
            "node_modules/font-awesome/fonts/fontawesome-webfont.woff": "fonts/",
            "node_modules/font-awesome/fonts/fontawesome-webfont.woff2": "fonts/",
            "node_modules/font-awesome/fonts/FontAwesome.otf": "fonts/",
            "node_modules/font-awesome/fonts/fontawesome-webfont.ttf": "fonts/",
            "node_modules/font-awesome/fonts/fontawesome-webfont.svg": "fonts/"
      }, ...

3) Toujours sur ce document, dans les dépendances « dependencies » ajouter la description du package « font-awesome » :

 
 
"dependencies": [ 
      ...,
      { 
            "name": "css/font-awesome", 
            "path": "../node_modules/font-awesome/", 
            "main": "css/font-awesome.css"
      }, ...

4) Pour utiliser la police dans une page HTML d’Aurelia, il suffit d’y ajouter après le « <template> » l’instruction suivante :

 
 
<require from="css/font-awesome.css"></require>

Vous noterez le « css/ » devant « font-awesome.css ». Cella permet d’être relative au projet Aurelia, sans devoir copier le dossier « fonts » à la racine de votre site WEB.

 

 

Mettre à jour Aurelia JS : aurelia-update et npm-check-updates

Le framework Aurelia JS 😛 est régulièrement mis à jour. Mais comment le mettre à jour ?

Mise à jour de aurelia-cli dans NodeJS.

Attention, cella n’influence pas la version utilisé dans un projet existant.

  • Une manière de le mettre à jour est de faire :
     
     
    npm install -g aurelia-cli

    Si vous obtenez une erreur, il faut le supprimer de NodeJS puis de le re-installer en nettoyant les cache :

     
     
    npm uninstall -g aurelia-cli
    npm cache clean
    npm install -g aurelia-cli
  • Dans un projet, il est possible d’utiliser aurelia-update.
    Si vous n’avez pas encore installé aurelia-update, installer le par :

     
     
    npm install aurelia-update -g

    Pour mètre à jour Aurelia faire simplement :

     
     
    aurelia-update

Maintenant vous voulez surement mettre à jour les bibliothèques utilisées dans un projet Aurelia.

Mise à jour des bibliothèques (libraries, packages) référencées dans package.json dont Aurelia !

En premier il faut trouver les numéro des nouvelles versions des bibliothèques. Soit vous les rechercher sur le site de npm soit vous installer le package « npm-check-updates » par :

 
 
npm install npm-check-updates -g

puis lancer la recherche des nouveaux numéros de version par :

 
 
npm-check-updates

ce qui affichera une liste ressemblant à (sur la droite la version la plus récente) :

 
 
 aurelia-bootstrapper       ^1.0.0  →           ^2.1.1
 aurelia-dialog             ^0.6.2  →  ^1.0.0-rc.1.0.3
 jquery                      2.2.4  →            3.2.1
 aurelia-tools              ^0.2.2  →           ^1.0.0
 gulp-notify                ^2.2.0  →           ^3.0.0
 uglify-js                  ^2.6.3  →          ^3.0.26
 babel-eslint               ^6.0.4  →           ^7.2.3
 babel-preset-es2015-loose  ^7.0.0  →           ^8.0.0
 gulp-eslint                ^2.0.0  →           ^4.0.0

Si tout vous convient, vous pouvez tous les mettre à jour par (Je vous le déconseille) :

 
 
npm-check-updates -u

Sinon éditer le fichier « package.json » puis pour chaque version a mettre à jour, remplacer son ancien numéro par le nouveau.

Maintenant il reste plus qu’a faire une mise à jour npm par :

 
 
npm update

Ou supprimer le dossier « node_modules » puis faire une installation :

 
 
npm install

Et voila, toutes vos bibliothèques (libray) sont à jour !

Attention aux incompatibilités entre numéro de version .

 

 

 

Créer localement un docset Aurelia pour Zeal (gestionnaire offline de doc)

Zeal est une application Linux, Windows permettant de regrouper localement des documentations techniques telles que HTTP, CSS, HTML, Java, Reactjs ... Ainsi plus besoin de ce connecter sur le Web (on a pas toujours accès à internet ;-)
Bien que sa bibliothèque soit bien fournie (195 documentations), elle ne contient pas la documentation d'Aurelia (Aurelia.io).
Cependant, il existe un moyen de créer sa propre documentation Aurelia pour Zeal.

Lire la suite

Cerbot, Letsencrypt ne trouve pas votre domaine, vhost. Erreur: unable to find a vhost

Lorsque vous essayez de créer ou de renouveler un certificat gratuit avec Cerbot ou Lets’encrypt, sur un vhost Apache comportant déjà une partie SSL. Vous obtenez l’erreur « unable to find a vhost » indiquant qu’il ne trouve pas le vhost.

Par exemple avec le fichier vhost suivant :

<VirtualHost *:80>
    ServerName piradix.com

</VirtualHost>
<VirtualHost *:443>
    ServerName piradix.com

    SSLEngine on
    SSLCertificateFile /etc/myautoCertificat/piradix.com-cert.pem
    SSLCertificateKeyFile /etc/myautoCertificat/piradix.com-privkey.pem
    SSLCertificateChainFile /etc/myautoCertificat/piradix.com-chain.pem
</VirtualHost>

avec la ligne suivant

./certbot-auto --apache -d piradix.com

Cerbot ne trouvera pas le vhost « piradix.com ». Pour le faire reconnaitre, soit vous créer deux fichiers, un pour le port 80 et un pour le port ssl 443.
Ou alors vous insérez deux lignes dans votre fichier de configuration initial 😉 :

  • Ajouter la ligne suivante avant la ligne <VirtualHost *:443>
<IfModule mod_ssl.c>
  • Ajouter la ligne suivante aprèsla ligne </VirtualHost>
</IfModule>

Ce qui donne :

<VirtualHost *:80>
    ServerName piradix.com

</VirtualHost>
<IfModule mod_ssl.c>
<VirtualHost *:443>
    ServerName piradix.com

    SSLEngine on
    SSLCertificateFile /etc/myautoCertificat/piradix.com-cert.pem
    SSLCertificateKeyFile /etc/myautoCertificat/piradix.com-privkey.pem
    SSLCertificateChainFile /etc/myautoCertificat/piradix.com-chain.pem
</VirtualHost>
</IfModule>

Maintenant si vous lancer la ligne de commande cerbot-auto, Cerbot reconnaitra votre vhost !

Bonne chance …

Le site de Cerbot est sur : https://certbot.eff.org/

Le site de Lets’encrypt est sur : https://letsencrypt.org/

 

Mise à jour de Firefox : v47

Firefox 48 vient de sortir. Pas de grand changement pour l’utilisateur lambda (hormis sur la vidéo), quelqu’un au niveau développeur.

Changements au niveau de l’interface et de la navigation

  • incorporation de module vidéo CDM de google. ce dernier vous permet de la lecture des vidéos cryptés d’Amazone prenium
  • lecture des Vidéos Youtube en HTML 5 si Flash n’est pas installé
  • activation du code vp9 (Compression vidéo de Google) si votre ordinateur est assez puissant
  • Ajout de la langue Latgalu (LTG)
  • Possibilité de désactiver des caches lorsque vous utilisez le bouton « retour » sur le protocole HTTPS
  • voir et rechercher les onglets ouverts à partir de votre smartphone ou un autre ordinateur dans une barre latérale
  • problème de sécurité résolut.
  • Suppression de la « clique pour activer » du plug-in liste blanche a été supprimée.
  • ajout de « about:performance » pour vous permettre de voir les performances générales des pages web et des modules

Changement au niveau développement

  • Suppression de la bibliothèque FULL (Firefox User Library Extension)
  • suppression de la vue 3D du débogueur. Je la trouvai utile dans certain cas, mais pas facile d’accès, dommage ;-(
    Le plug-in « Tile 3D » peut le remplacer si Firefox ne fonction pas en multiprocesseur
  • amélioration du débogage de : « Service Workers » et « Push API »
  • ajout d’un champ « Agent utilisateur » permettant de changé le nom de l’agent dans la « vue adaptative » du débogueur
    Vue adaptative
  • la console accepte l’écriture de code sur plusieurs lignes
  • Possibilité de filtrer les données affichées par l’outil Stockage
    Stockage

Toutes les nouveautés sont répertoriées (Anglais) ici :

https://developer.mozilla.org/en-US/Firefox/Releases/47#Changes_for_Web_developers

Outils de test des performances d’un site web sur PC et appareils mobiles

Lors vous créer un site web se dernier ne s'affiche pas de la même façon sur un PC que sur un téléphone et il met plus ou moins de temps à se charger suivant le périphérique utilisé. Il faut donc le tester sur différent appareil, ce qui prend du temps. Les développeurs de MobiReady nous ont mis à disposition un outil web (en anglais) qui ...

Lire la suite