Where Does Time Come From?

Monday. Monday. Monday. Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, Git workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats. Coming in hot. Here is Wes, Barracuda, Boss, and Scott, El Toro Loco, Tolinski.

Welcome to Syntax on this Monday Sanity treat.

We're gonna be talking about the Time. Where does time come from? When you say new date in your browser, what the heck's that doing? And what are some of the pitfalls of working with time, what are some formats, what are some things about temporal time zones, that sort of stuff. This is gonna be a little bit of a conversation about time.

But before we get into that, this is episode number 720.

Let me just take a quick moment to give a really, really sincere thank you to Chris Enns for doing such a an amazing job Jeff. Editing our podcast for so long.

We have brought editing in house. In fact, we have a a new producer, Sanity Rector, who will bring on to the show at some point here, so that he can say hi to you, everyone.

But because of that, it meant having to say goodbye to our longtime editor, Chris. And, you know, you may have heard us say Chris cut that out or anything like that. And he he he's just been an incredible team delivering this podcast day after day for everybody and doing just such an amazing job. You know, this podcast wouldn't be the same without out Chris, and it wouldn't have gotten here without Chris. So I I wanna give a just a a sincere thank you to Chris And all of his his hard work, and and give him an opportunity here to insert something if he would like.

Onto the very capable hands of Randy. It's been a lot of fun to be welcomed by the syntax community and by all of you great developer nerds even though most of my web dev knowledge died alongside front page 98. Scott said, if you've got questions about starting or editing a podcast, hit me up at lemonproductions.ca on the web, I, Chris on Twitter, or at Lemon Podcasting on YouTube. As usual, I'll be sure to put all the links in the show notes. Enjoy the rest of the show. Definitely check out, Chris, his Lemon Productions dotca. Of course. I was actually really happy. Chris is a Canadian

new editor. Sanity, also Canadian.

It's a Canadian podcast, so very happy about that.

I'm just gonna start referring to this as a Canadian podcast. Is that okay, Scott? I have Canadian blood. It's fine. Yeah. My my grandparents came from Montreal, so yeah. Honestly, if you're looking to start a podcast, check out Chris Lemon productions dotca. Appreciate all your work. Thank you, Chris. Yeah. Yeah. Again

or I'm gonna say this. If you know anybody who's starting a podcast, you Node, you know, you hear the word podcast, just throw Chris's website around lemon productions.ca.

He's he's Just a a fantastic guy and has done a great job for us. So thank you, Chris, and we are going to miss you here on Syntax.

So with that said Time. Time. Time passes. We we get a a, new editor for the podcast, and we talk about we get new JavaScript APIs to deal with time. Time passes, and that's that's where we're at today.

What is time. And how do we deal with time? We're not gonna be talking about space time here or anything like that, but more or less time in the browser. This kind of tripped me out when you're you posted about,

Like you had something in the browser where you were getting a date from 2022, like a 2 year old time stamp. And then what happened? You rebooted your computer

or or restarted? This is actually very funny. And a small aside, it says in the show notes, Scott, tell your story.

There's a podcast I listen to that's like a, an Australian couple. It's just 2 comedians.

And the, the one they they just got married. The Node, she does this thing to her husband where she'll say, Tom, can you tell your story whenever they're in a group setting? Like, in just JS, like, a prank because he doesn't have a story prepared. Like, what what stuff. What kind of story do you want me to tell? So he just says, Scott, can you tell your story? I I got that same vibe. But my story was I was doing some date stuff, and I was loading up a date server side and client side. It was in an SSR component.

So that code is the same code. It's running client side. It's running server Node. So that very clearly eliminates the situation wherein might I have the time stamp in my code incorrectly.

I'm just running a new date.

And for some some stupid reason, the 1 on the server side, not the client side, Wes.

The server side was returning in the server. It's my own internal process. The server side was returning a date That was Node day off and 1 year off. And my client, the browser, was returning the correct date. And I said A whole year. Okay. I'm I'm going to lose my mind.

What this is the same function being run on the client and the server, And the date is off by a day a year.

What in the world could be going on? I restarted my computer, And it fixed.

I I cannot explain it if if, you know, this was unsolved mysteries. You could queue up some spooky music. It's the spookiest thing that's ever happened to me on my computer, and, like, working with daytime is spooky enough already. So, honestly, who knows? I I have no no answer to what happened there, but it it was a knock. So bizarre.

So you told me that story, and I just started, like, Almost tripping out being like, where does time come from? You know? I was tripping out too. Yeah. Yeah. Your browser knows the time, but, like, where's your browser get it? Your browser gets it from your computer. Where's your computer time? Well, maybe there's, like, a chip on the motherboard. Okay. Well or or maybe it gets it from we'll talk about where time comes from in a second. But I was just like, Woah. Woah. Like, time is just this thing we made up, and who keeps track of time?

You know? That it's connected to space itself. That's gonna trip you up it even more. Yeah. So,

let's talk about that.

At the very lowest level, there are things called atomic clocks, and many servers.

People that have server infrastructure, many trading places will have atomic clocks right in their data center. And if you look it up, they're pretty crazy. And Jeff Bezos just Node, like, a 40 Node $1,000,000, 10000 year atomic clock. And Wow. If you look at it, it's a bunch of, like, gears that spin, And apparently that's the most accurate way to keep track of time. Like, if you were to say, like, hey, how could you keep track of time as accurate as possible? I would not tell you, let's get 80 gears and just put them together, and that will but, like, I guess that's how clocks work, but that would not be my first guess.

And and how that crappy episode. How that gets Converted to actual, like, digital time.

I'm not sure how that works. That's the same thing with randomness.

You know, Cloudflare needs randomness for their SSL certificates, and randomness built into computer chips is somewhat random, but it can be figured out how random something will be. So they have these, like, lava lamps, This whole wall of lava lamps, and they have a camera on them. And based on where the blobs are in these lava lamps, They they correspond to how random things are. So, like, that's more random

than a computer chip. Yeah. And I'm gonna link up to they have a blog post Blending that, and it's one of the coolest things. It's it's one of the when I learned that they did that, I was just like, hell, yeah. That's awesome.

So atomic clocks. Now we have network time. So for most devices that are connected to the Internet, if you need to get the current time, there's these things called or there's a protocol, NTP, network time protocol, and it's a protocol that where, basically, there are For a number of servers out there, there's different levels of them. There's like 1 level, which is the atomic clock, and then the time gets dispersed to Ten other different servers out there, and then that gets dispersed to a different number of them. And basically you can ping any of these NTP protocols, and it will always return to you the correct time that is based off of one of those atomic clocks. So that's how most of your computers. That's why Wes have a head unit in our car and every now and pnpm, There's a battery in it, but if you don't drive it for a while, the battery goes dead and it boots up again and the time is wrong. And then after a second, it connects to the Wi Fi The Network Time Updates. Right.

And it's pinging one of those. There might be something with the WiFi router where it gets it from that. I'm not totally sure, but Jeff. In my mind, that's where it gets most of it. What else? Your device time. If you're not connected to the Internet, that's another thing I was trippy. Like, where does that come from? The little battery on your computer. Node in the day, I guess they still have this. But if you open up a motherboard of a computer, there's a little CR Wes 32 battery, and that keeps time on your motherboard while your computer is disconnected or not. So so every now and then, that battery will die, or you have to replace it. You have to reset the actual time on your motherboard, which is wild. Yeah. That is wild.

Man, little batteries like that, they do all sorts of weird stuff. Did you you you know, like, back in old school Nintendo games, Did you know that games that were able to, like, persist save files because they didn't have storage on them, that was done via a little battery within the game cartridge.

That. Yeah. Because if you crack open, I don't know if this is still the case, but the Game Bos games back in the day or was it the NES games? Hey, you crack it open. JS there any asking? There's a little battery in it. And often if you buy something, they're only the ones that saved. If you buy, like, an old computer or, like, I Follow this TikTok account where this guy bought a video vending machine that wouldn't boot up, and it was just a little coin cell battery on the motherboard.

That was the case.

A lot of electronics going awry is either a, a 10 set fuse.

Stuff. That is you don't know that there's a fuse in it or, b, a little coin cell battery that has died that you don't know exists either. Wes is the kind of guy you wanna get that info from. He's always fixing

who knows what.

But why why is time important, Scott? Wes

time it is currently.

SSL certificates, they require the correct time. Mhmm. Logging and saving data. If you have A log or errors and exceptions. Right? Use century dot I o. That tells you when something happened. When something happened is very important if you're trying to fix it. If it happened last week or last year, it might not be relevant. You may have already fixed this problem. Not relevant. Right? So time is extremely important in programming in general to be able to fix the things that are broken or to understand what's going on when and where.

Jump. You know, it's the difference between something happening at Node second versus the very next second.

And, you know, even then, you need to know, like, where your users Yarn, time zones.

One of the things that are really important in development is understanding which we'll talk about, But also, like, you know, what exactly the time zone differences is and how we can calculate that difference and how that matters based on Where we are, essentially. Think about it this way.

Your server lives in a location. You live in a location.

Wes lives in the location. If I do new Scott date from where I am and my server does new dot date and West does new dot date, chances are those are all going to be different answers

despite the fact that we're all talking about the exact same time here. And and it gets even worse with serverless or edge compute Wes it's rendering somewhere close to you, but you may be expecting it to run on a specific time. And I even had a weird issue a couple of years ago back when I used to just have a digital ocean box.

Something with the time got goofed up And, all of my stats were, like, 3 hours off, and I'm pretty sure it was because The actual box I was running on was moved

from one location to another. One interesting thing to to to note here about time, I don't know if you've ever pirated Adobe software Nope. In your days. I haven't either. Okay.

People who've done it, though. I've heard. And I also heard that, when when that had been done, sometimes you needed to change the date on your computer, so that Adobe's checks would check, you know, they they wouldn't check to see. So that was the strategy that I heard you could do Wes to change the Yarn in which your computer was set out to install the software. This, you know, this is something I think I think people did, you know, like, 10 years ago or so, but it was an interesting strategy. That Wes

before SSL certificates became very commonplace because you do that Node. You change The date on your computer or, like, I booted up an old MacBook yesterday, and I hadn't booted it on for probably 2 years, and stuff. It it was dead, dead, dead. The time sometimes the time is off. I didn't check this one, but it's happened in the past.

It's Scott hit the time servers to keep going. Yeah. Well, let's talk about epoch time really quick. Pnpm epoch time is the number of seconds that have elapsed since January 1st 1970.

Now epoch time is a really useful way to store time because it's just a number. It's an integer.

And that can be really nice because when you're dealing with JavaScript dates, a new date in JavaScript is not a value. Right? Stuff. It's a it's a whole lot of stuff. And, you know, if you're wanting to save a date to a database and have it be accessed somewhere else later, makes a whole lot of sense to convert it to the epoch time, which, again, the number of seconds elapsed since January 1st 1970. Now what's interesting here is I didn't know about this being an issue in computer science. We got a bit of a y two k situation going on here. They call it the 2038 Problem, and it's not something that you have to worry about within JavaScript.

So this this is just an interesting little tidbit.

In some points, The epoch time was represented as a 32 bit integer.

And if your epoch, time storing was a 32 bit integer.

It will overflow on January 19, 2038, Jeff. Causing your epoch times to all break. And since then, many systems have become 64 bit integers to define epoch time. That is a, a little bit of a a y two k problem that I've never heard about before until recently.

It's crazy. So JavaScript has been updated

For that, has it? Let's see. JavaScript numbers, including those representing epoch time, are stored as 16 bit

Floating point numbers. This allows yes. So JavaScript is fine. I'm gonna try it right now. So const date is equal to new date, January 22nd 2038.

Get time. Yeah, it works fine. So the browsers have been updated for this Y2K bug.

But if you're saving time in databases, this might be a bit of an issue for you in, what, 14 years from Node,

So get ready. Something to put in your, calendar for 14 years from now.

Hey, 2Doo. Although, like, the older I get, the faster time goes. So I think it's gonna come up on us real quick. The older I get, the faster time goes for sure. Absolutely. That's the thing.

What do you know about ISO eight six zero Node?

Does that mean anything to us? ISO 8061 is my favorite standard of all time.

No. I'm I'm not sure. Like, that's a that's a standard for

specifying what time is. Right? Yes. And it's issued by the International Organization For Standardization.

Okay? The ISO. That's what the ISO is.

And it's basically The way in which is like a standardized way to to format a date. It's, year year year hyphen month month hyphen day day colon hour hour colon m m colon s s, and then you can do some time zone stuff in there too. So Yeah. You can you can add, like by default, z is UTC,

and then you can instead of just putting z on the end, you can do plus or minus. Like, plus Yes. 5 would be eastern.

That sounds like no fun. But, like, if you ever see like, let's say You're choosing to output a date somehow on, for whatever reason, and you're trying to decide, hey. I wanna store this date as a drink.

What should I store it as? Makes a lot of sense to store it as ISO 8601, because that's easy to work with and, just about everything understands it. Right. You can pass it into a new date function. However, be warp, if you pass it into a new date function, it does take time zones into account. For instance, I ran, new date, 2024 0301 into my console this morning, and it output February 29, 2024.

So so, that is part of the joy of working in this stuff. If you wanna just say, hey. Give me a date, and then now turn it into a JavaScript date, You've gotta understand what exactly you're asking for. Because when you do new date on anything, the very first thing a It definitely may not be the very first thing, but what it does to your date is it it always goes to the time zone in which the system is running on.

So that is a concern anytime you're passing in these numbers. Right? Because the ISO 86 o one. And if you just pass in a date without a time zone, it assumes UTC here, which is attached to no time zone. So we we also have,

a new standard, which is the I don't know what the name JS. The RFC 33339.

It's another proposal for these time stamps. But it adds 2 things. It adds time zone names.

So right now we just have plus The offset of UTC. Right? The offset. That's obnoxious. Plus 5 is is eastern. But our editor, Chris, will tell you He lives in Saskatchewan, and they don't have daylight savings time.

And it's so bizarre because my wife's family lives in Saskatchewan, and you have to, like, do the mental math of, oh, they're 1 hour off of us for half the year and they're 2 hours off the other half year. So now you'll be able to do just square bracket Asia Tokyo or I'm not sure what the Toronto time zone stamp is, but there's a whole list of Standards in there. And then you can also specify which calendar is being used as well,

which is kinda wild. Yeah. And daylight savings time is, you know, something that is changing.

You know, Arizona had no daylight savings time.

Let's see. Colorado is moving to no daylight savings time. I don't know if everybody is or what, but,

Yeah. It's about to get funky. Do you know how many time zones there are in the world, Scott? 24? No. Actually so When I launch a course, I message my entire slack room and it does a little, hey, heads up. You're messaging 50,000 people in, says 27 time zones, and that's because there's 27. There's so somewhere in Canada, I think it's like St. John's or something Wes they're half an hour off.

Randy, our producer, is nodding away another Canadian podcast. Good.

Apparently, there's 38 time zones in the world because some of them are off 35:30 to 45 minutes.

That crazy. I did not I did not know that that existed.

Stuff. That is great. That's a lot of fun because all this stuff is so much fun when you're working JavaScript. Time zones are the most painful thing to work with in programming. You know what? When I say give me a date, I just want a date. I don't necessarily want time all the time. I don't always want a time zone. I just want the same date we're all talking about. We're all talking about the same date here. Yep. It's March 1, 1986. That's my birthday. We're all talking about that same date. I don't care What the time zone is in Denver for that date. But yeah. Well, you know what is interesting here is something we've talked about quite a bit on this show is the temporal API. And we often say that the temporal API fixes the JavaScript date API.

How exactly does it fix the JavaScript date API.

And one of the big things that it does is it does make working with time zones more sane, But also makes working with just dates, more sane. Wes you don't necessarily have to worry about date time all the way. So there's a a plain year month, a plain month day, a plain date, Okay. And then a plain time.

Plain date, not including a time zone, but a instant does include a time zone. Right? A or a zoned date time does include a time zone as well.

And so that's one of the ways at least makes working with this stuff a little bit more sane because one of the things that I've struggled with is, hey. When I save a date to the database, I don't necessarily always want it to be Attached to a particular time zone. Yeah. So what do you do? You then gotta take the step to turn everything to UTC.

And then every time you access it, You gotta make sure you access it with the UTC methods, which that is a bug waiting to happen. Right? Yeah. So, like, If you if you want to avoid any of that hassle, the temporal API will luckily be there to help us. It'll give us better parsing.

Another thing that everybody hates about the JavaScript date API is the fact that anytime you do anything, it mutates the date, Which is a giant pain mutating the date. So this is gonna give us immutable methods on the date APIs.

The Plain date Node is going to be super handy. So for an example, if I tell you my birthday is February 18 And you want to put that on your calendar. I might give you a UTC date stamp of Yes.

The CSS, 2nd February 18.

But then you try to display that in a different time Node. It will tell you my birthday is on February 17 or February 94. Yeah. Right? And You might not. And those are the kind of bugs that you don't necessarily catch because it works on my machine, you know, especially once you're in browser land.

That's

very, very tricky. You wanna know you wanna hear a a further and this is more of a conceptual problem with date, but also a a problem nonetheless. I was working on, at one point, a booking app. It was a startup I worked at. It was a booking app, and it was kind of like, what if Instagram had booking? Right? You could look at tattoos And then, oh, here, I wanna book with this person because I've seen their portfolio. Right? And one of the questions we had that we never got Good answer for it because the company folded before we got the answer to this problem Wes if if if I am traveling to Michigan, and I want to book an appointment in Denver for noon Denver time.

What's the default? What do you show them by default? Yeah. You show them the Denver time by default, or do you show them the eastern time? Do you show them both times? And, you know, Kron, the calendar, has done a really nice job kind of solving this where they'll put the columns. Since I work with a bunch of eastern time folks, I have, it has 2 columns on my calendar Wes it shows the date typically, kind of like code row numbers in your code text editor. And so it'll show me 2 PM, 4 PM, 3 PM, 5 PM. So I can always see which one is which, and I can tell which one is my default one. It's nice. But in a like a booking situation where you're just trying to list, Here's the available appointments. It's 8 o'clock or whatever.

You're gonna have to confuse the heck out of the user trying to make them select the time zone and stuff like that. Yeah. Do not envy

People that work on those types of things, those booking or the once when we flew to San Francisco, my Google Calendar changed to San Francisco, but, like, it never changed back.

So people kept booking me at, like, like, 6:30 at night for talks. And I'm just like, Hey. Like, I'm I'm I'm not here. I'm like, oh, sorry. Your your calendar said you were in San Francisco, so you gotta watch those things. Yep.

Well, you know, that's really all we have to say about time. This has just been a little bit of time pontification hour our 27 minutes here, and that's okay. I wanna know what kind of crazy bugs you've hit with time.

You know, specifically, I would love to get some of these for our spooky stories, But we're a long ways off from October.

So, honestly, I just wanna hear what kind of situations people have hit with time or the just the date API in general in JavaScript.

What kind of major hiccups have you hit, and what kind of solutions did you find, or are you still looking for correct solutions? What types of things are you looking forward to in the temporal API? Hit us up at syntax f m on any of the socials or even just reach out to us in our potluck form on the syntax.fm website.

And we would love to read out some time stuff. Might be cool to do a follow-up in a potluck later on. Duty. Alright. Thanks for tuning in. Catch you later.

Peace. Head on over to syntax.fm for a full archive of all of our shows. Jump. And don't forget to subscribe in your podcast player or drop a review if you like this show.