WTF is the Edge? Edge Compute / Functions

and much of your client side stuff will run,

rid. This is one that I've used myself in in Cloudflare Workers.

If there is no send all of your traffic to the US and let let the Rid. And it's pretty, pretty sweet to be able to just, like, say, alright, this is a middleware. This must run before you actually hit this API endpoint or the render of this page.

restraints.

like, if it's just JavaScript at the end of the day, it will run-in an edge function, do some work Oh, depending on local municipalities, tax rate could be as high as 11.8 rid. We'll literally get a box if you're using Next. Js those are going to be the same. And it doesn't make sense to have to rid. Hit the database, query query them all, render out the show notes, and turn them. So you could just put in your own caching layer right in between there, Yeah. I wonder if you could put Wazza in a in an edge function,

rid. Heavy dependencies to fire that up and they need to run like, you type node index dot j s. That takes rid. A number of milliseconds as well. And then finally, the code is writing

on go ahead and resize it and compress it and whatnot so that the next person that hits this one, We can serve them up a cache version of it, and that's sort of an approach in Edge functions as Yeah. Be kind of cool. Or, like, At the very least, like an edge function could kick off a process.

like, long running processes. It's not for the types of things that you're running your whole server on. It's more or less Use case for functions. Yeah. Yeah. Exactly.

rid. From, Obviously, check your your local municipality.

to see a video session replay of the user using your application, Rid. And this this could very well be a good use case. Right? Yeah. Exactly. Like, you don't Super.

intercept a request. You've got your server on one end. You've got your user clicking a button on the other end. And in between all kinds of interesting people just to talk to them. So we get rid I I've always wanted to have tons and tons of people on the podcast, rid. Because and same with Cloudflare Workers.

will on edge computing architecture

In LogRocket to see exactly why that data isn't coming back the way you expected because some sometimes, you know, you think it's all working, and then you forgot something here or there. And next thing you know, Your data is not working right, and your users are having a bad experience. Well, LogRocket is here to save you from users having bad experiences by making

That function is coming back with some bad data,

and you'll get 14 days for free. Thanks so much for LogRocket for sponsoring.

And it allows you to even see the network tab for when the user did that thing, meaning that you could That makes a ton of sense if you think about it because, like you said, it's a small amount of latency, but it is going to not feel,

replay. It's so very cool. So check it out at logrocket.comforward/syntax,

and intercept that request and

you have an endpoint and you have your initial request, and you can run code in rid. Those massage data, pass it along, whatever you need. So,

or something along those lines. You could use LogRocket

diagnose issues on your production site from the network tab Rid.

You can jump in between, of that request so you can continue on to your application.

rid. It full of visibility into understanding exactly what's going on at any given point in your application from performance metric tracking to There is an exception in the video scrollable

Meaning that and and this is also if you go back to the show on Cloudflare Workers where you explain what those are. Cloudflare Workers are often used as middleware. So what do we mean by that? So generally, a middleware, a certain amount of APIs. And what APIs are though? Let me let me ready. I'll send you the the list here, Scott, so you can see. So what APIs do they have? They've got console, lot log, and and and bring it back to you.

edge functions. So, again, if you need to do anything that is Larger than that, then that's probably not the use case for what an edge function is. Yeah. So that does go back to the point of what we were saying earlier.

at any given time. And it could be the end rid. Result or it could be simply just grab it, do some stuff and pass it being able to stick them in an edge function of just their own thing. Again, they run faster closer to the user. They have all that information.

So if you're experimenting with any of these new technologies like edge functions or any of this stuff, You might want to utilize a service that helps you diagnose issues. Now this actually is one of our sponsors today, which is LogRocket. And let's say you had An edge function that was failing, you're hitting it with a request.

It it's not for,

So if you have, or even just on a regular server full

rid. You just have a subset, which is web APIs Streaming API that's used to rewrite HTML if you need it. So,

in them

APIs in almost I don't I would say in

that is some of the downsides. Another downside is There's a 1 meg limit on your functions.

dozens of them around the world. Right? Yeah, totally. I should also say for

Rid. Yeah. So okay. I also have in here for downsides, Wes, that it costs more. Now I haven't seen any sort of real world calculator or anything like this. Do you know It's pretty amazing, and I was kind of shocked at just how easy and approachable all of this was. So If you wanna learn that type of thing and more, check out level up tutorials.com.

Soup. I always wanna call it super base. Super base. Super.

Okay.

now running that code in different environments, And it's a little bit more intensive to actually have to distribute that rather than just put it on 1 single server in Virginia.

Rid So the response time varies. That 1.5 seconds is on Vercel's, edge function

Whether that is just, like, straight up the users data that's cached or when it's been authenticated.

If you were going to, like, authenticate

authenticate the user and then send along the user authenticated or The amount of stops it has to take before it gets to you. But we often don't think about that because everything happens so quickly. Right? Rid. Yeah. Yeah. It's kinda interesting that we've seen

Rid. It would how would you

cloud function or the edge function, right, you're gonna authenticate in the edge function.

going to your normal server. Like, how would that work authentication

on the

you personally thinking about this, like, how would you as where the user is. That means that that that information is not having to travel outside

data

are there other things that need to happen when this plug rid. Replace every instance of their blue with your yellow or would literally anything JavaScript But this approach may not be viable if you want to deliver personalized content depending on, for example, If it is on, then turn it off. If it's not if it's not on, rid. Are there people who have the app open that need to show that that is on and off? And, gonna do a awesome episode today on WTF is the rid edge. You hear this word thrown around a lot. Edge compute edge functions.

that are static or change somewhat frequently, but we can also do computing You just have access to And then they also I thought this is really interesting.

So you can think of it as like a serverless function. Yeah. The little little little function there. Yeah. Exactly. Like, your user clicking the button, sending the request all the way to your server, rid. That's the middleware index. Js when you deploy to Vercel

There's a little rid Bit of logic that needs to run inside of that function to figure out, okay, is it on? Ethernet, NFC, RFID, Zigbee, Z Wave. So they obviously do that, but they do All kinds of stuff. Virtual private servers, Kubernetes, shared CPU, high memory applications,

you have Logic runs. Does it run on does it literally run on your phone because you're on the same network as the plug? Or does it have to go to Belgium,

a lot more frequently where okay. Of course, we can do assets the

rid. Run the thing and come back to your home and and turn the plug

there's time sensitive data that needs to happen inside of rid. Edge function. And then from there,

and you want to turn that smart plug on or off. Right? That's 13%. It used to be 15 when I was a kid. Anyways,

robotics and stuff.

for them. Yeah. I know know my wheels are turning a little bit. It's like, where where could I even just try these out in my application just to give it a try? And you might be thinking like, okay, Wes. Like, All the stuff you're saying, I could just do that in a serverless function. Right. Yeah. And

And I don't see see the whole benefit. I I think the benefit to this comes where,

Okay. Cool. So let's talk a little bit about How you would implement these things

again, the speed that's a little bit different than traditional servers where rid. You just have 1 server or maybe a couple and maybe 1 in Europe and and one in Canada, treats rid Out there with for web development, rid in that use case because there's I'm sure you hit the issues with, like, oh, you have a browser API, and you gotta still take care of that.

the rendered rid. And, so there is LambdaEdge you are

to the user, I I guess we could. Yeah. Because this is this one gonna come out before? Yeah. It is. So Yeah. Rid. On Fridays, we are gonna start what are we calling it? Supper club. Friday supper club. Friday supper club where we're adding another rid weekly podcast. So now we're gonna have 3 episodes a week, and Friday is just gonna be guests. So we're gonna have on the ASN number, and Your ISP from your that you get your Internet from will have an ASN number.

can bring it closer to the user, but your your server very well may be

like, in in the real world, that's where that it's a computer running it in the in the world and that's from that location. And what we often don't think about with this stuff is your have data that needs to go you know, the user types in your are you hit enter. That data needs to physically travel the distance

always just living in that distant spot. And

run something is literally on your user's machine.

Server. Right? Yeah.

then you can do it, maybe on a server that is in the largest city close to them. Rid. And if you can't do it there, maybe you could do it on somewhere. And, They are so good. Just like it's rid. There's just so many things in my life that I'm like, I'm so glad I did this, and I need to keep telling people about it. So I I posted on Instagram. Everyone's like, oh my goodness. I need this. And, Lambda or whatever Google's version or Microsoft version is of this specific thing. Generally, the AWS stuff is the best.

from wherever that is

But you're just like like, what does it what does the edge rid. Actually, me.

And the edge in technology, edge compute is running

Or any type of server. Right? Typically, it presents you with the location of that server. That's where that thing lives. And Yeah. The

and then you just you'd run it on that server. So The idea with edge compute is put the processing Rid. But if you have a server component that needs to be rendered, you can do that on the fly.

as close to the end result as needed. So, rid. For the purpose of this episode, sorry, you should probably be thinking of, the downside to generating it on every single request is it can be slow, Especially if that server is very far from your actual user. Mhmm. So bringing that compute closer to the end user is sort of the idea behind all of this. Cool. So, Wes, every minute or so. Right? And if somebody were to fetch a list of episodes, Seems really nice.

as well as some upsides and downsides to it. Yeah. And we're not So if you if you're not thinking CDN, if we ignore a CDN aspect or any of that stuff, when you sign up for, let's say, an AWS

And they advertise a lot of cloud. And you know what? This actually, this landing page is pretty decent for

So they are connecting directly to those company, and Seems they have some decently big clients. So interesting.

that I was like, why would they use Dino for this? And

understanding cloud functions and, like, a kind of an overview way Or edge functions where it says, run that compute over and over again. Now there's also So, I mean, that gets me, like, thinking about, like, authentication. Right? A in in 2 videos, we build basically something that allows you to explore your own file system in browser,

Red Hat had some stuff on it and, like, it seems like this. Okay. Wow. This is This is getting past my little React website and into some, like, wow. This infrastructure.

Rid The entire Edge network. Oh, this is cool. They have they have, the sort of you give that up in exchange for You know? Yeah. Yeah. I hear you. Frustrating. So, again, they'll give you a header. Rid. And in that case, you can just you could immediately set the cookie of don't show the the cookie banner. And then that, again, that logic doesn't have to go Inside of your actual application because you just stick it in an edge function, yeah, where it will be processed faster than it would be. Exactly. Localization. Rid. And globalization Rid. Nullify gives you a geolocation. I know Cloudflare gives you that as well, rid. Cloud computing, encoding and decoding,

Yeah. Infrastructure. It's infrastructure week.

Cool. Yeah. Well, I think that's it for edge functions. Do you have anything else? No. No. Let's move on to some sick picks.

Yeah. Hey. I found, just googling around just now, I found a host called Azion, a z I o n, .com,

you know, the cloud is not enough. Here's why the cloud is not enough. And then talks quite a bit about that and what their services provide Some use cases for it. So this is actually a really pretty nice landing page for Edge caching.

Yeah. Getting a little information in here.

Cool. Cool. Cool. Yeah. It's it seems WebSocket API,

it. When I when I started dipping into it, it seemed like like the big boys were coming out. Like like I watched a couple of videos from IBM It now needs to be available on, I don't know. I haven't run any edge functions myself. We'll go into some use cases in just a second, but rid. I would assume so because, function. Right? redirect that person based on who they are, where they lived, if they're logged in, if they purchased, all the kinds of stuff like that. Right? So with an edge function, you can intercept that URL, the user is hitting 1 computer for the 1st request And then another computer for the 2nd request. And if you want to be able to Rid. But I was I've been throwing them in the garbage, so sorry about that, turtles.

like,

3,300, And then from there and that is precut parchment paper sheets. So I'm back to talk About pre cut parchment paper again,

the text into the user's browser as you rid. Are receiving it and replacing think 2, three and a half years ago,

the the stuff that you want. Yeah. It seems like this I mean, a good use case is for anything that it. Needs to step in between some of the bigger work and what the user's doing. Like, you also have a a b testing listed here, which for those of you who don't know, a b testing is rid. Where you're serving up 2 different versions of a feature component or even an entire site or design to different people based on percentages. So that way, you can track things like interaction kids are staying home again today for what feels like A long time. Yeah. We

From one design to the next design, you see this, like, all the time with, like, Netflix is, like, constantly serving up different interfaces

Rid. I'm very confident that their team has, like, some solid math on which of the thumbnails that make a title more likely to be clicked and, like, what the difference there is. So rid. If you wanna have AB testing, this could kind of step in the way and say, oh, you know, this build, we're gonna send a certain percentage of the users to 1 build and a certain percentage of users to another build. Rid. That way, we can track to see which of these builds has better interaction,

We have Cloudflare workers,

the one, like, like, kind of like thing about them is that you you could also kick off a little sub process, to syntax, the podcast with the tastiest

Vercel rid. Rolled it out with Next. Js Middleware.

and I don't know that if you were to code, like, a Netlify Edge function that you'd be able to easily

story in place, MySQL, What is the edge? That's what we're going to attempt rid. Attempt to tackle an answer today.

edge functions, which is pretty interesting. So we are

now they're starting to offer up rewrite This is a constrained environment.

Probably it'll probably be easy, but I don't think it would be a a straight cut over to some of the other vendors. Right? Like, you'd have to it's not just straight no JS where you can run it wherever you want. Rid. And, again, that's

Netlify Edge Functions.

We have a Supabase using Deno, Vercel, AWS, Lambda.

We can go along. It's kind of generally, rid. Let's talk about some of the upsides first. The biggest one is that, timing timers, streams.

they are built on top of using edge functions is that there is no cold start because it runs in an environment that is

and I would say you're almost always gonna be using someone's flavor of

in your application.

things like rid. 400 milliseconds later, that's still half less than half a second, but at 400 milliseconds is a lot. Right? they run All of the ones that I've seen, they all run-in JavaScript. I'm sure there's Yeah.

So we have different services,

will run on an edge function.

Functions, which is part of AWS. Mhmm.

So if you're the type of person who's running serverless functions, you're basically just having a as The different API for JavaScript or slightly different, I'd say, available API for you. And

are built on top of it because they add easier integrations,

To give the user personalized experience, you can take advantage of server

is that is that accurate? Rid. Yeah. Yeah, exactly. As you have to make sure that you're not using any of the APIs that are not allowed. I was just reading the Vercel docs on this. It says A static page will deliver the same content to all visitors no matter where in the world they are, and it will be fast as it's cached by the CDN.

And then and then stream compute

Shit, code sharing, there's a reason why

code. Cool. So it does feel like the workflow is very similar to how you would work with it serverless

anyways.

what what are the other low level languages? the HTML. You can fetch the actual HTML that the user would it be returned.

it. And it's using low level, probably c or something like that or even, if you want to render out, rid. It says React server components. This could be literally anything that renders on the server.

to handle the scaling of things like the IRS's website, where, like, you know That the usage of the IRS's website has a huge peak and then, you know, falls off dramatically. Yeah. But I've never I've never been on it once where it didn't work. So somebody's job out there is to scale things like that that are are so uneven in which they they get traffic. I know that's, like, a lot of things. Right? You have a launch date, whatever. But I would imagine for something like the IRS or anything like that, that would be very dramatic and interesting to see. Oh, yeah. It that was It was a major thing with, with COVID because Oh, yeah. People needed to book vaccines rid. Scenes or get testing. And, like, the

the more But That could be very handy because we've talked about in the past, rid. If you wanna be able to render out a component based on if somebody's logged in or not, you could do that in an edge function as well. You can go as far as You could render your entire website in an edge function, rid. ASN is directly connected. ASN is,

Block storage, object storage, you name it. So check it out. For your next host, go to linode.comforward/syntax.

Not for many Bitcoin, and location at Which these run is very important to your end game of your application. Interesting.

IoT based stuff seems like that would be a much bigger deal than sending

what I'm what I'm guessing here is that what it's it's traveling less places less distance. It's only going

Rid. So they have a whole documentation on their website. It says Edge Computing explained how does it work? You can read through it. Rid It says edge devices add flexibility in computing

language, like assembly code or or things like that. You know, like, they're not running these compiled languages on there. And The reason they're doing that is because they are smaller, faster. They can work with less dependencies. Right? And then at the other side of things, and some of them are fast as heck, where you push the button and, like like, literally, like, rid. 10 milliseconds later, the plug turns off,

they don't give you the full

information you are processing is highly sensitive, rid. It can be really frustrating because, like, let's say,

base 64 I have to collect that rid. Based on if you're Canadian, I have to collect the, being able to run this as fast as you possibly can.

they have their own custom JavaScript engine, between those 2, you have Full environments like JavaScript where, within 5, 10, 15 minutes, rid. Then that's it. Okay. I still have this thing all set up. I don't need to do the setup. There's no cold start. I can just run the actual code. But at a certain time, that's the whole idea with serverless functions is that, oh, nobody's using this code base right now. There's no sense rid. In using compute power to keep this thing running, we're gonna we're gonna,

so that They run as fast as possible. But the downside to that is that you you can't do literally every possible thing that you want. You can't npm install a 1,000 packages and And set up everything that you want.

rid. Run, computing in all kinds of different clouds. They have servers all over the world, and and if you need to do it, then they are able to do that.

The reason we do that is because We're trying out Riverside.fm on the podcast. And, like, we used to always ask guests to, like, record themselves and send us the audio,

those are built into the browser.

Rust o level And where where that You know? rid. People say, oh, I I switched to precut parchment, like, 2 years ago when you first talked about it, and It's been a game changer for me. So let me tell you, if you are still using rolls of parchment paper, maybe in a serverless function to say, alright. Well, this one didn't get resized, but the next one,

Rid has a whole bunch of documentation So in that case, you could just rid. Forward them to the original image. But Node. Js API.

Job, Wes, to I mean, by flavor, I mean, someone specific. You have Netlify's edge functions. You would have Begins Edge functions begin as Edge functions, right? I would assume maybe. I don't think so. Yeah, maybe they don't. Maybe that was a bad assumption. So I believe,

web crypto API, which is for generating, environments for other ones as well, but And rid. Like most of the serverless offerings,

of edge functions? Why aren't we running everything in the edge all the time?

the IRS another language. Could you do Swazza? Let go ahead and run this, rid. The very closest way you can, let's go through a huge list of possible use cases. This is I've collected these from rid All the different vendors of Edge Functions as well as I asked on Twitter, like, what do you use them for? Mhmm. And it seems to be, like, one of the biggest use cases are, Vercel and Netlify. I I don't know if this is totally true or not, but I'm assuming that they Which is okay. Generally, those people know how, but it it's nicer to just have an app do it. So it's just kinda cool. Yeah. Do we have an announcement to make rid. To talk about, like, what the use cases are because it's pretty new to me as well. I've not implemented them in in any fashion, as well as in, like we had that show in Heavy Industry as well, where, Linux servers hosting, they do everything. LogRocket, JavaScript session replays, and FreshBooks cloud counting. We'll talk about all those awesome sponsors partway through.

business where I just rid Have to put in all my expenses,

Of,

Because

constraint somebody coming to a URL intercepting a request,

regular JavaScript and then that that take longer, then you have rid to do that in a serverless function or a server rendered.

trust. Do you want to talk about Linode, Wes? Yeah.

And free credit, which is pretty sweet. Thank you, Linode, for sponsoring.

or sending a response from that, rid. Text encoding APIs performance, in the browser, you have what are those? Service workers. Service workers is like a third environment. Right? It's not a browser. You have no browser APIs. You have no Node. Js APIs, idea of this edge Computing is in the Internet of Things world, rid. That could be again, we're talking about speed here. That can be an an actual issue.

a pepeda or personal information or or whatever acts that are running in your country. So that's That's a big one for people is being able to These cloud functions is that you can just use standard web APIs, not node APIs, not browser APIs, but web APIs, which are rid Fetch and encoding and crypto and whatnot, and Deno has implemented all those. And on top of that, you can use TypeScript What's the word? Constraints? I'm sure there's others. Right? The the big one that Netlify landed at the other day, the demand of it just went up and down and up and down and up and down and, Like, let alone scaling people, but the infrastructure in order to be able to book things and whatnot was was huge. Well, you might want to check out one of our sponsors today, which is Linode, The cloud computing that developers and And I'm not sure if this is totally true that So again, if you hit pass it along. So you're probably familiar with middleware job at explaining them, and they roll them out as as close to the person as possible. So

it's much more involved. You have to have a whole browser or Node. Js and v eight running, but it's much easier to write, are doing interesting stuff

you may only do these types of things which are fast. And if you need to do other things that are

in the in the US or the CRA in Canada, the people that work on these apps, rid. They can't just go flip that thing on. It's probably a little easier in the US. But in Canada or especially other countries, you don't necessarily have have to show Those annoying cookie banners in countries that do not have cookie banners as a law, allow or deny access to a specific resource,

rid. I've talked about this with CloudFlare Workers in the past. That's, is that Use coupon code syntax $10 off. Sick.

you can run it in the same location

Rid. Generally, all of them offer those ones I just said. And then they all some of them have, like, custom APIs added on top. Netlify built theirs in Dino. Did you see that, Scott? on and off. So that is when I was doing a little bit of research for a show, that's Kind of where I saw a lot more of the outside of the JavaScript world. That's where I'm seeing a lot more of the, easier deploy managed databases,

Those are used For, your data running rid. Inside the same country because you have Cloudflare would have a rid. It's different in every state there too as well. Right? What percentage is it in in Colorado? is a huge use case for these and look, let's say on this podcast, go to syntax.fmforward/ rid. Now that they've got their serverless function if your serverless function is rid on out. If you don't necessarily can do it on the user's machine, Expressland where,

of wherever you are, whether that information is encrypted or not. So I I guess that's I I I don't know how much of a thing that actually is, but I guess if you're dealing with more

what are edge functions not used for? They're not used for A a long running process, anything that needs the entire Node JS or is used in a a way that's more like what we would want to have used. Rid. Another good use case is authentication.

it's I remember what it was in Michigan, rid. Ex exactly if it does cost a significant amount more, or is it, like, compared to serverless? Because it you've done a lot more with serverless than I have. Yeah. I rid. Don't know.

HST and GST and PST based on, like, what per province you live in, That would actually be a really good use case for Edge Functions is displaying the user's localized

or at least I did at the time.

syntax. It's gonna get you a 30 day free trial. Thank You, FreshBooks, for sponsoring. Sick. Okay. So some of this stuff we've already covered a little bit. Like, what what are

for for my HST, which is our as close as possible rid.

Sure. It did. I'm

did you get those taxes done? How how how did that work out for you? FreshBooks

You kidding me? It's 13%.

what do you call what do you do you have a special name for your tax that like, you you buy something for a dollar and it's, like, a dollar 13 or whatever? Sales tax. Rid. Sales tax. Yeah. So, like, we call it HST here in Ontario. That's

Denver's is 8.8.

that,

I know we have, like, super low property taxes, but let me see about sales tax. I don't know if we have low sales tax. I know we have low property tax, but 2.9%.

that's a pain in the butt. And then I also any time I pay out sales tax rid to any of the vendors because I buy stuff, then I get that back because I'm a business. Huge pain in the butt. FreshBooks makes it so so easy.

rid. Kinda neat that you can do this, and they're making it much faster because, like, Redirects. Complex redirects.

I have them auto put in from my credit card. It is awesome. Rid. And then my accountant can just pop into my FreshBooks, grab all that information, and then he knows whether I have to pay out or get back HST depending on if I rid collected or spent more, sort of alongside just got through a week of that. And, like, yeah, one of our kids didn't go to school the entire week, and it was just like, everyone ended up Antibiotics, and I got bronchitis and brutal, brutal, brutal. I hate it. Yeah. So it's been a little it's been a little rough this morning, but I'm I'm getting through it. Rid. Cool. We are switching up this recording.

Honestly, I don't know. Oh my gosh.

remittances your heart monitor is not running Node. Js, an example might be, rid. You have a smart plug,

Colorado.

Okay. Okay.

It. Yeah. Oh, I like that little pop noise. Yeah. Boom. So

redirect them to the Canadian website. And if they're from the US, then you need to redirect them to the US website. And, rid. Maybe you say, okay. Well, that that's a lead gen. You need to mark them in your sales tax on a server rendered page.

rid. Like a route in your application, you can just throw that in an edge function and keep all that logic nice and tidy in a single, Rid. The whole fetch API, which is great because often what edge functions are used for is for And that would be rather fast because you simply just need to fetch the end result and it's intentionally pared down but I've just been, like, again, seeing them over and over again. I went down the rabbit hole and watched a bunch of videos Rid Again, that's not that's one more thing that doesn't have to go inside of your these seem really nice to me because with the edge? I think, like, rid. There's 2 things you could check if they are authenticated,

and DNS isn't isn't cutting cutting it for you. That seems like a a good option for something like that. Absolutely.

rid. Free shirt or something like that. And and then

you can redirect the the actual user. That's neat. I've actually done a little bit of stuff like that before, especially when you get into Complex redirects

Rid. Other things, there's edge rendering or or server components. So somebody hits a hits a URL, then I need to do something else with that or pass them additional information. And there's there's often a lot of like, oh, my gosh. There's a lot of checking That needs to happen before you even actually

How you implement these into your application. So maybe we can talk a little bit about that as well.

And so okay.

rid. I have a lot of these things in my application, and they are in middlewares. Mhmm.

Yeah. I'm interested in to users, but also different thumbnails.

rid. And just say, oh, well, somebody requested shows that JSON.

Lot of people say caching as well.

Rid Are you good with the amount of use cases here that we I'm just gonna go through the tweet I asked on on Twitter. Like, what do you use edge compute function for?

an endpoint, specifically, like, Cloudflare has, Along with their functions, they also have their key value store.

and And you're only allowed to hit that API like the syntax API. You're only allowed to hit it once

or before a notification is sent to your phone, then

running. And if that

when you run a serverless function,

So all of those things are really what makes this fast is is really you're closer to the user, so it has to travel less physical distance, but also has to make less stops of closer to the user. All of those things. What are some downsides believe it or not, Everything feels like it's in instantaneous, but there is some latency there inherent with either just traveling distance

fast as hell,

And cold start is something that people are working on, and There's this idea of having warm images, meaning that, like, you okay. Like, 5 minutes ago, I ran that serverless function. That thing is rid. Still warm, meaning it's still running. And if there were to get a second request, And, generally, Supabase on their inside of their ISP, this for years, rid Turns off, does it is there a rule that needs to trigger? Like, right, like, that that's that's a pretty simple idea of a smart plug. Right? But which ones you can use is sort of limited on. Do they use rid Standard web APIs that are available in these, or do they use Node. Js,

well, we've mentioned really that it's it's fast, and that's really where most of the upside come from. Right? So it reduces

rid. Your light switch turns on or before a user is redirected

Would you mind giving an explanation as to what Cold start is and why an edge function might make this better. Yeah. So for a podcast to the to the edge. So, therefore,

Elsewhere, sometimes things have to be routed from one thing to the next.

close to the user.

With a cold start, a to b and b to a.

I you know, I'm not actually familiar with any of these cold start issues. So,

one of the upsides here that you have listed, West, is that it's 0 cold start.

rid. What needs to happen is they need to go and get that code. They often need to set up a container that has the the version of Node. Js That you want inside of it, and then they have like Canada does not have that as a law. So stop showing me your damn cookie banners. I don't care.

the cookies rid. You guys spy on all of our our data. Right? That's a that's a major issue. So often, you have to keep Such a pain in the butt. So

rid. On many different servers. Right? Because, you know, you got to think about like an ISP. Right? Like every single host like Like, Linode would have an ASN number, and, that is one of the big benefits that is touted amongst edge functions.

that could be pretty handy as well. Rid. Yeah. We are I should say we're gonna have some folks on from, Rid. Yeah. So we said earlier that

if you are,

check if they're logged in by virtue of many communication pro protocol options, which include Bluetooth, low energy, cellular, not having to use the awful AWS console to do anything, rid. Like, especially like, and on and off. I'm like, wow. That's, like, super responsive. And I've had other ones where you push the button and

or not.

So kind of seems interesting, and that's especially helpful we had if you wanna rid. Learn a little bit more about cold start. Go back to the episode where we had Brian LaRue on from begin.com, and he he explains, like, what cold start is and and why It's getting better and better. So, like, let's say you have a Node JS function that simply echoes hello world rid or console logs it and then shuts down. Right? available to you in that. There is a 1.2nd response time limit on a lot of these.

and then either return a four zero whatever So if you want to Let me just pull that out of my cache instead of having to do all the rid. Intensive work, and that could possibly save you money in the long run because you're not having to Rid. So it's nice just to have a whole separate day where we have people on and we can chat with them and ask some questions and whatnot. So I'm pretty excited about that. Yeah. Yeah. Me too. And and just so you you know that this isn't going to be, you know, supper club sponsorship hour either. We're we're definitely going to have people I've already done my q one,

probably from Netlify, maybe from a couple others, And if you don't know, parchment paper, when you put something in the oven, you're roasting some vegetables or making cookies or whatever you want, putting parchment paper down, cutting it with a little roll. It curls up. It's not perfect size.

Rid. I'm going to shamelessly plug level up tutorials.com.

Or drop a review if you like this show.

And it's they do about, like, 45 minutes on the history of specific inventions.

So yeah. Okay. This is the part of the show that we talk about sick picks. There are things that we pick that are sick. Sick as in, that we like them, not sick as in bad.

sensationalized

Not, don't get a PR company to try to get you on the podcast. It doesn't work. Yeah. It doesn't work. At least For us, I think it probably turns us off from you, especially if we have personal relationships with people there. Like Yeah. It's funny that the PR company would reach out to us when we all Have had so so many emails from all of the folks that never liked. To the CEO. Yeah. But yeah. Yeah.

rid. Browser APIs where we dive into some interesting APIs in the browser. Now, obviously, we can't cover them all, but we do get some practical ones where you're looking at device sensors and things like that, but then also some really fancy brand new ones like the file system API.

because

Sign up to become a pro and get access to all of that and more. Beautiful. Alright. Thanks, everybody, rid for tuning in. We'll catch you on

Rid.

for a full archive of all of our shows. And don't forget to subscribe in your podcast player on

Tanks, the the number 0, the origins of the number 0. But it's been fascinating, and it's well researched, which is always a good thing for me.

the it'll be like Wondery Wondery's podcast about Things you didn't know. And here's, like, 2 people who know nothing about the thing they're talking about talking about it. Does this Like, any functions? Whatever. Let's Do our quick Google search and then share some biased opinions and what like, I really hate that word. It's, like, all about the entertainment product aspect of it where they're at. You know? But this is I found to be very, extremely well researched, and he brings a subject on, or a guest on who who's like a subject matter expert, but not like a,

finish that one up and then buy environmental variable sharing, So let's say, for example, APIs where they're saying, okay, rid. Those things available to you, and it's hilarious trying to book something on government of Canada website because they literally just they just limit the amount of people that can do something at once Because they don't have the they can't scale up to, I don't know, 10,000,000 people wanting to do something on one day, and then a week later, 0 people wanna do it. Right? And rid. Serverless and edge compute is really good at that, but you can't also just, like, and the different services on there. So Linode has the option to, Without any sort of build step either. So I was like, oh, that's that's actually a really good use case for Dino. So, I was also notified by some people on Twitter that,

That's the best. Rid. Westboss.comforward/courses.

Friday.

that I've been finding to be pretty interesting.

Head on over to syntax.fm

I'm amazed that we can do an hour on edge functions because I was like, oh, I should just be hasty or tasty, but there's a lot to talk about. There's a lot to talk about, and I think a lot of there's a lot of confusion around it When it's useful, when it's not useful, who it's even for. Like, are you building a portfolio with edge functions?

from scratch. Westboss.comforward/courses.

Open up a file. And then in our case, we open up an SVG file. We modify that file in a text area in the browser, and we click save On a save button in the browser, and it saves your local file.

talking about various things. Like, I listen to one about the invention of the space suit, And, they did a lot of talking about Who are presenting interesting things and not selling you a product or something because I think that's the way it works the best.

Yeah. You know, those types of questions.

I have a new course out

The precut stuff on Amazon because it is the best. Yeah. Cool. Well, that's fun. Shameless plugs. Wes, do you have Anything to shamelessly plug. I should mention, by the way, I did get those parchment sheets, and they are as fantastic as you have been talking about.

Wow. Awesome.

It's called patented, the history of inventions,

Peace.

you could put them in the green bin here in Canada, which I did not know, which is amazing. I should look that up. I didn't know you could do that. Yeah.

the atomic bomb, to you. Now things like caching and CDN

Like, I don't know if you've noticed this trend, but there's definitely a trend in podcast lately where, API, anything that's going to take a long time.

We build in this course

You know, quote unquote influencer subject matter expert, like a literal expert, Just tried conditionally loading a script via geolocation.

I am going to sick pick something that I sick picked, rid. I Netlify is generally this is the same and other ones, they will give you a set of APIs that are specific to that environment and you don't have to put all that logic in, side rendering to create dynamic content edge functions as given that you hit those,

Send your friends there as well if they are learning JavaScript take advantage of it, but still run it within the same country. It was really interesting that it's somebody's So if you want to be able to, massaging that data, caching something, fetching some data, and then sending rid. Likely, if someone were to try to fetch a list of episodes the next minute,

sheets. Cookie sheets. We call them cookie sheets here in Canada. We called sheet sheet pans. Baking sheet. Yeah. Baking sheet. Rid. 12 by 16 is your standard, like, household.

steam engines, military drones, breakfast cereal,

And I found every episode that I've listened to to be

for, like, 20 rid.

So, Wes, I have a sick pick today

rid Extremely informed.

or anything like that. Just straight up info.

not only materials, but designs and things that didn't work and constraints that they had to work in. They designed the first ones, and they went to the moon and moon dust got in the zippers so then then they round 2 they were like we have to design them without zippers in these certain spots like it was really pretty interesting There's 1 on the treadmill, the Rid.

It's called the half sheet.

we at three and a half years ago, I sick picked this, and I bought a pack of 500 rid. And you often are starting to see it in marketing companies They give you a subset of that allow you to deal with cookies.

spin it down. That's a word we say often is we're gonna stop it. We're gonna spin it down. Rid. And then if somebody comes along in in 6 months, this is often if you go to Heroku as well or things like that. If you're the first

I'll leave that up to them, but, with most things in in computing,

Yeah. That's cool. And you also, have here that there's privacy concerns too, or it can help with privacy concerns.

the more rid. The reason is

rid. Quite a bit pared down, and we'll come we'll hit that when we we hit a downside. So, And, man, it's the best. You just use you pull 1 out, Throw it on. It lays nice and flat and you crumple it up. And I learned they are, So again, you can't go npm installing anything you want. You can use dependencies We'll talk a lot about what they're used for and examples in in just a second as well. So, I've had several smart plugs, constrained that a Environment is generally the faster that it actually runs. So

rid person visiting that website in the like, that day or or in a week. Sometimes the 1st time you visit it, it takes rid. A second or 2 to actually get going. And that cold start is something that people worry about a lot because it can be an actual issue. Rid. So the upside to, And then the other one would be you can simply just set

And and that's the idea with this. And rid. People talk about if cold starters actually issue or not. So, We are sponsored by 3 awesome companies today. Linode You're going to start seeing, I think, a lot more companies start to roll this out now that they've got their, rid Restricted the environment that you run it in, the faster it is going to be.

How do you use it? Who offers it? All of those things and more. So I guess for the the the very beginning, we should get into the 101 here. We're talking edge. What does that mean for you, rid. And,

rid. There was a PR company emailing me for months trying to get Netlify on. And I was like, no. No. No. Absolutely not. And then, GPU, server

an aspect of tech that we we don't necessarily know a whole lot about. So pretty Pretty stoked about having some we got tons of really good guests lined up already. Yeah. So you'll get a 3rd syntax in your inbox every single week on Fridays. Rid. And, Yeah. I'm super excited about that. Alright. Well, let's actually get it into the part of the show where we talk about the thing. So,

rid. What's his name? Jason from Netlify is like, hey. Can we get the edge function guys on? Like or or not. Can we? I'm like, I'm happy to hook you up. Absolutely. I love Netlify.

or people that can rid. Help on us understand Salesforce software as as a possible lead. And, rid. You say, okay. Well, if they're logged in,

what exactly practically does that mean in the real world? Yeah. This is something that a term gets thrown a lot around a lot, Whether that's an image or a JSON endpoint or just a logged in user, is another big one. So you want to be able to translate things on the fly or for example, I have a, a coupon banner based on what Country, the user is actually in. You could you could throw that in there as you want. Browser support is a big one. You can detect the user's browser I have a, like, a hosted

And so that's the dirty little secret is or processing the request rid. Or processing the, with serverless.

Case in point, the APIs,

Yeah. That's, rid I I think that's that's kinda true. And we get people, like, they do, like, a a tour. They're on every single podcast. I hate that. That's awful. I just I just want the the most interesting people. They don't necessarily have to be big names or people to have a book or anything like that. It's just people who random user IDs, which is really nice. And then I know Cloudflare Workers has an entire

the edge, what is the edge? And you might find this to be interesting too. This seems like it's something that's up West's alley.

Why might you want to use it? What are the upsides? What are the downsides?

is has edge functions, and they are also running on Deno, and we'll talk about why. Obviously, probably speed is the biggest one there, but, we'll talk about why you might wanna do that, and it will do things like cash Netflix shows rid. So that they don't have to do the bandwidth round trip both in terms of speed and in terms of bandwidth.

popping up here and there. Yeah. It was amazing because,

I didn't see that. No. But I have you know, we it's funny because we did mention in our,

like, 2 or 3 months is maybe more No. Then I had seen, like, all of last year. Yeah. I was just seeing something this morning about speeding up Prettier with Dino, and I was like, oh, man. This is kind of neat. So hey. Dino's

environment

of the year that Dino didn't seem like it had gotten any movement, and I I'm the one who said that. So I'll take, rid. Responsibility, Okay. So, we have a little bit of upsides, downsides, what the heck they are. Now let's say, Why might you use them if they're not for a full on server long running process here? What's the use case in which you would want to use an edge function? Yeah. I think Vercel rid. Does the best

if that's not true. And, with that request

because Deno an encrypted website. Right? Yeah. Well, if rid. If you're running any sort of,

what I have seen over the past,

rid Like, recap

is a server that has implemented all of the web APIs. So the idea behind

Pretty useful for stuff like cookie consent where laws differ. Now that is interesting. I have not even thought about that. So I was, like, going through my brain, like, what could you possibly use geolocation here for?

fly and either render out an older version of the website or none at all or or a little banner.

to rid. A website or you get, like, a new piece of tech or, like, you get a new phone. That's probably the biggest one. It's like your old phone. Like, you never thought, ah, this thing is slow,

It's gonna feel weird. It's gonna feel not natural. It's not going to I I can tell you that wouldn't necessarily fly in a lot of households with their state. Why why don't we just use the normal one that works? Like I don't need it these extra features if I'm sacrificing that weird

rid. But then you get a new one. You're like, oh, wow. Like, this is super responsive. This feels good. Like, it feels good. And, like, what is that? Well, that's rid. Somebody that actually cares about the the time sensitivity between those types of things, and they've they've done the actual work and and made that even faster. And it's It's definitely noticeable.

Yeah. Totally. What let's go through some of the the other upsides as well. You wanna grab the next one? Yeah. So you needed to right? Like, what needs to happen when somebody hits that Europe? Okay. Well, if they're rid. From Canada, then you gotta, where in the world the user is located.

rid. Good. Especially when you compare it to how the light or whatever you're working with feels if it was not smart. Right? You flip a light switch. You expect that light to go on instantly, But then you get into Internet of Things world. You flip the light switch and having to wait 400 milliseconds.

delay totally. You know, like when you go you are proxying an API

because we're starting to do a little bit more and all of a sudden you want to run a little bit of middleware,

In regarding that? Yeah.

rid Guests

you have the HTML and you could do things like find and replace, add in your own JavaScript, tweak the CSS, couple months ago,

anything that you want and you're right in between them.

cloud app where it has like screenshots and whatnot. Right. And if some of the features they took out and some of the design I don't like, I can literally just intercept that request,

And then You even see that with things like Netflix, where they will literally ISPs That'll give you a $100 assets.

And now I just like I've been seeing this Edge functions over and over. And in the last year, you're starting to see a lot more, Rid. Yeah. Well, I mean, Yes.

that they install on each request of your site's page. This will enable you to offer different rid. Content to different people based on the location, authenticate them, or configure a language of your site. That makes sense. Like, we talked about it earlier. We've had CDNs for static stuff for so long. Rid. Now this is kind of like a CDN for

authentication

and you can go ahead from from there on out. Yeah. It's funny. Okay. So you have one that you have geolocation written on here, and I was sort of sitting here like, I wonder what geo how you would use this with geolocation, but it does look like you had a tweet along with this.

check if they're logged in,

it. Edge functions that you've sort of, again, jump in the middle, What are content rewrites? on CDN World where the CDN will rid like, you got an image, and the the CDN will put that on 6 or 7 servers around the world. And then when you request one of those images, it will rid. Figure out where the closest server that has that images

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

everything. And so, Actually, it's interesting that it might be, like, a neat case for Wasm. If you have a function that's, like, slightly taking too long, rewrite it in Alright. Next one. We did the upsides here. So we've learned that it's fast, it's more private, it's funny that, so So many of the things that we have listed in our our notes here for upsides are, like, the same thing. Reduces latency, My name is Scott.

work That will unfortunately, rid. I don't know. I'm not sure how many, servers they have around the world, these different companies, but they're often in such good shape Constraints.

Interesting. Okay. So what companies offer this? Cloudflare.

like an image. If somebody requests an image, rid. You don't have a smaller version of that. I don't think you can stick around and wait for the image to be compressed and resized.

you just kick off asynchronous A list of all the courses that I offer if you want to learn a thing or two about JavaScript, rid. HTML, CSS, web development, general databases, you name it. Got all kinds of really good stuff there, free and paid.

not for this time, but or or we'll email you when it's ready or send you a notification when it's ready. But We're not gonna stick around in this request and wait for that work to be done.

Like, for example, $25 on Amazon.

Run it on the edge.

Welcome log all the HST.

With me, as always, is mister Scott Talinski. How are you doing today, Scott? Oh, I'm doing okay. Our our whole family's been sick for, like, 2 weeks now. So, that's been really great. You know, Brooklyn, like, waking up in the middle of the night the past 4, 5 nights a row. She can't breathe. She's got a fever. It's, like,

which is really interesting to me. Yeah. Yeah. Super base.

but we never really had a good system for it. Like, who should we let on and who should we not? And, like, We we probably get, like, an email every other day of someone that wants to come on, and we could we could do an entire episode every week.