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.

Jaffa Pepsi

Device Class Detection in JavaScript

The unusual way by using CSS Media Queries

In some occasions it is necessary to know which device a user is using while writing JavaScript Web Apps. Should be nothing regarding layout, because for this we have CSS Media Queries.

Somewhere around 2011 W3C introduced matchMedia(), which returns a MediaQueryList object that can be used to detemnine if the document matches the media query string. The using is pretty straightforward and feels a bit like RegEx matching in JS:

const mediaQuery = window.matchMedia('(min-width: 1025px)')
if (mediaQuery.matches) {
// do something...

If you are interested in this API, you will find good introductions to the topic here, here and here (German).

One point of criticism on this pure JS approach can be, that you have to maintain the breakpoints in addition to CSS … but why not use these existing breakpoints in JS?

Continue reading ...

Summer Reading
A New Blog

Pimping the Permalink

How to copy and share the permalink programatically

Until now I did not show the permalink under my posts in this blog, but in the past I had sometimes the need to pass one of the links and it was not very user-friendly, on desktop as well as on mobile. Not the One-Click experience I prefer.

My goal was to show the permalink and, even more important, provide a simple way to copy and to share. JavaScript to the rescue…

Continue reading ...

Jerusalem Marks

Discoveries #2

New month, new discoveries. We will deal with key bindings, downloads on the fly, a lot of animations and contrasting images. Have fun, trying out these stunning solutions.

  • tinykeys - Modern library for keybindings
  • Creating files in JavaScript in your browser
  • CSS Animated Google Fonts
  • Skeleton Screen CSS
  • More Control Over CSS Borders With background-image
  • A CSS-only, animated, wrapping underline
  • Nailing the Perfect Contrast Between Light Text and a Background Image
  • Contrast.js

Continue reading ...

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.

Continue reading ...

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.

Continue reading ...

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.

Continue reading ...

Ceasarea View

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

Continue reading ...