MK

How quickly we need JavaScript frameworks

developing in the open

For no virtuous reason, I avoided JavaScript for the first few years of my web development career.

Now, I avoid it for more virtuous reasons.

But I wanted to be able to set up a little kitchen sink that also demoed the colors in the design system. I wanted each color to have a button that would change the background color.

I know I could code up something in vanilla JS, or I could use Vue, the framework I know very well. Or I could use something else. I opted for Alpine.js as it is very light weight and gives me what I want, a reactive state and simple declarative event bindings. It took me about 10 minutes with to make the functionality work. I made only one mistake, which was to set the state on the wrong element. Alpine.js reads special attributes on your HTML called directives. One of them is the x-data directive that creates a reactive state based on an object you pass it. Another the x-bind directive lets you control HTML attribute values like class by adding them after a colon like so: x-bind:class.

This is how the I set up a div so that the color and background color can be set dynamically.

<div 
    class="kitchen-sink" 
    x-data="{ bgColor: 'inherit', color: 'inherit' }"
    x-bind:class="`bg--${bgColor} color--${color}`">

The list of colors looks like this:

<ul>
{% for name, color in tokens.palette %}
<li style="color: var(--{{ name }});">{{ name }}: {{ color }} 
    <button x-on:click="bgColor = '{{ name }}'">Set as background</button>
    <button x-on:click="color = '{{ name }}'">Set as text</button>
</li>
{% endfor %}
</ul>

The stuff in double brackets or in the bracket and percent signs ({%, %}) is Nunjucks, a server side templating language.

There are a lot more things to share about Nunjucks and how I passed the colors into the CSS and created the classes to set the colors.

Release notes