Speaker set the time Milo Full time and they tested it.

They exposed the internet.

Speaker prioritizes stability over new features.

• web component
• independent format
• intestine
• blog posts
• first-class support

Welcome back.

Welcome back.

Welcome back, your dreams were your ticket, welcome back, same old place, but those dreams everything, and they turned around.

We got they need you here where we need to the spot.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Hey, welcome back to another the second break session of this second cipher of the day and week.

Alright.

Hope everyone is getting At least partially what they need done.

I need to remember to actually click the create a highlight video button because I forgot to do that last time and didn't have a video.

So it's cool either way because the link will show the like the graphic image that I created for the whole until it not work.

So either one is cool.

So, alright.

Okay, like I said, hopefully everyone is doing well.

Remember if you want to join the chat room, just click drawing The Jet Room and you be able to chat and ask questions.

Cool.

So now like I said, this brick session.

We're going to go over something that a co-worker of mine Tanya on one of these past streams was asking about and is about as far as like time and handling time.

Let us see in JavaScript because python has a thing that's kind of built in now.

JavaScript also, the thing that's built in, except that, it's Very dense to get through.

So let us get started.

Share my screen.

I don't think I am going to need any sound.

So let us do this.

Cool, so hopefully you can see that.

All right now.

So this is the website, right?

And let us say, you go to videos.

See all these different timestamps.

These are all web component that I created just use over and over again, inputted, with a certain time stamp and it will display the data based on your local time zone.

So it's a whole thing and some of the things I used to get it working where the date API, and so, JavaScript objects.

So this is from mdn Mozilla.

Upper Networks.

Yeah, so this is the date like API and or objects, and they represent a single moment in time in a particular platform, independent format.

And so, I only ever seen where sometimes, in code.

If you do code like in JavaScript you select date dot.

Now, that will give you the exact time when that was called in the Unix timestamp, code thing.

And that's From 19 hero.

So yeah, so epic and time stamps.

And so when you do like date dot, now, that's the Unix Epoch.

The number of seconds elapsed that have the number of seconds that have elapsed since midnight on January 1st, 1970 UTC and as a whole nother thing time zones and having to deal with all that.

So there's a lot of stuff you can do with this pretty cool and but like I said, it's kind of dense and there's a lot of stuff to try and figure out with it.

And that's just like the date.

Now, if you want to do like some International stuff and have it shows up in the way of, that person's, local machine.

For example, some countries go month date year, where some due date month year kind of thing.

Right?

And so that brings into this whole International thing here.

And so is internationalization API and there's a whole lot of stuff there.

So I am saying, take date-time format plural rules relative time bit, so it gets kind of dense.

So there was an and this is what I couldn't remember before, but they're like different libraries that were used to help with this.

So, so like the big one was moment and Jas.

A moment JS.com and I believe it's still being used all over like even like a new project, but they say on their website.

They can see right here says considering using moment.js moment in your project.

There may be better all better Modern alternatives for more details and recommendations.

Please see the project status in the docks.

So all right.

So this kind of before we do that just kind of go through.

So you like download moment.js or you could also get it.

Through like a CDN content delivery Network.

And so this is moment.js by itself.

And this is what the different locales to be able to show in different like time zones and countries, like how it is, how date and time is represented in locally.

So it's a bigger file, and so they had all these different ways of you be able to install it.

And so, this is like the format of how it works.

So you do like moment and then format how you wanted to be, and they would spit that out.

You that way.

So like for today, like it shows today, and now you can do all those things, cool, right?

Then relative time.

So then you'd put in a date, the, the actual format that it's in.

So that it would understand like are the first four numbers are the year kind of thing, and then it would do like 10 years ago.

So anyhow, it was like very semantics so you'd say like from now.

So it calculates that the time you just put in from the time that the thing runs.

And it would give you like in, like, playing wording the relative time which was because to do that in the Raw JavaScript as a lot.

So it's pretty cool.

Same thing for all this stuff here and then you get like the calendar time because Sometimes because the time zones when you try to call one thing from one time and if the is like the we call it like the like Daylight Savings Time Changes, it would be lost by like an hour kind of thing.

So it takes all that into consideration as well.

So it's pretty cool.

And then like I said, you can get the days.

So like one day from tomorrow, so moment at this time, one day.

Give me the, the like calendar time.

I guess as it says, they're so like in days.

So it understands like, all right.

One.

And you wanted from, now that means it's tomorrow kind of thing.

So, it's pretty cool.

So it's like, yeah, give me one day.

So programmatically can see how this would help and makes things a lot easier.

But the thing is, is that oh, then here's all the different.

With the locales.

These are things that are loaded when you did that second one.

So if you go to that project status, it will say that.

Hey, moment Jas has been successfully used in millions of projects, and we are happy to have contributed to making date and time better on the web.

So.

But as of last year, September 20, 20 moment gets over 12 million downloads per week.

Wow.

However, moment was built for the previous era of the JavaScript ecosystem.

The modern web looks much different.

These days moment has involved someone over the years when it has essentially the same design as it did when it was created in 2011.

So they have had this flight 10 years, which is kind of amazing given.

How many projects depend on it?

We choose to Priority stability over new features.

So what they're saying is like Hey, we're going to try to keep make sure cause since so many projects rely on this.

We want to make sure that it's stable for those projects instead of creating new features because the browser's have been catching up over those like 10 years to be able to make things work.

So they're not going to work on new features.

Its kind of keep it stable.

And so they said, To do so.

They said here, that he as a modern web browsers and nodejs exposed internet.

Silly intestine, internationalisation in time zone support via the int L internationalisation API, which we looked at earlier to do.

And then, so they have different libraries that they're kind of like, recommending like, hey, you could try to do this, and they have different links and saying, like to kind of decide whether or not you need to know in jail?

Yes, because there are some things We're just like with jQuery.

A lot of the things that are in jQuery are in the browser's now.

So depending on your use case, you may not need jQuery.

So is the same kind of thing.

As a browser gets more and more powerful and capable.

A lot of the libraries that were needed to kind of smooth, rough edges, kind of like, aren't really needed anymore for some for most tasks.

So yeah, so that's pretty cool.

So the same.

We now generally consider moment to be a legacy project and maintenance mode is not dead, but is indeed done.

So they're like, yeah, so cool.

So then top so you can check that out, more information.

All right.

So now they mentioned Luxor or luxan, luxan, l ux o n.

So, that's this here.

And so, it's just another Library.

It's like a smaller and I like, it says powerful modern and friendly wrapper for JavaScript dates and times.

So, It's like a smaller version of moment.

And it's I think it's using more of the modern.

Like I said, apis that weren't around when moment came out and was needed.

So yeah, cool.

So then lot of stuff here.

Cool.

We can check it out.

So you'd like daytime.

Now you get set the time zone like week past kind of thing.

So — one week and end of the day and so yeah, so it's Like semantically pretty straightforward on how it goes.

So I think I opened up the demo.

That open the demo.

Yeah.

So here are the different things.

So like date time now will give you it the daytime in this format, which is like the basic format might need to make this bigger.

Yeah, Okay, cool.

So.

Yes.

Okay, then you see like now if you want to convert it to UTC.

So the date time that now gives you your local time.

Whereas the what you call it the date time.

Now to UTC will give you read the Grinch mean like time zone 0 1 there and then you can set the different time zones and stuff here.

So it makes a little bit easier.

It's like I said, it's a wrapper around the date time and internationalization API is cool.

Yeah, so I can see here.

So just like with the moment.

Yes, it helps make the relative Time stuff a little bit better.

So you see Times right now, plus a day and I will tell you tomorrow.

That's pretty cool.

So and then yesterday next month and that's pretending to give you like in French, so you can set the Locale.

That's pretty cool.

All right, so that's luxan.

So that's another library in that in for JavaScript to be able to deal with date and time.

This one here.

This is another one called Date.

FNS.

I have heard pretty good things about this one, how it's like really like a small library and it's quick.

So this is another one.

You can check out.

So here is kind of like how it works how its handling to do like a new date.

You have this format that you're pulling in from the FNS and it will like spit out what you need.

So it's kind of like a different way of writing it but still pretty cool.

Yeah.

So you see like the same relative that's the thing like being able to do relative time.

So like last Friday, that's kind of difficult and like three days ago that gets kind of hairy when you're doing with date and times because there's so many things because I see Get your time zones.

If it's like a leap year if it's daylight savings time, some places, don't.

So do celebrate, not celebrate, but recognize daylight savings, you know, I mean, so yeah, so that's another one.

And now, this is the temporal API and it is to try and like bring into the browser.

The same sort of things that these previous libraries were bringing along.

Right?

So, like I said, the browser gets more, and more powerful, and more, and more capable, because it seems like, oh, there's an issue with whole day and time that these libraries so many libraries need to be done.

So once it gets to that sort of level, then the committee is like, all right, maybe we need to make this thing because he saw from woman JS.

The said millions of projects rely on.

It so now like hey, let us just big that into the browser.

So yeah, so the temporal API and that's the GitHub for it so you can check out the code and then here's the actual like documentation for it.

I'ma go a little bit over but it's going to kind of go over.

I am almost done.

So like I said, is here date has been a long-standing pain point in ecmascript JavaScript.

This is a proposal for temporal global object that acts as a top-level.

Old namespace, like math.

So you ever done like math dot random, so you will be able to do like that.

So it's right there in the window object.

So you can just call it from anywhere.

Basically.

Yeah.

That brings a modern date / time API to ecmascript JavaScript when I say ecmascript is basically JavaScript like, modern, JavaScript language, and now, for detailed, look at some of the problems with date and motivations, so they have like blog posts.

You can check that out.

Let us see.

But yeah, just you look up temporal API and see this would be a good use case to be able to make that related links or for the archive.

So this is motivation for me to get that done here for until it died work.

So I will probably work on that this week or something.

So, yeah, so these are some of the problems providing easy to use, apis for date and time computation.

So like I said like tomorrow last week three days.

All those sorts of things are first-class support for all time zones, including DST.

So, Daylight Savings Time, safe, arithmetic, arithmetic.

Like I said, because it gets hairy with the times of the day light saving stuff dealing.

With only with object representing fixed dates and times.

So you don't have to worry about like more is just objects that you have to deal with.

So nothing more than that, then.

Yes, o parsing is strictly specified.

String format.

So it's like a standard basically, and then, so non Gregorian calendars.

I am not even really sure.

That means I think that maybe because certain calendars are on a different time like thing, I think so.

Yeah, like I said, there's a whole lot to dealing with to date and time.

Yeah, and so cool.

So then they have like the documentation stuff, which is cool.

So like basic is like get, you know, the exact time since midnight, January 1st 1970.

So it's temporal dot now, dot instant, whereas, before it was like with the date is like date dot now.

So I guess is equivalent to that.

And then now you're like the time zone directly, which is pretty cool.

And then, Oh, then you get the current date time and wall clock time in the system time zone and specified calendar.

So based on the person's look where you're like, it's running and it's pretty cool.

Yeah.

Okay.

So now what I thought was cool that they have this cookbook section and it's to help you get started and learn the ins and outs.

So, like, basically examples like real world examples, things that you may want to get done.

And so that's pretty cool.

So it kind of goes through all the different stuff like sorting.

So if you have like a whole bunch of time stamps, you be able to sort them.

Here's like, getting the current time.

Like we said before, cool, the Unix timestamp.

Now what I thought was cool and there's this thing, like temporals types and Legacy.

Dayton just a lot.

So yeah, so like you see, like this is the previous way of getting like the date.

Object.

So you put in the time thing and now, so to get it, there's a converter.

It looks like so you can use the old.

Here's a to temporal instant.

So to converting it and then saying that hey, yes, they are the same pretty much.

So yeah, it's pretty cool.

What else?

Oh now this is why like here so calendar input element.

So like with the calendar input just like a Put datepicker kind of thing.

And so, you know because the input elements is like super ope like overpowered by just by selecting the type, you get like 10 different kinds of inputs color input date, input, text input was other inputs like time, date time.

It's amazing.

So yeah, so shout-out to the input elements.

All right, so then I can do this.

Let us say so you can only choose.

So they have it set up that you can't go forward, only back.

So you can use the temporal, to be able to set boundaries on the input date time element.

Pretty cool.

Converting between types.

Cool.

Where is the?

There was one where is like, arithmetic?

Here's a sorting, the arithmetic one was pretty cool.

Time zone conversions, which is always a been kind of like difficult preserving exact time because things like kind of shift sometimes daily occurrence.

Oh, yeah, this daily occurrence.

I think, what is this one?

It was.

Oh, the exact time scored corresponding to a daily occurrence.

Starting at a particular date.

So you can say like every day at whatever time and I think it will pop out like those date objects that correspond to what you're looking for.

So like I want to be able to have the next 10 days at 10 PM And it would give you all that.

So it's pretty cool.

So yeah, you see right here.

So it says like they want From 8 AM And the Third on, I think that's month.

So, March 10th 2017 and it's like, all right.

Give me the American, West Coast time Los Angeles time.

And did you start the time and the Zone?

Do they say so yeah.

So this is like a daily meeting at 8:00 AM That's yeah, California time.

Well, it gives it to buy the days.

I wonder if there's a way to set like how many Actually, as you can see here that you're like, alright, so I guess you could click a button or what have you and so it would be like start at the 10th because you asked to start at the 10th and then the time zone.

So eight I guess is the UTC.

Yeah, and so that gives you the time 0 times of again, time zones is tricky.

So just have to check that out.

And so it will always see then you keep going.

So this is, the thing is, is that your code may not actually take this in consideration because you see here, and they chose Mars, because we in America, we have our time zone change there.

So you see here.

So, 1600 hours, 310, 311 1600 hours, then the times.

And changes.

So it goes back an hour because I know it was it fall back spring forward.

So we actually go forward an hour.

So we lose an hour.

So you see goes from 1600 to 1500.

And so it just does that automatically.

That's pretty cool.

Then yeah, so UTC offset those in arithmetic 100.

And you can like, like a graph and stuff.

You can plot it.

It's pretty cool.

All right, there's that is after this.

I think.

Yeah, arithmetic.

Here we go.

So now you can enter a future date, right?

If I do behind, I didn't try this.

I tried last week.

I will see you gave me — 7 days.

So let us try.

Next weekend a day.

Some.

Okay, so yeah, eight days, so it's able to connect by Wonder.

They have like a semantic one where you could set like tomorrow last week.

Oh, here we go.

There is a duration now in past future zones.

But so the thing is like this is still being discussed so you can see my back.

I am still kind of scrolling through it.

I kind of went over it quickly, but Scroll to the top.

It's like you see said, this is a stage.

Three proposal is experimental, do not try to do.

Try it and Report bugs, but don't use it in production.

So that's where, like stage 3 is that because things will probably change.

Well, it may change.

So, it's good.

Is this getting there?

But don't use in production yet because it may change.

And so yeah, so that's where we're at.

Now.

As far as with JavaScript dates and time it is a lot and I am glad to see you.

Kind of baked into the browser.

All right, so that's going to be it.

Let me set this timer.

I am going to get y'all back to work.

Cool.

So yeah, if you have any questions or anything, feel free to hit me up like I am going to start playing around with a little bit more because like I said, I deal with time a lot especially like with planning events and things I wanted like for example this thing I set a for until it that works.

I set the time Milo Full time.

And then I do some calculations so that somebody wherever they're looking at that same page, it will the web component takes into consideration that person's time zone and their local Locale and it will format everything the date and time to a way that they vocally would know, and it would be in their time zone.

Like at the time, would be their time, not my time when I am kind of thing.

So it was a lot of stuff.

And oh, and just trying to get it to work and testing it and stuff.

It was, but I think it works and it seems I ask people in different time zones to check it out and it was in their time.

So it was cool.

So yeah.

All right, so I got this time thing here.

Alright, so I am going to be out of here.

Get you all back to work.

Once again, thanks for hanging out.

The time that I went over here.

I will add more on the final work session.

So we got one more break session, 15.

It's after the hour.

So if there's anything that you wanted to show or anything to like a show and tell that would be the time.

Alright, so cool.

Thank you all.

Once again for hanging out and hopefully maybe you all learned something new about JavaScript date and time, and how like, what I like about the web is that it listens, I guess to the needs of like the people using it.

So they're like, hey, a lot of people want to know about date and time less.

You know, big that into the browser, so that it's available and just, you know, make it a web standard and so, it's pretty cool.

So, like people will create their own Solutions because, you know, they have their own needs and if that needs get bigger and more widespread than the browsers like oh, all right, y'all needed that cool.

Here you go kind of thing, and then they work together.

So I am pretty sure maybe they spoke with people from the different libraries like hey, what have you seen kind of thing?

And not just, they weren't Just like, all right.

Here you go.

I feel like that's why they have like the committee's, and they're talking about things and discussing things and it's kind of amazing what goes on behind the scenes with the web and JavaScript in general?

So, yeah, so cool.

Thank you all again for hanging out.

I am going to start this screen share, and we're going to be out of here.

So again, thank you before I do that.

This I need to remember to click create a highlight video because I did not do that last time and I didn't have So word.

Alright again, thank you all for hanging out.

We will see 15 minutes after the hour.

Feel free.

If you have any questions or anything, you know, free to use a website.

However, you see.

All right, cool.

As long as it's legal.

Alright?

Then, thank you all.

I do.