Web Components from early 2024

<relative-time> Permalink ¶

• Project Page
• Demo
• GitHub
• npm

There are many like it, but this one is mine.

There are myriad resources out there for formatting dates and times as a relative time, whether it be snippets of code, native Web Components, or otherwise. Regardless, I wanted to build one for myself, if only to learn more about the fantastic Intl.RelativeTimeFormat constructor.

This constructor allows developers to consume a JavaScript DateTime and spit back out a string formatted to represent that date and time as relative to the present. What’s more, it even has the ability to consider the locale (language) of the document it’s in, the language of the user’s browser, etc.

I combined these things to make a Web Component that can wrap around a <time> element to present certain DateTimes around my website—on my RSVPs page, for example—to give a better context around when certain things will take place (in the future) or took place (in the past). By carefully crafting the HTML, this means that the Web Component acts as a beautiful little progressive enhancement:

This post was published <relative-time><time datetime="2024-04-25T12:00:00+00:00">on 25 April 2024</time></relative-time>

Without JavaScript, the user will see this:

With JavaScript, the user will instead see this (assuming it’s presently the 2^nd of May, 2024):

There are also a number of other attributes that can be applied to the Web Component that control how often the relative time is updated, what units to format the relative time with, and a maximum unit to use (i.e. only go up to days even if the distance is time is greater than a month).

<event-countdown> Permalink ¶

• Project pPage
• Demo
• GitHub
• npm

This Web Component is very similar to the previous one, but with the explicit intention of being used for events with a specific duration. I built it specifically for CSS Naked Day this year, as I wanted a way to display a countdown until the event started as well as provide a duration for the event while it was happening.

Very much like my <relative-time> web component, its functionality hinges on one or two nested <time> elements, representing the start/end times of a given event.

<event-countdown name="My event">
    My event starts on <time start datetime="2024-04-25T12:00:00+00:00">25 April 2024</time> and ends on <time end datetime="2024-05-09T12:00:00+00:00">9 May 2024</time>.
</event-countdown>

Without JavaScript, the user will see this:

With JavaScript, the user will instead see this (assuming it’s presently the 2^nd of May, 2024):

There are a number of other attributes here as well that, like the <relative-time> web component, control its update frequency and units to be used. There is also the ability to designate the event as annual, so the countdown will roll over to next year’s DateTime when the event has passed.

<paper-stamp> Permalink ¶

• Project Page
• Demo
• GitHub
• npm

This last component I’m showcasing today probably has less use cases, but is more of a fun little idea I had for displaying an image like a paper postage stamp.

Now, this web component is probably better suited to be composed using only HTML and CSS, but it was a fun experiment nonetheless.

<paper-stamp>
    <img src="/images/rolbie-stamp.png" alt="..." width="100" height="150">
</paper-stamp>

Without JavaScript, the user will see this:

With JavaScript, the user will instead see this:

This Web Component comes with a number of attributes to control the background-color of the stamp, the padding between the image and the edge of the stamp, and the size and spacing of the perforations along the stamp’s edge.