Writing dates for an 11ty blog post

Eleventy's date system is a little tricky. Dates in the browser are tricky. Dates outside the browser are tricky. It's enough to make a grown man cry. If you're like me, you can read through the 11ty content date docs and still be none the wiser.

Writing the date correctly

I hardly wanted to write the date by hand, but because of the difference between UTC time and my own time zone, when I'd write a simple value such as 2023-09-09 I was getting output that just didn't quite match the actual time the article was written. The various 11ty programatic values (Last modified | Created | git Created) were also yielding inaccurate times or they were getting updated whenever I'd do something like a git rebase.

After a bit of hand-waving, I figured it would be easiest to just write out the full date in the yaml front matter.

I had to revisit the MDN Date documentation. This linked off to the datetime string format from the Ecma Standard, which is also referenced in the yaml date spec.

The format we're looking for is YYYY-MM-DDTHH:mm:ss.sssZ. Let's break it down into constituent parts:

YYYY -> Year
MM -> Month
DD -> Day
T -> A semantic character, indicates the end of date and the start of time of day.
HH -> Hour
: -> You've seen a digitial time before ...
mm -> Minute
ss -> Second
. -> It's a dot. Yep. Just a dot. Write a dot here. Don't overthink it.
sss -> Milliseconds, if you really care. Just write 000 if you do not.
Z -> Z means UTC time. Or a positive or negative integer. See how to find your time zone offset below.

Thus, in order to set this article's date to the real time it was authored, I have added a datetime string to its YAML front matter. I am currently in Pacific daylight savings time, approximately 2:30 on this lovely Saturday afternoon. Wifey and baby are napping and I am sneaking a little coding time, not that you care or need to know that.

I end up with this:

date: 2023-09-09T14:30:00.000-7

How to find your time zone offset.

The easiest way to do this is to Google "my time zone". Google will kindly present you with the following information. You need only to look for (GMT±NUMBER).

Pacific Daylight Time
Time zone in Redacted, Seattle, WA (GMT-7)
Saturday, September 9, 2023, 2:30 PM

The fun and independent way to do this is to open up the DevTools browser console and write the following.

new Date().getTimezoneOffset() / 60;

The getTimezoneOffset method on the Date prototype returns the number of minutes that represent the difference between your time and UTC time. Divide by 60 to get the number of hours.

Using Github's relative-time element

Github has a truly rad collection of web components. One of them is the <relative-time> web component. The documentation for <relative-time> is very clear, so I will not attempt to duplicate it. In lieu of a full explanation, I'll leave you with a small snippet to place it into a Nunjucks for loop.

{% for post in collections.posts %}
<relative-time
  format="relative"
  datetime="{{post.date}}" {# this is all you need! #}
></relative-time>
{% endfor %}

The web component has various formats; I've selected relative, so it will show a string like "", where the date rendered into the datetime property is Sat Sep 09 2023 21:30:00 GMT+0000 (Coordinated Universal Time). I've included the element directly in the previous sentence. Inspect it!

Where can I see what it looks like?

Inspect the paragraph above, or check out the cards on home page or posts page.