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.
I don’t track you. That’s a promise and a statement, this website works without Tracking.
Inspired by Laura Kalbag, who was inspired by the footer text on Karolina Szczur’s website.
Why The reason I do not use tracking is an idealistic one. I no longer want to collect data for Google, and I do not want to support trackable users across websites.
Data sharing on the web is absolutely crazy, as this example of USAToday shows - GDPR is saving us Europeans again tho.
How Apache 2.4.30 and later can be used to automate SSL certificate setup and renewal
Published on
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.
For the longest time I completely ignored archetypes in hugo. I’d always copy over the front-matter from the last blog post I wrote and then fill in the things I needed - leading to some mistakes (e.g. using category instead of categories) over time.
Archetypes are easy to use, for example to create this post I ran the following command
$ hugo new blog/2020-01-07-using-archetypes-in-hugo.md This copied over the archetype file from archetypes/blog.
Using aliases to prevent 404 when restructuring your Hugo site
Published on
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.
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.
How I use Math and Date functions to flag old posts in Hugo
Published on
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.
Using CSS calc function reasonable and with fallbacks
Published on
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:
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.
I was recently researching different bash prompts and stumbled upon an StackExchange answer which explains the different prompt types (PS1, PS2, PS3, and PS4). The answer explains how the PS3 prompt is used for commands like select. I did not know about select before, so that’s the real TIL here!
[…] PS3 is shown when the select command is waiting for input […]
So the PS3 prompt is shown when a bash program is waiting for user input, and it turns out that the select bash command is used for creating a “choice” UI in bash.
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).
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.
If you follow my blog you might recall that I switched from Jekyll hosted on GitHub to Hugo hosted on Uberspace. Beside the fact I had to create a custom Hugo theme for myself and learn how to run a Hugo blog/website I also had to think about how I am going to deploy my website. Hugo is a static site generator and when executed ($ hugo) it compiles the site from Markdown and HTML templates into a public directory with lots of folders and HTML files.
For the past year or so I had a little function in my .bash_profile file which made my interaction with the terminal roughly 9001% better - yeah, over 9000! This little function is called ws and makes switching between projects inside my workspace a lot easier. Both my private and work projects are inside the ~/Development directory. If I want to get to a project I would normally navigate like cd ~/Development/private/github/kevingimbel/kevingimbel.
Over 2015 and 2016 I got more and more interested in automating my daily workflows with scripts. For this purpose I learned Bash Scripting (or Shell Scripting) and started writing my first scripts to automate repeating tasks, creating apache vhosts files for example. Recently I started exploring how to implement command line tools in NodeJS and this post should give an overview.
Shebang If you already know what a Shebang is skip to the next section
Today I was caught off-guard by a docker “bug” - or so I thought at first. I tried to boot up a project with docker-compose up like I do since switching to a Mac. Unusual was that docker-compose stopped at the build step and would not finish the boot. After some confusion and after checking the projects docker-compose.yml configuration file I went to GitHub to see the newest docker for mac issues because I was using the beta release and thought a recent update might broke a thing or two.
If you have visited my website in the past few weeks you might have notices a few things. First of all it looks different. Second, it is now served over HTTPS which is possible because I moved away from GitHub Pages and back to self-hosting my website. Third, and possible most important, I also moved away from Jekyll after using it for three years.
This very site you read right now is build with Hugo, a static site generator build by Steve Francia, Bjørn Erik Pedersen and a lot of contributors.
Lately I had a hard time working with my own website. Whenever I wanted to make some updates, write a post or fix a little buggy thing it only took a few minutes of “work” to get me really frustrated. Jekyll, despite my love for it, has become horribly slow. My site, which I consider rather “simple”, took 17-20 seconds to build on every change! Changing the CSS? Rebuild entire site.
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.
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.
Yesterday I finally took a few moments to implement Source Maps with Gulp for one of our client projects at work. I wanted to use the benefits of Source Maps for quite some time but never actually found the time to wrap my head around it (aka throw in another Gulp plugin). Source Maps are used to connect your pre-compiled files, like Sass, with the later compiled CSS - so inside the Dev Tools you can see for every line of CSS from which Sass file it comes - this is super handy once your project get’s bigger!
It’s been some time since I first got my fingers on VIM. My first impression was - as everyones I guess - pretty bad. VIM is not that easy to understand, yet a powerful, shortcut-based, distraction free editor. I’ve already written about turning Sublime Text into VIM mode and my very first VIM impression, but back then I just copy & pasted everything I found on the Internet into my .
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.
Today I had a task at work that first sounded rather easy: Add a field to the Admin backend, namely System->Config->Catalog where the user could later insert some SKUs to control which products are shown on the home page. The first resources I found on how to edit the Backend where all suggesting to create a Module and then create a settings page. Not only was this rather complex it was also way too “over engineered” for a simple thing like a text field.
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.
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.
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.
Since I’m still trying to really get why so many (Front-End) Devs love VIM I tried to find a “good” way to integrate it into my daily workflow. Since I’m working in a relativley small company it’s most of the time stressy to get all things done and to keep an overview - so long story short: There’s not much time for new tools that don’t increase my workflow directly. VIM is one of these tools that don’t fully support my workflow at the moment.
I myself always like to see what other developers use in their workflow: What tools? What plugin? Live-Reload, Pre-Processors, shortcuts - all that stuff. It’s always great to save some time, especially for repeating tasks or challenges. Today I want to share my list of tool that I use on a daily base for all kinds of things.
Browser-based The following tools are all for Chrome because I use Chrome for most of my development.
The other day I had a kind of easy problem in Magento that still took me quite some time to solve. In the shop I’m working on we had a contact form module that sents and validates emails which worked perfectly fine on one page (the one it was made for), however this form should be “cloned” to be present on 4 pages with different email addresses. Since Magentos Core is MVC-like I believed there would be an easy way to pass email addresses to the Controller.
When I first looked at Vim it was a very short experience that was literally as follows
# from the command line vim test.md *vim opens* "What's that?" *CTRL + C* "How do I even close this?!" *opens browser, googles "how to close VIM"* ESC + :q That was it and that was my Vim experience for quite some time. However, lately I see more and more people talking about Vim being the single best editor for everything - no matter what language one writes.
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.
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.
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.
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).
I first tried Brackets back in my Windows time. It was a very early version, kinda heavy and wonky and not what I wanted from an editor I use on a daily base at all. Just today I decided to give it a second look because beside VIM it is the editor I read quite a lot about latly. My first impression was: “Wow, that’s a simple, clean editor!” - exactly the thing I liked so much about Sublime Text 2 which I’ve been using for the last two years or so.
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.
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.
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!
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 *.
Today I decided to dig deeper into JavaScript and experiment a bit with scope, query selection and the general manipulation of the DOM. To do so I set up an object to store all my functions - this is not necessary but definitely more fun.
After naming my Object $ (because I new this from jQuery and I thought it would look cool) I renamed it to I and here comes the fun part: While learning JS I build i.
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?
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.
If you see Apps (no matter if native or web) and websites like I do, you’ll probably now the worst thing that can happen to an endless scrolling page: No shortcut to get back to top. Even Facebook doesn’t offer a way to get back to top on their website nor do they on Facebook for Android.
On Android you can simply hit the menu button and the sidebar-like menu will fade in, so there is no problem with not having an “scroll to top” action because there is no need to get back to the top.
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.
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.