Use The Platform!

Welcome to Syntax, the podcast that teaches you to use the platform. Ready. Form. We're gonna be talking all about what does that mean today, how do you build or or rid title is you might not need a framework for this episode.

Maybe maybe we'll dip over to that one if, the numbers aren't aren't working out for us. Well, it's changes the clickbait. Rid. Who are sponsored today by 3 awesome companies. Prismic is a, out of the box headless CMS that allows you to create websites rid With their slices API sanity, they are a platform for structured content that rid. How's remarkable digital experiences and LogRocket modern front end monitoring and product analytics? Look about all of them partway through the episode. My name is Wes Bos. I'm a developer from Canada. With me, as always, is Scott Cholinski. How are you doing today, Scott? Hey.

I'm doing good. Doing good. I I was just

I'm doing good. We, just headed up to our cottage for the weekend, which was really nice. We hadn't been up there in a probably about a month about a month, month and a half because, we had just moved into this new place. So it was nice to just kinda get away. It's rid. It's like fall up there already. All the leaves are changing. It's, like, really cold, and we have all kinds of chores to do to sort of get the place ready for winter, how to blow rid. Blow out the sprinklers and, fog the boats, which is Fog the boats. Spraying oil into the Into the jugs of the boat so they don't rust and all kinds of fun stuff. But I very much enjoy that stuff, so it was it was a good great weekend. What about you? Yeah. I've been doing so many

We, we have, like, a had a social at our kids' school as well. It's rid. Same idea. You go to meet all the other parents and whatnot, and, they asked me to run the popcorn machine. And I was like, you couldn't have picked a better a person you could have. Yeah. Probably. Honestly, like, being the person that like, I was yelling, like, my my famous popcorn, you know, and, like, rid Oh, yeah. And all the kids, and my kids were

rid Really gained the system here into branding yourself as the best. I I always tell them, like, because I'm the, like, the coolest dad in the world, and they're I think they're starting to believe it. I know.

It works.

Alright. So use the platform as something that gets read chanted over and over again, and you might not know, what does that mean? So, in this episode, we're gonna sort of go into that, is that The web are the primitives, the browser, our server environments, CSS, HTML.

It is beautiful when you can use those APIs and those standards directly without necessarily having to Go and reach for a framework. Or I think what's becoming more popular now is that a lot of times a lot of these frameworks are just using, a lot of the basics that are built into the browsers and you go, oh, these frameworks are a lot simpler than I thought. I don't have to relearn how to do any of this stuff because it's all just Stuff that I already understand. So that's what we're gonna get on into it,

Yeah. It's the URL is the OG state management library out there, rid. Because it literally just lives in the URL, and you can actually put quite a bit of information into the URL.

URL search params is such a good API because you can also use it to push data to the URL if you create a rid. A new URL search param object with the constructor.

You can append stuff to it. I didn't even realize this. So rid. When you create a new URL search param object, they have a bunch of methods. Things like has or if you can loop over it for each. You can check if something's in there. You can get the ready. You can get the values and get all the entries, but there's also a sort. I did not know that was a sort. What does sort do? You can literally just sort the URL search params by, I I assuming, like, any other sort that there would be. Rid so by default, it will be alphabetical, but you could probably do it yourself. Kinda makes sense just like it were to be an array, but it's it's right on there. So URL search for AMS is a very, very handy. And I a lot of times I see people reaching for libraries.

I'm here to tell you, you You don't need a library to do this. Just is part of the browser. It's well supported in literally every browser out there. Here, let's look at the one that never has it. Safari,

in your career? Oh, Do you remember? Yeah. It was it was part of HTML 5, wasn't it? Like, probably what? 10 10 years ago? Yeah. It's in Chrome 1. Like, rid. Wow.

Yeah. Yeah. I know. That's probably older than like, I was a developer when Chrome came to be.

Rid. But wow. That's that's amazing that it was there, and I much more got into the push state API.

Rid. Oh, yeah. I remember. Okay. Okay. I remember where it was because at the time, we had, Hashbang. Do you remember the Hashbang? Yes. Rid So Oh, you gotcha.

You were only able to change the URL if it was after the hash because the hash was used for linking internally within a page. So people abuse that by putting hash, and then they would just put a bang after it so that it looked Cool.

And then they would put all the information past that. And I built websites that were, like, single page websites that would rid. Animates different URLs, and it would just constantly be checking, the URL. And then when when push state in the history API came, It turned out that you are able to change the URL to literally anything without having to reload the page.

And people think, oh, yeah, That's just part of, like, React Router or something like that, but, that is a fundamental piece of the web that you can use in anything.

And if you take a look at, rack router, they are just using that under the hood. Literally, all of All of the routers are used every window. Yeah. Yeah. That's the only way to do it. Yeah. Client side routing is using the history API here, And this is available on the window. So window dot history

library or layer on top of it, certainly. The other thing about the hash is that you couldn't get access to the hash On the server? Yes. That was not something that was available to you via the request URL.

So you had to ready. You pretty much had to do it all client side or load a client side and then and then fetch it back to the server once you do did know what it was client side, which is rid Not something we're all of that unfamiliar with these days, but it was a tricky thing to do. Totally. Next one we have here is the internationalization rid. API. And this one is fantastic for formatting lots of things. So the big one is if you have a bunch of, rid. A money that you wanna format in a certain certain currency, you can pass it some properties that it is currency, and it will format it with rid Correct commas and and whatnot. And it will also if you don't pass at a locale, it will detect detect.

You know, like, in some places in the world, they use periods where you should use a comma and vice versa. It will detect that and and do it for you. Even in In, in Canada, French, Canadian French money is formatted differently than Canadian English, which is kinda interesting. Is it? Yeah. Yeah. So if you if you go and, like, do I have some tweets on this. I'll try to link them up. But if you rid. Try to format, like, $1,000, and you say, like, format it in Canadian dollars, but ready. For the locale of French or you can, like, you know, like, you can say, like, it's formatted in Canadian dollars but formatted for German readers. Right? Like, there's There's 2 things at play there, and that is so easy with the international internationalization.

I'm just gonna call it the Intl API. We have an entire ready. Show. Yeah. On the INTL API. It's great for formatting numbers as well, and formatting lists.

Rid. So if you want to do something, like, very simple, like, I would like peaches, pears, and apples. Rid. Where do you put the commas in there? Right? And how do you do that in in literally every language that's out there? Or at the very basic, how do you do it in English? The intl API is fantastic for formatting lists like that without you having to join it with a comma and then taking the last one and putting and or or in there. It just does it all for you. Fantastic.

rid. You wanna turn a DOM, like a form element, into an object of pure data. The form data is exactly what you need for that.

Ready. Repo is that form data doesn't take a generic.

So if you run form data to entries ready. In TypeScript, it would just tell you it just gives you an iterable and has has no clue. And that's really frustrating because rid. I am expecting a, like, a person, of a form. And that person has a first name, a last name, an age, and an ID. Rid. Right? And if I were to call form data on that, I would expect to be able to say, I want a form data of a person and just pass it a generic of a type and then it would format that. And that is not a thing.

I suggested that over a year ago already.

And, it's got it's it's like one of my most popular things. So hopefully, that will be added to TypeScript very soon because That is a frustration of mine. So how are people doing it right now? They're just using casting? Is that like Yeah. You can you can use casting or, ready. I'm trying to think. I have a bunch of examples in my TypeScript course where we basically just take the form, and take the data and And and manipulate it. Right? We're not sending it off to an API, but we're just using the data in the application.

So

using any as a smell, but I think there are some situations where you have to. The solution is either rid. As unknown as person. So, basically, you cast it to unknown and then you cast it into a person. And the reason you can't directly cast it into a person is because There's no overlap between the form data type and the person type. And it's I don't know. So you have to pretty much strip it with as unknown And then into as a person.

And then although there was some stuff released on TypeScript the other day, curious if that would help here. Rid. The other one is a type guard, which is basically an if statement.

If this has this property, then you can use that property.

Rid. That's a pain in the butt too. Neither are good. It's a pain in the butt. Yeah. Let's talk about one of our sponsors, which is Prismic. Prismic is a, headless CMS that out the other end will give you either a GraphQL API or a REST API.

And Prismic is really cool because basically, ready. You sign up, and probably within a couple minutes, you can already start building your, building your website. Rid. You can log in, create all your data types with their GUI.

You can have relational content. All they have tons of different types of fields, rid and then you can create these things called slices, which are sort of like reusable sections of your website.

And then what you put the slices together, and that makes a big pizza. Or in Prisma case, you can make an entire website.

So you, the developer, it's not it's kind of like a website builder, but you, the developer, basically ingest all of these rid. Reusable sections, and then you use React or Svelte or Vue or whatever. They have stars for everything to model out the website. It's of the best of both worlds. Check it out. Prismic. Io forward slash syntax. Thank you, Prismic, for sponsoring. Sick. Alright.

Let's talk about the Dom API.

This is this is a big one, and we've had this one for quite a while now.

But if you want to read. Work with the dom. You wanna work with elements that are on the page, whether that is selecting Buttons listening for clicks on them if you wanna traverse things. Sometimes when you, like, a pretty good example is if you have a modal box rid. That's popped up and you have a button that says close.

Sometimes what I will do is I will say, when you click the close button, rid. Traverse up the DOM tree until you find the closest model and then close that specific model. That's that's a really good example of, rid. Having to use the different DOM API DOM manipulation, changing things, storing data. The DOM API in the browser is rid. Fantastic. I don't I think people you spend a lot of time in frameworks. You don't necessarily get an appreciation for it, rid. But it is extremely powerful and a great way to build and manage a website.

It's it's fantastic. I personally use it a lot. Anytime I'm whipping up a quick thing and I don't wanna necessarily go for a framework, I feel very comfortable in it. And as well as my read. My beginner JavaScript, my JavaScript 30 course, those are all in, just I I I just call it vanilla JavaScript, rid. But, like, that's what it's using under the hood is that we're just creating elements and listening for clicks. And I guess one more thing, I have this a little later on, is but the ability to rid create and fire custom events.

So, if you are building a game and you want to know when a specific thing happens, rid like, whack a mole is something we built.

If your mole pops out of a Hole. You have a mole in a hole, and the mole is gonna pop out of a hole.

You could fire an event when that thing pops, And that event could have information about what hole it popped up open in, when it popped up, when it plans to go down, read. And being able to listen just like you're listening for a click or a touch or a play on a rid. On a audio element, you could just create your own events and fire them off,