Étiquette : Développement

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%;
}

 

 

 

 

 

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 .

 

 

 

Les plugins de l’éditeur Atom à posséder

Voici une liste de 6 plug-ins Atom à posséder :
Atom-beautify : formateur et coloration syntaxique de code HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL et plus…

Minimap : affiche une vue condensée de votre fichier (sur la gauche de l’image si dessous). Cella permet d’avoir une vue d’ensemble, d’améliorer la navigation.

Highlight Selected : comme sous Notepad++, lorsque vous sélectionnez un mot, ce plug-in sélectionne tous les mots identiques. Si vous utilisez Minimap, installer aussi minimap-highlight-selected pour l’avoir dans sa vue.

Autoclose HTML : ferme automatiquement les tags HTML.

Atomic-emacs  : affecte les touches Emacs à Atom . Exemple : Ctrl+A <=> début de ligne, etc.

Activate Power Mode : un plugin pour ce faire plaisir en donnant de l’effet lorsque vous tapez du code.

 

 

 

Convertir un document Asciidoc en PDF : Asciidoc-pdf

Sous Linux et Windows 10, il existe plusieurs outils de conversions d'un document Asciidoc en PDF.

Le plus simple est d'utiliser l'éditeur AsciidocFX qui à un icône pour sauver en PDF. Mais vous ne pouvez pas automatiser la tâche au travers de ligne de commande.
Et la configuration du format du fichier de sortie n'est pas du tout aisée (fichier XML, manque de documentation).

Une autre solution est d'installer "Asciidoctor PDF" ...

Lire la suite

Un Terminal Bash sous Eclipse Windows 10 Pro

Depuis que Microsoft à incorporé un Bash (Linux Ubuntu) nativement dans la version Pro de Windows 10, il nous manquait son intégration dans Eclipse. Problème résolu grâce au plug-in « TM Terminal« .

Le plug-in « Tm Terminal » de la fondation Eclipse permet de lancer dans une vue avec un terminal de votre choix :

  • ligne de commande Windows « cmd.exe »
  • Bash GIT
  • et tout autre terminal que vous configurez dont le Bash (Ubuntu) de Windows 10 :

Vous le trouverez chez Eclipse Market :

Par défaut le plug-in n’est pas configuré pour le « Bash Ubuntu Windows« , il faut l’ajouter.

Pour installer le plug-in déplacer le l’icône suivant dans Eclipse et suivez les instructions :
Drag to your running Eclipse workspace.

  • une fois le plug-in installer aller dans le menu « Préférence/Terminal » :
  • cliquez sur « Add »
  • écrivez « Bash » dans le chemin « Name »
  • dans le champ « Path » saisissez « C:\Windows\System32\bash.exe »
  • puis cliquez sur « Ok »

Pour lancer le terminal taper sur « Ctrl+Alt+Shitf+T » puis choisissez « Bash » :

Et voilà :

 

 

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

Éditeurs Asciidoc

Asciidoc est un langage de formatage de texte (comme markdown), permettant de générer des formats de fichier html, pdf, MS word,epub, docbook, tex.Un de ces objectifs est d’être lisible, même sans visionneuse. Un simple éditeur texte suffit pour l’utiliser. Mais un éditeur ayant des fonctions avancé (syntaxe colorée en autre) est un plus.

Pour ma part je l’utilise, pour écrire des notes, et de la documentation applicatives. À ce titre j’utilise plusieurs éditeurs.

Les éditeurs :

AsciidoFX (Linux, Windows, OsX, Java)

Il peut être considéré comme l’éditeur AsciiDoc.
asciidocFX
Il est écrit en Java et peut donc fonctionner sur tout système d’exploitation (Windows, Mac, Linux, …) supportant Java 8 .

Ses particularités sont

  • affiche une prévisualisation HTML en temps réel.
  • Coloration syntaxique.
  • Icônes de raccourcie tel que gras, tableau…
  • Affiche la « table des matières » (« outline ») de votre document sur la gauche. Très utile pour se repérer.
  • ergonome
  • agréable
  • possibilité de modifier les thèmes de génération des documents
  • Supporte d’office les formats de sortie HTML,PDF,DocBook, odt (Libre office), Ebook, Un clique sur un bouton et hop, vous pouvez donner vos notes, doc à vos clients ou collaborateurs.
  • supporte d’autres formats dont markdown
  • Libre d’usage. Un don est apprécié.

Deux petites remarques :

  • il est en Anglais
  • Et a mon gout il est un peut lent a ce lancer (même sur un config puissant, peut être à cause de l’antivirus), il met 6 secondes.
    Mais c’est l’éditeur que j’utilise le plus.

Site web (Anglais) : http://asciidocfx.com/

Sources : https://github.com/asciidocfx

NotePad++ (Windows)

C’est un éditeur de texte pur.
Notepad++
Il n’est pas dédié à Asciidoc et ne possède pas de mode de prévisualisation .
Localisé en Français et autre langue.
Fonctionne que sous Windows. Sources accessible, libre d’usage, Licence GNU.
Son avantage est sa légèreté et sa rapidité (c’est le meilleur de tous les éditeurs à ce niveau).
Il est possible de lui adjoindre la syntaxe colorée en important (menu « Langage/Définissez votre langage », puis bouton « importer » ) le fichier de définition suivant :

Si vous ne le trouvez pas, allez voir sur :

Sites web (français,anglais,chinois): https://notepad-plus-plus.org/

Emacs (Linux, Windows, OsX)

Éditeur Unix apprécier de ces détracteurs. En général ceux qui aime Emacs, n’aiment pas VI/VIM.
C’est l’éditeur ultime. Il possède le mode d’enregistrement de macro ultime (c’est mon avis).
En Anglais et fonctionne sous Windows, Mac, Linux. Sources accessible, libre d’usage, Licence GNU.
Il possède un mode AsciiDoc que vous trouverez sur le site :

https://www.emacswiki.org/emacs/AsciiDoc

VIM (Linux, Windows, OsX)

Éditeur Unix lège apprécier de ces détracteurs. Un peu dure à utiliser les premières fois.
En Anglais et fonctionne sous Windows, Mac, Linux. Sources accessible, libre d’usage, Licence GNU.
Il possède un mode AsciiDoc que vous trouverez sur le site :

gedit (Linux)

Éditeur texte sous Linux.
En anglais et fonctionne sous Linux. Sources accessible, libre d’usage, Licence GNU.
Il est possible de lui adjoindre la syntaxe colorée et un mode de prévisualisation :

AsciidocLive

C’est un site web (Anglais) qui propose un éditeur en ligne temps réel, avec prévisualisation.

asciidocLive

Site web : https://asciidoclive.com/edit/scratch/1

Ressources

Vous trouverez le convertisseur AsciiDoc ainsi que sa documentation anglaise sur le site :

Site web : http://www.methods.co.nz/asciidoc/