Projets – Unicoda

YtAutoDark – Quelques mots sur la version 3.1

Un utilisateur m’ayant remonté aujourd’hui un dysfonctionnement sur l’extension, j’ai pris quelques heures ce soir pour procéder à quelques améliorations et correction du code.

Ces dernières semaines, il semble que YouTube procède à de nombreux changements de l’interface, de manière incrémentale et unitaire. Parfois visible, parfois invisible et changeant légèrement la structure du code de la page, obligeant à détecter et prendre en compte ces changements pour s’assurer que l’extension continue de fonctionner correctement. Pour ne pas nous faciliter la tâche, YouTube ne déploie en général un nouveau design, que pour une fraction d’utilisateur, allant parfois même jusqu’à revenir complètement au design précédent après quelques jours. Ce qui est bien entendu frustrant pour l’utilisateur et moi-même, qui nous retrouvons parfois avec le menu ouvert et l’extension bloquée dans le processus d’activation du thème sombre.

Du côté des modifications, l’icône d’ajout de vidéo disparaît dans l’un des designs que j’ai obtenu dans mon navigateur, changeant ainsi l’index du bouton d’ouverture du menu. Petit modification du code pour ne plus utiliser un index statique pour la sélection de l’élément sur lequel cliquer.

Une autre modification, que je ne suis pas parvenu à identifier clairement, a fait apparaître un blocage dans les étapes du processus d’activation, celui-ci n’arrivant plus à détecter que le menu avait bien été ouvert. Le menu restait donc ouvert pendant une dizaine de secondes avant que le code de fallback ne prenne le relais pour une dernière tentative. Ce problème ne devrait plus se produire avec les modifications apportées dans cette nouvelle version.

Les quelques tests, que j’ai réussi à effectuer sur les deux designs différents qui cohabitent actuellement, n’ont pas fait apparaître de dysfonctionnement. Comme toujours, si un problème venait à apparaître, n’hésitez pas à me le signaler sur Github ou en commentaire. Je termine en vous annonçant que cette version 3.1.0 est déjà disponible pour Firefox et en attente de validation pour Chrome.

Bonne nuit et à bientôt.

YtAutoDark – Version 3.0

J’ai passé plusieurs soirées la semaine dernière à écrire du code pour mon extension YtAutoDark. C’est donc avec une certaine satisfaction que je vous annonce que la version 3.0 est disponible sous Firefox et Chrome depuis le 25 juillet !

Pour cette nouvelle version, je me suis concentré sur des fonctionnalités des extensions que j’avais toujours voulu explorer: la page d’installation/mise à jour et les paramètres. C’est désormais chose faite. L’événement qui a justifié une nouvelle version pour cet été 2020, c’est l’arrivée d’une pull request sur le dépôt Github de l’extension. Un utilisateur a apporté des modifications à l’extension de son côté pour répondre à des besoins qui lui sont propres et a ensuite proposé que les modifications soient intégrées dans le code parent.

Les modifications apportées concernent en particulier les conditions de déclenchement de l’extension, afin que celle-ci suive la sélection du thème sombre ou clair effectuée par l’utilisateur au niveau du système d’exploitation ou du navigateur, via la propriété prefers-color-scheme. Une deuxième condition définie des règles horaires, respectivement avant et après deux bornes horaires pour le choix du thème. Si l’heure actuelle est inférieure à la première borne ou supérieure à la deuxième, le thème sombre sera activé, sinon l’extension rétablira le thème clair.

Afin de faire profiter les utilisateurs de ces ajouts et sans forcer pour tous ce comportement, j’ai donc ajouté une page de gestion des paramètres de l’extension, permettant d’activer au cas par cas l’une ou l’autre des fonctionnalités et de configurer les bornes horaires. J’en ai profité pour utiliser l’api storage dans sa version synchronisée, afin que les paramètres choisis soient partagés entre les différentes instances de navigateur d’un utilisateur authentifié. On notera au passage que si la partie sync n’est pas disponible, la configuration sera enregistrée automatiquement dans la partie locale du storage.

Deuxième ajout, la création d’une page d’information affichée après l’installation de l’extension, ou après sa mise à jour en cas de version majeure. Cette page me permet de m’adresser aux utilisateurs de l’extension, pour les informer des changements effectués. C’est un bon moyen, je trouve, pour prévenir de modifications du code s’exécutant dans le navigateur et de leur impact. De ce côté là, j’ai appris, après une bonne heure de recherche, que l’initialisation du listener sur l’événement onInstalled doit absolument être effectué dans le background script et non dans le content script. Ce qui est plutôt logique une fois que l’on connaît la solution.

Derniers ajouts, invisible ou presque, c’est la traduction de toutes les chaînes de caractères en français, afin de fournir l’extension dans ma langue maternelle à mes compatriotes français et autres francophones du monde. Et enfin, utilisation de webextension polyfill, pour l’utilisation des fonctions de stockage sous Chrome via browser comme mentionné dans la spécification et non chrome.

Avant de se quitter, petit point statistique. YtAutoDark, c’est, en cette fin juillet 2020, 141 utilisateurs actifs sous Firefox et 23 sous Chrome. Chers utilisateurs, si vous me lisez ici et que vous veniez à constater un dysfonctionnement de l’extension, n’hésitez pas à me le signaler ici en commentaires, ou en ouvrant une issue sur Github. Moi-même utilisateur quotidien de mon extension, je suis bien évidemment à l’affut du moindre bogue. Si vous en dénichez un, vous savez donc quoi faire.

HIIT Timer

Premier semestre 2014. Alors en stage de fin d’étude à Lyon, j’ai pratiqué l’escrime médiévale avec la compagnie des corbeaux et c’est à l’occasion de l’un des entraînements que j’ai découvert une première forme d’entraînement fractionné. En effet, pour terminer l’entraînement, nous avions pris l’habitude d’effectuer une sorte de « circuit d’entraînement » (ou circuit training en anglais), sous la forme d’une série d’exercices physiques à exécuter l’un après l’autre. Cela dans le but de renforcer les corps, bras, poignets et autres muscles et articulations, mis à rude épreuve par le maniement d’un bout de métal allant de 1,5 à 2kg environ, à savoir l’épée. L’enchaînement s’effectuant de la manière suivante: 30 secondes d’exercices, puis 30 secondes de repos, pendant lesquelles nous changions d’atelier.

La découverte du principe d’entraînement fractionnée s’est ensuite prolongée dans mes entraînements de roller de vitesse, cette fois avec l’apparition de séries et de blocs. Enfin plus récemment, j’ai pris connaissance du mode d’entraînement dit « fractionné à haute intensité », souvent plus connu sous son acronyme anglais HIIT pour « High Intensity Interval Training ». Avec la déclaration du confinement et les restrictions liées concernant la pratique des sports, je me suis donc mis en tête d’écrire une application simple permettant de configurer une telle session d’entraînement.

Mon cahier des charges était simple, pouvoir configurer les temps d’exercice, pause, repos, ainsi que le nombre d’intervalles et de blocs. Une fois l’entraînement démarré, fournir un compte à rebours pour chaque étape, avec avertissement sonore pour indiquer la fin de la période. Le tout sous la forme d’un site web disponible en PWA, afin de pouvoir être utilisé sur mobile.

Ce petit projet tourne pour le moment dans un App Engine sur la Google Cloud Platform et j’en ai donc profité pour mettre en place un système bien pratique de déploiement automatique après publication de nouveau code dans le dépôt git.

Par ailleurs, il est dommage que la fonctionnalité « wake lock » ne soit pas encore disponible côté mobile, afin d’empêcher le téléphone de se mettre en veille, après demande d’autorisation auprès de l’utilisateur. Pour éviter que l’écran s’éteigne, il faut alors changer la durée avant mise en veille avant de commencer l’entraînement, ou tapoter l’écran régulièrement à chaque période de repos. J’envisage également de supprimer la période de repos constituant la dernière étape de la séquence; à voir à l’usage.

Trêves de bavardage, vous pouvez découvrir l’outil à l’adresse suivante :

hiit.unicoda.com

YtAutoDark – Publication de la version 2

Youtube ayant mis à jour le code des menus de ses pages, j’ai constaté depuis quelques jours que lorsque mon extension avait terminé d’effectuer l’activation du thème sombre de Youtube, le menu n’était pas fermé automatiquement comme avant.

Après quelques heures à parcourir une nouvelle fois le code HTML du site, je suis parvenu à une nouvelle version qui me semble satisfaisante. Le processus est bien plus lent qu’avant car celui-ci doit attendre le chargement du contenu des menus, arrivé avec le nouveau code de Youtube, ce qui n’était pas totalement nécessaire. J’ai également ralenti un peu l’enchaînement des étapes du processus d’activation du thème sombre, il n’est pas impossible que je le diminue ou le supprime complètement dans les prochaines semaines, une fois que j’aurais l’assurance de la stabilité de cette version.

Côté modification, j’ai également allongé le temps pendant lequel l’extension tente de procéder au changement, celui-ci passe de 10 à 15 secondes, car j’ai constaté des temps de chargement du contenu des menus de plusieurs secondes au moment des tests. Une fois ces 15 secondes écoulées, si le thème sombre n’est pas activé, l’extension repasse sur l’ancienne manière de réaliser l’activation avec une fenêtre de 10 secondes (celle-ci étant toujours fonctionnelle, avec néanmoins le problème cosmétique du menu restant ouvert).

Enfin, dans les modifications non visibles pour l’utilisateur, j’ai ajouté un système de log me permettant de suivre les actions effectuées par l’extension et ainsi de faciliter le débogage en cas de problème. Afin de s’assurer de ne pas conserver les logs activés dans la version publiée de l’extension, j’ai écrit quelques lignes en NodeJs, pour vérifier l’état d’activation des logs et faire échouer l’étape de build si besoin.

La version Chrome a également été mise à jour. Par ailleurs, j’ai constaté par hasard que l’interface Youtube change lorsqu’on navigue en étant connecté avec un compte Google, ce qui n’est pas mon cas, sauf dans mon navigateur professionnel avec mon compte pro. Les menus utilisés par l’extension n’étant pas présent (en tout cas, pas totalement au même endroit), il n’est pas dit que l’extension fonctionne pour les personnes connectées à Youtube. De plus, je me demande si le paramètre du thème n’est pas retenu dans les paramètres liés au compte, dans le cas d’une navigation en mode connecté. Quoi qu’il en soit, ce point n’est pas une priorité pour le moment; j’y jetterais peut-être un œil par curiosité si je décide d’y accorder du temps.

Comme toujours, j’espère que l’extension pourra être utile à ceux qui l’auront installé et qu’elle continuera de fonctionner chez le plus grand nombre, aussi bien qu’elle fonctionne dans mon navigateur. Commentaires et remarques à la suite ou sur Github, et si l’extension vous plaît, 5 petites étoiles sur la page de l’extension font toujours plaisir.

YtAutoDark – Publication sur le Chrome Web Store

En ce début d’année, j’ai pris un peu de temps pour effectuer quelques modifications cosmétiques sur l’extension YtAutodark publiée en octobre sur Firefox et que j’avais présenté dans l’article [Extension Firefox] yt-auto-dark. Ajout d’une icône relativement simple, gestion des langues dans un dossier dédié et modification d’autres propriétés du manifest de l’extension pour pouvoir la publier également dans le Chrome Web Store.

L’extension est donc dès à présent disponible pour Chrome sous le nom Thème Sombre Automatique pour Youtube™.