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

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

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, rid. But I probably wouldn't go that. And the last one here is that what you suggested is puppeteer, Rid if that has gone away completely, I because I both have instructions, Mhmm. And that's great because And what will happen is it will first check that APIs can either be slow or APIs can be limited. And generally, like, I'll I'll give you an example. I

previously doing PDFs And you can see this sometimes when you get the bill from your electrical or your gas company. It's like, 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 fetch currencies.

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

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

images and text by hand, or installing

implementation of Flexbox,

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

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,

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

I do my receipts and invoices and I would then fetch this rid Outside of the scope of Sixty times a day or something like that. And if I were to hit that every single time I I loaded the page, to Syntax,

depending on that working. And HTML Canvas has some issues, not because HTML Canvas, but Canvas itself, those PDFs were generated with some sort of Special PDF software, and it's very hard Yes. This is an awesome question, and this is very, very common because 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 a and the data will give me rid The data that was returned from the API, 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

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

you cannot draw 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.

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

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.

security policies Not necessarily a lot of dependencies, but, So what are the possible options on there? So serverless functions will hold memory for,

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

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

and there's no course, rid. I I forget what the thing is, but it it will hold it for at least 40, to lay things out on that.

dump that DOM into a Canvas element with This library called HTML to Canvas, 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.

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.

The answer to that is I've got 4 answers here. 1st, a service.

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.

in place.

that is a great approach.

Alright. Next,

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, putting in the the customer's browser,

makes developing templates a pain.

Rid do we have for generating A really good one about, like, caching rid API and speeding up API data.

Next one is DOM to PDF.

So

But if you if you're only on demand. Like, someone's viewing a receipt and they want a PDF version of it, where you fetch the data, you create a variable, Alright. Let's rid. Get on into it. 1st question is from Chris f. I'm working on a Jamstack, and that object will have 2 properties, a date 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.

a like, if you have a 3rd image on another host, You can't draw that to Canvas because of course issues.

So the course,

Okay. This is a perfect one. Yeah.

you could have, like, an about dot svelte in your routes folder, And that would be an about route. And so now

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,

how

make sure you you stay up to date with us a little bit. That beautifully

I would hold off I would hold off, Todd, because

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

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?

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, And the days before,

yesterday 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

from using SvelteKit West, you have, like, the context module, works. You may you might remember

with Todd. Todd says, I've been getting into Svelte and SvelteKit the last couple of weeks, and I'm really loving. I'm considering, I know our host, like render.com,

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

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,

of change right now. So,

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 effortless. That's for sure. No. Yeah.

Next question we have here from James.

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.

you know, one of the things that they're wanting to do load functionality is to get Socket to be

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, 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

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

made major SeltKit API changes. So,

So, like, in the past,

proxy.

or or or sometimes rid I I do an object, 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.

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 We've got some really good questions for you today.

rid Er, from Todd. Next question is from Todd, not James.

have a, rid Options seem to be low level libraries that make you call and create blocks and cells, PDFs 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.

it can be really easy if you have a, and We have some some issues

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, rid Doing physical stuff is hard.

50, sometimes even a couple hours.

currency conversion API, you can

And in your case, it's probably a good good idea as well. A serverless function is a great use case for this because, Exhausting. Yeah. We just got off

If so, is it

and then generally, I'll have another function that says, like,

object to see,

Rid We use Redis for this type of thing on our on our site. So, basically, there was

and I'm only allowed to hit it server side nowadays? I'm not a big fan of that because that's another thing you have to pay for. Now you're sending this is a bunch of stuff that can be so neatly tied into 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.

is there data in here? And The, like, the PDF that says you completed the at the very, ready. Basic. This can simply just be a variable in 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

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

a vacation.

app that fetches JSON for a from a third party API.

No.

because so I could be doing better. We'll just say that.

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

With me as always is mister Scott Talinski. We both just got off a week of vacation. How you doing? Hey, rid type your question in the box, and we will answer it on the podcast.

A 3 year old and a 5 year old. It's not really 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,

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

with

like I needed another week to recover from kind of an epic vacation. But Vacation for your vacation?

But, yeah, for the most part, everything's been great, man. We got to we were just in Hawaii. We were in Oahu

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 the fam and and Travis Nielsen and his family, and it was just super cool.

We had a child emergency room trip,

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, that a date property The only viable

actually, maybe we should take a quick second to talk about one of our sponsors today, When when you have a vacation unique to SvelteKit. This is, like, file based routing overall. Right? The load function

Prismic West. Do you wanna dive into Prismic? 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

How do you generate a PDF on the server side 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. However, this API changes multiple times a day and takes a couple of seconds in your server or in a serverless function. So what you can do is A browser server controlling it by puppeteer and all the resources that comes with that.

Svelte and SvelteKit.

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.

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

Top right corner is a button. You can smack it and, rid. And a data property, and the date will give me the date that that data was last fetched, And headlessly.

These days, our PHP CMS is better than JavaScript CMSs.