Why I Wrote Alap: Links With Menus

Daniel Smith — May 2021

choice! why should links be limited to one place?

Overview

I just released a JavaScript package: alap — (Github, NPM)

(I wrote a more tech-heavy version of this over @ dev.to)

Alap enables attaching menus to HTML links.

I wont go much into the tech details in this short article. This is more of an overview of the some of the benefits.

Change up writing style

People have different ways of talking about links with their writing. The least helpful is when someone says something like “see this, that, or click here”

That style does not give much hint as to where you will end up!

A better style is to flow link titles into writing, such as: “When you are in San Francisco, check out the Ferry Building (where you can grab sandwiches from Acme Bread), immerse yourself in Chinatown, grab a slice at Golden Boy Pizza, and have a beer at the Park Chalet”.

That is a much more informative style. However, what if you could word it as “here are some things you should check out in San Francisco”? The idea being that you want to write at a higher level (or need to be more condensed), but you don’t want to leave out the good stuff in the links.

summarize writing, but also provide details

Make Choices Dynamic, Easy To Update

The way that alap is implemented, one specifies some identifiers or tags for the link items they want. It could be something like “ferrybuilding, chaletbrewpub”. When the link is clicked on, a menu is created by looking up those identifiers. The data can be part of the initial page load, or can come from a server. A benefit is that there is not so much hardwired into the web page.

For each possible menu item, it may have some tags associated with it. Alap enables some powerful ways to use this, such as “.nyc + .pizza” (build a menu of items that have the tags of “nyc” and “pizza”).

Allow For Customization

Alap uses a minimal set of CSS to get started.

The idea, though, is that it should fit into the style of the page, and not look like some third party add-on. The example that comes with alap shows how this is done.

Further, it is easy to override the look on a per-anchor basis (working off of the id of the anchor, it will make use of any special CSS rules — Ex: an anchor with the id of “sfmission” would make use of “alap_sfmission” CSS rules)

Photo by Nathan Dumlao on Unsplash