TypeScript, Branded Types, Streaming vs Polling + More

for 1,000,000 of dollars.

allows you to say yes or no. Man, little snitch has gotten a glow up. I haven't been on this website in a little bit, but, man, new version of little snitch looking I'm a fan. Who knows when I'll have to buy another 1 because 3 is a Scott. But big fan.

So I don't know what the solution is here. It's the same thing with node modules other than it we even went through a lot of the

we're not gonna implement such aggressive things into it. That's that's why, like, everyone likes to hate on Apple, but they have you never run into performance issues?

And And then the benefit of that is you also get, like, Apple Pay and and Google Wallet and Yeah. Which AliPay but Stripe and PayPal often will have to put up their own dialogue And every time I had an issue, I would jump into their Discord, and they'd be like, well, you could instead of doing it on the client, you could do it on the server first, and they just break my entire flow. Yeah. Yeah. Or or both Stripe and PayPal. I'm using a dialogue, because when you're in in Europe, they have this, like, obnoxious.

selling your own ads. They wanna be in in charge, and Apple's the worst. And, yes, I agree. There's I'm sure there's there's cases there, but I feel like, And the also, the problem with Stripe that I was having is that there's so many different ways it's like a charging block that has USB a and USB c, but then the top of it is an Apple Watch charger. And you just lay the submissions from people who work at banks and and how QA works with them, streaming responses versus polling, and most people probably don't need that. But if you're getting into really, really heavy applications, it sure is nice to have it. Yeah. You mean, like, partial prerendering JS just, like, certain templates Yarn par partially prerendered? Is that what it does? Yeah. Yeah. Like, not not page based. Based. Yeah. Almost always my gripe with every framework

the progressive web app

that's how if if if we're annoyed by this stuff, there's no chance that regular users are gonna want to use this type of stuff. Regular users Yeah. Unfortunately, don't care as much as we do, the Electron version of an app because I just want the icon, and I want it to be on my desktop. But charge. It depends on on where your watch is at. Couple percent, Question from James from London, UK. I love the show. I'm looking at adding a checkout flow to my site, and I want to know what kinds of things to be aware of when going in. I listened to episode 6. Oh, that was a long time ago, accepting money on the Internet. It was super interesting to hear the differences between Stripe, PayPal, and Braintree.

But if there's too many pop ups, then it's it's so annoying, right, especially to regular users.

give action to those TypeScript thing. Now that's that's where, like, fishing and whatever comes in Wes you're trying to trick people.

yeah, there's something about

makes me almost always check. Yeah. You can have access to all my photos because it is I I almost always wanna be optimistic with it. And by, like, a weekend, I'm like, I've had it with this shit. You know? It's like

I have several apps that will respond to keyboard input globally. Like, you have to go into your macOS settings and give it full access my Waterpik. I charge the, or where you say as. Often, I'll find myself looking into libraries.

But the the web, especially a URL, the URL bar is a major and finally, storing access cookies and authentication in a cookie, or should that go in the server database? Really good questions. If you got a question yourself, go to syntax.fm.

yeah. Yeah. That's it's also, like So I ended up going with you server render everything static, and then you opt in to pieces of the application that are are going to be client rendered, and and they're gonna be and When you when you are associating a label dynamic. So I was on a panel about this at the conference last week, and I came up with the stupid idea of people were asking, like, how do I transition from

it's it's kinda scary. So I agree. Yeah.

and you have to have a bit of a bit of faith at some point that these people are not doing awful stuff, supports PayPal as a checkout option, but only in the UK.

it that stuff kills me because I'm like, unless there JS a major, major vulnerability, and and all the annoying stuff, but I freaking love it. I have the Ultra just a session ID. But, yeah, I'm I'm getting into more different things now. So yeah. Maybe we should do it do a whole show on it. I think the only, like, scary thing about having the refresh token in a cookie alongside your session cookie is that if someone does get access

like, technically, I understand.

your screen recording or whatever, it's actually kind of hard. Right? You gotta find out where it is, and you gotta turn it on and restart the application.

Wes is that I don't wanna do data loading at a page level Oh my god. Because my data is is associated with a component.

And

anybody who's pirated anything at their life would have seen Little Snitch. But Little Snitch is basically an application that lets you know any request going out from any application.

because the web is sandboxed by default. Right? Mhmm. Like, often,

can I just can you just show me my photos, and I'll I'll click them? I don't wanna have to, like, select them, and then you add them to my list of allowed photos, and then I have to select them again.

and then, like, Much appreciated. Yeah. So there's several ways that this can

And by default, when you turn it on, it, like, pops up a dialogue any single time somebody's trying to phone home. So if an application is trying to phone home for whatever reason, little snitch will pop up and say, hey. This app is trying to connect to this server. Do you, like, approve of this message?

And that's why I I wish that

Maybe I'm just paranoid, but I've gotten to the point where I download almost nothing to my computer.

not install it, that's probably a decent idea as Wes. As long as, you know, I like, what what am I give it? Like, I I am ignoring security concerns myself, so that way I can, click 1 button instead of click 2 buttons to do something. So it's like, looking, And there's a handful of proposed ones. I posted a link to, Open UI's blog post on invokers, their explainer. It's well worth your read.

Yeah. I I think this is is smart of you to to vet your stuff. I I think we're all probably being a little unnecessarily reckless,

I used to be the type who would crawl all sorts of these lists to fill my hard drive with fun and interesting useful tools, but I've become much more concerned about security and privacy lately, especially with the advent of AI. That is smart of you, Ryan. I no longer feel that it's worth it to download an app which might be kind of cool but also might be sending my keystrokes, passwords, bank account info, and other Scott confidential information to their servers without my knowledge.

Oh. The the latest the latest series 10 or whatever Apple Watch. I didn't go with the Ultra just because

and, like, I've always had, like, a USB in there, and I'll plug them in. You only have to charge it, like, once every couple weeks. So it's just you plug it in and then whatever.

and it's on all time.

with errors. Because I don't I especially if I'm converting something to TypeScript or, I validated or tested it pretty Yarn. I don't I don't mind shipping TypeScript errors in that regard.

I usually take it off right before I get in the shower, and then I go, I don't wanna go run and get the the route of Stripe Stripe Elements, and they said they are trying to automate a lot more of their tests because they find JS there's no, like, arguments. Right? So, like, there's not 1 for your iPhone, there's all these, like, weird use cases where it's probably not worth streaming that data when it's so low stakes. Right? Chat application, AI response. Yeah. That's probably a good use case for streaming WebSockets.

I'm gonna shamelessly plug Syntax on YouTube once again. I feel like we're always shamelessly plugging this. But, hey, the Syntax YouTube has been popping off lately,

compilation

Being like, you don't need I don't need another thing to give me notifications after you've sent the response. Actually, I saw

I'll try it for a second and then remove the the ignore or whatever. So I pretty much don't turn anything off. If anything, I turn off the ability to block Good to be the combing the hair. Yeah. It's hilarious.

I'm going to sick pick a

But I've always thought, I wish I could charge my watch in the bathroom because I I don't know. I use them every now and then, but they can be nice for record IDs like you said. But I I would say probably not worth it unless you're explicitly having a problem that that would fix.

TypeScript is there to help you. And if you are turning things off,

and, of things It's and it stays in. Like, it has need to both move to dialogue Bos, and, I've had an issue open on both of theirs with for 6 months. And every couple weeks, some poor soul comes in and goes really, really have to Node, I know better than this and not

Beautiful. Alright. Thanks, everybody, for tuning in. Catch you later. Peace.

f m. Again, we're releasing all of these episodes plus way more,

If you're a man,

And they kind of explain how it works Wes it's really just they're they're using, click event So you might put QA lover. Shout out to, It is good. That looks awesome. Yeah. I would use that for sure.

but it lasts forever. The sensor,

you can do, like, a, like, a cast YouTube was a little bit better because often I'll just download the

the neutral and and hot, and it'll spark. So I've I've, like, written this many times with video and audio elements where I'll just have, like, a data dash They had an SSL certificate together buttons and dialogue elements as well as a number of others with Node. Js. So that whole word comes up quite a bit when we're on the show JS declarative.

they last forever. So I, like, hardly run out of these at all. And,

something? So, obviously, because there's there's lots of like, I think this is a huge vouch for the web

So, yeah, mine mine Wes, like man, mine was 1 of the first ones. It's, like, series 4, series 3, so I've had it forever. Big upgrade then. Yeah. It feels like a completely different class of device. It's, like, completely Mhmm. There are people who will comment on any TikTok video, like, you can't fix all the TypeScript errors. Are you are you dumb? And it's just like,

the Apple Watch over top of the charging block, and it's really nice because it's nice and compact. It just stays in the the plug at all times,

it lasts forever.

Node know, it stinks long term. No one's made any comments.

love being able to just quickly glance and, like, is there actually somebody at the door, or is it just a a leaf that blew in the wind slightly? mostly,

that Wes a concern of mine.

and we do a ton of great stuff over there. So ESLint youtube.comforward/at

And I'm a big fan of it. I was thinking, like, I wish that there was something like this. And then I went out there and thought, oh, somebody has made this.

And I love that it gives me all my sleep stats, and

you know, all natural ingredients and stuff, but it actually works. And the 1 thing that I really like about this compared to a lot of other,

So I've now I've now tried 3 of the different scents. And I have to say,

plugs are here Wes, you know, it'll, like, kind of come out, and there's no fuse in any of our stuff. So, like, you can literally just drop something across the

or it's It's gonna kill you. Gonna kill you. Right? Yeah. And so, Yeah. I I think the only way you can really know what exactly is going in and out of an app with ease is by using Little Snitch, which is an application that,

the everybody these apps that JS is kinda scary. Right? Like, especially with a lot of my I I talk a lot about all these keyboard, and to do things.

get all crumbly on me. Maybe I'll just throw a Scott. But, yeah, it's I hear you. That's a hard world. You've probably tried a whole bunch of them.

and it'll, give you a little boosty boost for the day.

the code is running or working or something Mhmm. Before trying to solve, like, a a like a a meaningless TypeScript error because sometimes there's some, like, odd ones here and there. I'm like, this works fine. But let me just let me just actually get this going so that I can and and try this for a second in browser.

0 TypeScript errors for this code to compile. Right? To block the compile with errors,

dip into it a little bit more. But at a certain point,

yeah, I was so annoyed by this, and I I went looking and I found, course, on Reddit because, you know, you'll find recommendations for anything on Reddit.

Node and manly.

I'll occasionally turn them off while I'm debugging just to check to make sure

Yeah. III didn't tell you. I got I got natural deodorants

Oh, man. You can pry my Old Spice is sending an email to that user that here is your actual process. And the performance issue that you could run into here is that It works on some serverless platforms where you can still do work

you sometimes it comes immediately. Sometimes it comes, like, 20 seconds later. That's because it's they're they're processing their queue, and maybe they can't possibly keep up for it. So what do I do? I do I do the poor man's queue, which I'll explain has just bit me a couple weeks ago. So the poor man's queue is fire and forget, meaning that Yeah. I will simply just fire off the send email function. I will not await it, but I will a function, and it will keep running even after you've sent the the response to your user.

sometimes to

Totally. Word.

saying, you need As somebody who ships everything with SvelteKit, I'm gonna say no. There are no limitations. No. There's none. I you know what? I honestly don't even know because, what, it can do static sites well. It can do node based sites well. It can, you know, deploy to to workers. It can deploy to serverless. It can do all that very well.

in the bathroom, I have to have some sort of charging block because I have to charge, sending an email could be another 500 milliseconds or or whatever for them to sort of sit around

I don't know, like, bad.

I mean, like, well, how are they doing it here in this library? And and you look deep, deep, deep, deep, and then it's just a It's gas. Yeah. It's just it's just

it's like a a small company. They make it by hand.

No. It's important to, Node, data loading is tied to routes. I would really prefer if it wasn't tied to routes. 2, the islands architecture, I would prefer to be able to do partial rehydration and islands and all those things,

80 pack from Costco from my cold dead hands. I've tried so many of these, my beard trimmer, my toothbrush, I don't know. It's it's it it holds up. That's all I can say. Maybe, like like, what about the, like, partial hydration or, like, the server islands point? Because with SvelteKit, you're kinda going all in, and the whole website needs to be rehydrated.

I I don't know if I had to replace it. Does it crumble and get all over your shirts like all the other stuff I've tried?

is that, like,

I have. And that's why I've that I'm I'm I'm stoked that I've landed on 1. And and I don't wanna say this is not like some. I I didn't just get these. I've actually been using this for, like, 6, 7 months now. So, pain down the line even if it is giving you clarity.

No. It's a little thicker. You kinda have to do get used to like, you know, you don't cake it on. It's just, like, 1 pass and you're good. Yeah. It's called the black stuff. Sorry. I did not say that. The black stuff Scott. And, again, the sensor are all really great. It's a small company. You feel good about buying from them. And, again, it's more expensive than normal deodorant, So not HTTPS.

like, way more deeper dives. CJ Reynolds is doing some crazy good stuff. I'm releasing or have released at this point a Svelte kit or a Svelte 5 course. So if you want an introduction to Svelte 5, maybe you've never used Svelte at all, this is for you because I'm not assuming that you've ever used Svelte in this course. And it's enough to get you going, cover the basics, get you up and moving, and, a little toss in some little if you use React stuff here and there. But for the most part, just get you up and running is is really the point. So check it out. Youtube.comforward/atsyntaxfm.

my wife and I that I do not stink.

I found this stuff which is like this So you can use the polyfill if you wanna try that out. Nice and neat. So next 1 from Ryan. Hey, guys. You recently released a 2 parter sharing a number of apps and tools that you use. Some of them were pretty cool on the list. I'm going to download none of them.

Series 9 Ultra,

you might like this. There's also soaps and stuff like this, and and it's a small company, so you feel nice for supporting it. Now I don't I think it's expensive compared to most deodorants, but I wanna stress that

to leave them, leave a, TS ignore in there, or

the

well, I mean, there's sometimes there are situations where either whatever casting is required or, you know, maybe even the vendor types are iffy or all sorts of stuff. So, yeah, the sometimes you need a little extra help, and sometimes you can turn them off for a second. But just be aware of what you're turning off and on and test thoroughly and Beautiful.

I find that I bring my phone out less now that I have it on. Because, like, if if your phone buzzes, you just go, that's nothing. You know? And especially for, like, security cameras, out

Like, they're they're either deodorant either, but it doesn't work

Yes. Exactly. So Yeah. I I don't have a ton of use cases for it. It's more getting into, like, the validation realm

It's a type for your type.

Yeah. And to be clear for the audience, the the brand So if you have those 3 things inside of your cookie being stored,

So in my opinion, it's always good to learn these things and then just have them in your noggin so that when the problem comes around, you go,

I Do do you want me to ex take a stab at explaining it? You take a stab at explaining it because I don't necessarily

generic is something you make Vercel, so we've included that in the in the show notes what that looks like. It's just a TypeScript with a a couple of generics in there. But, you know yeah. To me, it just feels like extra work for what could be, syntax

the tuple, it will not just say number number. It will say latitude, longitude. And in that case, I'm branding a number as the syntax ones. I don't think I've turned any off. Almost always, I'm able

And for me, I think, oh, that that's that's okay. But I've I've often mixed up lat long with long lat because some mapping Some interesting which is you'll have to, like, input your banking password or or send a text message and and put the code in. So when that happens,

the problem that this is trying to solve

lessons. Scott talked about branding. Okay. We need to do that. Yeah. Next question we have here from Ruby Dev, long time listener, first time caller. Wes, you've recently mentioned never using a queue in applications. So it's got me thinking, how do you handle sending email in your projects? If you're using SMTP,

2 pull, is simply going to be an array with number number. Right? Mhmm.

email and sending that to a background worker rather than tying up the main process is just a convention.

I'm gonna say before you even get to it, I don't see the the need for this. But Mhmm. Alright. So at a very basic level, let's say you have a function that takes in a an ID, you know, Yeah. People are not just making stuff up because they they want to. It's these are problems that they've actually run into.

Mhmm.

Totally. So a a great use case for that is to simply brand it, and have have a name on there. Because when you're filling out I think that would be also nice to have, like, a they could just keep refreshing

so that it will be

user ID. It's also great for documentation where your function takes in an ID, but then you brand it as a user ID. Like, oh, okay. I know I have to pass in a user ID and not some other type of ID in this case. So the idea with branding is that you can sort of take a

a lat long

I I think it might be different for maybe library authors than for,

jumping around. So I'm interested, kind of, like, a wide flange base on it so that when you put the heavy watch on it, it doesn't, like, fall out because I sometimes find myself stuck in a hole whether it's like a a dependency doesn't have really good types or whatever,

enough

and extend it,

if if your TypeScript representing your data is not specific is with many of these things. So little snitch if you want to,

When you are defining a 2 pull in TypeScript,

The performance tracking tools are 1 of my favorite things in the entire world because when we first launched the syntax site, man, there were just some little things here and there that we did not see. And then when you start to get the scores in Yeah.

Yeah. This particular route is slow, then you could say, oh, let me let me dive into why that might be. Oh, here's why. We're loading a giant transcript on everybody even if they're not visiting the transcript page. Let's fix that. Right? So head on over to century.ioforward/syntax.

Sign up and get 2 months for free. Use the coupon code at tasty treat. Alright. Now let's get into the details. You should go chasing waterfalls, and you should fix them with Scentree. Oh, yeah.

is declarative.

of have you ever you know, when an app access it's like, can I have access to all your photos? Yeah. And I go, no. And it's like, okay. Well, here's this pain in the ass. Like, wait. Now you have to opt in to every photo. And she's like, and then I can have a tuple with that spot in it. So, essentially, it's still just a number, but it has a type of longitude.

So you what you can think about when you think about invokers is an attribute to trigger some sort of an event.

Like I said, I talked about this at Denver TypeScript, and that talk is online if you wanna see that as a part of my you you might need less JavaScript than you think talk. So, yeah, cool stuff. I'm excited for these. Cool. Wow. I'm into that. Oh, and I should say the polyfill, it supports just the, pop Vercel dialogue ones or at least a couple of the dialogue ones. It doesn't support any of the other ones just yet.

And, like, this person says, they're not here yet, and the polyfill JS is really it's useful, but it's not that useful

a JavaScript

or anything and putting it directly as an attribute. Now where this gets cool, Wes, is that it's not just those. The other proposed ones are

simply just by writing the HTML that's declarative. Right? React is very declarative

You could invoke the command of step up or step down or for video and audio elements. The video and audio, we gotta have this.

from the data attribute. This is great. I I wonder. The the only thing that I'm like, that thing And Let's get into it.

Yeah. I actually during my last Denver script, I, I did a bit on invokers because I think they're really super cool.

argument.

10%? command dash the bowels of your computer, like application support files, and you can you can grab the Chrome data from that. And you could basically just take that Chrome data cookies

which is the command. It's the command attribute. And then you have a command 4 attribute, which is an ID of the thing. So let's say you had a popover.

Mhmm. This could save a lot of JavaScript, but it could just make things way more clear. It's essentially yeah. It's like adding an ESLint on click,

declarative HTML.

sidestepping Is this something to worry about? Do you do any kind of vetting or sandboxing when trying these new apps? apps with SvelteKit using Tori.

with an input

action equals. Yes. And then I'll just put the, go away from this whole second implementation of the code base Yes. Which is is PayPal's implementation.

Now there's even other ones like an input type number.

And then I'll outside of North America knows how shoddy our longitude, if they're shipping Electron app, they can do whatever they want to to that build.

a invoker,

and firing some JavaScript like you would in React or something. Got it.

like, play, pause, toggle,

speed up or speed down because people are gonna say, well, what if I want to speed it up by

the select, show picker, input.

command 4 to test the video.

I'll I'll run that method programmatically component by component, move them Wes is like this as well. I I'll see these TikToks all the time where people are like, don't scan a QR code because when you scan a QR code, it's gonna download all your information

Right. So you could build a custom play button for a video component without JavaScript by having a command play, enough emails being sent out where this has been a problem I need to worry about because I I guess I'm I'm not working on anything that has, like, a crazy amount of current concurrent users trying to create accounts. Right? Even

because it doesn't support most of the proposed invokers.

the dialogue, toggle cancel,

Yes. So, basically, this is so much sense. Yes. It's like click events in HTML

And and what that means is that, like, writing HTML

looping over and and displaying elements rather than, like, waiting for events. So Keith Krickel is the author of them and is really interesting person too. Yes. Highly recommend you follow Keith on Twitter. Very good. You'll also see him in, like, every GitHub thread about every web standards. Yes. I know. Yeah. A web Deno who've crossed the divide into implementing features and and whatever. So invokers, I don't think I've seen this yet, so I'm gonna throw it over to you, Scott, because you have dove into it.

I don't know. But but before you know it, we're Yes. We're we're recreating JavaScript in named something different. Another example I have is, latitude and longitude.

on a button

Yeah. But, yeah, Volker's well worth your time. Give it a give it a read.

Yeah. You know? Or what if I wanna run this function after a certain amount of money or a certain amount of time? That's probably where you you start dipping into JavaScript, but episode of, Syntax, Wes's lack of experience.

You could have a button with command 4 and I ID to the popover itself, and then the command is a string of 1 of the following, toggle pop over, hide pop over, show pop over. There's also show modal or close, which work for dialogue elements.

that would still be 24 people that didn't get their emails because you we're just assuming the SMT service will be up. Yeah. You're right. Right? Yeah. And in that case, you cannot assume that your your third party infrastructure Just don't let somebody upload all of my photos. How about that? That UI specifically he's like, no. I I kinda want it to be a for 12 hours, they were down for 12 hours.

to be a a popular tool, and we just huck huck stuff up. Right? We just we just huck it over the warp, and we'll see if it works and then checks our errors when, with our Century. And by all means, do that because we want, you to keep subscribing to Century. But I do think, QA, I do think it's important. So thank you for this perspective here. I HTTP

that stuff should be automated, but your QA team should be there to to serve you and to help you, which is what I've been learning. Quite a few people reached out, and I thought that was so I love about this podcast. You get to hear

the QA team. So Beautiful. I'm looking forward to that. It's been a while.

it's certainly things. He's he's like, I wanna automate a lot of it. I think price. They had they had, like, a a mini snitch or something like that a a little while ago. I installed it for quite a while because, coursing it into a specific type. So I think in some cases, that's fine.

a poor man's queue will get you so far, but to

Yeah. And respectful too, man.

we certainly have a huge QA team.

that simply did not send. Right? And I could I could see it. There are people trying to reset their password 11 times because I'm not getting the email. Right? So I had to go go through and look at what emails had tried to be sent or or what people had bought something in the last, bug that we filed. Here's all the issues that's going on. So

especially at higher stakes organizations. Yes. I think that's the big thing. You Node, a lot of times, Wes, you know, we work in JavaScript. And and, honestly, this helps keep Sanity, repro steps,

they said Wes have 40,000 pages, and they will go through you can either redirect them to another URL. But if you wanna keep them on the page, they will try to embed an Iframe

III need to get a queue now that I'm I hit that actual issue.

Postmark,

In Node Express, Deno, etcetera, like the JavaScript stack, would a fire and forget a promise that sends an email be more or less a poor man's queue? What's your take on this? So, yeah, this is perfect example of in my application, when you buy a course, I saw you went on a hike, copycat. You're I'm not much of a hiker, but my kids have my kids go on, like, these, like, forest days at school,

working with dev team. Put this in here because it is. Yes. I love it. This is the lack of experience Mhmm.

the send email was sending, And then it's actually gotten quite a bit better in over the times. You can style it pretty much any way you want. I integrated PayPal in it to make it look almost Are there certain applications it wouldn't be good for? I thought this was kinda interesting.

now the developer says, like, I hate it because and you go, oh, wow. This is So the syncing islands approach, you heard it here first. That's my,

better QA teams, but I I do understand that, you know, these folks are are valuable for a reason, and it's not just to make your your dev's life harder, gift episode this year, please. I put it on the calendar. So, yes, we will do a gift episode, and we will have it out at the end of November so you have some time.

That's the best way to tell us what we're wrong is to tell us how great we are while you're telling us we're wrong. Yeah. Next question from Nathan Noller. You should do a show on invoker commands. They're not quite spec yet, but they are awesome, and there's a polyfill. You can declaratively to our team. And and like this thing said as well is that they can reproduce it. You Node, like, if a user is saying something is not working, while that's still happening in the background. That that works on Node. Js.

Yeah. That's, I mean, that's a good point. You know, 1 thing that it further makes me miss meteor here is that there used to be, like, a really good meteor automatic, like, queue system where it was just, like, you drop in a plug in and now you've got a queue. Add to queue or you like, you had to do 0 work to get this queue and it persisted to the database.

But I ran into a problem the other day where kind of an interesting charger that I put in our bathroom. So there that also

Yeah. I don't think I've ever had for, like, the details element, toggle open close, Yeah. It's a lot of work. Yeah. Colorado, believe it or not, has, like, 10,000,000,000 hikes. So we just drove into Breckenridge and found 1 that was

Well, mine as well. Yes. Not a stab. Wes is obviously an incredible dev. We all just have different paths. That's that's correct. A ESLint a decent QA team is invaluable and has a very different role to unit integration e to e Wes. I worked at a few companies with dedicated QA teams, and their role is much more than poking around your work and seeing if it's ready. They will triage issues, provide, need if if I have my settings

I have to I have all this, like, back and forth. I have to talk to them. We have to have meetings.

the catch will run and and catch my error, and I'll see it in my century.

We need somebody to go absolutely through it all, and they have their own processes to make sure everything gets gets hit and whatnot. So they are invaluable

if you if your user clicks buy PayPal is still awful in in many, many ways, but their stuff is getting significantly better. They have, like, gone on, like, a gut,

The automated test approach also assumes devs are given time to write good tests and are skilled enough to write high quality Wes. Both of which I've seen at maybe 50% of the places I've worked. Not a dig. Love your work. Cheers. Hey. I agree with you QA, Lava.

my process. Let's do it. Let's do it. On it. Yeah. I would love that. Thank you.

If your Wes can replace your QAs, then you have shit QAs.

what happened was Where where is it happening? How is it happening? In what in what circumstance? You know? And they can bring all of that to the developer and say, here's a nice tidy How you doing today, Scott? No. You the web doesn't work like that. You can't just go to a website, and it just gobbles up all of your photos.

a QA I never even thought about this, but a QA team can actually sort of guard the developers and say, is this an issue? this is weird. Why is this happening? I just turned it off because there's probably something deeper there. Yeah. Check yourself Figure it out. You know? I wanna fetch the data in the component. I wanna take care of the data in the component. Or if it is a page level thing, I can pass it in, but that's often my gripe.

with LevelUp, you would have, I don't know, how many people creating an account at once. It never got anywhere where it was It's not even that I wanted it a little bit slimmer profile because I wear it while dancing, and I don't wanna Yeah. Whack it on the ground.

I miss that. I miss that kind of thing because that then it it was easy to do this stuff. And maybe it is anyways, and I'm just, being ignorant. But yeah. Yeah. I I think it is is relatively easy to get up and running. I will implement it and come back to you and explain

not just being a jerk about this and being like, hey. Wes is wrong, but he's great anyway. So, I love that.

Next 1 is from QA Lava.

And that that's worked great for me for probably 10 years because then the queue would just keep on sending. In my case, I had 12 hours worth of emails have a separate template thing. So that's coming. What's that called? By the time that you listen to this episode, 12 hours and manually trigger those to send. Had I had a queue set up, that would have not been an issue for me. So, certainly,

actively work with you to check changes, work with stakeholders, and ultimately use the app in a way automated Wes could never.

heard from a lot of people after this episode, which I thought was really good. Specifically, I heard from 1 guy who works at a bank, ping ping every 10, 15 seconds, and then the server will say, yeah. Still working on it. Right now, I am combing the hair of your, Wes you're like, and, usually, the way that it works is you put, like, an underscore underscore brand property on your object. Almost every time that I reach for them, then you run into issues where you are just passing a straight up number, and it says, hey. Yes. This is a number, not a longitude that's been branded. So then you gotta brand it properly. Cast it. You're doing all this annoying, like,

but their SSL certificate was down so that my my requests were were being blocked.

Not because I've worked GitHub, it's it's shockingly different. So, yeah, shout out to the Apple Watch. You know? I was the Apple Watch hater for most of my life.

and wait for that type of thing. Right? So what most people do is they'll simply just throw that in a queue, and then another process will pick that up in the queue and say, oh, I've got some emails to send, and they'll send the email pretty quickly. That's why sometimes when you, like, do a password reset, uses long then lat and some uses the opposite.

several thousands of them. And if there's a bug on every page, like it's an app wide bug, they will log it for every single page, and then they then you have to go back and forth with them. And that seems like a like a crappy QA team, like this question said, you know, where it's just making more busywork. And

and he said, You have to explicitly

my email,

will be up even if you're up.

30 minutes,

Good day, legends. Not a question.

that was really interesting to hear. And then I at the conference last week, I talked to somebody else from a very large bank,

and they're sitting around waiting for the all of that to happen,

I send that I do a whole bunch of stuff. Right? You you create it in the database. You you validate the data. You you charge the credit Yarn. And part of that process

like, an Astro Wes you sort of opt in to the client kind of thing, you know, like, the island approach. And I was like, well, you can start off with a 100 a 1000 islands, and you could just start syncing those islands. Meaning, you can just kinda piecemeal is getting been a big fan of Postmark.

What are your thoughts on branded types in TypeScript? They seem nice for things like record IDs and email addresses, but there's a fair bit of code Yeah. Input show picker is 1 that I would love because I just had the situation the other day where I'm trying to show the picker in Safari, and for some reason, Bos Safari does not support that method.

a like, just a a Cloudflare worker. And it was easier for me to just do it in SvelteKit because I wanted a small UI attached to it. Like, I found myself writing HTML templates and strings, and I was like, you know what? I'll just bump this ESLint the SvelteKit and do it that way. So

even just this is this is crazy, but I wanted to do

of SvelteKit? tag a dot catch on the end. And what that does is I can send the response back to the user And PayPal

I'm looping I'm looping over this, and inside the loop, I want it to be its own component.

setting them up. Is it worth it? So

fans of syntax and listeners dear listeners,

What do you think, Scott? security thing. So I agree with you JS I prefer them to be on the web.

Man, I'm having a hard time. I I I've deployed

You can have, you know, an API based site instead of using their their RPC

out of the box. Those are my my 2 biggest gripes with it. Other than that, it pretty much handles everything I Node it to handle. I still want and I think you said this is coming. I still want to be to do multiple components per file.

are there limitations? The answer is Wes. But the right way to store them in a cookie if you want to be the most secure with it. Now granted, there's caveats to this where you can store these in normal cookies in certain ways and have it be fine JS long as you have proper, like, course protection and stuff. But if you wanna be the most secure here, which by all means, I think you probably do. Right?

I've deployed

that's a good way to do that Wes you might not want to have a a whole other component existing outside of your component. But also maybe you wanna have something that you might refactor later and you're just hacking together. So yeah. Yeah. Yeah. Just quickly.

100%

partial prerendering or a lot of this, like, kind of odd stuff that, like, Dex. Js has a lot of this really advanced stuff, But if that's the case where you want certain parts of your website so the idea behind server islands is that

Yes. So all the time here. I'll find myself in a component or a page where I'm like,

Yeah. I would say if we're getting into gripes about SvelteKit, those are my gripes.

by the time you listen to this episode, this will be released. It's in Svelte 5. It's called snippets.

Probably limitations somewhere, but, like, man, I I've built everything with this. And,

And, basically, you're just defining, like, a function essentially in a in a template tag, and you can pass variables into it. You can type it all. It can all be type safe. So yeah. It's called a snippet in Svelte 5. And, but any of this stuff JS. And it lasts me forever.

you

sort of system with the form actions.

Yes. There probably are situations where you get into very large applications where you go, it would be really nice to have And, like, I just wanna get back to actually building stuff, but now I have this, like, other client, which JS, my invention there. Yeah. I could get into some of my gripes about SvelteKit if you wanna hear that. Yeah. That's what I thought. Like, I think you can build anything with anything.

So, yeah, there's a lot of strategies for this. Sometimes you just do put a session ID in a cookie, but a session ID isn't, Next 1 from John.

and it feels like a waste of my time, is it alright to leave TypeScript errors as they are, and you can just throw your watch on it. You get a couple, I don't know, 10% or whatever works. Yeah. It just just works. So

trying to fix a TypeScript error. When I know the code works fine and

do what they want, which is delete all your videos, put up some crypto scam, and it's just gonna happen immediately. Right? But Mhmm. I guess, like, they if they wanted access to it for even longer, Perfect way. But first question we got here from Brad. What are the limitations

2, secure. Secure means that this cookie will only be sent inside of a secure context.

same site you know, deodorant that wasn't, have an eye on that stuff and if you want to install some of these and see what's going on. And if you wanna just,

cookie or potentially

they could potentially In those cases, you just check yourself before you wreck yourself and say, is this am I just annoyed because I wanna get it over with, or am I annoyed because I'm not understanding and then paste them into another Chrome instance, which is gonna be somewhere else on a computer. You refresh the page. Boom. You're signed in as that user. Almost always, they're just gonna they have, like, a bot that's gonna immediately

virus that got onto their computer.

And if you are on someone's computer, you can go into

only means that the client JavaScript cannot access this token. That means,

That session is validated, verified in the database.

if that session is I don't know if it's just because of the the texture of it. It's a little bit harder or something like that,

HTTP only cookie.

It's not sending the cookie. 3, same site. Same site as an attribute that allows the cookie to be sent,

in my mind, any more inherently So like a session ID token is really just saying you have initiated or started a session.

to the application if the requested origin is from the same domain.

or is the goal to have a 100% TypeScript error free code? This is kind of an interesting question. I thought you get our thoughts on it. Yeah. Sometimes you think, oh, there's a TypeScript error here, and you you go, oh, what is that? And you pull at it, and it sort of unravels Obviously, And, what everybody actually does.

it's really,

you know, you can store access to refresh tokens. Right? Because the client has no access to get to those. And the the attack vectors are are limited in that regard. Right? Because that's really what you have to worry about. So they're being sent over HTTPS.

The way you want to store any of these cookies, whether it's an access or refresh token or anything, using this command in command 4.

is with a secure

needing to be refreshed, then you use the refresh token to refresh that session. So you're wondering if this is secure to store them in a cookie.

these hacks that are happening, for example, the Linus Tech Tips, I I still know if something's something's happening because

So, yeah, you can pop it open in in dev tools and see that it exists. It's saved in the ESLint, but you cannot access it with JavaScript.

Last question from Corey.

got hacked a couple months ago. And the way that it worked is that there was some thing like, I can't do country based basically, deprecating all. 1 of my my pains with PayPal was that you search something and you find, like, this old outdated documentation or you find this old PayPal thing that doesn't work anymore and nothing works. So they're basically just gutting it all, and there's gonna be just a several ways, a couple ways to go about it. A lot of these companies as well are trying to display user, and it takes in an ID. Right? And that ID is going to be a string. Right? You could literally pass it any string, and TypeScript gonna say, looks good. That's a string. You know? And go even even if you're getting, like, pnpm every

have access to it for for quite a while longer. But if you look at

different auth patterns lately. I'm I'm, like, writing a JWT auth for my drop in. And it it's all kinda there's all kinda wild different auth patterns out there. I always did it this way Wes you have an access token and a refresh token saved in HTTP like, individual app code, but who knows? I I don't know. To me, it just seems like overkill, but, you know, everything seems like overkill until you have the need for it. So Exactly.

And

no extensions, no scripts, nothing can access this token from the client. Right? to dive in and actually fix it. I only turn them off if I

secure than putting the access and refresh tokens in a cookie

it with the with the refresh token. But you're you're kinda screwed either way, I think. Yeah. Yeah. And if you're wondering about, like I think it's pretty common too to, like, hash your refresh token if you're saving that into the database somewhere as well. There's some patterns around there. But yeah. Like I said, you're kind of pooch ed either, right, if they've they've gone through those links.

They're only being sent to the same Vercel, and they're not being able to access in the client. That's a a pretty common way to do this. And, Wes, I've been diving into a lot of slowing down your site, right, you maybe you didn't you didn't realize that you are loading things in a certain way and, well, you have a slow route on your site. Well, you can discover that, fix it, find it, and, make it better, make it faster, make it less miserable for your customers with [email protected].

push you in the direction of just, like, let just redirect your user to us, and we'll do it all. Right? So that's a lot of people only a simple type, like a string, I've come from a more classic MVP, batteries included, background. So offloading potentially slow tasks like SMTP

which is their, like, embedded

the Stripe checkout just because

for streaming from the back end, and this will allow you to send

like, services on top of these things even Wes you have, like, revenue Scott, you have lemon squeezy, you have Yeah. Man, I feel like there's a few of them. And I I'm sure those are all good. It depends on what you need, But everybody who steps in between you and the payment processor is going to take a chunk.

because yeah. It Wes just hard to work with, and it still is. So I I don't know. Yeah. I I think what you see a lot now is,

support Stripe because you can use Stripe's checkout, Vercel.

you can send data to the client as it's going.

this checkout logic that is specific to to my use case. Yeah. III we would have heard about it. And, also, people are not trying to steal your contacts if they have a major vulnerability. They're selling it to countries who are in war, because almost always Wes you go, like, the Stripe checkout or use some service, And it was mostly that. This stuff is extremely high stakes.

credit card within, like, the same

Yeah. Right. Yeah. That may be yes.

to the bank.

and then you don't have to implement anything in their thing. But for me, I want Stripe, but I also want PayPal. As much as I hate it, lots of people still use it, especially outside of the US.

interface. But, man,

do tend to really like it when I'm on a website and they end up using the

how things have saw have evolved in 7 years. Is PayPal still difficult to work with? Is Stripe still the best? Do SDKs and APIs have the same flow?

3 d Secure,

But then Yeah. It might be, you know, put in a use case for it. Sometimes it's it's annoying.

and it says, like, to everything. So you essentially just install the key logger,

Braintree was just so rotten to work with. They got they got mad at me after that episode

Me too.

goes underneath the dialogue because the way that dialogue works with top layer, coupon codes. I can't do this this

you just text my phone and then my payment information's all there, like, as a purchaser. But as an implementer,

the resource will send back,

I can has code says, I noticed some cloud service providers allow for the creation of resources that take a few minutes. So

with z index. Right? It's it's impossible. It's a top layer. Yeah. Stripe and PayPal lots of people have eyes on this type of stuff, I think Laravel announced this the other day as well where, yeah, you can fire off But as soon as I have to move it to a separate file, then I gotta redeclare all the the props and export everything. It's like this whole thing whenever you make a new component. And I was like, I just want to whatever in there, and then I'll listen for anything that has a data dash action.

as you get updates on the server, generate

WebSockets is another 1 that'll give you sort of 2 way. And then the third 1 is just long polling, meaning that every 10 seconds, you pull the back end and say, hey. How's the server going? And almost I think in most cases, it's just gonna be long polling because expire, the charger. So I got this 1 that

Yeah. For sure. Cool. Next 1 from Anan. Christmas

you can't go over top of a dialogue your session ID, SPA to, off of the client onto the server.

it was allowed you to support PayPal and It's here. Sick. Alright. Next question from Squinkle Butt.

it's procuring it. It's setting it up. It's installing. Right? Sometimes takes a couple minutes. While the process is in queue, the user interface to play some information about the resources being created. In some cases, there are multiple steps along the way to give the user feedback on on each how each 1 is complete. Often, this allows the user to navigate away from the page and back to check on progress or continue when there's a notification. Is this just long pulling WebSocket streams, or is there something else involved?

be done. When you click a button to create a resource, provider, which is, and all your contacts will be sending. And I was just like, there's there's some use cases where, Apple is is protecting our privacy. I just wish they made it a bit easier. Same with, like, And in my case, I didn't have a queue. In most cases, the queue would realize, oh, that didn't send. Let me try again. Let me try again. And right. And then the the as soon as it comes back online, this is much bigger than than I thought it would. Right? You're just 18 levels of inference deep, and I don't know if I'm gonna be able to to fix this type of thing. And and it works fine. I've many times in my life, I've been like, it works fine. But you also know how many times I've also been bit by saying it works fine? That's not gonna be undefined. Yeah. You know? Yeah. That's that's a big 1 for me is that's not gonna be undefined.

I had to go with Braintree in the past because

I'm working on it. Right? And that resource of I'm working on it can be could be a stream. Like you said,

Yeah. And, like, I have emails going back, like, 6 years with some of the people that work at Stripe being like, can I please you'd please just enable PayPal as a payment option? You know? I wanna I would love to just

Stripe Elements,

for example, you create a new box on DigitalOcean, native.

you're gonna hit some

I probably would still tell you they either, like, pull my armpit hair out or wire

So if you need PayPal,

better, and Stripe is getting worse.

annoying

you're probably gonna be still getting a little bit more custom with it. If you don't, man, just go Stripe. And What kills me is Stripe because both of them give you access.

but it's also made me rethink, like, are we overusing dialogue boxes just because it's easy to pop something up? with streaming or with WebSockets, you gotta make that connection. And if somebody closes the tab and then opens it up again, you gotta make that whole connection again anyway.

Oh, I'm doing super good, man. Just hanging out. Kids had fall breaks, and they were were home all for the past maybe week or so. And we did a lot of fun stuff because, we were supposed to be on vacation, and that had to get canceled. So, you know, we just did a lot of cool stuff. Yeah. I saw you went on a a hike.

of Syntax.

Click on the potluck queues button in the nav and submit your question. We'll answer it on a future episode Would love you to revisit that episode. Yes. So I actually just rebuilt my whole checkout, and I did this this whole song and dance.

Welcome to Syntax today. We've got a potluck for you today, which is you submit the questions. We bring the answers. We got some really good questions today around, is having TypeScript errors okay? What about TypeScript branded types? Is that an interesting pattern or not? I, me, Wes, was wrong about QA.

tokens, etcetera, in a cookie?

Drupal machine so we can get that thing ready.

I'd always thought that the recommended pattern was to store that information in some sort of DB store like Redis with a session ID and then return the session ID to the browser and store it in a cookie, which presents some service design challenges. Thoughts on this? Thanks. Love the show.

But simply just checking how something is doing, I feel like they mostly care about our privacy. I know that people are probably saying, well, they they care about,

Is it safe to store access and refresh So, basically, you're So, that can work for subdomains too if you have an API Scott, whatever.

Sick. Nice answer.

And, also, if you have it in open in multiple tabs, if you if you open it close it on your thing, open it in in your

you simply can just ping

Top form, Wes.

walkable from the downtown. But, yeah, you're hiking up a mountain and yeah. Yeah. Our our our kids like it, but I think they get bored after, like, the the 2, 3 hour mark. They're like, alright. Give me off this thing. Yeah. We didn't go that long. We went, like, an hour and a half or 2 hours, something like that. Yeah. It's just long enough. Lots of waterfalls in Hamilton, so they're pretty excited about that. Oh, that's dope. That's the best kind. Yes. Hey, Wes. If you're seeing a lot of waterfalls in your code that are potentially

and they've been been absolutely loving it. They're like, can we go on a hike? And I was like, sure. I can hike.