typescript 27 lines · 7 steps

Human-readable relative times with Intl

Convert a timestamp into phrases like "3 days ago" by walking through escalating time units.

Explained by highlit

Intermediate internationalization date-formatting lookup-table iteration

1const DIVISIONS: { amount: number; unit: Intl.RelativeTimeFormatUnit }[] = [
{ amount: 60, unit: "seconds" },
{ amount: 60, unit: "minutes" },
{ amount: 24, unit: "hours" },
{ amount: 7, unit: "days" },
{ amount: 4.34524, unit: "weeks" },
{ amount: 12, unit: "months" },
{ amount: Number.POSITIVE_INFINITY, unit: "years" },
9];
10 
11export function formatRelativeTime(
date: Date | number | string,
locale = "en-US",
14): string {
const formatter = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
const target = date instanceof Date ? date : new Date(date);
let duration = (target.getTime() - Date.now()) / 1000;
18 
for (const { amount, unit } of DIVISIONS) {
  if (Math.abs(duration) < amount) {
    return formatter.format(Math.round(duration), unit);
  }
  duration /= amount;
}
25 
return formatter.format(Math.round(duration), "years");
27}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1A table of unit thresholds turns repetitive time math into a single clean loop.
2Intl.RelativeTimeFormat handles localization and natural phrasing so you never hardcode strings.
3Dividing the running duration by each unit's size lets one pass scale from seconds up to years.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';