Use The Platform!

Let's do it.

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.

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.

Doing good, man. How are you doing?

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

behind the scenes there, I waited, for the precise one second in which Wes was going to take a sip From his drink to ask you a question. Yeah.

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

I feel like, you know, since school has started with Landon in his kindergarten, I've been, like, in a total 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 and, like, meeting a ton of other dads because everybody everybody's in the same situation. You know, very well may be their 1st kid in kindergarten, and All the parents 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 If we go to that park after dinner, 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 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.

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

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.

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

And so they are like Courtney's just like, yeah. You you've really,

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,

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 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 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, 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, you see that the actual thing that you're putting a layer in front of is really not that, re intense or complex or whatever. But with the web, we have all of these APIs and these different utilities for us baked into the platform rid that are oftentimes way less scary. And if you choose to dive into them and choose to explore those APIs, 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 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, we have something called search parameters inside of the URL, and these things can be worked with using URL read. Search params in the browser.

And a search parameter essentially is a parameter that is Often referred to as a query string of the URL. So query string, you you'd notice these things as a question mark.

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.

And that is essentially a search parameter in your query string. Right? And so with these things, we can store all sorts of application state or information about the current status of our application 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.

We've chosen to do our filtering in this way. So, the filtering in our site now works rid via URL search params, 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 and copies and pastes that links and send it to someone else, they'll have the exact same filters it. Being triggered or toggled.

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,

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, 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, like we all do, 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 API came about, Wes,

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

or just history as a global. And you have, methods like back, rid. Which, you know, is the back button forward go.

So, I mean, this thing exists. You push state, replace state.

It's It's one of those APIs that almost 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 the the hash version of it. Yeah. And rid. Those those people out there think that web dev is too hard right now. I remember that being a giant pain.

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, which the the URL state, any of that with the history API without needing rid. Any fancy

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.

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.

Yes. There's very, very nice use cases like you said for formatting lists or pluralization, those types of things that rid 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, 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, in in HTML, you have the form element. Rid. The form element is often there to do something, whether that is to send 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 because we do have all types of different, rid form data is but form data basically, 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, 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.

But you can get a specific one. Git get all has keys set values 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 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 rid. Actions API West just gives you the form data, and it's it's all very form data heavy. I love it. So it's it's one of these things where we're getting back to, 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,

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

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

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.

Yeah. And, you know, it's so funny. We talk about this all the time of, 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 in 2022 is that we have really wonderful DOM APIs.

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 web components, you do need to familiarize yourself with the DOM APIs because anytime you're creating anything in rid. HTML essentially out of nothing in JavaScript. You need to spend some time with these Dom APIs, 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 really getting comfortable rid Creating HTML with the DOM APIs 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 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.

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,