Markus Oberlehner

Blog Page 17

Skeleton Loading Animation with Vue.js

Although there is some debate as to whether skeleton loading screens do enhance the perceived performance or not, there seems to be some evidence that they do work if they are done right. So today we'll take a look at how we can implement the skeleton loading animation pattern with Vue.js...

Using Location Data with Vue.js and Open Street Map

Today we'll explore how we can use the native browser geolocation API and the Open Street Map API to handle location data in a Vue.js applications. In our example app the users can press a button to automatically enter their address data into a form by allowing the geolocation API to access their current location...

Creating PDF Invoices with Airtable, Vue.js and Puppeteer

I recently started freelancing. After doing my thing, building great web stuff (of course), there comes a lot of additional work I'm not so experienced at: time tracking, book keeping and accounting...

Poor Man's Container Queries: Hide Content Based on the Width of Its Container

The more we think about websites as collections of separate components (or atoms, molecules and organisms, to use the terms of the popular Atomic Design methodology), the more clear it becomes, that Media Queries are not the best solution for building truly responsive websites and applications...

Thoughts About Design Systems and Naming Things

In the last couple of days I started thinking about how to name certain things in design systems. Naming things is one of those exercises which seem to just don't get easier, even after years of working on all sorts of design systems and CSS frameworks...

Implementing a GDPR Consent Workflow with Vue.js

Love it or hate it, GDPR compliance is now a requirement if you want to collect data from EU citizens. Today we take a look at how we can use the concept of renderless components to implement a basic GDPR consent workflow...

Using Cloudinary and Storyblok to Handle Assets for a Vue.js Application

In this article we‘ll learn how we can combine the awesome digital asset management platform Cloudinary with the power of Storyblok to automatically handle image optimazation for us. We‘ll also explore how we can use the additional data, like the dominant color or the aspect ratio of an image, provided by the Storyblok Cloudinary Assets plugin, to implement enhanced image lazy loading...

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...