DEV Community: Benjamin Bromberg

Alpine hands on: simple countdown

Benjamin Bromberg — Fri, 15 May 2020 12:57:05 +0000

Alpine.js is a minimalist JavaScript framework aiming to bring the convenience of reactive and declarative programming, known from full fledged frameworks like React, with a much smaller footprint.

LogRocket published a good starting point if this is your first time hearing about Alpine.js and a previous article of mine on Animations with Alpine.js is here on dev.

Countdown with Alpine.js

While the framework focuses on only few directives these unlock a great power to comfortably and quickly build interactivity into your websites.

With a simple countdown as example app we can see how Alpine.js enables us to read data from the DOM and react to events, all while keeping our HTML connected to the JavaScript.

To illustrate that I have created a simple form taking a number input to start our countdown from, like so:

x-data

Right on the first element we define our variables with the x-data attribute. This is like setting javascript variables with var or let. Values from x-data are available in all child nodes.

x-show

This directive allows us to control the visibility of an element based on the provided boolean value.

@submit.prevent

This command actually combines a lot of helpful actions. The @ is an alias for on-, which allows us to capture events, in this case the form submit event.

With the modifier prevent we let Alpine.js take care of the default event behaviour, similar to what event.preventDefault() would do in vanilla JS.

As we can write any valid JavaScript code in our directives I use the event handler to set the active status to true, read the countdown start value from our input with $refs and start the countdown through setInterval.

x-ref

This sets a reference to the node, which allows us to access it with the global $refs variable later on in the code.

Now onto our actual countdown:

Again we are using the x-show directive to control visibility of our form or the countdown elements.

x-if

This is similar to x-show but can only be applied to template elements. With the if directive we can control what elements will be rendered, rather than just setting the display value.

x-text

Alpine.js also provides a convenient way to set the text and html property of nodes with the respective directives. This will set the content to the value of the variable passed into the directive.

A live example of the complete code is available on JSFiddle.

Code images are generated with carbon.

Cover photo by Sarah Pflug.

Animate with Alpine.js

Benjamin Bromberg — Sat, 11 Apr 2020 15:56:53 +0000

Alpine.js is a minimalist JavaScript framework that leverages modern syntax and reactive features similar to Vue, intend to offer an alternative to jQuery.

There are a couple of great introductions to Alpine, its benefits and use cases, so I will not repeat that and just refer to this article by Phil Smith.

One aspect I liked while working with Alpine recently was the ease and simplicity to add small transitions and effects to elements, especially in combination with a utility CSS library like tailwind.

Alpine Animations

Arguably one of the things jQuery is most used for is adding effects, such as visibility toggles, sliding and fading animations.

While nice to have, it probably rarely justifies bloating up a website. Thankfully Alpine.js can handle this with the built-in transition directive, that allows to add CSS classes to granular stages of visibility changes.

Toggle visibility

Lets look at how we can show and hide a message easily with a few lines of code.

A live example of this can be found on JSFiddle.

While this is not using transitions, it illustrates a couple of the things that make Alpine great. A button can be animated to show and hide an element and dynamically update its label. All without writing any traditional script code.

If you have worked with Vue before the syntax will look very familiar to you, as Alpine is heavily inspired by it.

To make the above example work we make use of some simple directives:

x-data sets variables
x-text can update the text of its node reactively
@click is an alias for x-on-click, essentially a click event listener
x-show controls the visibility of its node by the boolean of its value

Fade transitions

Now onto some actual animations. For that we can use the x-transition directive, which allows us to apply CSS classes at specific animation phases.

Remember that the classes have to be defined in CSS, so you will need to either add your own utility classes or use the ones provided by tailwind.

Check this fiddle for a live demo.

With just a couple of attributes on our element we tell Alpine to transition the opacity and transform the scale of our element, to create a simple and pleasant effect.

What Alpine is doing for us here is attaching the CSS classes from the attribute value to our element at the appropriate stages of the transition.

As this is based on CSS we can get extremely creative and have full flexibility. If, for example, I want the button to scale up instead of down when fading out all I have to is change the end stage of the transition like so.

Bottom line

Alpine.js is a lightweight framework that brings reactive coding and syntax known from platforms like Vue in a smaller form factor.

Using it unlocks powerful features, makes code more logical and connected, is responsive all while being only a couple of kilobytes.

With its simple directives Alpine is fast to learn and can often be enough for small projects, that don’t require full blown frameworks like Vue or React.

Read the docs on Alpine.js on GitHub.

Code screenshots were created by Carbon.

Bulma Style Erweiterungen mit Nuxt.js

Benjamin Bromberg — Wed, 01 Jan 2020 09:30:55 +0000

Mit der grossen Menge von mächtigen und vielseitigen JavaScript Frameworks, wie React und Vue, die mit modernen Technologien und Workflows das Programmieren von statischen Webseiten, Single Page Apps (SPAs) und anderen Web-Formaten ermöglichen, entstand eine Lücke für weitere Frameworks die Verwendung dieser Tools zu vereinfachen.

Ein solches Framework is Nuxt.js, dass auf VueJS aufbaut und dessen Verwendung mit vorkonfigurierten Modulen strukturiert und vereinfacht. Mit dem Nuxt Kommandozeilen Programm ist das schnelle einrichten von Grundstrukturen eine Sache von Minuten. Zahlreiche beliebte Style-Frameworks wie Bootstrap und Bulma können dabei mit einem Befehl eingebunden werden.

Bulma Extensions

Sollen diese Style-Frameworks aber über den in der Standart Version enthaltenen Umfang erweitert werden, ist das oft etwas komplizierter. Wie solche Style Erweiterungen geladen werden können erklärt dieser Artikel am Beispiel von Bulma Extensions.

Einbinden mit NPM und SCSS

Die meisten Bulma Extensions stehen bereits als NPM Paket bereit, was die Installation und Einbindung in Nuxt deutlich vereinfach. Das benötige Packet für die gewünschte Extension muss dann einfach zur packages.json Datei hinzugefügt werden. Anschliessend können alle benötigten Informationen mit dem folgenden Befehl installiert werden:

npm install

Die Style Informationen sind nun installiert, müssen aber noch geladen werden bevor sie in einem Nuxt Projekt verwendet werden können. Das geschieht mit Hilfe von SCSS, dafür müssen wir index.scss als neue Datei im Ordner assets/sass des Nuxt Projekts erstellen.

In dieser Datei lade wir nun das Bulma Framework und unser frisch installiertes Extension Paket, das geht so:

@import './node_modules/bulma/bulma.sass';
@import './node_modules/EXTENSION ORDNER/src/sass/index.sass';

Wobei EXTENSION ORDNER natürlich mit dem Ordner Namen der gewünschten Extension ersetzt werden muss.

Im letzten Schritt konfigurieren wir Nuxt nun so, dass es die SCSS Datei einliest und die benötigten Styles lädt. Das passiert in der nuxt.config.js Datei im Hauptordner des Projekts, hier muss im css Block die erstellte index.scss eingebunden werden, etwa so:

css: ['@/assets/sass/index.scss'],

Und damit stehen alle Style-Element von Bulma und der gewählten Extension in jeder Seite und Komponente des Nuxt Projekts mit dem jeweiligen CSS Klassennamen zur verfügung.