Potluck - API Fetching × PDF Creation × tRPC × Stripe vs PayPal

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.

Welcome to Syntax, the podcast with the tastiest web development treats out there. We've got rid A potluck for you. This is where you submit the questions and we answer. Please send us your questions. Go to syntax.fm.

Top right corner is a button. You can smack it and, rid type your question in the box, and we will answer it on the podcast.

We've got some really good questions for you today.

A really good one about, like, caching rid API and speeding up API data.

Svelte and SvelteKit.

How do you generate a PDF on the server side These days, our PHP CMS is better than JavaScript CMSs.

Is Stripe the new PayPal? All kinds of really good stuff. Rid. We are sponsored by 3 awesome companies today. Prismic is the headless CMS that makes it easy to build web pages.

Auth rid. 0 makes it log in and permission for your application super easy and log rocket JavaScript session replay. We'll talk about all of them partway through the episode.

With me as always is mister Scott Talinski. We both just got off a week of vacation. How you doing? Hey,

man. I I'm I'm, I'm jet lagged. I look like a demon. My eye is completely red.

We had a child emergency room trip, and because so I could be doing better. We'll just say that.

But, yeah, for the most part, everything's been great, man. We got to we were just in Hawaii. We were in Oahu With the fam and and Travis Nielsen and his family, and it was just super cool.

We got to hang out with everybody and and see a lot of great stuff. So We had a blast. We got to go to those, like, Jurassic Park filming locations and stuff and just an endless amount of cool things in Hawaii. So Feeling like I needed another week to recover from kind of an epic vacation. But Vacation for your vacation? When when you have a vacation with A 3 year old and a 5 year old. It's not really a vacation.

No.

Yeah. It's kind of just like pure chaos is ridiculous.

Exhausting. Yeah. We just got off a a week at our cottage, but our whole extended family came up. And that is always really nice because People take nights cooking and, like, people can watch the kids while you do something. So I'm feeling good about that. Lovely. Yeah. I've been been working on my office, and so we just moved to a new house, and we're working on soundproofing and building an office in the basement.

So I'm like I was before that, I was, like, half rid. Trying to record my TypeScript course and half working on that thing, and I was I was getting kinda tired. I'm very happy that I'm a web developer because rid Doing physical stuff is hard.

Doing physical stuff is hard. That's the truth.

Alright. Let's rid. Get on into it. 1st question is from Chris f. I'm working on a Jamstack, app that fetches JSON for a from a third party API.

Rid. However, this API changes multiple times a day and takes a couple of seconds to retrieve every single time. A couple of seconds wait time is annoying, and I want to improve this. For my use case, I only need the updated from that API once a day. Rid. To potentially remedy this, I'm wondering if there's a way to create a middleman to fetch the data from the API once a day.

I would then fetch this middle from the middleman instead rather than directly from the third party and waiting a couple of seconds every single time. Is this possible? Rid. Is there a way to work around this? I haven't dug really into the serverless functions. Wondering if this would be a good use case for it.

Yes. This is an awesome question, and this is very, very common because APIs can either be slow or APIs can be limited. And generally, like, I'll I'll give you an example. I have a, currency conversion API, and I'm only allowed to hit it Sixty times a day or something like that. And if I were to hit that every single time I I loaded the page, that would be a bad day, and I would go over that limit very quickly. Rid. So the solution to that is you cache the data or you put a middleman proxy.

And at the very, ready. Basic. This can simply just be a variable in in your server or in a serverless function. So what you can do is rid Outside of the scope of where you fetch the data, you create a variable, or or or sometimes rid I I do an object, and that object will have 2 properties, a date that a date property rid. And a data property, and the date will give me the date that that data was last fetched, and the data will give me rid The data that was returned from the API, and then generally, I'll have another function that says, like, fetch currencies.

And what will happen is it will first check that object to see, is there data in here? And If so, is it stale? You know? And then you can go ahead and and if it is, you just return it from the object. If not, rid. You go ahead and fetch it fresh from the thing. And I really like that approach because it just stores that data in memory. And if it's something small, like a single request rid Or maybe even couple 100 requests. It's fine to store that in an object. That object will go away if you ever turn off your server and restart it. But in my case, that's fine because I'm not restarting it more than 60 times a day.

And in your case, it's probably a good good idea as well. A serverless function is a great use case for this because, serverless functions will hold memory for, rid. I I forget what the thing is, but it it will hold it for at least 40, 50, sometimes even a couple hours.

Mhmm. And that's great because rid. You can just make a variable outside of the serverless function handler. I do this for all of my OpenGraph images on my website. I just I don't even store the image anywhere. Rid. Past that, you probably would wanna stick it in a database and then fetch it from the database. Or even if you're using a traditional server, stick it in a, like a text file and just pull it from there. That's a great way to speed this type of thing up. I was thinking Redis myself.

Rid We use Redis for this type of thing on our on our site. So, it can be really easy if you have a, I know our host, like render.com, has, like, a really nice and easy way to spin up a private service like a render private service, and then just connect to it directly from a function or something like that. So, yeah, I I like your idea about memory. If you want a little bit more control, you can go to Redis. And then if you need a little bit more control, you can go to a database or, like you mentioned, a text file or something like that. But I think, yeah, I think you nailed it on this one. Yeah. Pretty pretty common thing to do. I use this this approach quite a bit. Totally. Cool. Next question is from James rid Er, from Todd. Next question is from Todd, not James.

Todd. Todd says, I've been getting into Svelte and SvelteKit the last couple of weeks, and I'm really loving. I'm considering, doing a training with my team to get them to work full to get them up to speed so that we could use it for future projects. My only concern is that it's not yet on version 1, And there are likely some APIs that will change before it gets there. I don't want to give my team too much whiplash in that regard. Should I wait a little bit Before I introduce it to them or they find learning about it. Now, Todd, this question is aptly timed because I don't know if you saw, Wes, but there was a lot of discussion yesterday And the days before, made major SeltKit API changes. So, you know, one of the things that they're wanting to do is to get Socket to be what it needs to be before it hits version 1. Once it hits version 1, Any API change they've made before version 1 is locked into essentially version 1 stone. Right? Not that it can't be changed, But if you make a big API change after it hits version 1, then you're gonna cause a lot more trouble than if you did it before version 1. And what They have done is basically said, you know what? We have some some issues with how load functionality works. You may you might remember from using SvelteKit West, you have, like, the context module, and then You do that inside of, like, a load function to load your data for code that runs client and server side. And they just found that there was a lot of confusion around that. Not only that, basically, there was this is, like, almost worthy of an entire episode of Syntax to discuss, essentially, the amount of, like, different things that they they wanted to discuss. Basically, file system based routing being potentially confusing. Right? There's a lot of edge cases. There's a lot of, like, weird little things. And this isn't just, unique to SvelteKit. This is, like, file based routing overall. Right? The load function And a bunch of just essentially small little things, but they've gone and made what I would consider to be, like, a massive rid Change to the API, especially in the file system based routing. Like, there will no longer be index dot Svelte files to do index inside of routes.

Rid. You can now no longer define routes as a files.

So, like, in the past, you could have, like, an about dot svelte in your routes folder, And that would be an about route. And so now routes can only be defined by a folder itself. And inside of that folder, there is like a A really interesting, like, decorator to a file, the plus character. So it'd be, like, plus page dot Svelte, and that's, like, the page of the route. So there's, like, a ton of change right now. So, I would hold off I would hold off, Todd, because rid. I think this is going to be the last big, big change in SvelteKit before it hits version 1, but this is a big change. So If you're paying attention to the SvelteKit landscape, you know, right now, you probably noticed all the discussion about this. If you haven't been, go read the rid on GitHub. I'll post a link to that in the show notes. There's a whole lot there. They're working on a migration script and everything, but It's gonna be part of a big component of when you're teaching SvelteKit the types of things that you need to teach in regards to here. So, Yeah. Hold off for right now and, make sure you you stay up to date with us a little bit. That beautifully

timed question. I'm glad that, rid. That's why I had it. Yeah. Yeah. I was like, yeah.

Okay. This is a perfect one. Yeah.

Next question we have here from James.

Rid do we have for generating PDFs server side nowadays? We use w k h t maul to pdf, Which uses WebKit for layout at work, and the project seems to have been stopped being actively developed and has an old version of WebKit With a buggy 2009 implementation of Flexbox, makes developing templates a pain.

The only viable rid Options seem to be low level libraries that make you call and create blocks and cells, images and text by hand, or installing A browser server controlling it by puppeteer and all the resources that comes with that.

Have I missed a hidden gem when googling a nice CLI that rid. Takes an HTML file and returns a PDF. This is a great question. I like this a lot because, previously doing PDFs And you can see this sometimes when you get the bill from your electrical or your gas company. It's like, those PDFs were generated with some sort of Special PDF software, and it's very hard to lay things out on that.

And ideally now is you just use the things that you know, HTML and CSS, rid to lay it out, and then you click a button and out pops the other end as a PDF.

So what are the possible options on there? So The answer to that is I've got 4 answers here. 1st, a service.

That tends to be the way that a lot of people go is they say, Well, let's just use a service for that.

I'm not a big fan of that because that's another thing you have to pay for. Now you're sending if you're doing, like, receipts or something like that. Your customer's info is now on a third party. I'm not a big fan of that.

Second 1, this is the option I have, is just tell people to Save it themselves.

So I do my receipts and invoices and The, like, the PDF that says you completed the the course, all of that is just an HTML page, and I have instructions on how to do it. In the early rid. Days, I got a lot of people being like, how do I make a PDF of this? I need a PDF to send to my employer. It's like, well, just do file, print, save as PDF.

Rid if that has gone away completely, I because I both have instructions,

but also I think people sort of know that now. So So that's one option is just tell people do it yourself. And, Wes, let me interject here for a quick second. I'm gonna say we do the same thing, but we don't even have instructions

rid on how to do that, and I get no email Okay. At all. So I think it's it's sort of, like, well known now. This is probably 6 years ago. I was getting some Support questions from the how do I make a PDF.

So that is a great approach.

Next one is DOM to PDF.

Rid So if you can do it in the browser the question here says server side.

But if you if you're only on demand. Like, someone's viewing a receipt and they want a PDF version of it, you can dump that DOM into a Canvas element with This library called HTML to Canvas, and then you can take your Canvas and export that to PDF with another library. And that can all be done in the browser, rid. But that's a lot to be putting in the the customer's browser, depending on that working. And HTML Canvas has some issues, not because HTML Canvas, but Canvas itself, you cannot draw a like, if you have a 3rd image on another host, You can't draw that to Canvas because of course issues.

You can't I always love the the warning that you get from Canvas when you try draw like, if you've got scott.com image, and I'm trying to write that on a canvas on west.com, and there's no course, security policies in place.

It'll say it's been tainted, and, like, you can't do that. And I'm like, oh, tainted.

That's that's like poison. So that's that's a okay solution, rid. But I probably wouldn't go that. And the last one here is that what you suggested is puppeteer, or like I did a quick Google and it seems like a lot of the rid. Solutions still use Phantom. Js, which has been not abandoned, but it's been deprecated for 4 years now. Rid. So Puppeteer essentially is Chromium or Chrome running headlessly.

Rid. And then what you can do from that is take screenshots. You can render out HTML pages, and, of course, you can export something to a PDF. So honestly, rid. What I'm going to tell you here is this is a a perfect use case for a serverless function. This is a lot of complexity, a Not necessarily a lot of dependencies, but, this is a bunch of stuff that can be so neatly tied into rid A serverless function. You can still do the rendering of the HTML page on your own server, whatever you're using, but you can make a nice little tidy serverless function It takes in a URL and then renders it out, exports it to PDF, and sends it back to you. So I think that's the approach that you you you should go with here. Yeah. Long story short is it's it's not

effortless. That's for sure. No. Yeah.

And the effortless answer is to just have your users save it themselves if if that's cool with you.

Alright. Next, actually, maybe we should take a quick second to talk about one of our sponsors today, Prismic West. Do you wanna dive into Prismic?

Yes. Prismic is a headless CMS that's gonna turn your website into growth engines. So Prismic is a hosted service. You sign up for it, and right away, you can go ahead and start modeling your data. Rid. And you sort of model your data into pieces of data. People,