Welcome ... I'm Kristof

I've been a passionate software developer for a very long time ... now I'm a tech-savvy IT manager and tinker with things like this blog in my free time ;)

Developing software never lets you go. It's a creative passion and for me it's the web that has fascinated me for almost 30 years.

My latest stuff is below and here is more about me. Meet me @kiko@indieweb.social.

Vintage Letters

Contribute with Conventional Commits

Fun with a Pull Request

I’ll be honest … I need some Git training. From time to time I contribute small things to GitHub projects and sometimes get confused with all the commands. Fork, Clone, Commit, Stage, Pull Request … all things that mean something to me, but that I certainly haven’t internalized. And so it happens that I sometimes mess up a pull request or something similar.

Sure, my blog here also lives in GitHub, both in terms of source control and hosting on GitHub Pages, but here I’m the only one committing. No issues, no branches, no pull requests or anything else. I change something, hit commit and I’m done.

Another point I can’t dismiss: I’m a Windows guy who likes to click buttons. The command line is not for me at all.
What was the name of the parameter? Do I have to write --param=xxx or /param:xxx … damn where is the button?
My brain is probably too small for that.

Visual Studio Code is a big help there … it has buttons! But that doesn’t save me when it comes to Git, because you have to know in which order to press which of these buttons!

Continue reading ...

Sunset Drinks

Discoveries #26 - JavaScript HowTo's

Over time, everyone accumulates links somewhere about procedures that one has not yet internalized. This is also the case with me and JavaScript development. “Damn … what was that about Call | Proxy | Map | <You name it>?!”. Here are 11 of them …

  • Processing images with sharp in Node.js
  • Use console.log() like a pro!
  • Simple Swipe with Vanilla JavaScript
  • The File System Access API: simplifying access to local files
  • An introduction to WebAssembly for JavaScript Developers
  • Getting Started with the Map and Set Typed Collections
  • JavaScript Currying: A Practical Example
  • How to Use the Call, Apply, and Bind Functions in JavaScript
  • How JavaScript's Proxy Object Works
  • JavaScript waitFor Polling
  • How to measure page loading time with Performance API

Continue reading ...

Versengold in Concert I

Versengold in Concert

Photos from the performance in Speyer as part of the MPS

Since my youth with I hardrock/metal fan, but from good music I let myself convince, even if it does not fit into this scheme. This is what happened with the German medieval/folk band Versengold from Bremen, to whose concert in Bochum my better half dragged me one day. And what can I say … the guys are so much fun with their easy-going manner, their good, funny and sometimes profound German lyrics and their shanty-like music, from which the North German sailor tradition can be clearly heard.

Continue reading ...

SVWW vs Schalke 2023
SV Wehen Wiesbaden

SVWW vs. Schalke @ 2023-09-02

The fight of the promoted against the relegated

On this game, some in my circle of friends have feverishly awaited, especially my neighbor and friend, who for years is an ardent fan of one of the traditional clubs Schalke 04. We got six additional tickets for the game in time and with a crowd of 11,003 fans, this was also urgently necessary. The stadium (12,566 standing and seated) was full to the roof. Only one of three blocks of the guests was empty. Some Schalke fans seem to have expected nothing from the game in Wiesbaden. No wonder after table position 15 after the last match day.

Since season ticket holders get into the stadium a little faster and my friends sat a little scattered in different blocks, I lost sight of them at some point, but that was not tragic, because they had fun.

To my delight, the booth operators, who I had to criticize last time, actually did a better job today. Two cash registers: one for cash and another for card/smartphone/watch payers. The sale of beer and bratwurst went much more quickly, only I had to stand in line a bit at the fan shop, because I was not yet recognizable as a fan: it had to get a cap and a jersey, of course, finally.

Continue reading ...

Red Hopper
Hexo Tag Plugins

Image Masonry Tag Plugin for Hexo

Easy use of the wonderful Macy.js library to display images in posts

Displaying a few more images than usual in a post is always a bit tricky, because you have to make sure they don’t get too big and drown out the text. But they should not be too small either and the arrangement is also important to consider.

For this purpose I have so far used my Image Slider Tag Plugin, but with this you only ever see one of the images and have to scroll through the rest horizontally. A medium sized overview, best in the so called masonry format, where images are automatically assembled based on their size on a limited area, would be much better for some cases. There are a variety of CSS or JavaScript solutions out there on the net, but the most suitable for me was Macy.js … and how I integrated it into my Hexo environment is what I want to describe here.

Continue reading ...

A New Blog

Convert HTML into Plain Text in Hexo

Render Page.Excerpt into META Tag

Hexo, on which this blog is based, is a Static Site Generator (SSG) that generates a whole structure of HTML files from individual Markdown files in which the articles were written. Besides the actual posts, also overview pages like the archives and others. For the latter, however, it only needs an excerpt from the actual article, which Hexo automatically creates from the initially generated HTML content and which is also available as HTML.

For my Page Meta dialog, however, I recently needed the excerpt as plain text to make it easier to transfer it manually to a Mastodon post, for example. My initial attempts to extract the plain text from the original Markdown turned out to be quite difficult, because in Hexo not only Markdown is used, but also special Tag Plugins in Nunjucks format and of course plain HTML. Long speech, short sense … after the first dozen RegEx-Replace calls, I got doubts to be on the right way and remembered Page.Excerpt, the variant already generated by Hexo in HTML.

Continue reading ...

Beer Copper

Pool Photo Generator

How to create multiple device dependent header photos with Node

Since the existence of this blog, the posts all have a custom header image that I generate from my own photos. Already three years ago (omg … really?) I described in an article how to do this with Hexo: Automatic Header Images in Hexo.

To keep it short, I use a pool folder for this, in which I keep in subfolders next to a meta.txt, for the title of the image and an external url on 500px for interactions to the image, three variants that I need for a new post:

  • mobile.jpg (width 480px)
  • tablet.jpg (width 768px)
  • normal.jpg (width 1280px)

The only piece of the puzzle that was still missing was the automatic generation of these three image variants and the meta file based on a selected photo that I want to add to the pool of available header images. So far it was fun to generate the header images manually either on the desktop or on the smartphone, but it really doesn’t have to be. My goal now was to write a script where I just throw a selected photo into a folder and the NodeJS script does the rest.

My photo workflow is based on Adobe Lightroom Classic and one of the steps is to give a title to the good ones I use here as well. So the script had to include four steps when iterating over the inbound folder’s JPG files:

  1. create new pool folder
  2. read meta data (IPTC -> title) and write it to meta.txt
  3. create the three image variants
  4. delete the processed image from the inbound folder

Continue reading ...

SVWW vs Karlsruhe 2023
SV Wehen Wiesbaden

SVWW vs. Karlsruhe @ 2023-08-18

My first home game in this season

I already had my season ticket on the first matchday of the 2023/2024 season, but was unable to get into the stadium for the team’s first home game and thus missed the 1:1 draw against Magdeburg.

First Impressions

So, Friday was my premiere on my season seat West 3, Row 1, Seat 1. That this seat was free when I booked it was a coincidence, but being so close to the pitch appealed to me. In front of me, the concrete railing of the spectator block, where I can put my beer, and directly below it, the SVWW coach’s bench under a plexiglass roof. You can hardly get any closer to the team.

Continue reading ...