Quick Tip: UI Interactions in Plain Language With uilang

Coding languages are very much just that; languages. Becoming proficient in a coding language, be it HTML, CSS, JavaScript or anything else has all the challenges of learning a new spoken language.

Just as with spoken languages, every coding language has its own “grammar”; strict rules and idiosyncrasies which are often difficult to learn and only get fully absorbed over years of practice.

uilang is a new, simple JavaScript-based language created by Benjamin De Cock, and it allows web designers to create UI click interactions using a set of rules taken straight from the English language. This means a more intuitive and gentle learning curve for beginners wanting to ease into JavaScript use, and a faster method of UI click interaction deployment for old hands.

What uilang Does

The core of uilang is the ability to add, remove or toggle class names on any given element. This may be just three actions, but combined with CSS they translate to the ability to do all sorts of things like hiding notification and modal boxes, animating switches, showing nav menu dropdowns, and driving tab and accordion systems.

For example, let’s say you have the following notification box:

The overall box bears the id #notification, and the button has the class .hide. CSS is also included on the page under the class .hidden that when added to the box will set its opacity to zero, hence hiding or dismissing the notification.

The code used to create this box is:

<style>
/* Font styles, colors, etc. omitted for clarity */
#notification {
transition: .8s
}
#notification.hidden {
opacity: 0
}
</style>
<div id=notification>
<p>You have 3 unread messages.</p>
<button class=hide>Hide</button>
</div>

The Vanilla JavaScript Way

Using straight JavaScript, if you wanted to add the class .hidden to the box when the button is clicked, you’d need something like this:

document.addEventListener('DOMContentLoaded', function() {
[].forEach.call(document.querySelectorAll('.hide'), function(el) {
el.addEventListener('click', function(e) {
if (e.target.nodeName.toLowerCase() == 'a') {
e.preventDefault();
}
document.getElementById('notification').classList.add('hidden');
});
});
});

If you’re not experienced with JavaScript that amount of code can be quite overwhelming. Even if you are familiar it can still be quite time consuming to produce.

The uilang Way

By using uilang instead of raw JavaScript, to achieve the same end you write out an instructional statement like this:

<code>
clicking on ".hide" adds class "hidden" on "#notification"
</code>

As you can see, this code is far more readable no matter what level of experience you have. Its plain language approach makes it both easily understood and quick to deploy.

Let’s take a look at how uilang works.

How uilang Works

The first step to using uilang is to download the small JS file that powers it. You can grab it via the Download link over at uilang.com.

Once you’ve downloaded the file, load it into your HTML page with:

<script src=uilang.js></script>

You’re now immediately ready to start using uilang with any element on your page.

First, choose the target element, such as a button, that you want uilang to watch and respond to when people click on it. Then you set an action that will add, remove or toggle a class name, and you determine which element you want that action to apply to.

1. Identify the Target to Watch for Clicks:

Make sure you wrap any uilang commands in <code></code> tags. Then, always begin with the words clicking on like so:

<code>
clicking on
</code>

Next, add the class or ID of the element you want to target to watch for clicks, wrapped in speech marks:

<code>
clicking on ".thisbutton"
</code>

At this stage, you can also choose to have more than one target element tracked for clicks by adding a comma and a second class or ID:

<code>
clicking on ".thisbutton, #thatbutton"
</code>

2. Choose an Action

You now have the choice of three actions to choose from; adds class, removes class or toggles class.

Insert the action which does what you want, followed by the class name you’ll be adding/removing/toggling:

<code>
clicking on ".thisbutton, #thatbutton" adds class "popsup"
</code>

3. Specify an Element to Modify

Finally, add the word on followed by the class or ID (within speech marks) of the element you’ll be modifying, i.e. the element to which you want to add/remove/toggle a class:

<code>
clicking on ".thisbutton, #thatbutton" adds class "popsup" on "#message"
</code>

Extra Tricks

Multiple Lines

You can also use multiple lines and define more than one click action at a time:

<code>
clicking on ".thisbutton, #thatbutton" adds class "popsup" on "#message"
clicking on ".otherbutton" adds class "goesaway" on "#message"
</code>

Keyword “target”

If the element you want to track clicks on is also the element you want to add/remove/toggle classes on you can use the keyword target instead of writing out the identifier a second time, like so:

<code>
clicking on ".animation" toggles class "play_anim" on "target"
</code>

Wrapping up

That just about wraps up our quick demonstration of uilang! The best way to see what it is all about is to head over to uilang.com and play around with the live demos there.

Also provided is a transpiler you can use to plug in some uilang commands and see what straight JavaScript is produced as a result: transpiler.uilang.com.

Benjamin, the developer, has also published a piece on Medium detailing the philosophy behind uilang and his goal of helping to make the transition into learning JavaScript easier for others than it was for him.

If you’re just getting into JavaScript and looking for a more intuitive way to overcome those first hurdles, or if you’re just looking for a streamlined method of handling click interactions, try out uilang in your next project.