Springe zum Hauptinhalt

NoN: v0.8 release

The GTK GUI tool for managing Nikola powered websites Knights of Ni (NoN) just some polishing recently and I was shocked (shocked!) to see that the last release is two years old so I drafted a release from the current status.

A major change was the removal of the application-wide draft feature (Nikola's draft mode not affected). It was a rudimental implementation of an idea that I didn't know where to go with. I figured it would go to /dev/null eventually without regrets.

The application is still completely dependent on GTK3. Installation has been tested for Archlinux and Ubuntu.

The About dialog still proclaims it is version 0.7 but the dialog is lying, the version is 0.8. Trust me.

Sportplus trampoline fix

Achtung!

This article first appeared on Mastodon.

Somebody might remember me owning a fitness trampoline (a Sportplus SP-T-110) which I use on an almost daily basis.

So it was just a matter of time that the first rubber band snaps (I'm doing quite high jumps on my HIIT routine and from the product reviews that can and will happen regardless of workout intensity/weight).

In theory you can buy a replacement rubber band set and in practice it is not in stock atm.

So I bought regular bungee cord and clips and started to macgyver around.

/images/sportplus_fix1.thumbnail.jpg

I purchased the 8 mm bungee cord that turned out to be a bit too thick but still with the power of patience and a bit force the cord fit through the hole of the plastic mount.

The chosen length resulted in an educated guess based on the original cord and the lower elasticity of the new cord.

/images/sportplus_fix2.thumbnail.jpg

This is the result. I bought the green bungee cord on purpose, the replaced rubber bands are easy to spot.

/images/sportplus_fix3.thumbnail.jpg

This has been working for over two months now to my satisfaction with two replaced cords. I'm convinced I have to replace more original rubber bands with time. So be it.

Nikola: some new colour flavours for the Hybrid theme

The Hybrid theme for Nikola is a member of the Hyde theme family. You are able to set any subtheme it provides which are the main colours from the base16 project.

I'm not really a fan of these so I added some additional strong colours to the Hybrid theme that I use. My PR to the themes' repository was accepted so this is included in the theme when downloading from the application.

Now there are plenty of subthemes to choose from:

THEME_CONFIG = {
    DEFAULT_LANG: {
        # "hyde_subtheme": "theme-custom",
        # "hyde_subtheme": "theme-hybrid-01", # petrol
        # "hyde_subtheme": "theme-hybrid-02", # dark red
        # "hyde_subtheme": "theme-hybrid-03", # forest
        # "hyde_subtheme": "theme-hybrid-04", # eggplant
        # "hyde_subtheme": "theme-hybrid-05", # dark orange
        # "hyde_subtheme": "theme-base-08", # red
        # "hyde_subtheme": "theme-base-09", # orange
        # "hyde_subtheme": "theme-base-0a", # yellow
        # "hyde_subtheme": "theme-base-0b", # green
        # "hyde_subtheme": "theme-base-0c", # cyan
        # "hyde_subtheme": "theme-base-0d", # blue
        # "hyde_subtheme": "theme-base-0e", # magenta
        # "hyde_subtheme": "theme-base-0f", # brown
        # ...
    }
}

Hyde colours

/images/hybrid-colours/base-08.png

theme-base-08

/images/hybrid-colours/base-09.png

theme-base-09

/images/hybrid-colours/base-0a.png

theme-base-0a

/images/hybrid-colours/base-0b.png

theme-base-0b

/images/hybrid-colours/base-0c.png

theme-base-0c

/images/hybrid-colours/base-0d.png

theme-base-0d

/images/hybrid-colours/base-0e.png

theme-base-0e

/images/hybrid-colours/base-0f.png

theme-base-0f

Hybrid colours

/images/hybrid-colours/hybrid-01.png
/images/hybrid-colours/hybrid-02.png

theme-hybrid-01

theme-hybrid-02

/images/hybrid-colours/hybrid-03.png
/images/hybrid-colours/hybrid-04.png

theme-hybrid-03

theme-hybrid-04

/images/hybrid-colours/hybrid-05.png
/images/hybrid-colours/custom.png

theme-hybrid-05

theme-custom

Custom colour

The custom-theme has preset colours that you can directly change in the hybrid.css or better in your custom.css. Just create the file if you haven't already and add and adapt this snippet:

/* custom subtheme for hyde/hybrid theme */
.theme-custom .hsidebar {
  background-color: #070512;
}
.theme-custom .content a,
.theme-custom .related-posts li a:hover {
  color: #1582ae;
}

Comments

You can use your Mastodon account to reply to this post.

Reply

New online presence

There is a moving process going on from my GitHub Page: Merge and Destroy.

See you soon.

Update May 17th

I imported most of the posts and pages, images and listings and so on. I will probably leave the tutorials and some posts also over at the GitHub Page but will slim the page down.

The Google+ archive is now also hosted here.

Adding Mastodon comments to your static Nikola blog

Static and comments

The neverending story. The arch enemies. Beauty and the Beast. If you want to enable comments in a static blog article you will have to come back to third party services.

Nikola already supports several comment systems like Disqus or Isso. As a frequent Mastodon user it has long been my intent to integrate Mastodon threads as a detour comment system.

I stumbled across this JavaScript solution that does the job on any static page: Adding comments to your static blog with Mastodon.

The comments listed are the replies to the corresponding toot:

Potential and restrictions

Unlike embedded Mastodon toots the loaded comments fit neatly to the blog (some CSS theme adaptation required). Adding a comment is still done via the Mastodon web UI.

If you announce an article to Mastodon and want to refer to that toot as your comment thread you will have to either edit the page because you don't know the toot id in advance and therefore build and deploy your site a second time or be quick and announce the article before deploying and then edit the toot id.

A classic comment moderation is not possible though. I personally expect spam and inappropriate contents quite unlikly as you need a Mastodon account in the first place and instance admins are usually very accurate when it comes to enforce their instance rules. This might change with time but right now I don't see a substantial danger.

Preparing Nikola

The main question is "Where put the code?" and the answer is:

/images/shortcodes.jpg

A shortcode provides a code snippet that you can call via

{{% name parameters %}}

just save the file in the shortcodes folder.

mastodon-comments.tmpl (Source)

{#
Usage:

    {{% mastodon-comments host=instance.domain username=username id=tootnr %}}

#}

<h2>Comments</h2>
<div class="article-content">
  <p>You can use your Mastodon account to reply to this <a class="link" href="https://{{ host }}/@{{ username }}/{{ id }}">post</a>.</p>
  <p><a class="button" href="https://{{ host }}/interact/{{ id }}?type=reply">Reply</a></p>
  <p id="mastodon-comments-list"><button id="load-comment">Load comments</button></p>
  <noscript><p>You need JavaScript to view the comments.</p></noscript>
  <script src="/assets/js/purify.min.js"></script>
  <script type="text/javascript">
    function escapeHtml(unsafe) {
      return unsafe
           .replace(/&/g, "&amp;")
           .replace(/</g, "&lt;")
           .replace(/>/g, "&gt;")
           .replace(/"/g, "&quot;")
           .replace(/'/g, "&#039;");
   }

    document.getElementById("load-comment").addEventListener("click", function() {
      document.getElementById("load-comment").innerHTML = "Loading";
      fetch('https://{{ host }}/api/v1/statuses/{{ id }}/context')
        .then(function(response) {
          return response.json();
        })
        .then(function(data) {
          if(data['descendants'] &&
             Array.isArray(data['descendants']) &&
            data['descendants'].length > 0) {
              document.getElementById('mastodon-comments-list').innerHTML = "";
              data['descendants'].forEach(function(reply) {
                reply.account.display_name = escapeHtml(reply.account.display_name);
                reply.account.emojis.forEach(emoji => {
                  reply.account.display_name = reply.account.display_name.replace(`:${emoji.shortcode}:`,
                    `<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" height="20" width="20" />`);
                });
                mastodonComment =
                  `<div class="mastodon-comment">
                     <div class="avatar">
                       <img src="${escapeHtml(reply.account.avatar_static)}" height=60 width=60 alt="">
                     </div>
                     <div class="comment">
                       <div class="author">
                         <a href="${reply.account.url}" rel="nofollow">
                           <span>${reply.account.display_name}</span>
                           <span class="disabled">${escapeHtml(reply.account.acct)}</span>
                         </a>
                         <a class="date" href="${reply.uri}" rel="nofollow">
                           ${reply.created_at.substr(0, 10)}
                         </a>
                       </div>
                       <div class="mastodon-comment-content">${reply.content}</div>
                     </div>
                   </div>`;
                document.getElementById('mastodon-comments-list').appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
              });
          } else {
            document.getElementById('mastodon-comments-list').innerHTML = "<p>Not comments found</p>";
          }
        });
      });
  </script>
</div>

The script uses DOMPurify so you have to put the purify.min.js file into the $THEME/assets/js/ folder.

There are some div classes used in the code and may require some adaptation to your theme. This should be done in the custom.css. I stole the CSS from Carl's site and this is what I use here:

custom.css (Source)

.mastodon-comment {
 background-color: azure;
 border-radius: 10px;
 padding: 5px;
 margin-bottom: 1rem;
 display: flex;
 font-size: 80%;
}
.mastodon-comment .content {
 flex-grow:2
}
.mastodon-comment .avatar img {
 margin-right:1rem;
 min-width:60px
}
.mastodon-comment .author {
 padding-top:0;
 display:flex
}
.mastodon-comment .author .date {
 margin-left:auto
}
.mastodon-comment .disabled {
 color:var(--accent-color)
}
.mastodon-comment-content p:first-child {
 margin-top:0
}

That's it.

Just add a shortcode to any article in your blog. You can even provide a regular comment system like Disqus parallely.

Comments

You can use your Mastodon account to reply to this post.

Reply

Websites that answer a single specific question

Hints are welcome. Comment here or over at Mastodon. In case of updates post gets republished.

BER - Berlin Brandenburg Airport

The first question touches a sore spot - Germany's most famous airport (BER). The construction project has been full of scandals involving mismanagement, patronage, bad planning, massive budget overrun and, of course, delay:

"Is the BER already open?" - though the answer is incorrect now

or

"Has the BER been finished yet?" with more sad details (German)

Friday?

This is an easy one:

"Is it Friday?" (Danish)

Traffic

The third site answers the question whether the avenue behind the Brandenburg Gate in Berlin is closed for traffic (which often is the case due to public events like marathon, turn of the year or national ceremonies):

"Is the 17th of June Street closed?" (German)

Tech

"Should I use threads?"

Transportation

The container ship Ever Given grounded in the Suez Canal completely blocking any traffic:

"Is that ship still stuck?"


Mastodon: Timeline beleben

Ich stelle aktuell wieder einen kleinen Zulauf bei Mastodon fest. Eine häufig gestellte Frage ist, wie man interessante Leute findet, denen man folgen möchte.

Timelines

/images/Mastodon/timelines.png
Local

Als Neuling startet man gewöhnlich mit der Registrierung bei einer bestehenden Instanz, das heißt, die lokale Timeline der Instanz ist einen regelmäßigen Besuch Wert.

Federated

Die instanzübergreifende Timeline kann je nach Instanzsetup, Tageszeit und Interesse mehr oder weniger ergiebig sein, häufig sieht man die Tröts vor lauter Spam nicht, trotzdem sollte man hier zumindest mal reinschauen.

Profilverzeichnis

Hinter dem Profile directory versteckt sich eine ganz nützliche Übersicht von aktiven Nutzern der eigenen und anderer Instanzen. Hier sieht man auch, wie nützlich es für andere ist, eine Kurzbio und ein Profilbild einzupflegen. Diese Übersicht muss nicht in jeder Instanz aktiv sein.

Bemerkung

Möchte man nicht im Profilverzeichnis gelistet werden, kann man dies in den Einstellungen unter Profile -> Appearance -> List this account on the directory deaktivieren.

Hashtags

Die Suchfunktion lässt immer noch zu wünschen übrig und so ist die Suche nach Hashtags am zielführendsten.

Entweder sucht man direkt in der Suchleiste in der linken Spalte (siehe auch den dort erscheinenden Tooltipp) oder ruft die URL <instance>/tags/<tag> auf.

Verwendet man das advanced web interface, also die Mehrspaltenansicht, kann man die Stichworte als eigene Spalte anheften.

Leute

Mit ein wenig Klicken und Scrollen in den Timelines findet man schnell das ein oder andere Profil, bei dem man genauer hinschaut. Falls man gar nicht weiß, wo man anfangen soll, folgt man zunächst seinem eigenen Instanzbetreiber (zu finden auf der About-Seite).

Neben den Posts sind folgende Punkte interessant:

  • Wird das Profil aktuell verwendet? Mastodon hat immer mal wieder kleine Hypes erlebt, es gibt viele verwaiste Profile.

  • Wem folgt diese Person?

  • Wer folgt dieser Person?

  • Welche Interessen hat die Person (Kurzbio, Featured hashtags)?

  • Gibt es interessante Profile im Profilverzeichnis dieser Instanz (obere Leiste auf jeder Profilseite)?

/images/Mastodon/profiledir.png

Bots

Menschen sind ja auch nicht alles. Da das ganze Fediversum auf freier Technologie basiert und auch Mastodon einfach per API zugänglich ist, sind automatisierte Posts nicht weit. Dafür gibt es mit botsin.space eine eigene Instanz.

Bei den überwiegend sehr ernsthaften Beiträgen auf Mastodon können Botbeiträge durchaus stimmungsaufhellend wirken.

Aktiv werden

Bei Mastodon wird man ohne Zutun nicht so einfach bespaßt, man muss sich selbst um seine Unterhaltung kümmern. Dazu muss und kann man auf verschiedene Arten aktiv werden:

  • fav, was dir gefällt

  • booste, was dir besonders gefällt

  • kommentiere, und sei es ein schlagfertiger Spruch oder einfach ein Danke, egal - was soll passieren?

  • vervollständige dein Profil, in der Reihenfolge Avatar, Kurzbio, Links, Featured hashtags, pinne einen oder wenige für dich relevante Tröts an

  • verfasse einen #introduction -Tröt (auf Deutsch auch die Hashtags #vorstellung und #neuhier verwenden) und stell dich der Gemeinde vor

  • tröte selbst, auch wenn man zunächst gefühlt ins Unbekannte sendet

Persönliche Tipps

Poste selbst

Profile, die nur oder überwiegend aus Boosts bestehen, finde ich uninteressant, dann folge ich lieber dem Original.

Alltägliches

Schreib auch mal was von dir, was Lustiges, Profanes, Alltägliches, wie wäre es mit einem Foto von draußen? Schreib lieber deine eigenen Showerthoughts auf als der Zehnte zu sein, der irgendeinen aktuellen Aufreger per Screenshot verbreitet.

Mastodon-Interessen-Bingo

Du arbeitest in Tech, interessierst dich für FLOSS, Datenschutz, bist politisch total engagiert, gegen ganz viel und empörst dich gern? Ist ja gut und schön, aber hier auch nicht sehr originell (ja okay, Mastodons sind Herdentiere), was macht dich sonst noch aus? Hast du auch andere Hobbies (Steine sammeln, (Nischen-)Sport, Handwerken/Basteln, Schnulzen gucken, whatever)? Erzähl mal!

CW

Ich möchte das Fass Content Warning hier nicht aufmachen, nur eins: es muss nicht jeder Inhalt hinter einer CW versteckt werden. Im Gegenteil, ich komme mir verarscht vor und halte es auch für den Umgang auf der Plattform hier für kontraproduktiv, diese Funktion im Übermaß zu nutzen.

Click

Comments

You can use your Mastodon account to reply to this post.

Reply

TUXEDO laptop keyboard

Recently it was finally time to replace my beloved Dell notebook. I gave TUXEDO Computers a try.

This article may in part apply to other models but I refer to the TUXEDO Book BC1510 using Archlinux.

Driver installation

This seems a no-brainer but for the sake of completeness it shall be mentioned to install the TUXEDO keyboard driver to enable backlight functions and Fn/media keys. The easiest way to do this is installing the package from the AUR.

Toggle touchpad on shortcut

Oddly enough there doesn't seem to be a Fn/media key for toggling the touchpad which is a function I personally use quite often.

The common way to assign keyboard shortcuts is using xmodmap by customizing the .Xmodmap file in the user's home.

Assign XF86TouchpadToggle to a key or shortcut.

You can find out whether the function is theoretically assigned to any key by searching for it:

$ xmodmap -pke | grep Touchpad
------------------
output for BC1510:
------------------
keycode 199 = XF86TouchpadToggle NoSymbol XF86TouchpadToggle NoSymbol XF86TouchpadToggle
keycode 200 = XF86TouchpadOn NoSymbol XF86TouchpadOn NoSymbol XF86TouchpadOn
keycode 201 = XF86TouchpadOff NoSymbol  XF86TouchpadOff NoSymbol XF86TouchpadOff

Test the functionality by executing the keystroke via xdotool:

$ xdotool key 199

This probably works except you are using...

GNOME Shell

Long story short: xmodmap does not work with GNOME Shell/Wayland. If you intend to take the red pill take this way to XKB, or take the blue pill by just assigning the function to a shortcut via gsettings.

Open dconf-editor and pilot to org.gnome.settings-daemon.plugins.media-keys/touchpad-toggle and set a custom value, p.e. ['F4'].

No touchpad symbol? F4 unoccupied.

Keyboard backlight

Now comes the fun part. You don't buy a device with keyboard backlight without making use of it.

By default on boot the backlight is white. The integrated backlight of the BC1510 model is RGB so it's playtime.

Media keys

Backlight control via shortcuts is available on numpad keys:

  • Fn + /: cycle through a preset of colors (red, lime, blue, yellow, fuchsia, aqua, white, off)

  • Fn + *: toggle backlight on/off

  • Fn + +: increase brightness

  • Fn + -: decrease brightness

Backlight keys.

TUXEDO Backlight Control

The TUXEDO Backlight Control provides a CLI and Tkinter GUI to control the keyboard backlight. The package can be installed from the AUR.

There are some shortcomings:

  1. The authentication restrictions are annoying and IMHO pointless. There is no need to require superuser rights when changing backlight colors.

  2. There is no option to adjust brightness.

  3. Custom colors can be defined but must be written in a colors.conf file (required superuser rights).

The enhanced TUXEDO Backlight Control

Achtung!

Only developed and tested with Arch.

I created a tweaked version to get rid of the negative aspects mentioned above.

First, there are no more password prompts when executing a backlight command or launching the GUI (adjusted PolicyKit permissions).

Second, there are two new functions in the CLI:

# brightness control, set a value between 0 and 255, example:
$ backlight 124

# set a custom color by passing the hex color code, example:
$ backlight color ff5900

One may want to process the backlight command in scripts, for example visualize low battery status, notifications or graduently changing colors depending on the time of day...

Download forked version from encarsia/tuxedo-backlight-control (Arch package available).

Looping through color preset

Bluetooth on startup

I had some trouble getting the Bluetooth controller working on system start.

According to the Archlinux wiki I set AutoEnable=true in the /etc/bluetooth/main.conf but the Bluetooth service had to be started manually every time.

The simple solution was that the systemd service still had to be enabled by executing

$ sudo systemctl enable bluetooth

It's easy if you know what to do...