How to create language marks in HTML

Quick tip UI interactions in simple language with uilang

Programming languages ​​are very much that; Languages. Mastering a good programming language, be it HTML, CSS, JavaScript or something else, has all of the challenges of learning a new spoken language.

As with spoken languages, each programming language has its own “grammar”. strict rules and idiosyncrasies that are often difficult to learn and only fully develop over the years.

uilang is a new, simple JavaScript-based language developed by Benjamin De Cock. Web designers can create UI click interactions using rules taken straight from the English language. This means a more intuitive and smooth learning curve for beginners who want to dig into using JavaScript, and a faster method of UI click interaction for older users.

What is Uilang doing?

The core of uilang is the ability to add, remove, or toggle class names on a specific element. This can only be three actions, but in combination with CSS all possible actions are performed, such as hiding notification and modal boxes, animating switches, showing drop-down menus for the navigation menu, and showing tabs and accordion systems .

Suppose you have the following notification box:

The overall box has the ID and the button has the class. CSS is also included on the page under the class, when this option is added to the field it will set the opacity to zero, which will hide or dismiss the notification.

The code used to create this box is:

You have 3 unread messages.

The vanilla JavaScript way

Use direct JavaScript if you want to add the class when you click the button you will need the following:

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 familiar with JavaScript, that amount of code can be quite overwhelming. Even if you are familiar, production can be quite time consuming.

The Uilang way

If you're using uilang instead of raw JavaScript, write a statement statement like this:

As you can see, this code is much more readable no matter how experienced you are. Its plain text makes it easy to understand and quick to implement.

Let's take a look at how Uilang works.

How does uilang work?

The first step in using uilang is to download the small JS file that supports this feature. You can do it through the Download Link at uilang.com.

Once downloaded, load the file into your HTML page using:

You can now use uilang with any element on your page.

First, select the target element, e.g. For example, a button that you want to show when you click it when people click it. Then you specify an action that adds, removes, or toggles a class name, and you determine which element that action should be applied to.

1. Identify the target to be monitored for clicks:

Make sure to include all uilang commands with keywords. Then always start with the words like this:

Next, add the class or ID of the item you want to target to find clicks enclosed in speech tags:

At this point, you can also choose to track multiple target items for clicks by adding a comma and a second class or ID:

2. Select an action

You now have the choice between three actions to choose from. , or.

Paste the action you want followed by the class name you want to add / remove / toggle:

3. Specify an item to be changed

Finally, add the word followed by the class or ID (within language marks) of the element to be changed, i. H. the element to which you want to add / remove / toggle a class:

Extra tricks

Multiple lines

You can also use several lines and define more than one click action at the same time:

Keyword "target"

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

Wrap up

With that, our quick demonstration of Uilang has just ended. The best way to find out what it's about is to go to uilang.com and play around with the live demos there.

A transpiler is also provided that you can use to paste in some uilang commands to see what is generated as a result of JavaScript: transpiler.uilang.com.

Benjamin, the developer, also published an article on Medium, which outlines the philosophy behind uilang and its goal of making the transition to learning JavaScript easier for others than it is for him.

If you're just into JavaScript and looking for a more intuitive way to get around the first hurdles, or if you're just looking for a streamlined way to handle click interactions, test uilang on your next project.