New blog feature rollout

Plain pink background with paper cutout of rectangular speech bubble

I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it.

Bill Gates, founder of Microsoft

You may not have noticed, but my blog is missing a lot of features 😆. I am well aware of these omissions. They exist because I'm building this blog progressively: I add features as I need them.

Also, it doesn't help that I start all my HTML and CSS files for this blog from an blank page (as opposed to using various often bloated web frameworks and toolkits 🤮).

I do this because I prefer to learn every bit of the web without too many abstractions; abstractions can blind you from a lot of things. (It's part of what they are created to do.)

So what is this blatantly missing feature that every blog should have? A comment section of course 😆!

I need feedback so that I can have my ideas validated and challenged. I am willing to hear what anyone interested has to say.

The plan

I planned to do it the lazy way.

Since I lacked a comment section, I set up a separate email to respond to replies, comments, criticisms etc.

Email has been supported by the web for such a long time that it was a no-brainer. Everybody has one these days, and it costs absolutely nothing. Sounds like an accessible medium to me 😉.

With this goal in mind, I had to make a couple changes to my website code.

The HTML code

The ease of the web is unfathomable sometimes. Sometimes, all it literally takes is one line:

<p class="reply-request">If you would like to reply to or comment on this blog post, feel free to email me at <a href="mailto:efe@mmhq.me?subject=Re: {{ post.title }}">efe@mmhq.me</a>.</p>

That's it! Let's break it down:

  • <p>: Represents the paragraph element in HTML and instructs the browser to create a new paragraph. The class attribute is set to reply-request so that it could be referenced in CSS. (More on that later.)
  • <a>: Represents the anchor element in HTML and instructs the browser to create a new hyperlink or link for short. The magic here is what this specific link does. The key to its functionality is the href attribute's setting starting with mailto. (More on that later.)

These two HTML elements are sufficient to add commenting the lazy way. Clicking on the link at the bottom of this page would automagically open your default email app with the subject title set to "Re: New blog feature rollout" and the email recipient set to my email, efe@mmhq.me.

How? With the magic of mailto, or more specifically, mailto:efe@mmhq.me?subject=Re: {{ post.title }}. Let's break it down:

  • mailto:: A powerful URI scheme for email addresses. This instructs the browser to open your email app when the link is clicked.
  • efe@mmhq.me: The email address to send to.
  • ?: Syntax token that denotes the beginning of a query. The text after this would be read as a series of attribute-value pairs for the mailto scheme.
  • subject=: An attribute for mailto called subject. Tells the browser to use whatever value that follows as the subject of the email.
  • Re: {{ post.title }}: The subject of the email. Re: denotes that its a reply to a post, and {{ post.title }} is the Jinja2 way of saying "Replace with my post title here". When the final HTML document is created on my server, the {{ post.title }} becomes the title of the blog post. (For example, Re: New blog feature rollout for this post you're currently reading.)

Simple right? With everything working almost perfectly1.

This is a known feature but not celebrated enough. It's not even new. This has been supported by browsers for a long time (maybe even since Web 1.0).

And this is why I love the web, I could be lazy and add this feature now until I am ready to finally upgrade to a killer comment section.

Till then, I can get back to what's important: 😴.

The CSS code

Not much was needed to style the added paragraph:

.reply-request {
    margin-block-start: var(--space-l);
    font-size: var(--step--1);
    font-style: italic;
}
  • .reply-request: References the <p> element created in HTML.
  • margin-block-start: var(--space-l): Instructs the browser to set the top margin of the paragraph to my large space setting, a variable I've defined in my root style.css file.2
  • font-size: var(--step--1): Instructs the browser to set the font size to Step -1, a variable I've set in my root style.css file. This sets the font to a size a little smaller than my base font size, Step 0.3
  • font-style: italic: Instructs the browser to render the text in italics.

That's it! No JavaScript required 👌.

Bottom line

Build progressively when you build for the web. It's a feature of the web, not a bug 🤩.

Your laziness is welcome 😄.

  1. One issue I saw with this addition is that the added paragraph goes under the footer instead of on top. This happens only with blog posts with footnotes, like this one 😆. I plan to fix it some day, with a self-built Python Markdown extension on my server. ↩

  2. I use Utopia conventions BTW. ↩

  3. Utopia conventions yet again! ↩

If you would like to reply to or comment on this blog post, feel free to email me at efe@mmhq.me.