[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"quiz-intl-relativetimeformat-relative-dates":32,"quiz-article-intl-relativetimeformat-relative-dates":48},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"kind":35,"title":36,"description":37,"config":38,"verticalId":5,"vertical":43,"course":40,"_count":44,"access":45,"attempts":47,"questionCount":39},"019fe776-c669-72d9-97e1-f3bdd80238c1","intl-relativetimeformat-relative-dates","PRACTICE_QUIZ","Intl.RelativeTimeFormat — relative timestamps without a library","Intl.RelativeTimeFormat formats a numeric duration and unit into natural-language relative time like '3 hours ago' or 'yesterday'. These questions cover how the constructor and format() method work, what numeric: 'auto' gives you, how locale support compares to shipping your own translations, what the API does not do (date arithmetic, unit picking), and when browser support landed.",{"questionCount":39,"timeLimitSec":40,"shuffleQuestions":18,"shuffleOptions":17,"negativeMarking":19,"passScorePct":41,"maxAttempts":40,"revealAnswers":42,"allowFlagging":18,"allowBacktracking":17},9,null,70,"AFTER_SUBMIT",{"slug":6,"name":7},{"questions":39},{"allowed":17,"reason":46},"FREE",[],{"id":49,"slug":34,"title":50,"subtitle":40,"excerpt":51,"coverUrl":52,"locale":13,"readingMinutes":53,"publishedAt":54,"viewCount":55,"likeCount":19,"commentCount":19,"author":56,"vertical":61,"topic":62,"tags":65,"_count":77,"playground":79,"body":81,"bodyMd":204,"seo":205,"translationGroupId":209,"thread":210,"assessments":212,"translations":215,"quiz":217},"019fe660-edbb-714e-b0e8-8488ccbb6940","You're installing date-fns for 'X hours ago'. `Intl.RelativeTimeFormat` does it natively.","Most apps display relative timestamps — '3 minutes ago', 'last week'. Developers still reach for date-fns or moment for this. The Intl.RelativeTimeFormat API handles it natively, with full locale support and zero dependencies.","\u002Fmedia\u002Fcovers\u002Fintl-relativetimeformat-relative-dates.png",4,"2026-08-07T07:22:54.352Z",18,{"id":57,"name":58,"username":59,"avatarUrl":40,"headline":60},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},"javascript","JavaScript",[66,68,71,74],{"slug":63,"name":67,"color":40},"Javascript",{"slug":69,"name":70,"color":40},"webdev","Webdev",{"slug":72,"name":73,"color":40},"frontend","Frontend",{"slug":75,"name":76,"color":40},"intl","Intl",{"assessments":78},1,{"slug":34,"title":80},"Intl.RelativeTimeFormat — interactive playground",{"blocks":82,"version":78},[83,87,91,97,100,104,107,111,114,117,120,124,127,130,133,137,140,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195],{"id":84,"html":85,"type":86},"b1","\u003Cp>When a comment timestamp reads "3 hours ago" instead of a raw ISO string, users stay oriented without thinking about it. Most teams reach for \u003Ccode>date-fns\u002FformatDistanceToNow\u003C\u002Fcode> or \u003Ccode>moment().fromNow()\u003C\u002Fcode> to get there. Both pull in a full library for something the browser can do natively — and has been able to do since 2020.\u003C\u002Fp>","paragraph",{"id":88,"html":89,"text":89,"type":90,"level":31},"b2","The API","heading",{"id":92,"code":93,"type":94,"language":95,"highlight":96},"b3","const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });\n\nrtf.format(-3, 'hour');   \u002F\u002F \"3 hours ago\"\nrtf.format(1, 'day');     \u002F\u002F \"tomorrow\"\nrtf.format(-1, 'day');    \u002F\u002F \"yesterday\"\nrtf.format(-2, 'week');   \u002F\u002F \"2 weeks ago\"\nrtf.format(3, 'month');   \u002F\u002F \"in 3 months\"","code","js",[],{"id":98,"html":99,"type":86},"b4","\u003Cp>Two arguments: a number (negative = past, positive = future) and a unit string. The constructor takes a locale identifier and an options object. That's the whole surface area.\u003C\u002Fp>",{"id":101,"html":102,"text":103,"type":90,"level":31},"b5","The \u003Ccode>numeric: 'auto'\u003C\u002Fcode> option","The numeric: 'auto' option",{"id":105,"html":106,"type":86},"b6","\u003Cp>The second constructor argument controls whether you get "1 day ago" or "yesterday". With \u003Ccode>numeric: 'always'\u003C\u002Fcode> (the default), every value is formatted as a number. With \u003Ccode>numeric: 'auto'\u003C\u002Fcode>, the formatter substitutes natural language when it's available for that locale:\u003C\u002Fp>",{"id":108,"code":109,"type":94,"language":95,"highlight":110},"b7","const always = new Intl.RelativeTimeFormat('en', { numeric: 'always' });\nconst auto   = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });\n\nalways.format(-1, 'day');  \u002F\u002F \"1 day ago\"\nauto.format(-1, 'day');    \u002F\u002F \"yesterday\"\n\nalways.format(0, 'day');   \u002F\u002F \"in 0 days\"\nauto.format(0, 'day');     \u002F\u002F \"today\"\n\nalways.format(1, 'day');   \u002F\u002F \"in 1 day\"\nauto.format(1, 'day');     \u002F\u002F \"tomorrow\"",[],{"id":112,"html":113,"type":86},"b8","\u003Cp>In most UIs, \u003Ccode>numeric: 'auto'\u003C\u002Fcode> is what you want. Saying "yesterday" is more natural than "1 day ago" and it costs nothing extra.\u003C\u002Fp>",{"id":115,"html":116,"text":116,"type":90,"level":31},"b9","Picking the right unit automatically",{"id":118,"html":119,"type":86},"b10","\u003Cp>The API doesn't pick the unit for you — you pass \u003Ccode>'hour'\u003C\u002Fcode> or \u003Ccode>'week'\u003C\u002Fcode> explicitly. That means you need a helper that looks at the elapsed duration and decides which unit to use. Ten lines:\u003C\u002Fp>",{"id":121,"code":122,"type":94,"language":95,"highlight":123},"b11","const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });\n\nconst THRESHOLDS = [\n  { unit: 'year',   ms: 365 * 24 * 60 * 60 * 1000 },\n  { unit: 'month',  ms:  30 * 24 * 60 * 60 * 1000 },\n  { unit: 'week',   ms:   7 * 24 * 60 * 60 * 1000 },\n  { unit: 'day',    ms:       24 * 60 * 60 * 1000  },\n  { unit: 'hour',   ms:            60 * 60 * 1000  },\n  { unit: 'minute', ms:                 60 * 1000  },\n  { unit: 'second', ms:                      1000  },\n];\n\nfunction timeAgo(date) {\n  const diffMs = date - Date.now();\n  for (const { unit, ms } of THRESHOLDS) {\n    if (Math.abs(diffMs) >= ms) {\n      return rtf.format(Math.round(diffMs \u002F ms), unit);\n    }\n  }\n  return rtf.format(0, 'second'); \u002F\u002F \"just now\"\n}\n\ntimeAgo(new Date(Date.now() - 2 * 60 * 60 * 1000)); \u002F\u002F \"2 hours ago\"\ntimeAgo(new Date(Date.now() + 3 * 24 * 60 * 60 * 1000)); \u002F\u002F \"in 3 days\"\ntimeAgo(new Date(Date.now() - 45 * 1000)); \u002F\u002F \"45 seconds ago\"",[],{"id":125,"html":126,"type":86},"b12","\u003Cp>You adjust the thresholds to your app's conventions — some UIs show minutes up to 90, others switch to hours at 60. The formatter handles the phrasing; the thresholds handle the unit selection.\u003C\u002Fp>",{"id":128,"html":129,"text":129,"type":90,"level":31},"b13","Locale support comes for free",{"id":131,"html":132,"type":86},"b14","\u003Cp>The formatter respects locale — the same code that prints "3 hours ago" in English prints "il y a 3 heures" in French, "vor 3 Stunden" in German, and "۳ ساعت پیش" in Persian, without any translation strings in your bundle.\u003C\u002Fp>",{"id":134,"code":135,"type":94,"language":95,"highlight":136},"b15","const locales = ['en', 'fr', 'de', 'ja', 'ar'];\nconst twoHoursAgo = -2;\n\nfor (const locale of locales) {\n  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });\n  console.log(`${locale}: ${rtf.format(twoHoursAgo, 'hour')}`);\n}\n\u002F\u002F en: 2 hours ago\n\u002F\u002F fr: il y a 2 heures\n\u002F\u002F de: vor 2 Stunden\n\u002F\u002F ja: 2 時間前\n\u002F\u002F ar: قبل ساعتين",[],{"id":138,"html":139,"type":86},"b16","\u003Cp>Most date libraries ship locale data as separate imports or packages — kilobytes of JSON per language. \u003Ccode>Intl.RelativeTimeFormat\u003C\u002Fcode> uses the locale data already in the JavaScript engine. Nothing extra to load.\u003C\u002Fp>",{"id":141,"html":142,"text":143,"type":90,"level":31},"b17","What it doesn't do","What it doesn't do",{"id":145,"html":146,"type":86},"b18","\u003Cp>\u003Ccode>Intl.RelativeTimeFormat\u003C\u002Fcode> formats a pre-computed duration. It doesn't parse date strings, calculate diffs, or understand "last Monday." If you need date arithmetic — adding months, finding the start of a week, working with time zones — you still need a library or the upcoming \u003Ccode>Temporal\u003C\u002Fcode> API. But if you already have two timestamps and just want to display the difference as human text, \u003Ccode>Intl.RelativeTimeFormat\u003C\u002Fcode> is the right tool.\u003C\u002Fp>",{"id":148,"html":149,"text":149,"type":90,"level":31},"b19","Browser support",{"id":151,"html":152,"type":86},"b20","\u003Cp>\u003Ccode>Intl.RelativeTimeFormat\u003C\u002Fcode> is \u003Cstrong>Baseline 2020\u003C\u002Fstrong>: Chrome 71 (2018), Firefox 65 (2019), Safari 14 (2020), Node.js 12. It's been in every major environment for years. No polyfill needed for any currently-supported browser.\u003C\u002Fp>",{"id":154,"html":155,"type":86},"b21","\u003C!-- playground:start -->",{"id":157,"html":158,"text":158,"type":90,"level":31},"b22","🎮 Try it yourself",{"id":160,"html":161,"type":86},"b23","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-08-07-intl-relativetimeformat-relative-dates\u002Fplayground\u002F\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":163,"html":164,"type":86},"b24","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":166,"html":167,"type":86},"b25","\u003C!-- playground:end -->",{"id":169,"html":170,"type":86},"b26","\u003C!-- quiz:start -->",{"id":172,"html":173,"text":173,"type":90,"level":31},"b27","🧠 Test yourself",{"id":175,"html":176,"type":86},"b28","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-08-07-intl-relativetimeformat-relative-dates\">Take the 9-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":178,"html":179,"type":86},"b29","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":181,"html":182,"type":86},"b30","\u003C!-- quiz:end -->",{"id":184,"html":185,"text":185,"type":90,"level":31},"b31","The takeaway",{"id":187,"html":188,"type":86},"b32","\u003Cp>Search your codebase for \u003Ccode>formatDistanceToNow\u003C\u002Fcode>, \u003Ccode>fromNow()\u003C\u002Fcode>, or any home-grown "X minutes ago" function. If the logic is "compute a diff, format it as human text," replace it with \u003Ccode>Intl.RelativeTimeFormat\u003C\u002Fcode> and a unit-picking helper. You get correct pluralization, locale-aware phrasing, and natural-language output like "yesterday" and "tomorrow" — with no added dependency and no locale bundle to manage.\u003C\u002Fp>",{"id":190,"type":191},"b33","divider",{"id":193,"html":194,"type":86},"b34","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":196,"type":197,"items":198,"ordered":18},"b35","list",[199,200,201,202,203],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>","When a comment timestamp reads \"3 hours ago\" instead of a raw ISO string, users stay oriented without thinking about it. Most teams reach for `date-fns\u002FformatDistanceToNow` or `moment().fromNow()` to get there. Both pull in a full library for something the browser can do natively — and has been able to do since 2020.\n\n## The API\n\n```js\nconst rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });\n\nrtf.format(-3, 'hour');   \u002F\u002F \"3 hours ago\"\nrtf.format(1, 'day');     \u002F\u002F \"tomorrow\"\nrtf.format(-1, 'day');    \u002F\u002F \"yesterday\"\nrtf.format(-2, 'week');   \u002F\u002F \"2 weeks ago\"\nrtf.format(3, 'month');   \u002F\u002F \"in 3 months\"\n```\n\nTwo arguments: a number (negative = past, positive = future) and a unit string. The constructor takes a locale identifier and an options object. That's the whole surface area.\n\n## The `numeric: 'auto'` option\n\nThe second constructor argument controls whether you get \"1 day ago\" or \"yesterday\". With `numeric: 'always'` (the default), every value is formatted as a number. With `numeric: 'auto'`, the formatter substitutes natural language when it's available for that locale:\n\n```js\nconst always = new Intl.RelativeTimeFormat('en', { numeric: 'always' });\nconst auto   = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });\n\nalways.format(-1, 'day');  \u002F\u002F \"1 day ago\"\nauto.format(-1, 'day');    \u002F\u002F \"yesterday\"\n\nalways.format(0, 'day');   \u002F\u002F \"in 0 days\"\nauto.format(0, 'day');     \u002F\u002F \"today\"\n\nalways.format(1, 'day');   \u002F\u002F \"in 1 day\"\nauto.format(1, 'day');     \u002F\u002F \"tomorrow\"\n```\n\nIn most UIs, `numeric: 'auto'` is what you want. Saying \"yesterday\" is more natural than \"1 day ago\" and it costs nothing extra.\n\n## Picking the right unit automatically\n\nThe API doesn't pick the unit for you — you pass `'hour'` or `'week'` explicitly. That means you need a helper that looks at the elapsed duration and decides which unit to use. Ten lines:\n\n```js\nconst rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });\n\nconst THRESHOLDS = [\n  { unit: 'year',   ms: 365 * 24 * 60 * 60 * 1000 },\n  { unit: 'month',  ms:  30 * 24 * 60 * 60 * 1000 },\n  { unit: 'week',   ms:   7 * 24 * 60 * 60 * 1000 },\n  { unit: 'day',    ms:       24 * 60 * 60 * 1000  },\n  { unit: 'hour',   ms:            60 * 60 * 1000  },\n  { unit: 'minute', ms:                 60 * 1000  },\n  { unit: 'second', ms:                      1000  },\n];\n\nfunction timeAgo(date) {\n  const diffMs = date - Date.now();\n  for (const { unit, ms } of THRESHOLDS) {\n    if (Math.abs(diffMs) >= ms) {\n      return rtf.format(Math.round(diffMs \u002F ms), unit);\n    }\n  }\n  return rtf.format(0, 'second'); \u002F\u002F \"just now\"\n}\n\ntimeAgo(new Date(Date.now() - 2 * 60 * 60 * 1000)); \u002F\u002F \"2 hours ago\"\ntimeAgo(new Date(Date.now() + 3 * 24 * 60 * 60 * 1000)); \u002F\u002F \"in 3 days\"\ntimeAgo(new Date(Date.now() - 45 * 1000)); \u002F\u002F \"45 seconds ago\"\n```\n\nYou adjust the thresholds to your app's conventions — some UIs show minutes up to 90, others switch to hours at 60. The formatter handles the phrasing; the thresholds handle the unit selection.\n\n## Locale support comes for free\n\nThe formatter respects locale — the same code that prints \"3 hours ago\" in English prints \"il y a 3 heures\" in French, \"vor 3 Stunden\" in German, and \"۳ ساعت پیش\" in Persian, without any translation strings in your bundle.\n\n```js\nconst locales = ['en', 'fr', 'de', 'ja', 'ar'];\nconst twoHoursAgo = -2;\n\nfor (const locale of locales) {\n  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });\n  console.log(`${locale}: ${rtf.format(twoHoursAgo, 'hour')}`);\n}\n\u002F\u002F en: 2 hours ago\n\u002F\u002F fr: il y a 2 heures\n\u002F\u002F de: vor 2 Stunden\n\u002F\u002F ja: 2 時間前\n\u002F\u002F ar: قبل ساعتين\n```\n\nMost date libraries ship locale data as separate imports or packages — kilobytes of JSON per language. `Intl.RelativeTimeFormat` uses the locale data already in the JavaScript engine. Nothing extra to load.\n\n## What it doesn't do\n\n`Intl.RelativeTimeFormat` formats a pre-computed duration. It doesn't parse date strings, calculate diffs, or understand \"last Monday.\" If you need date arithmetic — adding months, finding the start of a week, working with time zones — you still need a library or the upcoming `Temporal` API. But if you already have two timestamps and just want to display the difference as human text, `Intl.RelativeTimeFormat` is the right tool.\n\n## Browser support\n\n`Intl.RelativeTimeFormat` is **Baseline 2020**: Chrome 71 (2018), Firefox 65 (2019), Safari 14 (2020), Node.js 12. It's been in every major environment for years. No polyfill needed for any currently-supported browser.\n\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-08-07-intl-relativetimeformat-relative-dates\u002Fplayground\u002F)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 9-question quiz →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-08-07-intl-relativetimeformat-relative-dates)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n## The takeaway\n\nSearch your codebase for `formatDistanceToNow`, `fromNow()`, or any home-grown \"X minutes ago\" function. If the logic is \"compute a diff, format it as human text,\" replace it with `Intl.RelativeTimeFormat` and a unit-picking helper. You get correct pluralization, locale-aware phrasing, and natural-language output like \"yesterday\" and \"tomorrow\" — with no added dependency and no locale bundle to manage.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":206,"canonical":207,"description":208},"You're installing date-fns for 'X hours ago'. `Intl.RelativeTimeFormat","https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fintl-relativetimeformat-relative-dates","Most apps display relative timestamps — '3 minutes ago', 'last week'. Developers still reach for date-fns or moment for this. The Intl.RelativeTimeFormat API handles it natively, w","019fe660-edbb-714e-b0e8-886fc45deaa0",{"id":211,"locked":18},"019fe660-f4c3-720e-902c-d8822ceccdd3",[213],{"id":33,"slug":34,"title":36,"_count":214},{"questions":39},[216],{"locale":13,"slug":34},{"id":33,"slug":34,"title":36,"_count":218,"questionCount":39},{"questions":39}]