Blog

Read articles about Vue.js, JavaScript, CSS, Test Driven Development and Front-End Architecture in general. My blog focuses heavily on Web Development but occasionally I also write articles about personal topics.

Building a Renderless reCAPTCHA v3 Form Component with Vue.js

The modern frontend stack is all about reusable components. The renderless component pattern is one of the most elegant ways of how to build highly reusable components. Today we'll build a renderless component for handling form submission, loading and error logic in a generic and reusable way. Additionally we'll take a look at how we can use the new reCAPTCHA v3 to secure our form from spam submissions...

Read more

Lazy Load Vue.js Components When They Become Visible

Over the last couple of years as a web developer I've seen the same pattern over and over again: the homepage becomes a political issue within a company because every department wants to present itself and, of course, every department considers itself the most important. Usually two things happen: a slider is added at the top of the page so that each department can get its own slide at the very top, and more and more stuff is added to the homepage...

Read more

Using the Google Maps API with Vue.js

In today’s article we take a look at how we can use the Google Maps API in combination with Vue.js. We will build a simple Vue.js component which renders a Google Map. Furthermore we will find out how we can listen for click events on markers and how we can cluster multiple markers in close distance to each other...

Read more

abomination: a Concept for a Static HTML / Dynamic JavaScript Hybrid Application

Static site generators are on the rise. To be more specific: static site generators like Gatsby.js (React) and VuePress (Vue.js) which are based on modern frontend frameworks are becoming more and more popular. Although those are great projects and especially the developer experience is amazing, there is one huge downside of using those systems to generate mostly static, text and image based websites...

Read more

Variables in Design Systems

Recently, I've been thinking a lot about variables in (Sass based) design systems. My approach with avalanche, and more recently with the design system we're building at work, always was to use variables for everything from spacings to colors and things like border radius..

Read more

Using the Wrapper Factory Pattern for Vue.js Unit Testing

If you test Vue.js Components with a certain complexity, oftentimes you'll be faced with the situation of repeating the same component initialization code again and again. There are multiple patterns to deal with situations like that but today we'll take a look at how we can solve this problem by using a wrapper factory function...

Read more

Building a Static Site with Storyblok and Gridsome

In today's article we'll take a closer look at Gridsome and how it compares to the well established Nuxt.js. We will integrate the headless CMS Storyblok as a datasource for Gridsome an we'll build a simple site to demonstrate the capabilities of those systems...

Read more

Building a Simple Content Slider with Vue.js

Today we'll take a look at how we can build a simple content slider with Vue.js. We'll use the renderless component technique to create a reusable component which we then use to build multiple versions of a content slider...

Read more