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/6/2020 | Reading time: 1 minute

Hugo aliases and redirects

Using aliases to prevent 404 when restructuring your Hugo site

With the recent redesign and re-structuring of my website I decided to include year and month in URLs. I previously only used the post title as URL key, so a post with title Hello world would be available at kevingimbel.de/hello-world. With the new format this includes the section, year, and month, so for example kevingimbel.de/blog/2020/01/hello-world. To prevent all old URLs from failing with a 404 I added aliases to all old posts.

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
09/12/2018 | Reading time: 1 minute

Mastodon Embed Shortcode for hugo

You may know that I made some shortcodes for Hugo, the static site generator I am using to create this website. So far I made a shortcode for caniuse.com and codepen.io which allow to embed CodePen and “Can I Use” embeds easily with Hugos build-in Shortcode system. Today I made another one which allows embeds from Mastodon, the decentralized Twitter-like social network. An example embed is shown below. The Source Code can be found on GitHub.

View full post
11/26/2017 | Reading time: 9 minutes

CSS Custom Properties and a new look

You may have noticed that some things changed on this website. I completly re-wrote the Front-End and created a new theme with a focus on accessibility and well-structured content. On the web, Accessibility is enabled by default; All you need is a good HTML structure and your website is almost ready to go! A second important part of accessibility is color and contrast as well as font sizing. I decided to let users choose their own color scheme, font-size, and dark or light mode - all done with CSS Custom Properties (aka CSS variables).

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/31/2014 | Reading time: 4 minutes

Conditional CSS

While there’s a lot of talking about CSS writing styles, organization styles and if it’s maybe better or not to avoid pre-processors or frameworks there’s one very powerful thing that gets pretty much no attention at all: Conditional CSS, i.e. pieces of CSS that serve one specific task the easiest and most known is .active given to, well, active elements. I’d like to talk a bit about conditional CSS that I’ve been using in production and that I think can improve the overall logic of CSS.

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/6/2014 | Reading time: 5 minutes

Bullgit loves Jekyll

After having a static HTML Page for about 6 months, we at bullgit just switched to a brand-new Jekyll page that uses the GitHub API to display all our repos as well as a list of members with images and links and there are a few reasons why we made this switch: Jekyll is built-in GitHub pages Jekyll is easy-to-learn and easy to maintain No-Database handling of Data (see the list of members we use) Everyone can clone the repo and run it locally So basically, as soon as you have a Project on GitHub or an organization like bullgit you can use the power of Jekyll to make your page easy to use and easy to change even for new members.

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

Web Development in 2014

As soon as you start to really dig into web development it feels like things would change daily - at least I feel that way. But there’s one thing that I’d like everyone to do in 2014: At least basic responsive web development to ensure your site - at least - looks good and is usable on whatever screen it will be displayed. There’s nothing I hate more than scrolling websites around on my phone when I want to read an article (to be honest, I mostly leave the site and never come back).

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
11/18/2013 | Reading time: 3 minutes

To infinity and beyond

While I was re-designing my Website I decided to finally add some JavaScript to it. I’m learning JavaScript for like 2 months now and - to be honest - I finally understand most of the things I’m doing. Yesterday night’s topic was a “Back to Top” Button written in Vanilla JS. Actually the code behind it is kinda simple, however, I wrote an endless function that got to infinity and beyond (that’s where the title comes from.

View full post
10/28/2013 | Reading time: 2 minutes

Custom Radio Buttons

Today I thought about a project I had in mind for some time, it has to do with ratings of different contents and the first thing I thought about was: What’s the easiest or best way to create a rating form with custom buttons (stars, hearts, whatever). A few years ago I had to do this once and I remember doing it with an image and background-position but as of today I really love pseudo elements and “Look-Ma-No-Image!

View full post
10/16/2013 | Reading time: 6 minutes

Ghost in the shell

Finally Ghost launched to the public! I waited for this CMS since I first heard of, at this time my blog was running on WordPress which always felt overloaded. WordPress has a lot of functions and stuff I don’t need when publishing a few articles a month to the Internet. However, I switched to Jekyll as you may know and now there is Ghost. It felt like it’d be my birthday while unpacking the *.

View full post
10/2/2013 | Reading time: 7 minutes

From 0 To Sass

If you’re a Front-End Developer you may have already heard about Pre-Processors such as Sass, LESS or Stylus. It’s fair to say that they’re all good and which one you use is up to you or your team. I prefer Sass with the SCSS Syntax (= keeps semicolons and brackets). Even though Pre-Processors are easy to use and setup some people are still confused: Do I have to run them on a server?

View full post
09/20/2013 | Reading time: 1 minute

A bit sticky

I just stumbled upon a very handy CSS Property: position:sticky. As far as I found out it’s only working in Chrome and Chromium with the experimental Webkit Features Flag enabled (see at chrome://flags/#enable-experimental-webkit-features). position:sticky is a pretty handy feature that allows you to stick an element to the top of the page (or wherever you want) until the parent element is moved out of the screen. Basic Markup To get an idea of how position:sticky works I made some basic markup.

View full post
08/16/2013 | Reading time: 3 minutes

Is this :valid?

I recently stumbled upon the :valid and :invalid class for input fields. It gives you the ability to use visual feedback on inputs that show the user whether the input is - guess what? - valid or not. This is, in fact, a very handy pseudo class in case of UI and UX Design because you can easily give a feedback on input without using JavaScript. Anyway, this pseudo element does not validate the input, the entered email for example can still be formated wrong.

View full post
08/15/2013 | Reading time: 2 minutes

px vs em

Recently Tim Pietrusky wrote and article about px vs em that contains a few links on resources that explain why you should use em instead of px as measure unit on websites. I was using pixel like forever and I couldn’t think of any reason to switch to a new unit until Tim explained why em is better: em is more responsive and it is scalable. In fact when you switch from pixel to em you’ll feel like working on a completely new Level.

View full post