Tutorial on configuring an alternative web analytics solution — Matomo, formerly Piwik, is an open-source web analytics solution. What sets it apart from competitors, such as Google Analytics, are its privacy features. It allows you to anonymize IP addresses, customize data retention and even enable cookie-less tracking. This last feature, in addition to improving visitor privacy, can allow you…

A tutorial on how to split web forms into pages. — Simple forms are great for login, newsletter subscription, contact, etc. However, if your form has more than a few fields, spreading them across multiple pages not only improves the user experience but can also increase the conversion rate. In multi-step forms, it’s also important to validate the fields before advancing…

A real-world example. Webflow components, such as Slider, Tabs or Lightbox, are very powerful, but their internal structure can sometimes be too rigid to style them as desired. You may also need to combine multiple components together. To solve these problems, you need to write a bit of glue code…

Webflow empowers designers to build custom websites without writing any code. However, custom code is helpful in adding that extra layer of polish to your website. Tiny code sprinkles can make the difference between a good and exceptional site. …

A match from heaven — To add interactive behavior to a Webflow site, the standard options involve writing imperative JavaScript or defining it via a point-and-click Interactions interface. Neither of these fit my personal style, so I decided to use Alpine.js. Alpine.js is a minimal JavaScript framework for composing behaviors directly in HTML markup. It…

Store the current tab in the URL, to navigate to it from anywhere else in the app — I would like to present to you a quick tip about working with the tabs component in Vuetify.js. I sometimes need to navigate to a specific tab in the application or want to share a direct tab link with a collaborator. In order to achieve this, we need to store…

A neat trick when presenting lots of data using a Data Table — If the number of rows grows too large, or we are viewing the site on a mobile device, the table may not fit on the screen. If this happens, it can be unclear which column represents what information. One solution to this problem is to always keep the table header…

Vuetify.js is a Material Design component framework that allows customizing colors easily via themes. However, one color that is missing in the theme config is the background color. In this article we will fix that via CSS variables! We will be using Nuxt.js — a meta-framework for Vue.js. However, very…

A short tutorial about building an interactive list component as a simple alternative to drag & drop. TL;DR Here’s the component in action: