Avant de passer \u00e0 la solution que j’ai mise en place pour arriver \u00e0 quelque chose de satisfaisant, voici la situation irritante en images.<\/p>\n\n\n\n
Avant, un flux n’avait que trois ent\u00eates: \u00ab\u00a0Today\u00a0\u00bb, \u00ab\u00a0Yesterday\u00a0\u00bb et \u00ab\u00a0Before yesterday\u00a0\u00bb.<\/p>\n\n\n\n Et d\u00e9sormais, avec une ent\u00eate par jour, on obtient quelque chose comme cela:<\/p>\n\n\n\n Quelle est donc la solution, me direz-vous ?<\/p>\n\n\n\n Les discussions sur GitHub proposent d’activer l’extension \u00ab\u00a0User CSS\u00a0\u00bb et d’ajouter la r\u00e8gle suivante:<\/p>\n\n\n\n Ce qui a pour effet de faire dispara\u00eetre toutes les ent\u00eates. C’est mieux, mais insuffisant \u00e0 mon go\u00fbt. J’ai vraiment l’impression de perdre en lisibilit\u00e9, car je ne peux plus distinguer les entr\u00e9es r\u00e9centes (les deux derniers jours) des entr\u00e9es plus anciennes. En continuant d’exp\u00e9rimenter avec des r\u00e8gles CSS plus complexes pour tenter d’arriver \u00e0 une pr\u00e9sentation me convenant, j’aper\u00e7ois un bouton permettant d’activer l’extension \u00ab\u00a0User JS\u00a0\u00bb. Ayant pass\u00e9 de nombreuses ann\u00e9es \u00e0 exp\u00e9rimenter et construire des solutions avec du JS, un d\u00e9but d’id\u00e9e commence \u00e0 germer dans mon esprit. Avec l’aide d’un MutationObserver pour intercepter les changements du DOM, je devrais \u00eatre en mesure de d\u00e9tecter l’ajout des ent\u00eates dans le DOM et de ne garder que les trois premi\u00e8res, retrouvant ainsi une pr\u00e9sentation proche de la version historique \u00e0 laquelle je suis habitu\u00e9.<\/p>\n\n\n\n Apr\u00e8s quelques it\u00e9rations, voici donc le code que j’utilise:<\/p>\n\n\n\n Ce qui nous donne le r\u00e9sultat suivant:<\/p>\n\n\n\n On constate imm\u00e9diatement que l’information est bien plus condens\u00e9e et qu’il y a, \u00e0 mon go\u00fbt, moins d’espace perdu. Je me rends compte en \u00e9crivant ces lignes, que les labels que j’utilise ne correspondent toutefois plus vraiment. En effet, dans mon exemple avec le flux xkcd, les deux entr\u00e9es les plus r\u00e9centes ont \u00e9t\u00e9 re\u00e7ues le lendemain de leur publication, mais \u00e0 deux jours d’intervalles. Mon affichage \u00ab\u00a0Aujourd’hui\u00a0\u00bb (\u00ab\u00a0Today\u00a0\u00bb) et \u00ab\u00a0Hier\u00a0\u00bb (\u00ab\u00a0Yesterday\u00a0\u00bb), est donc inexacte, mais correspond en tout cas \u00e0 un regroupement qui me convient. Apr\u00e8s r\u00e9flexion, je m’oriente donc vers un d\u00e9coupage \u00ab\u00a0Latest\u00a0\u00bb, \u00ab\u00a0Previous\u00a0\u00bb et \u00ab\u00a0Older\u00a0\u00bb.<\/p>\n\n\n\n Pour avoir utilis\u00e9 cette solution au quotidien depuis maintenant plusieurs semaines, je suis tout \u00e0 fait satisfait du r\u00e9sultat. Bien s\u00fbr, il y a parfois quelques clignotements dans l’interface, le temps que le code s’ex\u00e9cute et que les ent\u00eates soient cach\u00e9es ou que leur titre change, mais rien qui ne soit g\u00eanant.<\/p>\n","protected":false},"excerpt":{"rendered":" \u00c9tant en train de faire de nombreux changements dans mon homelab, tant du c\u00f4t\u00e9 de l’infrastructure que des outils, en passant par la sauvegarde. Je m’attarde aujourd’hui sur un point annexe rencontr\u00e9 lors de la migration de mon instance FreshRSS. Bien occup\u00e9 par d’autres pr\u00e9occupations ces derni\u00e8res ann\u00e9es, la mise \u00e0 jour de certains services … Continuer la lecture de « FreshRSS : Retrouver une interface \u00e9pur\u00e9e gr\u00e2ce au MutationObserver »<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[615,13],"class_list":["post-4712","post","type-post","status-publish","format-standard","hentry","category-code","tag-freshrss","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/4712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4712"}],"version-history":[{"count":9,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/4712\/revisions"}],"predecessor-version":[{"id":4725,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/4712\/revisions\/4725"}],"wp:attachment":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/www.unicoda.com\/wp-content\/uploads\/2026\/04\/FreshRSS-screenshot-1024x632.png\")
<\/a><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.unicoda.com\/wp-content\/uploads\/2026\/04\/image-571x1024.png\"){kind=spacer}
<\/a><\/figure>\n\n\n\n .transition {\n display: none;\n }<\/code><\/pre>\n\n\n\nconst labels = ['Today', 'Yesterday', 'Before yesterday'];\nlet transitionCount = 0;\n\nfunction processTransition(el) {\n const i = transitionCount++;\n if (i >= 3) {\n el.style.display = 'none';\n } else {\n const link = el.querySelector('.transition-value a:first-child');\n if (link) {\n link.textContent = labels[i];\n }\n }\n}\n\nconst main = document.querySelector('main');\nmain.querySelectorAll('.transition').forEach(processTransition);\n\nconst observer = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n for (const node of mutation.addedNodes) {\n if (node.nodeType !== 1) {\n continue;\n }\n if (node.classList?.contains('transition')) {\n processTransition(node);\n } else {\n node.querySelectorAll?.('.transition').forEach(processTransition);\n }\n }\n }\n});\n\nobserver.observe(main, { childList: true, subtree: true });<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/www.unicoda.com\/wp-content\/uploads\/2026\/04\/image-1-582x1024.png\")
<\/a><\/figure>\n\n\n\n