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.

SVWW vs Schalke 2017
SV Wehen Wiesbaden

My Hometown, My Club

How I became a football fan over 50

I was born in Wiesbaden (Hesse, Germany) and I consider this city my home, even though my father built a house in a small suburb called Taunusstein-Wehen in the 70s and I practically grew up there. In this small town, where practically everybody knows everybody, there is a small football club called SV Wehen since 1926 and some of my schoolmates played there in their youth.

This small club played only a regional role at all until 1979, when a local business man put money into the club and it worked its way up one league after the other over the years:

Continue reading ...

Ground Light

CONTINUE READING Link & Auto Scrolling on the called page

Help your user to read on directly

On the home page of a blog or other text-heavy site with regular new articles, it is often advisable not to display the entire text of the article, but a more or less large excerpt and a READ MORE or CONTINUE READING link that leads to the rest of the article, usually a stand-alone article page. This allows the user to quickly get a picture of, say, the last dozen posts when he comes here to browse your texts.

However, it is somewhat unpleasant if you as the author decide to display a larger excerpt after all, and the user lands at the top of the called page after clicking on the MORE link and first has to scroll/navigate to the right place until he can resume reading. This destroys his reading flow. It is better to take the user directly to the page where the MORE link interrupted the text on the home page.

With a hash and some JavaScript this is done so quickly, that I wonder why I haven’t implemented this on my own blog already :)

Continue reading ...

Garden Beauties XV

Extension of downupPopup: Back Button, Escape Key & More

Contributing to Ali Dinçer's Bottom Sheet project

I recently introduced a Bottom Sheet dialog on this blog to display a page’s metadata (like this), using Ali Dincer’s work: downupPopup. I described the way to do this in a post a couple three weeks ago.

Shortly after that Koos Looijensteijn triggered me with his post How to make digital business cards and share them via QR codes and I felt like using my newly introduced dialog manager based on downupPopup for my own contact card.
But more about that at a later time, respectively blog post…

Important for this post is that Ali’s bottom sheet solution did not offer everything I wanted for my implementation:

1. Make Dialog Reusable

As I have already described in the above mentioned article: Ali’s approach to calling the dialog was to create and initialize the necessary HTML elements if it didn’t already exist in the DOM. I pulled out the initialization to make the component reusable. There is now a preparation part and an initialization part and the latter is always called, no matter if another bottom sheet dialog was already created before.

My GitHub commit on this part

Continue reading ...

Ancient Tools

Discoveries #25 - Tutorials & HowTo's

This Discoveries issue is generally about tutorials from different areas: CORS, Azure, Elektron, GitHub Action, SVG. Outstanding articles by outstanding authors, who explain things in an easy and understandable way.

Happy Reading…

  • CS Visualized: CORS
  • Use Azure Functions, Azure Storage blobs, and Cosmos DB to copy images from public URLs
  • Build a Secure Desktop App with Electron Forge and React
  • Node.js API Authentication with JSON Web Tokens
  • How To Build an SMTP Mail Server with Express, Node, and Gmail
  • Advanced Git Series 1/8: Creating the Perfect Commit in Git
  • Learn how to use Git and GitHub in a team like a pro
  • How to Build Your First JavaScript GitHub Action
  • Getting the Gist of GitHub Actions
  • Swipey Image Grids (with SVG)

Continue reading ...

Smiling Guard

Include and provide JSON data in Hexo EJS Templates

... with a new Helper and an async function

The three main components of a standard installation of the Static Site Generator Hexo are the template system EJS (Embedded JavaScript Templating), Markdown for the content and Stylus for the styles.

In the template files are the three main tags for driving content:

Scriptlet tag for control flow (no output)

... my JavaScript code to process data into the template

Output a value as escaped HTML

<%= myVariable %>

Output of a raw value, usually in the form of a JavaScript function

<%- myFunction() %>

Hexo’s helper system is based on the latter. So you can include a JavaScript file in your template that makes use of the JS Helper in node_modules\hexo\lib\plugins\helper\js.js as follows …

<%- js('/js/dist/myFancyFunctions.js') %>

… which will be rendered to:

<script src="/js/dist//js/dist/qr-code-styling.js"></script>

The Problem

So far and short, so good … but I recently tried to use this way to include a JSON file whose data one of my scripts needed as startup options and I noticed that the above mentioned JS helper unfortunately takes care of the possibly missing file extension js. It doesn’t matter if you only pass the path to the file as a string or if all necessary attributes as an object.

Continue reading ...

Water Numbers

Show pages meta data (JSON-LD) in Bottom Sheet

Visualize the generated meta code on your page in a sliding panel for review and information purposes

A few months ago I introduced new meta data (JSON-LD) for the pages of this blog and also wrote about my implementation. Works also everything quite well … only the verification of the generated data was a bit cumbersome:

  1. Open DevTools for a page in Chrome.
  2. Search in the HEAD of the source code for the included script (“application/ld+json”)
  3. Copy out JSON-LD code
  4. Format JSON into VS code … and check

Nothing for now and simply impossible on the smartphone, even if there would be a reasonable Chrome extension for displaying JSON-LD data, but it does not exist (yet). Another problem was that I use automatically generated Socal Media images for my articles, which are included in the JSON-LD, but do not appear anywhere in the page and thus were beyond my control. I simply wanted to display all the generated stuff.

Since I’ve been a fan of the so-called bottom sheets since the first version of Google’s Material Design, I imagined a script that grabs the code embedded in the page and pushes a panel with all the data visualized there into the page from the bottom … and the whole act was easier than I thought.

Continue reading ...

Floral Magic XIV

Top 10 Pens of Jon Kantner

A while ago I posted my favourite pens of 2022. Many of them came from the pen of John Kantner and that was reason enough for me to highlight his most beautiful works in a post.

My “Best of Jon Kantner” selection is focused on the usefulness for UI’s to be created, i.e. all these things I urgently need to try out or one or the other will end up in one of my projects.

Continue reading ...

Sweat Lodge

Discoveries #24 - JavaScript & UI

I’m such a UI person. It’s a blast for me to discover and try out new interface components on the web and for the web. Simplicity and a tidy text desert is not my thing. Here are a few JavaScript UI gems I found the other day for you…

  • Frontle - BottomSheet
  • downupPopup.js
  • Pikaday
  • Add to Calendar Button
  • Tippy.js
  • Responsive Full Page Scroll
  • lucafalasco/scroll-snap
  • Bgzy.js
  • ScrollyVideo.js
  • Cal-Heatmap

Continue reading ...