Automating Podcast Audio Delivery with Cloudinary, Next.js and Sanity

Sam Brace: [00:00:00] Hello everybody. My name is Sam Brace and I am the Director of Customer Education here at Cloudinary. And you are watching or listening to DevJams. This is where we talk with developers who are doing amazing, innovative, inspiring things in the development space. And because we work at Cloudinary, they are probably using Cloudinary in some way to be handling the imagery, the videos, or some form of digital media in those amazing projects.

Joining me for every single one of these episodes is Becky Peltz and she is the curriculum program manager for developer education here at Cloudinary. And if you’ve ever gone through anything with our Cloudinary Academy or seen anything where we’re teaching you how to work with digital media, she’s probably been behind a lot of various aspects of it, if not right in the forefront.

[00:01:00] So Becky, I am so happy to have you here as always.

Becky Peltz: Hey, glad to be here, Sam. It’s always fun. And you mentioned we were really involved in visual media, but in this one we’re gonna get to have some audio media. So that’s something we really haven’t talked about before. And I think as people are introduced to what we’re gonna be sharing, the application Compressed.fm.

Listen to it cuz it really does sound good. It’s really good.

Sam Brace: I completely agree. And it’s a very good point that you’re raising here, is that many times when Cloudinary talks about itself or when me, or you are talking about Cloudinary, we typically talk about images and videos. But today’s guests, Amy and James, who run the popular Compressed FM podcast, and it’s amazing how much content they’re putting out there, but it is to say that they’re using Cloudinary for some interesting things, including audio delivery and lots of things are tied to audio as well.

So it’s definitely a new use case. So if you ever [00:02:00] thought about how audio can be tied into a project, whether it’s podcasts or something else, I think this is gonna be a, definitely a good education resource for people.

Becky Peltz: Yes. And pay attention too to how they automated it, which is something that Cloudinary really lends itself to.

Sam Brace: That’s a good point. Me and you, I think we talk about web hooks all day every day. So this is another good case to talk about notifications and automations and a way to make sure that you do it once and you have all these various ways to make sure it happens consistently and in a way that you don’t forget a certain step along the way.

Yeah, there’s lots of wonderful things that we’re gonna tie into this overall episode, so I’m so happy to have this happening at this time. Now, before we do let Amy and James come on in and tell us all about what they’re doing in the development space and of course to talk about their fabulous podcast.

I do wanna quickly point out that if this is your first time ever participating in a DevJams episode in any form or fashion, whether you’ve watched them live, whether you’ve [00:03:00] listened to them recorded, whatever it is, always know your dedicated space for going for these episodes is gonna be at Cloudinary dot com slash podcasts.

That’s where we have full archives of every podcast as we’ve ever put out, including the latest ones. And as you’ll see when we go ahead and take a look at these, this is where you can watch all the past episodes as well as have links to all the places where we are typically syndicating them. That includes YouTube, our own Cloudinary Academy.

Also in places where it’s listen only, such as Spotify, Apple Podcasts and Google Podcasts, and I would be amiss if I wouldn’t talk about also the up and coming Cloudinary community. This is a place where after this podcast episode is done and you’ve listened to it, a great place to continue those discussions is over there.

And that’s where you can be talking with other Cloudinary users as well as people that are in development space that are working with digital media as we’re going to be talking about today. So with that said, I’m gonna bring on our friends, Amy and James, [00:04:00] and let’s hear a little bit more about what they’re doing with their podcast program.

So Amy, James, welcome to the program.

Amy Dutton: Thank you.

James Quick: Glad to be here.

Sam Brace: So for those of you that are not intimately familiar with all the work that you’re doing, they’re not following all the little details, I would love for you just to give us a little bit of detail. Who’s Amy? Who’s James?

Amy Dutton: Yeah, so my name is Amy, if that wasn’t obvious. I am the Director of Design at Zeal.

James Quick: Amy, I thought you were gonna do your famous intro that we do on the podcast. There you go. and I, no, I’m James. So I am a full-time content creator as of, I guess it’s been about six months. So I’ve got a history in DevRel and development and been doing content for a long time, and now I get to do that as my job, which is pretty amazing.

Sam Brace: So what got you guys together? What got you guys thinking about the overall aspects of doing a podcast? Why’d you go down this for thi this path to be able to start putting out content this way?

James Quick: Amy ? [00:05:00]

Amy Dutton: Yeah, so podcasting is something that I wanted to do for a very long time, and some of it was I just didn’t have a monologue and record by myself.

And it took me a while to figure out exactly the format and what I wanted to include. But James had actually reached out to me. I had started releasing YouTube videos and had my own YouTube channel and he had seen the work that I had done and asked me to be a part of his livestream. So we had a great conversation and I messaged him after our livestream and said, Hey, do you wanna do a podcast together?

And my favorite part of the story is he said, no. Actually he said, probably not. And he asked me to write a proposal and explain what I had in my head, what I was thinking, what it would entail, the budget and all those different pieces. And so I wrote up a nice proposal. I’ve been doing freelance full-time for seven years so I can write up a great proposal.

So I wrote him a great proposal and he came around and said, okay, let’s do it. [00:06:00] So it’s been two years in the making now.

Sam Brace: When, and as I’ve seen like we’re like over a hundred episodes in, so it definitely is where something seems to be going right.

Becky Peltz: Yeah, it must be the automation. You couldn’t out my hands so quickly.

James Quick: there is a lot of…

Amy Dutton: Definitely helps.

James Quick: Yeah. There’s a ton of administrative work that goes into doing anything consistently, which is something we’ve both learned and try to help solve some of those issues. So we have Ashley, an intern that does video editing and some of the publishing and stuff, but then we’ve automated some of the stuff we’ll talk about in the episode to help make that process as easy as possible and keep going for hopefully another hundred episodes over the next couple of years.

Sam Brace: Yeah I’m hoping so as well. And for those that aren’t familiar with the content that you guys are putting out in Compressed, it seems to be almost similar to what we do here at DevJams where you’re talking like your developers and you’re talking to developers. Am [00:07:00] I correct about that?

Amy Dutton: That’s right.

Sam Brace: Yeah. So what are some of the topics that you guys are diving into at these times?

James Quick: I was gonna say the general tagline is web development and design with a little bit of zest, which is the marrying up of different skillsets, which I guess Amy has both of those and I just have one. So I guess it’s really taking advantage of her design background.

But recently we’ve been doing guests on our episodes where we bring people on and talk about different products, things they’ve learned, opinions that they have on the ecosystem, and web development and JavaScript and accessibility and all different kinds of fun topics.

Amy Dutton: Yeah…

Sam Brace: It’s definitely an area where I’ve seen, like some of the guests that we brought on, maybe actually been some of the guests that you’ve had on.

We recently had, one of our favorite episodes recently was with Brad Garropy, where he was talking about the work he’s done with Markdown and being able to work with that in many different ways, including Cloudinary in it. And of course I know he’s been a guest on your effort. So it’s definitely, there’s a lot of synergy between I think what you’re doing, what we’re doing and trying to [00:08:00] provide a space for developers, designers, people that are in that area to have a medium.

Yeah. So let’s talk a little bit more about Compressed. So I know that you, we’ve alluded to it in a few different ways that it’s where you’re doing the podcast episodes, you’re producing them, but there’s some form of automation that’s taking place there and ways to produce it. It seems to be tied to Cloudinary in some ways.

So talk to me about

James Quick: that process.

Yeah, you wanna ?

Amy Dutton: Yeah, I can talk about the basic stack that we have running. From a companion piece, we have the website is built with Next and we have Sanity running on the backend and then we’ve created automations to be able to post to Sanity and some of those automations include the stuff that we’re using with Cloudinary.

Then we also have automations in how we’re managing the project on our end. That [00:09:00] includes file management, includes creating show notes and things like that. So when we first started the podcast, James and I were both working full-time. I still have full-time job with a company and James is still working full-time, he’s just working full-time.

James Quick: She likes to say I don’t have a real job, but that’s cool.

Amy Dutton: True, but those automations and those things where you can lean on other technologies and places that do those things for you, you almost need those in order to have the consistency that we’ve been able to have.

Becky Peltz: Yeah. Could we take a look at your compressed fm just for anybody that hasn’t seen it and, just kinda get familiar with the pieces of it that we might be looking into here?

James Quick: Yeah. Do you want to see the website and dashboard or I guess the website first? Or do you wanna look into your code first?

Becky Peltz: Let’s take a look at the website and then as we’re looking at it, we can point out the pieces that we’re gonna look at code of, so that…

James Quick: Yeah.

Becky Peltz: [00:10:00] …get a context here on, on what you’ve got going.

James Quick: Yeah, absolutely. I will start by saying one of the things that was particularly noticeable and interesting about working with Amy originally was her background again in both design and development. So the design here is a hundred percent credit to Amy, which I think is pretty incredible.

Sam Brace: Agreed.

James Quick: Yeah. But so we have like basic homepage. We have an highlight episode at the beginning. So this is the most recent episode. So as we publish an episode, it will kick off. We’ll kick off a build in Next.js. And it’ll show the most recent content here and it shows a few extras.

And then you can go to the entire list of episodes. But a couple things right here that are important. One is this image, here is the image that gets uploaded with the audio to the pod catcher which is, or the podcast host, which is Simplecast in this case. And so that’s the image that’s gonna show up when you listen to the podcast on your [00:11:00] phone, for example, or wherever you listen to it.

And so that’s actually automatically generated based on the metadata for the episode, the episode number, the date, the title, who the hosts are for that episode, and then the name of the guest, if there is a guest. And then there’s a separate image we’ll show, we’ll talk about more in a second.

That’s more of a social image. So we can use this as the cover for the stream on YouTube and use that to share on social media. So that’s another one that gets automatically generated. And then we’ll go into the episode details on the player that I think Amy will talk about, cuz she built this from scratch, which is pretty incredible.

There’s a waveform image that we actually leverage Cloudinary for to generate. So if you, fun fact, if you give audio… Cloudinary an audio file, you can then use a URL to get a waveform image of that audio, which is pretty amazing. And then we include that here.

Sam Brace: That’s a, it’s a good run through of it.

And [00:12:00] it’s, I think it’s one thing that it’s almost Easter egg-y in some ways, the way that you’re talking about the waveform, cuz it’s, as we’ve talked about, audio is not normally something that we always lead with when we talk about Cloudinary. But it is also to say that it’s something where, unless you’ve gone deep into the documentation, you probably have never seen that.

So I love the fact that you took something that’s, it was built, probably didn’t have a ton of user requests. It was something that we built because it was interesting and cool and it’s where you were able to incorporate it into a real workflow. So that’s amazing.

Becky Peltz: And then again, this app is your Next.js app where you’re rendering static pages for this. So that’s what we’re seeing?

Amy Dutton: Yeah, that’s right.

Sam Brace: One question actually that just came up from the community that I want to ask you about with the Next.js and also the Sanity side of things, and I think also one thing that I would love for you guys to do is this is, I think this is the first time we’ve talked about Sanity in general on a DevJams podcast.

It might be new to some of our listeners, so if you could give some detail about what [00:13:00] Sanity is? But is there any automations that’s happening on the Next.js and the Sanity side for this to all take place?

Amy Dutton: Yeah. So Sanity is a headless content management system, and the nice thing about it is it’s built using React.

So if you wanna create any custom components or custom content types within Sanity, you’re just writing a React component, which makes it incredibly flexible. So the way that we are running the automations with Sanity is there’s some post hook calls so that when you publish, say an episode within Sanity, that will trigger a set of code to run a series of actions.

And so that’s how we are saying, Hey, we’ve plugged in the information that you need in order to build these images. Now go and build the images, and then that’s able to kick that back to Sanity.

James Quick: And the… so part of the question was how is Next.js specifically involved? Ideally, what would happen is that webhook would be a URL that is part of the Compressed FM website that you see here.

That’s in San… or in [00:14:00] Next.js. The one issue I had, and we can look at the code more in a second, but the one issue I had was in a serverless function with Next.js hosted in a Vercel, I wasn’t able to upload images directly back to Sanity. So after we generate the image in Cloudinary to then upload that to Sanity.

So the moral of that story is instead of having the web hook call an API endpoint in Next.js, it actually calls a separate project that I’ll show you the code in, which is a standard Node application. So same idea triggers a web hook in this Node Express application that then does checks to say, do I have all the data I need, and have we already generated these images before?

If the answer is yes, and then no, it will go ahead and generate the images that we just talked about. So the cover image for publishing on the podcast, the social image that we can use on social and YouTube covers, and then the waveform image for the audio player.

Becky Peltz: And these social images, many of the, and the one that we’re seeing here, these are done using Cloudinary [00:15:00] transformations. Correct? You’re doing overlays and things.

James Quick: Yeah. Yes.

Becky Peltz: So can we look at that?

James Quick: Yeah, absolutely. This is… I’ve started doing this several years ago with a similar idea of, I had the stream that Amy joined me on actually, where I was tired of generating images in Figma every time, which isn’t that big of a deal, but it does take time.

And so the idea is you already have all the data there. It’s gonna go in the same spot every time. It’s gonna have a guest image, an image of one of us, et cetera. It’s gonna have basically the same type of information. You just need details. So basically creating a template in JavaScript for the different transformations, for the different pieces of text and images, and then having it run through and generate it from then on.

Now I don’t have to do anything to support that.

Becky Peltz: Yeah, it looks great. There’s definitely a…

James Quick: Do you want to jump into the code for a second and see?

Sam Brace: That would be great. Good segue there, James.

Becky Peltz: Cloudinary code, also real interested in the code for creating this audio player that Amy did.

James Quick: Yeah. [00:16:00] So I’ve got my screen open now and then after we do the automation piece, then we can switch over to Amy’s screen and have her do…

Becky Peltz: That’s good. Yeah.

James Quick: The… the other piece with the audio player. So…

Sam Brace: Before you jump into this real quick, I, one more question that did come in because we have lots of people watching, which is wonderful. But somebody they did ask here, so the images that are being created with Cloudinary, are we being served with Sanity CDN?

Where, what’s the CDN aspect of what’s being happening here?

James Quick: Yeah, so part, I’m not sure if this is true. Sanity may actually use Cloudinary behind the scenes. I’m not sure about that, so don’t quote me on that. But the images that are in the website are being served from Sanity and it’s for a specific reason.

So we have all of the information about the episode inside of Sanity. And so to keep that information all in one place, I generate the image inside of Cloudinary and then just upload that to our record in Sanity. That [00:17:00] way, Amy, myself, or Ashley, we don’t have to go to multiple different places. We have all the information right here.

Again, I don’t know if Sanity actually uses Cloudinary behind the scenes. I’m not sure, but it has a similar functionality set of adding query parameters to get optimized images. But the only reason those are actually replicated over is just so we have them in one place. You can actually see in the past, I may have gotten rid of these, I can’t remember.

One second. Here we go. We have outdated inputs here, which are just the U… URLs for the generated Cloudinary image. So at one point we were just storing the URL to that in here and then serving it from Cloudinary, but then again, to have everything be in one place, copy those images over, and now they’re coming from Sanity, but all generated in Cloudinary.

Sam Brace: Got it. Perfect. And an amazing detail of that we’re able to show here in this case. Yeah. Sorry to interrupt you there, James.

James Quick: You’re good. Yeah. Perfect. So as I mentioned, the… the main code for this is a [00:18:00] Node TypeScript Express application. So if you’ve done Node and Express and TypeScript, this is all kind of boiler plate code to get the server started and running.

And then mostly we have one endpoint, which is the API Sanity episodes callback. So inside of Sanity, you can configure a callback and then also tell it for what type of data you would like to receive callbacks for. So in this case, we’re only receiving, it’s configured to only send web hooks to this web, or calls to this web hook, if information and the episodes of the episodes type is published.

So from there, we do some verification to make sure that the data that’s coming in is secure, meaning it’s confirmed that it’s actually coming from Sanity instead of some outside person just sending a request to our server. So we’re protecting ourselves there. And then we extract the pieces that we need from the actual episode.

And then based on that, we’ll do checks. So if there is no episode at [00:19:00] all, or if it doesn’t have an ID or host or a published at time, we’ll just go ahead and ignore it. Then we have this check that maybe I’ll come back to of automation failed, probably be a good idea to come back to this. So I’ll do that in a second.

And then we just start to check kind of piece by piece. Have we done these three automation things already? So those three automation things are the waveform image, the social cover, and then the episode cover. If we haven’t already done them, we generate waveform, we generate social cover, and we generate the regular cover.

Then we get into the utils, the cover image file, and utils, which actually does all the hard work here. And this will look like a lot of code. It’s a lot of, not boiler plate code, but it’s repetitive. It’s just moving text and images in different places. So if we come to one of the long ones, [00:20:00] let’s see, one of these, for example, we start with an empty kind of transformation array.

We get the guest image name, and then we upload that image to Cloudinary. So we want, as we like layer on the different pieces of… of the episode that we need for this article or this image, we’ll take the guest image, we’ll take their name, and then we’ll add on these transformations and then add on any other transformation.

So there’s some logic in here to determine how many hosts do we have, and then if we have one host or two hosts or three hosts, centering those images in the right spot accordingly. So it’s basically just like X and Y coordinates and font sizes and images to move these things around and have them show on what is a blank template behind the scenes.

If I could actually pull that up here in a second and show you what the starter image is, and then you’ll see the supplementary images that go along with this. [00:21:00] Fun fact…

Becky Peltz: This Node.js SDK then that you’re running, you’re showing us.

James Quick: Yes.

Becky Peltz: That’s the code that you would use for that.

James Quick: Correct. So somewhere at the top of here, I’ve got a file for configuring that.

Actually, no, this is the one that comes from… yes. It pulls in that package and then we export a configured client to be able to use in here. If I go into my media library and into, let’s see, the compressed folder. We’ll see a bunch of different guest images. So guests, when they fill out the information to come on the episode, will send us a URL to an image.

Usually it’s like their Twitter image, et cetera. So we’ll take that image, we’ll upload it to Cloudinary so you can see here’s all the guests, we also upload all of the audio. So the audio after it’s uploaded to Simplecast, we save the URL to that [00:22:00] audio and the episode. So here’s the audio path. Take that audio, throw that up to Cloudinary, including the guest image.

And then somewhere in here is the base for the cover image. So you can see this has the logo, which is never gonna change, and it has the featuring section, which is never gonna change. So we just take these other pieces and just throw them on top. At the end of that, we get this really long, fancy transformation URL, which represents the image plus all the transformations on top of it. And then we take that URL and upload it back to Sanity again. So we have all that info in one place.

Becky Peltz: Wow. That’s great. That’s really neat.

Sam Brace: What I loved seeing is like when you were showing your code, like some of the, like the best transformations that we have, like they’re getting used in this overall thing.

So like, the fact that you were using like radius max to get the true full circle when they’re bringing the information through, being able to apply a border without any CSS. There’s just, there’s, this is an awesome [00:23:00] transformation set for… it’s great.

Amy Dutton: Well done. James.

James Quick: Thank you. I, I need all the approval I can get.

I’ll mention one other thing. This is less specific to Cloudinary, just like in the interest of how webhooks worked or how webhook, how webhooks work in general. One of the problems with doing any of this stuff is if you go through and make a change and save that, that then is considered another publish.

So then you have this potential infinite loop of if I try to make a change, something failed, but something also got saved, it then calls back to say, Hey, this thing has been published, but the actual image didn’t get uploaded. So if, for example, it was doing something else that worked successfully, the second thing didn’t work successfully, it’s gonna call back, then handle that again.

So what I did was added a property to each [00:24:00] episode, just a boolean, a checkbox to say whether or not the automation for this record has failed in the past. And if you look inside of Sanity, it’s all the way at the bottom, but there’s the flag here. And basically what we say is if we get a web hook for something where the automation has failed, let’s just ignore that.

Let’s not go through this infinite cycle. So you’ll see if there’s an error somewhere, we’ll update the episode and we’ll pass in the automation failed, true. And then here’s my very amazing debugging error statement, to admit that I don’t have all the answers, but at least I’m preventing this infinite loop of circling back and forth to from Sanity and then calling into the Node.js application.

Sam Brace: Oh, I love it.

Becky Peltz: That’s a really good technique. I think you have to have done a lot of web hooks to run into that problem, after doing one or two and they’re successful. You wouldn’t see it. But that’s really good. Yeah. Good information there.

James Quick: I’ll show you really quickly, and then I’ll let Amy do the [00:25:00] the actual audio player, which is really amazing.

So just the way this works, and this is a live demo, so everyone please send up your prayers to the demo God. But I will, I know, I will delete each of those. So I just deleted the episode cover, the social cover and the waveform. And so what’s gonna happen when I publish is it’ll send that web hook off.

This is actually hosted inside of Render, which I’m on the free tier, so if I haven’t run it recently, it will run extremely slow the first time. But I ran it once to prime it for the stream and then it logs out all the things that it’s doing. So you can see here these are previous ones of where it didn’t have an audio path, so it generated it, it did have the other two, so it didn’t generate those.

And then when we come back, may have to wait just again cuz it’s on a free tier. Didn’t have anything to do with Cloudinary to be clear. It’s just that this is a, like a very cheap tier of hosting. When we come back here in a minute or two, you’ll see those [00:26:00] images will come back and look exactly the same because the data themselves haven’t changed.

Becky Peltz: Yeah.

Sam Brace: It’s pretty slick what you’ve got going on here, and I think this is a wonderful behind the scenes to see how this is all taking place. One question I had for you, so about this, like when you’ve gone through the process of working with Sanity, working with Cloudinary, other aspects of this, was there any roadblocks that you found when you were implementing something like this where you’re like, oh, if someone were to try to do this, they’re gonna come up with this situation that we overcame?

Anything like that?

James Quick: The web hook recursiveness was definitely something to keep an eye out for. The other was trying to upload images and serverless functions. I couldn’t figure out a way how to do that, which is why we ended up separating this code out into its own Node.js project. If this was, if I could figure out the piece I’m missing to just do this inside of serverless functions and the API endpoints and Next.js, it would be [00:27:00] way cleaner and much easier and also be much faster because again, free tier on Render.

I think it’s like still waking this up, which whatever, so those are a couple of the things. The one thing that is a little tedious initially is figuring out for these transformations, the dimensions and positions and things you want for your text and images. So it’s a lot of, it’s a lot of sending it data, generating image, opening that image, okay, this doesn’t quite look right, then like moving things a few pixels at a time.

So that’s one of the things that’s a little tedious. But again, after you have everything looking in the right spot, then you’re good to go. The other like additional thing that took some logic in here, if you look at I guess one of the other ones that does have images since we just deleted the other two.

If you look at these, we like, we split the text of the name to do a different color for the first name. And if you look at the images up here, we [00:28:00] like position these differently based on how many different hosts we have, cuz it may just be one of us doing an episode. It may be one of us and a guest, it may be two of us and a guest.

So doing those images just as extra logic to figure out mathematically where do we actually put those images on top. So that stuff is fun, honestly, to do. But again, after you have it set up, then it just runs after that.

Sam Brace: Yeah, I agree. It does take a hot second to be able to come up with the templates and get all of that going.

But I, I also agree that being able to like slightly adjust the X and Y coordinates to see exactly there, there is some fun and there some level of I don’t know, like science that you feel like you’re doing when you’re going through that type of process. So I a hundred percent echo what you’re saying there.

Becky Peltz: Oh, hey, I’m gonna share a, an npm library that Colby Fayock, one of our developer relations shared with me that might help you get this image upload into a serverless function. So it’s the lambda [00:29:00] multipart parser. And I think the big problem always with uploading images that they’re gonna go in as multipart, which you have to, they have to be separated out by boundary, and it’s hard to find some.

Anyway, this Lambda Multipart parser, something to look into for uploading images.

James Quick: Yeah.

Becky Peltz: And yeah, happy to share more on that, but yeah.

Sam Brace: So how’s Render doing over there?

James Quick: Yeah, I was just wondering if we should switch over to Amy first. Let’s see if it’s come through yet. No, we haven’t gotten the log either again.

Render just sleeps. I thought I’d prime this enough for it to be ready the second time. We also need, or I need to just pay for the $7 a month tier where it never goes to sleep, but being cheap has its price. Do we wanna switch over to…

Sam Brace: Yeah, absolutely. So let, so James, I’m gonna pull your screen down and then Amy, I’m gonna pull yours up.

Amy Dutton: Perfect.

Sam Brace: And we can talk about some of the automation that you’re doing on your side.

Amy Dutton: Sure. And I did wanna point out you can [00:30:00] look at that and say, man, it’d be easier to do that in Figma. It takes about five minutes, but when you compound that times 100, that’s 500 minutes, which amounts to eight hours over times.

So really, this is a huge time saver.

Sam Brace: Absolutely. And that’s a hundred percent true is that the one thing that I think that Cloudinary provides. It’s not to say that we’re a competitor to Photoshop or Figma or any of those other types of tools, but it does allow for you to take a lot of those concepts and scale that across especially from a development environment. So in many ways we’re like peanut butter and jelly, depending on how you look at it. Like we’re great separately, but together it can work really well.

Amy Dutton: Yeah.

Sam Brace: And be able to combine a lot those concepts in one overall project.

Amy Dutton: Yeah, for sure. And even that base template was something we created in Figma.

We were able to use that and use Figma to determine what those dimensions were that we needed. And then it just made it easier when we came over to Cloudinary.

Becky Peltz: Yeah. Yeah. [00:31:00] You kinda need to have that initial layout and do the automation. But yeah.

Amy Dutton: In terms of the audio player itself, and then we can talk a little bit more about automations and it doesn’t look like.

That’s interesting. This is showing diff, oh, sorry. One moment.

There we go. My entire screen. There we go. Perfect. Awesome. This will allow me to switch back and forth. Now, I wanted to point out that there are several different audio players that we’re using throughout the site. So this is on the homepage, there’s this featured audio player, and then if you click in, there’s another audio player here.

And I think, oh if you. You can’t see it here, but for our sponsors, they get a dashboard that has all of the information for their episode that they sponsored. There’s [00:32:00] another audio player for that highlights where their ad read is happening so they could jump to that specific place. So there’s several different audio players, and the way that’s working is that we have hooks fi… folder here that has all the logic for creating the audio player.

So the cool part about this is even though we’re using React, it’s still using a lot of the logic that you get from the web API. There’s a audio… audio functions and things that you can call in order to be able to access that information about an audio file. So this hooks file is running the same logic for all of the different audio players that we have.

And then inside here, I’m importing the functions that I need for that particular player. What’s interesting, and I didn’t realize this until I got into it, and really the only reason I did this is because I am a designer at heart and want things to look just right. And since I designed something, [00:33:00] I couldn’t find a player that matched what I wanted.

So in order to have that level of control, that’s why I ended up building my own. But what’s cool is within HTML, you get a type, an input type of range, and that’s really what’s controlling the playhead there because then you can drag and if I come over to the browser here, you can actually drag this playhead around.

That’s just a range slider, and I can go ahead and grab the value. And so this is based on a percentage of the length of this particular audio clip.

Sam Brace: That’s really slick.

Becky Peltz: That is so cool. It’s normally, like when you’re playing a video, unless you have some special kinds of transformations going on, you can’t jump around like that, but

Amy Dutton: Right.

Becky Peltz: You’re able to do this because you’re using a combination of percentage and then the audio API in the browser. That’s what I’m

saying.

Amy Dutton: That’s right. Yeah, that’s right. That’s, and that audio API will give you the ability to say, connect certain buttons and you can style what those buttons [00:34:00] look like to be able to control the, say, forward backward motion.

So this is just, Hey, add 30 seconds to the time of where you’re at right now. Add 30 seconds or remove 30 seconds. I can also, once you get to the end, it can know that you’re at the end and kick it back to the beginning. You can also within the web API be able to control playback. So you can make it two x or one x or whatever you’re looking for.

James Quick: Or four x if you… sometimes

Amy Dutton: Oh man. It drives my kids crazy when I listen to it at two. Actually. Like, why do they talk like that?

James Quick: My nephews make fun of me when they get in the car and I’m listening to a podcast.

Becky Peltz: I’ve realized that people do listen to things, speed it up. So now I talk a lot slower, and recording.

Amy Dutton: What’s funny is we record live on Fridays usually, and we’ve had some people jump in that have listened to us [00:35:00] on their pod catcher of choice and they’re like, wow, being with you guys live is so chill. Talk a lot slower. Kinda funny. Yeah. As James pointed out, this album image is being processed through Cloudinary and sent over as well as the waveform that we’re able to pull in.

And really you said that was in the deep deep caves of documentation. Part of that is I was trying to figure out how to do it, and that’s not something that you wanna pass over to the client. You don’t want the browser to have to do that when it’s already having to download the audio files and handle other things on the page.

You don’t wanna pass that off to the browser. So really you need to handle that on the server. And I just thought, oh man, this is gonna be so rough. And as I was googling, Cloudinary documentation came up and said, Hey, you can send me the audio file and I will give you what you need. One thing I do wanna point out that’s actually very cool is you can also, when you pass that over to [00:36:00] Cloudinary, you can tell it what color you want the background to be and what color you want the waveform to be.

So you’re not just locked into, in this case, gray on gray. You could do black and white or purple or whatever your heart’s desire is. You’re just passing over a hexadecimal value.

Becky Peltz: That’s what really slows you down though, is trying to pick a color.

Amy Dutton: Yeah. Cool. Do you guys have any questions or I can jump over to the Plop and do some of the more automation pieces?

Sam Brace: I’d love to see the Plop…

Becky Peltz: …play a little bit. Would you? I don’t know if that would be, oh, just cuz I think it, it’s cool to see it. I don’t know.

Amy Dutton: Sorry Becky, I missed the first part.

Did you say…

Becky Peltz: …up the play button and just give a little shine?

Amy Dutton: Okay. I think I do. Let’s see. Do I have this? Making sure I will unmute.

James Quick: It’ll probably still won’t bring audio through here.

Amy Dutton: Yeah. It won’t bring audio through.

Becky Peltz: It’s not bringing audio. Okay. No.

Amy Dutton: That’s a bummer. [00:37:00]

Becky Peltz: Go out there. Listen cuz there’s some really good stuff on there.

Amy Dutton: Oh, thank you. And Colby, you mentioned him earlier. He has been a guest on the show, so you can check out his episode specifically.

Becky Peltz: Will do.

Amy Dutton: Cool.

James Quick: By the way, behind the scenes, Render decided it was a good time to do a full restart of the application. But the images did just come through. So it does work.

Usually I do this when I’m not in a hurry, but probably still need to upgrade to a paid.

Becky Peltz: No, I like people working with the free tiers, yeah. Cause it’s a good place to experiment and then you, if you can get your whole, the automation running with it, that’s great.

Amy Dutton: So the Plop stuff really came from Brad Garropy, and I think I have his episode.

I was just gonna search for it really quick. Yeah. Episode 68 with Brad. And you mentioned that Brad was a guest on the Cloudinary podcast a few weeks ago, but in this episode, and this is actually one of our most popular episodes, he talks about all [00:38:00] the productivity and automation stuff that he’s using to make him as efficient as possible as a developer.

And so he talked in this episode about Plop. So when I looked into it, I went deep on it. And the cool part is you can just download their library and then you basically just send it a string of commands. So the two ways that we’re using it, or that I’m using it is on my machine. I’m using it to do all the file and folder management.

So when we record a new episode within the terminal, I just say CFM for compressed. And if it’s live, I type live. So I can actually just show you what this looks like. I say C F M Live, then it will ask me, what episode number is this? I’m gonna say 200, just so that it’s out there. Short name for this episode.

I’m gonna call this Cloudinary. And then if you look over here, it just created this folder structure. So I have a folder here for audio. I have a folder for covers and [00:39:00] social and text and any other assets that I wanna use. The other way that I’m using it is, lemme make sure I get the script’s name right.

So if you come into package dot json, you can see these are all the scripts that I have. So I actually have a different one for, if it’s just me and James recording, it’s gonna create a different folder structure than if we’re doing a live episode. But I can also say new notes. That’ll work. Nope. Oh, yarn run.

I’m not sure if I have this one set up. Give me just a second. So let me show you another piece behind the scenes here is for this particular script that I ran earlier with C F M, I have an alias set up with ohmyzsh. And so here you can see if I just run this script instead, which makes it really nice, so I can just say CFM show notes and that will run.

So you can see really…

Becky Peltz: …really cool thing about working with the [00:40:00] command line is that then anyone using your command line tool can then make their own name for the thing.

Amy Dutton: Yeah, that’s right. That’s right. So you can see that this is actually what it’s running behind the scenes. So I was saying yarn earlier, it’s using N P M and then it’s u… running an absolute path to that particular directory.

And then it’s saying run the new note script. And you saw here that this is the name of the script that I’m running. So in this case it’s gonna ask me which episode do I wanna add notes to. So I’m gonna put this on the Cloudinary episode and we can say that Zeal, Vercel, maybe DatoCMS, let’s just do all of them.

So we’re showing no particular preference. So if I hit enter, what that does is it should, yeah, let’s see. Nothing to repeat. Let’s see if it, we can troubleshoot live if this isn’t working. But what that du… did was it created an episode show notes. So if I come here, here’s my show notes. This is written with Handlebars and so it starts off the file for me using Markdown.

So I’m gonna add my show [00:41:00] description up here, I have my timestamps and then I have sponsors. So the reason that it asked me what the sponsors are is then it comes into the sponsors folder, and I have a Markdown file for each sponsor that we have. And this has the information for that sponsor that they’ve provided that needs to be included in the show notes.

So it’s gonna go in and grab all of the sponsors that we need and stick that in the show notes file for that particular.

Becky Peltz: This is just great. We should be learning from this, Sam.

Amy Dutton: This is open source, so you can take it and grab it.

James Quick: I was just gonna say, we should monetize this, so take it down from public.

Becky Peltz: Podcasts, that, that would probably appreciate it.

Amy Dutton: That’s funny. With Plop, what you can do, I’m gonna come down here to more of a generic thing, is what you can do is you can set the generator. So in this case I’m just saying, Hey, I wanna create an episode, and then I’m setting the prompts. So you’ll notice that this is an array and it [00:42:00] just takes an object for each prompt that you want.

And then the value that the user enters in within the terminal. This in this case, episode number, that becomes the variable name that I can then reference later. So I’m asking what’s the episode it is? What’s the short name for that episode? And then it’s using those values in this case to build out the string.

So you can see here it’s zero 200 underscore underscore Cloudinary. So that’s where it was coming from. Now, this particular syntax here, I’m saying, Hey, add leading zeros. That’s a custom function for Handlebars that I created. And if you come up here, that’s the great thing about JavaScript is you can tack on pieces and functions and things like that.

So created a helper called Leading Zeros. And so it looks to see is this episode below 10, is it below 100 or is it below 1000? And so that’s why this has a zero in front of it. Whereas if it was an earlier episode, it would have two zeros. Then it’s also using a transformation to [00:43:00] make all of that uppercase, and then it’s also adding dashes in between the episode short name.

So if I added in two words, it would add a dash in between where those spaces are. And then let’s, I’ll point this out. The source here is a template inside of Plop templates. So if I come into the episode, you can, let’s see, actually I think it’s just grabbing, this is for the folder. My apologies. If you come down here for the actual show notes, it’s doing something very similar, except this is down here. Come on down. It has a template file that I’m passing over, and so that’s inside the sponsors and that’s where it’s grabbing this information. But it’s also where I’m referencing here, the plot template file with the sponsors, is where it’s picking up this particular file and knowing where to look.

So the nice thing [00:44:00] about it is if I ever wanted to change, say our live folder structure, I could just add a new folder here and say, this is new. And now anytime I say create a live episode, it will automatically add that folder. If I went to add a file, it would duplicate that file within each folder as I’m creating that within the terminal.

Sam Brace: This is incredible. And I can’t imagine that you guys would be able to do the podcast at the rate that you’re doing it without all of this automation that you’ve created with Plop and being able to combine all of these different systems together. Have you, did you notice that once you got your hands on Plop and started going through this process, did this ultimately speed everything up?

Amy Dutton: Oh yeah, it makes it a lot easier. But again, it might just be five minutes here or five minutes there, but over time, that amounts to quite a bit of time. And Plop isn’t just related specifically to how we’re using it. In that episode that I mentioned with Brad, he’s using it within [00:45:00] each of his projects to say, Hey, I wanna create a temp, a component.

And so within React, it’ll automatically generate the React component, the test component, and say a Storybook file if you’re using Storybook. So it creates all that boiler plate code, and then he’s not having to write that himself. So again, five minutes here, five minutes there. It makes a big difference over time.

Becky Peltz: That’s one of the big things about automation, is it reduces errors. Cause if you get something that works and then you’re just substituting in data, you’re gonna have way less errors.

Amy Dutton: That’s right.

Sam Brace: I also look at this as like cutting out the tedious aspects of it where like because if something becomes tedious, you’re doing it less and less. So if you can guarantee that you’re gonna be able to focus on the fun things, like producing fun content and getting it to out to the people, then some of these things just ultimately become easier.

James Quick: And the fun, this sounds super cliche as I go through it in my head.

The fun doesn’t stop there. As a developer, I know, as a [00:46:00] developer that’s part of the fun. I think like we, we all enjoy solving problems with code. So not only does it like, not only are we doing less time invested on the things we don’t enjoy, we’re also doing more time on the things we do enjoy. Cuz this becomes like one of, as a content creator, I don’t write production level code every day.

So this project off and on has been the most code that I write during periods of time, which is a ton of fun. It also then influences content that we create, like things that we can talk about. We gave a talk, a similar talk at Next.js Conf not this past year, but the year before, which is an amazing opportunity for us to get some exposure to the things that we were doing and the podcast.

So I think there’s, it’s fun in different ways and most importantly, as you said, less time spent doing the boring stuff.

Sam Brace: Absolutely.

Becky Peltz: Yeah. No, I could see probably triggers a lot of creative ideas when you, once you start in on Plop, Hey, I can do this, I can do this, you start getting more and more going.[00:47:00]

Sam Brace: And then Amy, one question I wanted to have for you, similar to what we asked James. So it was tied to roadblocks so anything that you saw Hey, when I first getting into Plop, I didn’t expect this and this is how I handled it. Anything like that, that can help people to, when they’re diving into this type of automation?

Amy Dutton: Yeah, sure.

I think for me at least, and it wasn’t a huge roadblock, but it was something different that I didn’t feel like was super well documented, was the setting up of helpers. So you can transform how you want those strengths to appear and create your own custom helpers around things. So here we have, as I mentioned, we have the leading zeros or being able to say, split the episode number and add these dashes where appropriate.

This was another piece is the copy folder, and this is just using JavaScript, so I’m being able to say, use the Fs make sync make directory sync in order to create the folder and then copy that over. So the thing is, [00:48:00] at the end of the day, it’s all JavaScript. If you can figure out how to write in JavaScript, then you can just plug it into, say, a set action type or a set helper in order to get it to do what you want it to do.

Sam Brace: I think it’s great, and I think it, it’s one thing that we focus a ton on, that if you have one applicable skill, you can apply it to all these other things. So it’s showing that if you do know JavaScript, then there’s so many things that are available to you in this world. And this is just one other thing that I can point to with that.

So this is that’s a great roadblock in my opinion. It’s a good roadblock.

Amy Dutton: Yeah. And I think that’s, why JavaScript has become as popular as it is because you can write that code on the front end and the back end.

Sam Brace: Exactly.

Becky Peltz: Yeah. Yeah.

Sam Brace: James, have we rendered?

James Quick: Oh yeah. It’s up if you wanna switch over.

Sam Brace: Yes, absolutely.

James Quick: Yeah. Not super exciting because it’s just, you see what you saw before, but the three images are there. [00:49:00] And then inside of the Render logs, you can see that it went through the full restart. You can see the timing and see how long it took. And then what’s interesting is you end up getting a lot of, a lot of the same callback.

So it… Sanity will send, especially if it fails. So if Sanity tries to send a web hook and it fails because the application is restarting or something, it ends up sending a bunch of them. So you’ll see occasionally it will send the same request multiple times and that request will be handled before the actual information has been updated.

So typically if it sends a request and it says, all right, we should generate a waveform, but it’s already been generated, it won’t generate it. But if it sends a request to generate a waveform and before that waveform is generated, it sends another request, you end up getting multiple. So there could be some additional logic on my end.

It’s not a concern now, but some deduping logic to say oh, is this thing already in the process of being generated? Which in this case, we’re not handling that. [00:50:00] But at the end of this, we eventually get to the point where we upload the image to Sanity so you can see that step and then eventually wait.

Wow, this did a lot actually. Eventually, way down you’ll see a bunch of these requests that say, Hey, it already has audio path, already has social cover, already has episode cover. Ignore. So we handled most of that, although we could add some like de-duping logic to figure out if the thing is already in flight of being generated.

Sam Brace: This is great. I really appreciate the whole behind the scenes on this one. Becky, what do you think about this?

Becky Peltz: I think this is cool. I just I, it’s just great to see front end, back end and everything syncing up. And then even where you see that there are some things that you might not expect to or wanna see, you’re able to see, you know why.

And you know at what threshold you’re okay with it and then you might go do something about it now.

James Quick: Yeah. You hit that threshold and then you need to start investigating. [00:51:00]

Becky Peltz: I’m seeing a question, Amy, about you wanna ask us a question about Cloudinary?

Amy Dutton: Yeah, sure. So I saw a tweet by Colby yesterday that said you could send Cloudinary, say a 10 minute clip and Cloudinary would chop that up for me for different social platforms. So it might provide three one minute clips back.

Becky Peltz: Yeah.

Amy Dutton: And he tagged me and he was like, this would be great for automation.

Becky Peltz: Yeah. So you’re talking about you have a, like an audio clip and you want Cloudinary to do the transformation.

Amy Dutton: That’s right.

Becky Peltz: Cause well, Cloudinary treats audio like video and it has some transformations for start offset, end offset and also just basically trimming. So you could, if you have an idea about how you want it chopped down…

Amy Dutton: oh, I see. So clip it for me. Got it. Yeah. Okay.

Becky Peltz: Yeah. Or you could if you know the length of it and you want it in thirds, you could just divide by three or something.

Amy Dutton: Got it.

Becky Peltz: Yeah. So our, there [00:52:00] are transformations to deal with.

Very cool.

James Quick: But, and the tool that he shared was Cloudinary making the decision for you on where to clip. So instead of us having the ability to say I want this 30 seconds, that tool, it’s experimental. So I haven’t gotten to try it out yet. I just know it’s really early.

But it would make that decision for you and ideally give you good clips that you could just take automatically.

Becky Peltz: Yeah.

James Quick: Which is really exciting.

Becky Peltz: I’ve heard. Yeah it’s using AI and it kind summarize so it can summarize video and some, yeah. So it is new, but yeah, we definitely need, yeah, we have that.

Sam Brace: But yeah, James, you’re absolutely right. It’s tied to what we call Cloudinary Labs, which is like basically as our R&D team is cooking up new things and they’re constantly cooking up new things, that’s one of the things that has basically been cooked enough for people to test it in some cases. So so it’s definitely one of the things where it could wildly change by the time that people listen this episode, maybe a month or two from now.

But it [00:53:00] is to say, yeah, that’s the goal is that it’s gonna be AI-driven previews in context focused editing. So it’s a really, that’s awesome. So I hope that it continues further and further bake and that Amy and James, you guys can use it and it’ll be a great chance to bring you back and, yeah.

Compressed.fm 2.0.

James Quick: I love it. If we have one second, there’s an additional thing, two additional things that I wanted to mention again, based on my, like very formal tracking of issues. Two things I’m not doing is checking to see whether or not audio already exists if I upload it. So what I mean is if I go through the automation and I’m generating the waveform every time I’m uploading the audio, and I’m not checking to see if that already exists.

I think right now this is by a unique name, so I think it would just replace the audio, but it is going through the process of actually re-uploading it. So that’s one of the things that I [00:54:00] can add. And then the other thing is the same exact concept with guest images. So if we’re generating one of the cover images that uses a guest, it’s uploading that image to Cloudinary every time to generate that image.

And I think again, it’s based on name. You can actually see this in the dashboard how it’s first dash last name, so it’ll just replace it. Actually, this one got, this may have been me testing a while back and that’s why it got created a couple times. But there’s a couple of additional optimizations that I could do around like not uploading if we don’t need to.

Becky Peltz: You know what I can tell you on the image, Cloudinary does look for if it’s the exact same image and it uses that etag. So if you ever have seen in the response an etag, it’s like a number that summarizes the whole image. So if it rec… if it generates the same etag it, it won’t replace it.

James Quick: Oh, okay. Cool.

Becky Peltz: It can, it’s, it can, as long as you’re using the same public ID and such. Yeah.

James Quick: Ok. Is that for audio? Probably. Probably just a hash then. [00:55:00] Yeah.

Becky Peltz: Yeah. And for audio, I don’t know. And that’s why it’s so fun to have guys look it up. Unless Sam, I dunno if..

Sam Brace: I don’t know, actually, I,

Becky Peltz: it’s always nice to have an unanswered question in it. I know that’s great. Yeah.

Sam Brace: Amazing. And one thing that I do wanna point out before we do that, let’s let you go, because I’m sure that people are saying, oh, I would love to be able to go deeper into the code and be able to look at some of this stuff, is that you guys have public repos for like, all of the stuff that we’ve talked about here.

So we’ll make sure that we show those in the show notes. We have links to those when people are out. But it is to say that it’s where if people see some of the stuff that you’re working on and they want to iterate on it or just be able to inspect it, I love the fact that it’s all public and available.

Amy Dutton: That’s right, although James said we should try and monetize.

James Quick: It’s public for now, but if you express any more interest in what we have, it may not be for long.

Sam Brace: I’ll give you, I’ll [00:56:00] be silent and say it’s wonderful.

Amy Dutton: I’m it’s, I have no intention. Make it public. We’ll keep it public.

Becky Peltz: That somebody hasn’t created a podcasting service that kind of pulls together all of these things that you need, so you just never know.

James Quick: Actually, this is a great idea. So one of the, one, in all seriousness, there’s one of my goals as a person who doesn’t do production level code very often is I solve a lot of problems that are smaller, but to replicate that kind of thing into a SaaS of some sort. So it could be like a very small thing of like even providing people a few templates and having a web hook that they could call and maybe letting them customize the template of here’s some elements and drag this around so they can specify what it looks like and then be able to pass that information to a template through an API or something could, it could still be open source, but it would still be a valuable thing, I think, for people that are doing stuff like this.

Becky Peltz: Absolutely. Yeah.

Sam Brace: [00:57:00] Absolutely. Absolutely. And so one question that we typically ask, but I think it’s a great way for us to sum everything up. So this of course is not the only thing you do and of course you are putting out further more episodes on Compressed, but where should be people following you at? I know sometimes people like LinkedIn or on Twitter, they’re in different places. Where if I wanna follow the latest and greatest from Amy, the latest and greatest from James, where should I be going to?

James Quick: I’m curious what Amy’s answer is.

Amy Dutton: Why?

James Quick: Because of the brand consistency we’ve talked about.

Amy Dutton: Oh, I know we’ve talked about this before. Yeah. That’s funny. So the best place to probably reach me right now is on Twitter at self teach me. So I’ve included that as my handle there. The reason James is giving me a hard time is we were at a few conferences lately and people will try and type in Amy when they’re searching for me and you can’t find me because the handle is self teach me.

Talked about potentially renaming some of my handles, but I [00:58:00] now’s a great time to find me self teach me.

James Quick: Didn’t mean to put you too much on the spot, or maybe I probably did. We’ve done enough of this.

Amy Dutton: It’s fine.

Becky Peltz: One handle. You gotta wonder why does Twitter just let you have one? There’s so many. Yeah.

James Quick: And for me I don’t mean this as a nudge at Amy. I was gonna say I’m consistent across all platforms, but James Q Quick on a lot of different things. YouTube Twitter and TikTok are probably some of the big ones. And I’ll give a shout out to myself. I’m in the process of…

Amy Dutton: shout out to yourself?

James Quick: Doing a complete redesign. Shout out to Amy for the design of my website. So redesign will be available in the next week or so at jamesqquick.com.

Sam Brace: I love it, James. It’s like you gave yourself a high five. Good job.

James Quick: I do that a lot.

Amy Dutton: He does this consistently.

Sam Brace: Fantastic. Guys, keep up the great work. I’m so impressed with what you guys are pulling off of compressed.

I’m so excited to [00:59:00] see future, future work that you guys are gonna be putting out there, highlighting all the great developers and all of the ways to keep inspiring the developer community. And this hopefully is not the last time that we’re gonna have you on the program, so keep it up. I’m excited.

All right. So Becky, I do wanna ask you, so in terms of this, what’s your biggest takeaway? We’ve talked a lot about here today, but what’s sticking out in your mind here?

Becky Peltz: Definitely for me it’s automation and then of course audio. I think audio is very important. Very cool. And, but the automation, because we are doing this podcast and we are doing everything by hand, I think that I’m seeing some lessons here and even some code that could maybe help us. So…

Sam Brace: Yeah I agree. And I think it’s definitely where it’s, it feels a little bit like inside baseball to me, whereas like podcasters talking to podcasters, but I think in the same sense it worked out really nicely because there’s a lot of cool things that they’re able to show, like being able to do the [01:00:00] overlays, the transformations, these are things that absolutely people can do with Cloudinary and be able to personalize their images.

And then being able to tie in audio and video into an area. It’s showing a lot of the best of what our service provide. And it’s another way to be thinking about digital media in this format. So I love everything that came from this, but it yeah, automation definitely stood out to me. I feel like it’s where I have not done a single like toe dip into Plop, but now I’m definitely gonna go full feet in and figure out what I can possibly be doing with this.

Becky Peltz: With webhooks being they’re just like an API out there and how do we secure them?

How do we make sure that we’re not letting other people call them? And James pointed that out in his own situation. I think those are things as we’re getting more into using webhooks, that the questions come up about that. Good shout out to good developers out there.

Sam Brace: Absolutely. So I will say, of course, make sure that you guys are [01:01:00] checking out all the work that Amy and James are doing.

That’s gonna be at Compressed dot fm and that’s where you can keep track of all the latest episodes. And similar to our podcast, you can see here that you can subscribe on your choice. So whether you’re an Apple podcast, a Google Podcast listener, Spotify, and many more. And of course, if you’ve enjoyed this episode, hopefully you have, know that all of the episodes are on Cloudinary dot com slash podcasts.

That includes our Dev Jams podcast, as well as any other podcast that Cloudinary produces. And that gives you all the show links and all the different places that you can go to get more information about things that are covered in those episodes. And as I mentioned at the very beginning, make sure that you are furthering those conversations after you’ve taken place in them by listening to them, watching them at the Cloudinary Community.

That’s gonna be at community dot Cloudinary dot com. And if you happen to be a Discord person, also know that we have a Discord server with many active members. So if you have questions, of course some of the [01:02:00] people actually were highlighting this episodes like James are active Discord users as well.

So it’s a way to continue those conversations that were taking place. So with our final moments here, Becky, is there any other thoughts? Anything else we wanna send our viewers and listeners away before, before we say goodbye?

Becky Peltz: Upload, transform, deliver. That’s kinda our little motto, so…

Sam Brace: I love it. And let’s keep it going everybody.

So on behalf of everybody here at Cloudinary, thank you for being part of this Dev Jams episode, and we can’t wait to see you here for the next one. So keep on developing folks. We’ll see you soon.