Weblog and Proselight

Last year I encountered a problem while working on a personal project and I was unable to find any solutions online. I was forced to solve the problem on my own and I wanted to publicly document what I did so that others could benefit from some wisdom of the ancients. A blog seems like a decent way to do this since I already have a server and domain without any (public-facing) content. I'm a fan of what I've seen so far in the indieweb/smallweb spaces, so this can also be my small contribution to the ecosystem.

I have some nostalgia for the level of personalization many sites had in the early days of the web but I prefer to keep things fairly minimal. This page and it's resources are only ~14kB uncompressed, hopefully I've struck a decent balance between the two. I wanted to use a syntax highlighter since I plan to include code in some of my entries; Microlight seems to be a fitting choice since I wanted something small and didn't need anything too fancy. I adjusted its code to better fit my use-case and reduced the minified file's size down to ~1.8kB, those changes are available here.

By now you may have noticed the unusual styling on this page (if you have javascript enabled). Working with Mircolight caused me to wonder if anyone had made a syntax highlighter for prose. I found some previous attempts but they didn't seem to help in the way I expected. They tried to highlight parts of speech in order to give a similar visual experience to code highlighting, but reading code presents a different set of problems compared to prose. The most common problem I encounter is simply losing my place in the document I'm reading. Most people attempt to mitigate that problem by increasing the line-height of the text.

After giving this some thought I came up with two ideas: alternate the color of each line to make it less likely to land on the wrong line after reaching the end of the last, and create visual "anchors" in the text to help your mind keep it's place. I implemented the first idea in CSS using linear gradients to alternate the text color slightly. The second idea I implemented by modifying Mircolight to allow styling separators and terminators as well as text within quotes and parenthesis, those changes are available here. I'm not sure how helpful either of these ideas will end up being, though it does give a nice bit of personalization to the site!