MultiLink, The 3rd Demo

The 3rd Demo is up!

This is Part 3 post about MultiLink.  I laid a lot of groundwork about the idea of one click: many targets, in Part 1 and Part 2.

As I’ve written, MultiLink uses an HTML5 data attribute to get the names or tags of items to put into a list.  You could think of it as spreading some placeholders around a web page.  They are given meaning once those names are paired with some data that specifies a web address and a label ¹

What’s New?

To very quickly summarize the new parts of this demo, I can show two snapshots:

Include the contents of a data attribute from elsewhere …

Which uses:

<!-- we have #cars1 and #cities1
     defined elsewhere on the page -->
<a id="carcity1" class="multilink"
data-dls-links="#cars1, #cities1">#cars1, #cities1</a>

… and, do interesting operations with tags:

Which uses:

<!-- we step through tags from left
     to right -->
<a id="nycorbridgenolon" class="multilink"
data-dls-links=".nyc | .bridge - .london"
>"nyc OR bridge, without London (| and -)"</a>

What that means is …

• We can include entire data attributes from elsewhere, recursively
• We can expand tags to a set of matching items, and combine those sets with basic “AND”, “OR”, and “WITHOUT” operations

Break It Down, Bucky!

So like I said: The 3rd Demo is up!  — that explains a lot that I cant (yet) show in a blog post.

… However …  I can lay out a couple of examples as to when/why someone would use the new functionality.  I think I need a couple of names to refer it…

• ID Includes – grab the contents of a data attribute from elsewhere, to make it a part of the current thing we’re looking at
• Tag Expressions – combine sets of tag results in different ways

Cool, so I now I can move on and explain the examples.

ID Includes

If I wind back to the basic functionality of MultiLink, it’s looking at a list of “Link IDs” that match some block of data. So, when we have this on a web page:

<a id="beer1" class="multilink"
data-dls-links="sierranevada, fosters, pilsnerurquell"
>beer</a>

We match these items in a block of data:

"sierranevada": {
	"label"	: "Sierra Nevada",
	"url"	: "http://www.sierranevada.com/",
	"tags"	: ["beer", "ale"]
},

"fosters": {
	"label"	: "Fosters Beer",
	"url"	: "http://www.fostersbeer.com/",
	"tags"	: ["australia", "beer", "lager"]
},

"pilsnerurquell": {
	"label"	: "Pilsner Urquell",
	"url"	: "http://www.pilsnerurquell.com/us-home",
	"tags"	: ["beer", "pilsner"]
}

The HTML element with the ID of “beer1” contains a data atribute. That data attribute refers to a list of items we hope to match in our block of JSON data.

I dont want to keep typing “sierranevada, fosters, pilsnerurquell” all over a web page in a data attribute. Besides, that list might change. I can have data atributes elsewhere on the page simply refer to “#beer1” (the HTML id), and pick up whatever I find in that list.

So, a leading ‘#’ is used to specify a reference to some HTML id.

And… this gets recursive…

<a id="sportscars" class="multilink" data-dls-links="bmwe36, ferrari360">
sports cars</a>

<a id="suv" class="multilink" data-dls-links="toyotalandcruiser, fordexplorer">
SUVs</a>

<a id="allcars" class="multilink" data-dls-links="#sportscars, #suv">
SUVs</a>

<a id="trucks" class="multilink" data-dls-links="fordpickup, toyotatundra">
trucks</a>

<a id="vehicles" class="multilink" data-dls-links="#allcars, #trucks">
trucks</a>

• #vehicles
  • #allcars
    • #sportscars – bmwe36, ferrari360
    • #suv – toyotalandcruiser, fordexplorer
  • #trucks – fordpickup, toyotatundra

MultiLink keeps track of IDs, so there are no endless loops when names point at each other.

That’s the gist of ID Includes (recursion).  We basically fetch data from elsewhere, before moving on and parsing for tags.  (I didn’t show tags as part of the example, but they certainly work — I’m just keeping the example simple.)

Tag Expressions

As I have shown in previous posts, tags draw some inspiration from CSS Classes.  I use a leading ‘.’ to indicate a tag:

<a id="nyctag" class="multilink"
data-dls-links=".nyc">"nyc"</a>

… and I can have lists of tags:

<a id="nyclonsftag" class="multilink"
data-dls-links=".nyc, .london, .sf">
"links from nyc, london, or sf"</a>

As you can guess, straightforward comma-separated lists of tags can yield potentially big sets of everything that matches. Maybe that is good for what you want, and at other times, perhaps you want to narrow things down.

A Tag Expression parses through two or more tags that are part of one expression (no commas):

There are three operations that can be done: AND “+”, OR “|”, and WITHOUT “-”

AND

<a id="nycandbridge" class="multilink"
data-dls-links=".nyc + .bridge"
>"nyc AND bridge (+)

A “+” is used for “AND”. We DONT want all of the matches for the “.nyc” tag, added with all of the “.bridge” matches. That would give us nyc parks, london bridges, and a huge list. We want the things that “match .nyc AND that match .bridge”: i.e. the subset.

You can say things such as “.munich + .beerhall + .pilsner” to get very specific.

OR

Although one could think of “.nyc, .london, .sf” as a big “OR” of tags from different cities, there is another case. You may want to say “.nyc | .london + .bridge”. That means “grab the sets of tags that match either nyc or london, and show me just the ones that also have the tag of “bridge”.

You would use “|” (OR) to build up a big list, and then look for specific things within it. Another case is to toss specific things out. That is the next item: WITHOUT (“-“)

WITHOUT

<a id="nycorbridgenolon" class="multilink"
data-dls-links=".nyc | .bridge - .london"
>"nyc OR bridge, without London (| and -)</a>

Think of “-” for WITHOUT as meaning “subtract these items from what came before”. I might say “show me all of the cars from toyota, ford, and chevy, but dont show me the minivans”. That would be “.toyota | .ford | .chevy – .minivan”.

Tag Expressions are still somewhat simple minded. I dont have grouping with “(” and “)”, and I am not paying attention to operator precedence. I’m just winding through the expresson from left to right. That would seem to address most of the usual uses for this.

…. and, there is the notion of Regular Expression searches on labels, links, tags, and ids …

Wait, did I say that out loud? Not committing to anything, mind you. Just saying that I have a lot of thoughts as to where all of this can go.

Stopping Point For Now

This post, and the 2 parts before it (along with the 3 demos) lay out a pretty flexible and powerful approach towards dynamically building lists of links for a click. I’ve always thought that the idea of “one click can only go to one place, unless you are navigating a menu within the site” to be a bit limiting. MultiLink is an exercise in that leverages a bit of HTML5, jQuery, and JSON to show an idea I’ve been pondering for about 15 years 🙂

Enjoy!

The Part 1 Post, and demo
The Part 2 Post, and demo
The Part 3 demo

MultiLink, the real demo, is alive!

Go see the MultiLink Demo …

This is my Part 2 post about MultiLink.  You can get some of the basic idea in Part 1.

To Recap…

The basic idea is to create a consistent, lightweight, and easy means to provide multiple urls to a standard web page link.

So clicking on a link named “Brooklyn” gives me this:

“Wait a minute!”, you say!  “That’s just a menu!”.   Well, yes and no.  It is a menu of places to go, in a more general and flexible scheme than merely navigating within a site ¹

• The list of targets are defined in a bit of JSON, outside of the web page
• Each link uses a data attribute (I use “data-dls-links”, in order to claim a namespace) to define a list of targets
• You can mix references to absolute ids of links, and tags which may match some links
• This approach does not clutter the web page with a lot of hard definitions of places to go, and the contents of the JSON data can be updated with new ids, labels, urls, tags, etc.

MultiLink finds matches and creates lists of links.

What is New since the first demo?

There are two big changes I have made: JSON gets moved out to its own space ², and I have implemented tags (think of how classes work for CSS).

I used to have this:

<!--      yikes, well this is one way of doing it.... -->
<a id="myLinks" class="multilink" href="#"
data-dls-links='{"allLinks" :[{"label": "one to Techcrunch..", "url": "http://techcrunch.com"},{"label": "and one to pinterest","url": "http://pinterest.com"}]}'>Set of links...</a>

While it works, it’s ugly and I think it could be error-prone. I also dont like the idea of hard-coding globs of JSON in the middle of a web page. It’s one more thing that could sway ones decision as to whether they could cache the HTML content or not.

Now I would rewrite the example above as:

<!--     much more concise, and not hardwired in html -->
<a id="myLinks" class="multilink" data-dls-links="techcrunch, pinterest">Set of links...</a>

Really? That’s it?! Yes, really. I think it makes a lot of sense to use the contents of the data attribute (in this case: “data-dls-links”) as a place to put the references to what I want in my link list.  I wrote all of the JavaScript glue to tie that together with the JSON data that defines links, labels, tags, and ids.

So, Where Is The Data?

It’s sitting in JSON, waiting for some JavaScript/jQuery to come parse it.

In my example, I have a file: js/Config.js.  It has blocks such as this:

"brooklynbrewery": {
        "label" : "Brooklyn Brewery",
        "url"   : "http://brooklynbrewery.com/",
        "tags"  : ["nyc", "brooklyn", "beer", "pub", "cafe"]
},

"sydneyoz": {
        "label" : "Sydney, Australia",
        "url"   : "http://en.wikipedia.org/wiki/Sydney",
        "tags"  : ["australia", "sydney", "city"]
},

It happens to be a file for the purposes of my example, but of course it could be a block of JSON data, fetched from an AJAX request. A sample of the complete JSON block would look like this:

"allLinks" : {
    "londontowerbridge": {
		"label"	: "London - Tower Bridge",
		"url"	: "http://en.wikipedia.org/wiki/Tower_Bridge",
		"tags"	: ["london", "city", "bridge"]
    }
}

In the example above:

• “londontowerbridge” is a link ID
• “London – Tower Bridge” is the label that will show for the link in the list
• “http://en.wikipedia.org/wiki/Tower_Bridge” is where it will go
• this link can be found by the tags of “london”, “city”, or “bridge”

A link has a data attribute. That atribute has a list of ids and tags. Some javascript reads that and matches it against a block of JSON, and creates a list of clickable targets. That’s MultiLink in a very small nutshell.

Tell Me About IDs and Tags …

In a data attribute, I can specify a list of references.  It’s the job of some JavaScript to turn those into links.

An ID is pretty easy:

data-dls-links="techcrunch, pinterest"

That just means “go find ‘techcrunch’ and ‘pinterest’ in my JSON block”. For every match, we add a new link.

What happens when there isn’t a match? Nothing. Think of it as a web page author putting placeholders in a page, and they become “live” later when there is some JSON definition for them.

What if one doesn’t know (or care) of a specific id, but just wants to match against tags? I’ve made it so that specifying that is just like referring to a CSS class: use a leading ‘.’ If I want to match any links with the tag of “city”, I would use:

data-dls-links=".city"

And of course, I can double up on these:

data-dls-links=".surfing, .snowboarding"

… And I can combine these:

data-dls-links="AngelinaJolie, BillClinton, .actor, .politician"

Which would give me a list that leads off with two specific links, followed by whatever I have that matches that tags of “actor” or “politician”.

What happens when a link gets matched multiple times (i.e by id and tag?) It is only used for the first match. It wont repeat, so the list will not get cluttered.

Groovy, What Next?

There are many possible next steps, but the three that I find most interesting would be:

• Provide some options for the list, such as class, title, small icons, etc
• Combine tags so that 2 or more of them would have to match. Example: “.germany+.beer” or “.nyc+.bridge”. There is also the notion of subtraction, such as “.music-.polka”
• Show the related tags at the bottom of the list (or near each link), and make them clickable, so that a user can easily navigate to possible items of interest)

Thanks for checking this out. I will make a download of this available soon.

Go see the MultiLink Demo …

This is my Part 2 post about MultiLink.  You can get some of the basic idea in Part 1. I continue this in Part 3.