Enhancing Image Delivery with Cloudinary, JavaScript Frameworks and Webhooks

Sam Brace: [00:00:00] Hey everybody. My name is Sam Brace. I’m the Director of Customer Education for Cloudinary, and welcome to DevJams. This is where we talk with innovative, inspiring, interesting people who are developing similar minded projects, and in many cases, they’re happening to use Cloudinary in those projects, whether it’s websites, mobile apps, or just things that are tied to overall software development.

Joining me for every single one of these episodes is Becky Peltz. She is the curriculum program manager for developer education here at Cloudinary, and I am so excited to have her here, as always, to talk with our guests about their upcoming projects. So Becky, welcome to the program.

Becky Peltz: Hey, thanks Sam. I’m happy to be here. This is gonna be a great [00:01:00] program.

Sam Brace: I agree. And it’s gonna be a case where this is gonna be a smattering of projects that we’re gonna be talking about today. In many cases, if you’ve watched DevJams or listened to DevJams in the past, you’ve heard it where we focus on one single project that someone has developed that is using Cloudinary in a really interesting way.

But our guest here today, Raymond, he is gonna be talking about several pieces of projects that he has gone and created or little… basically samples to show how you can use Cloudinary in different ways. And it’s interesting to see how he came upon it, the journey that he took. And we wanted to be able to showcase some of ’em because in my opinion, many of these projects are things that we get questions about, whether it’s on customer support, whether it’s in conversations with our customer success managers at Cloudinary about how to do some of these things that Ray was able to do a great job of showing through his blog posts and his sample projects.

So this would be a great [00:02:00] episode for those of you that are trying to dip your toe into the waters of what image, video, overall media delivery is about, and especially when it comes to the development space.

Becky Peltz: Well, you I, yeah. I saw this as a real journey where Ray came in, saw one item and worked that, and then he moved on to another item.

And as I read his blog posts that we’ll be referencing here, I got the feeling of a very experienced developer getting really excited about this new technology that we offered. And then when I saw something in his about a focus on enterprise cat demos. I knew that this was a very experienced web developer. Anybody that uses cats as their main focus, and we will see cats today and his favorite color is sepia. We’ll see that today too. So I think this is a lot of fun.

Sam Brace: Yeah, I definitely found a kindred spirit in a couple of those things. I always try to use sepia in all of my examples and all my trainings, and if [00:03:00] anybody’s taken ever any Cloudinary Academy courses, they know that me and you, Becky, both use a lot of really cute animal pictures in general.

So, kittens, puppies that’s our thing. So I definitely agree. So it should be a great place for us to go. Before we do get over to Ray, I do wanna quickly point out that if you are so inclined and you’re saying, Hey, what’s this DevJams thing that I’m supposed to be a part of and checking out right now, know that you could always see all the previous episodes at Cloudinary dot com slash podcasts.

So this is where we’re gonna be putting this episode up in later days after we do this event. And of course, this is where you can get up to speed on all of the previous episodes. So there might be times that me or Becky mentioned a previous episode or maybe a topic that was mentioned in a previous episode.

If you ever are so inclined, this is a great, great spot to go. And the nice thing about this is that if you go and check out any of these episodes, like the one that I’m showing on my screen where we interviewed Brad about the way that he [00:04:00] optimized Cloudinary with Markdown files, it is, or inside of Markdown files.

You can see here that we have full transcripts for people to be able to see all of the various details, but also a case where you can view or listen to any of these episodes on any of the podcast services that you probably like, such as Spotify, Apple Podcasts, Google Podcasts, YouTube and our own Cloudinary Academy.

So just something to quickly point out before we dive into today’s interview, just in case this is your first time coming to us and being part of this overall experience, but without further ado, let’s bring Ray on and get to know him a little bit better. So Ray, how you doing?

Raymond Camden: I’m doing just fine. How are you?

Sam Brace: Good. Good, good. And I’m so excited to have you on this because when Becky and I saw the blog post that you issued, it was happening over the course of November. It was an area where we were seeing, oh, he’s absolutely using us in the right ways, which is really exciting. But it also is, [00:05:00] you’re pointing out a lot of use cases that were either new to a lot of the ways that we think about the ways to use Cloudinary, or you’re doing it with technology that we haven’t necessarily covered in here.

It definitely is where I’m so excited to have you on the program today.

Raymond Camden: I’m really happy to be here and I will say I’m, I am known for using things the wrong way. I am an excellent, unofficial QA person. I will break something. The second you gimme access to it, I will look for things to break.

Becky Peltz: Well…

Sam Brace: As a good developer should.

Becky Peltz: I noticed that. And you had contacted our support and that was, it was really cool to see how you worked through those problems.

Sam Brace: So Ray, tell us a little bit about yourself. So I know those of you that saw the thumbnail at the beginning may saw that you are a senior developer evangelist at Adobe, but of course, titles are not people.

So tell us a little bit about yourself.

Raymond Camden: Sure. I have been developing and writing bad code for 30 years or so. [00:06:00] Been struggling since the very first program I wrote. I could tell you the bug, I can tell you what went wrong, and it was bad docs. Not my fault. But for a long time now I have tried to turn my struggles, my, you know, what I find out, et cetera, into content to help others.

I’ve been blogging for… it’ll be 20 years next month actually. And 90% of those blog posts are like, I really didn’t get X. I struggled. I now understand it as Y, and here’s how I understand it, so that most of my blog posts is why I have not passed… passed a tech screen at a FAANG company yet.

Becky Peltz: I really think you learn by making mistakes, by breaking things. You know, it’s that kind of experimentation that really moves you ahead and I think we’ll see some of the ideas, some of the solutions that you’ve found through that. So that’s [00:07:00] really cool. .

Sam Brace: So, Ray, talk to me about the journey, about how did you come across Cloudinary?

Did you stumble upon it? Did somebody tell you about it? What led you down the path to eventually say, I wanna write about this and share my experiences on your personal page, your website, your presence? How’d you get there?

Raymond Camden: So, Cloudinary has been in my to look at some time list for a long time. Just never bubbled to the top. A while ago, a very good friend of mine Rachel Luxemburg, excuse me, I heard she joined the company and she’s someone I’ve worked with in the past and I have a heck of a lot of respect for. So her joining the company made me think more of the company and moved it up into my queue of you know, I should look at this sooner.

Sam Brace: And great because Rachel is fantastic and to add a little bit of context there. So [00:08:00] she’s overseeing our overall Cloudinary community. So if you’ve ever been a part of our Discord servers or you’ve part of our community forums, Rachel’s the one that’s managed all of that and actually built it from the ground up in a lot of cases.

So, it’s a great person to know, first of all, but I agree that if she endorses something, it normally means that there’s some validity and reason to do so. So, I agree. That was a great reason to make that jump and take a look at it. And then understanding that, okay, you got your foot in the door, you started checking it out.

What was your overall experiences and then what got you to say, okay, this is worth writing about?

Raymond Camden: So there was one thing that, that really hooked me immediately, and that was the the API versus API via URL form of doing things. I first saw that years ago with the Static Maps API with Google [00:09:00] where, you know, they had their job script API, which was big and complex, and blah, blah, blah.

And then you just had this, Hey, if you just need a simple map, like for an email or it doesn’t have to be interactive. Just make a url. Yeah. And so that concept, you know, five or so years ago when I saw that really clicked with me as just a great idea. So when I saw that like I could do a lot with Cloudinary by just doing the url.

That immediately got me in there and just started playing around with it and it made me want to go even deeper into it.

Becky Peltz: Yeah, if you look at our docs, it’s actually called the transformation URL API, so it brings together both concepts. You get back an image, you get back a video, so, that’s a good comparison though with the Google Docs, you know, and the, or the Google Maps that you can just like tweak the URL rather than having to write a bunch of code.

Raymond Camden: Absolutely. And there’s definitely multiple options out there for [00:10:00] doing image transformations. A lot of libraries, a lot of APIs but being able to test it so quickly was a huge motivation for me to play more, in fact, so, so when Sam was talking earlier about how we’re not looking at one project about, like a smattering of things that I’ve done like I added a major feature to my blog that was a URL. That’s it.

So like the whole responsive images thing? Yeah. That I majorly improved my blog, but the project was adding one or two lines of code, that’s it. And that just really sells Cloudinary to me.

Becky Peltz: Yeah, and I, I can tell that after you, you got to really understand the structure of our URLs because you were able to go in and just basically chop ’em up and put stuff in where you wanted them in simple programs, so yeah. But you have [00:11:00] also have some more complex programs where you were writing Lambda functions and running them off of our notifications and lots of interesting things that we’re gonna get to. So

Raymond Camden: Abso… yeah, so the URL simplicity got me in. At the same time though, like I appreciate that there’s SDKs that makes that a bit easier, and I don’t have to do string manipulation to craft the url. I like that y’all have both sides there.

Sam Brace: Absolutely, and it’s interesting because when we have ever reached out to people like yourself and said, Hey, we’d love to have you come on the program, talk about your experiences, talk about your projects. A lot of times we get developers almost saying what I did was fairly simple.

It was just one or two lines, just like you pointed out. So I feel like it’s not gonna be worth their time or worth the people’s time to listen to it. But gosh, there’s so much that you can unravel with these types of projects, and it’s, and luckily we’re just a facet of the project. So to point out [00:12:00] your blog presence that you have, it’s to say that we are a very tiny component or even a minuscule part of that component, but it makes things better.

It makes your life easier, and hopefully it makes your readers experience better as well too. So, I agree completely.

Raymond Camden: And, you know, being so small, if for some reason I decided I didn’t like y’all anymore, like leaving Cloudinary would be trivial, like I would stop using your u… your URLs. It’s like it would not kill me to rip out that functionality in any way at all.

So it was completely safe, very quick and just that’s everything I want as a developer.

Becky Peltz: That makes a really good point about, you know, composing with cloud services is that you do want a service that is modular, that is, you know, something that you can put in and take out, move around. So, it, we are glad that you decided that [00:13:00] you didn’t wanna rip it out, but if you need to, you know, or move it somewhere else it’s doable.

Sam Brace: Absolutely. I, it’s I feel like the double-edged sword immediately when you start talking about. But in, in good news we have a great situation going on here, hopefully that you and you continue to like everything that we provide. Of course.

So, I wanna quickly throw out my screen here, because this is emphasizing the first blog post that you wrote when you started your journey with Cloudinary.

And this was focusing on integrating Cloudinary with Eleventy. And I know that we’ve talked, me and Becky have talked about Eleventy a little bit in the past when we’ve had certain guests on, but essentially, Ray, break down for me a little bit about why someone would want to use Cloudinary inside of Eleventy and maybe also a little bit of context about what Eleventy is.

Raymond Camden: So, Eleventy is one of the tools that you can use if you’re working with the JAMstack. JAMstack has been something that I’ve been [00:14:00] into for many years now primarily based on having 10 plus years of app server background, ColdFusion for most of that, and then Node.js and recognizing that I was using app servers and database servers for content that wasn’t changing , so I had a lot of power when I didn’t really need it. Back when I started looking into it, it was just called static websites. That was a… it didn’t have a proper marketing term yet. But it was really appealing because I saw having the ability of having an app server on my dev machine and in production only having files.

That was really exciting when I had switched from ColdFusion from my blog to WordPress and WordPress crapped the bed within 24 hours. Love WordPress. It’s very powerful. But I did not want to be a WordPress admin. I [00:15:00] just wanted to write stuff and just go live and not worry about it. So moving the static files like really made me feel comfortable.

So Eleventy is one of the many options that you can use to work within the JAMstack. It powers my blog. I have 6,500 or so blog posts, so it’s a rather large blog. But in production it’s 99.99% flat files. I have a couple serverless functions in there for very minor things. But my content, you know, what has been my lifetime of creating is all very simple stuff and I appreciate that.

Eleventy was very appealing because it’s very flexible. A lot of the JAMstack options out there are very prescriptive in terms of how you do things. I like to break things or do things weird and Eleventy allows me to do weird, crazy things [00:16:00] the way I want to. So been using Eleventy for a very long time. And it just seemed like a good idea for a demo of, you know, how I could integrate Cloudinary into an Eleventy site.

I think in this particular example, I was imagining like an artist who wants to put their work online and make it as simple as possible.

Becky Peltz: Yeah, I was gonna say, I think for my experience with Eleventy is that it does provide simplicity and kind of a return to the basic html, JavaScript, css, you know, but then a nice simple, not so highly opinionated framework to package it up in. So I see that, and it’s interesting because the last guest that we had on who used Eleventy was Chris Coyier, who’s, you know, CSS tips and tricks. So it’s experienced people kind of wanna move back to a simpler world to express themselves. I think.

Raymond Camden: Yeah. The the less that I have to [00:17:00] worry about at at 2:00 AM, the more happy I am. And that’s all it was for WordPress. It never crashed nine to five. It would crash in the middle of the night. I’d wake up to an email saying it was down.

Becky Peltz: Oh wow.

Sam Brace: So Ray let’s talk about how you did it. So I’m gonna quickly pop my screen off. Maybe we can show yours and maybe we could walk through some of the code, some of the examples on how that you were able to make this connection between Eleventy and Cloudinary.

Raymond Camden: Sure. I assume you’re showing my screen right now cause I can’t see you anymore. All right, cool. So let me actually go to the website. I’ll show the website, I’ll show it running and then I’ll show the code behind it. And let me point out I don’t do pretty. So as an artist’s website, this can be a heck of a lot better.

But you could see the images that, that I have as my portfolio. They are all thumbnails and if I click on [00:18:00] one, I go to a detail page and it’s a slightly larger image and there is some texts on there. I just recently found out how to put a border around text to make it a bit more readable.

So it’s a little bit hard to read in that one. Let me try this. Yeah. It says copyright Raymond Camden and I probably should have moved that to a lower right or something. But I feel like this is a fairly typical thing you would see on an artist’s website. You would see a thumbnail. You would see a larger image and they would definitely watermark it to protect their assets.

So that is the front end. And this is all plain HTML. If I view source. There’s actually no JavaScript involved. It’s all HTML, CSS and images.

Becky Peltz: Hey, by the way, is that Mount Rainier there in the middle of that page?

Raymond Camden: I tried to make [00:19:00] sure I used all my pictures, so this is one that I took. It was my wife and I flying to Seattle.

That’s in Seattle, right?

Becky Peltz: Yeah, yeah. Cause I’ve got that on my wall right behind me there. That’s a big mountain. Yeah. You would see it from an airplane. Yes.

Raymond Camden: Yeah. And I think she brought my camera for that. I got one of those ridiculous phones with eight cameras on it or something. So she commonly borrows my phone for… for nice pictures.

Yes. And that is my lovely cat just zonked out , not dead. Just really tired. So, the code behind this and let me give just a little bit of back… backstory. So, Eleventy supports data files and it’s a way to provide data, obviously to your site. And that data could be just straight JSON. So if you were a small chain. Let’s say you have five businesses in your [00:20:00] chain or whatever and you wanted data for your businesses, their location, their open hours, whatever. In Eleventy, I could make that as simple JSON data. And in my build process, I can do a webpage for each of those businesses. I could represent you know, when they’re open and show a picture, whatever. What I would have used a database in the past. But flat JSON can work as well. Eleventy also supports a regular like JavaScript file. So this isn’t a Lambda function per se. This runs in production. When my site is being generated or I shouldn’t say production, this runs in, you know, before it moves to production as my build is happening. This runs, this will create data, but when it’s done that is when my site is actually deployed and live.

In this case, what I wanted to do was take a source [00:21:00] directory of photos and you could see them here. And for each of these, you know, those being my original photos, I used the Cloudinary SDK to upload that picture to make sure that it was stored in y’all’s media library. And then once I have them I wanted to get the URL for the thumbnail version and the web version, the web version just being the larger copyright one.

So I, you know, I know I raved about the URL transformations but the SDK made it ridiculously easy to write. So that is my thumbnail, basically, you know, this width, this height and, you know, scale it properly. And this is the one where I set, you know, 500 and put my tech. So if I wanted to fix that issue where I may, maybe I don’t want to watermark directly center. I could go in here and I could modify [00:22:00] it to, to put it elsewhere. The net result of this is basically an array of images that have ID values, a thumbnail URL and a web-based url. My site is only two source files. My homepage, and this is a bit of a template code that basically loops over that array of data.

You can see the “for photo” and photos. I do a link. And the way I handle one photo per photo or one, you know, webpage per photo is Eleventy makes it very easy to do basic pagination. And in this case, I’m saying I’m doing pagination size one. So one page per photo, it will loop over all those photos. And then I just used a bit of CSS and literally just dropped that URL in there.

If we went back to the HTML, view page source. And that’s [00:23:00] tiny. You could see that is the URL. I definitely could have figured that out. That’s not complex at all, but I really like how the SDK made… made that a bit simpler.

Becky Peltz: Yeah. Hey, you know, if we could go back, one really nice thing I liked about your code, so if you go back to where you do the upload, I liked how you set up your transformation or your upload parameters there. So you have an options Cloudinary underscore options there at 18. And you just set up all your key value pairs. So you’re gonna use the file name and unique file name false. So you must have figured out that, you know, you don’t wanna have that extra six characters, you just want it to be the file name and overwrite.

You don’t wanna do any overwrite. And so it’s really nice cuz then you’ve got this data driven upload where you’re just pushing in that JSON and it’s already preconfigured the way you want. I thought that was a nice thing to see going on.

Raymond Camden: And I will say so, so this does take a bit of time and like [00:24:00] by a bit, maybe five seconds per image or so. That’s not much, but so that, that’s built time that happens once.

And that’s it. So that’s when you visit this site in your browser, that’s already done. There’s no processing time at all. It’s immediate.

Sam Brace: Yeah. Absolutely true. And I gotta say one thing that I just think I just realized, Becky, is that Ray is the first person that’s actually done overlays in a DevJams episode like that I can remember very clearly. So…

Becky Peltz: Watermark. Yeah.

Sam Brace: And it’s a use case that me and Becky say in training all the time, is that you should focus on watermarking and branding your images and videos so that way someone can’t easily lift them. And it makes it so that way it’s also programmatically done so you’re not having to, you know, essentially bake it on through photo editing software because maybe you need that copyright to change or you need that watermark to change cuz you went through a rebrand. So, [00:25:00] but your use case is absolutely dead on to the ways that we think that overlays should be being done. So, without us talking ahead of time, this is exactly what I love to see.

So very good job, Ray.

Raymond Camden: Thank you. I love it when I actually use things the way I’m supposed to .

Sam Brace: Absolutely. Absolutely. So before we jump over to the next example, is there anything that else that maybe Becky or Ray that you’re thinking of that’s important to talk about with this example, particularly with Eleventy, anything that’s worth mentioning before we jump to the next one?

Becky Peltz: I’ll just point out that, you know, in this example, Ray is grabbing his photos off of his local directory to do builds. And that totally makes sense because you’re doing these static builds. But I know we’re gonna get to see some more dynamic type of grabbing images. So, and I… I like this one to start with because it’s the whole upload, transform, deliver.

So that is really the essence of what we’re trying to do when we’re working with these [00:26:00] images.

Raymond Camden: Oh, yeah. If I were building this for a real artist or a real non-technical person, there’s like a million ways that I could automate this. You know, I could have them say, just email your photo and I could have code that reads that email, puts the file in the right place, fires off a new build and would all be automatic for them. You could definitely make this even simpler. Absolutely.

Becky Peltz: Yeah.

Sam Brace: So let’s jump over to the next blog post. So just a few days later. So if we are, we’re tracking back, so late October. We were at October 20th. Now we’re jumping straight into October 24th, and it points out you’re a prolific blogger and you’re putting out constant content as you pointed out earlier.

This one is focusing on building an API to list the Cloudinary images in a folder. So talk to me about what you uncovered in this particular project.

Raymond Camden: That ya’ll have an API for that. Yeah. I wish it was more com… I wish it was [00:27:00] more complex. I think the only thing I struggled with was it was a bit indirect to get a folder, I think I to do like a search instead.

So that, that’s one piece of feedback. I think maybe a more direct folder list API option, but when I say it wasn’t quick for me, I think it took 20 minutes of Googling around and seeing how other people did it. And I think in the blog post I mentioned, I found an old forum post that, that talked about it.

Becky Peltz: Yeah, that was Itay Taragano, one of our, he’s now VP of support. So yeah. Good posts there.

Sam Brace: But I think it’s important to note, so why would you want to have this done? So like when you’re trying to build a list, to have a… building an API to list Cloudinary images in a folder. What’s the use case for something like this?

Raymond Camden: So for me, [00:28:00] this was on preparation for another blog post that never happened. Not related to Cloudinary at all, but you know, being able to just show a gal… a gallery of resources. So knowing that Cloudinary had a media access library or a media library, I wanted to play around with actually integrating with that, cuz I had used the web portal to upload examples. And that worked just fine. And that was really easy actually for my initial testing. But to get that data out, I knew that I was gonna need to automate that in some way. So it was a way for me to learn. And it just you know, outside of the issue I ran into, like finding the folder, outside of that, everything else was just super simple.

Becky Peltz: I think it’s a good juxtaposition with the first one where you were, [00:29:00] where you were pulling your images out of the hard drive, your local hard drive, and now you’ve got ’em up in the cloud, so now you need a way to pull ’em into your app from the cloud.

Raymond Camden: Yes. So, yes, so this was done before I discovered the whole remote URL thing, which blew my mind away. So I like that. I like that I can put all my stuff in Cloudinary or not.

Becky Peltz: Yeah.

Raymond Camden: I appreciate and you know, that kind of goes back to if I want to feel safe knowing I could leave, that just makes it even more safe for me to leave knowing that I don’t have to use the media library.

Becky Peltz: Yeah. You’re one of the few people we’ve talked to who is doing what we would call in docs remote delivery. So you’re leaving… leaving the image where it was, but you’re delivering it via Cloudinary and therefore you’re going to, it’s gonna run, it’s gonna be served from a [00:30:00] CDN. You can do your transformations, all of that.

Raymond Camden: Absolutely. Yeah. I know that’s, I’m sorry, go ahead.

Sam Brace: Oh, no, and, and it’s an amazing segue into what we’re gonna be talking about. Just I think you were about to say, because Yes, it’s definitely something that we, especially in cases where you don’t need to completely forego a previous place, but you wanna get the benefits that Becky just talked about, it’s something that we definitely see more and more developers, I think, especially with tutorials that are popping up that and just reaching out to support as we mentioned, the fetch mechanism that’s tied to this is something that we see a lot of people being responsive to. So it’s great to see that you’ve stumbled upon it, and you like it. That’s a wonderful thing. Absolutely. And remind me is did you start utilizing the fetch when we came to this blog post here with Alpine?

Raymond Camden: No. In fact, I’m pretty sure this post uses the result of the last post, of the API of getting a list of images.

Sam Brace: Oh, okay. Got it. Yeah. [00:31:00] Got it. So let’s jump over because it, so let’s talk about fetch for a little bit here and then we can come back.

So I can’t not talk about some of the stuff that we’ve seen with Pipedream, because I think it’s an amazing thing to be able to talk about. But the responsive images side of things, this is where we start getting into remote image support as I can see. So talk to me about why you decided to go down the path of fetch. I… we’ve talked about a little bit in the sense that it added another layer of security if for some reason you never decided to lead Cloudinary, but there probably was more to that decision making other than that? What was your reasoning for that?

Raymond Camden: Mainly because I’ve been using S3 for my banner images for a couple years now. So there was no way I was gonna move all that to, to Cloudinary. And in fact, when I first looked at or started thinking about responsive initially, I was like, oh, you know what? My blog headers would be great, but I’m not copying them, them all over. That would be too much work. And then when [00:32:00] I found this, I was extremely happy and it made me feel more comfortable too because like I, being new to Cloudinary, I was very happy with the results of the transformations. Like I got… I got confidence in that, like right away. Honestly, I didn’t have the confidence of, you know, do I wanna store a thousand images in there? Do I wanna use Cloudinary as image storage?

And that’s not to say that ya’ll have done it wrong, but like I didn’t have the confidence in terms of I’m gonna migrate all my storage there and just use that. Whereas with S3, you know, that has a couple decades or not sure that long. So that, you know, having that option made me really happy. By the way, there, there’s actually a bug on here now. My image is broken. If you scroll up, there should be like a long line. [00:33:00] Yeah, it’s broken. And what’s… I’m happy this happened for a couple reasons because I discovered if you right click open image and new tab, go to dev tools. Yeah, do that. So go to dev tools and go to network and then reload, and then click on avatar two failed. Then and yeah, for the details? No just click on it. Yeah. And scroll down to respo… response headers right there. x-cld-error. So that’s awesome. So something went wrong and y’all returned a header. That explains why. Now I’m not sure why that’s happening because on that blog post itself, I’m using the exact same feature for the top header.

In fact, all my blog posts now are using that. So I found this 15 minutes ago. I reached out to my buddy Colby. He’s the first one who reached out. [00:34:00]

Becky Peltz: Yeah.

Raymond Camden: Just to find out why it’s failing for that particular image and not the other. I’m just curious, but again, I’m happy that you used the headers to return information. In fact, I’m planning a blog post now to talk about this. And it also had me go in and double check my security settings, and y’all actually have a security setting just for… hey, for your account, where are you allowed to do remote images to? Which is pretty awesome. I’m not using it, so this shouldn’t happen, so I still don’t know why it’s happening.

But I discovered two new things that make me like Cloudinary.

Becky Peltz: Okay, I’m gonna go look at it too when this is done. Cause I love debugging things, so, that’s great though. We’ll have to see what’s going on there.

Sam Brace: Yeah, I agree. But it definitely is a case where you… it points out a few things that are really [00:35:00] helpful is the x-cld-error, if you ever did encounter an error, you’re able to diagnose it fairly quickly if, as long as it gives you good information back.

I actually wanna show you this one thing here. So you can see here that we’ve got the broken image that was on your website. There’s also this thing that we have called the Cloudinary Media Inspector, which is just a little Chrome extension that we have here.

And if you go ahead and click it, it actually will normally go ahead and give you the x-cld-error error right there. So if you ever are like, oh, I don’t want to go into dev tools and go inspect things, it gives you quick information if there was an error that was associated with it anyway. Helpful place to go and uncover that information.

But I like that we keep the long path, the more developer friendly path. But just to show another option when it comes to that, but, going back to responsive images here. So one of the things that obviously is important to point out is that you obviously want it to have your [00:36:00] images be able to work for desktop, mobile, all screen sizes, all viewports, and you were able to pull that off with Cloudinary. But we weren’t the only aspect of that. So talk me through like the steps, or maybe this might be a good time to go and do a little bit of a code review if this is possible, to show like how did you get that to ultimately work for your site?

Raymond Camden: So, keeping in mind that I already had like the existing resource, you know, and it was mostly optimized. I shrunk it down a bit, but wasn’t optimized for mobile. This is another example where the Cloudinary part was about five seconds because I knew I could just make a new URL the right size. I spent about two hours researching the responsive image syntax that was on MDN cuz I had never written that myself. I have seen it, but I’ve never worked with it. So, you know, for me to use this [00:37:00] feature for Cloudinary, y’all’s part was nothing, period. It was nothing. What took me time was just the fact that this is a part of web development that I’ve not used myself. So that’s again great on y’all that your aspect was nothing compared to me making sure I was doing the HTML right. And it definitely took me a little bit to get it right and I definitely say in the blog post, I’m not a hundred percent sure I’ve done it the most optimal way.

Becky Peltz: No, but I think it’s a good use case for using fetch is optimization and essentially responsive images are an optimization.

And, you know, you’ve, you start optimization with some kind of cropping or rescaling or something like that. But, just a hint that your friend Colby actually wrote a really neat Netlify plugin where he used fetch and added f_auto, q_auto.

Raymond Camden: [00:38:00] Yeah.

Becky Peltz: Which will give you a really great optimization as well. So you’re right on the exact right track to… to getting the best optimization.

Sam Brace: And Ray, I just troubleshooted your thing on the fly and hopefully it’s showing that it’s working now. So what I did was I noticed that it was pointing to the cloud account, which was demo, and I just changed it to my personal one, sambrace. And it fetched no problem at all. So it has something to do with the security restrictions for our demo cloud account that it didn’t accept things from your domain. So if you point it to a different, a more appropriate cloud, then that image should fire off. No problem at all.

Raymond Camden: I swear

Becky Peltz: Sam

Raymond Camden: I’ll be fixing that as soon as we hang up and people watch the future. I never messed up. Okay.

Sam Brace: No, it never happened. Never happened. But Ray, is there anything in terms of [00:39:00] gotchas when it comes to and it’s not necessarily about Cloudinary either, but like anything that you feel from a development perspective, when you’re working with making your images responsive, obviously you’re doing things with source sets, you’re doing things like that.

But is there any like big things that you found when you were going through this process, maybe as part of the Cloudinary implementation?

Raymond Camden: No, all of my gotchas were just the web… web standards aspect of it because again, it’s not something I had done myself. So for y’all, that’s what you want to hear. There was zero gotchas on your side because it was just size transformations. That’s it. It’s perfect. It’s perfect.

Becky Peltz: That’s great.

Sam Brace: So I think the final thing that I want to talk about, unless you guys have things that you bring up, of course towards the end that we can dive into, but definitely I gotta talk about webhooks because it like one thing that is near and dear to my heart, to Becky’s heart, to lots of people that work [00:40:00] at Cloudinary is the ability for notification URLs, for webhooks to be happening when certain things happen with Cloudinary. Or in general, like just notifying X that Y has happened is a big aspect to development. And you’re doing it with Cloudinary, you’re doing it also with a service called Pipedream, which we recently found out was an amazing Cloudinary customer as well. So we’re all full circle here. But in the same sense, talk to me about this project. Why did you go about it? How did you go about it? Let’s dive in.

Raymond Camden: Absolutely. And I feel like I almost start at the beginning and talk about low-code, no-code because that’s been a hot topic the last couple years.

I’ve been developing for a very long time, and something that I’m really passionate about is seeing more non-developers dip their toes into creating sites. ColdFusion, [00:41:00] which I was very big into for a very long time, was known for being very friendly to non-developers, and it got a lot of flack for that.

Got a lot of, oh, you’re too easy. Look at the dumb people writing code. And I just got happy, you know, I saw people with English degrees like me, you know, non-comp side people doing stuff and so that made me happy, so, low code slash no code making things more accessible just in general makes me happy cuz I wanna see more people building cool stuff.

I came across Pipedream a couple years ago and really clicked with its metaphor of, you know, having a step for each particular part of a workflow and them handling the boring aspects. So for example, they make the authentication with various services easy. They just do that stuff for you such that you could do your cool cat demo.

And [00:42:00] like once that was done, or once I saw that, I built a lot of stupid stuff. So like building a Twitter bot, or now Mastadon I should say. But building that in Pipedream is like five minutes. And whenever I have a really dumb idea for a new bot, I can just build it and Pipedream enables me to focus on, here’s my really cool slash dumb idea.

Pipedream will handle all the boring aspects of scheduling and talking to Twitter and all that. I just do my part. So I like that. At work we’re also big users of Power Automate with Microsoft and they have a different way of doing things, but still really powerful. And, you know, we have our own Workfront product as well, just that whole space really excites me. So been a Pipedream user for a long time. I’ve blogged about them a lot. When I saw that Cloudinary had [00:43:00] web hooks, I thought, okay, I needed to do a demo and run it on Pipedream.

Sam Brace: So what did you ultimately do? So what would, what did…? Talk through the demo process. What did you use? What did you do?

Raymond Camden: I did probably the simplest example, like I think on new image and a folder, send an email. That way, you could do whatever. I don’t think I thought much past that because the hard part is on new image, you know, run something, right? That’s the part where you need to set up a server, you need to do the webhook. That’s the hard part. Sending the email, you know that’s pretty trivial. So I knew Pipedream was going to make that easy. And so I, that’s why I wanted to do this, if that makes sense.

Becky Peltz: It’s really neat that Pipedream includes a send email because I’ve set up web hooks where I had to [00:44:00] then set up another service to do the email.

Raymond Camden: Yeah.

Becky Peltz: So this kind of does those things. It knows ahead of time what you wanna do after you run your function.

Raymond Camden: Yeah. If all you wanna do is send an email to the owner, like to yourself, they make that stupid easy. Which is really nice. If you wanna do more custom email, like to a listserv or whatever, then you use send mail. You use any of the other options out there.

Sam Brace: And looking at this, I can see, like you kept it as simple as possible, but that’s showing the ease of being able to work with us, working with, you know, all of these different services that you have there. I can see it’s basically very simple p like tags you have here, new images been uploaded to your Cloudinary library, but then there’s so much happening here in the curlys, right?

Like where you have step trigger event body url. Talk to me about some of the steps that you had to them ultimately take the Pipedream side of things to make this all work.

Raymond Camden: So the first step was the verification [00:45:00] of the webhook. The last time I ran into anything like that was with working with Alexa cuz Alexa can call a lambda or can call any third party services provider but you’re supposed to do a verification process with them. And their verification process is, here’s 20 things that you need to make sure…

Becky Peltz: Oh, wow.

Raymond Camden: But you can find a Node SDK library that does it pretty easy. So, I had a bit of trepidation when I saw that you had verification as well. Not that’s bad. Verification’s good. Yeah. Security. But I was concerned about how hard it was gonna be, and for the most part it was very easy. I ran to one thing that wasn’t documented. I talk about it in the blog posts and that’s the timeout value. Turns out that it has a default value anyway, so I didn’t need to worry about it.

But as you’re showing on screen there, that the code was like five, six lines.

Sam Brace: Exactly.

Raymond Camden: And that’s it. And what’s nice about Pipedream is that [00:46:00] this is its own step. So later on, if I have a completely different idea for a Cloudinary notification, I can just copy that step and just not worry about it.

Becky Peltz: Oh, it’s like a module that you can reuse for different places. That’s nice.

Raymond Camden: Yeah.

Sam Brace: Absolutely. And I think one thing that I love about this example that you gave here, not only because it’s talking about web hooks and notification URLs, which are near and dear all the hearts in this various podcast, but it is also, I think one thing that I wanna emphasize that you said is the concept of low-code, no-code being something developers are very excited by. It’s something that we’ve seen a lot of miscommunication about over the past, at least two or three years since I started hearing that term, is that a lot of times people was like, oh, that’s dumbing it down, or it’s only making it for marketers. And it’s no it, people wanna see instantaneous validation of work.

They wanna be able to do things [00:47:00] in more UI based aspects is so, I love the fact that you’re using something that’s Pipedream, that is tied to a user interface that is low code, but it is where it actually drives a lot of the things that can happen with automation for a overall developer experience.

So I, I think this is fantastic that you used all of this in one particular blog post. If, and I’m not to say like I don’t wanna have you choose your children. But in the same sense, like this was an amazing blog post. This one put me over at the top.

Becky Peltz: I think we, we hear a lot here about the MACH Alliance and the idea of composable services, and this is a foundation that really helps make it easier for the developers to create these, you know, services that are linked together just by webhooks. So, very nice.

Raymond Camden: When I was nine years old or 10 years old and I was able to make my [00:48:00] computer do something, I felt joy. And the idea that you would gate keep someone from feeling that joy, no matter what their background is, is just insane slash evil. Like the more developers… the more people doing stuff out there the better, you know?

Becky Peltz: Yeah, I don’t think anybody’s gonna lose a job when you still have to write a little bit of code here to help get them there, so…

Sam Brace: Absolutely. One last thing that I wanna ask you about, cause I feel like I glossed over it and I don’t wanna gloss over any of these that are here. But talk to me a little bit about Alpine, because this is the first time we’ve talked about Alpine when it comes to DevJams. We also, I wouldn’t say have a ton of content in general about this particular JavaScript framework, but talk to me about this and maybe why you chose to work with Alpine, or why are you been exploring it.

Raymond Camden: So I, I have a lot of soap boxes. One [00:49:00] of the soap boxes I get on is that a lot of the web development talk over the last decade, I think, has been about single page applications as if every person is building the application, and that’s so divorced from reality.

There’s a lot of times where people are taking one page and they’re enhancing it, and I feel like just nobody talks about that, and that is a real bummer for me. So for a long time I really liked Vue.js. Vue.js was very welcoming to non-developers. I did a lot of presentations on Vue.js and had people in there who were not developers who like told me like, I feel like I could really use this.

And I really felt that Vue hit that sweet spot where you wanted to enhance a page and you needed to, you know, you wanted to bring in a library to make it a little bit easier, but you weren’t building an application, Vue would allow for that, as well [00:50:00] as I’m building a full application and so, you know, Vue handled all those use cases very well.

I feel like with Vue 3, that’s not necessarily the case anymore. And I’m not saying that’s wrong, I’m just saying to me doesn’t feel like a great fit. Vue 3 in general feels… feels great for building applications. It just… personally for me, and I’m being very careful cuz I got upset when I saw and went on Twitter, which don’t… don’t go upset on Twitter, and I spoke off the cuff and I regret that. But it doesn’t feel like to me like it’s a good fit for when I want to take a page and make it a bit better. Now, normally I will consider just vanilla JS because JavaScript in general has gotten so good, but if I want a little bit more, I was looking for a solution and Alpine markets itself as like a modern jQuery.

And Alpine really seemed perfect to me for, you know, I [00:51:00] want to do something in a webpage. I feel like I need a library to help me, you know, a bit. And Alpine kind of hits that sweet spot for me. So, yeah, I, for the Cloudinary side, I don’t think I’m doing anything special here at all. I’m not using the SDK. Yeah, I’m just doing string manipulation. But I wanted to show an example of it working within an Alpine application. I think this honestly was more to showcase Alpine than it was Cloudinary.

Sam Brace: And that’s fine. We like that. We like, but like I said, we like being the, like a little part of a project in a lot of cases.

So that, that’s absolutely fine. But it is to, it helps us to have some context here because it’s where there’s a, I think you, we would all agree there are a lot of choices when it comes to JavaScript frameworks today, and it, that list does not stop growing like we, like Becky pulled a report recently of all the ones that people are using and it just, the list is at least triple what it was three years ago.

And so it’s [00:52:00] where you see Remix and Astro and you see Next. You just see all this stuff out there. So it’s to say okay, Alpine’s also now in this mix, but why? And you’re a trusted source. You’re so, it’s good to get some detail on why you chose what you chose.

Becky Peltz: I looked at it and I think it, it add, it lets you add a lot of interactivity without adding a lot of documented add event listener code.

And like in this example here, you see we’re gonna add one of those to get Alpine initialized. But after that you can start writing on clicks in your HTML and things like that. So it just saves you like complicating the JavaScript and having a nice, clean program, and you don’t have to use a builder for it, so you really do the vanilla thing, just import something from a CDN and you’re good to go.

Raymond Camden: So yeah I’m not anti build at all. But I do hesitate when I see a build process in terms of what’s gonna be [00:53:00] involved in me doing a demo or sharing code with others. I use the analogy of my kids, I have eight kids. We don’t do anything casual. Everything is planned. So build process means I have to plan for… nothing wrong with that, but I have to plan for that process.

Sam Brace: Yeah.

Becky Peltz: And I’m sure when they upgrade the build process, you need to go back and upgrade your process. So yeah, the simplicity is nice.

Sam Brace: So Ray, obviously people are gonna be checking out these blog posts and I think that’s a great place because the one thing that I love also about the way that you authored a lot of these things, not just these Cloudinary focused posts, but also in general, is that towards the end of them you do have ways for people to test things out. You typically put some type of a sandbox, whether it’s Glitch, I saw a CodePen on a couple of other ones, so I definitely recommend, I’m advocating for you here, if people wanna test any of this out, that’s probably the best way to go and check some of this [00:54:00] out.

But where else can people be learning about the things that you’re doing? Do you, are you typically posting on LinkedIn? Are you on Twitter? Where’s the best place for people to get the latest and greatest from Ray?

Raymond Camden: So I am still on Twitter. I have made a decision not to use it as much. So when I do a blog post, I automatically share that on Twitter.

But I’m not sharing my breakfast on Twitter anymore. But you can follow me on Twitter. I’m @ Raymond Camden. I have an RSS feed. You can, each blog post at the end has a little form where you can sign up and you’ll get an email on every blog post. I’m on Mastodon. and I just did that little alias thing where I am at Raymond Camden, at raymond camden.com.

Or you can just click the link there. Yeah, that link still has the sr dot social one. But yeah, you can follow me there. You could subscribe, et cetera.

Sam Brace: I love [00:55:00] it. And cats, yes, please. That’s fantastic.

Ray, this has been a pleasure and I’m so excited that you decided to take the time to investigate all things Cloudinary, share some of your experiences and to be with us here today. So this has been wonderful. Thank you again.

Raymond Camden: Thank you for having me. I really appreciate it. Thank you.

Becky Peltz: It’s, it was great reading for your blogs. I hope others take that time.

Sam Brace: So Becky, what’s your main takeaway here? What do… there’s so many things that we talked about, there’s just a smattering of projects, but what’s the big thing for you when it comes to this episode?

Becky Peltz: For me, I actually, I… I wanna get into Pipedream. Pipedream seems like a really fun place.

You can write a little bit of code. He has samples of Python functions and Node functions. And so that’s a really neat place. I also am just really encouraged that Cloudinary is so interesting to a person who [00:56:00] comes into it. You know, like I, I, that’s how it was for me. You know, I too like simplicity, when I taught web development at a local university, I used Vue.js. I like to keep developers in touch with those original HTML, CSS, JavaScript, you know, they continue to evolve and he’s doing that too. So, that, that combination is just a really nice aesthetic for me. And, and then just the whole idea of taking a journey through some code.

Cuz that’s the most fun thing to do when you’re a developer, is just grab some new product, new framework and just start poking away at it. So..

Sam Brace: I agree. I think that that definitely is the biggest takeaways for me as well. Not to just be like, yep, I agree, but it is to say that it’s nice that we can show how easy and simple it is to be able to work with a cloud-based service like Cloudinary in… inside a project, [00:57:00] but also that it’s where when, if you’re saying I want to use X or Y, as we pointed out, like if you wanna use Alpine, if you wanna use Eleventy, if you wanna use whatever, it’s where you can use probably Cloudinary inside of it. So I think that was also just a nice justification for the work that was done, that as a developer you can choose your flavor. And Cloudinary can be an excellent addition to whatever it happens to be.

Becky Peltz: Yeah. I, and I got the feeling that through this, these five blog posts that there that Ray was actually innovating. He was creating his own way of doing things with Cloudinary. And it’s nice to see that you can do that with a product.

Sam Brace: Absolutely. Absolutely. So if you guys have enjoyed this overall episode, I do wanna point out, of course, that there’s more. There is… we have a whole list. We have literally years now. It’s hard to say that, Becky, but we have years of doing this podcast together. So if you are so inclined, you can always go to Cloudinary dot com [00:58:00] slash podcasts and every episode happens to be there.

And as I showed at the beginning of this episode, if you go in to look at any of them, you’re gonna be able to have full videos of what happens to be inside of those particular episodes, but also where you can see that you can view the full transcripts. The one little fun tip that our team recently added was that you can see that in some of these transcripts, there’s timestamps and it’ll jump you directly to that part of the video right from there.

But besides of our like fancy little shiny objects, you can also of course, enjoy these episodes wherever you like to watch podcasts, or to listen to podcasts, frankly. So Spotify, Apple Podcasts, Google Podcasts, YouTube, Cloudinary Academy, or anywhere else. Frankly, we’re probably in a lot of places that aren’t even listed there.

So on behalf of everybody at Cloudinary, on behalf of the entire Cloudinary Academy team, and with a big thanks to Ray and our overall viewing, listening [00:59:00] audience, thank you and we hope to see you at the next episode of DevJams. Take care.