Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Apps Go Intl - GIDS Live 2021

JavaScript Apps Go Intl - GIDS Live 2021

In a connected, global world there are a surprising number of problems with formatting text for our users. Did you know how many different ways there are to format a number? Or pluralise a noun? Or display a date? And let's not get into doing time zone maths for those dates. Internationalising an app by hand, and doing it correctly, could be a never-ending, full-time job.

The Intl namespace is home to the ECMAScript Internationalization API and contains the solutions to many of our formatting problems. In this talk we'll explore the available APIs that can make it easier to build a truly international application.

With Intl we can build apps that cater to all our users, wherever they are, however they write things down.

--

Links:

MDN on Intl: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl

How to display dates in your user's time zone with the Intl API: https://philna.sh/blog/2021/02/22/display-dates-in-your-users-time-zone/

<time-formatter> Web Component: https://github.com/philnash/time-formatter/

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

April 29, 2021
Tweet

Transcript

  1. JAVASCRIPT APPS GO INTL @philnash

  2. Phil Nash @philnash https://philna.sh philnash@twilio.com

  3. JAVASCRIPT APPS GO INTL @philnash

  4. 1 MILLION @philnash

  5. 1,000,000 10,00,000 1 000 000 1.000.000 ١٬٠٠٠٬٠٠٠ ⼀, 〇〇〇, 〇〇〇

    @philnash
  6. 1,234,567 12,34,567 1 234 567 1.234.567 ١٬٢٣٤٬٥٦٧ ⼀, ⼆三四, 五六七

    @philnash
  7. HOW DO WE DEAL WITH THIS? @philnash

  8. DATES @philnash

  9. What date is this? 02/03/2021 02/03/2021 @philnash

  10. @philnash

  11. DATA COMES WITH CONTEXT @philnash

  12. HOW CAN THE PLATFORM HELP? @philnash

  13. ECMA 402 TASK GROUP @philnash

  14. INTL API @philnash

  15. NUMBERS @philnash

  16. Intl.NumberFormat @philnash

  17. UNITS @philnash

  18. PLURALS @philnash

  19. CARDINALS AND ORDINALS @philnash

  20. YOU NEED YOUR OWN TRANSLATIONS @philnash

  21. Intl.PluralRules @philnash

  22. RELATIVE TIME @philnash

  23. BRINGS THE TRANSLATIONS @philnash

  24. YOU SET THE TIME PERIOD AND OFFSET @philnash

  25. CAN BE USEFUL @philnash

  26. Intl.RelativeTimeFormat @philnash

  27. DATE AND TIME @philnash

  28. CONTEXT @philnash

  29. TIME / DATE / PLACE / LANGUAGE @philnash

  30. WE NEED A FORMAT THAT HAS ALL THE INFORMATION @philnash

  31. ISO8601.js UTC @philnash

  32. YYYY-MM-DDTHH:MM:SS.SSSZ @philnash

  33. WE JUST NEED THE USER'S TIME ZONE @philnash

  34. Intl.DateTimeFormat @philnash

  35. CAN THIS BE EASIER? @philnash

  36. WEB COMPONENTS @philnash

  37. <time-formatter> @philnash

  38. <time-formatter> <time-formatter datetime="2021-04-29T01:45:48.073Z"> 29/04/2021 </time-formatter> 01. 02. 03. @philnash

  39. <time-formatter> https://github.com/philnash/time-formatter/ @philnash

  40. THE FUTURE OF ECMA 402 @philnash

  41. The future of ECMA 402 https://github.com/tc39/ecma402 @philnash

  42. USE THE PLATFORM! @philnash

  43. Thanks! @philnash https://philna.sh philnash@twilio.com