تقويم (aka, the fun of locali[zs]ation)

A presentation at Refresh Conference in October 2018 in Groningen, Netherlands by Jayne Mast

Paul Verbeek-Maﬆ Senior Software Engineer confrere.com @paul_v_m | noti.st/paul

kalendář ປະຕiທiນ ‫ڪئلينڊر‬ mìosachan ⽇日历 Calendar / Kalender / ‫تقويم‬ (aka, the fun of locali[zs]ation) 'ISjaH календарь ‫קאַלענדאַר‬ @paul_v_m

Falsehoods programmers believe about time http://infiniteundo.com/post/25326999628/falsehoods-programmersbelieve-about-time More falsehoods programmers believe about time http://infiniteundo.com/post/25509354022/more-falsehoodsprogrammers-believe-about-time @paul_v_m

May 2017 Mo 1 Tu 2 We 3 Th 4 Fr 5 Sa 6 Su 7 From dd-mm-yyyy To 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 dd-mm-yyyy Price € Save 29 30 31 1 2 3 4 @paul_v_m

May 2017 Mo 1 Tu 2 We 3 Th Fr 4 5 Sa 6 Su 7 From dd-mm-yyyy To 8 15 22 9 16 23 10 11 12 13 14 17 18 19 20 21 24 25 26 27 28 dd-mm-yyyy Price € Save 29 30 31 1 2 3 4 @paul_v_m

May 2017 Su 31 Mo 1 Tu 2 We 3 Th Fr 4 5 Sa 6 From mm-dd-yyyy To 7 8 14 15 21 22 9 16 23 10 11 12 13 17 18 19 20 24 25 26 27 mm-dd-yyyy Price $ Save 28 29 30 31 1 2 3 @paul_v_m

ECMAScript Temporal proposal (https://github.com/tc39/proposal-temporal) @paul_v_m

May 2017 Su Mo Tu We Th Fr Sa From To Price $ Save moment.localeData().firstDayOfWeek(); !// 0 or 1 (Sunday or Monday) moment.localeData().weekdaysMin(); !//["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] @paul_v_m

May 2017 Su Mo Tu We Th Fr Sa From To Price $ Save var calMoment = moment(); calMoment.startOf('month').startOf('week').date(); !// 31 @paul_v_m

May 2017 Su 31 Mo Tu We 1 2 3 7 8 14 15 21 22 9 Th 4 Fr Sa 5 6 10 11 12 13 16 17 18 19 20 23 24 25 26 27 From To Price $ Save 28 29 30 31 1 2 3 var lastDay = moment().endOf('month').endOf('week').startOf('day'); !// 3 while (!calMoment.isSameOrBefore(lastDay)) { … calMoment.add(1, 'd').date(); } @paul_v_m

May 2017 Su 31 Mo Tu We 1 2 3 7 8 14 15 21 22 9 Th 4 Fr Sa 5 6 10 11 12 13 16 17 18 19 20 23 24 25 26 27 From ??-??-?? To ??-??-?? Price $ Save 28 29 30 31 1 2 3 moment.localeData()._longDateFormat['L']; !// 'MM/DD/YYYY' @paul_v_m

May 2017 From dd-mm-yyyy Mo 1 To dd-mm-yyyy Price € 8 Tu 2 9 We Th Fr Sa Su 3 4 5 6 7 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 4 Save @paul_v_m

May 2017 From dd-mm-yyyy To dd-mm-yyyy Price € Su Sa Th We Fr Tu Mo 7 6 5 4 3 2 1 14 13 12 11 10 9 8 21 20 19 18 17 16 15 28 27 26 25 24 23 22 4 3 2 1 31 30 29 Save @paul_v_m

“much better overview” “I can finally find my reservations!” “❤ the new interface!” “Looks a lot better, just like {popular rental website for apartments}’s calendar!” @paul_v_m

“hate it, bring the old one back” “who made this 💩?” @paul_v_m

“Reservations aren’t showing up” “Why are closed dates red?” “The date selection is not working” “The prices aren’t showing properly” @paul_v_m

https://en.wikipedia.org/wiki/Time_in_Brazil

dayA .startOf('day') .add(1, 'd') .isSame(dayB.startOf('day')); @paul_v_m

dayA .add(1, 'd') .startOf('day') .isSame(dayB.startOf('day')); @paul_v_m

05/07/2018 moment.localeData()._longDateFormat[‘L']; MM/DD/YYYY $.datepicker.parseDate('MM/DD/YYYY', ’05/07/2018'); $.datepicker.parseDate('mm/dd/yy', '05/07/2018'); @paul_v_m

function convertToJQueryUI() { const format = moment().localeData()._longDateFormat['L']; const dateDelimiterRegEx = /[-/]/; const delimiter = (dateDelimiterRegEx.exec(format) !|| ''); const dateTransform = { 'YYYY': 'yy', … 'D': 'd' } const getTransformedDatePart = part !=> dateTransform[part] !|| part; } return format .split(dateDelimiterRegEx) .map(getTransformedDatePart) .join(delimiter); @paul_v_m

const dateDelimiterRegEx = /[-/]/; 05/07/2018 05-07-2018 05.07.2018 @paul_v_m

const dateDelimiterRegEx = /[\W]/; 05/07/2018 05-07-2018 05.07.2018 @paul_v_m

2018 const dateDelimiterRegEx = /[\W]/; const dateDelimiterRegEx = /[\W+]/; @paul_v_m

Conclusion AKA. Paul tries to do some thought-leadering @paul_v_m

Localization is not juﬆ about date & time @paul_v_m

Thank you! Paul Verbeek-Mast Senior Software Engineer confrere.com @paul_v_m | noti.st/paul

Jayne Mast
@jayne

1 / 62

When working at Booking.com, Paul created a new calendar for their partners. It took him about 6 months. Months? Yes, months. Creating a calendar that works correctly all across the world for 42 different languages and even more locales, is not something that you do in a week.

In this talk, Paul will show you the weird things he learned. From Brazilian Summer Time to Slovakian (or was it Slovenian?) date formatting. And how to avoid the many (many!) mistakes he made.

Buzz and feedback

Here’s what was said about this presentation on social media.

Now up! @paul_v_m talking about the fun of locali[zs]ation. #refreshcon pic.twitter.com/L3zrgaxcVI
— Refresh Conference (@refreshcon) October 26, 2018
Apparently there's a Wikipedia page specifically for time, and daylight saving time in Brazil. Great talk by @paul_v_m! #refreshcon pic.twitter.com/nVLlLZD6kh
— Refresh Conference (@refreshcon) October 26, 2018
Building a calendar with @paul_v_m, with lovely specific localisation bugs #refreshcon pic.twitter.com/ROkDa6NXx2
— Nathan de Vries (@nvreez) October 26, 2018
having my mind blown by @paul_v_m excellent talk on localisation, especially the stuff about timezones. Brazil is crazy, and apparently in Belgium if you go to the toilet its an hour later. #refreshcon
— Jane “double diamond “ Austin (@msjaneaustin) October 26, 2018

Calendar / Kalender / تقويم (aka, the fun of locali[zs]ation)

Link for this presentation:

HTML code for embedding:

Share on social media:

Buzz and feedback