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/

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