Formatting dates and times in JavaScript just got WAY easier!

Let's talk date and time formatting, shall we? Good. I'm going to make a custom element that neatly wraps a date/time value and makes it relative to the current time!
The specifics of the code can be found here! github.com/pau...
More info on Intl.RelativeTimeFormat at MDN (developer.mozi...) and the v8 blog (v8.dev/feature...)

[@delulu6969]

You're seriously underrated. I don't mind if you make a couple of click-bait YT-algo friendly videos just to gain more visibility. You know, like 'Working at FAANG sucks', 'Google Dev reacts....' or 'You're doing it wrong...' etc. It's shallow but at least you can get the attention of the noob devs and level us up. I'm binge-watching all of your videos rn after finishing a marathon on HTTP 203 after I first stumbled upon Google IO shorts I think. Thank you for your great content! I hope you don't abandon this channel.TT

[@adriandinca5682]

"I know it exists" always makes chuckle, you deserve a like just for these moments alone. Love your work! :D

[@aerotwist]

Well, sometimes the tech deserves the world's biggest eyeroll

[@mohamedhussainsh7913]

Thank you Paul For the video....I just watched previous two videos in reverse order...Nice to have heads up for me in typescript....Getting positive vibes from you...

[@aerotwist]

Welcome!

[@feijldskfhe6891]

Where are you man. Missing you and your videos

[@YinonOved]

The difference with innerText and textContent is that innerText gets the text only while textContent will grab style or script tags and their content

[@aerotwist]

Oh yah I forget the details of those two regularly

[@YinonOved]

:slotted() is valid css and can be used for styling slots. Parentheses can be used to further define the selector of a slot

[@aerotwist]

Yes but often I find it more useful to surround the slot and deal with its parent.

[@tomasb3191]

just found your channel, great content

[@ToddSpatafore]

Probably a dumb question but why do you use id’s instead of classes for slotted-value and output. What happens when there’s more than one of these in the DOM?

[@aerotwist]

Not a dumb question. IDs are resolved at the shadow DOM level, not globally. So each shadow root could contain an id of "foo" and that would be just fine.

[@abrahamsanchez1205]

I really love you make these videos with all the mistakes you make or the things you don't remember well, that allow me to see that even big leaguers programmers have the same issues than me lol...

[@aerotwist]

It's why I do it. None of us need to feel bad about that kind of stuff.

[@avilde]

Nice and clean code in Github repo ). Pleasant to look at!

[@aerotwist]

I try

[@zuhairtaha4888]

This channel is on the way to be one of the most famous channels for developers

[@adamthedev]

Great videos, mate. Hope you make some more soon!

[@mutebg]

Thanks for the video Paul. I didn't know about slotchange event, and I really needed it few weeks ago :) later is better than never

[@aerotwist]

Little big things

[@TheMagnificientMan]

Niiiiice ! We need this !!! Hoping it will be released in all major browsers soon

[@aerotwist]

The repo code has a fallback ;)

[@SiddharthRay1]

thanks for covering most important aspect in JavaScript 🙏🙏

[@dassurma]

Did you just call ISO 8601 _not_ human readable??!

[@aerotwist]

I guess?

[@RobertCaka]

I rly like to watch it! Waiting for the next one :)

[@ljuglampa]

Where did you go?

[@wilkins7407]

Paul: "I know it exists"
Narrator: "But it did not exist"

[@aerotwist]

😂 "Paul had missed the #"

[@bahatijustin]

Well done Paul!

[@SIRCAM73]

Subscribed!

[@juristr]

I love your vids. I'm doing recordings for Egghead as well for some years now. Just a quick question. What music do you use in the background? Is it some free playlist? Love it! thx & sorry for the "meta-question" 😉

[@aerotwist]

It's from Epidemic Sound :)

[@juristr]

@@aerotwist cool, gonna check it out, thx :)

[@snoopy8870]

what's your vs code theme paul?

[@eugenenovikov671]

спасибо

[@applePrincess]

a little bit off topic, but why you did customElements.define in a different file? I mean just one line doesn't make any difference, but it can be sparse. any particular reasons?

[@aerotwist]

I recently changed to doing this because of it being a side-effect. Depending on how you bundle sometimes you can find that you end up attempting to register the class multiple times, which fails. Also, as I say, I prefer keeping the import / export clean and avoiding side-effects.

[@deps..]

Paul senpai, new video pleaaaase 😢

[@VipulAnand751]

Where are you Paul?

[@supriyantapoddar6129]

Could you please make videos on basic js ts things with the examples? It will be good for us. Your current videos are too overwhelming. Thank you!

[@3ombieautopilot]

How are you? What’s up?

[@piotrekwitkowski]

Dear Paul, could you explain the ! after .querySelector('#relative-value') ? What does it do, how does it work? By the way, thanks for the great video!

[@aerotwist]

It's just a shorthand for TypeScript to tell it that you won't be expecting (and therefore dealing with) a null value

[@piotrekwitkowski]

Thanks!

[@vojtechsebo4119]

Hi Paul, why don't you use litelement? Thx for vid btw ;)

[@aerotwist]

I could do. Just didn't today. Not everyone is familiar with it, I guess...

[@rickyu1978]

When you say "the platform" has taken a little bit of a boost do you mean moment.js , or do you mean their is a new API called "relative time format" --
Just read this is part of the Internationalization API which is quite well supported even back to IE 11! now ejecting date-fns !

[@aerotwist]

I do. The web platform. The link is in the description.

[@robertkaminski1781]

why, why, why ! why did you stop recording.... :(

[@superchillh3o]

Woah, TIL. www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator.

[@TunaIlgaz]

[@jobybejoy8219]

👨🏼‍💻