Auteur : piradix

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": "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 .

 

 

 

Activer en permanence, bloquer la touche « Fn » des claviers « Microsoft Sculpt Mobile Keyboard »

Si comme moi vous avez acheté un clavier « Microsoft Sculpt Mobile Keyboard« , vous avez remarquer que les touches fonctions « F1 » à « F12 » n’étaient accessibles que si vous appuyer sur la touche « Fn« . Cette inversion des touches fonctions n’est pas très pratique, d’autant plus que les touches définies par défaut ne sont pas souvent utilisées, voire inutile.

De plus la documentation du clavier est tellement succincte que je ne sais pas à quoi servent les touches bleues se trouvant à la place des touches F10 à F12.

Donc , comment revenir à l’usage normal des touches F1 à F12 ? La doc n’indiquant rien  !

La solution est d’appuyer simultanément sur les deux touches « Ctrl » (droite et gauche) + la touche « Fn« . Cella aura pour effet de passer le clavier dans un mode ou la touche Fn est continuellement appuyé. Ce qui vous permettra d’accéder aux touches F1 à F12 avec un seule doit 😛

Pour débloquer l’appui continuel sur la touche Fn , appuyer simultanément sur les touche « Fn » et Ctrl de droite.

Noter : sur d’autres claviers la combinaison de touche est différente :

  • Ctrl+Alt+Fn
  • Fn + Verr-Maj
  • Ctrl(gauche) + Ctrl(droite) + Fn
    Pour inverser (état originel) Ctrl (droite) + Fn

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.

 

 

 

Windows 10 Creator : nouveautés de Bash Unbutu 16.04 …

Ce mardi 11/04/2017 Microsoft va publier la mise à jour « Windows 10 Creator« .
Elle contient des améliorations du logiciel de dessin Paint, un nouveau logiciel pour la 3D Paint 3D, plus de contrôle sur les données de télémétrie et sur le mécanisme de mise jour automatique. Mais quand est-il du Bash Ubuntu ?

Note: les :mrgreen: signale une mise à jour (19/04/2017) récente de cet article

Microsoft et Ubuntu ont corrigé beaucoup de bogues et ont aussi implémenté des fonctions Linux manquantes :

  • Passage à Ubuntu 16.04. Si vous avez déjà installé le Bash, vous devez lancer un « sudo do-release-upgrade » depuis le Bash. Sinon  désinstaller la Bash puis réinstaller en tapant les deux commandes suivantes :
    C:\> lxrun /uninstall /full /y
    ....
    C:\> lxrun /install
  • possibilité de lancer le bash avec une commande :
    bash.exe -c <ma commande à lancer>
  • possibilité de lancer directement une application Windows. Il faut taper son nom complet avec le « .exe ».
    Par exemple dans le bash, taper « notp » suivit de la touche « tab » (oui, la complétion fonctionne), il vous propose « notepad.exe », appuyer sur « entrée« , Notepad se lancera 🙂
  • Implémentation de la fonction système « timer-create ». Elle est utilisée par Ruby ce qui empêchait certains des programmes implémentés en Ruby de fonctionner (ex Pandoc) sans devoir utiliser un artifice.  Maintenant sans rien faire Pandoc fonctionne ! voir l’article : Convertir un document Asciidoc en OpenDocument (ODF, LibreOffice) avec Pandoc
  • maintenant, les commandes ifconfig, ping, nslookup, whois fonctionnent parfaitement  😉
  • :mrgreen: La notification des changements fichiers fonctionne . Cella permet une meilleure intégration des NodeJs, Ruby, Python avec les « watch« .
  • :mrgreen: meilleure gestion des sockets, datagram, IPV6, serial etc..
  • :mrgreen: meilleure gestion des commandes vidéo (donc le mode couleur 24-bit) de la console « VT ». Ainsi une console peut être partagée en plusieurs écrans. Ainsi Tmux, Emacs, vim, midnight commander sont mieux intégrés …
  • :mrgreen: meilleure intégration de la gestion de la souris .
  • :mrgreen: possibilité de faire des liens « link » sans devoir passer par une augmentation de privilège (UAC) de Windows.
  • Et l’affichage des fichiers de processus Linux « /proc » fonctionne de mieux en mieux. Essayer les commandes suivantes :
    • more /proc/1/net/ipv6_route
    • more /proc/sys/net/core/somaxconn
    • more /proc/version_signature
    • more /proc/sys/kernel/sem

:mrgreen: Ubuntu Bash est très performant, sauf au niveau accès disque, car il utilise une surcouche par dessus NFS. Vous trouverez plus d’information sur la page suivante (Anglais) :

https://www.phoronix.com/scan.php?page=article&item=windows-10-lxcore&num=1

 

d

 

Mise à jour de Eclipse Neon.3

La fondation Eclipse viens de sortie (14 mars 2074) une nouvelle version d’Eclipse : Neon.3.

Si vous cherchez des nouveautés, c’est raté. Cette version contient que des rectificatifs, pas de changement notable.

Mais j’ai l’impression que la boite de dialogue d’Eclipse Market s’affiche plus rapidement ….

Windows 10 (Vista, 7 et 8) Fichiers fantômes, fichier supprimé mais toujours présent en cache ?

Saviez-vous que Windows 10 (de Vista à 10) géré des fichiers caches/fantômes de vos applications ?
J'ai une vieille application, créer sous Windows XP qui est capable de se mettre à jour automatiquement (sans passer par un kit de mise à jour). Voulant lui mettre à un jour un de ses jars (pour tester), je le copie par-dessus celui existant. Je la relance et là je m’aperçois qu'elle fonctionne toujours avec l'ancien jar. je réitéré l'opération, rebelote, même chose.
Je décide donc de supprimer le jar pour rendre non fonctionnelle mon application afin de bien vérifier que ce n'est pas une erreur de ma part. Je lance l'application, elle fonctionne toujours !
Mon jar est un fichier fantôme (ou caché par le système ) ?

Lire la suite