Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

lighter-weight fancy dates #3232

Open
keturn opened this Issue Feb 19, 2019 · 2 comments

Comments

Projects
None yet
3 participants
@keturn
Copy link
Contributor

keturn commented Feb 19, 2019

"Fancy dates" are currently implemented using moment.js, which is well-known for being a comprehensive and robust date-handling library. It's also well-known for being enormous when shipped with all supported locales — 319 kB, probably the size of all the content on my Nikola site put together. 😂

Fortunately, as a static site, we only need a few bits of functionality from the wide world of date handling.

prereq: parsing the date in JavaScript

To get a JavaScript Date object, MDN recommends passing an integer timestamp (in milliseconds since the epoch), since that's the hardest for implementations to get wrong. However, using an ISO-8601 formatted string, as Nikola currently produces for webiso dates, should be fine too. We don't need any additional client-side dependencies for parsing or validating that format.

Fanciness 1: using JS_DATE_FORMAT and local user time

Formatting a Date as a local time in some sort of locale-appropriate way is available as Date.toLocaleString. But since, for fanciness purposes, we as the publisher want more control over the formatting, we have to look further.

Date.toLocaleString does support options, though the option syntax is more verbose than the strftime-style format used by Moment and less flexible, placing more trust in the browser's internationalization catalogue to do the right thing.

To be able to use strftime-style format strings, consider

Some of these libraries are similar in size to Moment, but are more friendly to loading just certain functions (i.e. formatting) without dragging in the whole thing.

Fanciness 2: using a string like “2 days ago”

This level of fanciness does not yet enjoy native browser support, though see the TC 39 Proposal for Intl.RelativeTimeFormat. Polyfill may be available.

Other Considerations

  • What's Nikola's browser support policy? Does it include any browsers that don't support Internationalization? Would it be okay if those browsers fall back to non-fancy dates?
  • JavaScript build process. The extent to which we can deliver a smaller payload than Moment may depend on having a modern bundler; if Nikola's javascript dependencies are limited to "prebuilt things" (as mentioned in #2965 (comment) ), that'll rule out some of the alternatives.

Related:

  • #2183 (which is currently titled "Unnecessary .js includes" but only cites moment.
@Kwpolska

This comment has been minimized.

Copy link
Member

Kwpolska commented Feb 19, 2019

We currently don’t have any specific policy for browser support. Note that while Level 1 will probably be supported correctly, Level 2 won’t, as RelativeTimeFormat was added to Chrome (stable) in December 2018, and to Firefox in January 2019. It’s not supported by Safari.

A good rule-of-thumb that I would personally approve would be that a JS feature may be used, if it’s supported:

  • by stable versions of Chrome, Firefox and Safari
  • on desktop and mobile
  • for at least 3 months

Would it be okay if those browsers fall back to non-fancy dates?

As long as the number of affected users is small, sure.

  • JavaScript build process. The extent to which we can deliver a smaller payload than Moment may depend on having a modern bundler; if Nikola's javascript dependencies are limited to "prebuilt things" (as mentioned in #2965 (comment) ), that'll rule out some of the alternatives.

Nikola will never require Node to be installed for the core feature set. The Node ecosystem is terrible, and external dependencies are always a pain to get working.

Another possible solution to minimize asset size would be to re-use the infrastructure previously used with Colorbox (copy only required locales to output, load only one i18n file on a page): f45bafb — cdnjs supports that workflow as well, even if we wouldn’t be able to use SRI for these files.

@xxyuk

This comment has been minimized.

Copy link

xxyuk commented Mar 12, 2019

Day.Js is a nice alternative to me. It's supper small, only 2kb with locale and format.

Day.js 2KB immutable date library alternative to Moment.js with the same modern API

https://github.com/iamkun/dayjs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.