var Phenix = () => {

I manage my own little VPS, it host multiple little web site and service.
I wanted to set some headers by default on all the website so I edited the /etc/apache2/apache2.conf file and added these:

# Opt out google FLOC
# https://paramdeo.com/blog/opting-your-website-out-of-googles-floc-network
<IfModule mod_headers.c>
  Header always set Permissions-Policy: interest-cohort=()
</IfModule>

# Set cache for common files
<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|js|css|eot|ttf|woff|woff2|webp)$">
  Header set Cache-Control "max-age=63072000, public"
</FilesMatch>

This will be set for all the website hosted on this server. They can be overrited if needed.

Vous pouvez passer une variable COMPOSER_AUTH en secret dans un votre Gitlab pour vous authentifier ! Il suffit d’y mettre directement le JSON.

La doc est là : https://getcomposer.org/doc/03-cli.md#composer-auth

Lorsque l’on installe mysql 5.7, l’utilisateur root ne peux pas ce connecter à la machine. C’est normal bien entendu.

On peux cependant corriger cela :

Pour ce connecter à Mysql : sudo mysql -u root

Ensuite, on utilise autorise root a ce connecter :

USE mysql;
UPDATE user SET plugin='mysql_native_password' WHERE User='root';
SET PASSWORD FOR root@localhost=PASSWORD('root');
GRANT ALL PRIVILEGES ON *.* TO root@localhost IDENTIFIED BY 'root' WITH GRANT OPTION;
flush privileges;

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.

npm install jquery jquery-ui-dist
npm install --save @types/jquery @types/jqueryui

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

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

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

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.

  ngAfterViewInit() {
    $(this.thumb.nativeElement).draggable({
      revert: true,
      zIndex: 100
    });

    $(this.thumb.nativeElement).droppable({
      drop: (event, ui) => {
        this.documentService.combine([this.document.id, draggable_id]);
      }
    });
  }

Binding datas

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

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

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

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

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 :

composer require League/csv

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

<?php
use Illuminate\Database\Seeder;
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\Log;
use League\Csv\Reader;
use League\Csv\Statement;

class commune extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        // Remplir la base de donnée avec les communes du fichier CSV

        // Lire le fichier csv
        $csv = Reader::createFromPath(storage_path('app/communes_belges.csv'));
        $csv->setHeaderOffset(0);

        // Boucler sur les données du fichier csv
        $records = (new Statement())->process($csv);
        foreach ($records->getRecords() as $record) {
            var_dump($record);
        }
    }
}

Voici une petite astuce pour avoir une marge, entre le “haut du browser” et l’emplacement réel de l’ancres, lorsque l’on clic sur une ancre.

/**
 * Appliquer une marge sur les ancres HTML c'est plus
 * ergonomique.
 */
:target {
    border-top: 75px solid transparent;
    margin: -75px 0 0;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    outline: none; /* Supprimer la outline disgracieuse de Chrome */
}

:target est une sélécteur css bien supporté qui cible toutes les ancres. Du coup on lui ajouter une fausse marge. L’avantage ce code, c’est qu’il va fonctionner même si l’ancre est dans un texte. Ce que n’est pas le cas de la majorité des techniques à base de display: block; et de :before.

Testé sous Ubuntu 16.04 ou LinuxMint 18

Petite astuce pour avoir un serveur de mail local, qui renvoie tous les mails envoyés par PHP (ou autre) vers username@localhost.

La première chose est d’installer le serveur d’envoi, postfix :

sudo apt install postfix

Il est possible qu’il soit déjà installé, mais pas spécialement bien configurer, pour être certain, il vaut mieux le reconfigurer :

sudo dpkg-reconfigure postfix

Sélectionnez l’option Local uniquement et laisser toutes les autres options par défauts.

Ensuite, j’ai fait une petite page php de test :

<?php
mail('username@localhost', 'test', 'test');

L’envoie du mail devrait alors créer un fichier dans /var/mail/username. Vérifiez que tout ce passe bien :

more /var/mail/username

Vous devriez avoir quelques choses comme ceci dans votre terminal :

From phenix@Thanatos.localdomain  Thu Jun  1 17:23:07 2017
Return-Path: <phenix@Thanatos.localdomain>
X-Original-To: phenix@localhost
Delivered-To: phenix@localhost.localdomain
Received: by Thanatos.localdomain (Postfix, from userid 1000)
    id CF2F385652; Thu,  1 Jun 2017 17:23:07 +0200 (CEST)
To: phenix@localhost.localdomain
Subject: test
X-PHP-Originating-Script: 1000:test_mail_local.php
Message-Id: <20170601152307.CF2F385652@Thanatos.localdomain>
Date: Thu,  1 Jun 2017 17:23:07 +0200 (CEST)
From: phenix@Thanatos.localdomain (phenix)

test

J’ai laissé les valeurs de ma machine, ce sera sans doute différent sur la vôtre.

On peut ensuite configurer Thunderbird pour lire cette boite mail. J’utilise la version 52.1.1.

Fichier > Nouveau > Autres comptes…

Configurez une Unix Mailspool (Movemail).

Voilà, Thunderbird va lire la boite locale.

Rediriger tous les mails vers usename@local

L’idée de base est de recevoir tous les mails envoyés par le serveur dans cette boite, afin de débugger facilement.

On va éditer la configuration de postfix dans le fichier /etc/postfix/main.cf pour y ajouter :

virtual_alias_maps = pcre:/etc/postfix/virtual

Créer ensuite le fichier /etc/postfix/virtual et placez y le code suivant :

/.*@.*/ username

Il faudra également installer le paquet postfix-pcre :

sudo apt install postfix-pcre

Voilà, tout le trafic mail du serveur va aller dans votre boîte mail locale ! Beaucoup plus pratique pour débugger l’envoie de mail de vos applications :) !

En utilisant Git SVN, j’ai découvert un effet de bord assez indésirable : lorsque l’on utilise fait un dcommit pour envoyer les modifications sur le serveur, il envoie toutes les branches.

C’est très gênant, surtout si vous avez plusieurs choses en cours, et quelle pourrait casser votre application.

Heureusement, il y a une solution : lorsque vous clonez, il faut préciser le dossier du trunk :

git svn clone -T trunk http://example.com/PROJECT

Git svn fera alors le lien master = trunk et vos autres branches seront tranquilles.