DEV Community: Ade Adeola

Formatting Strings in JavaScript: Sorting, Plurals & Lists

Ade Adeola — Sat, 08 Feb 2025 20:04:20 +0000

Ever struggled with sorting words in different languages, handling tricky pluralization rules, or formatting lists in a way that sounds natural? The final parts of the Intl API has some hidden gems that focuses on handling strings and lists.

TLDR

We will be focusing on three powerful but often overlooked features:

Intl.Collator for sorting and comparing strings correctly.
Intl.PluralRules for handling pluralization dynamically.
Intl.ListFormat to format lists naturally and conjugation.

Intl.Collator

Sorting strings isn’t as straightforward as it seems. Different languages have different rules for alphabetical order, case sensitivity, and accents. That’s where Intl.Collator comes in!

Basic Sorting

const collator = new Intl.Collator("en", { sensitivity: "base" });

console.log(collator.compare("apple", "Banana")); // -1 (apple comes before Banana)
console.log(collator.compare("banana", "apple")); // 1 (banana comes after apple)
console.log(collator.compare("apple", "apple")); // 0 (they are equal)

Here, { sensitivity: 'base' } makes the comparison case-insensitive, so "apple" and "Apple" are treated the same.

Sorting an Array with `Intl.Collator`

const fruits = ["grape", "Banana", "apple", "Mango"];
fruits.sort(new Intl.Collator("en").compare);
console.log(fruits); // ['apple', 'Banana', 'grape', 'Mango']

Passing collator.compare to .sort() ensures correct ordering based on the locale.

`String.localeCompare` vs `Intl.Collator`

Both of them can be used to sort but there are some important difference

Intl by default supports localisation while localeCompare uses system or default locale has has limited customisation
localeCompare is easier or more straightforward to use 'apple'.localeCompare('banana')
Intl.Collator is faster
Intl.Collator supports multi-language sorting

Options

localeMatcher: algorithm to use when comparing strings, 'best fit' (default) or 'lookup', controls how locale is determined
usage: how the strings are compared, 'sort' (default) for sorting, 'search' for matching text
sensitivity: things to consider when comparing, 'base', 'accent', 'case', 'variant' (most strict)
ignorePunctuation: true ignores punctuation when comparing

`Intl.PluralRules`: Smart Pluralization

Handling plurals correctly is trickier than just adding an "s." Different languages have complex rules for singular, dual, paucal, and plural forms. Intl.PluralRules helps us determine the right plural form dynamically.

Basic Usage

const pluralRules = new Intl.PluralRules("en");

console.log(pluralRules.select(1)); // "one"
console.log(pluralRules.select(2)); // "other"
console.log(pluralRules.select(0)); // "other"

For English, "one" is used for 1, and "other" is used for everything else.

Different Languages, Different Rules

For example, French considers 0 singular, while English treats it as plural.

const pluralRulesFr = new Intl.PluralRules("fr");

console.log(pluralRulesFr.select(1)); // "one"
console.log(pluralRulesFr.select(0)); // "one" (French treats 0 as singular!)
console.log(pluralRulesFr.select(2)); // "other"

Making Plural Messages Dynamic

function getItemMessage(count) {
  const pluralRule = new Intl.PluralRules("en").select(count);
  const messages = {
    one: `You have ${count} message.`,
    other: `You have ${count} messages.`,
  };
  return messages[pluralRule];
}

console.log(getItemMessage(1)); // "You have 1 message."
console.log(getItemMessage(3)); // "You have 3 messages."

This technique allows your app to automatically use the correct plural form.

Options

localeMatcher
type: 'cardinal' (default) for counting objects, 'ordinal' for rankings (1st, 2nd, etc.)

Option	Description
`type`	`'cardinal'` (default) for counting objects, `'ordinal'` for rankings (`1st`, `2nd`, etc.)
`localeMatcher`	`'best fit'` or `'lookup'`, controls locale selection

Let’s see some examples with ordinal numbers:

const ordinalRules = new Intl.PluralRules("en", { type: "ordinal" });

console.log(ordinalRules.select(1)); // "one" (1st)
console.log(ordinalRules.select(2)); // "two" (2nd)
console.log(ordinalRules.select(3)); // "few" (3rd)
console.log(ordinalRules.select(4)); // "other" (4th, 5th, etc.)

`Intl.ListFormat`: Formatting Lists Naturally

Writing a list of items (e.g., "apples, bananas, and oranges") is different across languages. Some use commas, others use "and" or "et," and some don't use conjunctions at all. Intl.ListFormat makes it easy to format lists properly!

Basic Usage

const listFormatter = new Intl.ListFormat("en", {
  style: "long",
  type: "conjunction",
});

console.log(listFormatter.format(["apple", "banana", "cherry"]));
// "apple, banana, and cherry"

It automatically adds "and" in the right place!

Different Locales and Styles

const listFormatterFr = new Intl.ListFormat("fr", {
  style: "long",
  type: "conjunction",
});

console.log(listFormatterFr.format(["pomme", "banane", "cerise"]));
// "pomme, banane et cerise" (French uses "et" instead of "and")

const shortFormatter = new Intl.ListFormat("en", {
  style: "short",
  type: "disjunction",
});

console.log(shortFormatter.format(["tea", "coffee", "milk"]));
// "tea, coffee, or milk" (disjunction uses "or" instead of "and")

Options

type: 'conjunction' ("and"), 'disjunction' ("or"), or 'unit' (e.g., "5 hours, 30 minutes")
style: 'long' (default, full words), 'short' (abbreviated), 'narrow' (minimal formatting)

Conclusion

That's how Intl.Collator, Intl.PluralRules, and Intl.ListFormat can help make your JavaScript applications more international-friendly and user-friendly!

These APIs can save you a ton of work and help your app support multiple languages effortlessly.

Have you tried these Intl features before?

Choosing Between On-Page Expansion, Modals, and New Screens in Mobile App Design

Ade Adeola — Sat, 08 Feb 2025 00:40:59 +0000

One of the key decisions in app design and development is how to present additional information or actions. There are three ways to do this.

Content expansion
Modal window
A new screen

TLDR

Each methods has its advantages and drawbacks, and the best choice depends on the complexity of the task, user expectations, and usability principles.

Introduction

Let’s break down these approaches, their ideal use cases, and examples from real-world apps.

1. On-Page Content Expansion (Collapsible/Accordion)

On-page content expansion involves revealing additional information within the current screen, without navigating away. This method helps maintain context while reducing clutter. It usually blends well with the content of the screen.

Best Use Cases:

• FAQs or expandable help sections – Users can tap to reveal answers without leaving the main page.
• Product descriptions in e-commerce – Brief information is shown initially, with a “Read More” option to expand.
• Form sections with optional fields – Collapsible can be used to hide advanced settings until needed.

Real-World Examples:

• Amazon: On the sidebar, you can expand to reveal the contents of different categories like Brands, Price range, Condition etc.
• Google Search: When searching for a term, users see expandable “People Also Ask” sections that reveal more information dynamically.

Pros & Cons:

✅ Maintains user context without disrupting the flow.
✅ Reduces navigation friction for quick interactions.
❌ Can become overwhelming if too many sections are collapsible.
❌ May not be suitable for very detailed content.

2. Modal Windows (Pop-ups and Overlays)

A modal window is a temporary overlay that appears on top of the main screen, requiring user interaction before continuing. Modals are best for quick actions and confirmations.

Best Use Cases:

• Confirmation dialogs – Asking users to confirm before deleting an item.
• Login prompts – Displaying a login/signup modal without redirecting the user.
• Short forms or input fields – Entering a rating, adding a comment, or selecting filters in a search.

Real-World Examples:

• Instagram: When a user wants to share a post, a modal pops up with sharing options.
• Google Drive: When deleting a file, a modal asks for confirmation before proceeding.
• iOS Action Sheets: Instead of traditional modals, iOS often uses action sheets to let users choose an option without taking over the full screen.

Pros & Cons:

✅ Keeps users on the same screen, reducing unnecessary navigation.
✅ Works well for quick actions.
❌ Overuse can frustrate users (e.g., too many pop-ups).
❌ Limited space on mobile screens can make modals feel cramped.

3. Navigating to a New Screen

Navigating to a new screen means taking the user to a separate page to display more detailed information or complete a task.

Best Use Cases:

• Multi-step processes – Checkout flows, onboarding tutorials, or filling out forms.
• Content that requires full attention – Reading an article, watching a video, or filling out an extensive form.
• Complex settings or preferences – Users adjusting profile settings or account details.

Pros & Cons:

✅ Provides ample space for detailed content and user interactions.
✅ Reduces cognitive load by keeping each screen focused on one task.
❌ Requires users to navigate back if they want to return.
❌ Too many screens can make an app feel overly complex.

Mobile vs Web

It's more likely to use navigation on mobile devices over web pages for few reasons

Screen sizes, the limited size of mobile devices means there are less things you can cram in there
Navigation in mobile devices is more seamless, because it does not usually require loading a web page
It is easier to pass states and data across multiple screens over web pages

How to Choose the Right Approach?

Consider Task Complexity:
• Simple interactions? → Use an on-page expansion or modal.
• Detailed content or multi-step tasks? → Navigate to a new screen.
Think About User Flow:
• Does the user need to reference the main screen? → Keep it on-page or use a modal.
• Does the user need a distraction-free experience? → Navigate to a new screen.

Prioritize Usability and Accessibility:

• Ensure modals are easy to dismiss (swipe down, tap outside).
• Keep modal content short—don’t overload users with too much information.
• Avoid unnecessary navigation if the user can accomplish a task within the same screen.

Final Thoughts

There’s no one-size-fits-all approach in UI/UX design. The best choice depends on user needs, app functionality, and screen space.
• Use on-page expansions for quick reveals that don’t disrupt user flow.
• Use modals for confirmations, small inputs, or temporary/secondary interactions.
• Use new screens for deep engagement, multi-step processes, or when more space is needed.

By carefully selecting the right method, designers can create a more intuitive and seamless user experience, improving engagement and usability in mobile apps.

Making Numbers Speak Your Language in JavaScript

Ade Adeola — Sun, 24 Sep 2023 19:20:27 +0000

Numbers are a universal language, but how they are formatted and presented can greatly impact user experience, especially in a global context. In web development, Intl.NumberFormat is the tool that allows you to format numbers in a way that's not only easy to read but also culturally sensitive. In this blog post, we'll dive into the world of Intl.NumberFormat and explore how it can help you speak your users' language when it comes to numbers.

Introduction to `Intl.NumberFormat`

To get started with Intl.NumberFormat, you need to create an instance of it, specifying the user's locale. Here's a basic example:

const formatter = new Intl.NumberFormat('en-US');

In this example, we create a formatter that formats numbers according to the English (United States) locale.

To format a number, simply call the format method of the formatter instance:

const formattedNumber = formatter.format(1234567.89);
console.log(formattedNumber); // "1,234,567.89"

The formattedNumber now contains a string representing the number 1234567.89 in the 'en-US' locale.

Customizing Number Formatting

One of the key features of Intl.NumberFormat is the ability to customize how numbers are formatted. You can achieve this by passing an options object when creating the formatter. Here are some common options you can use:

style: You can choose between decimal (default), currency, percent or unit.
notation: it determines how the number will be displayed. Possible values includes
- standard: the default number format, and the only type that can be used with currencies
- scientific: returns the order of magnitude of the number
- engineering: returns the exponent of 10 if the number is greater than 999
- compact: an abbreviated version e.g 1K instead of 1,000

new Intl.NumberFormat("en-GB", {
  notation: "standard",
}).format(1001246) // 1,001,246

new Intl.NumberFormat("en-GB", {
  notation: "scientific",
}).format(1001246) // 1.001E6

new Intl.NumberFormat("en-GB", {
  notation: "scientific",
}).format(100) // 1E2

new Intl.NumberFormat("en-GB", {
  notation: "engineering",
}).format(1001246) // 1.001E6

new Intl.NumberFormat("en-GB", {
  notation: "engineering",
}).format(100) // 100E0


new Intl.NumberFormat("en-GB", {
  notation: "compact",
}).format(1001246) // 1M

Intl.NumberFormat allows you to format numbers in four different ways namely

Decimals e.g. 3.14
Currency e.g. $340
Percent e.g. 3.14%
Unit e.g. 3.14 kg

Currency

Of course, the first thing you want to do is to set the style to currency, and now determine the currency type.

The following options applies to currency

currency: specifies the type of currency that you want to use e.g. USD for U Dollars. The full list of the codes can be found here. This is required if the style is currency.
currencyDisplay: Determines how the currency is represented, that is, as symbol (default to the locale e.g. $ or US$), narrowSymbol ($), code (USD) or name (US Dollars)
currencySign: (standard or accounting) in most locale, negative numbers are preceded with - symbol. You can change it to accounting where negative numbers are surrounded by parentheses instead, following accounting standards

new Intl.NumberFormat("fr-FR", {
  style: "currency",
  currency: "EUR",
}).format(1837747) // 1 837 747,00 €


new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "EUR",
}).format(203325) // €203,325.00


new Intl.NumberFormat("en-GB", {
  style: "currency",
  currency: "GBP",
}).format(1001246) // £1,001,246.00

`currencyDisplay`

The locale will usually affect the way the currency are written, this can be override with currencyDisplay
It determines how the currency would be represented or written. It accept the following values

symbol: the default value, uses the local symbol
narrowSymbol: makes uses of symbol without any extra letters e.g. $ instead of $US
name: uses the local name of the currency like dollars or pounds
code: uses the ISO currency code

new Intl.NumberFormat("fr-FR", {
    style: "currency",
    currency: "USD",
}).format(1837747) // 1 837 747,00 $US

new Intl.NumberFormat("fr-FR", {
  style: "currency",
  currency: "USD",
  currencyDisplay: "narrowSymbol",
}).format(1837747) // 1 837 747,00 $


new Intl.NumberFormat("fr-FR", {
  style: "currency",
  currency: "USD",
  currencyDisplay: "name",
}).format(1837747) // 1 837 747,00 dollars des États-Unis


new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  currencyDisplay: "name",
}).format(1837747) // 1,837,747.00 US dollars


new Intl.NumberFormat("fr-FR", {
  style: "currency",
  currency: "USD",
  currencyDisplay: "code",
}).format(1837747) // 1 837 747,00 USD

`currencySign`

This determines how negative numbers are represented.

standard: the default way of representing negative numbers, that is, -200
accounting: this uses accounting/finance standards where negative numbers are represented with parenthesis, that is, (200)

If you want your currency to stick with accounting standards where negative numbers are represented with parenthesis, set currencySign to accounting

new Intl.NumberFormat("en-GB", {
  style: "currency",
  currency: "GBP",
}).format(-1001246) // -£1,001,246.00

new Intl.NumberFormat("en-GB", {
  style: "currency",
  currency: "GBP",
  currencySign: "accounting",
}).format(-1001246) // (£1,001,246.00)

Unit

This allows the formatting of unit measurements. This accepts the following options

unit: It is required if the style is unit, and it refers to units like gram or liter. Full list of the available units can be found here
unitDisplay: Determine how the units would be written, the default value is short


new Intl.NumberFormat("en-GB", {
  style: "unit",
  unit: "kilometer",
}).format(1001246) //1,001,246 km


new Intl.NumberFormat("en-GB", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short",
}).format(1001246) // 1,001,246 km


new Intl.NumberFormat("en-GB", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long",
}).format(1001246) // 1,001,246 kilometres


new Intl.NumberFormat("en-GB", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow",
}).format(1001246) // 1,001,246km

Percent

It will return percentage (%) based on the provided value. It basically multiplies the value provided by 100 and returns it as a percent, so 1 will be 100%.

new Intl.NumberFormat("en-GB", {
  style: "percent",
}).format(1) // 100%


new Intl.NumberFormat("en-GB", {
  style: "percent",
}).format(0.35) // 35%


new Intl.NumberFormat("en-GB", {
  style: "percent",
}).format(35) // 3,500%

Browser Support

Intl.NumberFormat is well-supported in modern web browsers, including Chrome, Firefox, Safari, and Edge. However, if you need to support older browsers, consider using a polyfill like intl-numberformat to ensure consistent behavior.

Conclusion

Intl.NumberFormat is an invaluable tool for formatting numbers in web applications. It allows you to present numeric data in a way that is not only culturally sensitive but also customizable to meet your application's specific needs. By mastering Intl.NumberFormat, you can provide a more user-friendly and globally accessible experience, making your web application more inclusive and appealing to users from around the world.

Simplifying Relative Time Representations in JavaScript

Ade Adeola — Sun, 03 Sep 2023 18:13:21 +0000

Dealing with time in web applications often involves displaying relative time representations, such as "2 hours ago" or "in 3 days." JavaScript provides a powerful tool to make this task easier and more language-aware through the Intl.RelativeTimeFormat object. In this blog post, we'll explore the world of Intl.RelativeTimeFormat and how it simplifies working with relative time.

Introduction to `Intl.RelativeTimeFormat`

The Intl.RelativeTimeFormat object is part of the Internationalization API, just like Intl.DateTimeFormat. It's designed to format time intervals in a human-readable way by taking into account the user's preferred language and region.

With Intl.RelativeTimeFormat, you can:

Format time intervals as relative times (e.g., "in 5 minutes" or "2 weeks ago").
Display time intervals in a way that respects grammatical rules of different languages.
Customize the formatting to suit your application's needs.

Basic Usage

Let's begin with a basic example. To create a new instance of Intl.RelativeTimeFormat, you'll pass two arguments: the user's locale and an options object. The options object allows you to customize how the relative time is displayed.

const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
console.log(rtf.format(-2, 'day')); // "2 days ago"
console.log(rtf.format(3, 'hour')); // "in 3 hours"

In this example, we create an rtf object that formats relative time in English ('en') with 'auto' numeric style, which means it will automatically choose between 'numeric' and 'long' formats based on the value.

To format a relative time, you can use the format method of the rtf object, passing in the numeric value and the unit:

Localization and Internationalization

Much like Intl.DateTimeFormat, Intl.RelativeTimeFormat is excellent for handling internationalization. By specifying different locales, you can easily display relative times in various languages and formats.

const rtfSpanish = new Intl.RelativeTimeFormat('es', { numeric: 'auto' });

console.log(rtfSpanish.format(-2, 'day')); // "hace 2 días"
console.log(rtfSpanish.format(3, 'hour')); // "en 3 horas"

This code creates an rtfSpanish object for the Spanish ('es') locale, allowing you to display relative times in Spanish.

Below is another example using Standard Chinese

// Chinese relative time format
const chineseFormat = new Intl.RelativeTimeFormat("zh", { numeric: "auto" });
console.log(chineseFormat.format(-2, "day")); // "前天"
console.log(chineseFormat.format(3, "hour")); // "3小时后"

Intl.RelativeTimeFormat takes care of converting numeric values and units into a meaningful and localized relative time string.

Customizing Relative Time Formatting

Customization is where Intl.RelativeTimeFormat truly shines. You can control how relative time is displayed by tweaking the options object when creating an instance. Some commonly used options include:

numeric: This option can be set to always or auto. 'always' will always use numeric representations (e.g., "5 days"), while 'auto' will choose between numeric and long forms based on the value (e.g., "in 2 weeks" or "yesterday").

const autoNumeric = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
console.log(autoNumeric.format(-1, "day")); // yesterday
console.log(autoNumeric.format(1, "month")); // next month

const alwaysNumeric = new Intl.RelativeTimeFormat("en", { numeric: "always" });
console.log(alwaysNumeric.format(-1, "day")); // 1 day ago
console.log(alwaysNumeric.format(1, "month")); // in 1 month

style: You can set this to 'long', 'short', or 'narrow' to control the style of units. For example, 'long' might display "3 days ago," while 'short' displays "3d ago."

Here's an example of customizing the formatting:

const customRTF = new Intl.RelativeTimeFormat("en", {
  style: "short",
});

console.log(customRTF.format(3, "hour")); // "in 3 hr."

// long
console.log(customRTF.format(3, "hour")); // "in 3 hours"
// narrow
console.log(customRTF.format(3, "hour")); // "in 3h"

Browser Support

Intl.RelativeTimeFormat is supported in most modern web browsers, including Chrome, Firefox, Safari, and Edge.

Conclusion

Intl.RelativeTimeFormat is a powerful tool for simplifying the display of relative time intervals in web applications. It brings internationalization and localization to your relative time representations, making your application more user-friendly and culturally sensitive. By mastering this API, you can provide a more seamless experience for users around the world, enhancing the usability and accessibility of your web applications.

A Guide to Date and Time Formatting in JavaScript

Ade Adeola — Tue, 22 Aug 2023 21:54:13 +0000

Handling date and time in web applications is a common task, whether you're building a simple event scheduler or a full-fledged calendar app. JavaScript provides a powerful tool for dealing with date and time formatting through the Intl.DateTimeFormat object. In this blog post, we'll dive into the world of Intl.DateTimeFormat and explore how it can make your date and time handling more efficient and user-friendly.

Introduction to Intl.DateTimeFormat

The Intl.DateTimeFormat object is part of the Internationalization API, which was introduced in ECMAScript 2015 (ES6) to enable developers to perform various language-sensitive operations, including formatting dates and times according to different locales.

Using Intl.DateTimeFormat, you can:

Format dates and times according to user preferences or specific locales.
Display dates and times in a human-readable format.
Customize the formatting of date and time components.

Basic Usage

Let's start with the basics of using Intl.DateTimeFormat. To create a new instance of this object, you simply pass one or more locale strings as arguments. The locale string defines the language and region to use for formatting. For example:

const dateFormatter = new Intl.DateTimeFormat('en-GB');

In this example, we create a dateFormatter that formats dates and times according to the English (United Kingdom) locale.

To format a date, you call the format method of the dateFormatter and pass a Date object as an argument:

const now = new Date();
const formattedDate = dateFormatter.format(now);
// United Kingdom
console.log(formattedDate); // 22/08/2023

The formattedDate variable now contains a human-readable string representing the current date and time in the 'en-US' locale.

Now, let's compare it to English (United States) locale

// United States
console.log(new Intl.DateTimeFormat('en-US').format(now)); // 8/22/2023

As seen above, United States uses MM/DD/YYYY while United Kingdom uses DD/MM/YYYY and Intl.DateTimeFormat reflected these differences.

You can also do this with other languages

// Arabic
console.log(new Intl.DateTimeFormat('ar').format(now)); // ٢٢/٨/٢٠٢٣

Now, you can customise the dates further

Customizing Date and Time Formatting

One of the most powerful features of Intl.DateTimeFormat is the ability to customize how dates and times are formatted. You can do this by providing an options object as the second argument when creating an instance of Intl.DateTimeFormat.

new Intl.DateTimeFormat(locale, options)

`locale`

This is the first argument, and these are the various locale that are supported, examples could be found here

const spanishDateFormatter = new Intl.DateTimeFormat('es-ES', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});
const now = new Date();
const formattedDate = spanishDateFormatter.format(now);
console.log(formattedDate); // martes, 22 de agosto de 2023

`options`

These are some of the notable options

weekday: How the days of the week will be written. Possible values are long (Wednesday), short (Wed) or narrow (W)
timeZone: Determines the current timezone to use to display the time e.g. America/Los_Angeles. Full list can be found on IANA time zone database
calendar: this is the type of calendar that will be used to render the date. Examples includes gregory, chinese, indian, islamic etc. You can find the full list MDN.
hour12: determine whether to use 12 hour time (2 pm) or 24-hour time (14:00). Default is false
year: How the year are displayed. This includes numeric (2022) or 2-digit (22)
month: How the month will be displayed. This includes numeric (8), 2-digit (08), long (August), short (Aug)and narrow (A)
day: Define how the day is displayed, with options for numeric and 2-digit.
hour: Customize the hour display, with options like 'numeric' and 2-digit'.
minute and second: Similarly, you can control the display of minutes and seconds.

There are about 18 options, you can find the full list on MDN.

const customDateFormatter = new Intl.DateTimeFormat("en-US", {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
});
const now = new Date();
const formattedDate = customDateFormatter.format(now);
console.log(formattedDate); // Tuesday, August 22, 2023

Setting time zones

const nyDateFormatter = new Intl.DateTimeFormat("en-US", {
  timeZoneName: "short",
  timeZone: "America/Los_Angeles",
});
const formattedNYDate = nyDateFormatter.format(new Date());
console.log(formattedNYDate); // 8/22/2023, PDT

Instead of providing individual options, you can collapse it into dateStyle and timeStyle. The possible values are full, long, medium and short

const formatter = new Intl.DateTimeFormat("en-GB", {
  dateStyle: "full",
  timeStyle: "full",
});
const now = new Date();
const formattedDate = formatter.format(now);
console.log(formattedDate); 
// Tuesday, 22 August 2023 at 22:30:29 British Summer Time


// long
// 22 August 2023 at 22:32:11 BST

// medium
// 22 Aug 2023, 22:32:58

// short
// 22/08/2023, 22:33

Browser Support

Intl.DateTimeFormat is widely supported in modern web browsers, including Chrome, Firefox, Safari, and Edge. However, if you need to support older browsers, you may want to consider using a polyfill like formatJS to ensure consistent behaviour.

Conclusion

Intl.DateTimeFormat is a powerful tool for formatting dates and times in JavaScript applications. It allows you to create user-friendly and localized date displays while customizing the format to meet your specific needs. Whether you're building a simple date picker or a complex scheduling application, mastering Intl.DateTimeFormat will help you provide a better user experience and make your code more maintainable.

Thanks for reading, and if you have any suggestions or feedback, feel free to share them in the comments below!

How to create a carousel in React

Ade Adeola — Wed, 01 Mar 2023 13:20:15 +0000

Introduction

Carousels are a popular way to showcase multiple pieces of content in a limited amount of space. A carousel allows you to rotate through different items, such as images or product cards, using buttons or arrows. In this article, we'll explore how to create a carousel in React that is both animated and 3-dimensional.

This will involve leveraging React's powerful state management capabilities, as well as integrating CSS animations to create a smooth and dynamic user experience. By the end of this article, you'll have a functional and customizable carousel that can be easily integrated into your React-based projects. So let's get started!

TLDR

Don't have time to read the full article and just want to see the full code, here it is

App.tsx

import { useState } from "react";
import "./style.css";

import { useEffect, useRef } from "react";

// Based on "useInterval" from "react-use"
// https://github.com/streamich/react-use/blob/master/docs/useInterval.md

const useInterval = (
  callback: () => object | null | void,
  delay?: number | null
) => {
  const savedCallback = useRef<() => null | object | void>(() => null);

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    if (delay !== null) {
      const interval = setInterval(() => savedCallback.current(), delay || 0);
      return () => clearInterval(interval);
    }

    return undefined;
  }, [delay]);
};

const Card = ({
  content,
  idx,
  onClick,
  onMouseEnter,
  onMouseLeave,
}: {
  content: string;
  idx: number;
  onClick: () => void;
  onMouseEnter: () => void;
  onMouseLeave: () => void;
}) => {
  let style = {};

  if (idx === 0)
    style = {
      opacity: 0.4,
      transform: "translateX(-40%) scale(0.8)",
      zIndex: 0,
    };
  if (idx === 1) style = { zIndex: 1 };
  if (idx === 2)
    style = {
      opacity: 0.4,
      transform: "translateX(40%) scale(0.8)",
      zIndex: 0,
    };

  return (
    <div
      className="card"
      style={style}
      onClick={onClick}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      {content} card
    </div>
  );
};

const list = ["a", "b", "c", "d", "e", "f"];

function App() {
  const [arr, setArr] = useState(list.slice(0, 3));
  const [rest, setRest] = useState(list.slice(3));

  const [isScrolling, setIsScrolling] = useState(true);

  const updateArr = (idx?: number) => {
    const [a, b, c] = arr;

    if (idx === 0) {
      const lastRem = rest[rest.length - 1];
      const beforeArr = [lastRem, a, b];
      const beforeRem = [c, ...rest.slice(0, rest.length - 1)];
      setArr(beforeArr);
      setRest(beforeRem);
    } else {
      const firstRem = rest[0];
      const afterArr = [b, c, firstRem];
      const afterRem = [...rest.slice(1), a];
      setArr(afterArr);
      setRest(afterRem);
    }
  };

  useInterval(
    () => {
      updateArr();
    },
    isScrolling ? 3000 : null
  );
  return (
    <div>
      {arr.map((item, idx) => (
        <Card
          key={item}
          idx={idx}
          content={item}
          onClick={() => updateArr(idx)}
          onMouseEnter={() => setIsScrolling(false)}
          onMouseLeave={() => setIsScrolling(true)}
        />
      ))}
    </div>
  );
}

export default App;

style.css

.card {
  position: absolute;
  width: 60%;
  height: 200px;
  left: 0;
  right: 0;
  margin: auto;
  transition: transform 0.4s ease;
  cursor: pointer;
  border: 1px solid silver;
  background-color: white;
  display: flex;
  align-items: center;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
}

The final product and the code is available on codesandbox.

Step by Step

Let's get started by setting up our initial carousel with three cards:

import "./styles.css";

function App() {
  return (
    <div>
      <div className="card">Left card</div>
      <div className="card">Centre card</div>
      <div className="card">Right card</div>
    </div>
  );
}

Next, we'll set the style. We're using left, right, and margin to centre the cards. This is achieved by using position: absolute, which takes the element out of the document flow. Unlike position: fixed, position: absolute is positioned relative to its closest ancestor.

.card {
  position: absolute;
  width: 60%;
  height: 200px;
  left: 0;
  right: 0;
  margin: auto;
  background-color: white;
  border: 1px solid silver;
}

At the moment, we can only see one card because the three cards are stacked on top of each other. To update the position and create a 3D effect, we'll shift two of the cards sideways using transform and opacity. The translate property is used with a value of ±40% to ensure that the cards don't extend beyond the screen since the width is 60% (along with the scaling). We're also reducing the size by 20% (scale(0.8)) to create the illusion of depth or distance. A z-index of 1 for the centre element ensures that it appears on top of the other two cards.

We are going to add inline styles to each of the .card elements

import "./styles.css";

export default function App() {
  return (
    <div>
      <div
        className="card"
        // ↓ And this to shift it leftwards
        style={{ opacity: 0.4, transform: "translateX(-40%) scale(0.8)" }}
      >
        Left card
      </div>
      <div
        className="card"
        // ↓ And this to place it on top
        style={{ zIndex: 1 }}
      >
        Centre card
      </div>
      <div
        className="card"
        // ↓ And this to shift it rightwards
        style={{ opacity: 0.4, transform: "translateX(40%) scale(0.8)" }}
      >
        Right card
      </div>
    </div>
  );
}

Now, let's make it dynamic by adding functionality that allows us to move around the cards:

// ↓ Import this
import { useState } from "react";
import "./styles.css";

// ↓ And a new function, `Card`
const Card = ({
  content,
  idx,
  onClick,
}: {
  content: string;
  idx: number;
  onClick: () => void;
}) => {
  let style = {};

  if (idx === 0)
    style = { opacity: 0.4, transform: "translateX(-40%) scale(0.8)" };
  if (idx === 1) style = { zIndex: 1 };
  if (idx === 2)
    style = { opacity: 0.4, transform: "translateX(40%) scale(0.8)" };

  return (
    <div className="card" style={style} onClick={onClick}>
      {content} card
    </div>
  );
};

export default function App() {
  // ↓ A dynamic list that can be updated
  const [arr, setArr] = useState(["Left", "Centre", "Right"]);

  // ↓ And a new function that will be used to rotate the arr
  const updateArr = (idx: number) => {
    const [a, b, c] = arr;
    // When you click the left card
    if (idx === 0) setArr([c, a, b]);
    // When you click the right or centre card
    else setArr([b, c, a]);
  };

  return (
    <div>
      {/* Replace the hardcoded DIVs */}
      {arr.map((item, idx) => (
        <Card
          key={item} // ← Note, do not use "idx" for key
          idx={idx}
          content={item}
          onClick={() => updateArr(idx)}
        />
      ))}
    </div>
  );
}

If you click the cards, there will be a change in position but we need to add a rotation animation next. This is easy to achieve by adding a transition property to our CSS. The transition property works with any numbered properties, such as changing opacity from 0.4 to 1, translating from 40% to 0%, or scaling from 0.8 to 1. We'll add the transition property to the .card class in our CSS:

.card {
  /* New code below */
  transition: 0.4s ease;
}

Now, let's automate it and create a continuous rotation:

// ↓ Add useEffect and useRef to imports
import { useEffect, useRef, useState } from "react";
import "./styles.css";

// ↓ Create a new hook, `Card`
const useInterval = (
  callback: () => object | null | void,
  delay?: number | null
) => {
  const savedCallback = useRef<() => null | object | void>(() => null);

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    if (delay !== null) {
      const interval = setInterval(() => savedCallback.current(), delay || 0);
      return () => clearInterval(interval);
    }

    return undefined;
  }, [delay]);
};

const Card = ({
  content,
  idx,
  onClick,
}: {
  content: string;
  idx: number;
  onClick: () => void;
}) => {
  let style = {};

  if (idx === 0)
    style = { opacity: 0.4, transform: "translateX(-40%) scale(0.8)" };
  if (idx === 1) style = { zIndex: 1 };
  if (idx === 2)
    style = { opacity: 0.4, transform: "translateX(40%) scale(0.8)" };

  return (
    <div className="card" style={style} onClick={onClick}>
      {content} card
    </div>
  );
};

export default function App() {
  const [arr, setArr] = useState(["Left", "Centre", "Right"]);

  const updateArr = (idx: number) => {
    const [a, b, c] = arr;
    // When you click the left card
    if (idx === 0) setArr([c, a, b]);
    // When you click the right or centre card
    else setArr([b, c, a]);
  };

  // ↓ Add the hook function
  useInterval(() => {
    updateArr(2);
    // rotate every 3 seconds
  }, 3000);

  return (
    <div>
      {arr.map((item, idx) => (
        <Card
          key={item}
          idx={idx}
          content={item}
          onClick={() => updateArr(idx)}
        />
      ))}
    </div>
  );
}

Finally, we can disable scrolling when the user hovers over the carousel:

import { useEffect, useRef, useState } from "react";
import "./styles.css";

const useInterval = (
  callback: () => object | null | void,
  delay?: number | null
) => {
  const savedCallback = useRef<() => null | object | void>(() => null);

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    if (delay !== null) {
      const interval = setInterval(() => savedCallback.current(), delay || 0);
      return () => clearInterval(interval);
    }

    return undefined;
  }, [delay]);
};

const Card = ({
  content,
  idx,
  onClick,
  onMouseEnter, // ← Add this
  onMouseLeave, // ← Add this
}: {
  content: string;
  idx: number;
  onClick: () => void;
  onMouseEnter: () => void; // ← Add this: indicates hovering started
  onMouseLeave: () => void; // ← Add this: indicates hovering started
}) => {
  let style = {};

  if (idx === 0)
    style = {
      opacity: 0.4,
      transform: "translateX(-40%) scale(0.8)",
      zIndex: 0,
    };
  if (idx === 1) style = { zIndex: 1 };
  if (idx === 2)
    style = {
      opacity: 0.4,
      transform: "translateX(40%) scale(0.8)",
      zIndex: 0,
    };

  return (
    <div
      className="card"
      style={style}
      onClick={onClick}
      // ↓ Attach it to the div
      onMouseEnter={onMouseEnter} // ← Add this
      onMouseLeave={onMouseLeave} // ← Add this
    >
      {content} card
    </div>
  );
};

export default function App() {
  const [arr, setArr] = useState(["Left", "Centre", "Right"]);
  // ↓ Will be used to toggle auto scrolling
  const [isRolling, setIsRolling] = useState(true);

  const updateArr = (idx: number) => {
    const [a, b, c] = arr;
    if (idx === 0) setArr([c, a, b]);
    else setArr([b, c, a]);
  };

  useInterval(
    () => {
      updateArr(2);
    },
    // // 3000
    isRolling ? 3000 : null // ← Add logic to determine scrolling
  );

  return (
    <div>
      {arr.map((item, idx) => (
        <Card
          key={item}
          idx={idx}
          content={item}
          onClick={() => updateArr(idx)}
          // ↓ Update the props
          onMouseEnter={() => setIsRolling(false)}
          onMouseLeave={() => setIsRolling(true)}
        />
      ))}
    </div>
  );
}

If you need to handle more than three items, you can achieve this by adding to the array while ensuring that it doesn't go beyond three. One solution is to have two lists: an active one and a remainder list:

// ↓ Add a list with more than 3 items
const list = ["a", "b", "c", "d", "e", "f"];

export default function App() {
  // Two list, one is limited to 3 items
  const [arr, setArr] = useState(list.slice(0, 3));
  // Will contain any amount of items, and may be updated dynamically
  const [rest, setRest] = useState(list.slice(3));

  const [isRolling, setIsRolling] = useState(true);

  // ↓ re-write function to update two states at the same time (arr, and rest)
  const updateArr = (idx?: number) => {
    const [a, b, c] = arr;

    if (idx === 0) {
      // It will basically dispose of the last item in both arrays, and insert
      // it in front of the other array
      const lastRestItem = rest[rest.length - 1];
      const newArr = [lastRestItem, a, b];
      const newRest = [c, ...rest.slice(0, rest.length - 1)];
      setArr(newArr);
      setRest(newRest);
    } else {
      // It will basically dispose of the first item in both arrays, and add it
      // to the end of the other array.
      const firstRestItem = rest[0];
      const newArr = [b, c, firstRestItem];
      const newRest = [...rest.slice(1), a];
      setArr(newArr);
      setRest(newRest);
    }
  };

  useInterval(
    () => {
      updateArr();
    },
    isRolling ? 3000 : null
  );
  return (
    <div>
      {arr.map((item, idx) => (
        <Card
          key={item}
          idx={idx}
          content={item}
          onClick={() => updateArr(idx)}
          onMouseEnter={() => setIsRolling(false)}
          onMouseLeave={() => setIsRolling(true)}
        />
      ))}
    </div>
  );
}

In case you are wondering what is going on inside updateArr function, we are basically shifting the items left or right

That's it! By following this step-by-step guide, you should now have a fully functional and customizable carousel that can be easily integrated into your React-based projects.

Thanks for reading, and if you have any suggestions or feedback, feel free to share them in the comments below!

How to create animated hamburger menu

Ade Adeola — Wed, 22 Feb 2023 18:47:51 +0000

Introduction

I started out by using react-svg-morph in my personal website, to animate my icon, specifically menu icon. Unfortunately, react-svg-morph is not maintained (5 years and counting) meaning it still uses some outdated peer dependencies and more importantly, it's not worth its size in kb (since I'm only using it for one thing!).

So I decided to create a my own hamburger menu icon and the answer is not animating svg, in fact, my approach could not be further from react-svg-morph.

With just a few lines of code, you can easily create a dynamic and eye-catching animation for your website's hamburger icon!

TLDR

Don't have time to read the full article and just want to see the full code, here it is.

HTML

<body>
  <main id="main">
    <div></div>
    <div></div>
    <div></div>
  </main>
</body>

CSS

main {
  cursor: pointer;
}

div {
  height: 4px;
  width: 40px;
  background-color: white;
  border-radius: 4px;
  margin: 8px 0;
  transition: 0.75s linear;
}

.on > div:nth-child(2) {
  opacity: 0;
  transform: rotate(360deg) scale(0.2);
}

.on > div:first-child {
  transform: rotate(45deg) translate(8px, 9px);
}

.on > div:last-child {
  transform: rotate(-45deg) translate(8px, -9px);
}

body {
  background-color: hsl(180deg 100% 25%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Javascript

const main = document.getElementById("main");

const toggleClass = () => {
  main.classList.toggle("on");
};

main.addEventListener("click", toggleClass);

The final product and the code is available on codepen.

Step by Step

For a detailed explanation of the entire process

<main id="main">
  <div></div>
  <div></div>
  <div></div>
</main>

To start, you'll need to create three <div> elements within a <main> container, each representing one of the three strokes in the hamburger icon. To create the strokes, you'll need to define the height, width, and contrasting background color for each of the <div> elements, and add some margin between them.

div {
  height: 4px;
  width: 40px;
  background-color: white;
  border-radius: 4px;
  margin: 8px 0;
  /* Add animation to change in states */
  transition: 0.75s linear;
}

Once you have the three strokes in place, it's time to create the animation that will transform the hamburger icon into a close icon. To do this, you'll need to add a new state to your <main> container by adding the class "on" to it.

<main id="main" class="on">
  <div></div>
  <div></div>
  <div></div>
</main>

To create the close icon, you'll need to hide the middle stroke and rotate the other two strokes to form an "X" shape. You can achieve this by using the opacity and transform properties.

.on > div:nth-child(2) {
  opacity: 0;
  /* Rotate while hiding it */
  transform: rotate(360deg) scale(0.2);
}

Subsequently, We need to rotate the other two element to form a close (X) sign

.on > div:first-child {
  transform: rotate(45deg) translate(8px, 9px);
}

.on > div:last-child {
  transform: rotate(-45deg) translate(8px, -9px);
}

Finally, you'll need to add a toggle function that adds and removes the "on" class from the <main> container when the hamburger icon is clicked.

Remember, all our strokes (<div>) are nested inside main#main. So we can use it to let us

Know when the icon is clicked
Know the current state
Change the current state

Now, we just have to show how we want the second state to look like, that is create a new style for the second state.

const main = document.getElementById("main");

const toggleClass = () => {
  main.classList.toggle("on");
};

main.addEventListener("click", toggleClass);

And there you have it - a simple but effective animation that transforms your website's hamburger icon into a close icon with just a few lines of code. If you have any suggestions or feedback, feel free to share them in the comments!

DEV Community: Ade Adeola

Formatting Strings in JavaScript: Sorting, Plurals & Lists

TLDR

Intl.Collator

Basic Sorting

Sorting an Array with Intl.Collator

String.localeCompare vs Intl.Collator

Options

Intl.PluralRules: Smart Pluralization

Basic Usage

Different Languages, Different Rules

Making Plural Messages Dynamic

Options

Intl.ListFormat: Formatting Lists Naturally

Basic Usage

Different Locales and Styles

Options

Conclusion

Choosing Between On-Page Expansion, Modals, and New Screens in Mobile App Design

TLDR

Introduction

1. On-Page Content Expansion (Collapsible/Accordion)

Best Use Cases:

Real-World Examples:

Pros & Cons:

2. Modal Windows (Pop-ups and Overlays)

Best Use Cases:

Real-World Examples:

Pros & Cons:

3. Navigating to a New Screen

Best Use Cases:

Pros & Cons:

Mobile vs Web

How to Choose the Right Approach?

Prioritize Usability and Accessibility:

Final Thoughts

Making Numbers Speak Your Language in JavaScript

Introduction to Intl.NumberFormat

Customizing Number Formatting

Currency

currencyDisplay

currencySign

Unit

Percent

Browser Support

Conclusion

Simplifying Relative Time Representations in JavaScript

Introduction to Intl.RelativeTimeFormat

Basic Usage

Localization and Internationalization

Customizing Relative Time Formatting

Browser Support

Conclusion

A Guide to Date and Time Formatting in JavaScript

Introduction to Intl.DateTimeFormat

Basic Usage

Customizing Date and Time Formatting

locale

options

Browser Support

Conclusion

How to create a carousel in React

Introduction

TLDR

Step by Step

How to create animated hamburger menu

Introduction

TLDR

HTML

CSS

Javascript

Step by Step

Sorting an Array with `Intl.Collator`

`String.localeCompare` vs `Intl.Collator`

`Intl.PluralRules`: Smart Pluralization

`Intl.ListFormat`: Formatting Lists Naturally

Introduction to `Intl.NumberFormat`

`currencyDisplay`

`currencySign`

Introduction to `Intl.RelativeTimeFormat`

`locale`

`options`