2021-11-21

1637470800
guides
 21 Nov 2021  guides

Creating Disclaimers for Old Blog Posts with JavaScript

While going through my old blog posts, I realized that some of them are getting dated, and that I should set aside time to test and/or update their content if necessary (especially those with technical instructions and command line syntax).

I needed a way to let readers know that, unless otherwise marked as updated, there’s a small chance that instructions and guides contained in older posts may not produce intended results.

The easiest approach I could think of was to use JavaScript to calculate the effective age of a post, and display a message to readers based on how old that post is. I’ll explain how I did this for my own site, and I’m sure you’ll be able to replicate as needed.

Creating DOM Nodes

First, you’ll need to create a hidden div on your blog post’s template that will store the initial values:

<div class="d-none">
  <div id="post-date-unix">{{ page.date | date: "%s" }}</div>
  <div id="post-category">{{ page.categories }}</div>
</div>

And then another div where the message will be shown when it matches the conditions:

<p class="d-none" id="post-age-notification"></p>

There are two things to keep in mind about the above code snippets.

I’m using Bootstrap, which leverages the class name d-none for hidden items. If you’re not using a framework that offers this, you can add your own class within CSS using the following syntax:

.d-none {
  display: none;
}

Additionally, I use Jekyll to generate my website, which means I can use the Liquid variable {{ page.date | date: "%s" }} to get the date in UNIX time format.

Static site generators such as Jekyll, Hugo, Eleventy, etc. offer this variable at build time. If you’re not using such a generator, then you can manually convert your post date to UNIX time with various tools such as Epoch Converter.

Lastly, I also use {{ page.date | date: "%s" }} to populate the list of categories that Jekyll generates for the blog post. I only need these types of disclaimers for posts in the Guides category — where there are command and code snippets that may become deprecated over time.

Calculating Dates

I’ll declare a variable that references the target node that will contain the HTML message to be displayed:

// <p class="d-none" id="post-age-notification"></p>

let postNotification = document.getElementById('post-age-notification');

Next, I’ll take the value of the UNIX timestamp that Jekyll generated for the blog post and store that in another variable:

// <div id="post-date-unix">987654321098</div>

let postDate = Number(document.getElementById('post-date-unix').innerHTML);

Specifically in my case, I’ll also need to get the category that Jekyll generated, and store that value in a variable as well:

// <div id="post-category">guides</div>

let postCategory = document.getElementById('post-category').innerHTML.toLowerCase();

The string method toLowerCase() is used to guarantee sanitization of a string that will be used conditionally, which is in itself a JavaScript best-practice.

Next up is the important bit, which is simply calculating the current UNIX timestamp (i.e. the time when the page was loaded), and then subtracting from that value the post’s timestamp (i.e when it was published).

The difference represents the effective age of the post (in seconds), and is stored it its own variable:

let postAge = Math.floor(new Date().getTime()/1000.0) - postDate;

Since the post age is in seconds, further dividing this number by the number of seconds in one month will result in the age of the post in months:

let postAgeMonths = Math.floor(postAge / 2629746);

Of course, you can use years in a decimal form, or whatever value you prefer. We can now conditionally show a message to the reader based on the age of the blog post that has been calculated:

if (postCategory.includes('guides') && postAgeMonths > 6) {
  postNotification.classList.remove('d-none');
  postNotification.innerHTML = `This post is around ${postAgeMonths} months old. If any of the information seems outdated or is inaccurate, please <a href="mailto:[email protected]" target="_blank" rel="noopener">drop me an email</a> and I'll be happy to update it.`;

In my case again, I’m also adding the Guides category as a condition. Once the if statement is true, the d-none hidden class will be removed from the target node, thereby making the div element visible, and the text within that element will be updated with whatever message is specified, using the postAgeMonths variable to display the age of the post.

If the conditions for the if statement are falsy, then then nothing will happen (i.e. the target node will remain hidden due to it’s CSS class).

The final JavaScript code should look like this:

// Assign the target node containing the HTML message to a variable
let postNotification = document.getElementById('post-age-notification');

// Read the contents of the 'div' containing the post's UNIX timestamp
let postDate = Number(document.getElementById('post-date-unix').innerHTML);

// Read the contents of the 'div' containing the post's category
let postCategory = document.getElementById('post-category').innerHTML.toLowerCase();

// Get the current age of the post by subtracting the post's timestamp from the current UNIX timestamp when the page is loaded, i.e. right now
let postAge = Math.floor(new Date().getTime()/1000.0) - postDate;

// Calculate the age in months by dividing the post's age by the number of seconds in a month, and rounding it down to an integer
let postAgeMonths = Math.floor(postAge / 2629746);

// If the post age (in months) is greater than 6 (months), then remove the hidden CSS class from the target node, and insert the HTML message
if (postCategory.includes('guides') && postAgeMonths > 6) {
  postNotification.classList.remove('d-none');
  postNotification.innerHTML = `This post is around ${postAgeMonths} months old. If any of the information seems outdated or is inaccurate, please <a href="mailto:[email protected]" target="_blank" rel="noopener">drop me an email</a> and I'll be happy to update it.`;

That file can ideally be saved somewhere with a .js extension and then referenced at the bottom of each blog post (to ensure the variables point to DOM elements that have already been rendered) in the usual manner:

<script type="text/javascript" src="https://example.com/blog/age.js"></script>

In Jekyll, the HTML elements and the script tag is placed within the _layout template used for blog posts. Other static site generators use Partials, and most JavaScript frameworks use either Components or Component Layouts more often than not to achieve this. Your mileage may vary.

Thanks for reading, and I hope you can tweak this technique to give readers an acknowledgement that content within a blog post or page might be outdated given the passage of time.

Webmentions & Comments

Copyright © Paramdeo Singh. Made with ☕️ in Guyana. All Rights Reserved.

Last Site Build on Tue, 30 Nov 2021 19:17:38 -0500

1MB Club Badge

Paramdeo Singh Guyana

Riding the wave of consciousness in this treacherous mortal sea.

Technology Design Strategy Literature Personal Blogs