A match from heaven

Image for post
Image for post
Photo by Sylvain Mauroux on Unsplash

To add interactive behavior to a Webflow site, the standard options involve writing imperative JavaScript or defining Interactions via a point-and-click interface. Neither of these fit my personal style, so I decided to use Alpine.js.

Alpine.js is a minimal framework for composing JavaScript behaviors directly in HTML markup. It offers the reactive and declarative nature of big frameworks like Vue.js or React at a much lower cost.

The fact that it initializes instantaneously and that the code lives directly in element attributes, makes it a prefect match for the Webflow visual development approach.

So how do you use Alpine.js …


A real-world example.

Image for post
Image for post
Photo by Philipp Lublasser on Unsplash

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 we need to write a bit of glue code. This can be done using imperative JavaScript or jQuery, but we will achieve the same effect with reactive Alpine.js code.

In my previous article we explored how to use basic Alpine.js features inside Webflow. In this article we will develop an alternative navigation bar for the Slider component:


Store the current tab in the URL, to navigate to it from anywhere else in the app

Image for post
Image for post
Photo by Chiara F on Unsplash

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 the information about the current tab in the URL in the browser address bar. A canonical solution involves using nested routes, but sometimes it’s an overkill to create a separate child page for each tab. Thankfully there’s a simpler approach that I quite often end up using.

TL;DR — go straight to the final code

Simple Tabs

First let’s…


A neat trick when presenting lots of data using a Data Table

Image for post
Image for post
Photo by Alexander Mils on Unsplash

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 visible when scrolling, and there are a couple of ways we can make this happen.

TL;DR — go straight to the final code

Fixed-Height Table

The simplest solution is to use the data table’s built-in fixed-header property, which only works if height of the table is defined (see v-data-table documentation for more info):

<v-data-table :headers="headers" :items="data" height="33vh" fixed-header />

Image for post
Image for post

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 similar techniques can be applied to vanilla Vuetify.js.

TL;DR — go straight to the final code on Codesandbox:

As described in the official Vuetify.js documentation, it’s possible to choose between a light and dark theme and set the basic colors in the nuxt.config.js file vuetify section:

vuetify: { theme…

A short tutorial about building an interactive list component as a simple alternative to drag & drop.

Image for post
Image for post
Photo by Kolar.io on Unsplash

TL;DR

Here’s the component in action:


Image for post
Image for post
Photo by Mika Baumeister on Unsplash

Vuetify.js is a Material Design component framework that can be easily customized. It allows you to change the colors of all it’s components using a theme. Apart from changing the basic colors, it’s also possible to define new colors, customize each individual color’s lighter / darker variants and change the theme dynamically at runtime.

In this example we will be using Nuxt.js — a meta-framework for Vue.js. However, very similar techniques can be applied to vanilla Vuetify.js.

TL;DR — go straight to the final code:

You probably already know that it’s possible to chose between a light and dark…


A short tutorial about adapting typography using SCSS variables.

Image for post
Image for post
Photo by Jon Tyson on Unsplash

Vuetify.js is a Material Design component framework that can be easily customized. Apart from color theming, it allows you to change it’s internal variables that control how the CSS stylesheet will be generated. This way you can change the default fonts.

In this example we will be using Nuxt.js — a meta-framework for Vue.js. I have chosen two fonts: Libre Baskerville for body text and Oswald for headers. For simplicity we will retrieve these fonts from Google Fonts service, but you can also opt for self-hosted versions via Typesfaces project (recommended!).

TL;DR — go straight to the final code:

Only one font


A short tutorial on how to display the source code in Sentry when using the Nuxt.js generate command

Image for post
Image for post
Photo by Hayley Maxwell on Unsplash

The Problem

Recently I was faced with a bunch of front end errors occurring only in the production environment. The error reports were coming from Sentry and it was really hard to understand exactly where in the application the error was occurring. I knew I needed to see the code in order to understand what was going on.

The site was generated using a nuxt generate Nuxt.js command, which caused another, less severe, problem. Each error was treated as unique by Sentry, since they were coming from files with different names (based on hash).

Here’s what I saw in Sentry:


Image for post
Image for post

When I was looking for a way to back up Docker named volumes I was surprised to find out that there’s no standard way of handling the process. In the official documentation there’s only a note about using data volume containers and a --volumes-from option. There’s also a docker cp command, but it requires the volume path inside the container that uses them, which makes it less generic.

After a bit of research, it turned out it’s actually pretty easy to back up volumes using volume mounts and a tar utility. For example to backup some_volume to /tmp/some_archive.tar.bz2, …

Jarek Lipski

Full-Stack Developer / Agilist / Free and Open Source Software Fan.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store