<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
    <title>Colas.Nahaboo.net - web</title>
    <subtitle>Colas Nahaboo personal site, with discussions about programming code, web and computing topics, surfing and SUPing, and various musings.</subtitle>
    <link rel="self" type="application/atom+xml" href="https://colas.nahaboo.net/tags/web/atom.xml"/>
    <link rel="alternate" type="text/html" href="https://colas.nahaboo.net"/>
    <generator uri="https://www.getzola.org/">Zola</generator>
    <updated>2026-04-13T00:00:00+00:00</updated>
    <id>https://colas.nahaboo.net/tags/web/atom.xml</id>
    <entry xml:lang="en">
        <title>Save these Firefox tabs for later</title>
        <published>2026-04-13T00:00:00+00:00</published>
        <updated>2026-04-13T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://colas.nahaboo.net/code/save-these-firefox-tabs-for-later/"/>
        <id>https://colas.nahaboo.net/code/save-these-firefox-tabs-for-later/</id>
        
        <content type="html" xml:base="https://colas.nahaboo.net/code/save-these-firefox-tabs-for-later/">&lt;p&gt;I often look for some concept out of curiority, and end up with tens of browser tabs opened on the subject, and realize that I have no time now to pursue this rabbit into his hole, end up with tons of Firefox windows with tens of tabs gathering dust (and eating RAM) on my desktop. Up to now I just created Foswiki pages or Trello tasks as reminders to tackle these projects later on, but it required enough manual work to often postpone doing it and either losing the info or be swamped in thousands of tabs. And saving them as Firefox bookmarks was cumbersome and required lots of manual management.&lt;&#x2F;p&gt;
&lt;p&gt;What I decided to do is a simple way to save all these tabs offline, and be able to re-open the window simply. I bundle them into what I call &lt;strong&gt;.ffst files&lt;&#x2F;strong&gt; (for FireFox Saved Tabs), simple text files of one url per line, into a &lt;code&gt;~&#x2F;firefox-savedtabs&#x2F;&lt;&#x2F;code&gt; directory.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Saving a set of tabs&lt;&#x2F;strong&gt;:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Select the tabs (click on the first one, shift-click on the last one)&lt;&#x2F;li&gt;
&lt;li&gt;Open the right-mouse-button menu on a tab, and select &lt;code&gt;Copy URLs&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;Create a new file (e.g: &lt;code&gt;some-name.ffst&lt;&#x2F;code&gt;) in the &lt;code&gt;~&#x2F;firefox-savedtabs&#x2F;&lt;&#x2F;code&gt; directory with your favorite editor,&lt;&#x2F;li&gt;
&lt;li&gt;Paste the tabs into it,&lt;&#x2F;li&gt;
&lt;li&gt;Save.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Restoring the tabs into a new window:&lt;&#x2F;strong&gt; either by:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;running the script below &lt;code&gt;firefox-savedtabs-restore&lt;&#x2F;code&gt; without arguments, and choosing which file to restore.&lt;&#x2F;li&gt;
&lt;li&gt;running the script with the ffst file as argument:&lt;br &#x2F;&gt;
&lt;code&gt;firefox-savedtabs-restore some-name.ffst&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;Browsing the directory  &lt;code&gt;~&#x2F;firefox-savedtabs&#x2F;&lt;&#x2F;code&gt; in a file explorer window, and choosing to open the .ffst file with &lt;code&gt;Firefox SavedTabs restore&lt;&#x2F;code&gt; once you have created the &lt;code&gt;~&#x2F;.local&#x2F;share&#x2F;applications&#x2F;firefox-savedtabs.desktop&lt;&#x2F;code&gt; file below&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;I can thus just mention the .ffstr file in my various &quot;todo&quot; places (TODO lists, TODO files, pinboard, wikis, trello, ...)&lt;&#x2F;p&gt;
&lt;p&gt;Note that you can adapt this to any browser, and choose whatever directory name and file extension you want.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Updating&lt;&#x2F;strong&gt; the tabs is just re-copying the urls and re-pasting in the file.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-two-scripts-are&quot;&gt;The two scripts are:&lt;a class=&quot;zola-anchor&quot; href=&quot;#the-two-scripts-are&quot; aria-label=&quot;Anchor link for: the-two-scripts-are&quot;&gt;🔗&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;
&lt;h3 id=&quot;usr-local-bin-firefox-savedtabs-restore&quot;&gt;&#x2F;usr&#x2F;local&#x2F;bin&#x2F;firefox-savedtabs-restore&lt;a class=&quot;zola-anchor&quot; href=&quot;#usr-local-bin-firefox-savedtabs-restore&quot; aria-label=&quot;Anchor link for: usr-local-bin-firefox-savedtabs-restore&quot;&gt;🔗&lt;&#x2F;a&gt;&lt;&#x2F;h3&gt;
&lt;p&gt;Note that you can modify in it the &lt;code&gt;restore&lt;&#x2F;code&gt; function to use with another browser.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #4C4F69; background-color: #EFF1F5;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #EA76CB;font-style: italic;&quot;&gt;#!&#x2F;bin&#x2F;bash&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7C7F93;font-style: italic;&quot;&gt;# shellcheck disable=SC1090,SC2155,SC2046 # source files, declare&amp;amp;assign&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7C7F93;font-style: italic;&quot;&gt;# restore saved tabs bundles (text files of urls, one per line)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;dir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;$HOME&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&#x2F;firefox-savedtabs&#x2F;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #1E66F5;font-style: italic;&quot;&gt;restore&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7C7F93;&quot;&gt;(){&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #1E66F5;font-style: italic;&quot;&gt;    mapfile&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; -t urls&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E64553;font-style: italic;&quot;&gt;$1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #1E66F5;font-style: italic;&quot;&gt;    firefox&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; --new-window &amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;${urls&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7C7F93;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt;@&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7C7F93;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #D20F39;font-style: italic;&quot;&gt;    exit&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FE640B;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7C7F93;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #8839EF;&quot;&gt;if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7C7F93;&quot;&gt; [[&lt;&#x2F;span&gt;&lt;span&gt; $#&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FE640B;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7C7F93;&quot;&gt; ]];&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8839EF;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7C7F93;font-style: italic;&quot;&gt;    # Without args, list the saves, most recent first, and prompt to restore&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #D20F39;font-style: italic;&quot;&gt;    echo&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; &amp;quot;In ~&#x2F;.firefox-savedtabs&#x2F;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #D20F39;font-style: italic;&quot;&gt;    cd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; &amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;$dir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt; ||&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D20F39;font-style: italic;&quot;&gt; exit&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FE640B;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #8839EF;&quot;&gt;    select&lt;&#x2F;span&gt;&lt;span&gt; i in &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7C7F93;&quot;&gt;$(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #1E66F5;font-style: italic;&quot;&gt;find&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; . -type f -name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #EA76CB;&quot;&gt; \*&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;.ffst&lt;&#x2F;span&gt;&lt;span style=&quot;color: #EA76CB;&quot;&gt; \&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;                    -printf &amp;#39;%TY-%Tm-%Td.%THh%TM:%TS %h&#x2F;%f\n&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt; |&lt;&#x2F;span&gt;&lt;span style=&quot;color: #EA76CB;&quot;&gt; \&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #1E66F5;font-style: italic;&quot;&gt;                   sed&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; -e &amp;#39;s| [.]&#x2F;|_|&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt; |&lt;&#x2F;span&gt;&lt;span style=&quot;color: #1E66F5;font-style: italic;&quot;&gt; sort&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; -r&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt; |&lt;&#x2F;span&gt;&lt;span style=&quot;color: #EA76CB;&quot;&gt; \&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #1E66F5;font-style: italic;&quot;&gt;                   sed&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; -re &amp;#39;s&#x2F;:[0-9]{2}[.][0-9]*&#x2F;&#x2F;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7C7F93;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8839EF;&quot;&gt; do&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #1E66F5;font-style: italic;&quot;&gt;        restore&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; &amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;${i&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt;#*&lt;&#x2F;span&gt;&lt;span&gt;_}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #8839EF;&quot;&gt;    done&lt;&#x2F;span&gt;&lt;span&gt;            &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #8839EF;&quot;&gt;else&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7C7F93;font-style: italic;&quot;&gt;    # with a file name or path, restore the window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    file&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E64553;font-style: italic;&quot;&gt;$1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #8839EF;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7C7F93;&quot;&gt; [[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt; -e&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; &amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;$file&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7C7F93;&quot;&gt; ]];&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8839EF;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #1E66F5;font-style: italic;&quot;&gt;        restore&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; &amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;$file&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #8839EF;&quot;&gt;    elif&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt; !&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7C7F93;&quot;&gt; [[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt; -e&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; &amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;$file&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7C7F93;&quot;&gt; ]] &amp;amp;&amp;amp; [[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt; -e&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; &amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;$dir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;$file&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7C7F93;&quot;&gt; ]];&lt;&#x2F;span&gt;&lt;span style=&quot;color: #8839EF;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        file&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;$dir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;$file&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #1E66F5;font-style: italic;&quot;&gt;        restore&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; &amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;$file&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #8839EF;&quot;&gt;    else&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #D20F39;font-style: italic;&quot;&gt;        echo&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; &amp;quot;***Error: file not found: &lt;&#x2F;span&gt;&lt;span style=&quot;color: #EA76CB;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;$file&lt;&#x2F;span&gt;&lt;span style=&quot;color: #EA76CB;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt; in &lt;&#x2F;span&gt;&lt;span&gt;$dir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #40A02B;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #D20F39;font-style: italic;&quot;&gt;        exit&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FE640B;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #8839EF;&quot;&gt;    fi&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #8839EF;&quot;&gt;fi&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;local-share-applications-firefox-savedtabs-desktop&quot;&gt;~&#x2F;.local&#x2F;share&#x2F;applications&#x2F;firefox-savedtabs.desktop&lt;a class=&quot;zola-anchor&quot; href=&quot;#local-share-applications-firefox-savedtabs-desktop&quot; aria-label=&quot;Anchor link for: local-share-applications-firefox-savedtabs-desktop&quot;&gt;🔗&lt;&#x2F;a&gt;&lt;&#x2F;h3&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #4C4F69; background-color: #EFF1F5;&quot;&gt;&lt;code data-lang=&quot;ini&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7C7F93;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #DF8E1D;&quot;&gt;Desktop Entry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7C7F93;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #1E66F5;&quot;&gt;Name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;Firefox SavedTabs restore&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7C7F93;font-style: italic;&quot;&gt;# update-desktop-database ~&#x2F;.local&#x2F;share&#x2F;applications&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #1E66F5;&quot;&gt;Exec&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;usr&#x2F;local&#x2F;bin&#x2F;firefox-savedtabs-restore %u&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #1E66F5;&quot;&gt;Type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;Application&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #1E66F5;&quot;&gt;Terminal&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;false&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #1E66F5;&quot;&gt;MimeType&lt;&#x2F;span&gt;&lt;span style=&quot;color: #179299;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;x-scheme-handler&#x2F;x-firefox-savedtabs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7C7F93;font-style: italic;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Explicit Action Pattern keeps you in the flow</title>
        <published>2026-04-05T00:00:00+00:00</published>
        <updated>2026-04-05T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://colas.nahaboo.net/code/explicit-action-pattern-keeps-you-in-the-flow/"/>
        <id>https://colas.nahaboo.net/code/explicit-action-pattern-keeps-you-in-the-flow/</id>
        
        <content type="html" xml:base="https://colas.nahaboo.net/code/explicit-action-pattern-keeps-you-in-the-flow/">&lt;p&gt;When designing interfaces for tools for my personal use, I have been using what I call an &lt;strong&gt;Explicit Action Pattern&lt;&#x2F;strong&gt;, the opposite of modal design. Due to the general trend towards minimalism of modern UI practice, it is not used a lot, but I think it should, and here is why.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;examples&quot;&gt;Examples&lt;a class=&quot;zola-anchor&quot; href=&quot;#examples&quot; aria-label=&quot;Anchor link for: examples&quot;&gt;🔗&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;

&lt;table style=&#x27;background-color: #f0f7ff;&#x27;&gt;
  &lt;tr&gt;
    &lt;th&gt;Explicit Action Pattern&lt;&#x2F;th&gt;&lt;th&gt;Modal Design&lt;&#x2F;th&gt;
  &lt;&#x2F;tr&gt;
  &lt;tr&gt;
    &lt;td style=&#x27;padding-right:2em;&#x27;&gt;
      &lt;div&gt;&lt;b&gt;Initial Search&lt;&#x2F;b&gt;&lt;&#x2F;div&gt;
      &lt;form style=&#x27;display:inline&#x27;&gt;
        &lt;input name=search value=&quot;&quot; size=24&gt;
          &lt;input type=submit value=&#x27;SEARCH ALL&#x27; style=&#x27;font-weight:bold&#x27;&gt;
      &lt;&#x2F;form&gt;
      &lt;br&gt;
      &lt;form style=&#x27;display:inline&#x27;&gt;
        &lt;input name=search value=&quot;&quot; size=24&gt;
        &lt;input type=submit value=&#x27;Search Movie&#x27;&gt;
      &lt;&#x2F;form&gt;
      &lt;br&gt;
      &lt;form style=&#x27;display:inline&#x27;&gt;
        &lt;input name=search value=&quot;&quot; size=24&gt;
        &lt;input type=submit value=&#x27;Search Music&#x27;&gt;
      &lt;&#x2F;form&gt;
      &lt;br&gt;
      &lt;form style=&#x27;display:inline&#x27;&gt;
        &lt;input name=search value=&quot;Alan Cooper&quot; size=24&gt;
        &lt;input type=submit value=&#x27;Search EBook&#x27;&gt;
      &lt;&#x2F;form&gt;
    &lt;&#x2F;td&gt;
    &lt;td&gt;
      &lt;form style=&#x27;display:inline&#x27;&gt;
        &lt;input name=search value=&quot;Alan Cooper&quot; size=24&gt;
        &lt;input type=submit value=&#x27;Search&#x27;&gt;
        &lt;br&gt;
        &lt;input type=&quot;radio&quot; id=&quot;0&quot; name=&quot;movie&quot; value=&quot;all&quot; &#x2F;&gt;
        &lt;label for=&quot;0&quot;&gt;&lt;b&gt;All&lt;&#x2F;b&gt;&lt;&#x2F;label&gt;
        &lt;input type=&quot;radio&quot; id=&quot;1&quot; name=&quot;movie&quot; value=&quot;movie&quot; &#x2F;&gt;
        &lt;label for=&quot;1&quot;&gt;movie&lt;&#x2F;label&gt;
        &lt;input type=&quot;radio&quot; id=&quot;2&quot; name=&quot;movie&quot; value=&quot;music&quot; &#x2F;&gt;
        &lt;label for=&quot;2&quot;&gt;music&lt;&#x2F;label&gt;
        &lt;input type=&quot;radio&quot; id=&quot;3&quot; name=&quot;movie&quot; value=&quot;ebook&quot; checked &#x2F;&gt;
        &lt;label for=&quot;3&quot;&gt;ebook&lt;&#x2F;label&gt;
      &lt;&#x2F;form&gt;
    &lt;&#x2F;td&gt;
  &lt;&#x2F;tr&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;div&gt;&lt;b&gt;Search results...&lt;&#x2F;b&gt;&lt;&#x2F;div&gt;
      &lt;form style=&#x27;display:inline&#x27;&gt;
        &lt;input name=search size=24 value=&quot;&quot;&gt;
        &lt;input type=submit value=Search&gt;
      &lt;&#x2F;form&gt;
      &lt;br&gt;
      &lt;form style=&#x27;display:inline&#x27;&gt;
        &lt;input name=search value=&quot;Alan Cooper&quot; size=24&gt;
        &lt;input type=submit value=&quot;Re Search&quot;&gt;
      &lt;&#x2F;form&gt;
    &lt;&#x2F;td&gt;
    &lt;td&gt;
      &lt;form style=&#x27;display:inline&#x27;&gt;
        &lt;input name=search value=&quot;Alan Cooper&quot; size=24&gt;
        &lt;input type=submit value=&#x27;Search&#x27;&gt;
        &lt;input type=submit value=&#x27;Clear&#x27;&gt;
        &lt;br&gt;
        &lt;input type=&quot;radio&quot; id=&quot;0&quot; name=&quot;movie&quot; value=&quot;all&quot; &#x2F;&gt;
        &lt;label for=&quot;0&quot;&gt;&lt;b&gt;All&lt;&#x2F;b&gt;&lt;&#x2F;label&gt;
        &lt;input type=&quot;radio&quot; id=&quot;1&quot; name=&quot;movie&quot; value=&quot;movie&quot; &#x2F;&gt;
        &lt;label for=&quot;1&quot;&gt;movie&lt;&#x2F;label&gt;
        &lt;input type=&quot;radio&quot; id=&quot;2&quot; name=&quot;movie&quot; value=&quot;music&quot; &#x2F;&gt;
        &lt;label for=&quot;2&quot;&gt;music&lt;&#x2F;label&gt;
        &lt;input type=&quot;radio&quot; id=&quot;3&quot; name=&quot;movie&quot; value=&quot;ebook&quot; checked &#x2F;&gt;
        &lt;label for=&quot;3&quot;&gt;ebook&lt;&#x2F;label&gt;
      &lt;&#x2F;form&gt;
    &lt;&#x2F;td&gt;
  &lt;&#x2F;tr&gt;
&lt;&#x2F;table&gt;

&lt;p&gt;As you can see in the top row, for searching an ebook, I will &quot;flow&quot; through the form from left to right, filling the relevant field and hitting the return key, or pressing the &quot;Search EBook&quot; button. But with the traditional modal design, choosing the radio button &quot;ebook&quot; breaks my flow of entry.&lt;&#x2F;p&gt;
&lt;p&gt;On the second row, you can see how I use this design for providing a &quot;search again&quot; form, where I can choose to enter a new search, or edit the previous one by selecting the relevant search box. It treats the search interface like a REPL (Read-Eval-Print Loop) rather than a static webpage. Whereas in the traditional way, I would have to break my flow to go hit the &quot;Clear&quot; button to empty the field.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;interaction-flow&quot;&gt;Interaction flow&lt;a class=&quot;zola-anchor&quot; href=&quot;#interaction-flow&quot; aria-label=&quot;Anchor link for: interaction-flow&quot;&gt;🔗&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;
&lt;p&gt;So, rather than breaking the flow of the interactions to set modes, you just flow seamlessly into branches of the decision tree. If we take a car driving analogy, you just choose a direction when encountering a fork in the road, rather than having to get out of the car to move a barrier before resuming your ride.&lt;&#x2F;p&gt;
&lt;script src=https:&#x2F;&#x2F;colas.nahaboo.net&#x2F;js&#x2F;mermaid.js&gt;&lt;&#x2F;script&gt;

&lt;pre class=&quot;mermaid&quot;&gt;
  

graph TD;
    User((User Interaction));

    %% LEFT SIDE: Explicit Pattern (Parallel)
    subgraph Explicit [&quot;Explicit Action Pattern (Parallel)&quot;];
        FormB[Dedicated Form: Search Books];
        InputB[&#x2F;Input Field: Books&#x2F;];
        FormM[Dedicated Form: Search Movies];
        InputM[&#x2F;Input Field: Movies&#x2F;];
    end;

    %% RIGHT SIDE: Modal Pattern (Sequential)
    subgraph Modal [&quot;Modal     Design (Sequential)&quot;];
        FormS[Single Search Form];
        %% The Vertical Spine (invisible link to keep things straight)
        FormS ~~~ InputS[&#x2F;Generic Input Field&#x2F;];
        %% The &quot;Hook&quot; - Positioned to the side
        Mode{{Mode Selection: Books vs Movies}};
    end;

    %% Explicit Connections (Direct Flow)
    User --&gt; FormB;
    User --&gt; FormM;
    FormB --&gt; InputB;
    FormM --&gt; InputM;
    InputB --&gt; Submit((Submit));
    InputM --&gt; Submit;

    %% Modal Connections (The Hook Flow)
    User --&gt; FormS;
    FormS --&gt; Mode;
    Mode --&gt; InputS;
    InputS --&gt; Submit;

    %% Styling from original source
    style FormB fill:#f9f,stroke:#333;
    style FormM fill:#f9f,stroke:#333;
    style InputB fill:#ccf,stroke:#333;
    style InputM fill:#ccf,stroke:#333;
    style Modal fill:#f5f5f5,stroke:#999,stroke-dasharray: 5 5;
    style FormS fill:#eee,stroke:#999;
    style Mode fill:#fff,stroke:#333,stroke-width:2px;
&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;benefits&quot;&gt;Benefits&lt;a class=&quot;zola-anchor&quot; href=&quot;#benefits&quot; aria-label=&quot;Anchor link for: benefits&quot;&gt;🔗&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;
&lt;p&gt;This Explicit Action Pattern has many benefits for power users:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Distributed Entry:&lt;&#x2F;strong&gt; Breaking one complex task into multiple simple, dedicated entry points.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Parallel UI:&lt;&#x2F;strong&gt; Presenting all options simultaneously rather than hiding them behind a selection step.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Non-Modal Interaction:&lt;&#x2F;strong&gt; Avoiding the &quot;mode&quot; where you have to set a state (e.g., clicking a radio button) before you can perform the actual action.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;For the examples above:&lt;&#x2F;p&gt;
&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style=&quot;text-align: left&quot;&gt;Feature&lt;&#x2F;th&gt;&lt;th style=&quot;text-align: left&quot;&gt;Separate Dedicated Fields&lt;&#x2F;th&gt;&lt;th style=&quot;text-align: left&quot;&gt;Single Field + mode switches&lt;&#x2F;th&gt;&lt;&#x2F;tr&gt;&lt;&#x2F;thead&gt;&lt;tbody&gt;
&lt;tr&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Cognitive Load&lt;&#x2F;strong&gt;&lt;&#x2F;td&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Higher initial load&lt;&#x2F;strong&gt; (more to look at), unless you are already used to this UI.&lt;&#x2F;td&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Lower initial load&lt;&#x2F;strong&gt; (cleaner look), especially for novices.&lt;&#x2F;td&gt;&lt;&#x2F;tr&gt;
&lt;tr&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Physical Effort&lt;&#x2F;strong&gt;&lt;&#x2F;td&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Lower&lt;&#x2F;strong&gt; (Click bar → Type → Enter).&lt;&#x2F;td&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Higher&lt;&#x2F;strong&gt; (Click radio → Click bar → Type → Enter).&lt;&#x2F;td&gt;&lt;&#x2F;tr&gt;
&lt;tr&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Intent Clarity&lt;&#x2F;strong&gt;&lt;&#x2F;td&gt;&lt;td style=&quot;text-align: left&quot;&gt;Absolute from the moment you click.&lt;&#x2F;td&gt;&lt;td style=&quot;text-align: left&quot;&gt;Ambiguous until the modifier is set.&lt;&#x2F;td&gt;&lt;&#x2F;tr&gt;
&lt;tr&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Screen Space&lt;&#x2F;strong&gt;&lt;&#x2F;td&gt;&lt;td style=&quot;text-align: left&quot;&gt;&quot;Expensive&quot;; requires more vertical&#x2F;grid space.&lt;&#x2F;td&gt;&lt;td style=&quot;text-align: left&quot;&gt;Efficient; fits in a header.&lt;&#x2F;td&gt;&lt;&#x2F;tr&gt;
&lt;&#x2F;tbody&gt;&lt;&#x2F;table&gt;
&lt;p&gt;This is essentially applying &lt;strong&gt;Functional Programming&lt;&#x2F;strong&gt; and &lt;strong&gt;CLI philosophy&lt;&#x2F;strong&gt; to a GUI.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Immutability:&lt;&#x2F;strong&gt; The pre-filled field is the &quot;original state.&quot;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Pure Functions:&lt;&#x2F;strong&gt; Each input field has a single, predictable output.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;No Side Effects:&lt;&#x2F;strong&gt; Clearing one field doesn&#x27;t break your ability to see the other.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;In a nutshell, &lt;strong&gt;Directness over Modality&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;for-power-users&quot;&gt;For power users&lt;a class=&quot;zola-anchor&quot; href=&quot;#for-power-users&quot; aria-label=&quot;Anchor link for: for-power-users&quot;&gt;🔗&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;
&lt;p&gt;If you are used to CLI environments, or using mostly keyboards shortcuts in interfaces, or editors like Emacs or vi, your brain likely functions on &quot;Command-Action&quot; pairs. And Explicit Action Patterns offers you:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Muscle Memory:&lt;&#x2F;strong&gt; You can bind a specific field to a specific mental &quot;slot.&quot; You don&#x27;t have to check the state of a radio button before hitting enter; you &lt;em&gt;know&lt;&#x2F;em&gt; which field you are in. It transforms a two-click &quot;hunt and peck&quot; task into a single-click muscle memory task. You don&#x27;t have to wait for an animation or look for a label; you just hit the coordinate on the screen you already know.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;No &quot;Context Switch&quot; Tax:&lt;&#x2F;strong&gt; Selecting a radio button is a &quot;mode switch.&quot; It requires you to stop thinking about your search query for a second to handle the UI mechanics. Separate fields eliminate that tax.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Visual Affordance:&lt;&#x2F;strong&gt; The label &quot;Search Movies&quot; is context-free, an immediate call to action. A generic &quot;Search&quot; box is a mystery until you look at the surrounding buttons.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;in-the-real-world&quot;&gt;In the real world&lt;a class=&quot;zola-anchor&quot; href=&quot;#in-the-real-world&quot; aria-label=&quot;Anchor link for: in-the-real-world&quot;&gt;🔗&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;
&lt;p&gt;While interfaces have moved toward the &quot;Google-style&quot; of Modal Design to flatten the learning curve for the general public, many expert-level interfaces still rely on the Explicit Action Pattern. You can find it in library catalogs, Bloomberg or Reuters terminals, and high-end enterprise software.&lt;&#x2F;p&gt;
&lt;p&gt;You can also see this approach in media editing software. Instead of a single &quot;Save...&quot; dialog that asks for a format later, you often have explicit menu entries: &quot;Save,&quot; &quot;Export as PNG,&quot; &quot;Export as JPG,&quot; or &quot;Export as MP3.&quot;&lt;&#x2F;p&gt;
&lt;p&gt;And one can consider that the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Unix_philosophy&quot;&gt;Unix philosophy&lt;&#x2F;a&gt; of having one tool per function, instead of mega-commands with tons of options is also an embodiment of the  Explicit Action Pattern.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;dive-deeper&quot;&gt;Dive deeper&lt;a class=&quot;zola-anchor&quot; href=&quot;#dive-deeper&quot; aria-label=&quot;Anchor link for: dive-deeper&quot;&gt;🔗&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;
&lt;p&gt;This approach is highly &quot;discoverable.&quot; You don&#x27;t need to learn &quot;how the search bar works&quot;; the interface tells you exactly what it can do by simply existing. This is what ihas been advocated by many Usability experts, that I consider mandatory reads:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;The boss: Alan Cooper books, especially &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;thedesignbooks.com&#x2F;books&#x2F;about-face-the-essentials-of-interaction-design&quot;&gt;About Face: The Essentials of Interaction Design&lt;&#x2F;a&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;The enjoyable &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;sensible.com&#x2F;dont-make-me-think&#x2F;&quot;&gt;Don&#x27;t make me think&lt;&#x2F;a&gt; by Steve Krug.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.cs.umd.edu&#x2F;users&#x2F;ben&#x2F;papers&#x2F;Shneiderman1983Direct.pdf&quot;&gt;Direct Manipulation&lt;&#x2F;a&gt; by Ben Shneiderman&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.edwardtufte.com&#x2F;notes-sketches&#x2F;?msg_id=0000Jr&quot;&gt;Data Density&lt;&#x2F;a&gt; the examples above being described by him as &quot;Parallel Input&quot;.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;The_Humane_Interface&quot;&gt;The human Interface&lt;&#x2F;a&gt; by Jef Raskin, especially his &quot;Monotonicity&quot;: the idea that a specific goal should always be achieved by a specific, unchanging set of actions.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>A new version of the site for 2026, in Zola</title>
        <published>2026-03-19T00:00:00+00:00</published>
        <updated>2026-03-22T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://colas.nahaboo.net/blog/a-new-version-of-the-site-for-2026-in-zola/"/>
        <id>https://colas.nahaboo.net/blog/a-new-version-of-the-site-for-2026-in-zola/</id>
        
        <content type="html" xml:base="https://colas.nahaboo.net/blog/a-new-version-of-the-site-for-2026-in-zola/">&lt;p&gt;I &lt;a href=&quot;&#x2F;blog&#x2F;a-new-version-of-the-site-for-2021&quot;&gt;said&lt;&#x2F;a&gt; that I wanted to migrate this web site to a &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Static_site_generator&quot;&gt;SSG&lt;&#x2F;a&gt; (Static Site Generator).
And, after 5 years of procrastination, Ta-Da! here is the new site!&lt;&#x2F;p&gt;
&lt;p&gt;Initially, I was planning to use &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;gohugo.io&#x2F;&quot;&gt;Hugo&lt;&#x2F;a&gt;, since I love coding in Go, and was not planning to learn Rust (Hugo is coded in Go and Zola in Rust), but I finally chose &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.getzola.org&#x2F;&quot;&gt;Zola&lt;&#x2F;a&gt; over Hugo for many reasons:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Zola has basically all the performance advantages of Hugo, and is also a single binary, with no need for databases, docker, snap, flatpak...&lt;&#x2F;li&gt;
&lt;li&gt;Zola is &lt;strong&gt;opinionated&lt;&#x2F;strong&gt;. This is very important for me, I love more and more the systems were there is &quot;only one way to do it&quot;. Needless to say, I hate perl, and I love Go.&lt;&#x2F;li&gt;
&lt;li&gt;Zola is stable, and its creator (&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;keats&quot;&gt;&quot;Keats&quot;&lt;&#x2F;a&gt;) very committed to not chasing the latest fad. This means less risk of an upgrade breaking things.&lt;&#x2F;li&gt;
&lt;li&gt;Zola template engine, Tera, is both more powerful and more readable than the standard Go template engine used by Hugo.&lt;&#x2F;li&gt;
&lt;li&gt;Zola comes with more useful built-in features, but no plugins that in my opinion brings complexity, especially in docs, and upgrade hell.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;As for the theme, I was looking for a clean responsive modern simple theme, with high scores in the various web performance benchmarks, with search and comments, and some support for multilingual (the site is in English with a few pages also translated in French). I tried the two leaders in the Zola theme ecosystem:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.getzola.org&#x2F;themes&#x2F;tabi&#x2F;&quot;&gt;Tabi&lt;&#x2F;a&gt; I liked the looks but it felt a bit too complex for my needs: as a Zola novice I was afraid to end up relying too much on Tabi-specific feature instead of pure Zola and CSS ones.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.getzola.org&#x2F;themes&#x2F;abridge&#x2F;&quot;&gt;ABridge&lt;&#x2F;a&gt; I liked the architecture, not so much the design, but I struggled to make it work, it seems the doc still advise settings that break on recent Zola versions.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;I thus looked for a simpler theme, and chose:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.getzola.org&#x2F;themes&#x2F;apollo&#x2F;&quot;&gt;Apollo&lt;&#x2F;a&gt; which was perfect for my needs, and simple enough to be easily modified for any of my future needs. I also enabled its support for the  &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;giscus.app&#x2F;&quot;&gt;Giscus&lt;&#x2F;a&gt; commenting system.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Porting my contents was made easy because I had anticipated this migration, and used Markdown for my posts in the Foswiki engine, instead of the native Foswiki syntax. So converting was basically adding a frontmatter to the pages, and fixing some links. I converted older posts with pandoc.&lt;&#x2F;p&gt;
&lt;p&gt;I have made a quick first migration. I will continue working on the CSS architecture and the looks in the following weeks.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Update&lt;&#x2F;strong&gt; on 2026-03-22: I now am satisfied of the result. I plan to work a bit more to add a search for only the French pages (now the search ignores them), autodetection of the browser light&#x2F;dark preferences, sort the tags alphabetically in the page info line.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Pinboard pricing model</title>
        <published>2021-03-01T00:00:00+00:00</published>
        <updated>2021-03-01T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://colas.nahaboo.net/blog/pinboard-pricing-model/"/>
        <id>https://colas.nahaboo.net/blog/pinboard-pricing-model/</id>
        
        <content type="html" xml:base="https://colas.nahaboo.net/blog/pinboard-pricing-model/">&lt;p&gt;I am a knowledge addict, and always has been. I was reading as many books as possible, and the advent of the web has been a marvelous gift for me. But I soon realized that I needed some tools to manage this knowledge and supplement my memory. It started with pen and papers, then I used a lot the PDAs (Personal Digital Assistants) such as the fabulous Psion &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Psion_Series_3&quot;&gt;Series 3&lt;&#x2F;a&gt; and &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Psion_Series_5&quot;&gt;Series 5&lt;&#x2F;a&gt;, the various smartphones, and finally the bookmarks-in-the-cloud service &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Delicious_(website)&quot;&gt;Delicious&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;p&gt;But as Delicious closed, I searched a replacement, and found &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;pinboard.in&#x2F;tour&#x2F;&quot;&gt;Pinboard&lt;&#x2F;a&gt;, and was hooked. Not only it offered the same functionalities as Delicious (and more), but if was fast and sleek, with a minimal no-nonsense design that I favor.&lt;&#x2F;p&gt;
&lt;p&gt;It also had an original pricing system: you paid a one-time fee of $0.001 per the number of current users to get access for life. E.g $9.26 if there was already 9263 paying users and you wanted to become the 9264th. The goal was to entice people to register now rather than waiting, even though it may not have scaled. (see &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;leftovertakeout.com&#x2F;post&#x2F;3783798631&#x2F;pinboardin-pricing-model-fixing-their-math&quot;&gt;Pinboard.in Pricing Model: Fixing Their Math&lt;&#x2F;a&gt;).&lt;&#x2F;p&gt;
&lt;p&gt;Alas, it could not be sustained, so in 2015 it adopted a more mainstream yearly fee scheme: $11 &#x2F; year. &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;blog.pinboard.in&#x2F;2014&#x2F;12&#x2F;new_pricing_policy&#x2F;&quot;&gt;New Pricing Policy (Pinboard Blog)&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;p&gt;But we, old timers, kept our lifetime access we bought before the change. We were basically free-riding the new wave of customers...&lt;&#x2F;p&gt;
&lt;p&gt;Of course it could not go on, so last week, Maciej, the Pinboard author, suggested we voluntarily switch to the yearly fee scheme. And I did it gladly, Pinboard is for me a model of what web sites should be: sleek, fast, and efficient (and not re-selling your private data). At the opposite of the bloated monstrosities that a lot of sites tend to be nowadays.&lt;&#x2F;p&gt;
&lt;p&gt;Long live Pinboard!&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>A New version of the site for 2021</title>
        <published>2020-12-27T00:00:00+00:00</published>
        <updated>2020-12-27T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://colas.nahaboo.net/blog/a-new-version-of-the-site-for-2021/"/>
        <id>https://colas.nahaboo.net/blog/a-new-version-of-the-site-for-2021/</id>
        
        <content type="html" xml:base="https://colas.nahaboo.net/blog/a-new-version-of-the-site-for-2021/">&lt;p&gt;A big change is planned for this site in 2021: I am going to abandon the Foswiki engine for it, to pursue my recent goal of going back to the web roots. Basically, it a quest that relies more on:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Fast rendering&lt;&#x2F;strong&gt; by no rendering at all: pre-compiling the site pages into static HTML+CSS+JS pages: the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;jamstack.org&#x2F;&quot;&gt;JAMstack&lt;&#x2F;a&gt; approach.&lt;&#x2F;li&gt;
&lt;li&gt;What I call a &lt;strong&gt;LAUW&lt;&#x2F;strong&gt; approach (&lt;strong&gt;L&lt;&#x2F;strong&gt;inux &lt;strong&gt;A&lt;&#x2F;strong&gt;pache &lt;strong&gt;U&lt;&#x2F;strong&gt;nix-utilities &lt;strong&gt;W&lt;&#x2F;strong&gt;eb Standards) instead of the traditional &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;LAMP_(software_bundle)&quot;&gt;LAMP&lt;&#x2F;a&gt;. Using the full strengths of Linux, Apache, the GNU Unix utilities, and the modern web standards (HTML5, CSS4, JS ES6) now that Internet Explorer is at last dead. This means not using software libraries (e.g: JQuery) and processors (e.g: Saas) that were designed to remedy to the poor state of some browsers.&lt;&#x2F;li&gt;
&lt;li&gt;Using &lt;strong&gt;Markdown&lt;&#x2F;strong&gt; for text editing&lt;&#x2F;li&gt;
&lt;li&gt;Using ultra &lt;strong&gt;stable and reliable&lt;&#x2F;strong&gt; technologies. I want to use things that will still work in 10 years, not the fad-of-the-day javascript framework that will be obsolete in 6 months, or that will break compatibility on each update.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Technical&lt;&#x2F;strong&gt;: And that do not try to be friendly to non-technical authors and admins, as  I will be the sole admin and editor.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;now&quot;&gt;Now&lt;a class=&quot;zola-anchor&quot; href=&quot;#now&quot; aria-label=&quot;Anchor link for: now&quot;&gt;🔗&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;
&lt;p&gt;So now (December 2020), I am still using &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;foswiki.org&#x2F;Home&#x2F;WebHome&quot;&gt;Foswiki&lt;&#x2F;a&gt;, but progressively prototyping on it the features I will try to implement later:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;A simplified skin, with all the &quot;wiki-ism&quot; (everything editable) removed. As you can see I got rid of the left toolbar, to keep only the top banner with its sections (Code&#x2F;Surf&#x2F;Blog) menu on the logo and minimal tools on the right&lt;&#x2F;li&gt;
&lt;li&gt;Editing contents in Markdown instead of the Foswiki syntax: I now do not use the Foswiki system to edit topics, but desktop-edit via &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;marktext.app&#x2F;&quot;&gt;marktext&lt;&#x2F;a&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;Having all the post sharing a common Form, so that the fields of this form can be easily converted to YAML as used as frontmatter (metadata) in modern Markdown-based systems.&lt;&#x2F;li&gt;
&lt;li&gt;But still using all the Foswiki power for the site admin and non-content topics (indexes,...)&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;The idea is to migrate progressively the contents into a form (Markdown + Frontmatter) usable in a modern static web generator like Hugo, while adapting Foswiki to use this content form, preparing a future migration.&lt;&#x2F;p&gt;
&lt;p&gt;I have developed the details of what this means in my post on the Foswiki site: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;foswiki.org&#x2F;Development&#x2F;FoswikiNonWikiWebSites&quot;&gt;Foswiki for non-wiki web sites&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;h2 id=&quot;spring-2021&quot;&gt;Spring 2021&lt;a class=&quot;zola-anchor&quot; href=&quot;#spring-2021&quot; aria-label=&quot;Anchor link for: spring-2021&quot;&gt;🔗&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;
&lt;p&gt;After I retire, at the end of February 2021, I will have more time to ditch Foswiki and implement the site on a new engine. It will probably be a static website generator, most probably &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;gohugo.io&#x2F;&quot;&gt;Hugo&lt;&#x2F;a&gt;, but maybe also &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.getzola.org&#x2F;&quot;&gt;Zola&lt;&#x2F;a&gt;  &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.11ty.dev&#x2F;&quot;&gt;Eleventy&lt;&#x2F;a&gt;, or &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.gatsbyjs.com&#x2F;&quot;&gt;Gasby&lt;&#x2F;a&gt;, and incorporating ideas of the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;jamstack.org&#x2F;generators&#x2F;&quot;&gt;myriad of other ones&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;summer-2021&quot;&gt;Summer 2021&lt;a class=&quot;zola-anchor&quot; href=&quot;#summer-2021&quot; aria-label=&quot;Anchor link for: summer-2021&quot;&gt;🔗&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;
&lt;p&gt;I will then probably replace progressively various components of this system by ones that I will handcraft optimally to incorporate all the ideas I have been toying with during all these years: the HTML+CSS+JS layout, the tag&#x2F;category system, the search engine, the comment engine, the editing process...&lt;&#x2F;p&gt;
&lt;h2 id=&quot;later&quot;&gt;Later...&lt;a class=&quot;zola-anchor&quot; href=&quot;#later&quot; aria-label=&quot;Anchor link for: later&quot;&gt;🔗&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;
&lt;p&gt;And I may even at some time create a totally new web engine system, who knows?&lt;&#x2F;p&gt;
&lt;p&gt;Or code a wiki replacement: a collaborative editing site based on the concepts learned via this experiment.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>A New Version of the site for 2020</title>
        <published>2020-07-26T00:00:00+00:00</published>
        <updated>2020-07-26T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://colas.nahaboo.net/blog/a-new-version-of-the-site-for-2020/"/>
        <id>https://colas.nahaboo.net/blog/a-new-version-of-the-site-for-2020/</id>
        
        <content type="html" xml:base="https://colas.nahaboo.net/blog/a-new-version-of-the-site-for-2020/">&lt;p&gt;After 10 years of
neglect, it is time for a new start of this site, because:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;I am going to retire in early 2021 (in 6 months), and I will have now time to properly maintain a personal site&lt;&#x2F;li&gt;
&lt;li&gt;I am feeling the need to archive in a central place all the contents I scatter in various different places, if only for the selfish reason to be able to retreive them more easily&lt;&#x2F;li&gt;
&lt;li&gt;I was toying with the idea of going to a static web site, as it is now in vogue, and it has a kind of nostalgia for me as I started my web sites as static   sites anyways. But by looking at the existing solutions, I was not convinced by them, as a lot seemed to naively solve the 80% easy part of the problem, and them struggle without any clear vision on how to solve the 20% hard part... a classic situation.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;I thus decided to keep on using &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;foswiki.org&quot;&gt;Foswiki&lt;&#x2F;a&gt;
(v2.1.6), as it is now quite mature, and thus stable: I like building on
solid, time-tested fundations that will not change every month. And
let&#x27;s be honest, it is both extremely powerful and incredibly reliable.
I am just tweaking it for using it as a public site (one author with all
admin rights, and read-only viewers), rather than the standard wiki
setup of many authors, all able to edit contents, with some able to also
admin rights. My postulate is that a dynamic web site like a wiki, with
proper caching, has all the advantages of a static web site, but is more
practical to maintain (although more complex to implement).&lt;&#x2F;p&gt;
&lt;p&gt;I will detail my views on how to website-ize a wiki in future posts, but
for now, on 2020-07-26 at noon French time, let go live!&lt;&#x2F;p&gt;
&lt;p&gt;Welcome to my (new) world!&lt;&#x2F;p&gt;
&lt;p&gt;Colas.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Usability issues on a payment form</title>
        <published>2009-03-03T00:00:00+00:00</published>
        <updated>2009-03-03T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://colas.nahaboo.net/blog/usability-issues-on-a-payment-form/"/>
        <id>https://colas.nahaboo.net/blog/usability-issues-on-a-payment-form/</id>
        
        <content type="html" xml:base="https://colas.nahaboo.net/blog/usability-issues-on-a-payment-form/">&lt;p&gt;I know, I know, it is easy to nitpick on other people design, but this
morning I tried to pay my phone bill online, and... failed. I had to
retry many times, because I kept making mistakes on a simple,
run-of-the-mill form to enter my credit card data. I was dumbfounded.
How can, in 2009, people manage to make such a trivial and essential
part of online business go so wrong? As I guess you are as curious as
me, here is what I found out: (See the picture for the 3 main pain
points)&lt;&#x2F;p&gt;
&lt;img src=&quot;telefact-bloopers.png&quot;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;1&lt;&#x2F;strong&gt; the expiration date example is ambiguous: does &lt;code&gt;0903&lt;&#x2F;code&gt; here means
2009-03 or 2003-09 ? Why didnt they disambiguate it by also adding a
specification (like MMYY, or, as it is a french dialog, MMAA ?)&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;2&lt;&#x2F;strong&gt; but today, it was not only ambiguous but plainly misleading! As
we were in March 2009, I assumed that the example was built from the
current month and year. I said cool, so it is YYMM. Wrong! it was
actually the reverse, MMYY, resulting in one failed attempt&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;3&lt;&#x2F;strong&gt; ok, I filled the fields, and hit the OK button... and it just
reset the page to empty fields! Grumbling, I re-typed the fields,
re-clic, and... another blank page! After these two more failures, I
tried to think (which is what you &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Don&amp;#x27;t_Make_Me_Think&quot;&gt;do not want your users to
do&lt;&#x2F;a&gt;, trust me). I
then read the button label and discovered that this big, prominent
button alone at the bottom of the page was &lt;strong&gt;not the Submit button&lt;&#x2F;strong&gt;
but the Cancel one. I should have hit the middle one &quot;Valider&quot;, but
this button was not in the correct place on the flow of the form.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;So,after 3 failed attempts, I managed to pay my bill. All this on a
simple form with no fancy verification code or Captcha. Well done
Telefact, I wonder if you can find a worse example still in use today.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Hgweb Mercurial template customization</title>
        <published>2008-04-06T00:00:00+00:00</published>
        <updated>2008-04-06T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://colas.nahaboo.net/code/hgweb-mercurial-template-customization/"/>
        <id>https://colas.nahaboo.net/code/hgweb-mercurial-template-customization/</id>
        
        <content type="html" xml:base="https://colas.nahaboo.net/code/hgweb-mercurial-template-customization/">&lt;p&gt;If you use the &lt;code&gt;hgwebdir.cgi&lt;&#x2F;code&gt; system to provide a web view of your mercurial repository, to customize the style like I did for (&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20101113204327&#x2F;https:&#x2F;&#x2F;hg.colas.nahaboo.net&#x2F;&quot;&gt;archived view&lt;&#x2F;a&gt;), a way to do it is (in debian, paths to adapt to your linux distribution):&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;copy &lt;code&gt;&#x2F;usr&#x2F;share&#x2F;mercurial&#x2F;templates&#x2F;gitweb&lt;&#x2F;code&gt; somewhere among your hg repositories. make a hg repository out of it&lt;&#x2F;li&gt;
&lt;li&gt;clone it to another one, e.g. &lt;code&gt;myhg&lt;&#x2F;code&gt;. This way, when upgrades will change the distributed templates, you will just have to copy the new ones in your &lt;code&gt;gitweb&lt;&#x2F;code&gt; repo, commit, and pull+merge the changes into your &lt;code&gt;myhg&lt;&#x2F;code&gt; repo.&lt;&#x2F;li&gt;
&lt;li&gt;edit the files in it: header.tmpl to add css code, etc. Adding links in the page headers will make you edit most of the files&lt;&#x2F;li&gt;
&lt;li&gt;install by copying it to &lt;code&gt;&#x2F;usr&#x2F;share&#x2F;mercurial&#x2F;templates&#x2F;myhg&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;edit your &#x2F;etc&#x2F;mercurial&#x2F;hgrc to tell hgwebdir.cgi to use your new templates by a line &lt;code&gt;style=myhg&lt;&#x2F;code&gt; . in your &lt;code&gt;[web]&lt;&#x2F;code&gt; section. Here is my file as an exemple:&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #4C4F69; background-color: #EFF1F5;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;# system-wide mercurial configuration file&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;# See hgrc(5) for more information&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;[trusted]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;users=colas&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;[web]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;baseurl=https&amp;amp;#58;&#x2F;&#x2F;hg.colas.nahaboo.net&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;contact=colas@nahaboo.net&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;description=Open source software made by Colas Nahaboo&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;maxchanges=16&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;staticurl=https&amp;amp;#58;&#x2F;&#x2F;hg.colas.nahaboo.net&#x2F;static&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;style=colas&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;The above will make these settings global to the site. but you can still override them on a per-repository basis by adding these lines into the &lt;code&gt;hgweb.config&lt;&#x2F;code&gt; of the repositories.&lt;&#x2F;li&gt;
&lt;li&gt;Note that you can use HTML code in the description field&lt;&#x2F;li&gt;
&lt;li&gt;This &lt;code&gt;hgrc&lt;&#x2F;code&gt; is not cloned by &lt;code&gt;hg&lt;&#x2F;code&gt;. So you must add&#x2F;edit it directly on the web repository, you cannot prepare it in advance in your work dir and expect it to be pushed on the web site on first creation&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>The rebirth of this site</title>
        <published>2008-04-04T00:00:00+00:00</published>
        <updated>2008-04-04T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://colas.nahaboo.net/blog/the-rebirth-of-this-site/"/>
        <id>https://colas.nahaboo.net/blog/the-rebirth-of-this-site/</id>
        
        <content type="html" xml:base="https://colas.nahaboo.net/blog/the-rebirth-of-this-site/">&lt;p&gt;At last, I decided myself to redo my old website, which was a collection
of static html and was based on many of the various tools I made in
these past years. As I grew in love with wikis over these years, the
natural tought was just to do it in a Wiki, and naturally in the Wiki I
like the most, &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;twiki.org&quot;&gt;TWiki&lt;&#x2F;a&gt;. So bear with me and keep
posted, as this site will slowly emerge in this first half of 2008.&lt;&#x2F;p&gt;
</content>
        
    </entry>
</feed>
