Markus Oberlehner

Blog Page 18

Creating a Responsive Alternating Two Column Layout with Flexbox

Last week a Tweet by Benjamin De Cock about how to achieve a two-column layout with CSS Grid popped up in my timeline. This reminded me of my journey of creating a two-column layout featuring the image left / text right, text right/image left pattern, I've gone through very recently...

Using Docker to run BackstopJS Powered Visual Regression Tests

My very own CSS framework avalanche, uses BackstopJS for regression testing. Unfortunately, for the most time, this didn't work as expected on my continuous integration service of choice: Travis CI. The rendering of fonts is slightly different on the Linux image which is used on Travis CI compared to macOS which I use for development...

Implementing a Simple Middleware with Vue Router

The concept of Middleware in frameworks like Laravel makes it fairly easy to do things like requiring an authenticated user for specific routes. Today we explore how we can implement a similar concept in the Vue.js world using the Vue Router...

Building a Simple Ken Burns Slider with Vue.js

Clients love them most web developers hate them: sliders with fancy transition effects. Today we’ll build a straightforward implementation of an image slider featuring the famous Ken Burns transition effect...

Automatic SPA FTP Deploys with CircleCI

Most of my articles are about the latest and greatest tools and technologies out there. One of the nice things about writing blog articles is that you can devote yourself fully to exploring new technologies. There is no client dictating the specifications, and there is no legacy code and technologies you need to consider...

Vue.js Responsive Image Lazy Loading

In today's article, we take a closer look at how we can build our own custom lazy loading image component with Vue.js. We use the fast and lightweight Lozad.js package for handling the lazy loading logic for us, and we enhance it with the ability to display the dominant color of the image as a fallback color...

Building a Website with Vue.js, the Storyblok Visual Editor and Netlify

In recent weeks I played around with a ton of headless content management systems. To cut a long story short: there are a lot of bad and a couple of pretty good ones out there. At the end of my journey, I was left with two systems I both very much enjoy: Contentful and Storyblok...

Building a Custom Storyblok Field Type Plugin With Vue.js

In recent weeks I played around with a ton of headless content management systems. To cut a long story short: there are a lot of bad and a couple of pretty good ones out there. At the end of my journey, I was left with two systems I both very much enjoy: Contentful and Storyblok...

Building a Pre-Rendered Website With Nuxt.js and Storyblok

In recent weeks I played around with a ton of headless content management systems. To cut a long story short: there are a lot of bad and a couple of pretty good ones out there. At the end of my journey, I was left with two systems I both very much enjoy: Contentful and Storyblok...