Config Docker simple

Plutôt que de brancher une nouvelle machine (même petite comme un Raspberry), j’ai préféré intégrer ça à mon serveur hébergeant la plupart de mes services sous Docker.

À ce sujet, la doc de Pi-hole fournit un docker-compose.yml de base déjà bien fonctionnel. Je n’ai eu qu’à commenter les lignes qui ne me concernent pas et à adapter les ports de l’interface web (mais en gardant le port 53 pour le DNS) et le mot de passe de l’interface web.

Config via l’interface d’admin

Une fois lancé, l’accès à l’interface d’admin m’a juste servi à configurer : - le serveur DNS upstream (qui sert de source à ce serveur Pi-hole) : j’ai choisis dnsforge.de - ajouter mes sous-domaine de mon serveur local en tant que “Private DNS hostname” - ajouter la liste de blocage fournie par Seb Sauvage comme liste source pour les blocages effectués par le Pi-hole

Config de la box

Il ne me restait plus qu’à indiquer à ma box de ne plus fournir via DHCP son propre serveur DNS en premier, mais de pointer sur l’IP locale du serveur hébergeant le Pi-hole.

J’ai tout de même gardé le DNS de la box en DNS secondaire au cas où mon serveur serait indisponible.

“Keep blocking ads and surf on!”

callable : rappel

Pour rappel, il existe 4 cas principaux de callable

// fonction classique
function action1() {
    return 'résultat 1';
}
// callable définie par chaîne de caractère
$callback1 = 'action1';

// méthodes statique et non statique
class Controller {
    public static function action2()
    {
        return 'résultat 2';
    }

    public function action3()
    {
        return 'résultat 3';
    }
}

// méthode statique : tableau avec nom de classe et nom de méthode
$callback2 = [Controller::class, 'action2'];

// méthode non statique : tableau avec instance de classe et nom de méthode
$callback3 = [new Controller(), 'action3'];

// fonction fléchée (anonyme)
$callback4 = (fn() => 'résultat 4');

Donc un callable peut être une simple chaîne (fonction classique), un tableau (méthode de classe, statique ou non) ou directement une fonction fléchée (fonction anonyme).

Router avec callable : blocage

Mon intention était de transmettre un argument callable au constructeur de la route et que celle-ci se débrouille plus tard pour le faire exécuter sans qu’on ait à se soucier du type de callable dont il s’agit.

Ma première approche naïve a rapidement échoué :

class Route {
    public callable $action;

    public function __construct(callable $action)
    {
        $this->action = $action);
    }

    public function render()
    {
        return ($this->action)();
    }
}

Mais ça donne l’erreur Property cannot have type callable. Une recherche rapide m’amène rapidement sur un stackoverflow puis php.net.

Conclusion : des soucis de portée interdisent la mémorisation de callable dans un attribut de classe. Ils suggèrent à la place d’encapsuler ça dans une Closure pour rendre cela indépendant de toute notion de portée.

Router avec Closure : et ça marche !

On remplace le type de l’attribut par Closure, mais on garde toujours un callable en argument du constructeur. Il suffit juste de convertir ce callable en Closure avant de le mémoriser :

class Route {
    public Closure $action;

    public function __construct(callable $action)
    {
        $this->action = Closure::fromCallable($action);
    }

    public function render()
    {
        return ($this->action)();
    }
}

J’ai galéré à faire fonctionner ça au départ, puisque les conseils de la doc sont très généraux et ne donnent aucun exemple complet pour gérer ce cas. Au début, à la place de fromCallable, j’écrivais un truc du genre $this->action = $action(...);, qui semblait marcher, mais je ne suis pas sûr de ce que ça impliquait.

Et puis j’ai tenté l’exécution sous forme de $this->action->call($this), mais la transimssion d’un objet à ce moment-là ne fonctionnait pas (clairement, je ne maîtrise pas encore les Closure).

Et au final, ça marche avec nos 4 différents cas :

$route1 = new Route('action1');
var_dump($route1->render());

$route2 = new Route([Controller::class, 'action2']);
var_dump($route2->render());

$ctrl = new Controller();
$route3 = new Route([$ctrl, 'action3']);
var_dump($route3->render());

$route4 = new Route(fn() => 'action4');
var_dump($route4->render());

Conclusion

Je suis assez content du résultat, c’est élégant et polyvalent.

Cependant, quid des risques de copies d’éléments contextuels à la création de Closure ? Je soupçonne que même dans le cas de l’instance de classe, c’est juste une référence qui est transmise, donc a priori c’est OK. Seul l’usage de variables globales dans ces fonctions/méthodes seraient un souci (mais comme c’est à proscrire en général…).

Je n’ai finalement pas retenu cette jolie solution malgré tout puisque je tenais à éviter d’instancier tous les contrôleurs lors des définitions de route (puisqu’un seul suffira). Une solution à base de lazy loading serait plus pertinente, mais incompatible avec les callable par nature (puisqu’il faut transmettre le nom de classe plutôt qu’une instance, ce qui correspond à un usage de méthode statique).

Mais je me suis dit que ça serait sympa de partager le résultat de cette petite expérience.

“Keep routing and call on!”

Pourquoi ?

Ok, vous allez me dire :

“Mais Yosko, pourquoi tu garde des milliers d’onglets ouverts ? C’est complètement con !”

Et vous aurez sans doute raison !

Mais c’est dans ce bordel organisé que je m’y retrouve. J’aime ouvrir un onglet et le retrouver plus tard (des fois des semaines plus tard) pour m’intéresser à ce contenu quand j’en ai enfin le temps ou la motivation. J’aime aussi garder tous les onglets d’une recherche ouverts pour reprendre ce travail de longue haleine précédemment interrompu par d’autres impératifs.

Bref, la plupart de mes onglets existent mais ne sont pas chargés car ils ont été ouverts il y a un certain temps.

Objectif et approche

J’ai donc décidé de mettre en place mes propres backups du sessionstore de Firefox. Dans l’idée, j’aimerais garder des sauvegardes des derniers jours, semaines et mois, juste au cas où.

Après différentes réflexions autour de rsync ou d’un simple script bash à base de cp + find et des recherches me menant sur borgbackup (dont sebsauvage ne cesse de nous rebattre les oreilles) ou restic, j’ai finalement jeté mon dévolu sur rsnapshot.

C’est un wrapper en Perl pour rsync, focalisé sur la gestion de sauvegardes par intervals (jours, semaines, mois) et leur nettoyage.

Configurer et tester rsnapshot

J’ai d’abord installé rsnapshot :

sudo apt install rsnapshot

Puis créé la configuration suivante dans ~/.config/rsnapshot/rsnapshot.conf pour définir son comportement lorsqu’il tournera :

config_version  1.2
cmd_rsync       /usr/bin/rsync
snapshot_root   /home/<user>/rsnapshot/
retain  daily   3
retain  weekly  3
retain  monthly 3
rsync_long_args --delete --numeric-ids --relative --delete-excluded
backup  /home/<user>/.mozilla/firefox/./<profile>/sessionstore-backups/ firefox/

Le principe est simple : à chaque exécution, il vérifiera s’il doit effectuer un backup quotidien, hebdo ou mensuel, et s’il doit supprimer d’anciens backups. Les éléments sauvegarder sont les fichiers du dossier .../sessionstore-backups/, donc les backups de session de Firefox.

Pensez à remplacer les éléments suivants : - les 2 mentions de <user> par votre nom d’utilisateur - la mention à <profile> par le nom du dossier de votre profil Firefox

Pour tester à la main en one shot :

rsnapshot -c ~/.config/rsnapshot/rsnapshot.conf daily

Automatiser l’appel à rsnapshot

Reste à automatiser l’appel à rsnapshot. J’ai choisi de le faire avec systemd. J’ai créé le fichier ~/.config/systemd/user/rsnapshot-daily.service avec dedans :

[Unit]
Description=User rsnapshot daily backup
[Service]
ExecStart=/usr/bin/rsnapshot -c /home/yjo/.config/rsnapshot/rsnapshot.conf daily

Il ne me restait plus qu’à démarrer le service avec mon utilisateur :

systemctl --user start rsnapshot-daily.service

“Keep calm and backup EVERYTHING!”

Besoin

Si sebsauvage évoque une solution en RAM (dont le contenu est supprimé au redémarrage), je tenais plutôt à un comportement où les fichiers sont gardés sur le disque pendant quelques jours — principe proche de /tmp (10 jours) et /var/tmp (30 jours).

J’ai surtout dans l’idée de remplacer le dossier Downloads/Téléchargement de mon home par ce dossier temporaires. J’aurais simplement pu mettre en place un processus de nettoyage sur ces dossiers existants, mais un nom mentionnant explicitement le côté temporaire me semblait préférable.

Pourquoi ne pas utiliser directement /tmp ? Il me semblait préférable de rester sur des dossiers spécifiques à chaque utilisateur, donc dans leur home : c’est leurs téléchargements personnels et leurs fichiers de travail.

Fonctionnalités

Fonctionnalités générales :

• créé le dossier /home/$USER/tmp ;
• ajoute une règle à /etc/tmpfiles.d afin de nettoyer dans ce dossier les fichiers de plus de 30 jours ;
• définir ce dossier comme “dossier de téléchargement” par défaut de l’utilisateur (XDG_DOWNLOAD_DIR) ;
• droits d’accès au dossier en 1770 (plutôt que 1777 comme /tmp) pour éviter que d’autres utilisateurs viennent fouiller dedans.

Fonctionnalités propres à Linux Mint (LMDE, dans mon cas) :

• remplacer les raccourcis de Nemo pour supprimer Downloads, Téléchargement et ajouter tmp

Script bash

#!/bin/bash

user_home="$HOME"
tmp_dir="$user_home/tmp"

# Ajout de la règle tmpfiles.d
# d pour créer un répertoire qui sera nettoyé régulièrement
# 1770 : droits sur le dossier
# $USER $USER : propriétaire et groupe
# 30d : fichiers virés au bout de ce délai
echo "d $tmp_dir 1770 $USER $USER 30d" | sudo tee "/etc/tmpfiles.d/${USER}_tmp.conf" > /dev/null

# Appliquer les modifications avec tmpfiles
sudo systemd-tmpfiles --clean --create

# Modifier le fichier user-dirs.dirs pour rediriger "Téléchargements" vers "tmp"
user_dirs_file="$user_home/.config/user-dirs.dirs"
sed -i "s|^XDG_DOWNLOAD_DIR=.*|XDG_DOWNLOAD_DIR=\"\$HOME/tmp\"|" "$user_dirs_file"

# Appliquer immédiatement le changement dans la session en cours
source "$user_dirs_file"

# Chemin du fichier des favoris GTK (utilisé par Nemo)
bookmarks_file="$user_home/.config/gtk-3.0/bookmarks"

# Chemin absolu encodé des dossiers Téléchargements ou Downloads
downloads_dir="file://$user_home/T%C3%A9l%C3%A9chargements Téléchargements"
downloads_dir_alt="file://$user_home/Downloads Downloads"

# Supprimer "Téléchargements" ou "Downloads" des favoris s'ils existent
# et "tmp" pour éviter les doublons
sed -i "\|$tmp_dir|d" "$bookmarks_file"
sed -i "\|$downloads_dir|d" "$bookmarks_file"
sed -i "\|$downloads_dir_alt|d" "$bookmarks_file"

# Ajouter "tmp" en début de fichier
sed -i "1i file://$tmp_dir tmp (Downloads)" "$bookmarks_file"

# Redémarrer Nemo
killall nemo

Ça m’a été bien utile. De plus, Je tends à scripter toute configuration pour la reproduire lors de prochaines installations.

Comme c’est prêt à l’emploi, ça pourra peut-être resservir à d’autres, donc je partage.

“Keep calm and script EVERYTHING!”

1. Types de hitboxes

Je m’intéresse ici à un espace en 2 dimensions, mais il est facile d’extrapoler cela pour 3 dimensions (un cube au lieu d’un carré, une sphère au lieu d’un cercle, 3 coordonnées au lieu de 2, etc.).

• rectangle (axis-aligned bounding boxes ou AABB) : algorithme le plus simple, consistant à substituer à tout objet complexe un rectangle le contenant parfaitement ;
• cercle (bounding sphere) : même principe, mais avec un cercle ;
• au pixel près (pixel perfect) : précis, mais très coûteux en ressources.

Même si on peut vouloir vérifier la collision entre 2 objects, une grosse partie des collisions peuvent être entre un objet et un simple point, ce qui est notablement plus simple à calculer.

2. Cas complexe : pixel perfect

Je ne souhaite pas développer ce cas aujourd’hui. L’idée est de parcourir chacun des pixels d’un objet et de vérifier s’il existe au moins un pixel de l’autre objet à la même coordonnée.

Le coût d’un tel algorithme étant élevé – $O(n^2)$ – on préfèrera généralement le précéder d’une première vérification par un test de collision en cercle ou en rectangle. L’idée ? Ne pas avoir à vérifier tous les pixels de l’écran pour connaître les collisions, mais ne vérifier les pixels que des objets suffisamment proches.

3. Cas simple : les cercles

Vérifier si 2 cercles se chevauchent est assez direct. Soit 2 cercles :

• cercle A de centre (x_A, y_A) et de rayon r_A
• cercle B de centre (x_B, y_B) et de rayon r_B

Vérifier la collision consiste simplement à contrôler si la distance entre leurs centres respectifs est supérieure ou non à la somme de leurs rayons.

Tout d’abord, le calcul de la distance repose sur le théorème de Pythagore :

$$d=\sqrt{(x_B-x_A{)}^2+(y_B-y_A{)}^2}$$

Puis la comparaison :

$$d\ge r_A+r_B$$

Cette comparaison me semble très élégante, et c’est cette idée qu’on va tenter de reprendre pour le cas des rectangles.

N. B. : une adaptation de cet algorithme à une ellipse est possible, mais implique des calculs plus complexes impliquant l’angle que je ne développerai pas ici.

4. Cas simple mais lourd : les rectangles

Les rectangles peuvent être définis de manières variées, mais les plus courantes :

• coordonnées du coin haut-gauche (x₁, y₁) et du coin bas-droite (x₂, y₂)
• coordonnées du coin haut-gauche (x₁, y₁), largeur w et hauteur h

On peut être tentés alors de contrôler si le côté gauche (puis droit) d’un objet se situe bien entre les 2 côtés de l’autre, et de reproduire les mêmes contrôles avec les coordonées verticales. Prenons les objets A et B :

• $x_{1A}<x_{1B}<x_{2A}$
• $x_{1A}<x_{2B}<x_{2A}$
• $y_{1A}<y_{1B}<y_{2A}$
• $y_{1A}<y_{2B}<y_{2A}$

Cela fait déjà 8 contrôles à faire – ce qui sera encore plus lourd à écrire avec du code – et qui ne suffiront même pas à couvrir un cas particulier :

Alors certes, ça marcherait si A contient B, mais pas si B contient A. On pourrait ajouter les contrôles suivant (seuls 4 peuvent suffir ici) :

• $x_{1B}<x_{1A}<x_{2B}$
• $y_{1B}<y_{1A}<y_{2B}$

Mais ça nous amène à un total de 12 contrôles différents, quoique très similaires. Je ne sais pas vous, mais écrire 12 fois la même chose, ça me donne l’impression de perdre mon temps.

5. Simplification des rectangles

En réalité, cette impression de faire 12 fois la même chose est fondée : on vérifie bien 12 fois si un point est situé à l’intérieur d’une zone données. Mais on n’a pas 12 zones différentes ni 12 points et on sent bien qu’il serait possible de factoriser un peu.

Si on reprend l’élégance de la méthode du cercle et qu’on l’applique cette fois-ci au rectangle, on peut définir le rectangle par son point central (x, y) plutôt que par une de ses extrémités, et par sa largeur w et sa hauteur h. On va plus exactement s’intéresser aux équivaleurs du rayon d’un cercle, donc à $\frac{w}{2}$ et $\frac{h}{2}$.

Il nous suffit alors uniquement de deux contrôles, un pour chaque axe de notre espace (x et y) :

• la distance en x entre les centres des objets A et B est-elle inférieure à la somme des « rayons » horizontaux desdits objets (bref, la somme de la moitié de leurs largeurs) ;
• de même, la distance en y est-elle inférieure à la somme de la moitié de leurs hauteurs

Comme ce sont des longueurs et distances, il nous suffit de valeurs absolues :

$$x_{\mathrm{diff}}=|x_B-x_A|\le |\frac{w_A}{2}+\frac{w_B}{2}|$$

$$y_{\mathrm{diff}}=|y_B-y_A|\le |\frac{h_A}{2}+\frac{h_B}{2}|$$

6. Point d’ancrage

L’unique point servant à définir la position d’un objet est appelé point d’ancrage. Pour diverses raisons généralement liées au positionnement, on peut vouloir définir un point d’ancrage qui n’est pas au centre de notre rectangle. Par exemple, le point d’ancrage d’un personnage sera généralement au niveau de ses pieds plutôt qu’au centre de son corps.

La conséquence est une recomplexification de notre algorithme, mais dont la logique est déjà adaptée et restera inchangée.

Il suffira de détecter si l’objet B est à droite ou à gauche de A pour savoir si on veut utiliser les largeurs à gauche ou à droite des objets, et de suivre la même logique en vertical.

Conclusion

Si la logique mathématique sous-jacente est la même, on voit bien que les 2 approches de calculs de collisions par rectangles n’amènent pas la complexité de la même manière. Je trouve personnellement l’utilisation d’un point d’ancrage centré (inspirée de la méthode des cercles) très intuitive, ce qui facilite la compréhension des calculs, amenant à une facilité de coder cela.

“Keep ??? and ??? on!”

1. Le test

2. Analyse théorique

Dans cet article, je parle indifféremment de couleur ou de teinte, mais prenez bien en compte que j’ignore ici toutes les informations de saturation et de luminosité (selon l’espace colorimétrique TSL) pour uniquement m’intéresser aux valeurs du disque chromatique représentant les valeurs de teinte selon TSL.

Ci-contre, le disque en question, où les lettres désignent les 6 teintes (ou couleurs) primaires correspondant aux espaces colorimétriques des synthèses additives et soustractives :

• espace RVB pour la synthèse additive, celle basée sur la lumière et utilisant les couleurs primaires rouge, vert et bleu ;
• espace CMJ(N) pour la synthèse soustractive, celle basée sur l’absorbtion lumineuse par des composants (imprimerie) et utilisant les couleurs primaires cyan, magenta et jaune ;

Conclusion

En résumé, je sais déjà pourquoi on a du mal à se mettre d’accord avec ma compagne : nos interprétations semble aux deux extrémités du spectre présenté par le test.

Je sais aussi qu’il n’est pas évident de définir ce qu’est le milieu entre 2 couleurs. Il existe diverses manières précises et scientifiques de le faire (moyenne de longueur d’onde, valeur selon un espace colorimétique ou un autre).

Mais c’est sans compter sur la façon bien particulière qu’a notre corps (oeil et cerveau) de fonctionner et d’amener du subjectif. Et ce sans nécessairement parler de biais ou d’atypisme.

Alors, le milieu entre deux couleurs, c’est quoi selon vous ?

“Keep thinking and dig on!”

Aperçu de l’outil

J’ai fait KISS au possible - donc design ultra-basique - préférant me concentrer sur les fonctionnalités.

J’en ai profité pour découvrir le fonctionnement des Pages de Github et Gitlab. Vous n’aurez donc pas une, mais bien deux démos disponibles (c’est pas la classe, ça ?) :

• démo Gitlab Pages chez Framasoft
• démo Github Pages
• sources chez Framasoft et chez Github

PS : n’hésitez pas à me faire vos retours.

“Keep It Simple and Stupid on!”

Besoin

Lorsqu’on utilise Apache avec plusieurs (sous-)domaines, il est courant d’utiliser des fichiers de logs séparés pour chaque vhost sur le modèle /var/log/apache2/mon_vhost_access.log et /var/log/apache2/mon_vhost_error.log.

Mais dans certains cas, on peut vouloir rassembler les logs des différents vhosts dans un même fichier. Cependant, les formats par défaut des logs ne permettent pas de distinguer quel vhost a déclenché l’écriture d’un log en particulier.

Explications

Pour solutionner cela, il faut changer le format des logs d’accès (/var/log/apache2/*access.log). Ceux-ci sont généralement configurés sous une forme semblable à :

ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined

Notez bien le combined : il désigne un des format de log prédéfinis d’Apache :

apache title="Extrait de la version par défaut de /etc/apache2/apache2.conf" LogFormat "%v:%p %h %l %u %t \"%r\" %>s %O \"%{Referer}i\" \"%{User-Agent}i\"" vhost_combined LogFormat "%h %l %u %t \"%r\" %>s %O \"%{Referer}i\" \"%{User-Agent}i\"" combined LogFormat "%h %l %u %t \"%r\" %>s %O" common LogFormat "%{Referer}i -> %U" referer LogFormat "%{User-agent}i" agent

Pour plus d’infos sur les éléments possibles d’afficher, voir dans la doc.

Solution

Il suffit alors de définir un nouveau format « maison » affichant en plus le Host. Mais ne modifions pas apache2.conf, afin d’éviter tout conflit lors des mises à jour d’Apache.

Il est préférable de se créer un fichier de configuration additionnel. Par exemple :

apache title="/etc/apache2/conf-available/custom-logs.conf" # define a log format like "combined" but with the Host header too # so that "catchall" vhosts help identify which host was called LogFormat "%h %l %u %t %{Host}i \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined_with_host

Comme il est placé dans conf-available, il convient de l’activer :

a2enconf custom-logs.conf

Cela va juste créer un lien symbolique dans conf-enabled vers ce fichier, sur le même principe que les vhosts.

Il suffit ensuite d’utiliser ce nouveau format dans les vhosts concernés  :

apache title="extrait de vhost" ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined_with_host

Conclusion

Profit :moneybag:

Et si vous souhaitez en faire de même sur les formats du log d’erreur, il existe la directive équivalente ErrorLogFormat (mais elle ne se règle qu’une fois, à l’échelle du serveur, pas au niveau des vhosts).

“Keep calm and script EVERYTHING!”

Besoin

Remplaçons le port par défaut (80) par un autre (ici, j’utiliserai 8080). Il faut le changer à plusieurs endroits :

• sur la directive Listen (fichier /etc/apache2/ports.conf) ;
• dans les <VirtualHost> de chaque vhost.

Solution

Inutile d’aller modifier chaque fichier a la mano, autant scripter tout ça :

```bash title=“change_apache_port.sh” # Replace “Listen 80” by “Listen 8080” in ports.conf sed -i ‘/^Listen 80$/ s/80/8080/’ /etc/apache2/ports.conf

Replace “<VirtualHost :80>” by ”<VirtualHost :8080>” in all vhosts

sed -i ‘s/:80>/:8080>/’ /etc/apache2/sites-available/.conf ``*Ces commandes sont __idempotentes__[^1], donc vous ne finirez pas avec80808080` si vous les appelez plusieurs fois.

Si certains de vos vhosts actifs ne sont pas des liens symboliques issus de sites-available, vous pouvez toujours cibler sites-enabled ou tout autre dossier à la place.

1. Opérateur de décomposition #!php ...

Disponible depuis PHP 5.6, il est aussi appelé splat operator ou unpacking operator. Il permet de faire 2 choses différentes :

<?php
function variadicFunction(...$args) {
  foreach ($args as $val) {
    echo $val;
  }
}
variadicFunction('val1', 'val2', 'val3');

<?php
function example($arg1, $arg2=0, $arg3=0, $arg4=0, $arg5=0) {
  // ...
}

<?php
// plutôt que ceci...
variadicFunction(1, 2, 3, 4, 5);

// ...on peut faire cela...
$array = [1, 2, 3, 4, 5]
variadicFunction(...$array);

// ...ou directement (intérêt plus limité)
variadicFunction(...[1, 2, 3, 4, 5]);

2. Arguments nommés (depuis PHP 8.0)

Dans une syntaxe assez similaire à Python, PHP autorisé désormais à nommer les arguments optionnels.

<?php
example(1, 0, 0, 0, 5);
// ... est équivalent à :
example(1, arg5=5);

Cela évite de transmettre inutilement à la main des valeurs par défaut pour des arguments dont on se fout.

3. Arguments nommés & opérateur de décompression

Les deux peuvent être utilisé lors d’un même appel de fonction, et ce de deux manières différentes :

<?php
$args = ['arg3' => 3, 'arg5': 5];
example(1, ...$args);

<?php
example(1, ...['arg3' => 3], arg5: 5);

<?php
example(1, ...['arg5' => 3], arg5: 5);

Référence (php.net)

• Liste d’arguments à nombre variable
• Arguments nommés

“Keep spreading and code on!”

Objectif

À terme, je voulais avoir un HTML ressemblant à ceci :

<ul class="ingredients">
    <li><span clas="qty">100</span> g de farine de sarrasin</li>
    <li><span clas="qty">1</span> oeuf</li>
    <li><span clas="qty">150</span> mL de lait</li>
</ul>
<label>
    Multiplier les quantités par :
    <input type="text" class="multiplier" value="1" title="Possible formats: .5 — 2/3 — 2 — 3,5">
</label>

Les saisies dans le #!html <input> pourrait être un nombre entier ou décimal, avec un séparateur de décimal à la française (,) ou à l’anglaise (.) et un support basique des fractions serait intéressant aussi (2/3).

N’écrire que la liste

Dans chaque article, j’aimerais éviter d’avoir à écrire à la main à chaque fois le #!html <input> (« copier-coller », c’est le mal !), donc autant l’insérer à la volée au chargement de la page après chaque liste d’ingrédients :

--8<-- "snippets/recipe-ingredients-snip.js:insert"

Alléger l’écriture de la liste

Certains n’aimeront peut-être pas cette approche, mais je tenais à diminuer la quantité de code à écrire à chaque fois que je rédige une liste d’ingrédients (l’essentiel de mon texte est en Markdown, je n’ai pas envie de me palucher du HTML lourdingue au milieu de ça).

J’ai donc fait le choix d’écrire plutôt :

<ul class="ingredients">
    <x-ingr qty="100">g de farine de sarrasin</x-ingr>
    <x-ingr qty="1">oeuf</x-ingr>
    <x-ingr qty="150">mL de lait</x-ingr>
</ul>

J’en convient, le gain est minime : 10 caractères par ingrédient, sachant que ça ajoute 29 caractères pour le #!html <ul>, ça ne laisse — dans l’exemple présent — qu’un gain de 1 caractère ! :face_with_monocle:

Mais c’était aussi l’occasion pour moi d’expérimenter avec les éléments HTML personnalisés (cf MDN). J’envisageais au départ de distinguer 3 informations (quantité, unité de mesure, nom d’ingrédient), ce qui aurait pu rendre l’usage d’élément personnalisé plus intéressant, peut-être.

Pour déclarer l’élément personnalisé :

--8<-- "snippets/recipe-ingredients-snip.js:custom"

Fait étonnant : la norme nous imposer de choisir un nom d’élément comportant un tiret. Une contrainte qui rallonge le nom de ma balise personnalisée ! :angry:

Recalculer les proportions

js hl_lines="6 11" --8<-- "snippets/recipe-ingredients-snip.js:multiply"

1. Si vous ne voulez pas de gestion de fractions, supprimez la fonction parseFraction et remplacez son appel ici par la ligne avec parseFloat surlignée plus haut.

Notez en particulier le mécanisme suivant :

= 1 * parseFloat(...).toPrecision(3)

• parseFloat() permet de lire une valeur décimale dans une chaîne ;
• .toPrecision(3) pour ne conserver que 3 chiffres significatifs (qu’ils soient avant ou après la virgule) ;
• 1 * afin de ne pas conserver de zéro inutile après la virgule (1.00 deviendra 1).

Profit

Le fichier complet :

js title="recipe-ingredients.js" linenums="1" --8<-- "snippets/recipe-ingredients.js"

NB : j’ai essayé de raccourci au maximum mon code pour qu’il cible l’essentiel et rentre en 40 lignes, parfois au dépend de la facilité de lecture.

“Keep cooking and KISS on!”

Mon process (pour l’instant)

• écriture en Markdown :
  • facile à lire et à écrire sans Internet ni logiciel spécial ;
  • fichiers conservés sur ma machine donc sauvegarde aisée ;
• synchronisation par Nextcloud entre mes machines : simple de continuer l’écriture en changement de manchine ;
• compilation en fichiers plats grâce à Mkdocs (nécessite qu’il soit installé avec tous ses plugins) ;
• envoi au server  par rsync (oui, c’est très manuel, à terme, je basculerai sur git je pense) ;
• profit!

Autres changements notables

• abandon des statistiques (Piwik) : ça faisait longtemps que je n’en tirais rien de constructif de toute façon (pas sûr qu’elles fonctionnaient encore, depuis le temps…).
• abandon des commentaire sur le site. À la place, vous pouvez me joindre par e-mail (voir page de contact)
• je vais peut-être faire évoluer mes différents sites pour mieux refléter mon métier actuel (enseignant en informatique), donc mon dokuwiki, mon ancien shaarli et le présent blog seront peut-être fusionnés, j’y réfléchis encore.

Écho des abysses

J’avais pas mal de projets qui ont avancé mais que je n’avais pas publié. Je n’ai hélas plus le nez dedans, et ce n’est pas gagné que je m’y remette dans l’immédiat. En vrac :

• :fontawesome-brands-github: DDb v1 : elle a tout de même reçu quelques commits jusqu’en 2016 ;
• DDb v2 (bascule sur mon framework maison Watamelo) : jamais finalisée, même si c’était fonctionnel. Il ne manquait que les fonctionnalité d’administration et l’import depuis la v1) ;
• :fontawesome-brands-github: Watamelo : mon petit framework MVC a continué à évoluer, mais il prend déjà du retard par rapport à une variante que j’ai développé uniquement pour mes enseignements ;
• D’autres projets sont clairement endormis, même s’ils ont un peu évolué en 10 ans. On en trouve sur :fontawesome-brands-github: Github : Easydump, Jotter, Yalig, YosLogin, PHP Github Updater et sans doute plein d’autres trucs.

Si vous êtes particulièrement intéressés pour que je remette le nez dans l’un de ces projets, n’hésitez pas à me faire signe.

“Keep living and write on!”

Le constat

Dans le cas d’Ubuntu/Apache, l’utilisateur du serveur web est www-data, et le dossier racine est /var/www/html. Les droits par défaut sur ce dossier sont :

$ ls -al /var/www/html
drwxr-xr-x 2 root root  4096 mai 5 14:39 .
-rw-r--r-- 1 root root 10918 mai 5 14:39 index.html

En conclusion :

• L’utilisateur propriétaire est root et a les droits de lecture, d’écriture et d’exécution sur le dossier, et de lecture et écriture sur les fichiers
• Le groupe propriétaire est root et a les droits de lecture et d’écriture sur le dossier, et de lecture sur les fichiers (en bref, il perd les droits d’écriture, comparé à l’utilisateur).
• Le reste du monde a les mêmes droits que le groupe propriétaire.

En gros, seul root peut y écrire, et tout le monde (dont www-data) peut lire dans ce dossier. Sauf que :

1. En tant que developeur web, on aimerait bien pouvoir y écrire avec notre compte utilisateur sans avoir besoin de faire eds sudo et des chmod 777 à tout va.
2. L’utilisateur www-data, qui exécute nos sites web, aura parfois lui aussi besoin de pouvoir écrire dans certains sous-dossiers (les dossiers de cache ou de log par exemple).

La solution

Notre propre compte utilisateur va devenir propriétaire du dossier et de tout son contenu, afin d’avoir systématiquement les droits d’écriture. Le groupe www-data va devenir le groupe propriétaire, ainsi on pourra lui laisser un accès en lecture à ce dossier et en exécution (pour pouvoir les afficher dans le navigateur), et au cas par cas lui ajouter les droits d’écriture.

De ce fait, on va faire en sorte de retirer le droit d’exécution à tous, et de retirer le droit de lecture au reste du monde.

Les commandes

# www-data devient propriétaire et le groupe $USER devient groupe prorpiétaire
sudo chown -R www-data:$USER /var/www/html

# le propriétaire peut lire, le groupe peut lire et écrire, et le monde ne peut plus rien faire dans ce dossier
sudo chmod -R u=rx,g=rwX,o= /var/www/html

Après, il suffit d’ajouter au cas par cas les droits d’écriture pour notre serveur web sur les sous-dossiers le nécessitant. Exemple :

# "sudo" devrait être facultatif ici
sudo chmod -R u+w /var/www/html/sous/dossier

• Edit 19/04/2023 : après réflexion, je préfère l’approche www-data:$USER (corrigé plus haut), plutôt que $USER:www-data, car certain outils exécutés par Apache peuvent vérifier s’ils sont propriétaires de leurs dossiers (comme Nextcloud).

Conclusion

Voilà tout ! Je trouve cette solution simple et élégante, tout en restant suffisamment complète pour le besoins de base. Il y aurait sans doute d’autres choses à améliorer donc n’hésitez pas à me faire vos remarques.

Les évènements

Il existe, en Javascript, 3 évènements différents générés par l’utilisation d’une touche de votre clavier :

1. keydown / onkeydown : comme son nom l’indique, il est déclenché lorsque la touche est enfoncée.
2. keypress / onkeypress : on dirait un synonyme de keydown. Il est d’ailleurs déclenché juste après, toujours quand on enfonce la touche.
3. keyup / onkeyup : c’est le fait de retirer son doigt de la touche qui le déclenche.

“Quelle est l’utilité d’avoir 2 évènements différents (keydown et keypress) pour la même chose, me direz-vous ?”

Comme l’explique ce blogueur, il faut avant tout distinguer les touches servant à écrire des caractères (lettres, chiffres, caractères spéciaux, etc…) des autres touches (Ctrl, Maj, Alt, Windows/Commande, etc…). Les évènements keydown et keyup expriment le fait d’enfoncer ou relâcher une touche de votre clavier, quelle que soit sa fonction. Par contre keypress exprime théoriquement le fait d’écrire un caractère.

Je dis “théoriquement” car tous les navigateurs n’ont pas exactement le même comportement à ce propos. Tout ce qu’il faut retenir pour le moment, c’est que l’évènement keypress pourra être déclenché par l’appui sur la touche “A”, mais pas par l’appui sur la touche “Contrôle”.

L’objet KeyboardEvent

Habituellement, en Javascript, quand on réalise une fonction appelée sur un évènement, celle-ci prend en paramètre un objet de type Event. C’est la variable ev dans les exemples ci-dessous :

<script>
window.onload = function(ev) {
    ev.preventDefault();
}

document.getElementById('myId').addEventListener('click', function (ev) {
    console.log( ev.target.className );
});
</script>

Dans le cadre d’évènement issus des touches clavier, cet objet sera de type KeyboardEvent. C’est lui qui indique quelle touche (ou combinaison de touches) a été enfoncée. Voici une liste de ses attributs qui pourront nous être utiles :

• keyCode (entier) : code numérique représentant de façon unique chaque caractère. La table des codes peut différer d’un navigateur/système à un autre (tableau comparatif entre les navigateurs)
• Attributs indiquant si d’autres touches étaient enfoncées avant que celle-ci le soit aussi :
  • altKey (booléen) : indique si la touche Alt était enfoncée ou non
  • ctrlKey (booléen) : indique si la touche Ctrl était enfoncée ou non
  • metaKey (booléen) : indique si la touche Meta (Windows sur Windows, Commande sur Mac) était enfoncée ou non
  • shiftKey (booléen) : indique si la touche Majuscule était enfoncée ou non

Parmi les attributs non cités ci-dessus, on retrouve char, charCode et which, qui sont dépréciés, et doivent être remplacés par key, qui n’est pas actuellement implémenté (un comble !). En fait, même keyCode est déprécié, et sera remplacé par key au final (ils ont des fonctionnements très proches), mais en attendant, on continue à l’utiliser. Pour une liste exhaustive des attributs, RTFM.

Exemple d’exécution

Imaginons que vous souhaitez effectuer une combinaison de touches (prenons par exemple Ctrl+S, comme quand vous voulez sauvegarder une page). Dans la pratique, voici dans l’ordre les évènements qui ont lieu, ainsi que les valeurs des attributs de l’objet KeyboardEvent dans chaque cas (testé sur Firefox) :

1. keydown (on vient d’appuyer sur Contrôle)
   • keyCode = 17 (code correspondant à la touche Contrôle)
   • altKey = false
   • ctrlKey = true
2. keydown (on vient d’appuyer sur S)
   • keyCode = 83 (code correspondant à la touche S)
   • altKey = false
   • ctrlKey = true
3. keypress (on vient d’appuyer sur S, la touche Contrôle est toujours enfoncée)
   • keyCode = 83 (code correspondant à la touche S)
   • altKey = false
   • ctrlKey = true

On constate bien que keypress n’a pas lieu quand on appui sur “Contrôle”. De même on constate que quand on appui sur S, les évènements keydown et keypress se suivent et comportent des informations identiques.

“Mais du coup keydown nous suffit amplement, à quoi bon s’intéresser à keypress ?”

Vous avez parfaitement raison ! En théorie cet évènement est dépriécié (comme le reste de DOM L3. La norme HTML5 apporte, comme l’indique la doc de Mozilla, un remplaçant dans l’évènement input).

Hélas, tout ceci n’est bien que cela : de la théorie. Vous allez pouvoir vous en rendre compte dans le chapitre suivant.

Remplacer un raccourci navigateur

Reprenons notre exemple de raccourci : Ctrl+S. Si vous l’employez sur une page web dans votre navigateur, ce dernier vous proposera probablement d’enregistrer une sauvegarde de la page courante (c’est le cas de Firefox et Chrome, et sans doute d’autres).

Imaginons que vous réalisez une application web de prise de note (au hasard, Jotter). Vous aurez besoin de laisser la possibilité à vos utilisateurs de sauvegarder ce qu’ils ont saisi vers le serveur de votre appli. Vous savez aussi que, sauf besoin très spécifique, ils n’auront pas besoin de sauvegarder le HTML de la page en cours vers leur ordinateur.

Naturellement, vous décider de remplacer le fonctionnement par défaut de votre navigateur par celui de votre application. Voici le code de base pour le réaliser :

document.addEventListener('keydown', function (e){
    if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) {
        e.preventDefault();
        //app-specific code goes here
    }
});

Décorticons ce code. On commence par vérifier si l’évènement est survenu sur la combinaison de touches Ctrl+S grâce aux attributs ctrlKey et keyCode. 'S'.charCodeAt(0) est une manière plus lisible d’indiquer le code de la lettre S (qui est 83 dans tous les navigateurs).

    if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) {

Ensuite, on demande d’annuler l’effet par défaut associé à cette combinaison de touches :

        e.preventDefault();

Il ne reste ensuite plus qu’à réaliser les actions spécifiques à notre application (comme par exemple faire une requête ajax pour enregistrer sur le serveur les données saisies par l’utilisateur). C’est ce que j’ai désigné par :

        //app-specific code

Si vous utilisez ce code, vous constaterez que, en fonction du code spécifique que vous ajoutez, parfois Firefox proposera malgré tout à l’utilisateur de sauvegarder la page sur son ordinateur. Et là, vous vous dites :

Explication fumeuse : Firefox se base sur keypress pour gérer les raccourcis clavier qu’il a de définis (ce qui n’est pas forcément le cas des autres navigateurs, à vérifier). Jusqu’ici tout va bien. Il respecte en théorie la norme qui dit que si l’évènement par défaut de keydown est stoppé (via .preventDefault()), alors celui de keypress devrait l’être aussi.

Et Firefox le fait, la plupart du temps. Mais il suffit que votre code “app-specific” contienne certains bouts de code (comme un bête alert()) pour que .preventDefault() ne suffise plus. En fait, même si vous utilisez l’un des deux bouts de code ci-dessous, rien n’y fera, et Firefox exécutera quand même le :

document.addEventListener('keydown', function (e){
    if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) {
        e.preventDefault();
        e.stopPropagation();
        //app-specific code
    }
});

Ou :

document.addEventListener('keydown', function (e){
    if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) {
        //app-specific code
        return false;
    }
});

Le pire est que dans ce cas précis, l’évènement keypress verra son Event.keyCode à 0 au lieu de 83 (pour S)…

Méthode de contournement pour Firefox

Du coup, la solution consiste à contrôler dès le keydown si on doit annuler l’évènement keypress, puisque ce dernier n’est même plus capable de savoir quelle touche a été enfoncée :

//must be accessible from both keydown and keypress events
var cancelKeypress = false;

document.addEventListener('keydown', function (e){
    if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) {
        //do this prior to anything else
        cancelKeypress = true;

        //might still be useful for other browsers
        e.preventDefault();

        //app-specific code goes here
    }
});

//workaround for Firefox:
document.addEventListener('keypress', function (e){
    //must probably be done prior to anything else
    if(cancelKeypress === true) {
        e.preventDefault();
        cancelKeypress = false;
    }
});

Je vous l’avais bien dit que ce satané keypress nous servirait à quelque chose.

Conclusion

Vous avez désormais une base vraiment solide pour gérer les évènements clavier en Javascript. Nous avons abordé les logiques générales, et le reste pourra généralement se trouver dans la doc.

Nous avons malgré tout pu constater que certaines spécificités des différents navigateurs rendaient ce sujet un peu plus complexe que prévu. Si ces spécificités sont parfois documentées, vous aurez sans doute souvent à farfouiller les forums ou expérimenter par vous même pour trouver réponse à vos questions.

J’ajouterai aussi que même si les raccourcis claviers dans une appli web, ça peut avoir la classe, n’oubliez pas que cela n’est pas toujours judicieux, et que si vous remplacez les comportements d’un navigateur par quelque chose de nouveau, cela peut déstabiliser vos utilisateurs, au risque de les rendre insatisfaits.

“Keep typing & rock on!”

L’histoire

Pour ceux qui dormiraient dans une grotte depuis plus de deux ans (je ne vois que ça, parce que parmi mes lecteurs, qui ne lit pas sebsauvage ?), l’effet sebsauvage<sup>™</sup> est l’effet que sebsauvage a sur les visites d’un site autre que le sien rien qu’en partageant un lien vers ledit site via son shaarli.

Y’avait pas mal de monde à être passé par là :

• m0le, le 20/12/2011
• Sam & Max, le 04/05/2012
• Mitsu, le 20/06/2012
• Bronco, le 05/10/2012
• Tontof, le 06/10/2012
• taxalot, le 27/10/2012
• OranginaRouge, le 20/12/2012
• Korezian, le 06/02/2013
• Fox, le 02/03/2013
• Sammy, le 18/04/2013
• Strak, le 02/09/2013
• ademcan, le 10/09/2013
• … et sans doute bien d’autres que j’ai oublié (Idleman, j’ai rien trouvé chez toi à ce propos…)

Mais le plus important, ce que l’effet sebsauvage n’est pas la cause uniquement de Seb. En fait il n’est que l’élément déclencheur. Ce sont les nombreux visiteurs, ces gens connus ou inconnus, qui viennent grossir les logs de connexion de nos serveurs chéris.

Et moi, et moi, et moi ?

J’en avais rêvé. Eh bien j’ai eu non pas un effet, non pas deux effets, non pas trois effets, non pas quatre effets, non pas cinq effets, non pas six effets, mais bel et bien sept effets sebsauvage<sup>™</sup> ! <sup>1</sup>

Sans plus attendre :

Comme dirait Alban, Achievement Unlocked :

A noter que les deux plus petits sont en fait des coups de pouce de Bronco et Timo :)

Shaarli, Nawel et ouverture

Attention : cette section de l’article est bourrée de petits coeurs et de sentiments niais et dégoulinants. Lisez-la à vos risques et périls.

Du coup, merci à toi, Seb, et merci à tous les autres blogueurs ou shaarlieurs gravitant dans la même blogosphère et ayant éprouvé un quelconque intérêt à mes propos. Pour vous, je m’engage à persister dans mon travail et mes écrits pour vous apporter encore et toujours plus de choses qui éveilleront votre curiosité.

D’ailleurs, j’en profite pour vous exprimer tout le plaisir que j’ai à profiter de cette blogosphère, et à y participer, parce qu’elle est pour moi un monde de passion et d’ouverture. Ouverture au sens “open-source”, mais aussi au sens où tout un chacun peu y lire et y écrire librement.

Oh et merci à mon bienfaiteur (qui se reconnaitra) pour son cadeau de Nawel des shaarlieurs.

“Keep blogging & stay free!”

L’histoire

Comme vous le savez peut-être déjà, le site Wallbase.cc (merveilleux site de wallpapers, sans pub, très agréable à naviguer et très bien fourni) est en train de mourir depuis quelques mois, du fait de la disparition de son administrateur.

De plus, depuis peu quelqu’un (par le biais d’un bot ?) est en train de supprimer tous les fonds d’écran du site, et les modérateurs galèrent à freiner ce problème. Ils conseillent donc de télécharger les wallpapers qu’on a mis en favoris avant que ceux-ci ne disparaissent.

C’est donc ce que j’ai fait, aidé d’un script Greasemonkey pour récupérer plus rapidement les liens de téléchargement. Ensuite, j’aurais pu donner un petit coup de DownThemAll! et le tour était joué. Mais j’ai préféré scripter ça et envoyer direct sur mon propre serveur.

Edit 2013-12-17 : j’ai même l’impression que c’est pire que cela. Le forum ne semble plus accessibles (certains fichiers manquants ?). Mais si c’est effectivement une attaque, elle me semble plutôt étrange…

Le principe

En réalité, tout repose sur une fonction PHP bien simple nommée copy(). Celle-ci permet, comme vous vous en doutez, de copier un fichier d’un emplacement à un autre, et ce même depuis une URL (du moins depuis PHP 4.3).

Ainsi, pour copier une image d’un autre serveur vers le votre, il suffit de faire :

<?php
$result = copy(
    'http://www.example.com/image.jpg', /* other server */
    '/var/www/my-images/image.jpg'      /* your server */
);

Le reste de mon script n’est en fait qu’un ensemble de commodités :

• multiples URLs : saisie dans un textarea des URLs de tous les fichiers à récupérer (une URL par ligne)
• Erreurs : affichage d’un log des réussites et échecs de téléchargement
• Téléchargement groupé : compression de tous les fichiers dans un ZIP pour pouvoir les télécharger en une fois

Vous pouvez vous-même choisir le nom du zip généré. Si vous demandez à regénérer un zip du même nom, l’ancien sera écrasé. Ainsi, si vous avez besoin d’en créer plusieurs en vue de les récupérer plus tard, c’est possible.

Configuration requise

• PHP 4.3 ou supérieur (à vérifier, PHP 5 conseillé)
• Droits d’écriture sur le dossier où vous placerez le script. A noter que des sous-dossier et des fichiers zips seront créés et supprimés, il est donc préférable de donner au script son propre dossier.

Le code complet :

Edit : J’ai créé un Gist correspondant, où je pourrai faire d’éventuelles révisions, et où vous pourrez me faire vos remarques.

<!doctype html>
<!--
PHP Batch Download Script

@author Yosko <www.yosko.net>
@copyright none: free and opensource
@link https://www.yosko.net/2013/snippet-php-batch-download.html
-->
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Batch Downloader</title>
    <style>
textarea {
    width: 100%;
    min-height: 10em;
}
    </style>
</head>
<body>
    <h1>Batch Downloader</h1>
<?php

//config
error_reporting(E_ALL | E_STRICT);
ini_set('display_errors','On');
set_time_limit ( 180 ); //facultative: to avoid timeout
ob_flush(); flush();

//recursive rmdir from php.net
function delTree($dir) {
    $files = array_diff(scandir($dir), array('.','..'));
    foreach ($files as $file) {
        (is_dir($dir.'/'.$file)) ? delTree($dir.'/'.$file) : unlink($dir.'/'.$file);
    }
    return rmdir($dir);
}

$errors = array();
$urlString = '';

//a list of URLs to download was given
if(isset($_POST['urls'])
    && isset($_POST['directory'])
    && strpos($_POST['directory'], '..') === false
    && strpos($_POST['directory'], '/') === false
) {
?>
    <ul>
<?php

    $urls = explode(PHP_EOL, $_POST['urls']);
    $directory = trim($_POST['directory']);
    if(empty($directory)) { $directory = 'files'; }
    $zipFile = $directory.'.zip';

    //temporary directory to put the files into
    if(!file_exists($directory)) {
        mkdir($directory);
    }
    //temporary archive file for download
    if(file_exists($zipFile)) {
        unlink($zipFile);
    }

    //try and download each file
    foreach($urls as $url) {
        $url = trim($url);
        $filename = basename($url);
        $success = copy($url, $directory.DIRECTORY_SEPARATOR.$filename);
        if($success) {
            echo '<li>'.$filename.' : OK</li>';
        } else {
            $errors[] = $url;
            echo '<li>'.$filename.' : KO (source = <a href="'.$url.'">'.$url.'</a>)</li>';
        }
        ob_flush(); flush();
    }

    //zip files
    $zip = new ZipArchive();
    if ($zip->open($zipFile, ZIPARCHIVE::CREATE) === true) {
        foreach (glob($directory.'/*') as $file) {
            $zip->addFile($file);
        }
        $zip->close();
    }

    //delete directory
    delTree($directory);

?>
    </ul>
    <p>
        <?php echo count($urls); ?> file(s),
        <?php echo count($urls) - count($errors); ?> successe(s),
        <?php echo count($errors); ?> error(s)
    </p>
    <p>Download <a href="<?php echo $zipFile; ?>"><?php echo $zipFile; ?></a></p>
    <p>Errors :</p>
    <ul>
<?php foreach($errors as $error) { ?>
        <li><?php echo $errors; ?></li>
<?php } // end loop on errors ?>
    </ul>
<?php } // end form post ?>
    <form method="POST" target="">
        <input type="text" name="directory" placeholder="Destination file...">.zip
        <textarea name="urls" placeholder="Put each URL on a different line">
<?php
foreach($errors as $error) {
    echo $error.PHP_EOL;
}
?></textarea>
        <input type="submit" name="submitURLs" value="Download">
    </form>
</body>
</html>

Conclusion

Certes, le code est encore un peu grossier (“rough around the edges”, j’ai envie de dire). Mais à défaut de la vie, il m’aura au moins sauvé mes favoris Wallbase.cc. Comme toujours, si vous avez des critiques ou questions, je suis à votre écoute :)

“Keep calm & download!”

Jotter [ˈdʒɒtə]

UK, noun: a small book with blank pages for recording notes.

Jotter est un petit gestionnaire de notes en ligne à héberger sur votre serveur. Il est réalisé en PHP et ne nécessite pas de base de données.

Principales fonctionnalités :

• Editeur WYSIWYG moderne pour plus de confort, avec raccourcis claviers pour la sauvegarde et la mise en forme
• Organistion des notes sous forme d’arborescence dans un bloc-note
• Gestion de plusieurs blocs-notes
• Gestion multi-utilisateur
• Pas de base de données : tout est stocké sous forme de fichiers plats (JSON et Markdown)

Téléchargement et informations

Le projet est disponible sur sa page GitHub. Edit : et une démo est disponible à cette adresse (lien mort).

Vous y trouverez les dernières mises à jours, un guide d’installation, les fonctionnalités prévues pour les versions futures, les informations de license, etc…

Comme toujours, je vous invite à me transmettre toute remarque ou question à propos de Jotter, par mail ou via GitHub. Par contre, petit aveu : j’ai voulu faire léger, et j’ai parfois mis de côté la qualité du code. Ce n’est pas le plus beau code que vous verrez de moi… ’

“Keep calm & take notes”

Edit 2013-11-22 : une première mise-à-jour avec des correctifs et améliorations ergonomiques est disponible sur Github. Aperçu indisponible

La suite devrait se passer là-bas aussi :-)

L’histoire

Je vais vous spoiler un peu le livre : l’héroïne, Susan Fletcher, bosse pour la section Crypto de la NSA, sous la direction de Trevor Strathmore. Vers le début, le livre évoque leurs déboires avec l’EFF (définition) et les implications éthiques de leur antagonisme (ça commence plutôt bien), puis le scandale causé par Strathmore quelques années auparavant lorsqu’il avait glissé une backdoor dans un algo de cryptage destiné au grand public, mais révélé par un cryptographe de génie (que la NSA a fini par engager).

D’autres méthodes douteuses (et fictives ? :D ) de la NSA y sont évoquées, et même employées au cours du récit, à commencer par le mensonge (justification de l’emploi d’outils de surveillance de masse en grossissant les chiffres du terrorisme), les assassinats ou les arrestations injustifiées des opposants pacifistes, etc….

Au moment où se déroule le récit, ces trois personnages travaillent sur TRANSLATR, un super-ordinateur gigantesque tournant 24h/24 et 7j/7 pour brute-forcer (définition) des fichiers cryptés en tous genres. Il passe généralement entre 1/2 seconde et 11 minutes sur chaque fichier.

La méthode de collecte des fichiers craqués par TRANSLATR n’est pas précisée, même si une organisation complexe découpée en services est décrite, laissant facilement imaginer un PRISM pas loin.

Un génie du nom d’Ensei Tankado, ancien de leur service mais qui les avait quittés pour des raisons morales (Edward Snowden, c’est toi ?), sort un nouvel algorithme soi-disant incraquable, et ne le révèle qu’à un nombre limité de personnes, dans le but de faire du chantage à la NSA : “révélez l’existence de votre TRANSLATR ou bien je file mon algo à tout le monde et vous ne pourrez plus jamais lire les conversations privées des gens”. Il fournit le code source de son algo publiquement, mais sous forme cryptée (via ledit algo), et menace de fournir la clé sous 24h la clé permettant d’accéder au code source.

Evidemment, TRANSLATR se casse les dents sur le fichier, et commence alors une course contre la montre pour mettre la main sur la clé.

Conclusion

Je ne vous en raconte pas plus pour ne pas trop vous spoiler. Je vous conseille la lecture de ce roman, qui réserve de nombreuses surprises comme Dan Brown en a le secret, dont quelques révélations qu’on peut qualifier aisément “d’actualité”.

Et je félicite l’auteur pour avoir su retranscrire l’un des nombreux univers de l’informatique sans raconter n’importe quoi, et tout en sachant le rendre accessible à tous. Chapeau, ce n’était pas une mince affaire… et le plus fou, c’est que rien de ce qu’il aborde n’a vieilli, à l’exception peut-être des valeurs (volume de stockage et vitesse de téléchargement)

Oh, et dernière remarque : le livre évoque le fait qu’en 1998, seuls 3% des américains sont au courant de l’existence de la NSA. Je me demande si ce chiffre est véridique…

Fonctionnalités

Utilisation

1. Téléchargez le code ici (ou sur Github pour la dernière version) et placez le dans le dossier de votre projet.

2. Importez le fichier d’EasyDump : php <?php require_once( 'easydump.php');

   Puis appelez simplement les fonctions d’affichage :

   <?php
   $var1 = "toto";
   $var2 = array(
       'titi' => 'tonton',
       'tata' => 'toutou',
   );
   EasyDump::debug($var1, $var2, 756);
   
   //immediatly stop the script after the dump:
   EasyDump::debugExit($var1, $var2, 756);

3. Pour simplifier la saisie, des noms de variables très courts sont possibles (si vous n’utilisez pas déjà ces noms dans votre code) : php <?php d($var1, $var2, 756); //same as EasyDump::debug() de($var1, $var2, 756); //same as EasyDump::debugExit()

Et voilà le résultat :

Et maintenant ?

J’améliorerai au fil du temps en fonction de vos remarques et mes besoins. Peut-être même que je mettrai ça sur Github, un de ces 4…

Keep dumping & rock on, baby!

Edit 11/09/2013 à 14h : petite correction sur l’affichage des booléens (affichage de “true” et “false” au lieu de “1” ou rien du tout). Le lien de téléchargement a été mis à jour.

Edit 16/09/2013 à 15h : prise en compte des ressources (opendir, fopen et autres…) et améliorations mineures. Publication sur Github.