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