About 2 weeks ago I added a new feature to the website. It was the first feature that changed things visually in absolutely ages. It wasn’t totally straight forward, required a bunch of tweaks to some of the core site rendering, but ultimately it resulted in new heading fonts.
I was quite happy with that, but it highlighted another issue. Namely that on the main page it was quite difficult to differentiate between different post types. Whereas notes have a hash link at the very end of each post that links to the individual note item page, other post types like blog, newsletter and podcast posts don’t have this. So when you are reading such a post, and it’s followed by a note post, there was no way to see you had finished the post and were now reading the note.
I could see I was about to tun put of build minutes, and that means it wouldn’t have been possible to make any modifications for several weeks. I decided to implement a temporary stop gap fix, to at least make sure posts were readable, so you could clearly see the start and end of all post types.
The obvious way to solve it was to add delimiters to posts, some visual thing at the beginning and end of each post. Turns out in programming that’s quite a common way to approach such problems. It shows up in code, for example comment bocks, but also if statements, function definitions in various languages. One place that’s quite well known to many programmers is Bash heredocs.
Heredocs are ways to define multiline strings in a bash script. It’s well known because bash is a shell scripting language, quite a low level way of accessing the operating system, through what is called a terminal. Most programmers spend their time in code editors editing code, but to actually run the code and to debug and analyse their code they will often drop down to using the terminal. It’s a much older interface than a graphical user interface, it’s all text based, but the tools are very powerful and versatile, which is what you want in that sirt of situation. It’s like the difference between a modern coffee shop and a motor vehicle mechanics workshop.
I figured the delimiters in the style of a heredoc might look quite cool, and were quite on brand for me given I’m a programmer. I wrote a brief description of the heredoc style delimiter feature and set off to build it. Before long I had it working.
The initial implementation worked, but I thought it looked a bit strange. Looking through the various syntaxes used fir heredocs, there was one where you specify a filename, and when the script runs the multiline text string gets outputed to that file. It’s a very conoact way to define the heredoc because the delimiter is on the same line as the filename. I figured I could update my implementation to use this style of heredoc, but instead of a filename, it would use the post title. I’m calling it the redirect to title style post delimiters. Very nerd cool.
I made some modifications, and after a bit of slightly difficult CSS wrangling, got it working.
It’s implemented in a way that makes it useful in other situations too, so even if it’s a stop gap solution, it might be useful in other situations. Basically you can add a prefix and postfix strings to your posts. So for example you could add emojis instead of the heredoc style delimiters.
I considered some other options:
- Left margin color border for notes
- Different color backgrounds for each post type
- Modify all post types to have a final # link
- Hoist all titleless posts above titled posts
(1) and (2) would be pretty cool to try out, and I hope to test these at some stage when I’m feeling a little adventurous, and have enough space.
I looked into (3) but decided to do that properly it was s bugger job, requiring a medium level code refectoring. I plan to do this at some point, it’s the most obvious and consistent way to approach the problem.
(4) turns out to be a variation of the daily links section added to each day. It would totally be possible, but not what I’m looking for for my site.
I’m glad I went ahead and got the heredocs delimiters working. They are currently operational on the website, but only the initial version. I ran out of build minutes before I was able to deploy the slighlty cooler looking redirect to title heredocs style delimiters.
This whole situation is an example of the sorts of compromises you sometimes have to make in the real world when you are faced with time presures. Get something functional working, then learn from that initial implementation and make the necessary updates to get to a better solution later when you have more time and resources.