var Phenix = function () {

Troll du Web depuis 1996

Angular (2+), jQuery et jQuery-ui sont sur un bateau

28 janvier 2019 par Phenix dans Web dev

Notes

jQuery a pas mal mauvaise presse et certain vont jusqu’à déclarer leur code « jQuery free », comme si ce framework était pestiféré.
Je trouve cependant que jQuery a quelques point fort qui sont toujours d’actualité :

  • Beaucoup de plugins et librairies qui souvent ne sont pas « jQuery free ».
  • Beaucoup de plugins et librairies qui sont souvent très bien testées, débuggées et très bien maintenues.

Alors c’est clair que pour une conférence, dire qu’on utilise jQuery, c’est « has been ». Par contre, si on a envie d’avoir quelque chose de stable qui fait bien le boulot, l’écosystème de jQuery conviens très bien !

Dans le cas qui m’occupe j’avais besoin d’un « drag » et d’un « drop » d’éléments qui serve à autre chose qu’ordonné une liste.
Je n’ai trouvé aucun module qui s’occupe de cela. Tous ceux que j’ai trouvé (en tête, le drag&drop du CDK d’angular) s’intéresse uniquement au fait de trier des listes... Et ce n’est absolument pas ce dont j’ai besoin...

Bref, tout cela pour dire que je me suis tourné vers... jQuery-ui draggable et droppable.

Installation

Pour installer jQuery-ui avec npm, il faut utiliser le paquet jquery-ui-dist. Je ne sais pas à quoi sert le paquet jQuery-ui, mais ce n’est clairement pas le plus simple à utiliser.

  1. npm install jquery jquery-ui-dist
  2. npm install --save @types/jquery @types/jqueryui

Dans le angular.json, dans la partie scripts on ajoute les librairies :

  1.               "./node_modules/jquery/dist/jquery.min.js",
  2.               "./node_modules/jquery-ui-dist/jquery-ui.js"

Au début du composant Angular, on va déclarer jQuery (mais en dehors du @Component) :

  1. declare var $: any;

On peut maintenant utiliser les plugins jQuery-ui dans les composants Angular. Il semble recommandé de le faire dans le hook AfterViewInit.

  1.   ngAfterViewInit() {
  2.     $(this.thumb.nativeElement).draggable({
  3.       revert: true,
  4.       zIndex: 100
  5.     });
  6.  
  7.     $(this.thumb.nativeElement).droppable({
  8.       drop: (event, ui) => {
  9.         this.documentService.combine([this.document.id, draggable_id]);
  10.       }
  11.     });
  12.   }

Binding datas

Pour ajouter des données aux éléments « draggés », une petite pirouette :

  1. $(this.thumb.nativeElement).data('document', this.document);

Que l’on récupère ensuite dans l’élément ui.draggable :

  1.     $(this.thumb.nativeElement).droppable({
  2.       drop: (event, ui) => {
  3.         const draggable = ui.draggable.data('document');
  4.         this.documentService.combine([this.document.id, draggable.id]);
  5.       }
  6.     });

Si Pitivi ne lit pas les MP4

Ubuntu 16.04 et Linux Mint 18

28 mai 2018 par Phenix dans GNU/Linux

Dans le cas ou vous n’arrivez pas à importer des fichiers MP4 dans Pitivi :

  1. gst-resource-error-quark: Stream file:///home/arthur/brique_lego.mp4 discovering failed

Il faut simplement installer les codes manquant :

  1. sudo apt-get install gstreamer1.0-libav

Reformater les fichiers XML via Emacs et Xmllint

24 mai 2018 par Phenix dans Emacs/Spacemacs

Souvent on reçois des fichiers XML sans formatage, car créer et destinés à des machines.
Il y a un outil sympa, en CLI : xmllint. Pour l’installer :

  1. sudo apt install libxml2-utils

Ensuite, une petite fonction Emacs qui va bien :

  1.   (defun xml-format ()
  2.     "Format an XML buffer with `xmllint'."
  3.     (interactive)
  4.     (shell-command-on-region (point-min) (point-max)
  5.                              "xmllint -format -"
  6.                              (current-buffer) t
  7.                              "*Xmllint Error Buffer*" t))
Voir en ligne : Format XML in Emacs – manu.el

Lire un fichier CSV avec Laravel

28 mars 2018 par Phenix dans Web dev

J’avais besoin de lire un fichier CSV pour remplir une base de donnée Laravel. C’est assez simple à faire car il y a une super lib pour gérer le CSV :

  1. composer require League/csv

On lit le CSV et on boucle sur chaque élément. Après on en fait ce qu’on veut :) !

  1. <?php
  2. use Illuminate\Database\Seeder;
  3. use Illuminate\Support\Collection;
  4. use Illuminate\Support\Facades\Log;
  5. use League\Csv\Reader;
  6. use League\Csv\Statement;
  7.  
  8. class commune extends Seeder
  9. {
  10.     /**
  11.      * Run the database seeds.
  12.      *
  13.      * @return void
  14.      */
  15.     public function run()
  16.     {
  17.         // Remplir la base de donnée avec les communes du fichier CSV
  18.  
  19.         // Lire le fichier csv
  20.         $csv = Reader::createFromPath(storage_path('app/communes_belges.csv'));
  21.         $csv->setHeaderOffset(0);
  22.  
  23.         // Boucler sur les données du fichier csv
  24.         $records = (new Statement())->process($csv);
  25.         foreach ($records->getRecords() as $record) {
  26.             var_dump($record);
  27.         }
  28.     }
  29. }

Contourner un proxy filtrant avec PuTTY et Firefox

23 février 2018 par Phenix dans Trucs et astuces

Je ne suis pas un professionnel de la sécurité, je ne sais pas a quel point cette méthode est fiable, ni si elle fonctionnera aussi pour vous. Il est également probable que le règlement de votre institution vous interdise de contourner les mesures de sécurités mises en place.

Utilisation à vos risque et péril !

Il m’arrive régulièrement de me retrouver dans un environnement web bien sale, avec un proxy qui filtre le contenu et bloque l’accès a certain sites.
Comme tous ces outils sont bien bêtes et bloquent souvent des sites légitimes, et que je avais bien le temps, je me suis amusé à le contourner.

Avoir une connexion la maison

La première étape consiste à avoir un accès « outdoor » qui servira de relai. Ici j’utilise mon ordinateur à la maison.
Comme beaucoup, j’ai un adresse IP dynamique, problème que j’ai corrigé en utilisant le service nsupdate.info. Si le proxy bloque nsupdate.info, il faudra partir chaque matin avec votre IP sous le bras...
Si vous avez un nom de domaine chez OVH, vous pouvez vous en servir aussi.

Ensuite, il suffit de connecter PuTTy sur cette machine. Dans le cas où le proxy n’accepte pas les connexions SSH sur le port 22, changer le port SSH sur votre machine pour utiliser le même que celui du proxy (8080 par exemple).
Pour cela j’ai utilisé mon téléphone et ma connexion 4G (oui, oui :->) et j’ai modifié la configuration SSH.

Configurer l’hôte dans PuTTY

Il faut aussi ajouter le proxy dans la configuration PuTTy.

Configurer le proxy dans PuTTY

Ouvrir un tunnel SSH

On va ensuite ouvrir un tunnel SSH pour y faire passer le trafic de notre navigateur web. Ce qui circulera entre le proxy et vous sera complètement illisible pour le premier proxy, car protégé par le tunnel SSH.

Ouvrir un tunnel SSH

Dans « port source » placé le numéro de port du proxy (ici 8080). Coché aussi « dynamique ».

Brancher Firefox sur le tunnel.

Brancher Firefox sur PuTTY

On branche ensuite Firefox sur ce nouveau « proxy ». Placer « localhost » dans le SOCKS et coché bien SOCK v5. Coché également la case « Proxy DNS when using SOCKS v5 ».

Il reste à vérifier que vous avez accès à internet :).