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

Haifa Roses

Add website to Trello card the better way

Avoid default share, use the Trello bookmarklet

I was looking for a new way to store interesting website articles for reading later, as Pocket, my favourite tool until here, gets worse and worse. As I am a big Trello fan, I wanted to give it a chance to be Pockets successor on my smartphone, where I’m reading mostly.

On installing the Trello Android app, you will find a new SHARE target Add new Trello card, which is comfortable to use:

(Sry, for the German screenshots ;)

Android's default share with New Trello Card

The result, website’s title and Url set, is nice at best:

Trello card via Android Share

… but Trello has a Bookmarklet, which does the job much better.

Ancient Kitchen Stuff
A New Blog

Horizontal navigation menu above an image

How to deal with coverage, readability and scrollbars

I changed the main menu of my blog, because I wanted to get rid of the hamburger menu on the upper left, which was shown only for smartphones, but was not really reachable conveniently. Beside that it made no sense to have different navigations for different devices.

My choice was to implement a horizontal scrolling menu, which can grow over the time, without any need of customizing. As I have quite big header images and I wanted to place the new navigation in a more accessible zone, I decided to place it at the bottom, but above the header image.

Onion Bokeh
A New Blog

Change CSS class when element scrolls into viewport

I had a neat visual gimmick on the start page of this blog, that the gray-scaled header image of a post in the list scaled up to 100% and became colored, when the user hovered over it:

.article-inner .article-photo {
  height: 150px;
  width: 100%;
  object-fit: cover;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: all ease-out 0.6s;
  opacity: 0.3;
  filter: grayscale(1) contrast(0.5);
}
.article-inner:hover .article-photo {
  transform: scale(1.1);
  opacity: 1;
  filter: grayscale(0) contrast(1);
}

Nice, but a little bit useless on smartphones or tablets, where HOVER doesn’t really work.

Ceasarea View
Discoveries

Discoveries #1

Due to my daily routine, I’m reading a lot of articles on the web regarding software development.

The most interesting stuff ends up on my Pocket list, which grows from day to day. Hard to find the pearls, when I need them. This recurring posts will throw a stroke of light on them.

They are maybe not the newest finds, not the fanciest ones, but remarkable for me and maybe for you also.

  • Pure CSS halftone portrait from .jpg source
  • ScrollTrigger - Highlight Text
  • Tiny long-press event handler
  • Show More/Less
  • 3D banners with ScrollTrigger
  • Image Compare Viewer
  • Add Read or Scroll Progress Bar To A Website To Indicate Read Progress
  • How to Get a Progressive Web App into the Google Play Store
Jaffa Antiques
Great Finds

Dopamine: How Software should be...

A great media player for Windows 10

Not very often, when I’m looking for a new tool to replace some annoying or outdated piece of software, I have to blog about it … but from time to time, I’m discovering pearls, worth to lose a word about.

The Windows 10 built-in media player Groove is (to be kind) … nice, but it is more or less a leftover from Microsoft’s attempt to create a competitor to iTunes, years ago. The crippeled UI is not the most modern and I was more than once annoyed about its usability.

Doing a research for a good alternative, you stumble always over the usual suspects: MediaMonkey, Foobar2000, Winamp, VLC or even Media Player Classic!? Not modern enough, not user friendly enough, not lean enough.

I really don’t remember where, but there was a screenshot of a player, which seems to be the complete opposite of the others: Dopamine from Digimezzo, a project by the Belgian developer Raphaël Godart…

Screenshot Dopamine 2.0.2.

Shadow Hat
A New Blog

Using GitHub as Commenting Platform

Integrate Utterances' GitHub Issue Commenting to Hexo

If you run a blog, it is always advisable to integrate a commenting system, in order to get feedback on your posts from your readers.

So did I, when I start this blog and I decided to use the Disqus platform, as it was very easy to integrate … but I always had a bad feeling about a third-party platform collecting data from my readers. Disqus is probably not without reason under criticism by many people in the community.

As I host this blog at GitHub (see A New Blog (Part One): VS Code, Hexo and GitHub Pages) I was looking for a solution to host the comments also on my prefered platform. There were some solutions, which uses GitHub Issues for this and wanted to implement something like that someday.

Specialita' Toscane

Meaningful automatic versioning with T4

How to implement versioning in C# projects the better way

Every developer has to have an idea of versioning his products. If you work with Visual Studio you have the Assembly Information in the project properties dialog, to enter it manually everytime you want to release a new version:

Assembly Information Dialog

The four fields are: MAJOR, MINOR, BUILD, REVISION.

But seriously … who does that? I guess 99% of all C# developers are entering the AssemblyInfo.cs and enter the famous 2 asterisks into the version declaration of BUILD and REVISION, to let Visual Studio do the incrementation job:

[assembly: AssemblyVersion("1.0.*.*")]
[assembly: AssemblyFileVersion("1.0.*.*")]

But this is not the end of the possibilities … Let’s do it more meaningful, with some goodies and still automatic…

Non Toccare
A New Blog

Automatic Header Images in Hexo

Use static images randomly for posts via Hexo script

Every article in this blog has an individual header image, to bring a little bit color into it. In this post I will show you how I deal with the images in using and automatic provisioning.

For serving these pictures I use a static folder, as described in A New Blog: Customizing Hexo. The hard work is done by the plugin Hexo Generator Copy, which copies the static files into the public_dir while generating.