Welcome ... I'm Kristof

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


Water Numbers
A New Blog

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 ...

Sweat Lodge
Discoveries

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 ...

Blue Perspective
Lightroom Presets

Breton Presets for Lightroom

‘Le Bretagne’ (Brittany) is one of the most beautiful and historic parts of Europe and always worth a visit. It combines the sometimes rugged English flair with the art of living of France, both scenically and in the architecture and the way people live there. My wife likes all things English and I am a friend of the french ‘Savoir Vivre’, and we were able to combine the two beautifully on a trip to Saint-Malo and Jersey. It was a photographers dream…

Continue reading ...

Seagull Meeting
Discoveries

Discoveries #23 - UI/CSS

As a visual person, I’m always thrilled when I come across small but subtle tips, tricks or even entire solutions that lift my understanding of what can be done with CSS to new heights. Of course, this month :has() is once again one of them, but also once again contributions from Bramus van Damme and Ahmad Shadeed, whose posts I read without exception because they are both so good at what they do.

  • Tree views in CSS
  • Scroll Shadows With JavaScript
  • CSS Mirror Editing in Edge DevTools for VS Code
  • Prevent Scroll Chaining With Overscroll Behavior
  • Display content in the title bar - Microsoft Edge Development
  • The large, small, and dynamic viewport units
  • An Interactive Guide to Flexbox in CSS
  • Flexbox Dynamic Line Separator
  • Style a parent element based on its number of children using CSS :has()
  • :has(): the family selector

Continue reading ...

Broken Onion
A New Blog

Provide Blog Metadata via JSON-LD

Centralization of a website's schema.org data in the HEAD instead of everywhere in the HTML

Chris Coyier’s post “Open Graph Blues“ got me thinking that my blog’s metadata, which are used by Google among others to index my pages, aren’t really at the cutting edge anymore. I took the markup of the individual elements of the pages via schema.org Microdata attributes from the standard Hexo template years ago and always adjusted it by value, but never questioned that there are more modern variants to provide the metadata.

It’s Ok for Google to use Microdata attributes, but the HTML code of my templates is getting more and more opaque, because next to these stick to the tags also those for the Indieweb, classes for CSS and last but not least those for the own indexing via Pagefind. There becomes from a simple

<article>
  <h1>Title of my latest blog post</h1>
  <p> ... </p>
</article>

quickly becomes a …

<article class="article-type-post h-entry" 
        data-pagefind-body="" data-pagefind-meta="type:Article" itemscope itemprop="blogPost">
  <h1 class="article-title p-name" 
      itemprop="name">Title of my latest blog post</h1>
  <p> ... </p>
</article>

Lots of textual overhead and the hardest part is maintaining it over the long term. Better would be a complete search engine description in the header of a page, where also the other meta information is available. In one place and not spread all over the HTML code. JSON-LD to the rescue

Continue reading ...

German Roofage
A New Blog

Pagefind UI and URL Parameters

UPDATE: Parts of the original post are outdated, as Pagefind DOES offer a way to preset a search string, which just hasn’t been documented yet … \o/ … see below.


A couple of days ago I wrote about my attempt to integrate Pagefind in my blog. In the meantime, I further refined the indexing by excluding more content areas and adding more for the metadata to make the search results even better.

But one thing was still missing: controlling the search via url parameters, so that you can actually consider the page as a search page. I came across this in a post about the sense and nonsense of Open Graph attributes and other search engine related metadata nowadays. Google, for example, likes to use JSON-LD and when describing the site you can define a search page which then makes it easier to search the site directly via Google … see Sitelinks search box (WebSite) structured data

In my implementation, I decided to adapt the Pagefind UI for myself instead of developing everything from scratch via JavaScript. There are always some limitations with pre-built solutions, but I want to show here that they are actually none for the inclusion of a url parameter.

Continue reading ...

Poppy Green
Golem

Radio Garden

Free, registration-free and simply cool - Travel through the radio stations of the world with Radio Garden

In the age of streaming services, radio may seem out of date, but it still surrounds us constantly, even if we often hardly notice it - in the car, on the public transport, at work or simply at home in the kitchen. One strength of the old medium is that it presents us with music we haven’t heard before, away from our playlists on Spotify or iTunes.

The easiest way to rediscover new artists or entire genres of music is to pick a radio station at random. It’s precisely this lack of control, the being at the mercy, the sometimes unpredictable that makes the medium so appealing to many - and with digital streaming, many of the world’s stations are just a tap away.

As is so often the case in the modern world, it’s the oversupply that leaves some confused and frustrated. You first have to be able to pick out what you might like from the gigantic haystack of options. For this purpose, there are little helpers that more or less independently suggest what you might listen to. One of them stands out from the crowd because, on the one hand, it does not pursue commercial interests and, on the other hand, it approaches the station search very intuitively: Radio Garden (https://radio.garden).

Continue reading ...