Emacs, scripting and anything text oriented.

Fragmentions

Kaushal Modi
Table of Contents

Have you ever got tired of having to find the a heading’s id (view site source using Ctrl + U) so that you can send someone a link like https://example.com/#foo?1

And then becoming even more frustrated when you find that the heading that you want to link does not even have an id attribute!?

And then in the end you resort to just telling them “Go to that page, and search for `foo’”? —

Today I came across this wonderful Javascript utility script called fragmentions.js by Jonathan Neal (the idea for that was pitched by Kevin Marks) that alleviates that pain — at least on this site (or more, if that site also uses this script, or you use one of the extensions listed in below reference).

As I have this script loaded in the footer of all pages on this site, if you want to link to a phrase “frobnicate foobar” on a page (like this one), simply prefix that with #, and append that to that page’s link.. like https://scripter.co/replies/fragmentions/#frobnicate%20foobar2Go ahead, click that link, try it.

You too can do that for your sites by downloading the fragmentions.js from the above linked project repo and loading it in your site footer.

Fragmention(er) #

Kartik Prabhu then goes an extra mile, and comes up with fragmentioner.js (and fragmentioner.css) that’s designed to be used along with fragmentions.js.

This project adds a nifty feature — While fragmentions.js allows you to link to #any arbitrary phrase, fragmentioner.js allows you to select a phrase and derive a fragmentions link using that.

I have now added that to this site too. To try it, select any phrase, and click the “Link to text” popup.

Reference #


  1. No wonder you will see, what I call “headline hashes”, for all post sub-headings on my blog 😄. ↩︎

  2. I replaced the space with %20 so that you can click that link right away, but you can type the literal space when typing in the browser address bar. ↩︎