This is Temporal Experiment Number One

It’s been a week since OERxDomains21 and it’s about time to put to paper some thoughts about the work on the conference guide. The team at Reclaim Hosting reached out to me with a desire to build a site that would fit the analog television theme supported by the artwork of Bryan Mathers.

The site would allow attendees of the online conference to browse a listing of channels and the scheduled broadcast offerings over the two days of the conference. There were three channels – OER1, OER2, and Domains21 – and through out the day a live streamed presentation would be “on” each channel. To be built were listings pages as well as a custom player so attendees could watch the show attached to an embedded Youtube live chat or Discord text channel.

For this post I’m covering the listings pages built using data from an API endpoint built by Tom Woodward. We quickly settled on a design that evoked the 80s TV Guide pages which were very economical in their presentation of information. With dozens of channels and hundreds of shows to visualize per day, a minimal design worked best.

Besides the title and speaker names, each presentation at the conference had many of the usual pieces of information you might expect for an academic submission: abstract, references, keywords, and more. By choosing to give attendees just the briefest details this allowed for a design through which attendees could quickly navigate and keep track of the proceedings.

Clicking on a presentation would reveal a pop-up with the full listing as well as a link to watch.

Probably the keenest part of the page was how imported data was automatically sorted by time of the presentation, and more importantly automatically displayed times using the local time zone of the browser of the page. You can change your computer’s clock and refresh a listings page to see this in action. Here’s a portion of the listings from day one and the adjusted the clocks of New York, Vancouver, Sydney, and London.

All presentations were scheduled based on the conference host’s timezone in London, AKA British Summer Time (BST). But to do the work of managing time, the Luxon JS time library was used. Here’s a bit of how it works.

Using the BST date and time from each presentation, the values are passed to Luxon’s DateTime object.

DateTime.fromFormat(
  '04/22/2021 10:00 am Europe/London',
  'D t z'
)

This creates a Coordinated Universal Time (UTC) value set in the DateTime object that can be manipulated using a number of different Luxon methods. For example to sort all times, each time is converted to milliseconds and sorted.

//the value for 'time' is a DateTime object
// converts .toMillis() with the method
arr.sort((a, b) => (a.time.toMillis() > b.time.toMillis() ? 1 : -1));

And then there are a number of methods to display time in various formats, which all automatically adjust to the browser’s timezone.

//the value for 'time' is a DateTime object
// toLocaleString() accepts an object with values you can choose for your time format.

//returns a string like '11:00 AM EDT' as seen at the top of each listings page
page.time.toLocaleString({
    hour: 'numeric',
    minute: '2-digit',
    timeZoneName: 'short',
  })

// returns a string like '11:00 AM' as seen for each listing time block
block.time.toLocaleString({
        hour: 'numeric',
        minute: '2-digit',
      })

//returns a string like 'Apr 21, 11:00 AM' as seen for each presentation's pop-up description
popup.time.toLocaleString({
        month: 'short',
        day: 'numeric',
        hour: 'numeric',
        minute: '2-digit',
      })

Ultimately, one of the most rewarding parts of the project was to see at the end of the conference attendee comments from around the world and the appreciation for something as simple as time presented from their perspective.