Welcome ... I'm Kristof

I've been a passionate software developer for almost 30 years and currently a tech-savvy IT manager. In my spare time, I tinker with things like this blog, because creating software never lets you go. Here is more about me ...

Thomas Garden 24-04 XII

Hexo: Determine and Use Online Status

I have customized my Hexo installation a lot over the last few years to generate my blog kiko.io. This mainly concerns countless generators that help me to create content aside from posts and integrate it into the structure. There are also a few that have to load data from external web servers, such as my Blogroll.

Sometimes I also travel to areas with only limited Internet coverage, as I am currently doing in the mountains of South Africa, and of course all those generators that need external data throw errors and the build process stops. Changing code on the off chance, committing it and hoping that the GitHub Action doesn’t throw any errors is, to say the least, suboptimal. A small automatic switch was needed to at least allow me to build and test the new feature when working on the blog, as long as one of these generators is not affected.

Continue reading ...

Mossel Bay Christmas

App Defaults 2024

With this post, I would like to continue what I started last year and what inspired me, among others, Robb Knights App Defaults.

Meanwhile, I also have a detailed and updated list of all the things I absolutely need as a slash page under /USES, but here is a brief summary of my current app defaults for this year:

Continue reading ...

Hout Bay United Football Community

A Mission to Unite

Anyone who has been following this blog for a while knows that I am over 50 and have only recently developed an interest in football. Of course, I primarily follow my home team, SV Wehen Wiesbaden, but I also follow other teams, especially those underdogs who tend to lose out in the big business, but who have exactly the heart that makes football what it is or should be.

Today, I stumbled across one completely unexpectedly: in Hout Bay, South Africa at an arts/crafts/food market by the harbour. I was looking for something interesting to eat and my eye fell on a stand with colourful shirts with two young guys behind it who were selling Lebkuchen (Gingerbread) and Stollen (no translation possible). LEBKUCHEN and STOLLEN!? As a German, I know that you can hardly escape this stuff during the Christmas season (my belly speaks volumes), but with my trip I tried exactly that and I obviously failed ;)

Continue reading ...

Thomas Garden 24-06 XIII

jsrepo - Build your own tool registry

Every craftsman has one: his own toolbox, which he tends and takes care of. The most diverse tools accumulate there over the years, both bought and homemade, but all things that make his life easier.

Web developers are basically craftsmen too, and EVERYONE has their tools and utilities that can be found in almost every project. These are small code snippets that aren’t worth creating an NPM package for or that aren’t even meant to be made public. Very often, you simply copy one of these tools from the old project into the new one, or you may have even put them in a tools.js and always take over the entire file.

Aidan Bleser from San Antonio has created jsrepo.js, a tool that makes it easy to create and maintain your own toolbox in a project hosted on GitHub (or GitLab or BitBucket) and to integrate individual methods into new projects. A code registry all to yourself …

Continue reading ...

Point Of Ayr
New Photos

Wales

A colorful round trip

As you may have gathered from my last photo post Dunkirk, my wife and I tend to be rather restless when we travel. We always want to see and experience as much as possible… and my camera is always with me. In the 12 days in Wales in May this year, we not only covered almost 2,000 miles by car, but I also took about 1,700 photos. No wonder it took me so long to process them :D

Of the almost 500 viable photos, I would like to show you a few of them here, along our route from the south to the north of this wonderful country.

Continue reading ...

Red Motor Cover
Discoveries

Discoveries #32 - CSS

This is now the fourth Discoveries issue in a row that deals with CSS and I wonder why. Maybe because CSS has been exploding in terms of functionality recently and many JavaScript articles on the web nearly always highlight some aspect of framework functionality, but I prefer to deal with vanilla JS.
Well then, here are a few CSS gems that I can only warmly recommend reading … also for my future self.

  • You don't need JavaScript for that
  • Use cases for CSS comparison functions
  • LH units are cool
  • A Friendly Introduction to Container Queries
  • Style Queries
  • The Power of Composition with CSS Variables
  • A Deep CSS Dive Into Radial And Conic Gradients
  • Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up
  • Making a Parallax SVG Landscape
  • Skeleton Screen Loading Animation using HTML & CSS

Continue reading ...

Thomas Garden 24-06 V
mentions-united

Mentions United: New Renderer and Refactorings

Until now, I only occasionally checked the runtime of my Mentions United scripts by using a console output. It didn’t seem to be that important, because the scripts run asynchronously and the interactions only appear at the end of an article, with some time to spare before the reader gets there. However, the console times always referred to the providers that were actually executed and said nothing about the time that was actually needed. I also show the number of interactions at the beginning of an article, but not at the interactions themselves. In my head, the idea of a summary line was forming …

<p class="interactions-summary-line">
  INTERACTION-COUNT interactions collected by 
  <a target="_blank" href="https://github.com/kristofzerbe/MentionsUnited">Mentions United</a> 
  via PROVIDER-COUNT unique providers and 
  REQUEST-COUNT requests in DURATION seconds
</p>

Continue reading ...

#TIL |  Styling images in Markdown via URL hash

Oh man! The other day I fumbled HTML with inline styles into one of my Markdown files to let the text flow past it classically with FLOAT on the left side. But there is a simple and charming solution to solve this in general purely via the image URL and some CSS that I could have come up with myself …

I was led to this by a Mastodon post from Matt Wilkie, who cites a blog post from Surinder Bhomra. It’s just a simple hash added to the Markdown image URL (and which has no further impact) …

![my alt-text](path/to/my-image.jpg#right)

… and a little bit CSS:

img[src*='#left'] {
  float: right;
  margin: 10px 0 10px 10px;
}

#markdown #images