Use The Platform!

Like, probably what? 10 10 years ago? Yeah. It's in Chrome 1. Like, rid. Wow.

push state in the history API came, There's no overlap between

hash, and then they would just put a bang after it so that it looked Cool.

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, URL search params is such a good The intl API is fantastic If your mole pops out of a

You were only able to change the URL

Yeah. It was it was part of HTML 5, wasn't it? I feel very comfortable in it. And as well as my read. My beginner JavaScript, my JavaScript 30 course, those are all in,

by putting you can pass it for

It turned out that you are able to change the URL to literally anything without having to reload the page.

if it was after the hash because the hash was used for linking internally within a page. So people abuse that So

And people think, oh, yeah, That's just part of, like, React Router or something like that, but, In, in Canada, French,

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

Rid. Oh, yeah. I remember. Okay. Okay. I remember where it was because at the time, we had, rid. Having to use the different DOM API DOM manipulation,

And then they would put all the information

Buttons listening for clicks on them if you wanna traverse things. Sometimes when you, for in your career? Oh, Do you remember? Ready. Repo is that form data doesn't take a generic.

build and manage a website.

changing things, storing data. The DOM API Hashbang. Do you remember the Hashbang? Yes. Rid So Oh, you gotcha.

Yeah. And, you know, it's so funny. We talk about this all the time of, like we all do,

rid. Traverse up the DOM tree until you find the closest model Let's talk about the Dom API.

Sometimes what I will do is I will say, when you click the close button, and then close that specific model. That's that's a really good example of,

and we've had this one for quite a while now.

rid that are oftentimes

re intense or complex or whatever. But with the web, we have all of these

maybe more complex or scarier than it actually is because rid. You have this layer in front, and this layer is nice and easy and, the the hash version of it. Yeah. And

search parameters inside of the URL, and these things can be worked with using URL read. Search params in the browser.

rid. You might not pick up a library or a framework or install something or put a layer in front of you and, you know, what you're actually trying to do. So it could just be easier

APIs and these different utilities for us baked into the platform data. Typically, it's what it's doing. It's collecting and sending data. Right? And so when you're collecting and sending data, there needs to be some sort of a transport for that. And that's kind of where form data comes into play here you see that the actual thing that you're putting a layer in front of is really not that, Rid. We can access. We can traverse, like you said, or manipulate the DOM. We can do all those things. You can create whole elements. And the moment that you get into

a a layer in front of you and and something else As you kind of just assume that the thing behind the layer is oftentimes

even at the end of the day. And it never hurts to understand how things work. That's for sure. So I think one of the first things we wanted to talk a little bit about was the URL. Rid. And with the URL,

And a search parameter

way less scary. And if you choose to dive into them and choose to explore those APIs, rid Creating And so they are like

in 2022 accommodates you in all sorts of ways. And you have this this nice little shine layer in front of the big scary thing behind it. And sometimes if you pull back that layer,

is that we have really wonderful DOM APIs.

grab anything. I I just remember back in the day having the jQuery thing where you find something and then manipulated and you just wished it would been that easy in the browser. And, you know, it's easy in the browser today. Rid. Find something, access it, modify it, whatever.

anytime you're creating anything in rid. HTML essentially out of nothing in JavaScript. You need to spend some time with these Dom APIs,

really getting comfortable

You know, putting jQuery in the browser or whatever. But the Yeah. The Dom API is really the the reason, The number one reason why you do not need jQuery

web components, you do need to familiarize yourself with the DOM APIs because

HTML

of a person and just pass it a generic of a type and then it would format that. And that is not a thing.

headless CMS that out the other end will give you either a GraphQL Yes. That was not something that was available to you via the request URL.

to be able to say, I want a form data

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

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.

and has has no clue. And that's really frustrating because rid. But it is extremely powerful and a great way to

the form data type and you say, like, format it in Canadian dollars, but ready. For the locale of French or or

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, 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 read. And being able to listen just like you're listening for a click or a touch or a play on a

rid. I am expecting basically just take the form,

API or a REST API.

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, much more got into the push state API.

and the person type. And it's I don't know. So you have to pretty much strip it with as unknown

And Prismic is really cool because basically, ready. You sign up, and probably within a couple minutes, you can already start building your,

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 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, it was a tricky thing to do. Totally. Next one we have here is the internationalization they are a

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.

So you had to ready. You pretty much had to do it all client side or load a client side and then

which the the URL state, any of that with the history API without needing all the key value pairs, which in turn, your data comes in as strings. Right? Because there's no data. Everything's kind of like a a string into this.

On the server? Canadian French money is formatted differently than

lots of things. So the big one is if you have a bunch of, You can have relational content. All they have tons of different types of fields,

formatting

rid. Any fancy

rid. API. And this one is fantastic 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.

get access to the hash

And if you take a look at, when it plans to go down,

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 the URL. And then when when 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.

in anything.

that is a fundamental piece of rack router,

methods like back, rid. Which, you know, is the back button forward go.

the web that you can use over a year ago already.

I remember, like, routers, Your server side router would get annoyed. And if you had a server side routing, you had to, really worry about that. But the history API has been in here for a while, And you can control the browser,

I don't wanna say nobody, but if you're using any of these front end frameworks, hardly anybody is using this API directly, but you're all using it under the hood. I remember back when, like you said, with the hash stuff, I remember having to like, physically having to set a of property on many of these client side routers to say use the history API instead of rid. I am I'm I think what I'm doing is just casting it right now. Or The reason I ask is because so many people say, like, never ever cast. Casting is like a spell Or smell or

rid. Those those people out there think that web dev is too hard right now. I remember that being a giant pain.

Often referred to as a query string of the URL. So query string, you you'd notice these things as a question mark.

that is It's behind the scenes there, I waited, You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Ready. Here is Scott Talinski and Wes Bos.

application state rid. Actions API West just gives you the form data, the filtering in our site now works It's one of those APIs that almost

And so with these things, we can store all sorts of

a search parameter

We've chosen to do our filtering in this way. So,

and copies and pastes that links and send it to someone else, they'll have the exact same filters it. Being triggered or toggled.

and you're able to essentially have a,

a value inside of the URL. And now that filter value can be shared. So if somebody sets up their own filters a ton of other dads because everybody You know, browser APIs that exist, and we're teaching new developers how to use these APIs. So that way, they don't need the framework to do it. Yeah. If you want to,

And then after the so you have your URL in the URL bar, then you have a question mark, and then you'll simply have a variable equals value.

rid via URL search params,

And that is essentially allows you to send data with your form. So the rid. Form data basically is a transport for your form data, and you can access that with methods inside of the form data. So you can rid. Do things like entries to get,

That then becomes shareable because it's in the URL. And if you copy and paste that and send it to someone else, it ends up being in the URL. In fact, in the new version of level up tutorials.

Yeah. It's the URL is the OG state management library out there, So you, the developer, it's not it's kind of like a website

And I think that's an important note is that you don't have to be working with multiple languages to use the internationalization

API.

I would like It is beautiful But if you want to

Yes. There's Let's do it.

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? and formatting lists.

pears, and apples. Rid. Where do you put the commas And then although there was some stuff released on TypeScript the other day, of your website.

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 I suggested that It works.

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, push data to the URL if you create a rid. A new URL search param object with the constructor.

Alright. So to model out the website. It's of the best of both worlds. Check it out. Prismic. Io

It's a dad man. And, like, I dropped dropped her off at school. She's like, dad bad.

ecstatic that their dad was the guy behind the popcorn machine. Love that kind of stuff. I think you and I rid understand, like, child branding in a certain way. Because, like, my my wife says no. I've now manipulated our children because I've come up with a rid A nickname. My daughter was, like, not wanting to spend a lot of time with me compared to mom, so I came up with the dad man nickname. So I'm the dad man. And now, like, my my daughter is just like, I want dad man, and, like, they say dad man 247.

Courtney's just like, yeah. You you've really, with the DOM APIs

You can literally just sort the URL search params

API came about, Wes,

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,

you probably wanna, Yeah. You'll probably wanna learn a little bit about URL search params, at least, how to set, how to get how to get all those type of thing, and how to access that stuff. Next step, oh, I think we wanted to talk about was more more kind of URL based stuff, but with push state in the history API. So I don't where where were you when the push state

this, 10. Like, we've had it for years years years, so no need to do that. Yeah. You are all search params is A really nice thing to at least have in your tool belt to know that, everybody's in the same situation. You know, very well may be their 1st kid in kindergarten, and All the parents we have something called

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.

and you want to know when a specific thing happens, rid like, 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.

rid. On a audio element, you could just create your own events and fire them off, our server environments,

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

if you are building a game 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, You could fire an event when that thing pops, 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.

And that event could have information about what hole it popped up open in, when it popped up,

whack a mole is something we built.

So, 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? 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.

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, pizza. Or in Prisma curious if that would help here. Rid. The other one is a type guard, which is basically an if statement.

Rid. So if you want to do something, like, very simple, like, rid. A money that you wanna format in a certain certain currency, CSS, HTML.

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 This is this is a big one, API because you can also use it to 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, 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 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 selecting builder, Rid. But wow. That's that's amazing that it was there, and I

like, $1,000, 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.

Canadian English, which is kinda interesting. Is it? Yeah. Yeah. So if you fog the boats, which is Fog the boats. Spraying oil into the rid and then you can create these things called slices, which are sort of like reusable sections read. Work with the dom. You wanna work with elements that are on the page, whether that is

to format, I'm doing good. Doing good. I I was just

if you go and, like, do I have some tweets on this. I'll try to link them up. But if you rid. Try

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,

forward slash syntax. Thank you, Prismic, for sponsoring. Sick. Alright.

basically ingest all of these rid. Reusable sections, and then you use React or Svelte or Vue or whatever. They have stars for everything rid. Because it literally just lives in the URL, and you can actually put quite a bit of information into the URL.

case, you can make an entire website.

but you, the developer,

And then what you put the slices together, and that makes a big And then into as a person.

building your website. Rid. You can log in, create all your data types with their GUI.

are just trying to meet people. So Yeah. It feels like very funny, especially because we just had a new park open up that's right by our house and right by the school. So

myself. I I personally need some cool down time after that with socializing. And let me tell you, it's it's been a lot rid socializing for me, but it's good. It's been real.

and, like, meeting in your query string. Right? this thing is available for you to use. And you'll see just about most of, The big dog's using it. So if you wanna run with the big dogs,

I'm doing good. We, just headed up to our cottage for the weekend, which

dad parent rid. Mode. And, like, I I've probably had to, like, do small talk with, like, a 100 more dads than I'm used to. So I've been, like, ultrasocial lately

If we go to that park after dinner,

Doing good, man. How are you doing?

I feel like, you know, since school has started with Landon in his kindergarten, essentially is a parameter

We, ready. In TypeScript, it would just tell you it just gives you an iterable

was really nice. We hadn't been up there in a probably about a month about a month, month and a half because, So if you run form data to entries

it's a number of, like, how many kids from his actual class will be at the park that day. It's like, Is it is it gonna be 2 or 3? Sometimes it's 4 or 5. It doesn't it does not matter what day. So it's amazing to know that you're gonna go down there and have to to schmooze with a bunch of parents, which is great because, you know, we need we need new friends out here. And, it's been awesome to meet a lot of people in very similar life situations and stuff. So, yeah, it's rid. I I I get

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, when you can use those APIs and those standards directly without necessarily having to Go and reach for a framework. Or ready. I'm trying to think. I have a bunch of examples in my TypeScript course where we If this has this property, then you can use that property.

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 library or layer on top of it, certainly. The other thing about the hash is that you couldn't rid title is you might not need a framework for this episode.

I've been, like, in a total

one of these things where we're getting back to, building with the basics that we already have. We wanna kick it off there, Scott. Yeah. And just to add on to that really quick, one thing that happens when you use a library or you put So, I mean, this thing exists. You push state, replace state.

and it's it's all very form data heavy. I love it. So it's it's

values for the precise one second in which Wes was going to take a sip From his drink to ask you a question. Yeah.

UI frameworks and JavaScript full stack frameworks rid that continue to use these browser tools more and more Yeah. The more you're gonna have to learn about things like form data. The the new SvelteKit

But you can get a specific one. Git get all has keys set

if that's the types of things you are here for. You can grab any of that from your form data. And as we see a new collection of

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,

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.

out of the box headless CMS that allows you to create websites rid With their slices API sanity,

you know, multimedia or something like that. But form data is the API that basically provides a way rid to get your key value pairs from your forms. Right? So, or information about the current status of our application

lists or pluralization, and then inserting into the DOM and many bit manipulating it. But it it's so awesome that we have these tools in the DOM today to be able to quickly

because we do have all types of different, rid form data is but form data basically, and there's all sorts of different things that you can do with them. In fact, rid. I did a whole course on on dev on browser APIs called exploring browser APIs. And I would say so much of the course was spent on

or numbers that make it really appealing just for those of you out there doing straight up one language. The next one is going to be the form data rid. API. Now form data is is oddly enough something not something that I had worked with much until very recently. You know, the only time I was working in form data was rid. Sending, very, very nice use cases like you said for formatting or just history as a global. And you have,

there to do something, whether that is to send

in in HTML, you have the form element. Rid. The form element is often

those types of things that rid

that's what we're gonna get on into it,

how do you build platform for structured content that rid. How's remarkable digital experiences and LogRocket peaches, I think what's becoming more popular now is that a lot of times a lot of these frameworks are just using,