Du libre, du code, des idées, du mélange d’ArraKISS…

De l’épice pour la pensée

Peut-être vous souvenez-vous, je développais pendant un temps dontpanic. Cette application permettait de télécharger des vidéos via le protocole torrent, et de les regarder au fur et à mesure qu'on récupérait les données. De plus, on pouvait garder une trace des épisodes regardés, avoir le synopsis des films... Bref, c'était devenu trop gros pour moi seul, et surtout difficile à maintenir. Autre souci ennuyeux, le code reposait sur une bibliothèque python (libtorrent) peu pratique à porter sur d'autres systèmes.

Un peu plus tard, j'ai repris le principe avec une interface dans un terminal en l'appelant "torstream". Afin de charger les torrents, je laissais cete tâche à aria2, et ça fonctionnait plutôt pas mal.

Cependant, les moteurs de recherche dans la DHT changent souvent, ou la façon dont j'avais écrit torstream rendait peu pratique le maintient de la partie "recherche".

Dernièrement, j'ai retroussé mes manches et j'ai le plaisir de vous annoncer la sortie de torstream en version "0.5" (ouais, jsuis un fou ^^). J'en suis assez content car j'ai pu résoudre plusieurs soucis, notamment :

  • L'intégration de nouveaux moteurs de recherche et leur maintient est beaucoup plus pratique. Moteurs et interface sont séparés.
  • Les recherches se font plus rapidement grâce à des requêtes en parallèle.
  • L'interface ne se limite plus au terminal, on peut utiliser aussi une interface web. Cette partie me permet de préparer la publication de torstream sur un serveur. En effet, ça, ça serait le pied, mais j'y reviens plus tard.
  • L'interface web s'appuie sur des requêtes en AJAX. C'est plus joli et fluide. Reste du boulot sur le CSS cependant.
  • Les recherches sont mises en cache, ça aussi, pour préparer la publication en tant que serveur.

Et la suite alors?
Je voudrais proposer torstream comme application à héberger sur un serveur. Quiconque tape sa recherche dans l'interface peut alors charger et regarder une vidéo. J'ai eu énormément d'espoir en découvrant récemment webtorrent qui transforme votre navigateur en client bittorrent. Cependant, ce dernier fonctionne très bien, mais pas avec les torrents qu'on utilise tous (basé sur websockets et pas TCP/IP). Trop déçu que je suis, j'espère très fort qu'il va permettre de prendre en charge les torrents habituels bientôt, et là ça va roxer du poney! :)

Bon, j'arrête là le blabla et vous laisse tester la nouvelle version, disponible ici : https://framagit.org/Thuban/torstream

alt

Dernièrement, je me suis amusé à optimiser mon site. Je voulais limiter la quantité de données à transférer. Ma bande passante est maigre. Et puis un visiteur ne devrait pas avoir à charger des tas de données pour lire un pauvre blog. Je suis passé d'une note "C" à A sur GTMetrix :

En-tête http pour la mise en cache
Tout d'abord, j'ai réactivé la gestion du cache dans les entêtes avec relayd, un outil présent dans OpenBSD. Le contenu est mis en cache par les navigateurs pendant une durée de 1 an maximum. La partie correspondante de la configuration, c'est ça :

match response header set "Cache-Control" value "max-age=31536000"

Chargement et optimisation des images
J'optimise systématiquement les images que je met en ligne avec ce script.

En plus, j'ai activé le plugin "lazyload" de blogotext qui permet de charger les images seulement lorsque le visiteur a déroulé la page vers l'emplacement de l'image. Ça limite grandement l'utilisation de bande passante.

Enfin, pour certaines pages, j'utilise un bout de javascript qui fait office de "spoiler".
Le HTML :

<p onclick="showimg(this, 'img/image.png')">Cliquez pour afficher l'image.</p>

La fonction javascript suivante va remplacer le texte précédent par l'image :

function showimg(elmnt,lnk) {
	elmnt.innerHTML = '<img src="' + lnk + '" />';
	elmnt.style = 'border:0';
};

Utilisation d'emojis pour les icônes

Au lieu d'utiliser des images pour faire des icônes, je suis allé piocher des émojis ici.

Pas de ressources externes
J'évite le chargement de ressources externes, comme les polices. À la place, dans le CSS, je propose plusieurs polices en faisant le pari qu'une bonne partie est déjà sur l'ordinateur du visiteur :

font-family: "Hack", "Menlo", "Liberation Mono", "Arial Monospaced", monospace;

Activation de la compression gzip
Il est recommandé d'activer la compression gzip dans les divers tutoriels. Cependant, cette fonctionnalité n'est pas implémentée dans le serveur httpd d'OpenBSD pour des raisons de sécurité (voir et surtout .
J'ai quand même activé cette fonctionnalité dans php en mettant les options suivantes dans le php.ini :

zlib.output_compression = On
zlib.output_compression_level = -1

Je pourrais aussi gzipper à la main les ressources css et javascript, mais pour l'instant non, car la flemme, et c'est pas pratique. De plus, la suite est très prometteuse.

Minification des fichiers CSS et JS
J'ai commencé à minifier les fichiers CSS et JS. En gros, on retire tous les espaces et sauts de ligne qui permettent une lecture de ces fichiers par les humains mais ne servent à rien par les navigateurs afin de réduire leurs poids. Il s'avère que Remrem a déjà commencé à créer un bout de code dans blogotext qui ferait ça automatiquement. Je n'ai pas encore vu le code, mais qui sait, le fichier minifié qui sera mis en cache sur le serveur pourra être gzippé automatiquement.

À améliorer?
Il faudrait rassembler tout le CSS dans un seul fichier pour réduire le nombre de requêtes. Ce n'est pas possible car je ne veux pas mélanger ces derniers afin de m'y retrouver.
Je pourrais aussi utiliser un CDN. Cependant, c'est soit payant, soit ça ne marche plus. D'ailleurs, quelqu'un a des nouvelles de coralCND?

Pour finir...
Un peu de lecture intéressante pour finir : https://lehollandaisvolant.net/tuto/pagespd/

Roundcube fait certainement partie des webmail les plus utilisés et dynamiques.
Par contre, il peut être très pénible à configurer, surtout si vous voulez proposer du multi-domaine.

En gros, lorsqu'un utilisateur se connecte, il écrit avec une adresse en "@localhost", c'est vraiment moyen si on veut lui répondre :s

Il faudrait le forcer à se connecter en précisant son adresse mail entière, autrement dit pas "toto" mais "toto@ledomaine.fr".
Je pensais que le formulaire roundcube exigerait une adresse mail valide juste avec du html5, mais non.

Heureusement, on peut préciser une expression régulière à laquelle doit correspondre le champ "login". j'en profite pour exiger une adresse mail complète, mais surtout restreindre aux domaines que je peux servir.

Dans la configuration de roundcube, ça donne ça :

//%s correspond au domaine indiqué dans le login
$config['username_domain'] = "%s";
$config['username_domain_forced'] = true;
$config['mail_domain'] = '%s';
// C'est quand même le serveur lui-même qui envoie et récupère les mails
$config['default_host'] = "localhost";
$config['smtp_server'] = 'localhost';
// Le filtre qui va bien sur le login
$config['login_username_filter'] = "/^[a-z0-9_.-]+@(3hg.fr|ouaf.xyz|yeuxdelibad.net)$/";
$config['login_rate_limit'] = 2;

Cette ligne devrait être présente par défaut, c'est bête comme tout et ça filtre pas mal de bruit. Détaillons-là un peu :

$config['login_username_filter'] = "/^[a-z0-9_.-]+@(3hg.fr|ouaf.xyz|yeuxdelibad.net)$/";
  • "^" : on indique le début de l'adresse mail, il n'y a rien avant
  • "[a-z0-9_.-]" : le nom d'utilisateur ne peut être composé que de lettres minuscules, chiffres, underscore et tiret
  • "+" : Les symboles précédents peuvent être répétés un nombre de fois indéterminé.
  • "@" : on exige ce caractère
  • "(domaine.net|autredomaine) : on liste les noms de domaines, séparés par des "|" et le tout entre parenthèses.
  • "$" : c'est la fin, il ne doit rien y avoir ensuite.

Allez zou, je laisse ça là et continue d'aller faire mumuse, le plugin enigma pour le support de gpg semble très intéressant.

Pour ceux qui ne savent pas, blogotext est un outil développé en PHP offrant un espace personnel complet, cohérent et léger. Il me permet d'écrire ce blog, mais pas seulement :

  • Hébergement et partage de fichiers
  • Marque-page de liens, renvoyés automatiquement sur mon compte mastodon
  • Prise de notes
  • Lecteur de flux RSS.

Ces quelques fonctionnalités sont reliées entre-elles, ce qui en fait un outil indispensable et très pratique. Il reste très léger et rapide.

Vous l'aurez compris, j'aime beaucoup cet outil. C'est pourquoi je souhaite aider à son développement.

Pourtant, je n'ai jamais appris le PHP à l'école, le javascript non plus. Mes contributions sont donc à prendre avec des pincettes, et sans doute parfois maladroites, mais les autres développeurs sont très sympas et patients. Au final, j'apprends énormément et m'amuse bien. Dernièrement, j'y ai consacré un peu de temps. Certaines des contributions listées ci-dessous seront peut-être intégrées prochainement, ou en inspireront d'autres :

  • Proposition d'un bout de code pour optimiser les images uploadées sur le blog, afin d'accélérer leur chargement : #350 ;
  • Petites retouches au CSS pour utiliser le lecteur de flux sur petits écrans : #351 ;
  • Dans le lecteur de flux, je préfère cacher les abonnements sans nouveaux éléments. À voir si ça plaît : #353 ;
  • Addon pour installer des addons. Il y a des chances que ça soit intégré au cœur de blogotext plutôt qu'en module : #31 ;
  • Addon pour éditer plus facilement la liste des liens dans la barre latérale #38 ;
  • Addon pour proposer une page "à propos" : #40 ;
  • Mise à jour de deux addons pour proposer d'autres articles à lire, soit sous forme de liste en texte soit sous forme d'images : #41 ;
  • Addon pour avoir des résumés des articles avec un "lire plus" : #42 ;
  • Addon pour ajouter au blog un formulaire de contact : #43 ;
  • Addoon pour modifier l'image d'en-tête dans le thème par défaut plus facilement. C'est un élément de personnalisation simple et important pour donner une identité à un blog. Ce n'est pas dût d'éditer les fichiers d'un thème, mais une personne peu à l'aise avec ces notions pourra désormais le faire en quelques clics : #44 ;
  • J'ai envie de faire un script avec curl pour envoyer de nouveaux articles ou des fichiers. Pour l'instant, je ne passe pas l'étape d'identification, mais je n'ai pas tellement creusé.

je vous invite à participer au développement de blogotext. Une liste des "issue" est disponible sur github si vous cherchez par où commencer. Vous pouvez aussi regarder les addons, le système de hooks permet de faire des choses vraiment chouettes.

À vous de jouer ;)

Aux utilisateurs du CHATONS 3hg.fr et ouaf.xyz, en cette fin d'année, il est temps de faire un peu de tri.

Certains ne se sont jamais connectés avec leur comptes : sauf alerte de leur part, ils seront supprimés.
Certains comptes n'ont pas été utilisés depuis plus de 6 mois : ces derniers seront fermé aussi.

N'hésitez pas à nous faire signe si besoin.

logo 3hg

Pour ceux que ça intéresse, voici comment je procède pour savoir si un utilisateur a consulté ses messages. Non, je ne regarde pas les logs, c'est beaucoup plus simple : je regarde la date de dernier accès au dossier des utilisateurs. Dans l'exemple ci-dessous, c'est réglé sur 6 mois :


DOMAINS='3hg.fr
ouaf.xyz
yeuxdelibad.net'

for d in $DOMAINS; do
        for u in /mnt/bigstorage/vmail/$d/*; do
                if [ ! -d $u/Maildir ]; then
                        echo "Never logged : $(basename $u)"
                else
                        LASTACCESS=$(stat -f %m $u/Maildir)
                        if [ $LASTACCESS -lt $SIXMONTHAGO ]; then
                                echo $(basename $u)
                        fi
                fi
        done
done

Bon, c'est très spécifique à ma configuration, mais c'est juste pour l'idée.