← Blog

Human APIs

· 2897 days ago · 0 views

Title

I tend to format my styles. Although you can do that following different criteria, my main criteria is aesthetic.

I created microsoft-capitalize just for that:

const capitalize = require('microsoft-capitalize')

capitalize('Microlink CDN: Global Edge Cache')
// => 'Microlink CDN: Global edge cache'

It follows Microsoft Copywriting styleguide, which is simple and intuitive.

Date

Internationalization is difficult to get right at the best of times, luckily there is a well supported API for it now in most browsers.

The method toLocaleString() will format the current Number/Date/Object state into an international string locale representation.

const formatDate = ((date = new Date()),
({ lang = 'en-us', month = 'short', day = 'numeric', year = 'numeric' } = {}) =>
  new Date(date).toLocaleString(lang, { month, day, year }))

There is another way to format dates, using Intl.DateTimeFormat. It’s specially useful for converting a timestamp to a specific timezone:

const prettyDate = timestamp =>
  `[${new Intl.DateTimeFormat('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    timeZone: 'Europe/Madrid', // this is my local timezone!
    hour12: false
  }).format(new Date(timestamp))}]`

Number

The same approach could be used for format a Number:

const formatNumber = ({ style = 'currency', currency = 'CAD' } = {}) => (
  n,
  lang = 'en-US'
) => n.toLocaleString('de-DE', { style, currency })

Using it on action

const formatter = formatNumber()
const amount = 1034532

formatter(1034532) // 🇺🇸 USA
formatter(1034532, 'de-DE') // 🇩🇪 Germany
formatter(1034532, 'ar-EG') // 🇺🇪🇬 Egypt

You can use the browser for getting the user language preference:

const locale = navigator.language || navigator.userLanguage || 'en-US'

That’s could be a good point to start. Next step could remember the user preference and store it associated with the user profile settings.

Alternatives

Bytes

The Intl.NumberFormat is an specific API for sensitive number formatting.

It can be used for formatting bytes:

const prettyBytes = new Intl.NumberFormat('en-US', {
  notation: 'compact',
  style: 'unit',
  unit: 'byte',
  unitDisplay: 'narrow',
});

prettyBytes.format(1024) // 1KB

Unfortunately, it isn’t converting between units so you will need to write some code around.

See the list of supported units.

Alternatives

Relative Time

The Intl.RelativeTimeFormat makes easy to formate relative time.

const formatTime = (
  date1 = new Date(),
  date2 = new Date(),
  { lang = 'en-us', unit = 'seconds', ...opts } = {}
) => new Intl.RelativeTimeFormat(lang, opts).format(date2 - date1, unit)

Alternatives

List

const listFormat = (list, { lang = 'en-us', ...opts } = {}) => new Intl.ListFormat(lang, opts).format(list)

listFormat(['Paco']) // "Paco"
listFormat(['Paco', 'Pepe']) // "Paco and Pepe"
listFormat(['Paco', 'Pepe']) // "Paco and Pepe"
listFormat(['Paco', 'Pepe'], { type: 'disjunction' }) // "Paco or Pepe"

Alternatives

Cache Header

Setting a Cache-Control header can be tricky to remember. pretty-cache-header makes it more human-readable:

const cacheHeader = require('pretty-cache-header')

cacheHeader({
  public: true,
  maxAge: '1 day',
  staleWhileRevalidate: '1 week'
})
// => 'public, max-age=86400, stale-while-revalidate=604800'

Bibliography