03/24/2020 | Reading time: 3 minutes

Random Theme

I’ve decided to add some randomness to this website! You may noticed that the two main colors change on every page reload - there’s a fixed number of “themes” available and they change at random. To accomplish this I used the following JavaScript. (function(window, document, undefined) { let theme = window.localStorage.getItem("kgde_theme"); console.log(theme); if (theme) { var [colorMain, colorSecondary] = JSON.parse(theme).colors; document.body.style = `--color-main:${colorMain};--color-secondary:${colorSecondary}`; } else { // [dark-color, light-color] // Color combinations taken from https://botsin.

View full post
01/8/2020 | Reading time: 2 minutes

Auto SSL With apache2

How Apache 2.4.30 and later can be used to automate SSL certificate setup and renewal

Apache 2.4.30 and later supports an experimental module called mod_md which allows automatic SSL certificate management with Let’s Encrypt as standard provider. This greatly simplifies the management of SSL certificates. Instead of setting up certbot and cronjobs to automatically renew certs server administrators now only need to add a few lines to their virtual host files. This guide assumes the operating system is Ubuntu! If you use a different distro some commands may be different.

View full post
01/3/2020 | Reading time: 1 minute

Hugo: ignore _index.md in list templates

How I ignore _index.md files in my list templates

While creating my new website I also added more sections, namely a blog, photography, and art section. All of these use list templates and render “article”-like content previews. I wanted to add some content to these lists and Hugo has a special file named _index.md for that. This file can be used to create index pages for lists. When I did that I somehow also included the index files in the post listings which was not what I wanted, so I added a if statement to my article-preview.

View full post
01/2/2020 | Reading time: 2 minutes

Hugo: compare dates to flag old content

How I use Math and Date functions to flag old posts in Hugo

With the recent redesign of my website I also wanted to add a note to old articles. The IT world is changing fast and information can quickly be outdated, so I decided to add an automatically generated note to every post that is older than 4 years. Using the Hugo Math function and Date values it can be accomplished in automated-enough fashion. Partial First I created a new partial named single-header.

View full post
01/1/2020 | Reading time: 2 minutes

Safe calc usage in CSS

Using CSS calc function reasonable and with fallbacks

calc is a great CSS function to calculate values, e.g. margins or widths. What makes it especially great is that it can combine different values, for example calc(100% - 4rem - 1px) is valid and works in modern browsers - in simpler words: Calc works with different units like em, %, px, etc. The problem with calc is that if it doesn’t work you may get a unexpected result. Take the following code for example:

View full post
03/29/2017 | Reading time: 8 minutes

Using the Terminal: The Prompt

The Terminal (or bash, shell, console) is an incredibly powerful program available on (almost) all operating systems such as Mac OS, Windows, or Linux Distributions like Ubuntu, Mint, Fedora, CentOS, … - you get the picture. Using the terminal in an efficient way to navigate the computer or writing your own programs and snippets to enhance your workflows is incredibly powerful. I already wrote about one custom script named ws which enhances my daily workflows.

View full post
05/7/2015 | Reading time: 6 minutes

ReactJS - Hello World!

This article is the first in a series about ReactJS, a JavaScript library for building user interfaces. It is actively developed at Facebook and Instagram, while Instagram uses React to build their web app. At Facebook, however, React plays a role in the “background”, featuring administrative screens such as the Ads Managment. React itself says one very important and true thing about itself: Lots of people use React as the V in MVC.

View full post
03/10/2015 | Reading time: 8 minutes

Getting into Performance Measurement

I’ve spent the past week developing some features for our own website at work. We’re using WordPress and I almost always enjoy working with WordPress beside Magento projects, it’s way easier to keep an overview and with a good overview of data flow and available data it’s easier to measure and find performance bottleneck. In the following post I want to examine my workflow and the way I refactored our code base to increase the speed and overall performance of our site.

View full post
11/21/2014 | Reading time: 1 minute

Snippet: theme-color for Android 5.0

Just yesterday I got my Android 5.0 update which also features a new way multi-tasking works and Chrome interacts with this multi-tasking. In fact, all recently opened tabs are available via the multi-tasking button (square to the down right on Stock Android) instead of an in-app button like it used to be. This not only is very handy actually since you can switch between apps and websites seamlessly you can also set your own status bar colors for chrome which are used on the page and in the multi-tasking overview.

View full post
08/22/2014 | Reading time: 2 minutes

Endless Multi-Dimensional Navigation

The past I decided to get my head around multi-dimensional navigations, like navigations that can have (endless) sub navigations nested inside them and so I started to try some ideas on CodePen. My first idea was to have a trigger element that, when clicked, triggeres the nearest Sub Navigation to activate it (e.g. giving it an open class). The JavaScript for this looks like this: var d = document, trigger = d.

View full post
07/20/2014 | Reading time: 3 minutes

A closer look to closure

Closure is a very interesting concept in JavaScript. It basically determinse where and how variables or functions are accessable and where not. Since this is an essential part of JavaScript and one can run into quite some problems I want to try and give short introduction to closure and what it can be good for. It’s good to have at least basic understanding of JavaScript. So before I start I’d like to say that I consider myself a JavaScript beginner and this is how I understand closure and scopes at the moment.

View full post
05/23/2014 | Reading time: 4 minutes

Passing Arguments in JavaScript

One of my favorite aspects of JavaScript is that it is unbelievable flexible. I am currently reading “Secrets of the JavaScript Ninja” by the amazing John Resig and try to play around with JavaScript whenever I’ve the time to do so. Just yesteday I needed to pass as many arguments to a function as the user wants which means I can’t check for every possible thingy. Anyway, I’ll cover this in a small write-up aka a blog post.

View full post
02/22/2014 | Reading time: 3 minutes

Pure JavaScript slider

The great thing when you’re a beginner in any programming language (or in anything in general) is, that even small successes make you happy and proud of what you did. I’m very proud of my back to top script even though it’s not perfect at all. I could make a back to top button with jQuery in a few minutes but it wouldn’t be that much fun. However, I made another JavaScript thing I’m proud of: A pure JavaScript slider.

View full post
01/8/2014 | Reading time: 2 minutes

Labels in GMail

In case your company is using GMail Business there’s one thing that comes to your daily work-life I really love about GMail: Labels. Labels are used to sort eMails automatically and - what I really love about - without removing them from the Inbox into 1000 folders. Instead they just get a Label and their own “View” inside GMail - on Desktop as well as Mobile which makes them even better!

View full post
11/24/2013 | Reading time: 3 minutes

Pseudo Product Flags

For a recent client Project I had to create Product Flags that are displayed at the top of each product. The Flags should have different colors and different values (which also have different lengths). The values are applied via the data Attribute and the colors are also controlled via a data Attribute. The “Problem” with this task was that it’s not only a few different length, it’s a multi-language system and therefore can end up in a lot of different width of the product flags - a “fixed” solution, like applying a max-width of let’s say 20em, isn’t the best solution for this so I ended up creating a flexible solution.

View full post