[Extension Firefox] yt-auto-dark

Aujourd’hui, petit article d’auto-promotion, pour mettre en avant une extension pour Firefox à la fonction extrêmement limitée, que j’ai développée pour m’épargner trois clics. J’ai nommé « Thème Sombre Automatique pour YouTube™« , nom de code : yt-auto-dark.

La fonction de l’extension est simple: activer le mode sombre proposé par Youtube, sans que j’ai à intervenir. L’option se situe dans le menu paramètre du site, juste à côté du bouton « se connecter » et nécessite trois clics pour passer du thème par défaut, le thème clair, au thème sombre. N’utilisant pas de compte Youtube, qui aurait éventuellement pu retenir mon choix de thème comme paramètre de configuration du compte, et étant habitué à nettoyer systématiquement mon navigateur après chaque session de navigation, je devais réactiver le thème sombre à chaque nouvelle session de navigation. Pire, utilisant depuis plus d’un an une extension chargée de procéder au nettoyage des cookies d’un onglet, quelques dizaines de secondes après la fermeture de celui-ci, je pouvais être amener à répéter l’opération plusieurs fois.

L’idée est donc venue assez rapidement de créer une extension Firefox pour cette tâche des plus simples. Il m’aura néanmoins fallu quelques heures de recherches et programmation, réparties sur plusieurs mois, avant de trouver une implémentation satisfaisante. Penchons-nous donc un peu sur la technique, sans toutefois rentrer trop dans les détails. Durant mes recherches, j’ai passé de long moment à lire le code source de la page HTML de YouTube, à parcourir les scripts utilisés, à tenter de comprendre la méthode de changement de thème et à essayer de déclencher le changement par appel direct de la bonne fonction, ou en copiant le fonctionnement de celle-ci. Pas d’avancées concrètes de ce côté-là, même après avoir identifié les parties de code mise en œuvre.

Lors de mes recherches, j’avais en autre découvert que l’activation du thème sombre conduisait à l’ajout d’un paramètre dark= »true » sur la balise <html> de la page. J’avais reproduit cet ajout dans mes premiers tests d’extension, sans arriver à un résultat satisfaisant. De mémoire, je crois me souvenir que quelques éléments n’étaient pas colorer correctement (d’autres éléments m’ont également conduit à rejeter cette solution incomplète, mais ne les ayant pas notés, je ne suis plus en mesure de les préciser).

Bref, la solution vers laquelle j’avais décidé de m’orienter consister simplement à écrire du code Javascript qui effectuerai les clics sur les différents éléments de l’interface à ma place. Pas de grande difficulté de ce côté là et j’avais réussi à obtenir une première version fonctionnelle. Celle-ci fonctionnait assez bien, mais un problème subsistait. En général, lors du premier affichage de la page, l’activation du thème sombre échouait, mais réussissait dès le rechargement de celle-ci, ou dès l’affichage d’une autre page. L’implémentation était insuffisante. J’ai donc chercher un moyen pour m’assurer de l’existence des éléments html du menu dans la page avant de permettre à mon extension d’essayer de cliquer dessus.

Après plusieurs tentatives infructueuses en utilisant de la récursivité et une vérification de l’état de la page via la propriété document.readyState, je suis tombé par hasard sur un article présentant les avantages de la fonction requestAnimationFrame. C’est muni de ces nouvelles informations que je suis enfin arrivé à une première version stable de l’extension. Désormais, celle-ci attend donc l’apparition des éléments de menu avant de tenter de cliquer sur les éléments pour tenter de passer au thème sombre. J’utilise l’attribut dark évoqué tout à l’heure pour savoir s’il faut déclencher le changement de thème ou non. De plus, j’ai intégré un mécanisme de sécurité afin de limiter la durée pendant laquelle l’extension tentera d’activer le thème. La limite est donc actuellement configurée à 10s, ce qui semble largement suffisant sur les quelques ordinateurs où j’ai testé l’extension.

Côté amélioration, il pourrait éventuellement être intéressant de pouvoir configurer le temps d’attente, pour pouvoir facilement l’augmenter au besoin. Je pense notamment à une utilisation sur des machines un peu « lentes » dans le chargement des pages web modernes. L’extension n’ayant pas de logo, il pourrait être utile d’en créer un un pour l’identifier plus facilement parmi les extensions installées. Je ne me suis pas pencher sur la question de l’implémentation de logs de débugage, qui permettraient de suivre le fonctionnement de l’extension en cas de dysfonctionnement. En effet, si l’extension fonctionne parfaitement sur tous mes navigateurs Firefox (vérifiée sur 3 instances différentes), l’activation du thème sombre échoue chez l’un de mes collègues de travail.

Passons maintenant au(x) mots de la fin pour clore cette présentation. Je suis très satisfait du fonctionnement de cette petite application, qui me rend désormais service au quotidien. C’était un bon sujet pour découvrir comment réaliser une extension pour Firefox, la tester, et demander son intégration au catalogue d’extensions. Le code source est bien entendu disponible sur Github, sous licence GPLv3. J’espère que cette extension pourra rendre service à ceux qui y trouveront un intérêt, et surtout, qu’elle fonctionnera chez ceux qui tenteront l’installation; et permettront de vérifier que mon extension ne fonctionne pas juste sur ma seule configuration de Firefox. Dans le cas contraire, nous pourront en discuter sur Github, ou dans les commentaires.

De l’idée à la réalisation d’un jeu de société

Que vous soyez parents ou enfants, jeune ou vieux si vous avez la fibre créatrice cette article est fait pour vous.

Il y a quelques jours j’ai fini le montage d’une vidéo. J’ai réalisé cette vidéo dans le but de partager ma passion pour la création. Je me suis fixé comme objectif de réaliser un jeu de société papier en utilisant le logiciel de dessin vectoriel Inkscape. Je ne sais pas si l’on peut appeler cette vidéo un tutoriel puisque je ne détail pas toutes les actions à réaliser. Je vous laisse juger par vous même.

La capture et l’édition de la vidéo m’a pris environ 5 heures. J’estime que le jeu que je présente dans la vidéo peut être réalisé en 2 ou 3 heures par un débutant. Ça peut être un bon moyen de passer du temps avec des enfants et faire une activité enrichissante tant pour eux que pour vous.

Créer son propre jeu de société, même si il est créé par ordinateur vous permettra

  • de découvrir le dessin vectoriel
  • d’avoir une activité artistique
  • de développer l’imagination
  • d’apprendre les réglages d’impression
  • de travailler manuellement la découpe et l’assemblage des pièces.

Je vous offre aussi la possibilité de passer directement à la découpe des pièces puis au jeu en vous donnant gratuitement et librement les images du jeu ou encore le fichier vectoriel pour ceux qui aimeraient le modifier

N’hésitez pas à vous abonner à la chaine Youtube et à y laisser un commentaire ou un pouce voir même une photo de votre propre jeu.

Let’s Encrypt. Enfin!

Cela fait pratiquement une éternité dans le monde de l’informatique que l’initiative Let’s Encrypt a été lancé. Je dois dire que si l’idée me plaisait beaucoup, au moment où les premières annonces avaient été faites, j’ai longtemps répugné à m’y mettre. Jusqu’à présent, j’utilisais StartSSL pour établir mes différents certificats. Avec quelques limitations bien sûr, un certificat par sous-domaine, génération d’une demande de certificat sur le serveur, transfert des infos vers StartSSL, récupération du certificat, transfert des fichiers sur le serveur et redémarrage d’Apache. De nombreuses opérations manuelles donc, mais une fois la procédure en place, c’est relativement rapide et les certificats ainsi générés sont valables un an. Pas de nécessité donc de mettre en place des certificats Let’s Encrypt, même si j’ai suivi les expérimentations des uns et des autres avec intérêt, et gardé en marque-page certains articles sur le sujet.

Tout allait bien dans le meilleur des mondes, jusqu’à la sortie de Firefox 51. En effet, à partir de cette version, Firefox (et Chrome aussi) arrête de faire confiance aux certificats signés par StartSSL après la date du 21 octobre 2016. Il se trouve, que deux de mes sous-domaines étaient concernés. Je me suis donc (re)plongé dans la documentation de certbot, pour découvrir l’outil et effectuer mes premiers tests.

L’ensemble a plutôt bien évolué par rapport à ce dont je me souvenais. Après plusieurs relectures et quelques tests, j’ai abouti à une procédure qui me convient. J’effectue donc la première demande de certificat manuellement, en conservant pour le moment l’isolation des sous-domaines qui m’avait été imposées par StartSSL. Je conserve ainsi une certaine liberté si je décide de migrer un service d’un serveur vers un autre. Je suis également arrivé à la configuration commune suivante, que je déploie à l’emplacement attendu par certbot, à savoir /etc/letsencrypt/cli.ini :

# Certbot Config

# Use a 4096 bit RSA key instead of 2048
rsa-key-size = 4096

# Register with the specified e-mail address
email = <e-mail>

# Use the standalone authenticator on port 80
authenticator = standalone
preferred-challenges = http-01

De cette manière, la demande d’un nouveau certificat pour un domaine reste concise, il n’est plus nécessaire de renseigner tous les paramètres du fichier de configuration et on obtient donc par exemple :

certbot-auto certonly -d www.unicoda.com

Une fois le certificat généré, les lignes suivantes sont nécessaires du côté d’Apache :

SSLCertificateFile /etc/letsencrypt/live/<domaine>/cert.pem
SSLCertificateKeyFile /etc/letsencrypt/live/<domaine>/privkey.pem
SSLCertificateChainFile /etc/letsencrypt/live/<domaine>/chain.pem

Redémarrage d’Apache que l’on avait arrêté le temps d’effectuer la procédure de demande de certificat et ça y est le navigateur affiche un fabuleux « Vérifié par : Let’s Encrypt ».

Du côté du renouvellement, je vais passer par la crontab pour qu’une vérification quotidienne des certificats soit effectuées. Le programme certbot s’occupant d’arrêter puis de redémarrer Apache :

certbot-auto renew --quiet --pre-hook "service apache2 stop" --post-hook "service apache2 start"

En théorie, le renouvellement automatique est donc en place, et le moment venu, les anciens certificats devraient être remplacés par des nouveaux sans que cela ne bouleverse (trop) le fonctionnement du site. Comme nous ne sommes jamais à l’abri d’une erreur de configuration malgré les nombreuses vérifications effectuées, et que je ne pourrais en être sûr qu’une fois les nouveaux certificats en place, je vous donne rendez-vous aux alentours du 26 mai 2017, date d’expiration du premier certificat Let’s Encrypt pour www.unicoda.com. Normalement, l’opération devrait être transparente pour tous, et je me réveillerais donc un matin (beau de préférence) avec un certificat tout neuf, sans avoir rien eu à faire.

Il ne reste plus qu’à patienter.

[ArchLinux] Partage Samba

J’ai installé, il y a de cela plusieurs mois, un serveur miniDLNA sur l’une de mes machines équipée d’Arch Linux pour pouvoir partager facilement du contenu multimédia sur le réseau local. Jusqu’à présent, j’effectuais le transfert de fichier vers cette machine en branchant directement un disque dur sur la machine, en m’y connectant en SSH, en montant le disque puis en copiant les données à coup de commande cp. J’ai également effectué quelques transferts en montant un répertoire distant de la machine sur ma machine principale via sshfs. Ces deux solutions fonctionnent plutôt bien. Je me tourne aujourd’hui vers la mise en place d’un partage Samba, afin d’être en mesure de déposer facilement des fichiers depuis Windows également. Voici donc les quelques étapes nécessaires à la mise en place d’un répertoire accessible en lecture écriture sans restriction.

# Installation de Samba
sudo pacman -S samba
# Mise en place du fichier de configuration par défaut
cp /etc/samba/smb.conf.default /etc/samba/smb.conf
# Edition de la configuration
sudo nano /etc/samba/smb.conf

Pour le partage d’un répertoire, j’ajoute les lignes suivantes dans le fichier configuration :

[Media]
 path = /vers/le/répertoire
 public = no
 writable = yes
 printable = no

Avec cette configuration, le répertoire est bien disponible en lecture écriture et visible sous Windows. Pour configurer plus précisément l’ensemble, il faudra regarder les autres options disponibles. Dans mon cas, cette configuration me permet de faire ce que j’espérais. Suite de l’installation :

# Démarrage des services
sudo systemctl start smbd.service
sudo systemctl start nmbd.service
# Mise en place du service au démarrage
sudo systemctl enable smbd.service
sudo systemctl enable nmbd.service
# Ajout du user système dans Samba
# A vérifier si nécessaire
sudo smbpasswd -a <user>
# Vérifier la syntaxe de la configuration
testparm -s

En cas de modification de la configuration, ne pas oublier de redémarrer le service :

sudo systemctl restart smbd.service

 

Informations issues de l’excellent wiki Arch Linux pour la page concernant Samba.

Création simple avec Inkscape : Bannière

Voilà ce matin l’envie de faire une bannière propre pour Unicoda m’est venue. Et tant qu’à faire autant vous faire profiter de quelques trucs et astuces, c’est par là :

Si besoin, téléchargez Inkscape.

Ce que vous pouvez réaliser en 5 minutes

Logo Unicoda

  1. Ouvrez Inkscape, puis allez dans « Propriétés du document… »
    Propriétés
  2. Dans les propriétés du document, modifiez les paramètres de taille, ici pour les bannières WordPress de 2016 la taille est de 1200x280px (pixels)
    PropriétésDuDocument
  3. Vous pouvez en bas de l’onglet sélectionner un fond uni pour éviter d’avoir à créer un rectangle de la couleur désirée en fond. Pour cela cliquez sur le bandeau de la couleur de fond qui ouvrira le panel à gauche « Couleur de fond »
    CouleursFond
  4. Maintenant il vous faut ajouter votre texte, pour cela cliquez sur cette icône « A » puis paramétrez comme bon vous semble
    Ecrire
  5. Si le panel de paramétrage qui devrait se trouver sur la droite de la zone de dessin n’est pas ouvert vous pouvez l’ouvrir en cliquant sur le bouton « T » qui se trouve dans la barre latérale de droite
    Ouvrir les panels
  6. Pour redimensionner le texte facilement cliquez en mode sélection (F1) ou l’icône pointeur de souris au haut de la barre latérale de gauche, puis pour garder les bons rapports hauteur / largueur maintenez la touche contrôle et déplacer une des flèches se trouvant dans les coins de la sélection
    Redimensionnement
  7. Dans le panel de droite se trouve le bouton « Aligner et distribuer des objets » qui vous permet d’ouvrir l’onglet suivant. Cet onglet permettra d’aligner le texte « relativement à : » sélectionnez ici « Page » puis centrez le texte selon l’axe vertical et horizontal. Voilà votre texte est centré il ne vous reste plus qu’à enregistrer en svg et exporter en png « Fichier -> Exporter une image png… »
    Aligner
  8. Voilà c’est fini pour aujourd’hui ! J’espère que l’explication est assez détaillée.