Unicorns Think Clockwise

Working with time in web applications — especially with a remote backend — can easily cause a lot of frustration.
This talk will take a look at the background of some of these issues and try to offer a few ideas on how to ease the pain in the future.

Transcript

1. Unicorns think clockwise — Date & Time in web applications —
2. @polarblau
3. <plug>
4. pleaserevise.com
5. </plug>
6. Why?
8. 1 2 3 4 5 5
9. The top 5 reasons for ‘the pain‘
10. Time re–engineered
15. April 13, 2036
16. April 13, 2036
18. - 0 +
19. The earth day
20. Timezones
22. Daylight saving
24. The top 5 reasons for ‘the pain‘
25. Cultural differences 5
26. Humanity and a history of bad decisions 4
27. Confusing APIs 3
28. new Date(2036, 4, 13)
29. Tue May 13 2036 00:00:00 GMT+0300 (EEST)
30. var d = new Date(2036, 4, 13) d.setHours([…])
31. d.setHours(h, [m, [s, [ms]]])
32. Timezones and DST 2
33. UTC+05:45 (Nepal) UTC+12:45 (Chatham Islands) UTC+09:30 (Australia) UTC−04:30 (Venezuela)
34. *
35. * bad idea *
36. 1 “What he said!”
37. The top 5 no–no‘s
38. Don’t make assumptions 5
39. Don’t do more than necessary 4
40. Don’t make calculations on the client–side 3
41. Don’t compare local time with server time 2
42. Just avoid client time as much as possible 1
43. The top 5 do–do‘s
44. Remember: Offsets are not (always) defined as integer hours 5
45. 4 Standards
46. 2012-02-15T12:06Z
47. 2012-W07-3
48. 12d7h22m9s
49. (d > 0 && d < 3600) Activity within an hour in seconds:
53. 42 minutes + 17 seconds
54. Always persist in UTC 3
55. Unicorns Think Clockwise
56. Unicorns Think Clockwise
57. Unicorns Think Clockwise
58. Unicorns Think Clockwise
59. Client → Server
60. var apocalypse = new Date(2036, 4, 13); // “Tue May 13 2036 00:00:00 GMT+0300 (EEST)”
61. $.getJSON(‘/api/rentals/availability’, { start: apocalypse }, renderAvailability);
62. Time.zone.parse(params[:start]) // Mon, 12 May 2036 21:00:00 UTC 00:00
63. apocalypse = Time.zone.parse(params[:start]) // Mon, 12 May 2036 21:00:00 UTC 00:00
64. Server → Client
65. { start: apocalypse.iso8601 }.to_json // {"start":"2036-05-12T21:00:00Z"}
66. var apocalypseTS = Date.parse(response.start); var apocalypse = new Date(apocalypseTS); // “Tue May 13 2036 00:00:00 GMT+0300 (EEST)”
67. Convert to local time as late as possible (—if ever) 2
68. 1 Relax (it’s just numbers)
69. d.getTime()
70. Helpers
71. Javascript moment.js XDate date.js
72. Ruby ice_cube timecop chronic delorean
73. Thanks!