Alpine.js 💙

#redesign

Alpine.js is mijn nieuwe favoriete javascript framework aan het worden. Alpine.js is ideaal om te gebruiken voor bijna alle functionaliteiten op een website. Het is makkelijk toe te voegen, niet onnodig groot en de code schrijf je direct in je html (of in mijn geval .njk) bestanden. Daarnaast werkt Alpine.js heel mooi samen met Tailwind. De syntax is geinspireerd op Vue en de schrijfwijze op Tailwind:

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.
You get to keep your DOM, and sprinkle in behavior as you see fit.
Think of it like Tailwind for JavaScript.

Elke website maakt wel gebruik van javascript. De één meer dan de ander, maar meestal ontkom je er niet aan. Denk bijvoorbeeld aan toggles, modals of filters. De keuze hiervoor was lange tijd jQuery. Omdat jQuery eigenlijk wat te "zwaar" is kwamen er verschillende alternatieven. Wij gingen dit soort functionaliteiten uiteindelijk schrijven in "standaard" Vanilla js. Tegelijkertijd werden de javascript frameworks React, Angular en ook Vue ook steeds populairder. Deze frameworks zijn ideaal voor webapps en sites, maar zijn niet direct geschikt om in te zetten voor de simpele functies die ik hierboven noemde. Dat is Alpine.js wel 🎉.

Voorbeeldje

Dit is de simpele manier waarop ik (op mobiel) de navigatie open met een hamburger button. Voor de classes gebruik ik zelf Tailwind, maar dat maakt het voorbeeld minder duidelijk. Zoals je ziet pas ik ook het aria-label aan van de button en voeg ik aria-expanded toe aan de navigatie als deze wordt geopend. Dit doe ik voor de digitoegankelijkheid en is met Alpine.js simpel mee te nemen.

  <div x-data="{ isOpen: false }">

<button @click="isOpen = !isOpen"
class="toggle-button"
:class="{'active' : isOpen }"
x-bind:aria-label="isOpen ? 'Menu sluiten' : 'Menu openen'"
x-bind:aria-expanded="isOpen"
>
🍔</button>

<nav :aria-expanded="isOpen" :hidden="!isOpen">
MENU
</nav>

</div>

Ik gebruik Alpine.js natuurlijk niet alleen daarvoor op deze website. Ook het aanpassen van de navigatiebalk tijdens het scrollen en op de homepagina voor het klikken op de namen ☺️. En ik heb nog genoeg ideeën.

Namen

De effecten van bovenstaande functie zijn op onderstaande manier toe te passen.

<span
x-show="open"
x-transition:enter="transition ease-in duration-150"
x-transition:enter-start="opacity-0 transform scale-90"
x-transition:enter-end="opacity-100 transform scale-100"
x-transition:leave="transition ease-out duration-500"
x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-50"
class="w-24 h-24 block"
>
</span>

Handige resources

Ook zo enthousiast? 😉 Dan is dit een handig lijstje om eens te bezoeken. Have fun!