Formatting Is So Easy With The Intl JavaScript API

Рет қаралды 41,518

Күн бұрын

Formatting text in JS seems easy at first, but as soon as you start to deal with any complex formatting such as numbers, or dates it becomes very difficult. On top of that if you want to translate your application between multiple languages you are looking at even more complexity which is why I love the Intl API. This JS API makes working with formatting and translations so easy and it is one of my favorite JavaScript APIs.
📚 Materials/References:
Intl MDN Documentation: developer.mozilla.org/en-US/d...
Relative Time Format Article: blog.webdevsimplified.com/202...
NumberFormat Video: • How To Easily Format C...
DateTimeFormat Video: • How To Easily Format D...
RelativeTimeFormat Video: • Intl.RelativeTimeForma...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:49 - Intl Docs
01:25 - Date Time Format
03:36 - Relative Time Format
05:26 - Number Format
07:56 - Plural Rules
#Intl #WDS #Internationalization

Пікірлер: 46

@robertholtz Жыл бұрын

OMG, I wrote a rather complex code block that has been live for about 2 years now that I was quite proud of until watching this video and reaching the realization that I could’ve done it much more simply using RelativeTimeFormat. I’m conflicted now on just leaving that code alone (since it has been running trouble-free for such a long time now) or going back to refactor. Here I’ve been contented, thinking that routine was fully optimized. Thanks, Kyle, for putting the spotlight on Intl. This is truly eye-opening and will definitely affect my future projects.

@WebDevSimplified Жыл бұрын

Honestly, I would just leave it as is unless you need to update the code or add to it. Most likely the refactor would be pretty quick, though, so you could do it if you want to.

@robertholtz Жыл бұрын

@@WebDevSimplified Funny you should say that. I opened up my source all motivated to refactor but stopped myself at the last minute. Over the years, part of how I know I continue to progress as a developer is my newest code almost always looks better to me than my older code. But, every so often (stating it as humbly as possible), I look back and think, "Wow, that's good work. I did a good job." It's a rare but satisfying feeling to look at your past efforts and appreciate the quality of your logic and the elegance of your implementation. This particular code is especially solid, works universally, has no special dependencies, and has caused zero problems for all its users so, in the end, I decided to leave it be. I'm glad your advice on the matter turned out to be along the same lines. A refactor would probably be fairly quick but I think it's a good discipline to let your code go once you know it to be stable. If your code doesn't embarrass you when you look back on it with new eyes, it's probably optimal, at least in the practical real-world sense. That's my personal view on the matter for whatever it's worth. Nevertheless, I made myself an abstraction so I can get sharp on the ins and outs of Intl for future projects. And I'm still immensely grateful to you for shedding light on this gem. I am sure I'm not alone for having overlooked all the useful capabilities hiding in Intl under the false assumption that it only pertained to situations requiring a lot of user localization. No question this will definitely be part of my arsenal going forward. So, thank you again, Kyle. Please keep up the great work. I appreciate you immensely and often get great value and insights from your videos. Take pride in knowing you are a force for good in this world. Cheers!

@elhaambasheerch7058 Жыл бұрын

Such a great video Kyle ! You really are making web development simple for all of us.

@RichReflectionz Жыл бұрын

This is awesome, as a new frontend dev, I can’t wait to utilise this

@Sarev_ Жыл бұрын

Really interesting video. I had no idea something like this exists.

@yukiarimo Жыл бұрын

Thanks, saved a lot of time!

@ozzyfromspace Жыл бұрын

I had a "jaw moment" learning this from you, Kyle. Thanks for the video, the hype about Intl was well deserved. I've solved most of the problems you brought up with libraries like date-fns, or wacky one-time code. Now an Intl fan boy lol. Also, it occurred to me that if you can apply a bunch of formatters to dates specifically, it's probably best to keep them in standard ISO format. I tend to be pretty inconsistent about this, but will basically always store times as such going forward. For anyone with knowledge, is conversion from a date string to date object considered a "slow" operation in javascript?

@mohammedsaber6782 Жыл бұрын

Good job I'm using it to convert from gregorian to Islamic dates and vice versa.

@Microphunktv-jb3kj Жыл бұрын

is this some new web api or.. all those moment.js or date.fns type libs are based on this ?

@smartjefreycoca5425 Жыл бұрын

thanks.. this helps me a lot specially the number format

@kaustavroy6542 Жыл бұрын

Awesome video as always

@rasul7702 4 ай бұрын

Omg, when I watched this video I sat and smiled with happiness. Thank you!!!

@suyashsrivastava3671 Жыл бұрын

Recently used it in a project , really fun to use .

@harmez7 8 ай бұрын

yeah it tickles

@theisoj Жыл бұрын

Thanks Kyle as always 👍

@sadamali6691 Жыл бұрын

Fantastic lesson thank you for your sharing this helpful lesson. Greating you from Somalia 🇸🇴

@brijeshdave Жыл бұрын

Hey kyle ! Thats an awesome content you have shared as like others you create often. Please create some real word enterprise web application tutorial if you can.

@petarkolev6928 Жыл бұрын

This is so useful! I will have soon such thing to implement and instead of installing 3rd party lib this will do the trick perfect! Love it 🍻

@adampielach4942 Жыл бұрын

Good to know. I wonder if Intl will have more convenient utilities that will enable us to replace libraries such as date-fns for basic formatting and dates comparisons, for example.

@anonymously-rex-cole Жыл бұрын

bruh i was just looking for this in the past 20 mins an then you upload this. 🤭😄🤯

@victory_lucky Жыл бұрын

This is cool, I mostly love the NumberFormat

@kislaykumarsatyarthi6045 Жыл бұрын

I love your teaching. wanted you to make a video on nodeJs architecture fully covered. it would be so awesome if you can make a video on it.

@risingrave3549 Жыл бұрын

It’s so cool!

@soniablanche5672 Жыл бұрын

Subtle WebCrypto is my favorite :^)

@27sosite73 7 ай бұрын

ty mr.Kyle

@nomadshiba Жыл бұрын

im really happy that browsers started to include common things built-in so user doesnt need to download it

@ialkusudi6328 Жыл бұрын

Hi Kyle, I have a question, is it still relevant to learn React Native or should I choose Flutter for mobile application development?

@pioSko Жыл бұрын

WOw.. why didn't I know this? I think I should read the documentation more often

@anhqui19822011 Жыл бұрын

Not related to this video. But I'd like to say Congrats for your new house. 👏

@GaneshSingh1 Жыл бұрын

What is the best way to cobvert UTC date to CET or IST time by checking user location

@deepitasaha195 Жыл бұрын

Hi dear... Can you explain when and how to use eval? Please ...

@OgyXD Жыл бұрын

Best channel for web development

@damiloladolor8067 Жыл бұрын

does the currency formatter work for crypto currencies like USDT, MATIC etc

@getsetalk Жыл бұрын

How to convert timestamp to human readable time in js

@LePhenixGD Жыл бұрын

Allow to clarify a little bit more on how you can use the PluralRules subclass The PluralRules subclass of the Intl API in JavaScript helps developers with pluralization, which is choosing the right word form based on the grammar rules of a language. Let's take Kyle's example about, in French, the word "mouse" ("souris") does not change form depending on the quantity, but lets say the user wants the website to be in English: const pluralRule = new Intl.PluralRules("en"); function getFormedAmountOfMice(quantity) { const formedQuantity = pluralRule.select(quantity); switch (formedQuantity) { case 'one': return `${quantity} mouse`; case 'other': return `${quantity} mice`; } } The function returns a string that displays the correct form of the word based on the plural form selected by the pluralRule object