Breaking Changes: URI Fragments
Published
It’s been a few years since I’ve (intentionally) introduced any breaking changes to this website that you, as a reader, should have noticed.
Oh wow lookie, a convenient header!
Here’s the latest one:
- The “anchor/hash links” for headers (look up ☝️) have been improved, at least to my opinionated standards.
- For context, way back before I was even version controlling this code I took CodePen’s copypasta for a quick-and-dirty client-side implementation with jQuery.
- Since then, in a few personal projects I’ve been trying a different strategy that ultimately boils down to 1) use an existing
idif there already is one and 2) only append an auto-incrementing number if there’s a duplicate.
Additionally, I added Wesley Aptekar-Cassels’ deeplinks project as a way to share highlighted snippets of prose. Here’s an example (it needs to link to a different page because it’s not listening for hash changes). This is only added to entries because most other pages are paginated or have more dynamic content which is not a good fit for attempting to deeplink to.I didn’t end up doing this after some local testing as there’s some fixes and improvements I’d like to see, namely responding to links on the same page and only clobbering the fragment if it’s one generated by the deeplinks library. I emailed Wesley to see if they’re interested in any help maintaining the project. There’s also something called “text fragments” that will hopefully be supported by all baseline browsers in the future.
In my opinion, there’s two main ways of structuring fragment links to headers:
- A “slugified” version of the text content (the most common and the route I went with) which prioritizes human readability e.g. /uses#coffee goes to the “coffee” section of the “uses” page.
- Based entirely on the hierarchy and order i.e. “this is the nth header” which prioritizes being tightly coupled to the underlying markup structure.
I’m more into “clean” and “pretty” humane URLs so I opted for the first route. I think if it was kosher to let HTML IDs start with a digit, I’d be more interested in the 2nd option. I do like the option of doing something like href="#3.1" which would be targeting the “first header that is a child of the third header” or something like that.
Ultimately, I don’t use many headings in my writing so this doesn’t come up as often as I’m probably thinking it does. To be honest, this mostly came as a side effect of building out my /uses where I wanted to have an abnormal amount of headers to act as the demarcation (I’ve wanted a good excuse to use that after it entered my vocabulary in the past year) between content.
A neat aside, I learned that you can customize the autogenerated header ID in Markdown like so:
## My Heading {#custom-id}And renders, as expected:
My Heading
Which is a great tip since cool URIs don’t change even though I’m (unfortunately) changing mine all in the name of selfishness a Better Future™ as I said last time.
One last thought: since the fragment part of a URI isn’t sent to the server, you don’t get a 404 log in the same way. I wonder if there’s been any effort to try and accomplish the same thing client-side and report it. I’ll try and remember to write that down for later. :)
I love hearing from readers so please feel free to reach out.
Reply via email • Subscribe via RSS or email
Last modified #announcement #meta #ux #blot