10/12/2020 | Reading time: 1 minute

New Settings and options!

The new settings on kevingimbel.de

The new settings on kevingimbel.de

Over the weekend I implemented a new settings section for my website (the one you read right now!). You can now choose the width of content for articles and pages to better suite your reading preference. I like smaller content because it makes it easier for me to read, others like full-width content. The new settings UI Click the “Settings” link in the top right and you’ll be able to configure the randomness of the color schema and the width of content.

View full post
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/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
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
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
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
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
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/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