Dive into All Things Digital Media

Sam Brace: [00:00:00] Hey there. My name is Sam Brace and I am the Senior Director of Customer Education and Community at Cloudinary. And you are watching and listening to DevJams. This is where we talk with developers who are doing amazing, interesting, innovative, inspiring projects, especially when it comes to working with images and videos on the web and software on mobile and many other amazing projects.

And because of course, I work at Cloudinary, this program is produced by those at Cloudinary. They probably are using Cloudinary for some of those image and video management and delivery aspects of their projects. In today’s livestream and episode, we are talking with a good friend of mine, Ben Seymour.

Ben, for full disclosure, actually did work for Cloudinary for a portion of time, but has been- for a while now- the [00:01:00] Director of Sales Engineering at Vercel and Vercel, if you haven’t encountered them, their amazing platform, especially for frontend developers, and we’ll walk through all the details about what Vercel does, especially in this program.

But he has an amazing set of projects that he’s gonna be able to show us today when it comes to being able to create image galleries very quickly on the fly with information coming from Cloudinary, particularly with the images that are coming from a Cloudinary account. And then we’re gonna dive deeply into a topic called Open Graph, which is of course, a type of metadata that is used by social networks like Facebook and Twitter and LinkedIn, as well as what we call micro browsers, such as services like Slack, to be able to display images that are associated with a certain URL.

We’re gonna dive into a lot of different ways that Vercel making that easy to work with, and of course, in conjunction with Cloudinary. Before we bring Ben onto the episode, I do wanna emphasize that if you, this is your first time ever being part [00:02:00] of a DevJams episode. Note that we have all of our previous episodes at cloudinary.com/podcasts.

That’s where you can go through the entire archive and find any episodes that tickle your fancy when it comes to details about JavaScript or Next js, or just working with images and videos and working with webhooks and metadata and all sorts of things are associated that there’s a lot of amazing content that’s inside of our overall podcast feed because we’ve been doing this for about two to three years now, so it’s a pretty impressive amount of content that we have in the library.

And we do also wanna emphasize that if you want to continue the conversations that Ben and I are gonna be having in this overall episode, many of the concepts are things that our users talk about daily inside of our Cloudinary community. You can find that at community.cloudinary.com. And as you’ll also see, we do have an associated Discord server for those that would prefer to talk in Discord versus our forums.

Or maybe both. [00:03:00] It gives you lots of different opportunities to be able to start conversations and meet users like you. As we said, Ben does work for Vercel, and I also emphasize front end development. It’s an amazing platform for all the things that you need to do when you’re working in this overall space.

But of course, we’re gonna dive into two specific types of projects, image galleries, and Open Graph. So with that said, I’m gonna bring my screen down and bring on Ben and welcome to the program Ben.

Ben Seymour: Amazing. Hey, Sam. Wonderful to be talking to you again. Just like good old times.

Sam Brace: It is.

Ben Seymour: Hey everybody. Ben Seymour, based in the UK, not far from Oxford, sleepy little town, very cute place. Founded in 1155. Great to live unless you like night life and food to be delivered to your house or the ability to catch a train all of which are impossible. There we go. I ultimately with live with my wife, our two kids who are 16 and 13, and our little dog.

And as you probably gather, I [00:04:00] like things through physics space and also fast moving things with two or four wheels. By day. I work for Vercel who also love speed in terms of web performance, but also developer iteration speed as well. So the sales mission I think is. There’s many missions in here, but one of them that I love is to enable developers to create at the moment of inspiration.

I think capturing that spirit, that flow state is something that I’ve always loved in terms of my work in this industry. And then one of our other mantras is the iteration velocity solves most problems which I think is one of these things where when you’re in the groove, almost anything is possible.

Outside of it. Added friction, added frustrations is deeply annoying. In terms of the rest of the team I’m very fortunate to work with some remarkable people. So we are massively open source. The people who work at Vercel are involved in all these projects, so Tobias created Webpack.

He’s currently working on the latest version called Turbopack with more of the team Rich who made Svelte is here, and Turborepo. Some amazing projects. [00:05:00] All massively open source, huge numbers of downloads and it’s something that we massively pride ourselves in contributing towards the overall community.

Lots more to say, but probably not today in terms of our story. What do you think, Sam? Should I move on to the conference? Should we get set?

Sam Brace: Yeah. Let’s talk about this conference that you guys did with an Next JS.

Ben Seymour: Perfect. So this was October of last year. And effectively it is by Vercel, all about Next JS in this case. So really it is run on the platform. We build the everything conferencing facilities. We look after everything, but it’s fundamentally not about Vercel per se, but about Next JS specifically one, one of our open source projects. In this particular instance, we had 110,000 people sign up to watch it.

55,000 people watched it online. And if you look at the kind of follow on views that they’re pretty impressive. In this one we talked about a variety of things being released. One of them was this thing called edge functions, which at that time was in beta. This is actually quite important to what we’re gonna talk about in terms of Open Graph because we leverage this under the covers to allow certain things to be very [00:06:00] capable.

It was a hybrid event. It was actually the first time we’ve done a hybrid event. It was fairly small. We had a few hundred people in San Francisco, also in New York. We also had one in London and also Sydney. But one of the joys we did is that we took lots of photographs of the day to capture the fact that lots of people look to meet each other for the first time.

So we are a remote first company, but also we are a member of a very large community of people, many of whom would also not seen each other for a long time. So lots of friends came, lots of people from across the industry came, and we made this rather splendid and glorious image gallery that came out of it.

It’s very hard to run a performance test while we’re live on air, but effectively this is an incognito tab and if all goes well you’ll notice that was staggeringly fast. We’ll share the link at another time, but ultimately it is one of the fastest, frankly, media rich. One of the fastest loading sites I’ve ever seen.

The general interaction, oops, I clicked my mistake. The general interaction with everything that you do is incredibly fast. Now, behind the scenes of all [00:07:00] this, just like Sam said earlier there’s fundamentally a lot of Cloudinary going on and a lot of Next JS with Vercel going on. One thing that we’re massively fond of doing is also is sharing what we’ve learned.

So Hassan, who works on that main project for the gallery also wrote an extensive blog going into all the little details that he did, some fascinating stuff that he did along with some of the engineering teams in the ways that we were using effectively the Cloudinary’s APIs alongside some of our data loading properties to allow us to leverage, the best power of all worlds.

There’s some tips and tricks he gave down that I’d never seen done before that were quite amazing that some of his suggestions are to do with things like having a. Having a zero transform 3D which ultimately forces hard work acceleration where it’s available to you. So little tricks like that in effect it looks like it shouldn’t do anything, but behind the scenes it does some fairly subtle things. Also amazing things about this is if you notice there is a clone and deploy button. So another thing that we love to do is somebody wants [00:08:00] to again, learn at the point of inspiration, is that if this looks cool, you can read the blog and you can literally hit clone.

And effectively you can in about three clicks have a version of this fully running on your own local host or also on your own Vercel account. If you take one of our other templates. So if you go to vercel.com/templates, this is where effectively, you have a huge list of starter kits and by no means is it only Next JS you will find most frameworks cause we are also framework agnostic.

You’ll find lots of partnerships and effectively if you search in here a Cloudinary. Then you’ll find there you go, that one there, which is one we’re also talking about. So again, getting going super quick, this is one that I was considering doing live on air, but frankly, take my word for it. The whole thing was deployed in 46 seconds.

So I think one of the things that often I am looking for my many developers is if I want to go and learn something, how much time do I need to invest in this? Can I make progress in. An hour, a day, a week, how long do I need to go and do this before I can actually show that there is [00:09:00] some value coming out of it? Our goal is to make that, frankly, seconds and minutes more than anything else. So…

Sam Brace: Really incredible. And what I love about what we’ve done here is that we’ve combined, as you said, best of breed where we have all of this amazing technology that Vercel went and did, but it’s not where you went and tried to reinvent the wheel with image delivery, image management, you’re able to combine two distinctly different technologies and bring them together for this one project and. It’s something where I was interestingly showing this to our events team that ran our user summit back in London a few weeks ago now, and they were saying, “oh, we need to do this for all of our events”. So it’s to say this is a easy to use tool that any team can absolutely adopt. So great work by the Vercel team to be able to make this possible.

Ben Seymour: Perfect. Perfect. I think that bit where the two worlds meet is probably most if I come down to here. So effectively within Next JS and ultimately this is using there’s a new version of Next JS that went into [00:10:00] stable release last week using a thing called App Router.

This one is actually based on pages. So in this instance, we’re gonna do a single set of data fetching within Next JS. Get static props is effectively a way of saying we would like to pre-build this page or build the page at a certain moment in time. So you can have versions where you do effectively what is server side loading.

Every request goes and make something happen on a server that typically has some kind of performance impact that is rarely good for user experience, but it can help greatly with things like personalization and a few other things. In this instance, we’ve got an option with a Next JS GET static prop says, I’m gonna go and effectively pre-build all of the pages a bit like static site generation that I’ll need in order to then serve what is effectively static pages out onto the web.

But there’s a couple of small twists into that. One of them is that you can choose to do only a small subsection. So imagine if I’m a massive news and media company and I have got a million assets in Cloudinary, maybe I’ve got, 10,000 collections- building all of those is gonna take a long amount of time.

So what you can do within here is you can actually say, [00:11:00] build certain of the collections but not the others. The rest can be generated at request time and after that point will be then served as though that they were fully static objects. In this particular instance, you can see that ultimately I’m using the there you go.

There’s the Cloudinary search. I’m using a variety of things and I’m passing in through environment variables just like you would do. So mostly my credentials, my authentication is done behind there, but I also do certain types of kind of configuration against the actual media that we’re gonna serve in here.

So in this instance, we’re going against a given specific folder. We could have done tags, we could have done any other piece of metadata. And then effectively we’re gonna say to Cloudinary via the APIs, please give us all the information that is relevant to this particular query. If you can just see in the terminal at the bottom, I hope that’s big enough.

This is only the response that comes back, so the JSON response comes back. And ultimately this one brings back what is it, about 111 items. I think it was just in there. So again, I’m making the API request. This could be done at build time or also in [00:12:00] this instance, another interesting thing happens, which is I’ve added a single line which completely changes certain elements of the information architecture.

So this single line revalidate effectively 3,600, which is one hour in seconds. What this says is this page is gonna be classed as static. So from performance perspective, this is a really static file served by globally deployed CDNs. But the revalidate effectively says that every hour we’re gonna check to see if there’s updates.

This is highly configurable. What it means is you do your event and on day two, you wanna do the next one effectively you’re not gonna have to rebuild everything from scratch, but you will find, pick up those kind of, those changeable aspects, if that makes sense. Sorry, Sam, I think you were gonna ask me something.

Sam Brace: No, I wasn’t gonna say, I was just saying that’s a very, very smart one line of code because as you said, one thing that we push a lot in training is being able to set it and forget it to say get your system to be able to work for you. Set up automations, let Cloudinary do its work with automatic transformations.

And this is an example of that where you [00:13:00] can easily say, just revalidate and it’s gonna continue to make sure that whatever you’re adding to this folder is gonna make sure it’s updated to what’s showing in this overall app. So this is fantastic.

Ben Seymour: You mentioned web hooks earlier, it’s one of the other things that you talk about.

So we can also do a think on demand for revalidation, which effectively is, as long as you’ve got a slightly more complex system, which is gonna trigger an event, we can then catch that and do the invalidation on request as well, if you like. So lots of options. Next what I was gonna do is, so this thing here is using an environment variable.

I’m just gonna manually override it. And if you look on the left, so effectively, there you go. So what just happened is in my local environment, I have literally made one change. This has then regenerated this particular page. It’s changed the request in the way it’s gone out to Cloudinary. Cloudinary has come back with an entirely different set of media and everything else is then built on demand.

I think it’s remarkable how quickly you can affect change. If I roll this one back to just as it was, and again, hit save there are certain things within, the Next [00:14:00] JS development environments that are pretty much instantaneous. We have a hot module reloading, so if I change that title at the top there and then hit save, you’ll instantly see it.

In this instance, we’re of course making a change that triggers an API request. Which then comes back, hence even what you’re seeing there is the full round trip. And then all the media also being loaded. Another cool thing, this is something that I for create, create, there we go. In this version, effectively what I’ve just done, as I’ve said this time, please can Cloudinary give me the JSON response back for all the media that matches my query.

But please can you do it in descending order effectively reverse order by the created app. So this is literally the reverse order timeline. So this is the most recent photograph most recently. This project actually is slightly more complicated, which is it’s actually my Instagram feed. And as you probably gathered I’m very fortunate I gotta go and spend a couple of weeks in Iceland very recently.

Yeah, this is actually me setting up a slightly more complex workflow, which was, there is [00:15:00] a Zapier integration running with my Cloudinary account, which effectively is looking for changes in there. It’s then doing an automatic import into my Cloudinary account, doing a bit of tagging, doing some object aware kind of AI analysis as well.

And then this allows me to effectively keep almost like an owned media version of my social media as well, just to gimme lots more choices and things like that.

Sam Brace: Which is incredible. And we’re seeing even more people doing this. Like we had previous episodes where people did something very similar where we’re trying to get everything to come from our Instagram account because of un unreliability they found sometimes with their APIs.

So it’s what you’re demonstrating is not like edge case by any means. We’re seeing more and more developers trying to own their Instagram content and put it into somewhere a little bit more safe or just at least more reliable. So this is cool.

Ben Seymour: The other wonderful thing is set it and forget it is, I’d actually forgotten I set this up until I came to do this project.

I went to go and set it up and found that effectively my Cloudinary account was already [00:16:00] still running on the old API that I’d set up quite some time ago.

Sam Brace: Very nice.

Ben Seymour: So, the next thing I was gonna look, talk about, so this is all fairly local. This is me working at my machine rapid iterations, trying lots of stuff, seeing what the outcomes are like, making sure that each, I suppose each use case fits.

There’s gonna be certain things in here that, if we look at, again, you might look at how we handle different aspect ratio ratios of images does a pretty good job. But having done my local work, I suppose the next thing that typically wanna do is we wanna open up to more people. So this is me going into my Cloudinary dashboard and my, sorry, my Vercel dashboard and my account.

And ultimately, this is me finding what’s called my deployment pipelines. So these are all of the bills that I’ve been doing, and as you can see in the run up to this webinar, I did a few double checks of a few things over here. I did a few redeployments, a few status changes, a few changes.

This is every deployment that I’ve done against my account, but not just the live production work, but also the preview, what’s called a preview deployment. So if you see here [00:17:00] preview- what this actually means is that I did a branch on the code. So locally I branched. In this case it was called Iceland.

It was for that trip that I just mentioned about and effectively having done a branch and then worked off that on that branch. As soon as I start to do commits against it, my Vercel account picks this up, realizes it’s not a production deployment, it then spills up an entire preview deployment, which allows me to do things like share this with somebody like Sam, who can then come in and inspect it without making any changes to production.

It gives me a couple of other really nice, handy things as well, which is I can have environment specific environment variables. So if you saw earlier, sorry, let me just mute when I cough.

If you saw earlier I made that change locally. In this instance, this is me doing it via environment variables on the platform. So I can take a fork of my code, I can come up with another edge case, I can have a preview deployment, and then effectively I can say, Hey, but let’s try it in a different configuration.

And what [00:18:00] you get out the other end is effectively a live running version of that same thing we saw earlier. But it’s not gonna affect the production. So it’s a live preview deployment that frankly, to all intents purposes could be used live if we so wished. The other thing that is pretty cool is if you see here, effectively, we’ve also got DNS settings.

So within my account, what I’ve said is look for the branch called Iceland and set a subdomain against only that branch. Obviously, it can be called whatever you like. So in this instance, if I’m working in a bigger team, We can already know in advance what the end state URL is going to be. That everybody can then run tests against, if that makes sense.

You can either have these against against things like the the Git project name, so that’s also predictable further in time. Or you can have it against manually curated one. So if you wanna share it with your QA team, they will know in advance where it’s gonna be. And it’s just a question of orchestrating.

I don’t think we have. Time today. But there’s some other cool stuff that we can also do, which allows actually other elements of feedback, which is this preview deployment also [00:19:00] includes the ability to annotate. So effectively anybody coming in here could start to add in things to passing comments back to the team.

So phase one is rapid iteration locally. Phase two is sharing with the bigger team. Phase three is getting feedback from the rest of the team. And it does things like it goes into your linear boards as well, if that makes sense. So this one I think is all about the iteration speed of the team.

And that’s pretty important.

Sam Brace: Truly incredible. And the thing that I love that we’ve done here, to take a little bit of a Cloudinary angle on it as well, is that many times when people see that search API that you’re using, they think of it strictly as a way to go and pull a list, but they don’t necessarily always think about it as a way to pull a list that’s gonna be driving delivery.

And the fact that you’re able to do it this way to say that we’re calling this, we’re getting the list of 150 results from that folder, and then deploying that into this gallery. That’s a really cool use case for the search API. So I think that there’s a lot of amazing things here, but I’m blown away.

Ben Seymour: Wonderful. In [00:20:00] a way this kind of brings us to the start actually.

Sam Brace: Yeah.

Ben Seymour: So the reason that you and I got in touch again was that I shared that project that we just looked at. I shared that into LinkedIn. This is the actual post, and ultimately, I think you spotted this and saw that I was doing some stuff with Open Graph, and that was how the rest of this all started.

This is the Open Graph image, which I set up on that project. The next thing we’re gonna talk about is what Open Graph is, have to use it, and also some of the ways in which effectively Vercel, Next JS, and Cloudinary can combine to give some incredible capabilities. If you share that same post, or if you were to drop dynamic.photos into Slack, you get something like this.

Obviously this one is me dropping that link into into LinkedIn. Interestingly, when I did a re-share of the post that Sam did for this webinar it actually accidentally, inadvertently gave us an example of what does what something that isn’t good, looks like. I’m trying to avoid saying bad, but fairly what bad looks like.

So within [00:21:00] post re-sharing, within LinkedIn, it doesn’t allow you to have control over your own Open Graph. Now, I would argue that frankly, a big blue box doesn’t really do a great deal to entice you in compared to what you can do from an Open Graph perspective. This is a protocol. It is available effectively.

It’s just typically attributes that go into the head of your html by and large. There are some fundamentals that you should always try and have things like title and types. The type could be videos or images. If it is an image, then you want to share a URL to the image. So in the case of the one that we saw a moment ago, the image that was shared effectively here is a completely different image.

It’s one that you would never see on the webpage itself. So if you scroll up and down in here, at no point will you see that image. It is within, inside the head. So it’s within, inside the metadata of the page. It’s only used by other systems or other services or other processes. We worked with Colin for a while.

And ultimately Colin is amazing posts on this as well. So it’s also called [00:22:00] micro browsers, or it can also be called link confirming sometimes as well, but the protocol behind all of it is ultimately Open Graph. My intention is I think Sam and I are gonna find a way to share some links with everybody afterwards, but some great resources.

In this case by Colin, there is also one by one of your colleagues Colby.

Sam Brace: Yep.

Ben Seymour: Tons here to be researched into. Frankly, it isn’t just what we’re talking about today. Today, it’s just the tip of the iceberg. There’s a lot in there that you want to consider from customer acquisition, from social engagement from SEO.

There’s a lot of business benefits to be explored. The final thing in this sequence is I actually was using Cloudinary in one of my other projects. So I have a storytelling platform that I’ve been building for a while and ultimately behind the scenes I was using before you and I met each other, the first time I was actually using Cloudinary to do some very complex image manipulation.

So ultimately within inside the page itself, there’s nine different images. They’re all completely independent, and as you can see, they are varying aspect ratios. Some of them are quite [00:23:00] wide, some of them actually both of those happen to be quite wide, but there we go. Some of them are more square behind the scenes what I did with Cloudinary was, and you can see it just here, it’s actually, it’s a fairly complex command. It’s a multi-layered command, is ultimately I’m taking a variety of different aspect ratio source assets, and I’m doing intelligent cropping on each one, and I’m doing a complex layering sequence to make this single.

So this is a single composite image, which is effectively built from nine other images. I think the most important thing to mention about the Open Graph thing a moment ago is effectively, you get one image. What you do with it is very much based on the tooling that you have. So in this instance, you can obviously argue that Cloudinary allows me to do remarkable levels of image manipulation. But the end result, this is just a single image request and that’s the power where Open Graph gives you one reference, but what you can do with it is quite remarkable.

Sam Brace: It’s interesting because like Open Graph is something that I’ve been talking about, I feel like I’ve talked about for 10 years now, like I might be a little bit off maybe it’s more like nine or but it’s something where this isn’t necessarily new [00:24:00] technology that we’re talking about here. This is something that. I remember when we were teaching people about just running their websites back in like 2014, 2013, and we’re teaching them about this new thing that is coming from Facebook now meta and talking about Open Graph protocols and this is a way to make sure that you can start affecting the way that your metadata looks on social websites like Twitter and LinkedIn and so it’s something where it’s interesting that it’s still so powerful, but in my opinion, it’s still something that people are trying to wrap their heads around.

Because as you pointed out, many times when we are writing this new blog post or showing a new project, we don’t always think about the ways that people discover it on social media or discover it, as you mentioned, for search and optimization purposes. So there’s a lot of deep power with being able to just start thinking about Open Graph and what it means for your project that you’re trying to share with somebody, because pictures get people excited and they get people to click [00:25:00] through, and that should ultimately help in open rates and time on site and all the things that people care about when it comes to analytics. So I think what we’re gonna be covering here about how this is all done is vitally important for anybody that’s just trying to be able to get people to know about the work that they’re doing because Open Graph is a great tool for that.

Ben Seymour: I think the other thing that’s changed over those 10 years, while the protocol has pretty much stayed the same, is that social media has clearly dramatically changed in the last decade. So I think the way that we use our phones and the way that we use various platforms, I think this is the fundamentally different thing where, you know, this is a massive change if you look at the viewing stats between devices 10 years ago, 2014 to 2024 yeah, it is gonna be quite another a big change when you look at it.

Sam Brace: Absolutely. Absolutely.

Ben Seymour: Okay. This was last year where effectively we announced a new iteration of a project that we already had.

And by we I mean Vercel and by we I mean people who are far smarter than me and a variety of other people in [00:26:00] the engineering team. So we originally had, and this is what this blog post talks about, we originally had effectively a different architecture was using a totally different build system.

It was ultimately running on something that’s a bit more like a lambda, like a serverless function. It had various consequences, like maybe slow cold boot times. A variety of weight in the complexity of the library and the environment was being run and led to an amazingly powerful solution.

But which compared to what we released at the very end of last year, actually was quite slow in comparison. I suppose a nice way is to say that the new version is significantly faster, significantly more performant to the point where it’s, I thought what you can say there it’s effectively, I think it was like, 50% faster, even from a warm start.

And if it was versus a cold start, then it was a greater magnitude. So you can see that. Sorry, there it is. Just there. So it was taking maybe four seconds to generate one of these. The modern version is taking like hundreds of milliseconds. No more than that. There’s also a variety [00:27:00] of other things that’s also happened in the way that we’ve replatformed is we’re now using a effectively far less expensive compute, which means that you can start to consider doing something like a hundred thousand of these.

And not be that concerned about the cost that you’d have. If you scroll down to the bottom of this one again, we’ll share the links later, is that actually, for that conference you mentioned earlier, we actually did custom OG images for every single person who signed up for a ticket. So we made over a hundred thousand of these using the same technology, every single one, personalized.

Obviously, from our perspective, we wanted this to be something that was then shared socially on Twitter, everything else to also gain traction and also to gain everything else. So this was the digital equivalent of this thing here that I’m holding up to the camera. We also had for people at the in-person event, this is the digital version of that, and it went down very well.

This also massively helped with certain levels of engagement. People wanted to share it. People then were curious. Some people wanted to know how on earth we’ve done it. Other people and talk more about the conference. So there’s a lot going on behind the scenes. Part of the thing that [00:28:00] greatly helped this become feasible is I mentioned that in that October event we talked about going into a beta release.

We also are now at the point where this thing called edge function is effectively is now a ga. And this was just at the tail end of last year, which opens up a lot of different possibilities. So this gives us effectively a lightweight edge run time. No cold starts, but the bit that also I think gives it really interesting dimension is that it supports web assembly.

So you can take things written and C or rust and you can effectively start to combine all of those and then run them in this same environment, which is why yeah, again we’ve been able to get some pretty phenomenal outputs from it. So our general approach is tons of documentation. Obviously we try and give as many examples as possible.

Our goal is obviously to help everybody get hands on as quickly as possible, to learn as quickly as possible. There’s always a playground because not everybody likes read documentation, but I think the other bit I also love is that we’re massively open sourced. So effectively this is open source and public, so you can see plenty of forks, plenty of stars. And then the other bit is if you want to go and get [00:29:00] hands on, you can just come here and you can grab off one of our repos, a ton of existing examples that you can copy and paste as the start, as to what you do next.

Sam Brace: One thing that’s really cool about this, and I wanted to see what you thought about it. So we’ve, when we’ve talked about Open Graph with other projects in the past that developers have done, a lot of times they’re using systems like puppeteer, serverless functions that are associated. Maybe playwright is another one that I’ve seen come up that’s the same idea as puppeteer, but what, talking about advantages and disadvantages, to me this seems like a much more scalable option.

Like the example you showed of an Next JS Open Graph that you had for the conference is that if you have to create a ton of OG content quickly, this seems to be able to generate that much faster than constantly having to spin everything up from a cold boot, everything that you have from just like basically spinning of a whole browser to be able to just handle this thing. But talk to me about that, cause I, I feel like I don’t [00:30:00] fully understand like the competitive aspect of that.

Ben Seymour: I think you’ve nailed the core points though, so effectively this is a review of the old system that had been built by the team three or four years ago compared to the new version.

So, the old version was using chromium in a serverless function, the new version effectively doesn’t require even a headless browser. So we’re doing it a lot closer to native, which obviously gives you It’s far faster and far cheaper and far quicker. So, normally what is it… Fast, good or quicker? Whatever it is. Pick two. Effectively, we just went for all of them from outside.

Sam Brace: Yeah, you kinda did. I agree.

Ben Seymour: So, we kinda just went for everything. What, why choose two? Two, which you can have the entire lot. So this is ultimately again, Sartori itself is open source. You can grab it and if you really want to, you can go and try and implement it yourself.

We have then ultimately implemented this as a core primitive within, inside of the kind of the cell ecosystem of cell platform, and Next JS is a framework as well. So you can by all means, go and, [00:31:00] follow your own path. Obviously, we think we’ve done a pretty good job and you can probably save an awful lot of time by using ours.

But we also know that people like to go and noodle around for themselves as well. Yeah you nailed it earlier, massively fast, much much cheaper, and much more performant to get those first responses back as well. What I did then was I actually grabbed some of those examples just to show a few running ones.

Shall I have a quick wander through these?

Sam Brace: Yeah, absolutely. I would love to see some of this.

Ben Seymour: Smashing. So, this is yeah, as you can see, this is a fairly simple little bit of code. Ultimately, I literally just grabbed one of them interesting actually, I should have updated these. I mentioned earlier that this this edge is now it’s now in stable release.

Some of these code examples when I first made them, which is was the tail end of last year, actually was still using that version one so I could come back and make this stable these days without using experimental version. One of the glorious things is, from a frontend perspective, if you [00:32:00] imagine we built a website.

It’s mostly frontend skills that have gone into that. Obviously, people who know, html, css, probably tailwind these days. A variety of things in JavaScript may be using Next JS or anything that you like, and yet when it comes to the OG image, The kind of tooling in many cases for a lot of people might well be doing something like Cloudinary manipulation, but a lot of people that I met with were generally building something in Photoshop.

Sam Brace: Yeah.

Ben Seymour: And then doing an export as a static object and then trying to put that somewhere it could be pointed at. I think that step between modern frontend and Photoshop, and I used to work at Adobe and I love Photoshop, but it’s not by any means the same skillset or the same workflow or the same process.

In this sense, the joyful thing is that we’re using html and css tailwind to effectively determine what the layout looks like. So the exact same people who are building frontend experience are gonna be really familiar with how all this works. So hopefully html, css image references can come in.

What [00:33:00] comes out the other end is, this is what’s produced. This is effectively just an image. So you get an image response back. This is me using this one up here – the Vercel OG library and that’s pretty much it actually. Obviously there’s a little bit of a try catches for errors, but this is all you need to do to start your image generation process.

Now what I do as I wander through this next thing is this one here was hard coded, which obviously doesn’t certainly scale. So in the second one, I just chuck a bit of stuff in that says, maybe don’t have a look at this query strings. If there’s a career string parameter in the right name, then let’s start using that to dynamically change things.

This is where it’s slightly tricky with the smaller screen, but in here, this is literally me saying, breakthrough from your constraints. Whatever we put into here, will then be dynamically generated at request time. So this is how you can imagine, you can start to do very dynamic generation of everything.

So you could have one of these automatically generated for every single blog post that you ever do and it supports multilingual. So you could have one of these for every [00:34:00] blog post that you ever do. In the right language for the region where you’re gonna serve it into. So this becomes immensely powerful.

You can start to you can hear, start to couple up your content management system. Your send headless CMSs into your production systems as well. So I think this is tremendously powerful. Next step in here was, let’s bring that one back over to here. Thank you. Next step is let’s use some custom typefaces.

So between these two here, you’ll notice it’s starting to look a lot better. Bit of typography goes a long way. So at this point I’m making a reference to some true type and also to woff. We’ve also got some other very interesting font optimizations for your live website. But that’s, For another time.

So, in here I’m pulling in font file references. So if you happen to be the kind of business that has your own custom font recommended you end, you can then start to make references here. Other than this, check the licensing on your typefaces. I’m also doing a little bit where I’m starting to do some tweaks to things like the background color.

So if you have a look at my blog, there’s a certain color palette that I use in [00:35:00] my blog. So this is where I’m starting to make this a little bit more customized. I’m using better typography. In the next instance, I just wanted to show, again, it might only be a, oops, come on. There we go.

Might only be a single media reference, but this is actually a. The media reference I showed you earlier. So the fact that Cloudinary is taking all of this and is doing the nine image optimization, cropping, manipulation, compositing, and serving means that single image reference is remarkably powerful.

So this is where I think you really start to combine both worlds. If I’d have needed to build effectively a different setup within inside of this this html to handle all of that would’ve been a lot more complex. So I think this is a great place where the two worlds really work very nicely together with each other.

And the next example is really this one that is one of the ones that started it. So this is where I grabbed an asset. I was experimenting with different color palettes and I just wanted to very quickly effectively reverse this. So what looks like if you invert all of the [00:36:00] colors effectively, And this is where I hit a snag, which thankfully again with Cloudinary in my back pocket allowed me to fix it.

So ultimately this is the before and after. So if I do nothing to that image, which effectively was a black liner that was on a transparent background, it’s actually an svg as it turns out. And if things like sanitize so one of the great things about svg is it’s immensely powerful.

One of the bad things about svg is it’s immensely powerful. You can hide just about anything in it. One of my favorite simple commands within Cloudinary, you can sanitize the svg, is to make them a fairly safe to reuse elsewhere. I actually was converting it, background, removing it, and also allowing myself to do things like color change.

So if I come over to here and then there we go. So this is, I think, a pretty beautiful outcome that would’ve been really hard to do without the combination of both those technologies.

Sam Brace: There’s so many good things that are, I’m you’re showing here because one, one showing the overlay situation that you’re able to create with the nine picture grid that you had there.

It does [00:37:00] show really great use cases. To be able to say, if I wanna take this image and that image and the other one, and combine them to create this Open Graph image, or just anything with being able to combine this into one piece of content. Cloudinary can do that with overlays, so I love that L underscore usage and being able to manipulate where the X and Y coordinates are and create that beautiful grid.

But this is also very impressive, what you’ve gone shown here with the overall picture that we was basically black against a black background because again, this is showing the ability to colorize being able to do all of this on the fly, but also programmatically because let’s say that you have this happening across 50 Open Graph images.

This is where, thanks to what Vercels doing, you can scale that, but also you can simply apply some of these parameters into the overall images and you can have them now immediately all affected where back to previous software that we mentioned, it was where that’s not as easy to automate. You would have to go in and [00:38:00] manipulate each single image, do an upload, be able to then pass this into a place where it, so it’s just, this is a very simple approach to being able to handle something that’s very complex and I really love these overall demonstrations you’ve created here.

Ben Seymour: No worries. I do have a few more. If you’ve got a bit more time.

Sam Brace: I would love, I love demonstrations. Keep it going. Keep it going.

Ben Seymour: So, this one is again, ripping on the theme you saw earlier. I’m not gonna show the code. I think you can. I think most people figure out what’s going on behind the scenes.

I’m gonna show the Cloudinary commands that I use behind them. So this is where we started. The idea is we start with a single image. It’s a glorious image that I I found somewhere. The limit with this is effectively, it’s a big rectangle. It’s a big rectangle with a certain shade of blue.

And, the subject in question is the turtle, obviously. But one of the things I really love is this command here. So I use Cloudinary’s background removal in this instance. So this [00:39:00] is me taking that same image. I’m not doing anything to it, frankly. All I did was add another command and then Cloudinary does it for me.

And then I can start to do little bits of tweaks. So this is where I can start to take that existing initial media and I can start to experiment with it. I can start to break it free from those foundations of being in that fully in a big rectangle. I can now make it feel like it’s a part of the rest of everything else.

It doesn’t be like text next to image anymore. It feels like one item being drawn next to each other. And then can do other treatments. Everyone experiment with color palettes. This is gray scaling. Final one for this sequence is one that is frankly, one, again, one of my hugely favorite things, which is Cloudinary has colorblind assist effectively. So it’s this command up here. So if you imagine the kind of work that you end up doing as a frontend web designer in terms of color contrast, when you’re thinking of accessibility from a visual standpoint, this is the treatment that allows you to do something very similar to your images.

As well. And very few people I think, actually remember to do about this. So if you look very closely, what you can see, and I’ve done it in the black and white one, to make it slide more obvious [00:40:00] effectively, it’s overlying overlaying lattices, where the color contrast is different in the image. So if you were somebody who had a colorblind weakness, you may not see those boundaries, and this lattice just means you can more easily start to see the definition of it.

This is one of those things where I wish more people would consider doing this. I have four brothers and two of them are colorblind and they really struggle. It means I get to win at Snooker slightly more easily. But other than that it’s hazardous.

Sam Brace: Oh, I love it. But no, but you’re absolutely right, and that’s the wonderful thing about being able to have all of these thousands of transformation opportunities is that if you want to be able to say, I need this to be gray scale, or if I need to flip the image once again, you don’t have to be going into separate software to do it, it’s just changing the URL or changing the overall parameters you’re calling for that image. So, it’s simple and it shows a lot of the power that Cloudinary is providing to be able to create these Open Graph images. So, I think these are excellent examples.

Ben Seymour: Okay. I already think I [00:41:00] know you well enough to know that you’re gonna quite like this one as well.

So this one is if you ignore the crudity of the mockup, this is a Photoshop file. So we said earlier, this is where a lot of people start their work, especially on the creative side of things. Behind the scenes is a Photoshop file. If I was to change this to be psd ultimately it’s not gonna load because browsers don’t support them.

It’s gonna offer to me to try and download it. At the end of the day, it probably is gonna be 10 meg 20 meg. I’ve seen Photoshop files that were 50 plus meg. So the original asset in here is a very common protocol. Photoshop files. PSD files. Ignore the design. That’s just me. I’m not a designer, unsurprisingly.

So the original file is how many creative teams work, but it’s in a format that really isn’t, particularly helpful for the web industry at large. The joyful thing here is eventually I can just drop a different file extension, Cloudinary does that change for me. Another thing that I really love is this is where I can reference different layers.

So I can actually say which [00:42:00] layers within the Photoshop file to turn on and off. And then I can start to do extraction. So it’s a bit like that background remove from earlier, but it’s also a completely different workflow because this starts with a multi-layered composite that’s probably had a lot of care and attention paid to it, and in the end it allows me to take this same asset and to reuse it.

The investment typically from creative teams in making these assets in the first place, the photography, the photo shoot, the touching up later on to be able to repurpose subsections of that in every other format. I think this is rather wonderful.

Sam Brace: It is.

Ben Seymour: Also, again it’s a different use case, but it’s a very different part of the business that I think we can then start to work more closely with.

Sam Brace: And I think you said it well. I think the fact that with Cloudinary, you can be able to change really any format into another format. And I can’t think of a reason why I would wanna change a PNG to a PSD, but in most cases you would want to go PSD to PNG as you’re showing, or to WebP your JPEG or something along those lines.

But being able to expose details based on clipping paths, [00:43:00] based on layers, that’s something where it’s very helpful because you can give your creative team. The ability to say, put your file on as is. You don’t have to optimize it, you don’t have to export for web, export for screens, give it to me as is and then as a developer you can go and create any type of output off of it, including as we’re showing here, Open Graph content. So this is fantastic.

Ben Seymour: Okay, I have one last thing.

Sam Brace: Oh gosh. Let’s see it. I would love to see it.

Ben Seymour: There we go. One last thing. And we were quite fortunate here cause frankly this only got released two weeks ago.

Sam Brace: I love it.

Ben Seymour: So ultimately, You can imagine doing your local testing. You can imagine dropping into your own WhatsApp and having a look at what comes out the other end.

But one of the things that we always wanna know is what’s this gonna look like to our own customers? So about two weeks ago, if you come into your dashboard, again, this is what you saw earlier. So this is a variety of the releases that I’ve been doing on this particular account. If you come into any one of these, including the preview deployments, we now have a new tab called Open Graph.

[00:44:00] Now, ultimately what this does is this is, there we go. So even against what is exactly a branch, So it’s an experimental release, potentially. This is me and being in a position to see what would this look like to a Twitter user. So it’s all well and good as thinking it’s good, but being able to see what it looks like on Slack or on Facebook or LinkedIn I think is immensely powerful.

It also gives more of a breakdown for more of the aspects within the Open Graph protocol, and it also very helpfully tells us when we’ve maybe forgotten something. So in this case, I forgot to put effectively the URL reference to the canonical link into it. So, I think it’s a great way of verifying that what is about to go out the door is what we hope it’s gonna be. So rather than having to do again that round tripping, there were a few other validators that were sometimes workable. Frankly, they would tend to be a bit hit and miss. There was like a validator on. twitter.dev or dev.Twitter.com.

But this gives all of these in one place, straight into your project, and it also allows you to really run experiments, do a branch run experiment, have a look at this straight in the same place, and [00:45:00] then let’s face it, what you hopefully want to go and do is, if you’re very happy with the results.

You could literally then come along and have this as part of your deployment step. So in some cases this might be that where you go, we’re now happy that even the OG image is ready. Let’s promote this to production. Something like that.

Sam Brace: Well and the key thing I think that you said to me that I was like, oh, yep, that’s why this matters, is that it’s about things that are not in production yet, these are things that will be in production, and a lot of these testers that I’ve have found when it comes to Open Graph, it’s a way to validate something, but it’s already been pushed live because you’re able to scrape the URL. And this is where, based on what you’re showing here, this is something where it’s not deployed yet and you’re still able to test a lot of these various aspects against the way that these services like Twitter and Slack would interpret the Open Graph data that you’re giving to this before everything’s published -everything’s live- people can see it, and that way you’re not having to retroactively say oops, we made a mistake. You can check literally everything about the deployment before you deploy.

So this is a really big win in my opinion. [00:46:00]

Ben Seymour: Perfect. I think we’ve covered everything that I had in mind. Again the potential I think is limitless. That thing at the beginning, which is our goal is to help help developers to create at the point of inspiration. I think there is so much that you could do here.

I think it’s like you said it’s a massively, if we just look at this one segment of what you can do in terms of the way that your business or your project is expressed I cheated, by the way. So for the how to contact me, the easiest way for me was actually was to actually use one of these tools very quickly to chuck it up there.

Yeah. This to me is quicker than frankly, opening the slides tool and adding it in there in many cases. So I think that created the point of inspiration, experiment, local iterations. The faster you can move, the faster you can find what works and what doesn’t work. The faster you can get feedback, the faster you can do that next cycle.

I think this is the way that we ultimately find our organizational and our team health, if that makes sense. Let’s face it if I [00:47:00] think of the number of changes that happened in our industry in. We talked about in the last 10 years in terms of the growth of mobile and social tool intensive purposes.

But I, I think kind of 2020 through to 2022, obviously there were a lot of health challenges that caused a lot of the biggest changes to all of our everyday lives. The ability to developers to be able to go and figure out how on earth to help their business survive in that environment, I think that’s something that, that we can both greatly help lots of people with and hopefully help them be very successful and their business is healthy as well as they go.

Sam Brace: Absolutely. Absolutely. I, and I think the biggest takeaways that I’m seeing here is that one, the image gallery situation that you in showed to me, it has a so much applicability to, I would say, lots of different businesses because the example that you gave. That it makes perfect sense. You were trying to do a summary of content that happened around an event, which was Next JS conference, but I could also even see this applied for e-commerce purposes, where if I’m trying to show a collection [00:48:00] of all of the shirts that we’re gonna be debuting and have that, where now I have a developer say, Just point to this folder and now we can display all this and then give this out to the media or to an agency and they can be able to see all of this.

Its ways to take a lot of the concepts that Cloudinary has done with collections, but make sure that they’re being able to show hundreds of them and also in this nice gallery format. So it’s one way to take additional steps forward with that. So I think there’s if I was watching this.

Even if I wasn’t a developer, I would be able to see there’s a lot of use case behind that image gallery that someone can bring into the business today. With the two businesses, of course, helping along the way.

Ben Seymour: So the thing that if you ever invite me back, the thing I’d like to talk about next time is that effectively the latest version of Next JS went into stable last week.

Sam Brace: Okay.

Ben Seymour: And it allows us to have, so in the version we looked at earlier, it was the page level data fetching the latest version, which is called [00:49:00] the app reactor effectively allows us to have independent components. Within a page, each of them doing their own independent data fetching. So what I showed you earlier was this page, let’s refresh this page every hour, whatever it was.

In this instance, we can say, the top section the nav and the footer will not change or at least will not change for a long time. And you can then have independent boundaries. This is all of the back of I think all React server components that came out. React 18. This allows us to have completely independent pockets or components, or you might wanna say composable architectures, which would allow us to effectively, take everything we’ve just seen right now, but make it effectively at the component level. So now we can start to have everything we’ve just seen, but as being a subsection of your page and then reused across different pages as well.

So I think this is where I imagine we’ll find that a lot of traction is found. I think so.

Sam Brace: Oh yeah. Cause now if you think about it, like you could have multiple galleries, if I’m understanding that correctly. And then it’s [00:50:00] where you can, if so many brands have these brand portals or they have these like media rooms where we could say, here’s a picture of all of our CEOs and here’s all of our brand assets, and then here’s like our latest press releases, all that stuff.

If you had them where individual pieces and you’re all able to say, point to this folder, point to that folder, point to the other folder. And it just keeps getting updated. That’s huge. And that gives people an immediately developer friendly media portal that they can work off of. Ben, that’s pretty slick.

Ben Seymour: I love the idea. And we got, we have got a minute left, haven’t we? So I love the idea of e-commerce website a PDP per detail page. There’s a component lower down, which is like the product in use. Which effectively is customer uploaded via a load of the Cloudinary tools with auto moderation turned on.

But then allows us to fairly streamline the entire, that workflow, which then would couple in with the kind of the automatic recognition tools to then allow us to go, this component should be [00:51:00] anything that is being tagged as being suitable an on-brand of the right product, and then it gets pulled in.

So your product in use is effectively, almost like able to update kind of day-to-day as people post things onto social media or if it’s a big event. Obviously, we we had a big event in the UK a couple of days ago and lots of people wore interesting clothes. This is the kind of event that then gets a lot of media attention if you have to be a brand that is trying to totally relate in that world, having those very up-to-date components of project and use or, social usage.

I think it’s massively difficult to do. Without the right tooling but also massively powerful as well.

Sam Brace: Oh, absolutely. Absolutely. And I think the other big thing that I’m standing out to our, and it’s not the first time we’ve ever said it, but it’s where I think the way that it’s been positioned in this episode is that when you’re thinking about a project and releasing it, truly like what are all the components of this?

One thing that development teams should be asking for and seeing how they can help with is, Open Graph is before we push this thing live, before people are gonna [00:52:00] start consuming this, do we have Open Graph content for it? And I think with the power of that Vercels developed with all of the OG image generation, it makes it that’s something that actually happens.

It’s not where you now have to go off to a creative team. You have to go off to somewhere else and say, go make this for us and bring it back. Or just bring through the header of the post, which sometimes is not correct. So it’s to say no, we’re gonna create new, unique content, but it makes sure it happens with every deployment.

So I think that’s really big and it’s something that I hope more that are tied to project deployment start thinking about as this is a necessary component of the process and the project.

Ben Seymour: So this is my blue sky email. Twitter, yeah. Do we have a way of getting links out to people? So can we do follow ones?

Sam Brace: Great question. And it’s a great segue, Ben, because at the very end of this episode, of course, we’ll always be able to release this out to the various networks that we happen to be on. So that’s gonna be [00:53:00] on YouTube, Spotify, Cloudinary Academy, of course, other places, and we’ll always include deep show notes so that way all the links of things that I’ve referenced that Ben has referenced, they’ll all be available and that’s a great way for me to bring it back to be able to explain that.

All of that, of course, is on our cloudinary.com/podcasts page. So as you can see, looking at a previous episode where our friends, Amy and James from Compressed.FM podcast. You’ll see that we have lists of all the places where you can reference the details. We have full transcripts of all of that.

And one thing, I don’t know if, Ben, you’ve seen this, but I love showing this off, is that these are all little JavaScript calls. So if I click onto this, it’ll actually jump you to that particular minute mark of the episode. So if you’re seeing something like, when did they talk about that, it’ll go straight to that portion.

So lots of nice little usability details that we have when it comes to the ways that these podcasts are debuted. But yes, all links will [00:54:00] be available once this is live past the live stream.

So I would say this was good.

So Ben, thank you for being part of this program and of course we’ve given lots of people, lots of ways to communicate with you, whether it’s through your email, whether it’s through your Twitter account. I’m of course you’re very active on LinkedIn as well. Is there any other places where people can communicate with you? I know that you have a really nice personal page. Is that one that was mentioned on that?

Ben Seymour: There is also benseymour.com as well, but yeah, lots of places there. But yeah for everything else, we’ll share the links obviously. There’s me personally, there’s also Vercel

there’s obviously an entire team that will help answer any other questions that we have. And if it turns out that we need to get other people involved, we can always get either the DevRel team involved or some of the community people and other people as well. Amazing.

Sam Brace: Wonderful.

Ben Seymour: Thank you, Sam.

Sam Brace: Wonderful. Ben, it’s been such a pleasure to have you here and thanks again for being a part of this and for everybody that’s watching and listening. Thank you for participating and [00:55:00] enjoying this program from Cloudinary. And we hope to see you watching listening to future episodes of DevJams. So take care and we’ll see you soon.

Ben Seymour: Thank you all.

Sam Brace: [00:00:00] Hey everybody. My name is Sam Brace. I am the Senior Director of Customer Education and Community, and you are about to watch and be part of the latest DevJams episode.

So in this episode, we are going to be talking with John Riley. He is a developer that’s typically been doing lots of things in the open source space. He’s tied to software engineering. He’s done some great stuff for his overall brand, understanding what he’s doing in the development space, sharing his learnings with people on his personal website.

And what we’re gonna be talking about today is work that he’s done with a platform called Docusaurus, which is a great way to be able to create sites, which is a React based site generator. And a lot of companies are moving to it for showcasing your documentation and being able to build that in quick ways.[00:01:00]

But what he’s been able to do is create a plugin with rehype and be able to incorporate Cloudinary into his overall Docusaurus presence. So this is a way that he can start being able to deliver all the images through Cloudinary so that way they’re optimized. They’re also delivered through the content delivery networks that we work with and many other amazing things.

And John, of course, is one of many that we’ve profiled on this overall DevJams podcast, which is where we talk with developers who are doing inspiring, innovative, interesting things with overall development. And of course, probably tied to images and videos because they’re gonna be using Cloudinary for those.

That’s why we’re here. So joining me for this episode is Jen Brissman. She is a technical curriculum engineer at Cloudinary and a prize team member of my team. So Jen, welcome to have you to the program and talk a little bit with John.

Jen Brissman: Hey, thanks for having me.

Sam Brace: Jen, talk to me about why you think this is gonna be a good [00:02:00] program. Tell me about why you’re excited to talk to John today.

Jen Brissman: I’m excited to talk to John because he’s using Cloudinary in a pretty simple way, but it’s a way that I found to be really creative and it’s not one that I’ve seen very often. So, I think this is an episode where it’s not such a specific use case. So many people can watch this and take their learnings and apply it to what they’re doing. So, I think this will be a really helpful episode.

Sam Brace: I agree. I agree. And this isn’t the first time we’ve dived into markdown and to rehype and some of the concepts that we’ve covered and we’ll cover in this episode. But it is to say there’s a reason why we’re covering it again because. Markdown continues to be an amazing thing for people to be able to do, to be able to author HTML and be able to work with it in certain ways. Rehype is an excellent way to be able to start handling a lot of the processing parts of it.

And Docusaurus seems to be one of the more interesting up and coming products that I’m seeing in the overall space because it does make publishing so lightweight. So it is to say that there’s a lot of cool things that he’s gonna be [00:03:00] doing with Cloudinary, as you’re saying, not necessarily pushing the edges and boundaries at what our product can be doing, but it is making content authoring and content publication much more simple because I think with the techniques that John’s showing, it’s gonna make it that much easier for people to really focus on the content. And not focus on necessarily optimizing every single thing in a manual way. Just set it, forget it, it’s done. It makes it simple.

Jen Brissman: Absolutely. Yeah. And he’s really just hard coding in using Cloudinary as the domain, and I just hadn’t seen that before, so I know we’ll, I don’t wanna spoil anything. I know we’ll get to it, but I’m really excited to welcome John to the episode.

Sam Brace: Absolutely. And so one thing to point out before we jump into our conversation with John, of course, is that this is not the first time that we are doing our DevJams podcast.

In fact, we’ve been doing this for years now, and you can see all of the great content that we put out with developers like John and many others at [00:04:00] cloudinary.com/podcasts, as you can see on the screen here. So simply going through, you can go through all of the various archives of the content that Cloudinary provides in the podcast space.

And if you want to continue discussions and meet with developers like John, who are active members in our Cloudinary community, you just pop on over to the Cloudinary community, and that’s gonna be at community.cloudinary.com for you to be part of all those discussions. So you could ask questions, get to meet new people that are probably dealing with similar things that you are, which is working with images and videos and digital media.

So we recommend those two spaces. If this is starting to tickle your interest a little bit, some of the things that me and Jen are talking about today. So without further ado, unless Jen, do you have anything else before I pop over to our friend John here?

Jen Brissman: No, we’ve been building it up, so well, John, we’re ready for you.

Sam Brace: Excellent. John, welcome to the program.

John Reilly: Thank you very much. Hi, I’m John.

Sam Brace: John. Good to see you. Good to see you. So [00:05:00] John, tell us a little bit about yourself. I mentioned open source, I mentioned software, I mentioned plugin development, but of course those are just little parts of the overall probably story that you have.

So tell us a little bit about John.

John Reilly: Yeah, sure. My name’s John. I’m a software developer. I live in London. I work for Investec, which is a bank, which does some pretty cool tech stuff. And I’ve worked in open source for probably more, more than 10 years now I’d say.

And a lot of what I’ve done has been like around like the language type script. I was a very earlier adopter there. And like I’ve worked on a number of projects there that are particularly have been useful as part of a type scripts journey. Like definitely typed and ts loader, which like brings together like webpac and type script and things like that.

But yeah, one thing that I started doing also, around at the same time that I started like open sourcing was I started [00:06:00] blogging and like originally I started using blog spot, which was like, I think Googles like a blog platform, which was out there. And it was super easy to use.

And I used that quite happily for many years. But actually interestingly probably influenced by some of the stuff that we’ve been doing investing, which was like, we are a very infrastructure as code-y type place. I was doing like infrastructure as coded like my day job and my blog was still this just html on someone else’s website.

And I was like, oh, I should own my own content. And so I had this, and also I’d really got into liking markdown, like the gears of back down, the open source minds. Not that I I wrote like markdown, like a native, like better than I wrote anything else. And so it was just like, it was the obvious me way for me to write stuff.

And so I started like reaching around looking for a way that I could take take my stuff and move it like literally into code. And there was lots of things like around, at that particular time that seemed to be like filling that [00:07:00] gap. And but the thing that was like most notable was Docusaurus.

Partly because it, like it fit like really well. But also because oh I looked at, it’s wait a minute, I’ve seen this before. I’ve seen like lots and lots of Docusaurus sites like out there. And you realize that just like tons and tons of like sites that you know and use let’s say temporal site for instance they’re built using Docusaurus because it’s a very simple tool that allows you to build, like it was originally designed for the purposes of documentation. It comes out of like Facebook, out of meta. Like it was built there as an internal docs tool, but it kinda evolved and became more, and the reason I got interested in was it because it has like a blog component to it and that mechanism just like works really well.

So lots of people use it like for that as well. So yeah, so I started using like Docusaurus and although like a personal rule for myself for like many years, I was like, I will not, I’ll just focus on things that I’m writing about. I won’t like fiddle with the mechanism of writing it. Like [00:08:00] I, I couldn’t resist it.

And like I I’ve fiddled with Docusaurus is aware of, I’ve contributed it like a number of things. Back to to back to Docusaurus I’ve written, so the thing that we’re gonna talk about today, like plugins for Docusaurus, which which are useful, and I use on my blog.

Sam Brace: I think it makes sense what you, how you came to Docusaurus based on what you’re describing. And it also makes sense why you’re using Blog Spot. Probably at the very beginning. I feel like we’ve all gone through that journey where we started a blogger or we started a blog spot, or we started a WordPress, or we started that and then we find that maybe that worked, but maybe it’s also where we found something that fits us more personally.

And as someone that is an open source contributor, to your point, like if you have the ability to do pull requests and contribute to the growth of something that seems to fit who John is, in my opinion. So I think it makes perfect sense why you would land on that as your platform for blogging and brand presence.

And once again, very [00:09:00] astute, you should own your own brand because if suddenly Google or WordPress decides to take something up or down, then it doesn’t matter because you still own your domain. So I think there’s a lot of wonderful aspects to what you just described there. Now, one thing I did wanna ask you about with this, with Docusaurus was from a developer side of things or a programming side of things, is there anything that really stood out to say, this is why I should use Docusaurus?

Because in my research I, of course it’s React based, as you mentioned, it was coming out of some of the work that was coming from meta, which makes sense because React did too. But was there anything that kind of tickled your brain when you’re saying, oh, that’s why I should be looking at it, particularly other than just the open source nature of, or the temporal usage that you mentioned earlier?

John Reilly: Yeah, it’s interesting you say that, because I was intentionally not looking, I never planned to do any playing with it at all. My plan was I want to use a thing that will just allow me to write markdown. That was my goal. I wanna write markdown and I want it to be pretty, [00:10:00] because I can’t make things pretty, I don’t have that in my wheelhouse.

So I need something that will look good from default and this looked good, and it allowed me to write markdown. And that was the way it was set up by default was like super straightforward. Like it’s just text files on disk, like in folders. There’s not much to it like it… technically, like it’s probably someone who has some, like engineering smarts is gonna be using Docusaurus. But it really, you don’t need to like, like vanilla Docusaurus and just text files and you’re off to the races. You have a website that looks great, that looks presentable, that is easy to maintain.

Those are the things that I was looking for. It was a surprise to me that that that I ended up like digging into it and contributing like back to it.

Sam Brace: And I gotta tell you, you could see on my screen it looks great. It’s if this is how, if this is vanilla Docusaurus or like without a lot of work…

John Reilly: Pretty much.

Sam Brace: It’s clean, it’s easy to read. And if it makes publishing fantastic for you, then [00:11:00] it’s a fantastic tool. So I think this is really nice. And you can see here, your domain presence is for everybody. In case they’re like, oh wait, where do I go? Just to make sure we’re clear. Everything we’re gonna be talking about is tied to your domain, which is johnnyriley.com. So if people are falling along or if they wanna see any of the posts, this is where everything’s gonna be based out. All right. Okay, so I’m looking at this. So we’ve chosen Docusaurus. Markdown, that’s something that would be good for us to unpack just a little bit. So why was markdown so important to you in the publishing process?

Because obviously, in my opinion, as we’ve said, markdown is an easy, fast way to be able to author content because of just the way that it works with html, it also makes sure that, in my opinion, one of the biggest reasons I like it is it makes sure that things are very modular. Because markdown is here, it’s the same markdown there.

So you could pick it up, move it, it’s gonna work. So if you ever decided to move things out of Docusaurus, for some reason it’s still markdown. So it’s a huge benefit to it. But what was the reasonings, why you said because of markdown, [00:12:00] this is why I chose Docusaurus?

Yeah. That’s

John Reilly: a good question. So, I think it’s slightly like two things, and like one of those things, one of those things is I just like markdown, Yeah. It’s I like it. I know it, and it’s simple. And like the other thing is I feel like it was like a Douglas Adams quote or story or something like that that he was talking about, like how like one of the things that like slowed him down in life was like the invention of the word process processor.

Because he like, loved like technical things. And but previously he’d only had a typewriter. He was hammered away on his typewriter and all, he’s got all, he’s got a key presses and ink on paper. That’s all he has just the keys that he can press.

But now he’s got like a word processor and he’s got these, all these options in front of him. He can hear for, he can have like line breaks. He can have which [00:13:00] font do you use and what size font, or maybe it’ll be bold or maybe it’ll be underlined. And all these type they’re just options. Like you’re blinded by options.

And options are actually, constraints are actually a really useful thing because they allow you to focus on doing something. And markdown is constraints. Markdown like you’ve got you can have text, you can have something like five or six types of headings. You can have bold, you can have italic you can have strikethrough and not much more, to be honest.

There’s very little that you can do with that. And it’s like a personal rule I had around writing generally was that you want to remove all the things that like distract like from you. You want to just be able to focus on doing the thing that you’re doing, and if you have like options, you are gonna explore those options and you’re actually gonna do the thing that you really want to do in the first place.

Markdown is a great way to make sure that, that doesn’t happen. Like you are working, like just on doing the thing that, that you want to do. And [00:14:00] that will hopefully mean that you are your productive, right? You’re actually like writing a blog post rather than thinking about like the way that you could write a blog post and the CSS that you could apply to it and all of these things.

Does that make sense?

Sam Brace: It does make sense. As somebody has young parents, I’m always a big believer in limiting the amount of choices that I provide to my kids. So if I want them to choose between, let’s say, a quesadilla or pizza, I’m only gonna give them those two but I give them like a whole menu.

They become overwhelmed. It’s actually less than comforting. And then of course, and no decisions are made. So I think to your point, like if you have a limited set of things that are possible it allows you to focus on the tool and make it really good and focus on, as we said earlier, focus on the content, not the tool, not the tactics.

So I think it makes tons of sense why everything is aligning the way that it is. The story is making sense to me.

Jen Brissman: Yeah, not only is this a great metaphor for life, but this is also something that John, you have in common with a lot of developers is [00:15:00] go for the easiest, most simple way to do things, and it seems like that’s the way that you found Docusaurus, and that might be part of the way that you found Cloudinary, and that seems that’s also the way that you like markdown.

Sam Brace: John, I’m interested, so can, we’ve talked about Docusaurus and I’m anticipating there’s a world where now you’ve signed up, you’ve got everything running with your Docusaurus site. There is a period here though Cloudinary is not here yet. So how does Cloudinary get introduced? How does Cloudinary get brought into this overall process?

John Reilly: Yeah. I’m definitely a fiddler and so yeah, so I’m always like noodling around on something and I really like optimizing stuff. I really like taking a thing and seeing how I make it like slightly better because then it’s like better for everyone. And [00:16:00] I had my blog going and it was working and it was fine and lighthouse scores like was a possibility.

Like lighthouse scores. For those that don’t know lighthouses at all. It’s I think it originally comes outta Google. It’s certainly built into Chrome, and it allows you to like, evaluate like how your website is doing along with various like metrics. Like it tells you how you’re doing for like SEO, it tells you how you’re doing for accessibility tells you how you’re doing for like performance and like other things too that I can’t always remember.

Yeah. Awesome. And I’d plugged light. I’ve been running my lighthouse against my blog, like here and there and looking at the numbers, that’s quite interesting. And I worked out a way to get lighthouse running on my blog every time I made a pull request. So actually I should back up a little bit further.

So, my blog actually wasn’t originally hosted on it was originally when I went to Docusaurus, I was using [00:17:00] GitHub pages, which is like the built-in like hosting mechanism that exists on GitHub and it’s great. You got like this free website basically. And I was using that initially and I really liked it.

And then I became aware that I would make a change and I’d see that change. Like locally, but sometimes there might be a difference between what it was like locally and when it was deployed. And I thought it would be nice to see what it was like deployed before it was deployed. Netlify were out there to offer various, like jam stack-y things, and they had like a mechanism called deploy previews, I think, for a while I used that and I really liked it. And what happened with deploy previews was that every time you every time you submitted a pull request, it would automatically generate a new version of your site and put a preview link in one of the comments, and you could click on that.

You could click on that preview link and you could see your site and you go, “Oh, yeah, okay, it looks like that, looks like this works like this. I’m happy or not”, [00:18:00] and then make a judgment call as to whether you’re gonna merge that pull request, and that was like, just like a really nice thing, I liked that a lot. And like time went by and, but I didn’t I wasn’t using Netlify to host my thing. I was using GitHub pages to do it. And I think Netlify was quite expensive. So I landed on using Azure Static Web Apps which is an offering that that comes out of Microsoft and is very similar to lots of the things that Netlify is doing, It’s basically a static web app.

Sorry, I’ve just said that it’s…

Sam Brace: You’re good. You’re good. I’m following.

John Reilly: It’s html, CSS, and JavaScript, right? Yeah. That’s what it is. And it’s and it works really well. And I started using that and one of the reasons I started using that was cause like, It worked really well and I quite liked it, but also it had the equivalence to Netlify deploy previews, and I can never really remember the name.

I think it’s called Staging Environments or something like that. But it’s the same deal, right? You’d make you change your code, you raise a pull request and [00:19:00] on that pull request automatically in the background an environment would be created and “BLAM”, you get the link, you can click on it, you can go look at, it’s great.

And now I’ve got this mechanism that’s working and it’s working. I’m hosting using static web apps and I’m doing a deploy previews using static web apps. So I’ve got these two things like in tandem and with that in place that like it was… Now extra things are possible now that I’ve got that in place.

And that’s when I plugged like lighthouse in there and I was immediately dismayed because the numbers were low for my performance. I was good on most of the scores, but the performance one I was just like less good at. And and this got me thinking about like, how can I make those numbers better?

Becasue every time you submit a pull request, you see the numbers and it’s “oh, I want that to be less orange or less red. I want it to be closer to green”. And so yeah that’s the thing that started me like in the direction of of like ways to tweak that. And like initially I was, okay, I’m going [00:20:00] to I’m gonna like manually take each image and I’m going to optimize them, which was very boring.

But I did that for a while, and then I got a mechanism for making images somewhat more optimized. I scripted something, which was quite good. But it was I was also getting I was getting improved scores, but like not amazing scores and it then occurred to me though the Cloudinary, which I had used in the past for like different things was there.

Oh no, it wasn’t it. A friend Howard is behind Azure Weekly works for endjin is one of the founders of endjin. He was telling us how they were using they were using Cloudinary for their images, for the endjin blog, I think.

And that got me thinking, “Oh, wait a minute. I’ve used that before and for other stuff”. And I yeah, I just got started reading up on it and and the more [00:21:00] I read about it, it was very obvious that there was a possibly very straightforward way to, to plug into it. And it felt like there was a possibility there, which I dug into, and that’s what ended up with me like starting to use starting to use Cloudinary, like for my blog.

Sam Brace: I love it. I love it. And, I think it makes perfect sense because that is a main reason that people do come to Cloudinary, at least it’s one of the main reasons, is that they’re looking at ways to optimizing their website, making sure things load quickly.

And sometimes that is tied to Lighthouse. Sometimes that’s tied to Core Web Vitals, essentially indicators that are telling people, this is how good the user experience is on your overall page. And by making sure that yeah, you’re, tweaking, you’re trying to get things to go right. But it’s also to make sure that when people are going to your blog and reading a post, they wanna have an optimal experience.

They don’t want it where there’s something slowly loading through because you decided to put a three [00:22:00] megabyte image in there and you’re not sure why the scores are low. So it allows for that to take place. It, absolutely makes sense to me.

John Reilly: Yeah, I’ll be on my, I’ll be on my phone like on, on a bus or something sometimes, and I’d go to my own site to check a thing that I’d written and “oh no!” – do you know that experience?

Sam Brace: Oh, yeah. Everybody’s had that experience really. You’re suddenly surprised about the how was beautiful on a desktop and everything loads so quickly and I’m my amazingly fast internet. And then, yeah, you’re now out and about and you’re like, this is not optimal. So I, I totally know what you’re talking about completely.

John Reilly: “You did this. You did this.”

Sam Brace: “It’s your fault”. Exactly. I know, I totally know what you’re saying. Okay, so we know the reasoning now. So you have this pain point that’s happened. You’re saying, “okay, I want a better lighthouse score”. I want a better user experience that’s coming through.

So you’re seeing Cloudinary as a solution here. What I am very intrigued by is how you went about this because you created a plugin [00:23:00] with rehype or for rehype, or I’m not sure exactly the right way to phrase it, but essentially a rehype plugin that is going about the process and adding all of these to your Cloudinary account images that you’re working with on your Docusaurus side of things and making sure we’re delivered with our CDNs that we work with, and also applying some optimizations too. So how did you start the plugin process? Why, or even why did you start the plugin process this way?

John Reilly: Sure. So the reason like why, like I got the idea in the first place was cause there’s Clarity is like a ridiculously nice API for for doing this, which is and you’ll probably know the proper name.

I don’t, maybe it’s called the fetch API or something like that, but could…

Sam Brace: Yeah..

John Reilly: But it’s like… Here’s the thing, you’ve got like an image URL and you can just like basically prefix your image URL with a Cloudinary CDN, something type like prefix like that’s it. You’re done. [00:24:00] It works like you…

Like when you do that, you get like what happens is the request like snakes off to Cloudinary and like behind scenes Cloudinary is gonna pick up the image from your site. It’s gonna optimize it and serve it. And that first time, I’m guessing there’s probably like some kind of like slowness.

Cause it’s doing that, that hit for the first time. But after that you’re off to the races. You’ve got this optimized images going through all of your clients and it’s just it’s just fast. And like the simplicity of just like plugging that in was just like really attracted me.

So cause I’d imagined maybe Howard told me this is how it worked in the first lesson I forget. I’d imagined that if I was gonna do something like this, what we probably need to do is I’m gonna stack out, I’m gonna write some kind of script that crawls my blog post finds all the images.

I’m gonna have to like, some kind of mechanism to upload the images to the thing, and then I’m gonna have to go back through the site and I have to change all the references. And I was like, that was, yeah, I was open to that as an option, like incidentally. But it was like you said that to be way simpler.

I like [00:25:00] didn’t have to do that. I can just instead flip a URL and I’m done. So the simplicity of knowing that I could do that made me start like fiddling with like Docusaurus and looking into is it possible that I can do that? Cause I didn’t, I don’t think I necessarily knew at that point how that portion of Docusaurus like works.

Like I knew that you could put in markdown this side and out this side comes like html. I wasn’t totally sure like what was in between, and as I had a little read around and chatted to the to the the people who work on the project a bit. Like it turns out that it’s like this, and I might get this in the wrong order.

I’ll try not to. Docusaurus takes markdown and it uses a mechanism called re-mark plugins. And and that converts the… That takes the markdown, I think and converts, sorry. It takes the markdown and converts it [00:26:00] into html I think, and then or Jsx. And then you’ve got that, and you’ve got these two places like the re-mark step and the rehype step.

And in both places you’ve got the ability to like hook in and Docusaurus, like allows, like it exposes those hook points as it were. And in fact, it uses those itself to to build itself. And so I did exactly that. And so I was looking, I’ve got this like re-mark like hooking place and I’ve got this like rehype hooking place.

I wonder if I can use this. And like the initial thought was like, okay, maybe I’d maybe do with like re-mark cause that’s where my images are and it’s like super simple to go with. But actually it turned out that The rehype was the was the like the more obvious choice. Cause that’s like closer to the image generation point of view.

Cause don’t wanna jump too far ahead. So the way that the you ended up handling like the images is that you, would, you end up with this I’m probably gonna get to the [00:27:00] code. You end up like walking through every like node inside the html every tag, html tag, what, whatever it’s that, that comes through.

And some of those are like image tags, which are obviously images. But some of those are JSX tags. And those JSX tags are like React things. And inside the JSX you have to do a little bit of parsing inside there to discover like the image that sits inside the JSX, and you have to swap it there as well as the near things.

You’ve got two places where you’ve gotta do the the swapping and because Docusaurus it, it allows you to do like markdown, but also if you wanna let break out and do something like JSX, that’s, you’re often you’re fine. You can do that too. Like this mechanism made more sense in the context of rehype because it would cater for both mechanisms, I think. I think regardless of whether you are using markdown or JSX, I think both of these things ends up playing through that.

Sam Brace: Which is [00:28:00] fantastic and the end result you, as you can see here, so this is the title image of the post that went through this. And you can see some of the things that you talked about.

If you look at the overall URL that was generated through Cloudinary, you can see it is using that fetch method here.

John Reilly: Yes.

Sam Brace: And what you would see, let’s say you just had uploaded this to your Cloudinary account, of course I would say upload in this case. So it’s really tied to the overall delivery.

So this is fetch delivery that we’re showing you here. So to your point, it exists somewhere else and then we’re porting it through with fetch. So that way then we’re able to apply all the various transformations and you can see exactly where it was coming from in the first place, which is from your domain, the assets, images, this is your title, and to be rerouted to Cloudinary.

And then of course delivered through Cloudinary in this overall process. And this is all done through the magic of the plugin that you did, which is fantastic because yeah, as you, as we’re big believers of, Jen can attest to this, we’re big believers of you should set it and forget it. Meaning that [00:29:00] you should allow all the automation, all of the behind the scenes to do the behind the scenes stuff.

And this is doing that where when you publish something to your overall presence via Docusaurus, it makes sure it’s doing all of this work behind the scenes for you. So this is great to see.

John Reilly: I think the image that you’re looking at there sound like that’s PNG I think, and I think that one of the things that you get with Cloudinary, one of the things that I quite liked about it was that it would take your PNG and it would turn it into something that was like more optimal for the clients. Like it may possibly even does it, depending on the type of client. I’m not even sure but…

Sam Brace: Yeah and very astute what you’re showing here. So let me see if I can show my screen on that real fast because you’re dead on. So what we are showing you here is I’m gonna quickly bring over a little bit of a behind the scenes here. So you can see in this case, this is using what we call Cloudinary’s Media [00:30:00] Optimizer or Inspector, Cloudinary Media Inspector.

And it’s just a quick Chrome tab that I can be able to click on. So I pull this up and it gives me all these details. And as you can see here, yes, you’re, you serving this as a PNG originally, where while you’re deliver your, this is a PNG originally and Cloudinary is serving this as an AVIF, which is AVIF file, which is pretty cutting edge stuff.

But Chrome can deliver that. And the reason why that’s happening is of course, this little guy right here, f_auto, which is indicating automatic format. So what it’s saying is serve it through our server here so you can see it’s choosing Fastly in this case. So it’s coming through the Fastly CDN, and in this situation then it’s coming through as an AVIF, and if we just do a little bit of comparison ever before, I am a hundred percent sure that our PNG originally is much larger than the 17.82 kilobytes that is being served [00:31:00] as today thanks to f_auto. And as you can see, if someone knows Cloudinary transformations the way that me and Jen do, maybe not, but it is to say that there’s no resizing happening.

This is the original size of the image. You’re not you’re not cropping it, you’re not changing the width, you’re not changing the height. So essentially you’re taking an original image and you’re saying, all I’m doing is applying the f_auto the q_auto there is a w_auto that’s here. So that’s meant for resizing purposes and responsive situation, but we’re serving this image as is against my size.

So it’s just serving it as it’s original. There’s no changes there. And same situation with DPR is gonna depend there, but it is ultimately to say, a lot of optimization is happening just with this transformation set you have, and then it’s not even where you had to upload them all to a new location and deal with migration.

Everything’s kept with your Johnny Riley overall space. So everything can still live within your domains and your overall path that you have of assets, images [00:32:00] there. So a lot of good things are happening right here behind the scenes.

Jen Brissman: And just to add to something, Sam said, the image is actually a smaller bite size, but it’s not made to be visually smaller. So yeah, it’s optimized. But I have a question for you John. So basically, as we know, Cloudinary is gonna fetch the image from the original source and serve it to you. And in this case as we’ve just looked at optimized, but I happen to know something about you, something that you’ve said in another blog, which is that you’re “more of a fetch guy”.

You, you are a self-proclaimed “fetch guy”. So you like fetch. So this is. You said this in a blog just about a month ago. Another blog about Cloudinary where you were comparing to someone else’s blog and you wanted to be able to do it with a fetch.

John Reilly: Possibly. Yeah. Quite possibly. Yeah. Very possibly. Do you know which, which post it was like, I…

Jen Brissman: Yeah, yeah I do. So it is let me find it here. It’s [00:33:00] uploading images to Cloudinary with fetch.

John Reilly: Oh yeah.

Jen Brissman: It wasn’t as recently. It was actually a while ago, but it was in March, a couple years ago.

John Reilly: Yes. This was the, this was cause this is the I got the name confused. Yeah. So this is the first time that I used Cloudinary, I think for that one.

Jen Brissman: Yeah.

John Reilly: And that one I. Gosh, it was, man, it was some years ago actually. Yeah, with that one I was using the fetch API in the browser to upload. So yeah, it was I was using the fetch API in the browser to, to do an upload to and I think maybe even when I wrote that post, like the fetch API was still felt relatively new or something.

Like it hasn’t been around for like forever as it were. I do, yeah. So yeah, prior to like fetch there was the xml http what it thing Horrible. Okay. Fetch is just like a very nice API. But yeah I dunno if the fetch in Cloudinary has a relationship to the fetch in the browser APIs or not, or it may be that they are related things [00:34:00] or they’re different things. I don’t know with similar names.

Jen Brissman: Well, the reason I ask is because we don’t see a ton… I mean, people use Cloudinary in various ways, but the way that you’re using it is very fetch specific. And when we get into the code in just a moment, we’ll see that you’ve hardcoded in that it’s a fetch. And that’s part of, so I was gonna ask, is part of the reason you chose Cloudinary because you wanted to be able to fetch the images? Or is that just like the way you started using Cloudinary and that’s how you’ve always thought of Cloudinary?

John Reilly: Oh no, it’s more cause like I’d imagined when I was thinking about this in the first place, that I would probably be using the fetch API in the browser to do uploads like to Cloudinary or have some kind of like script that would be doing it.

Jen Brissman: Yeah.

John Reilly: And, but the thing that would, the thing that would. Vaguely niggle slash worry me about that. It’s what if I fail to upload something like properly? And the idea of it not being my responsibility, I just hand it over to Cloudinary and say, “Hey, you go find it for me”. That meant that like I thought [00:35:00] Cloudinary would probably do a better job of that than I would necessarily, so I, I had like greater trust in it. If that makes sense.

Jen Brissman: Yeah. Yeah. Cool. Okay. Interesting. All right, let’s take a look at the code and see how you made this all work.

John Reilly: Sure. Should I share my screen?

Sam Brace: Yeah, that’d be great. Absolutely.

John Reilly: Cool, cool. And let me know if I need to change sizes and I’ll certainly do that.

Sam Brace: Sure.

John Reilly: Share screen and here we go. So, hopefully see see my screen here. All Docusaurus sites have like a Docusaurus conflict file, which is just as the name suggests, the way that you configure it. And so we’ve started here inside inside my blog and we are going and we are importing the [00:36:00] plugin that I ended up publishing to do this.

In actual fact, if we look at the like the website itself, you’ll see that it started out slightly differently, but shall I show you the code of the plug? Sorry. So I ended up publishing a plugin, but before I did that, I had this, like an inline file that, that sat like inside the blog post before I was like, certain, this is like a useful thing.

And I’ve got like a one like that in place right now. So this is a different rehype plugin that I wrote that just lives like locally inside my blog. And a thing you can see that’s significant about this uses JS doc, which is like type script in the form of JavaScript comments.

And that’s, the code looks slightly different. So you’ll see down at the bottom we’ve got like a module exports. And you’ll see that we are using these funky comment things which have like types hidden inside them, but this is actually like a vanilla JavaScript, and that’s how the plugin started out.

If you look at the blog post that is associated with this, you’ll see if I tab [00:37:00] over to this guy here you’ll see inside here that I’m like, this is what I’m building here. This is like a JSX. This is that. But when it came to to deciding that the thing that I’d written in the context of a blog post was like, okay, this is a useful thing.

I flipped over and I decided to use to write a plugin and publish that plugin. So let me go back to here. And actually let’s do it inside Chrome itself. So if I go to to the plugin here, and I’m definitely gonna change the size on this cause this is not gonna be big enough for you. So it’s plus that.

Sam Brace: There you go.

John Reilly: And it’s mega simple. It’s one file like this guy here actually couple of files. I exagerated, index.js like here’s the roots. Obviously there’s not much in there. Not very [00:38:00] exciting. Otherwise this big enough for you before I start talking?

Sam Brace: Yeah, absolutely. This still looks great.

John Reilly: Cool. So the actual, like guts of it test. Yay. Inside the plugin here we import a type our our image or JSX node data. But the actual guts of it is this. So this is what’s called a transformer a rehype transformer. And this thing is exercised again and again as Docusaurus, like walks the tree of your nodes, basically.

And so this code here like invokes a cloud name. And this cloud name by the way, is that’s like the name of your account on Cloudinary. So in my case, its priou, which has been one my mother-in-law’s maiden name. And for reasons and the base URL of your [00:39:00] website.

So in my case, that’s that’s johnnyreilly.com and then every time it comes through, it exercises this visit mechanism for our little visit down here. So you see we’re creating. We’ve got a visitor factory here, which we make our visitor, and then we invoke that visitor on each of the elements that comes through.

And we’re interested in like a subset of things being potentially transformed. So we want elements to be transformed and that’s like an image tag or or a paragraph tag or something like that. Obviously we’re interested in transforming the the images, but we’ll filter down to that later on.

And JSX also. So these are the two things that we’re gonna play with. So now we get to the actual, like where things like happen. So here’s the this is the factory that we evoked above, and this is the thing that it makes, and it makes this visitor. So the visitor is gonna be hit like again and again with a different node each time.

And it’s gonna look [00:40:00] at that node and it’s gonna say, “okay, if you’re an element and if you’re an image and you’ve got some properties, then we are, we’re interested in doing something with you”. Okay. So this is this, the equivalence of a typical, open, curly, open angle bracket. Is it? No it’s an image tag and can never remember again, which one is.

Sam Brace: You’re good. You’re good.

John Reilly: Thank you. So it looks at this this image tag that it’s got and it says, okay here’s the here’s the src the URL basically of the image. And we’re gonna take that and you can see how simple like using like Cloudinary is here. Cause all I’m doing is I’m literally hard coding here. rescloudinary.cloudname, in my case, priou mom’s maiden name. And here’s the transformations that applied and then the URL of the image itself. So this it’s just string concatenation. Like it’s no more than that. Like it’s way simple. And this [00:41:00] is what happens for image tags and it’s the same thing that happens for JSX. It just looks a little bit nastier cause JSX is a little bit more complicated. So if we step down here we’re gonna see the same thing happen, but essentially whereas we’re dealing with a nice, clean structure here.

It’s just like type elements, tag, name, image, property, source. Inside here we end up with like a type of JSX. And inside here, here’s what the thing actually looks like. As you see, there’s like lots of things in there. So we end up doing a little bit of regex to work out like where the image is inside there.

And if we find a match, then we we just update. We do node value replace and we replace the the source thing that we’ve looked up with. Again, the same thing here. So we’ve got the same thing that we’re doing here down here. It’s just a little bit like noisier cause it’s in the context of of JSX.

But don’t think about that too much. It’s just string concatination. [00:42:00] That’s all that’s happening. And this is that’s the end really. Thank you.

Sam Brace: Very eloquent. And it’s very understandable what you’re doing here because now you’re bringing in the cloud name, which of course is your variable.

You have your base URL, which is your variable. Everything else, Jen, to your point you’re hard coded in the resource type. It’s always gonna be an image, you’re always gonna be fetching it, you’re always gonna apply these transformations. So there’s no reason for any of that to be variables in any way.

So it’s a pretty sustainable process. Unless for some reason we stopped doing f_auto, which I can’t imagine a world where that happens then this is absolutely future proof too. So this is great.

John Reilly: Yeah, and it’s it’s been like, like zero maintenance for me in terms of so I maintain like a whole host of open source projects and many of them require like a fair amount of ongoing maintenance to keep them like up and running. This thing, like I built it like I created it off the back of Josh Goldberg’s template type scripts, like things. So I didn’t have to think about that too much. And like I [00:43:00] haven’t changed it that much since. It’s just there, it just works. It’s really nice. I’ve written some tests for it, which just to just so I, I felt better about myself, but it’s I haven’t done too much. I haven’t done too much.

Jen Brissman: Yeah. I’ve seen a lot of people do the same thing in a much more complicated way. So hats off to you for figuring out a really straightforward way to do this. So I wanted to ask you about so as Sam said, you have hardcoded an image. Have you tried any other type, video or do you really not using video on your blog? So it’s not necessary?

John Reilly: So I, that’s interesting. So I actually, I didn’t know that you did anything with video. And I do have some videos on my site, so if you go to, if you go to my blog, you’ll see like a single number of like talks that I’ve that I’ve done. But there’s not tons of them and they’re all on YouTube.

I dunno if that would have bearing on it. And [00:44:00] yeah, but I, yeah, I don’t do, I don’t do tons with video at the moment, so yeah not really. Okay, but what do you do with video then? Does it, is there do you have the equivalent of a CDN for YouTube or…

Jen Brissman: This is a really fun.

Sam Brace: Yeah.

Jen Brissman: I was gonna say Sam can go into it more, but the really short and fun answer to what do you do with video is pretty much everything we do with images. So that’s like a fun one sentence answer.

Sam Brace: Yeah, exactly, and Jen’s right about that. Good example is like those transformations that you’re applying to the images, like f_auto, q_auto, w_auto those are all things we do for our overall videos too. So as an example, let’s say that you’re serving something as a mp4, but we see that it would be better as a webm based on what that happens to be.

John Reilly: Oh, sure.

Sam Brace: There’s things like that. Same thing with the quality side. There’s all sorts of fun things you can do, but a good example of why it would make sense for actually for you to possibly use here, and I’m [00:45:00] sorry to point this out. Is this video unavailable watch on YouTube situation from the types of London… because I have to physically click in and go to it. And if you were to say, “oh, great, I’ve always have it, delivered from all the CDNs that Cloudinary uses, it can, it’s reliable as dependable, it’s using their video player”. It would prevent that from happening. Of course, you could always put a link in there saying- also watch it on YouTube, because some people prefer that. Yeah. There’s nothing wrong with that, but it is to say it’s something that’s there. So anyway, a long story short, images and video are possible with Cloudinary.

John Reilly: That’s cool. By the way, if there are any YouTubers like watching, I’m pretty sure that we are looking at like a bug on YouTube. Like when I was embedding these things here, like I decided to use the, like the privacy protecting auction, which is like YouTube without cookies. Yeah. And yeah if you look at the source of the things, it’s like YouTube without cookies, but, and I think if I use the YouTube with cookies then like that wouldn’t happen. But I don’t know.

Sam Brace: It’s all good. It’s all good.

John Reilly: It bothers me. It bothers me, but [00:46:00] yeah…

Sam Brace: Absolutely fine. So going back to the plugin, so now that we’ve seen the overall process that’s taking place within the plugin, what I’d love to be able to walk through, if I can understand it correctly, is really when it comes to the authoring and publication process, because you’re writing these blog posts, as we’ve talked about, set it, forget it. What does that actually look like in practition?

John Reilly: Yeah, sure. Probably the easiest way to do that is remember back earlier on we were talking about pull request previews. So if I write like a blog post like that ends up being a pull request. And so like in this case, I’ve just I’ve just raised a pull request with this like a marginal change.

And I think I’ve tweaked the README file or something like that. But what you get off the back of that is is this thing here. And actually before we dive off to that, let’s have a quick look at what what the code for this looks like. So I want you to see just how simple it is to like to author [00:47:00] a blog using like Docusaurus. It’s just way easy. So here’s the blog websites in a blog folder. And we see I’ve been blog there for quite a long time. But yeah, any one of these folders is is a blog post. And I thought I’d open up the one which is related to… where is it? No. This one. This one. Hey! Found it. Oh, we did on Boxing Day. Yeah. So, this is the blog post that we are looking at that I wrote in the first place. And all it is this this markdown file here. This and there’s a little you get a little front matter thing at the at the top, this thing here which is just like, has some like metadata basically around the blog, post author tags, that kind of thing.

And you have the images that sit in the in the same folder. So these things, oops. Back. Okay. Weird. Yeah, these images sit alongside here [00:48:00] and they’re there and they work. And when you do the the pull request it spins up the version of the websites for you and gives you a link, which I’ve got just here.

And I happen to have opened this up previously. And if we go to this page here, you’ll see here’s my my delightful GUI featuring URL. But this is the preview of the website. And this is the actual website. And you see they look like identical, right?

Sam Brace: Yep.

John Reilly: But they’re actually not exactly the same thing because this guy here, the pull request preview, doesn’t use Cloudinary. The actual website does use Cloudinary. And the way that you can see that is, is like mega simple. And I dunno how this is, let’s if I need to zoom then do tell me. If I’m gonna hit inspect on this particular image. And let’s see if I can make [00:49:00] this big enough. I think you can do command plus inside here.

Let’s find out. Hey, so you can see maybe I can make it a little bit bigger to Plus. Plus. Oh, too big. There’s an art to this, I haven’t quite learned it. So here’s here’s our image.

Sam Brace: Yeah.

John Reilly: This is our little title image there, hero image if you like. And a couple things to notice about it.

The most important one being the source. So it’s looking, it’s using a local image. This thing here, you can see it comes from the, from this domain, from the same domain that it’s as the website lives on. And it’s just this PNG, not much to say about it. It’s also like worth noting that it’s got loading: eager, and fetch priority: high.

Those are just little cues that you can give to the browser so that it makes sure that it loads this image like fast, which gives you like a better performance with like Core Web Vitals [00:50:00] and whatnot. But significantly, you’ve got the image here and it’s a local image.

So if we now hold that in mind and actually maybe hold the file size in mind. So it says it’s like 28k there. I’m guessing that it’s gonna be slightly different when we go to the other one. So we go to here. And do the same thing and do inspect. And again, let’s see if I can, oh, let’s just remember where I am.

That’s delightful. So now if we look at the the src attribute, you’ll see it’s slightly different, right? So the the SRC attributes it’s got Cloudinary prefixed in there, and my mother-in-law’s maiden name and the various modifiers and behind that the image.

And so it’s not coming from my blog at all. This is coming from Cloudinary. And if you look at the the file size, it’s this is 18k. It’s compared to the other one, I think it was like around. 28, 30 K, something like that. So it’s about a, like two thirds of the size. You are getting benefit there, [00:51:00] also. So yeah, there’s kinda like dual benefit here. Like one of which is like there’s limitations like in the browser. I think there may actually be like less extreme these days. There’s limitations of the browser, like the number of resources that you can get from a single website a single time.

Like it’s like it’s bounded. But you can go to other websites at the same time, different domains and you can get from them. And that’s what we’re doing here. But we’re also getting the image which is optimized. So it’s gonna be loading faster. And I would also like, given that like Cloudinary’s raise in data is like images and also videos.

It turns out like it’s gotta be fast, right? So you’re gonna get that, that perf game too. It’s like that’s how it works. If you compare this to this, like the only difference is the URL.

Sam Brace: Yeah. I would think in terms of how this is also set up, let’s say for some reason you’re bringing over your markdown to a different spot and it’s [00:52:00] not gonna pull from the Cloudinary image. You always still have the base as a backup or essentially as a fallback mechanism too. So I think there’s just a lot of reassurance in using a plugin like this too.

John Reilly: Oh yeah. Like I really liked …because when you’re adopting like anything new, you’re like you wanna cover your back just in case something goes wrong. The idea that like, I could just turn it off and it still works. Like that was really like reassuring to me.

It wasn’t like I was moving all my views from here to here, and I was gonna have to like I was gonna have to do that on an ongoing basis to make sure the things synced up or anything like that. I don’t have to do any of that. It just, it works. And if for some reason, like I decide I don’t wanna use this anymore or something, I can just turn it off and it will, I will still have a mechanism that works. It’s just unplugging the plug in, I guess.

Sam Brace: And one thing that I wanna unpackage also is the concept of Open Graph, because I’ve seen you’ve done…

John Reilly: Oh yeah.

Sam Brace: Open Graph so well with your overall site. And Cloudinary is part of that too, because the way that, at least it seems to me that you’re doing your Open Graph tags, as we can see here with the way that [00:53:00] Facebook and Twitter and other sites are interpreting it, is that whatever you’re defining as like your header or hero image that you have for your blog post, it’s gonna be associating that. But if we even take a look at a generic Open Graph site that’s interpreting this, so Open Graph .xyz, you’ll see that with the metatags that it’s coming back with saying this is how it’s all working.

You can see it’s coming back with the Cloudinary version right here with all the optimizations tied to it. So it is to say that this has lots of ancillary effects when you’re not only authoring content and imparting inside experience, but also when you’re doing your promotions and telling people that you wrote a new post or you’re sharing it on Slack with coworkers or whatever happens to be.

So there’s a lot of benefits there too.

John Reilly: Yeah, Open Graph was like this mystery to me for the longest time, like I, I started seeing you paste a link somewhere this image would appear next to it. And I was like what is that? How’s that happening? It was some kind of, some deep magic, I don’t [00:54:00] understand.

And it’s obviously it wasn’t magic, like there was something behind it. It turned out to be this thing called the Open Graph like protocol, which I ended up like writing about. But like significantly it was it’s just like these metatags that sit inside websites. And and those things there allow like I think you, you’ve got a phrase Something browsers. Mini browsers.

Sam Brace: Oh, micro browsers. Micro.

John Reilly: Micro Browsers. Thank you. Yeah, it’s Micro Browsers like Slack and Teams and all these other things. They can use this to interrogate like the site and they can use you to like, to generate like a preview of what’s there so that you don’t have to, people don’t actually have to do the the immediate work of clicking on something to go there to find out what’s there.

They’ve got like some kind of clue that tells them like, here’s what’s there. And like Docusaurus had this built in already. So if I do again.

Sam Brace: Here, let me stop sharing so you can show what you’re showing here. There you go.

John Reilly: Oh, [00:55:00] sure.

Oh, sorry. Okay. So if I do inspect here and if I roll up to the to the header, so inside here, you’ll see, we’re interested in OG stuff.

Sam Brace: I saw the Twitter card above if you scroll back up.

John Reilly: Okay.

Sam Brace: Yeah, so, you see where…

John Reilly: Oh yeah, there you go Twitter card. Yeah. Yeah. Yep. And if I do OG image, there we go. So this this property here is the thing that drives like the image that pops up. And I think there’s other meta things they serve, I guess there’s a description and the title and all that kind of stuff.

I wanted to do those. Lost coherence there. I apologize. Cool.

Sam Brace: No, but I, it makes sense and also the way that you’re replacing it, because now you’re saying replace this image with one that’s gonna be fetched from Cloudinary.

It also makes sure that’s [00:56:00] working perfectly for the meta side of things too. So I think it’s an amazing example of how to weave it all together. And one thing that I’m really inspired by what you’ve done here, John, because as we said at the very beginning, you’re an open source guy. And if I go into your GitHub repos, I can literally see every single blog post, all the markdown, it’s there.

So if I wanna do a pull request on your blog, I can. That’s really cool. That’s really cool. So it’s back to you’re picking up what you’re putting down. You’re practicing what you preach. So John, that’s fantastic.

John Reilly: Oh, thank you.

Jen Brissman: And another thing is, you’ve made this rehype-cloudinary-docusaurus plugin and it’s on npm, so anyone can find this. So if you have the latest version of npm, you can just install it. It’s that easy. Like that concept will never not blow my mind. But part of being an open source developer like you are, is you’ve shared this, so you’ve weaved this all together. We’ve just discussed it [00:57:00] in this episode, and now you’ve let other people use this, too. So you’re really doing the good work there, John.

John Reilly: Oh, thank you.

Jen Brissman: Everyone should be very grateful and I know I am.

John Reilly: Oh, thank you.

Sam Brace: Yeah, absolutely. And to back up everything that we just said here, of course you can always just go to your GitHub.

So that’s gonna be github.com/ johnnyreilly, same as the domain. And you can access all of this stuff, including the rehype plugin, and start using it on your Docusaurus side of things. So if you are using Docusaurus, if you’re investigating rehype, if you like markdown, there’s a lot of things that you can ultimately apply for this, cause it’s not necessarily where the things that you’ve done here have to only work for Docusaurus.

It’s just, it’s meant for Docusaurus purposes. There’s a lot of learnings that work for other things too, if it’s markdown based or rehype based in some way. So this is exciting. This is really exciting. John, final takeaways, anything else that you, we’ve talked about with the project that we’ve maybe neglected or didn’t talk about, [00:58:00] or anything you just wanna summarize it in a nice, tidy way? What do you got for us?

John Reilly: Yeah, just a, there’s a few things that are worth plugging in as well, when you use this it’s like it’s called pre connect, like little like browser cues in there that you could do and that lets, like the browser know that your stuff is… you should go off and you should start fetching this stuff from from Cloudinary like faster than you would otherwise do.

Like these kind of things can like, make a slight difference to like speed things up as well. But yeah like anyone who wants to like play with, I’d recommend like just having a go cuz it’s like it’s mega easy to use and there’s there’s no commitment to it either.

If you don’t like it, you can unplug it. It’s really, and it’s an easy on ramp and it’s an easy off ramp, which is I think anything that… I’m attracted to things that have easy on ramps and easy off ramps. But TypeScript, [00:59:00] actually, back when I was like using for the first time, like one of the attractions was that it was very easy to get started and also you could say, “Hey, it’s just JavaScript, we could bail”

and that was the thing that would get people over the line. Yeah. Okay. I’ll try it. Cause we could escape. We could escape. Fine.

Sam Brace: I love it. I love it so much. And so of course to plug your blog post, of course everything we’ve covered here, plus more, is gonna be found on your blog. So people hopefully, if they take the time to read it, they come to check out all work you’ve done on Docusaurus, and of course, as we mentioned, that’s gonna be at johnnyreilly.com. So John, this has been fantastic, so thank you for being a part of the program and we hope to see more of what you’re doing, maybe some video, so that’ll be exciting.

Thank you again.

John Reilly: Cheers. Thanks a lot.

Sam Brace: So, Jen, key takeaways. What do you feel here? We’ve covered a ton here, but what, what’s standing out for you?

Jen Brissman: Yeah, there’s so much, one of the main things is how helpful developers are [01:00:00] to other developers, you know? Like, John didn’t have somebody asking him to do this, and he didn’t have, some company or some boss saying “Hey, you really need to optimize your site”

He wanted to get that better Lighthouse score. He wanted to optimize, and even you could see, during the podcast when something wasn’t working, he said, oh, that bothers me. That bothers me about the YouTube potential bug. And it’s really, a lot of the reasons people come to Cloudinary is because they just wanna make things better.

And I don’t know. I’m just inspired. And the reason he made this plugin and shared it with other people to use is because he wants to make their lives easier. He tinkered, he figured it out, and he’s giving everyone a solution. So it’s like a feel good episode for me, for sure. And yeah, lots of other takeaways, another big one for me is: you only know what you know, right?

So in this case, John didn’t happen to know as anybody doesn’t know everything about what a product can offer. He didn’t happen to know that we work with video, but through coming on this podcast, he found that [01:01:00] out. Maybe he’ll use that. And in the same way that through writing his blog, we had Rebecca Peltz reach out and let him know about f_auto q_auto.

Now he’s using that and that was a big thing we talked about in this blog, which we were already interested in before he was applying f_auto, q_auto. So I think, there’s so many good takeaways. How about you, Sam?

Sam Brace: I’m just gonna echo it. It makes sense. Yeah. So you said a ton of stuff here. I agree with all of it.

And I think that this has been an amazing episode for someone that is trying to create a true experience for their overall brand in a lightweight way. Especially if you’re migrating from some of the sources that we’ve mentioned at the very beginning of the program, like blogger or other blogging software.

It’s a great place to be at. And as we show, Docusaurus is becoming a very widely used tool. Or at least it’s widely used within certain spheres. So I’m excited to see if this helps with overall adoption, with the great work that John’s doing to help people to be able to see the [01:02:00] power of all of these platforms together when it comes to content authoring and delivery. So that’s exciting.

Jen Brissman: Yeah. Agreed.

Sam Brace: To summarize all of this, if you want to be part of more of these podcasts that we are showing you here, of course they’re all gonna be at cloudinary.com/podcasts. That’s where you can see all previous episodes of DevJams. And the nice thing, of course, is that, if you are a Spotify person or you’re an Apple Podcast person, or Google, you can see all the previous episodes there and we have ’em all linked inside that case.

And of course, all the transcripts, all the details are happening to be right there as well, so you can follow along at your leisure. And don’t forget, we also have an amazing community at community.cloudinary.com, and that’s where you can be a part of all the conversations that are taking place in our overall community.

And if you’re also a Discord person, great. We also have an associated Discord server for you to continue the conversations as well. [01:03:00] And lastly, to help John plug his stuff, go ahead and check out Docusaurus. That’s gonna be at docusaurus.io. And of course, John’s personal blog post with lots of great material, not just about Cloudinary, but about many things at johnnyreilly.com

So on behalf of everybody at Cloudinary, so from me and Jen, to you, thank you for being a part of this DevJams episode, and we can’t wait to see you at future ones. So take care and have a wonderful day. We’ll talk to you soon.

Sam Brace: [00:00:00] Welcome to DevJams. This is where we talk with developers who are doing inspiring, innovative, interesting projects when it comes to images and videos that happen to be the most development projects, and they probably are likely using Cloudinary for all of that innovative work that they are doing. My name is Sam Brace. I am the Senior Director of Customer Education and Community for over all Cloudinary, and I’m very happy that you are here today for this DevJams episode. This is gonna be a fabulous one if you are interested in images, but also making them as lightweight as possible. And we’re gonna be talking a lot today about bandwidth and how to properly reduce that using functionality available with Cloudinary, APIs, SDKs, and our overall transformations.

Joining me for this episode is [00:01:00] Jen Brissman. She is a Technical Curriculum Engineer here at Cloudinary on our Customer Education team, and I am very happy to have here for this program. Jen, welcome to the show.

Jen Brissman: Hey, Sam. Thanks for having me.

Sam Brace: So Jen and I are, we’re gonna be talking to Grant Sander, who is the Vice President of Engineering at Formidable, which is a firm that’s focusing on design and development for some fairly large customers.

That includes probably a lot of the brands that you’re very familiar with, maybe you’re purchasing from every single day. The overall development and design work that’s happening from them, a lot of those aspects are being handled by Formidable and he’s gonna be talking about their own website, formidable.com, and they’re gonna be diving into some of the ways that they were able to reduce the bandwidth and then of course, associate that for some of the work that they’re doing for their clients.

But Jen, why is that exciting to you? What’s getting you fired up about this episode?

Jen Brissman: I’m excited to have Grant here. We’re so lucky to have him because he’s [00:02:00] working with Formidable, one of our partners at Cloudinary, and we don’t always get the chance to talk to people who we work with as well.

And they use us, we use them. So it’s cool to see how everything works together. And we’re gonna get into that with Grant today.

Sam Brace: I agree. And what’s also wonderful about this is that I think what we’re gonna also talk about is a very natural evolution that we’ve seen companies take when it comes to maturity of working with images and videos and digital media essentially, where sometimes you might start off, you’re saying an S3 bucket where we’re gonna store everything in terms of a place for it to go.

It’s nice, cloud-based, centralized area, that’s enough for what it is. But as time goes on, you need to start thinking about what formats are we delivering those things at? Is that really the right level of compression that we want everything to be at? Is serving everything as originals, actually hurting our overall performance, rather than providing some type of variation or derivative of that file so that way it loads as quickly as possible.

So what I love about what [00:03:00] Grant’s gonna talk with us here today about is something that probably a lot of developers have felt when they’ve gone through working with images and videos on the web.

Jen Brissman: Absolutely.

Sam Brace: So Jen, One thing that of course, that we wanna point out to everybody is the fact that we are in lots of places. So if you are saying, okay, great, I love the concept of being on this live stream. I love that Cloudinary is talking with developers. Well, note that you can always go to cloudinary.com/podcasts for all the previous episodes because we’ve been doing this for about two years now, talking with developers like Grant and others that are really pushing the boundaries of what images and videos are in the web, and of course, mobile as well. So you can always go to cloudinary.com/podcasts for all of that. And we of course want to emphasize our Cloudinary community. So if you hear some great conversations that are happening here and you want to keep those going, you can always pop over to Cloudinary. So community. So that’s gonna be community.cloudinary.com, [00:04:00] and that’s gonna be at the main space where you can see all of the content that happens to be there. So let’s go ahead and bring Grant on and have a little bit of detail about what he’s been doing at Formidable and being able to optimize that content. So Grant, welcome to the episode.

Grant Sander: Hello. Hello.

Sam Brace: Grant, obviously I’ve been very impressed with all the work that you’re doing, all the work that Formidable is doing, but maybe people that are listening to this, this is their first time encountering you. So tell us a little bit about you, a little bit about Formidable.

Grant Sander: Yeah, so maybe we start with Formidable. Formidable is a digital design and development agency. We do dev work, design work, product work for companies of varying sizes, anywhere from like smaller startups all the way up to, fortune 100 companies.

So we’ve got, a wide portfolio and we do a lot, we focus a lot on modern JavaScript tooling. So we’re, we, were pretty early in the React space. We do a lot of work with Modern React, do a lot with [00:05:00] Next Js, React Native is another big one. We do a lot of like cross platform, mobile work on the engineering side of things, as well as all the fun design system, product type stuff.

So that’s like at a high level what Formidable does. We help companies build cool things and help level up their engineers to, to build cool things. That’s Formidable. I am just another engineer I suppose. Recently, I am now a VP of engineering at Formidable, which is a scary title.

But yeah I basically help client teams succeed, help with like client facing work, but also involved in partnership things, and so like you mentioned, Formidable and Cloudinary are partners. We’re an agency partner of Cloudinary, so do a lot of like partnership engagement and also

sort of help lead the open source initiatives at Formidable? So Formidable does a lot of open source software work and I help with that build tooling [00:06:00] around. A lot of times it’s tooling around what helps our client team succeed, which is nice because if it’s helping our client teams succeed, it’s often helping other teams succeed.

So involved in a handful of different things at Formidable.

Sam Brace: Which is fantastic because it’s where you have a lot of concepts of what’s working for your clients that you’re working with, what’s working well for the various partners, as you mentioned, working with Cloudinary and others. And then even on top of that, being able to understand the brand presence.

So you have a lot of hands and lots of pots, but that’s a great place for us to be at with a guest like you. So this is fantastic that you’re involved with all of those different efforts. One thing I wanted to ask you about, because you mentioned some of the programming languages that you guys are working with at Formidable, and you mentioned React you also mentioned React Native.

Talk to me a little bit about that. Why are some of these choices being made is, are you guys necessarily calling yourselves a JavaScript shop or is it where you’re focusing on certain frameworks because of certain reasons? What’s the intention behind that?

Grant Sander: Yeah. In [00:07:00] consulting it depends on what business you can get, although it’s a chicken and egg problem where you’ve gotta have engineers to staff things.

And so we’ve been, pretty early in the JavaScript that was where, when Formidable was a small agency, that was the type of work that we were doing. And we’ve just grown to be well known in the JavaScript community. So that’s been our strength for many years is, has been JavaScript.

And this predates my time at Formidable by a number of years, but Formidable is also early to React. I think, early engineers at Formidable kind of saw, saw that React was gonna be the next big thing. And so we, we did a lot of work in the open source community with React and helping some larger clients with React work that were also early adopters,

and we just rode that wave and then React Native came onto the scene and it’s been a, it’s been a great choice for a lot of companies allowing, allowing [00:08:00] us to help people build cross platform mobile apps, which is a pretty big deal. I mean ,that’s the selling point of React Native is you can have one engineering team building for both iOS and Android.

With React, there’s differences between web and mobile, but a lot of your React engineers that are doing web work can also get cross-trained onto mobile development as well. So those are the reason why, we’ve been big on React and React Native is that, that’s the thing we’ve been using,

and also just our, React’s got a big community. There’s a lot of client work to be done. A lot of larger companies are choosing React. They have been for quite a while. Reacts held the throne it seems like for quite a while now. We’re going where the market goes. We also like react quite a bit.

It’s a pretty pretty nice framework and makes our lives quite a bit easier. But in later years, TypeScript has been pretty big. So now we consider ourselves a TypeScript shop as well in terms of programming [00:09:00] languages. We do a lot of work with Typescripts, help clients migrate to Typescripts.

Which has been great. And we also have, we have engineers doing Rust and Go Lang as well. So we do some more additional languages. It’s not the bulk of our work. A lot of our backend work is still node. We do a lot of, like a lot in the GraphQL space. This is another space we’ve been pretty big in and early adopters is GraphQL.

And we, a lot of our like backend GraphQL type work is often in node. Node seems to be Node.js seems to have I think probably the most mature like GraphQL ecosystem and that’s fit well with like our expertise. So definitely, big JavaScript company, but we also do, Rust has been getting a lot of attention, which has been cool. And so we’ve been dabbling in Rust as well.

Sam Brace: I love the fact that, you have all of these different viewpoints. You’re touching all of these different frameworks because it really does show that you’re able to provide a wealth of expertise to the [00:10:00] clients that you are working with. And that’s fabulous.

And of course, I love the fact that Cloudinary is an arrow in your overall quiver too, that you can bring that in to all the discussions, which kind of brings us to your project. So as we know you, we mentioned that you have Formidable, which is a overall agency, working with clients on all sorts of design and development efforts, but then you also have your main brand presence, so formidable.com.

Talk to me about what your decision making was with the website and why you decided to maybe go in a different route when it came to the ways that you were working with images for that site versus what you’re doing today.

Grant Sander: Yeah, so a number of years ago we had migrated our formidable.com, like our agency website to a stack of, we were using React Static, which was like, now considered an older framework, but it was a way for us to generate static webpages, which is great for an agency site like ours that doesn’t have a ton of dynamic content.

We’ll change things like [00:11:00] every week, every other week, but that’s like a pretty low frequency, for changes, and we were working with a stack of Ref Static. We were using Netlify CMS for allowing our like marketing team to author content in a, like a GUI, a visual interface. And then when they would make those changes, basically what would happen is it would commit those changes right into our git repository.

So our entire website was totally git driven at at the end of the day, and so this was pretty nice for us, in terms of the development teams we have, that’s a pretty natural flow for us. But when everything is static and it’s just like a straight up React site and everything is handled locally through the git repository, images become a sticking point because carrying around a ton of images, like all the images you need for like blog posts or case studies or whatever other kind of content you have on your site and like we don’t even really have user generated [00:12:00] images and we still had a pretty, pretty hefty load of images.

And it was a burden to try to have, say like our content authors or whoever’s generating images be very like in tune with like, how many megabytes is your image? What format is your image? And that’s a lot to ask of a content author to, to be like super, concerned with the nitty gritties of their images that they’re uploading.

So we’ve been migrating our site to try well React Static is, has been at end of life for a more than a year now. So we were in the process of migrating off of that. Netlify CMS has been great also slowing down in this development. And we were looking towards something, we’re moving towards sanity, which is another CMS that has been great for us and allows us to provide content.

So we’ve been talking about migration. Images, were like the biggest baggage in terms of like our existing flow, and sort of the lowest, [00:13:00] like lowest hanging fruit to some degree. It was like the most bang for buck in terms of our migration, which is great, especially because like most websites are very image heavy.

I think images make up, I dunno, we could probably Google the statistic, but the majority of like web bandwidth is just images. And optimizing images is a great first thing to do in terms of, saving bandwidth, improving speed, things like that.

Jen Brissman: So was there an actual problem or what was the actual problem that led you to look for an alternative in the way that your images were handled?

Were you experiencing any downsides to the way you were doing it before? And how did you know, okay, Cloudinary is our solution?

Grant Sander: Yeah, so we. When you have 1200 or 1500 images checked into your Git repository, like pulling the repo down, like cloning the repo, moving things around, it gets pretty heavy.

It gets chunky. You end up with just like gigabytes of images that are in there. [00:14:00] And we had a workflow for basically using Sharp, which is a a node library, a very high performance like image transformation processing library. And so we knew that we wanted to deliver sort of NextGen images, and so we had a process for like turning our original image assets into WebP versions, which WebP is like a, NextGen image format.

Although now I’m wondering if it’s still considered NextGen or not, there’s some other players in the space, but we could probably loop back around to that. But we had a process for taking just a straight up jpeg, turning it into a WebP and it would get committed right back into our repository so that, because we were serving those images out, so we were now, if you had 1500 source images, we really had 3000 because we were creating these WebP versions.

That weren’t being resized or compressed at all. They were like literally just converting the format of them. We were, we had a workflow for trying to [00:15:00] reduce some image bandwidth on the site by serving WebPs where like you could, where there’s browser support for, that’s pretty good.

But yeah we were running into this thing where our repo had a lot of baggage and managing our images and getting everything to process our original assets into WebP. It was just a very clunky workflow. And when we were looking towards I don’t know, resizing images or using something like avif, like more, more like efficient image formats it was gonna be daunting.

It was gonna be like the multiplicative effect of now you’re gonna need, for every source image, you’re gonna need four generated images stashed in there. We were looking at just like totally bogging down our get repository. Also just like realistically wasting engineering hours trying to create our own subpar version of image processing and delivery, which is just, we try to avoid that at Formidable.

We often advise our clients to pick the solution that [00:16:00] requires the least amount of dev effort, which is generally like good advice unless you’re in like a very specific edge case. And so we figured, it was time for us to take our own advice. We would, we would probably never tell our own clients to check all of their images and to get, we would be pushing them towards image hosting solutions.

And so it was just a matter of time for us to get caught up on our own site

Sam Brace: Well, I think it’s smart what you did, because it’s something that we hear continually when we start talking about headless architecture and composable architecture. A lot of the conversations around choosing what they call best of breed, right?

Which is where there’s lots of vendors that do something correctly. Don’t try to replicate the wheel, don’t try, do something that somebody already is spending in. Thousands, if not hundreds of thousands of R&D hours in to understand. So as you said, serving everything as a WebP. Yeah, that makes sense.

WebP is ultimately something that’s meant to supersede jpeg, PNG, et cetera. But in the same sense, now you’re able to deliver [00:17:00] things as AVIFS or JPEG excels or whatever you wanna be able to use. So it allows for people to be able to say, we got the format situation for you. It’s okay. You don’t have to send all the engineering hours on it.

So I like the approach that you ultimately took with this effort to know that when do we want to really make that investment versus when do we wanna go with someone that’s already made that investment for us. So that very good choice on your part. What I would love to talk about Grant, as you can see here, we have a whole blog post that is written on the formidable site, which we also have linked here in the show notes.

And it’s gonna outline a lot of the things that we’re gonna be talking about here today. But what I would love for us to be able to do is take a look at some of the codes, some of the details that you have here that really breaks down this particular sentence right here. The fact that you were able to do some things where you were able to reduce that image bandwidth by 86% across 30 of your most front facing web pages.

So I’m gonna pop over your screen here and we can start walking through some of the stuff that you’re able to do it from middle to make this [00:18:00] possible.

Grant Sander: Cool.

Yeah, I think we could step through this blog post a little bit. I also have these code snippets from the blog post pulled out into a GitHub gist, which I will probably jump over to cuz it’s a little easier to read here. And we have line numbers, but Just wanted to talk first about like big picture idea of okay, we wanna migrate to Cloudinary.

What was our mental model for executing a migration of all of our images on our site. So this little image here sums this up where we took a four step approach of, and that might be a little small, but the first step was upload our entire image library from our Git repository up to Cloudinary.

That’s pretty low stakes and honestly, I botched it a couple times in the process, but was able to nuke my like folder and Cloudinary and then just do it again. And there’s a little bit of trial and error there, but uploading it [00:19:00] first was like, I could test it. I wasn’t actually changing anything on the website.

So that’s no harm, no foul. So step one was just like taking the images from where we had them and getting them into Cloudinary in a way that allowed us to do our migration across the website and all of our content. So the second step was migrating the image URLs in our content. So once our, once we have like the media library and Cloudinary’s DAM, their digital asset M is for what?

Management?

Sam Brace: Management. Management.

Grant Sander: Yeah. Okay. DAM Library, whatever we’re calling that thing. Once it’s up there, we need a way to, like all of our content was in markdown ,files. We were, we had a very markdown driven site. We needed to go into all those markdown files and change all of the image paths from like a relative path because everything was in the same like repository served outta the same bucket.

We were using relative image paths for all of our image tags, and we needed to update those to be like, fully qualified URLs pointing to Cloudinary, [00:20:00] and have it, point to the right image. So this was the hard part was like getting that migration and automating that out so we didn’t have to do a bunch of manual work.

So writing the migration script for that.

Sam Brace: So talk to me about that, because I agree with what you said. That sounds challenging. So how, what were some of the steps that you remember having to take when you were talking about that migration script to make sure that everything was going from the relative to the situation that you have now?

Grant Sander: Yeah, we could probably jump into some code if you’d like. That might be the easiest way. Maybe the easiest way to do this is just jump right into some code. Do you wanna start there or do we wanna start with uploading the library to Cloudinary?

Sam Brace: Actually, yeah, if you wanna take a step back and talk about the uploading part, that’d be awesome.

Grant Sander: Yeah.

Sam Brace: And then we can jump back and talk about testing once we go through the first two steps. Yeah.

Grant Sander: Yeah, that sounds great. And honestly, the uploading the Cloudinary was probably the easiest part I think. Cloudinary offers a lot of SDKs and even like REST APIs that are very easy to [00:21:00] use and. JavaScript, I mentioned we do a lot of JavaScript at Formidable we just wrote a little, a “JavaScript” as they call them, to migrate these. To migrate our images up. As you can see in this code snippet here, we are using the Cloudinary Node SDK, which is pretty great that, it made life very easy.

So we have a lot of like configuration. We had some baggage from our site where like over the years we had changed how things were structured and so the places where our images lived had changed over time. So there were some like weird edge cases that I’ll point out here, but I don’t want us to get bogged down too much in those details.

So we configured our Cloudinary SDK just, I omitted like our cloud name, API Key, API Secret. I also only ever ran those as a process arg, so you had to pass those into a CLI command so that I never accidentally commit those into Git, [00:22:00] even though Git respository is private. But, good practice not to commit your API secret into your repository.

Configuring that, this just got passed in through a command line argument. And that sets up the Cloudinary SDK, and then I just have this main function, which runs when I call the script. So I have, this is the bulk of things, but this is just a JavaScript file. I’m gonna scroll way down. At the bottom, I’m just running this main command. And so this is pretty, pretty common practice. If you’re writing a Node script, you just write a function, call it at the end, and log out an error if something bad happened. But, so this main function is the bulk of stuff. So one of the things that I’ve been bitten in the past is if you have a long running script that’s doing an operation over and over again, if something fails halfway through or a process gets corrupted and like your thing stops, it’s good to save your work as you go.

So you know what’s been [00:23:00] uploaded and what hasn’t been uploaded. So if you’re uploading 1500 images, keep track of the ones that have been successfully uploaded so you don’t have to redo those in case like something falls over or fails. Learn those from field combat of not doing that in the past.

So this is just like a status map where I just like literally had a JSON file that I would write to.

Sam Brace: Okay.

Grant Sander: That, so as images were being processed, you just create a record in a JSON file that’s just like the image name and then whether or not it succeeded or not. And then when you start the script up, we use that to check like which ones are already uploaded and which ones aren’t.

Not super important, but a fun little call out of if you’re doing a long running process, probably good to track your progress as you go in case you have to restart that thing.

Sam Brace: Smart.

Jen Brissman: Totally.

Grant Sander: So this is, this looks pretty ugly. It’s not super pretty code, but what I wanted to do was grab all the source images from [00:24:00] our repository and we, like I said, we had images living in different folders.

And so I have this configured in like a configuration file, but this asset roots is like just an array of like paths to the folders where images lived. So using this library Glob, which is a super cool library, I find myself using Glob all the time. There’s a lot of libraries in the space for globing stuff, but basically allows you to point to a folder and then just write like a glob statement like this where it says, “Hey, go ahead and search through everything nested under there and find me all of the files with these extensions.”

And so this is a pretty easy way to go find all those images. PNGs, JPEGs, SVGs, GIFs, the whole kit and caboodle there.

Sam Brace: Yeah, it definitely comprises everything that you would’ve had there prior to moving to Cloudinary. That makes sense.

Grant Sander: Yeah. And then once I have found all those from the folders, just flatten that out into a flat array.

And then there’s some [00:25:00] extra stuff here of this was just like cleaning up some stuff we didn’t want, we wanted to filter out the WebP generated files, which had a specific, like prefix on ’em. Also clean up the path a little bit, just removing like the prefix, so it doesn’t have like user: “Grant Sander – home”, GitHub, whatever.

Jen Brissman: Right

Grant Sander: Just removing the stuff from the beginning. And then this is the part where like checking against the status map where it’s okay, if it’s already been uploaded, don’t do it again. So we are only doing this on the images that are marked as needs upload. So we have all of our image files that we wanna upload.

That’s not too bad. And then what I’m doing is I’m gonna skip a couple things that aren’t super important. What I did was ended up like batching the upload. Cloudinary does have some rate limiting in place. And I tried to like upload 50 images at a time [00:26:00] and like I hit some rate limiting issues and I was like, okay, let’s just, I have time.

I can run this and go eat dinner, so I just batched it at size two. But you can control that. And so what I’m doing is uploading two images at a time. And so this is there’s some logic here for doing, like batching up some stuff, but at the end of the day to upload an image, it’s like literally just cloudinary.uploader and then there’s an upload method and you just pass in the path of the thing.

Sam Brace: Yep.

Grant Sander: And that’s pretty, pretty darn simple. So there’s some complex stuff here, but it’s only because the complexity of the repo that I was working in and like finding the images, but to upload like a single image, you just pass it, pass it a file path and give it a public ID.

One of the things we had to look out for was I had to take the path of an image and give it, like I had to follow some logic to give it a public ID which is how you’re gonna specify which image to like load. That’s like the key identifier. I had to make things [00:27:00] deterministic. And so there’s some cases where we had some stuff where I had to rename a couple files because like we had a, say like gen.JPG and gen.SVG like the, it’s the same file name, different extension.

And that was causing some conflicts when I was generating public IDs. So I had to do a little bit of cleanup around that. But generating out like a deterministic public ID based on the image path. And we’ll use that. You’ll see that again in the next step of migrating things. I also had a folder all these got uploaded into the same folder in Cloudinary.

Super easy just to specify that. And then I set the overwrite to true just in case it’s already there. I could just re-upload it in case.

Sam Brace: Yeah, and I actually, when I was looking at that little portion of it right there, line 70 about to 80 or 82 is, that was smart. The override situation, cause you don’t want any of your batch processing to get hung up because it’s saying it can’t override an existing file.

In case of what you talked about, where we do wanna override a file that’s been like sample.JPG. Okay, we do need to override that [00:28:00] from what’s there. So that was smart to make sure the batch continued and was processed completely.

Grant Sander: Yeah. And then status map once the image uploads, you set the thing on the status map.

And then I just, again, this is like not super scientific, but it works good enough. Every 10 iterations, I’m just writing out this JSON file. So it’s like hitting “Command + S” every time you upload 10 batches.

Jen Brissman: Totally.

Grant Sander: Yeah, again, like that, it’s good enough to save yourself some time in case something goes wrong in the middle of it.

Sam Brace: It sounds like we’ve all been burned somehow without hitting “Command + S” at some point. So putting that logic into what you’re doing here, it makes sense. So I like this a lot and frankly, in my opinion, if we’ve covered nothing else in this episode, and obviously we’re gonna cover more, but if we’re covering nothing else, to be showing a clear migration path from something to Cloudinary, which you’ve provided here, is amazingly useful for the million plus developers that are using Cloudinary. So this is fantastic information.

Jen Brissman: Yeah, even including [00:29:00] overwrite: True, and everything we just talked about, like line 70 all the way through your check to periodically save your progress. Like anyone watching, this is open source. You could probably take this or make a similar version of this.

I totally agree, Sam. If people only get this, it’s probably valuable.

Sam Brace: Absolutely. Absolutely. So Grant, so we’ve covered the point of the migration efforts. Is there anything else not the migration efforts, but the uploading, the library of the Cloudinary anything else that’s important to mention about this process?

Grant Sander: I think we covered most of it. The upload process, like the Cloudinary, SDK makes it just very easy. I think the big part was like, make sure your public ID- you’ve gotta keep your eyes on the public ID because that’s the thing that you’re gonna end up using. And so at some point you’re gonna end up using that public ID again.

So making sure that like you have some logic for generating, like deterministically generating those so that when you go to migrate your content, you can give the proper public [00:30:00] ID. So I think that’s I think this get cloud name is somewhere else in this gist. The details aren’t really that interesting.

It’s based on whatever your own setup is, but I think the public ID is another one just to keep your eyes on. But yeah, other than that, I think that kind of covers the gist of the upload process.

Sam Brace: Yeah. And I, and it is something that we push a lot in training where when we are talking to customers, to think about naming conventions for their files or their assets, and public ID is how we do that.

And I think your example was perfect where gen.JPG versus gen.SVG technically have the same public ID with the way that Cloudinary looks at it because file extension is not considered as part of that. Unless we’re talking about a widely different format. If it’s gen.MP4 versus gen.JPG, yeah.

We might be seen as different situations. So it is important for them to people thinking about how do I want my files to be named once they are migrated to Cloudinary? Do we want ’em to stay the same as local? Do we want [00:31:00] some form of randomization to prevent overwriting? There’s lots of ideas around that. So I think that was good for you to focus on that.

Grant Sander: Nice. Cool. So then, yeah, I …

Sam Brace: We’re moving to migration, right? So that’s step two of the four part process?

Grant Sander: Yeah. Yeah. Let’s talk migration, which I will go ahead and find that file. Let’s see.

Jen Brissman: Yeah, Grant, while you find that, I just wanted to air your tweet, which I, which really made me laugh where you said “Cloudinary is boss”.

When you tweeted about this blog, I really got a kick outta that. And I know that probably, as you said, the upload part is relatively simple and straightforward, and I’m looking forward to getting to the code where we talk about optimizations and where, what probably led you to saying Cloudinary is boss.

Grant Sander: Yeah, that sounds great. We’ll we’ll turn through this the migration part here to get into some more interesting stuff. Again, a lot of this [00:32:00] has details around like the specifics of how our repository was structured. So we’ll just touch on some of the like higher points, some high level points.

So again, we’re gonna, we’re gonna do some “globbin'” in here, which is great.

Sam Brace: Great.

Grant Sander: So a similar thing here of grabbing all of our markdown files. So you can see here we’re going in and we’re saying, “Hey, inside of the content folder, this is where all of our content files live. Give me all the markdown files.”

So now we’ve got all the files we want to inspect, and this is the primary place where we wanna update URLs. So like just looping through the files. So four constant files, just loop through one at a time and doing a Node file system, read file, and just reading out that file. So this is like taking a markdown file, just loading it into memory UTF-8 encoding, and so we can look at that and work on it like it’s a string. So at this point, file contents is like literally just a string, which is like the markdown content that’s in there, which is [00:33:00] nice because if you have a string you can do whatever sort of shenanigans, like string shenanigans, you want.

So I am a sucker for a good regular expression. And we have a nasty one here. I don’t, I think maybe all regular expressions look a little bit nasty.

Sam Brace: I agree, I definitely agree with that too.

Grant Sander: So, we won’t go too far into this, but you can pick out a couple things here where we’re looking for things that end with PNG, JPG, SVG, GIF, WebP. And they also start with, I mentioned the asset route before. Which is like the folders in which images would live in. So it’s going and saying, okay, if we see any, things that start with the forward slash and they have the asset folder name to start, and then they end in like a .JPG ,that’s gonna be a thing that’s referencing, it’s like a relative URL to an image that’s hosted in our repository. So we can use [00:34:00] that “r” this is not a great name, but I’m scripting and so I’ll give myself a little bit of grace here. Using that regular expression, and with a regular expression, you can pass that into the string replace method and you can actually do logic on these things.

So this gives us the match itself and there’s a lot of like regular expression stuff going on here, but what we’re doing is basically generating the Cloudinary ID. This is what the C ID is, and it’s using the GET cloud name that we saw before. And this is like the thing that like took a file path and turned it into a, deterministically, turned it into an ID for Cloudinary to use.

And here we are using it again because now we’re looking at the file path and we gotta say, all right, we need that file, or we need that Cloudinary ID to use as part of this URL. So Cloudinary has their own URL structure for requesting images. So we have, [00:35:00] we’re gonna use our project ID, image upload, I set a version number on these, which we could get into some details on there. Passing in a folder and then using the Cloudinary ID. So this is how you walk through each markdown file, you use that same function that generated the ID, and you just use that as the last part of this Cloudinary URL.

And then you just do a little swaperoo. You just swap that relative path for a Cloudinary URL. And you write that thing right back into the markdown file that it came from.

Jen Brissman: Question for you, Grant. Oh, go ahead Sam.

Sam Brace: No. Go ahead. You had a great question.

Jen Brissman: I was just gonna say in line 42, is that an exhaustive list of file extensions that it could be, or do you have a fallback in case there is, something hanging out in there that, that isn’t on that list?

Grant Sander: Yeah, this for our case, this was exhaustive. We didn’t have anything outside of PNGs JPGs, SVGs, GIFs, [00:36:00] WebPs. Theoretically it’s not exhaustive. There’s other image formats that could have been in there. And so for our case it was good enough. But like you would probably, like if you were using, what are some other image formats?

Jen Brissman: AVIFs…

Grant Sander: Other some other images. You might also wanna include those in there. But we had, just the vanilla image format, so it was a little easier for us. But yeah, this, you would wanna update this to cover all of your image extensions.

Jen Brissman: And I guess you wrote the logic anyway, that if something were to break, it would stop and have saved that batch. So there you go.

Grant Sander: Yeah. Yeah. And we’ll, the next script is actually like validating that images didn’t break. And so I had a little bit of a fallback in case, we had an oopsie.

Jen Brissman: Yeah. Cool.

Sam Brace: A couple I’m ask you about here and I think you’re highlighting it, so yeah, we’re saying the same thing or Grant, but yeah. So talk to me about your decision to add f_auto and q_auto to this overall process. Cause I, [00:37:00] obviously, I know what f_auto, q_auto is. You know. Jen knows. But talk to me about your decision making on what and why you decided to add those transformations.

Grant Sander: Yeah. So with Cloudinary’s image URL transformation syntax, you can pass in these transformation parameters that transform the image.

So if you left out this part here, we deleted this part out, Cloudinary is just gonna serve you back the original image asset. And that’s okay, but we mentioned earlier that a lot of times serving up an original image is not the most optimized, it’s almost never the most optimized solution.

Sam Brace: Correct.

Grant Sander: Cloudinary, this is one of the things that I think makes Cloudinary so powerful, and makes this sort of thing low hanging fruit, is this f_auto parameter is auto format, which says, “Hey, your browser requests the image, Cloudinary looks at information about the requesting browser, says what’s the best image format to use for this browser?”

So if it’s Chrome, it’s probably gonna be like an AVIF. If you are [00:38:00] like, for some reason on Internet Explorer 11 or something like that, it’s gonna choose something else that’s not a next gen because you’re using a 20 year old, 10 year old, browser. And it just serves the best one. So this is, you don’t have to think about it.

Cloudinary’s magic just serves the best format for you. So that’s nice because now you don’t have to specify and you don’t even really have to care too much about the original image extension. You just say, “Hey, Cloudinary, gimme the best one. Whatever. We trust you to give us the best one.”

Sam Brace: And then q_auto, to double down on that real fast, like when we were talking earlier about your original format situation where you’re converting everything from JPGs to WebPs, I think your Internet Explorer one is perfect because as we know, Internet Explorer and WebP don’t really get along because of WebP was becoming more of a format as Internet Explorer was starting to get phased out, and Edge was becoming a thing for Microsoft.

So it does help for those backward looks as well as those forward [00:39:00] looks. So I think it was really smart to make sure that you’re looking at it from that sense. And yes, you’re looking at exactly what I was gonna recommend is, caniuse.com. This is always a great way to see the latest and greatest and what types of browsers can serve certain formats.

And yeah, as you can see here, like older versions of Chrome, older versions of Firefox, they can’t handle AVIFs. If we pull up WebP would be almost identical Yeah. In some of those cases too. So it’s nice that you have something that can constantly format to every user’s various browser choices, cause probably there are still some IE users out there that are using IE 6, in my opinion, which is crazy, but it’s true.

Grant Sander: Yeah. Yeah. And even I think even, AVIF, as an example, has pretty good support, but Edge doesn’t support it, which is interesting to me. I would’ve thought they would, I believe Edge does support for WebP and and it has for quite a while, actually, since very early on.

So the nice thing there is okay, AVIF is great. It’s probably better than WebP in a lot of [00:40:00] scenarios. It’s gonna use that most of the time. But like Edge users, we can’t forget about them. Edge is a good browser, so let’s serve them WebP, which is pretty good. And then fallback to something else if you’re for some reason running IE 11.

Sam Brace: Yeah. And if you are, I strongly suggest not, go ahead after your browser like I said, all strokes for all different types of people. So it all makes sense. So it’s already to jump out of the f_auto, q_auto situation, but I love the choices there.

But what about q_auto?

Grant Sander: Yeah, so f_auto serves you the best format, so like image format, which is great alone for bandwidth because a lot of these next gen formats have better compression ratios. And so you can send smaller images, which is really good. But the q_auto is auto quality, which allows, basically it allows Cloudinary to choose the right compression.

And so if you take an original JPG, you can say, all right, let’s save this as 70% quality so we can shrink this file size quite a bit. So there’s always like a [00:41:00] balance between file size and image fidelity. That’s like the trade-off here is okay full quality, you have the highest level of fidelity, but you have the largest file possible.

And so like moving the needle on that lever a little bit, it’s like a balance of what’s the best thing to serve here. So q_auto just allows, again, Cloudinary is magic to pick where to put that needle for you. You don’t have to do it. It’s just what’s the best ratio of fidelity to compression ratio here and file size.

And so again, this is like an easy way just to use the, the thing that Cloudinary does really well is like doing that for you. And just not letting not burdening our content authors with making that choice. Like they don’t have to worry about it. It’s just gonna be a good one.

Fidelity’s gonna be good enough. It’s gonna reduce image bandwidth as much as you can without [00:42:00] making images look super distorted. So I see f_auto and q_auto as going hand in a lot of ways of just like a good default for not really thinking a whole lot about image stuff, like to, to a large degree.

You can just forget about the nitty gritty of the image delivery and format and stuff and just be like, yo, I want a really cool image of this thing. And then Cloudinary handles like serving it well.

Sam Brace: Oh my gosh, you said it almost words that I always say when I talk to peopleabout f_auto q_auto. I always talk about it and in terms of set it and forget it, like it’s where it’s just let it do it’s magic and handle it.

Cause you’re always going to make sure that you’re getting a 200 when you’re serving something. You’re always getting it where yeah, the image is gonna come through. You’re not gonna be like, As you were pointing out, like if I tried to serve an AVIF today to a Edge user, I could potentially get a 404 or not be able to display content, some type of something that we don’t want.

This guarantees, deliverability, it [00:43:00] delivers it at the right bandwidth, the right compression, the right format every time. So yeah, set it, forget it the way you put it. Just set it and leave it whatever people want, but it works nicely in that case.

Jen Brissman: I was gonna say line 31 is why I would venture to say Grant tweeted “Cloudinary is boss”, because f_auto q_auto – we’ll say it till the cows come home, that is Cloudinary’s special sauce, our magic, and I’m glad that we all agree and if anyone’s just listening and not watching, they wouldn’t see the big huge smiles on my face and Sam’s face as Grant was saying all of that before, because it’s like Sam said, that’s basically like a script that we say in training is everything Grant said. So he really couldn’t have said it better, Grant.

Sam Brace: We didn’t coach you ahead of time, grant, so you’re

Jen Brissman: Yeah. Seriously no coaching.

Sam Brace: But, one thing I wanna ask you about, cause if this is interesting to me, so line 32 where you’re declaring the version number here, what was your decision making there?

Because I can see it’s a very specific version number. What [00:44:00] was your choice there? Because that’s something that I haven’t seen a lot in people’s code and it doesn’t mean it’s wrong. I’m just interested in what you were doing there.

Grant Sander: Yeah. I’m not gonna make a strong argument that you should do that. Honestly I think it was partly coincidental from grabbing one of the images that I uploaded.

I’m guessing that’s where that version number came from, was like the first image I uploaded and grabbed the URL for. There’s also another reason that I’ve, I left that in there was because for regular expression reasons, the fact that you can have folders, like you can have like a nested folder structure of your Cloudinary id, and you can nest things with slashes.

It can be. A little hard to figure out where your like parameters start, like your Cloudinary parameters. So like after upload you, you add in your Cloudinary parameters.

Sam Brace: Yeah.

Grant Sander: And then you can add your version number in there and then put in your like folder and path to the image. Without a very specific, like v [00:45:00] with a bunch of numbers, it can be hard to figure out from a regular expression standpoint where to inject in the parameters.

And so like we I set up some automation to take any Cloudinary URL and check to see if it had f_auto and q_auto. And if it didn’t, it would automatically inject it in there. So if people were like picking a Cloudinary URL, it would just be like we would, we had a GitHub action script set up and it would automatically add ’em in there.

And it was hard to do some of the automation without the version number there. I may have been able to do it, but, yeah, I like it.

Sam Brace: It makes sense. It makes sense.

Jen Brissman: That’s the first time that I’ve ever heard of someone using a version number, sort of as like a pipe or a place to look for. So like in your code, did you have it look for “/v” or something? Or, how did you have it?

Grant Sander: Yeah, so I guess I don’t have the code pulled open right now, but if we opened the console, like if you were to do something like you look [00:46:00] for something like “v” and then you could do like digit, multiple digits, and then you could test something like this.

I don’t know if you can see it. Let me blow that up a little more.

Jen Brissman: Yeah.

Sam Brace: Absolutely.

Grant Sander: That doesn’t pass, but if you have something like “v123”, it’ll pass that. So it, it was just a way to do like regular expression stuff, to figure out where things go. And there, again, I’m not saying, I’m not fully sold, that there’s no way to do this without the version number.

It was just the path of least resistance for me. A lot of these older images, we didn’t need to do a ton of versioning on them. And so at some point, leaving the version number out is nice because then. Cloudinary just uses the most up to date one. And yeah I would’ve to think more about I’m not a hundred percent convinced I would advise people to leave the version number in there.

It’s just something I did out of the migration process and making life a little easier. [00:47:00]

Sam Brace: And the way I look at it, Grant, is this is once again showing a real world scenario, and it worked perfectly for you. So it is to say if someone ever had issues when they’re trying to migrate things over under using regular expressions or regex, then this is a reasonable outcome in my opinion. So this is good. So now that I’ve seen this, so I feel like we’ve accomplished two steps now, but the third step, and we didn’t dive into it deeply, cause of course I backtracked this and let’s talk about code. But in the same sense, the third step was testing this migration. How did this work? So talk to me about the overall testing process.

Grant Sander: Yeah, let’s, we’re gonna run outta time at some point, so we’ll go through this one pretty quick because I think the fourth step is maybe a little more interesting. But the migration validation was pretty cool. So it was like, I wanted to make sure I didn’t totally botch things, which is good.

It’s good to validate, it’s like writing a test for your migration, which is nice. And what I did was basically built our [00:48:00] static site, which then dumped the entire built site out into a public folder, is the name of the folder, but it’s basically just like building your static site and it’s just dumping out all the HTML files for your static site.

Got it. So what I did was, again, it did some globbin’ and grabbed all of the HTML files out of the built site and another status map, because this was a process that took a little while. So saving my progress as I go. But what I did was loop through each HTML file from the build output. And I use this thing called, let’s see, Broken Link Checker is the actual name of this library, and Broken Link Checker has, I have it pulled open here.

It does a handful of things. It basically allows you to find broken links, missing images, et cetera. It’s whoa, that’s what I need to do. I need to make sure I don’t have any missing images in here. So what I did was, [00:49:00] I used this library. I just read each HTML file from the build output, and just configured this HTML checker thing to look for images.

And if an image was missing, it just pushed it onto an array, I wrote that thing out into a JSON file, and then I could just go look and say, “Hey, are there any images missing?” And if there were, it would tell me what the actual source was. And so it was really easy for me to just do a like global find in the repository to say, “all right, here’s where we missed the thing. Like what happened here?” And this was actually pretty nice because I did miss a couple images because in the migration I only migrated in the markdown files. But we had some JavaScript files where like our React code lived where we had like images, like a header image, or a footer image that was not in our content, it was like part of our actual code, like the JavaScript code. And so this was actually nice. It actually caught a handful of pretty important images that were like, not content specific, but more like header and footer images. [00:50:00] So this was an easy way just to go in and check to make sure, we didn’t miss anything.

Sam Brace: Yeah. And excellent. I like the “all good, no bueno” captures there. Fantastic work there too. Okay. So I understand the testing process and honestly, once again, this is really good playbook material for anybody that’s going through migrations when they’re going through this overall process. But then we’re now to the final step, the big one, right?

Which is where everything is live and we’re able to start going through and seeing results of this overall process. So talk to me about that.

Grant Sander: Yeah, so at this point we’ve got all our content migrated, we’ve got our image library up in the cloud. We’re ready to go. We’re ready to merge the thing and ship it live.

One of the things I did before that was just do a quick check. Like I knew we were gonna be saving bandwidth. Like it’s pretty, pretty obvious. That’s a strong word, but it was somewhat obvious that, that was gonna be the case. I didn’t have any doubt. I [00:51:00] wanted to figure out “okay, how much actual savings are we gonna get?”

Cause I did a spot check of a couple pages and I was just like this seems like quite a bit. Are we really that image heavy? Were we really overserving that much? So what I did was wrote a script. Let me go find this. To basically automate, the way I checked it was I would open a webpage, open my Chrome dev tools, and so let’s go to formidable.com, open my dev tools and go to the network panel.

That’s really big. Let me refresh this. You can select the image tab and it just shows you all of the images that load on this page. Pretty standard, dev console stuff, but it also shows you like how many bytes are being sent to this page of just images. Cause I had the image filter on, but you can do the same thing for like JavaScript or CSS images.

So what I did was just did a quick spot check on like our homepage, a couple other important pages we had up for the time. [00:52:00] And I just did a little bit of napkin math and computed, we were having savings around 75 to 80%, which I was like, maybe I should just check a bunch of pages.

But I don’t, I didn’t wanna do it manually and I wanted to be able to tweak some things and make sure things were right. So what I did was just write a script, and again, I gotta go find this, wrote a little script to basically automate that exact thing that I did using a tool called Puppeteer. So Puppeteer, just for those who don’t know, Puppeteer is a pretty cool tool.

I believe it’s out of Google.

Sam Brace: Yes.

Grant Sander: And it’s a Node library, which provides high level API control to chrome / chromium over the dev tools protocol. So basically what it allows you to do is create and automate, like controlling a Google Chrome instance. It’s basically what it is. So you can spin it up, point it to webpages.

It’s almost like a little robot driving your little chrome browser. And have a lot of APIs for doing different things. So [00:53:00] you can do a lot of pretty cool stuff with Puppeteer.

Sam Brace: Yeah, and we love puppeteer over here. It’s interesting this, you’re not the first to mention this on even a DevJams episode because we had it where people were taking screenshots of code and using that for puppeteer purposes.

We had a developer that was developing open graph images for his blog posts and doing that with some Puppeteer aspects. Fabulous tool. Can’t recommend it enough for things like this. Once again, good word, Grant, using awesome tools. So good job there.

Grant Sander: Yeah. Another interesting one that there’s better tools in the space now, but for a long time, like generating PDFs was a pain.

And so I remember like early days of using Puppeteer, you’d build a webpage that was like 8.5 inches by 11 inches. Point Puppeteer to it, do a basically simulating a command P to print the thing out and generating out like a PDF from the page. And it was like a really good way to use like web tooling.

And it was like you were designing a PDF using all the web tools that you knew, and then you just used Puppeteer to automate [00:54:00] generating those. So dynamically generated like receipts or like inventory lists, things like this. You could use Puppeteer. So a lot of really cool use cases with Puppeteer.

Sam Brace: For sure.

Grant Sander: So with what we did here for measuring images, this was tough. This was a tougher use of Puppeteer than what I’ve done in the past, but there’s some setup around getting Puppeteer up and running. But basically what we do is: launch Puppeteer. I did headless false, which shows like the actual view.

So you can see it like scrolling through pages and stuff, which is cool. I created a single page within the browser instance and just set like a viewport with- the viewport size isn’t really super important on this case- but there are some, there’s a way for you to actually create a CDPSession, which gives you like access to a dev tools instance.

So this gives you a way to like programmatically access chrome dev tools from the like robot run, [00:55:00] Puppeteer instance that you have.

Sam Brace: Okay.

Grant Sander: And then you can send signals. And this is, I found a lot of this like from guides on the internet, things like that. But one of the things you do is you enable the network functionalities of dev tools by sending it this network enable symbol.

And then there’s a lot of code here and, we’re gonna run out of time, so I don’t wanna go through all the details of everything. But one of the things that basically I did was you could tap into a couple events. And so network response received was an important one where we listened for image responses.

And so image or binary octet-stream as the content type. And then you store those because we also have another event. There’s some like coordinating that we have to do here. I won’t go all the way into the details of this, but when a loading finished, you see if it was one of those images that we caught earlier and we go and say, okay what’s the image count?

We’ll just keep track of that. And then I [00:56:00] don’t, I’m not convinced this is the perfect way to do this, but a decent indicator of the image size is the encoded data length property. And this matches up pretty well with what Chrome gives you as well, but. My impression is this this might not be perfect, but it’s pretty darn close.

So it is like good enough for us to measure. It matched up from the pages that I spot checked, it matched up like perfectly with what I saw. So for me it was good enough and it’s a consistent measure across control and treatment groups. So my opinion, it was good enough. So then I basically just had- there’s some math here.

We won’t, we don’t need to look too much at the, like dividing some stuff, but basically, it is pretty standard comparison like percentage stuff. But I have a control URL, which is was at the time our production site and then a staging URL where the new Cloudinary version lived.

And so I have a control group and a treatment group. And for each URL that I wanted to test, I would point Puppeteer to [00:57:00] the URL for the production one. And then for the staging one, measure all the stuff. I did a scroll, too, to basically scroll down the entire page to get the lazy loaded images to load.

So that’s, pretty common for images to load lazy. Wait for the network to idle so that you can capture all of the like loading, finished events to make sure like all the images load in, and then just return back the like total, which was like the total number of like encoded bytes. And then I wrote all that into a JSON file, did the percent calculations, things like that.

And the results I know we’re, we’ve just got a few minutes, but the results were pretty, pretty amazing from, just from like our homepage, for example, 27 images, percent saving was 48%. We had a lot of these that were like 86 to 90%. All of our image heavy pages. We have case studies that have these beautiful graphics and these ones we saved a lot.

A lot of these, the average across the 30 pages was a about 80. It was a [00:58:00] little over 86% bandwidth saving, which was…

Jen Brissman: wow.

Grant Sander: Quite a bit more than I was expecting. It was a surprising amount.

Jen Brissman: Yeah. Amazing.

Sam Brace: One thing that I wanted to ask you about, because now that we’ve seen the overall process and, it’s great, because as I’ve said a few times now, this is giving people a real world view of how they could actually accomplish a lot of these tasks with the tools that you’ve gone and shown.

Of course, they may not have your expertise, and so they needed some help to be able to go down this path, but you’ve given it to them. But to wrap this all up, so as we have talked about the very beginning of this conversation, Formidable is doing a lot of development and design work for clients for large companies.

You also said small startups, but people that need design and development help. With the learnings that you took through this project to help out the Formidable site, how are you now applying some of that to your client base?

Grant Sander: Yeah, I think one of the big things is we’re very eager to [00:59:00] recommend services like Cloudinary early, like upfront in the development process, so that you can just avoid having to migrate at all. Because migration comes at a cost, like you have to do the work. And so one of the things is just here’s an example of how much you can save by using a service like Cloudinary. Just use it upfront. If you know that you’re gonna have a lot of images, user-generated images, a lot of content, visual heavy content, just start with Cloudinary upfront.

So I think that’s our recommendation to our clients now, is like you said, best of breed. Choose the thing that’s gonna get the job done the best and this is a good showcase of that.

Sam Brace: And I would also even say, I appreciate you recommending Cloudinary, but it’s also, I think even in strong message, that’s not as about us, is just you really do need to think about your images and videos and how they’re gonna be displayed, how they’re gonna load.

It’s a very important part to how users experience these websites. So I think the fact that you’re addressing Cloudinary at the beginning is also stating to [01:00:00] them, you need to have a strategy when it comes to how you want your images and videos to be loading and how you want the user to receive those and be actionable with that information.

So I love the fact that you’re making your clients think about media more, which is great.

Grant Sander: Yeah, absolutely.

Sam Brace: Jen, final thoughts here. What do you think, is there anything that’s burning in your brain here about what me and Grant and you have covered here today?

Jen Brissman: Yeah, the biggest thing is we’ve talked a lot about images today. And especially with client work, my brain was already going to “okay. What about other types of media?” “Is Grant, are any of his clients asking about 3D or audio or video?” We’ve really focused on images today, but Grant, do you think this would apply to everything?

Grant Sander: Yeah, I think video is at least as complex as image is and we have, for example, our Puma team has been doing some exploration with using Cloudinary’s programmatic video generation and delivery. And so we’ve been doing some [01:01:00] exploration on the video front where we have, either like content author driven videos or even user generated videos, and figuring out how to like programmatically handle those in a efficient way. So we have been looking. We haven’t done a ton in the 3D space, but video is definitely something that’s on our radar and especially with like video becoming a pretty popular medium right now.

A lot of places are moving into the video space and allowing for user generated video stuff and so definitely on our radar.

Jen Brissman: Absolutely. Yeah. Video and mobile and everything like that. And I actually find that Cloudinary is incredibly powerful when it comes to q_auto with video. The results are pretty mind boggling in my opinion.

Sam Brace: Exciting. Thank you so much for being here. This was fantastic. We appreciate all of your time, we appreciate your insights and obviously you’re doing some great work over at Formidable, as well as the entire Formidable team, so keep it up. This [01:02:00] is fantastic work.

Grant Sander: Yeah, thanks for having me. It was a blast.

Sam Brace: Excellent. And so of course, Jen, as we have pointed out right at the very beginning, but it’s worth stating again for everybody here, that all of these episodes, if you’ve enjoyed this one or wanna see what else we’ve talked about, because we’ve mentioned with some of these technologies that Grant covered, we’ve covered them in other episodes as well.

You can always visit all of those at cloudinary.com/podcasts and dive into all of the various episodes of podcasts that Cloudinary produces on that site. And of course, if you have other things that you wanna discuss around what Grant has covered here, the best place to do that is the Cloudinary Community.

That’s gonna be at community.cloudinary.com. And you can see that we have forums for people that wanna have more of a threaded conversation, and ways to keep track of things a little bit easier. But also we do have a Discord server for those that are Discord users, and to have that as a real-time chat option as well for the overall community.

So absolutely make sure that you [01:03:00] guys are diving into all of that content. And as mentioned before, everything that we covered in this episode is also covered in depth in Grants blog post, which is found on formidable.com, which we do recommend that you read for more deep details of everything that was in this overall episode.

So Jen, before we let everybody go, any final thoughts before we say goodbye to our friends and family here at DevJams?

Jen Brissman: Well, lots of thoughts, and that was a really interesting episode for sure. But one of the main takeaways for me is how creative you can be with the givens. So for instance, just something like version number, it’s not something, all of our customers use or that would apply to every use case.

And Grant was using it in a unique way and it just really goes to show you can be creative with what you’re given and yeah I wonder if anyone watching might do something like that now after, after seeing what Grant did.

Sam Brace: I agree, I agree. Absolutely. And amazing takeaway, Jen. So on behalf of everybody at Cloudinary and of course those that were involved with the overall [01:04:00] program in this development, thank you for being part of this DevJams episode, and we are excited to see you at the future ones that we do produce.

Take care and we’ll see you soon.

Sam Brace: [00:00:00] Hey there. Welcome to DevJams. This is where we talk with developers who are doing very interesting things. Maybe they’re projects that are pushing the boundaries of what’s possible with image and video management and delivery. Maybe they’re looking at things from a different perspective. Maybe it’s just things that we got really excited about here at Cloudinary, and that’s where we’re gonna be talking about the intersection of where developers are building awesome, amazing projects and how they’re incorporating Cloudinary into those projects.

My name is Sam Brace. I am the Senior Director of customer Education and Community here at Cloudinary. And in this DevJams episode, we’re gonna be talking with one of our very own employees, one of our solutions architects, Igor, and he has gone and developed an amazing project connecting [00:01:00] together Canva, one of the best, most widely used tools when it comes to creating content, specifically, maybe slides, maybe graphics, all sorts of things you can do with Canva.

It’s a tool that I personally love using, and I’m very excited to show how he created this connector between Canva and Cloudinary to really make sure that there’s a space for creating this overall content inside of Canva, and then making sure that it can be optimized, delivered perfectly for websites, mobile projects, and other various needs via Cloudinary.

Joining me for this episode is Becky Peltz. And Becky Peltz, of course, is somebody that you’ve seen in almost every Dev Jams episode, and she oversees our overall curriculum and learning opportunities at Cloudinary for our developers that are using Cloudinary. So Becky, it is wonderful to have you here for this episode.

Becky Peltz: Hey, I’m excited to be here. I used Canva as an instructional design [00:02:00] student for many years, and I was always downloading it from Canva, uploading it to Cloudinary, and so I love this project and it’s great to be here.

Sam Brace: I completely agree. What’s wonderful about this, as you’re pointing out, is that is a flow, but not only you have faced and I have faced, but it’s probably something that millions of Canva users have faced, is they probably have certain times where they say, I would love to have this delivered as a URL, and not only as a URL to make sure it’s optimized of all of the various things to make sure that it loads quickly and efficiently on people’s devices, on people’s browsers.

So it’s to say that this is not just a niche use case, and it’s something that excites maybe a portion of the population. To me, this is something that every Canva user can benefit from the work that Igor is gonna be showing us here today. So I’m very excited by that.

Becky Peltz: Yeah, and I think for developers we have a lot of integrations with a lot of [00:03:00] different tools, headless tools, image video tools.

But I think it’s interesting to be able to see how an integration is created, and in Igor’s process, he worked with the Canva documentation, and to just of see how how this integration is done using a node server. So I, there’s many different ways to integrate and this is an interesting one..

Sam Brace: Exactly. And I gotta tell you, if you’re a developer that is trying to figure out ways to connect two like-minded systems together, you’re gonna find an absolute amazing learning resource in this. But if you’re just a Canva user or a Cloudinary user and you’re trying to say huh, I’ve always wondered if those two systems can work together, there’s all sorts of things you’re gonna be able to extract from this.

So should be a great conversation with Igor. One thing I do wanna point out before we bring our friend Igor onto this to start talking all about his project, is we do wanna point out that all Cloudinary podcasts, including the one that you’re part of here today, which is DevJams, that is gonna be found at [00:04:00] cloudinary.com/podcasts.

And as we can see here on the screen, that is where you’re able to go through and review all of the previous podcasts that we have gone and issued across the many different programs that we do have. And of course you can dive into the episodes and watch them and listen to them as you so choose. And similarly, you can enjoy these on any of the services that you we happen to be on.

That includes our own Cloudinary Academy, YouTube, also in listening only mode for various services like Spotify, Apple Podcasts, Google Podcasts and more. And we’re gonna have some great conversations here today. But if you wanna continue those conversations, pass this episode, know that you can always head over to community.cloudinary.com and be part of all of those various discussions that are taking place so you can meet other users maybe those like Igor or maybe those that were previous guests on DevJams, or people that have never been on DevJams, but possibly could be because they’re doing great things with our overall service and pushing the [00:05:00] boundaries of what’s possible with image and video delivery and management programmatically.

So want to make sure everybody is aware of those things before we jump on over to talk with Igor. Igor, let’s have you come on to the program. Great to have you here.

Igor Vorobeychik: Hi there.

Sam Brace: Igor, let’s get a little bit of context here. So I gave you the audience some details saying you’re a Solutions Architect that works at Cloudinary.

I didn’t give anybody much more detail. So go ahead, give us a little bit of flavor about who is Igor and why are you here today.

Igor Vorobeychik: Thank you. Thank you Sam. Thank you Becky. And yes, I’m a new, relatively new solution architect in Cloudinary. Even though almost a year within the Cloudinary. And I’ve been in the industry since year 2000.

So been sometime in different roles as a web developer, team lead, as a managed [00:06:00] professional services, integrated lots of different systems during my career. Excited to be part of the Cloudinary family. And this is more or less my background.

Sam Brace: And what’s great about what’s happening here is that, of course, you’re a first guest that is really coming from the solutions team. We typically pro profile people from the outside, people that have done something with no ties to Cloudinary before, other than maybe reading the documentation, maybe being inspired by some of the training courses we have, and they go and build something. But you of course work with us and we get the chance to interact with you on a daily basis.

Tell us about why you decided as part of the getting to learn Cloudinary phase, being within Cloudinary and understanding what it’s about. What inspired to do this project that you have here today, connecting Canva and Cloudinary together?

Igor Vorobeychik: Sure. First of all before even I decided to join [00:07:00] Cloudinary, I was excited about Cloudinary onboarding process, right?

Which sounds for me, unique. Some companies doesn’t even have such a process. And part of this process was actually, that was clear to me from my manager, is that I will have to build some sort of a project. The project should be something real, not some, imaginary and unusable project project should be maybe even blog, something facing our customers. And I said, this company probably does something right if they want their own employees actually use the software, try it. And they actually later deliver it to the clients and customers. And I was excited already in this part. I was sold pretty much in the beginning. And eventually due to my background in [00:08:00] some building some online editors or involved in lots of integration, when I saw one of the projects or possibilities to build something with Canva, there was an easy choice for me.

Sam Brace: Well, and I think the great thing about being able to do this, is that, as you’re saying, it’s real. It’s code that people can use today to be able to bring these two systems that don’t have direct integrations, official integrations, together, but you are able to create something that really is gonna benefit so many users and also give essentially developers an answer when someone says, can you connect these systems together? You’ve given ’em a very clear pathway, which I love that was part of your graduation project as a good term that is out there. A way for you to say, I’m putting my work out into the world. This is my first way to tell people I’m working at Cloudinary. And be able to do that in an excellent way. So that was fantastic that you’ve been able to pull this off. But what inspired you to look at Canva? Was there ever [00:09:00] experiences working with it or seeing it out in the wild? Maybe personally, professionally? What got you to say I should link this to Cloudinary?

Igor Vorobeychik: So for the past 15 years I was actually working a lot with the a lot of Adobe products, right?

InDesign, Photoshop, a lot of personalization using InDesign servers and et cetera. We had lots of requirement from users to have something as powerful as Photoshop. Maybe not necessary as complex as Photoshop, but for the wide variety of customers, and have it online, right? And I would say about already maybe four or five years ago, the Canva, everybody was talking about Canva. I said, I need to look at the Canva. And by the way, my own previous job we had our own proprietary online editor. When I saw the Canva, just blew my mind. And this is a unique [00:10:00] Australian company which developed something unique.

And when I joined Cloudinary, I saw parallels that Canva was the best at what they do in the design space, right? And Cloudinary is the best of what they do with the media. And and for me it was interesting to combine those two. And actually I think you started your podcast with with something that millions of users are using Canva.

And I actually today Googled, I think I found that, again, it’s a bit old article, but in 2022, the projection was that they were gonna hit about 1 million user mark. So an amazing, so I always, I had some commercial way of looking at one new build, [00:11:00] right? One one way is to build something which can be useful, but that if our developers can also make it out of it, a successful product.

So I think to this connector can expose them, can expose their Cloudinary, maybe to a millions of users, right? It could be a business to business, it could be a B2C. So it just gives them ideas of how they can actually help millions of users to deliver media. And that’s what’s exciting, I think about it.

Becky Peltz: Yeah, I think this is interesting too. I was looking at the documentation from Canva and I noticed that we’ll be seeing movement from Canva into Cloudinary, but you can actually move both ways. So here you have these two kind of headless media companies able to exchange with each other and then of course other websites if needed.

So it’s just a really cool integration [00:12:00] between these two companies and their product.

Sam Brace: Absolutely. So Igor, let’s do a quick walkthrough of this so that way everybody understands what this is. Cause I think we’ve talked about conceptually enough where something’s happening in Canva, content creation, and then it’s gonna be delivered by Cloudinary.

But let’s see the overall flow of this thing. So I’m gonna bring your screen in here and maybe we can do a quick demonstration.

Igor Vorobeychik: Sure. Absolutely. So here I’m in Canva, right? And I want to create my design. Let’s assume it’s some Instagram post maybe, right? I can choose from variety of different designs, like templates, right?

And I don’t know, maybe this is an HR type of post like we are hiring or some other stuff. Maybe I want to to [00:13:00] customize it, right? Once I customize it, I would like probably to publish it, right? And this is where the a lot of customers will say, okay, what do I do? How do I make sure that it will be delivered in most optimized format?

How I will actually use this CDN also, so it’s gonna be cashed super fast and et cetera, et cetera. So millions of users can see this fast and et cetera. And this is where the integration. So all they need, if let’s say they have already a Cloudinary account, and they have an integration, then they just, in this case, I have this already integration in place.

I’m choosing the Cloudinary, it’s already connected to my particular cloud, right? And I can choose maybe some folder where I want to maybe organize something [00:14:00] like that. Maybe I can choose the format, one of the formats that’s available for me to save this. This is, by the way, configurable by your extension.

Maybe provide some message that can be used later on there, and save it. If all went well and my extension is up and running, first of all, you’re gonna get back already a URL, which can be shared, right? The version which we just customized, right? If those of you who know Cloudinary, you will see that this version include f_auto, q_auto, meaning is optimized format, optimized quality.

And again, we can go wild here and add more transformation even on top [00:15:00] of this asset, and if we will go to the Cloudinary, and let’s say go to this folder, we will find this asset now. And we also can notice that I applied some contextual metadata. I applied some tags to it, right?

So that can be also searchable within my my let’s say asset library to find something that has certain tags something that maybe has a contextual metadata we scan by id. So I can basically not only publish it, but also organize it in a certain way within the Cloudinary, right?

And obviously this [00:16:00] published URL now can be served in any systems can can be used on any website. So that’s the overall workflow final workflow which we see.

Sam Brace: It’s incredible and I think what’s amazing about it is that you’ve able to done do a few things that you’ve pointed out really is that if you wanna make sure that this is now easily searchable for inside of your Cloudinary system, you’ve now shown how adding something into the comments field be as searchable content that when it makes its way into Cloudinary as an asset.

I think it’s also where we didn’t have to wait long. This is a real-time demonstration. This wasn’t taped prior or anything like that. And then you add something where you created in Canva, you delivered it in to Cloudinary within a minute, if less it’s incredible what you just pulled off here at Igor.

Becky, I didn’t mean to interrupt you. You had a point there.

Becky Peltz: No problem. But yeah, I was struck by the, same thing. We’ve taken an [00:17:00] image that had really no context, no metadata, and made it into, put it into a place where it can be, have a high amount of context and be pulled in from many different data identifiers like the tag or the context metadata.

So I think that’s something to look for as we see how you implemented this Igor is how did you get that context associated with those images that you are pulling in?

Igor Vorobeychik: Yeah, absolutely. So this is where we can, we will need to already get in the bits and bytes of the integration. So I guess that would be a natural progression.

So for those that would like maybe later go a bit more detailed I do have a blog that you can find that describes how to build Canva extension give you pretty much [00:18:00] all the information you need. This is just like for your reference, right? So have you detailed here.

We may not be able to dive into all the aspects here. For this particular project and also the project that was facing the public, I decided to use Glitch. Glitch is a very easy way where you can create an application. You do not have to use any desktop id you pretty much, any student can use it.

He doesn’t have need to have a very powerful computer or any proprietary software. He can create a very powerful application. I use the, in this particular express framework. This is for for, to create my REST API influence that should [00:19:00] satisfy Canva publish extension.

We’re going to get into details a bit more. So I use Glitch as a platform where I develop the poc and also also something that is actually the, where I published my endpoint, right? So this is a development environment plus actual my endpoint resides on this system and can be accessed, right?

So it’s self-contained. Some of you may use some IDE Visual Studio Code. They maybe gonna use git or GitHub to, for their PUT versioning and eventually they may use, I don’t know, let’s say AWS to actually publish their lambda their endpoints. But this is more like self-contained.

A bit easier to understand. But I also love Glitch, its [00:20:00] an awesome company, which was acquired by Fastly, which is also a Cloudinary CDN partner. This is what I used for this particular project.

Becky Peltz: Hey, just not to interrupt you, but excuse me, Igor, but for this extension, now I, as I understand it, you need a base URL. So, whatever code that you, however you package it up, whether in Glitch or in serverless functions, you will need a base URL. So you get that automatically from Glitch, right?

Igor Vorobeychik: Exactly. So your like a unique name space, right? You call it a domain name. You obviously have a more robust version and pay for your CNAMEs and have but yes, it was [00:21:00] very easy to use because I got all my domain names, everything set up for me pretty much, right? You getting it. And it, it was very easy. Now, Canva also has tremendous documentation. And I actually when I look, looked at Canva documentation, look in Cloudinary and saw how we both create a very unique content in a very professional way.

So it was so easy for me being a new SA within Cloudinary just by reading some of the documentation, try the samples, right? Be able to achieve what you see here in, in a very few days. Literally.

Sam Brace: This was new to me because, like I’ve always thought, this is my ignorance, is that I [00:22:00] always thought of Canva as being a very UI based tool, but as I started going down the rabbit hole and being like, oh, but have great developer documentation and seeing this area, it was very enlightening for me to be able to see this project, but also to see the various layers that Canva has created to be able to create these types of connections that you’ve gone and showed here.

So I can see here on your screen the way that they’re calling this is a publication or a published extension. So what they’re ultimately doing is it’s getting added to the published menu of Canva and it becomes an app just like you chose it from in this space. And that’s what they’re encouraging developers to be creating.

Igor Vorobeychik: Exactly. So Canva has lots of out of the box extensions, but it also allow developers to create their own. And there are several types of extension. There are content extension. For example, one of the next steps maybe would be [00:23:00] bringing assets from Cloudinary, and that would be a content extension, right?

So this is, would be probably on the left when you do upload, that’s what it called content extension. Where you’re taking the extension from your asset from right where you selecting your asset. Not necessary. You start from design. Maybe you want to bring in us another type of extension is this is where you publish and it’s a publish extension.

So here you see my extension, but if I do more, you will see that a lot of connectors are already there. And those can, some of them are written by well known companies like Instagram and et cetera, right? But some of them, like mine was written by developers, right? So there is lots of extensions and there is a great [00:24:00] developer documentation that allow you pretty much, very quickly read about extension you want go with a quick start user guide, right?

There are examples here, and I, by the way, I choose Glitch, not just because it was also one of the easiest choices because I pretty much maybe get a project that I could have just click remix, right? And then start develop my own.

Becky Peltz: So its like a quick start here, huh? They’ve given you kind of a quick start for doing your extension.

Igor Vorobeychik: Exactly.

Becky Peltz: Giving you a sandbox.

Igor Vorobeychik: Exactly. Yeah. So maybe this sample is much simpler than the one that you see. Or actually, my example would be a combination of lots of samples that you will, you may find, and obviously a bit more [00:25:00] customized for Cloudinary needs, right? Or for, with the Cloudinary in mind.

But definitely the quick start user guides here, and by the way, on Cloudinary documentation, you will find a lot of also quickstart user guide samples also that use Glitch and some other systems that just allow you to play with the code, how you implement I dunno, Product Gallery Widget of Cloudinary etc…

So it’s today is very common where developers can quickly progress from documentation to some online sandbox where they can actually play with a tool before they, let’s say, purchase anything or before they decide or use this library another. So they, yeah, the, there is a very short path today from documentation to [00:26:00] actual actual sandbox and the prototype which our developers can build and that’s very exciting.

Sam Brace: Now, Igor, one thing that I know is a big thing that Becky and I always talk about in training, especially with Cloudinary, and I wanna address it in your project because I think you did a good job with being able to handle it well, is something called environment variables. And then basically making sure that’s not exposed to the public users in any way through something called a .env file.

Can you show me how you maybe did that? Maybe how Canva looks at that concept inside of your project?

Igor Vorobeychik: Yes. In order for us to build the extension, we need at least a few things. One of them obviously if we want to push asset to Cloudinary, we need to store Cloudinary application keys, right?

Basically how we execute the APIs. So in [00:27:00] my particular case, what I was doing, I was using the .env library, right? Which is using env file that allowed me to store pretty much different keys. So this is where I stored my keys. Now the interesting thing is if you will come here and and remix this project.

To make it of your own or you trying to view it as a different user, you will not going to see this information. You see it’s stripped out for you. To be honest, I was a bit worried in the beginning. That’s why I created, and I think in the blog post I created a, what I called public endpoint just for blog purposes where I [00:28:00] actually, in the instructions tell you create a .env I just given an extra layer of security there. I was afraid to store it there, but Glitch takes care of it, right? No worries. There, let’s go back to my Cloudinary endpoint, and let’s talk about the second key. Why do I have a, another value here is the Canva client secret.

So, Canva build with security in mind, right? When you start developing your application. And this is already, I already created, I can create new app right there in the Canva UI so you will see that one of the things is verification, and this is one of the actually things I really like, so your end point, Canva actually wants to ensure that whatever [00:29:00] you will develop be secure for its users, that endpoint will actually will implement the security measurements. Even if you can run the security tests and they actually will submit various client secret timestamps.

They will try to fail you and you should actually, your service should return a proper http response. If you do not, you will not be able to, let’s say, publish such extension, stuff like that.

Becky Peltz: Now, I noticed too that there’s a regenerate button there, so if anybody was trying to copy down your key when you showed it with the .env

Igor Vorobeychik: Obviously. Yeah, good point. Obviously right now…

Becky Peltz: Cloudinary has the same thing.

Igor Vorobeychik: Yeah. Obviously right now everybody will see this key and we are recording it, so obviously this is not something, so after the call will regenerate a new one and [00:30:00] then I will be able to use. But yes, the security in mind, this is great. This is by the way where I point to my own endpoint which is on Glitch.

And basically your project name will be the entry, right? The URL for your endpoint, right? And again awesome awesome very on one hand is simple, but everything in Canva is very so first of all you noticed that I had some user interface where I selected the folders.

Now since Canva wants to control kind of user experience, right? They don’t want that different plugins or [00:31:00] extensions look slightly different. They want some sort of unified look and feel, right? So they provide you pretty much with the user interface.

You just need to to write couple of endpoints to feed the information to the…

Becky Peltz: You’re gonna start out with an endpoint that is gonna go get you something, and then therefore they’re gonna have some UI that has lists or a single item.

Igor Vorobeychik: Yeah. And yes, Rebecca. Absolutely. So when you said word get, and this is exactly, actually, almost the name. Find and get the endpoint name. So even from the names of the endpoint, which Canva ask you to actually to write, it’s very easy to, it’s not some, special names. So for publishing, they using upload by the [00:32:00] way, I found that the upload endpoint. Is very similar to Cloudinary upload, right? So it’s an upload, which is mean published, and this is exactly what you do when you so a lot of similarity in terminology you say .And then yes, there are there is a find that’s basically something which loops through directories, right? So I used here a couple of Cloudinary APIs. In this case I used the sub folder API. And then eventually there is a get, once you find what you want, basically you are passing back the exact sub folder that you decide to place your item there, right?

The final URL. Now that was developed before Cloudinary I think had dynamic folders. Now we have dynamic [00:33:00] folders that maybe would do it differently, but again, the concept of structure or place your designs and organize it within the DAM still applies here.

Becky Peltz: Yeah, and it looks like inside there go and you get these resources and then you map them in your, I think it would be down a little bit from what I’m seeing, maybe line 120 or so where you were just, where you were at.

You, so down there at Oh, up a little bit. I see like line 115 there. So you take what you get out of the subfolder response and you map it to their object type id

Igor Vorobeychik: I will pass, yeah. All this information to their object so they can also build the UI, and eventually once something is selected, then they actually can already call the upload API, and pass what was selected because [00:34:00] it was done by different endpoint. The define and they get the actual path, let’s say, where you want to store it. And actually those few lines of code are responsible to push it to the cloud, right? And literally few lines of code as what we upload

I’m using the logs a lot in this just to debug and see what information is sent to me. That’s how I was able to understand exactly what type of let’s say body structure they sent to me, right? So I could access the URL of the asset, right? I can get a design id, right?

Canva, design id, which I decided using as a file name. And because I’m using a [00:35:00] default upload preset, even if I will reuse the same design id. But there is a unique unique characters are added by Cloudinary, so I do not override, again, I could have decided to override. It depends on the workflow.

Now right before actually I do provide some contextual metadata. I could have provided me maybe create structure metadata. Now right before, actually…

Sam Brace: Before you jump to that I wanna point out something that I love what you did there, because if you look at the context, if this is the connection of what we saw earlier in your demonstration where when you added in comments then how did those become searchable fields within Cloudinary when we were trying to find the files? And it’s because of its plus message that you see here, like the request body message. That’s that direct connection for us to know that we’re applying this as context metadata. So it’s, that was genius because you could see [00:36:00] people, adding lots of things, frankly, in the Canva UI to be able to explain what’s happening there and knowing that all of those become searchable keywords for people to find that asset later with Cloudinary. That’s a great feature that you added in there. It’s very smart.

Igor Vorobeychik: Yeah, thank you. And my personal favorite, actually, tags, right? Actually I had added just tags today. I when I joined the Cloudinary, I didn’t put much attention on the tags, but once I discovered the power of Cloudinary tags, it just blew my mind.

And also list APIs that are around it. Again, we probably need a different session on those, but that’s why I added this in another line here, just to add the tags. And obviously now in this case, you need to know the tag if you search by it, right? So if the design id is something generated by [00:37:00] Canva unique and basically has no particular structure it would be hard for you to guess that one, right? So you probably, when you are using the tags, this may be not the best field from design id from Canva to use. I would use here maybe something more more human readable or understandable or guessable, right? Let’s say some name or whatever.

But the idea is that you can apply tag and then doesn’t matter how many variations you will create of the same design, you can search by the same tag and then get all of those designs for you. So we can obviously very quickly demonstrate the same, we’ll just, let’s say create v2, right? Version two, right?

And then we will gonna share it again. And let’s say, I’m gonna put it even in the samples folder. I don’t [00:38:00] have to even put it in the same folder. Different message. By the way, this message in my case is required. You can make it not required. Just the configuration of the extension is on the published extension.

So now it’s saving. I want to show you, by the way, that when we saved all the information, I just put it in the log. Just easier to see. You will see here that I got all the information from Canva the file name, the type, the design id, right? So that’s the actual tag. And then I also store here response from from Cloudinary. Now let’s go back.

Becky Peltz: So just to [00:39:00] make it clear, you, this is where you’re calling our Cloudinary Upload API and pulling something from Canva, which is pulled in by its design ID into use as file name.

Igor Vorobeychik: I’m not pulling it per se. It’s more common when it calls the endpoint. It passes in the message that passes message body and message header.

The header is used for security to actually do some. You will see each method use validation of this post message. That’s what you use in the security. And remember the key which discuss Canva id and the body is a JSON body object that you can get an information from Canva take it from there and then pass it to Cloudinary.

That probably would be more accurate description of what happened. So if we go right now back to Cloudinary to [00:40:00] the, to Cloudinary and maybe go to, I don’t know, to advance search and maybe right now know the tag, but let’s say I’m just gonna apply the tag. So now I have two designs, right? Now this is v2 and this is actually marked as a new.

We see the nice preview here. This is v2, this is v1, right? Or basically our first creation, right? They have slightly different, I think message one has a test and another has, ah, they both have tests. I guess I, in both cases, wrote tests. But the idea is that I have two variations, right? But they all belong to the same design Id.

Then maybe later I can do something about it, right? Maybe in the future I will open up Canva from Cloudinary and load the design id, right? [00:41:00] Load design id, I just given the ideas where we can bring it to the future. The most important that you can tag, you can affect your file name.

You can do lots of stuff. You can organize your content and most important, you publish in it, in the multi-CDN environment of Cloudinary. And this later can be served in the most optimal optimized format and quality, any type of transformation.

Sam Brace: One thing I wanna do, let’s jump back to Glitch for a second cause I do want to unpackage one more thing that happens to be in your code that I think is gonna be very helpful for people when they’re working between these two systems.

Scroll down until we see resource type, I think it’s line 44 if I remember correctly. There we go. See it exposed. So Line 44. Resource type. So as we know, because we work at Cloudinary, This is where we’re saying, is this an [00:42:00] image? Is this a video or is this a raw file? And raw file could be any file tape that is not able to be transformed, meaning we’re not gonna resize it or crop it or change its format in other things that we can do.

There’s hundreds of things we can do with it, but it’s to say what I like that you’ve done here though, is you’ve called our auto resource type situation. Because when someone is working with a system like Canva, they’re gonna be bringing forward images like we saw. We’re gonna be bringing forward JPEGs, PNGs that were created in Canva, and then make sure we’re deliverable inside of Cloudinary.

But what’s also possible with a system like Canva is you might be bringing forward documents such as maybe a PowerPoint file or something that’s going to be, we consider them images the way that we work from the Cloudinary, but PDFs could be considered documents too. So it’s to say you don’t have to think about what’s coming from a system, it’ll just automatically detect it and make sure it applies the appropriate resource type.

So I thought that was very smart, once again to make sure this was future-proofing, this, making sure that all types of [00:43:00] users could benefit from this when they’re connecting these two systems together. So that was a good call on your code.

Igor Vorobeychik: Yeah. Thank you Sam. Yeah, and this was just for simplicity. You don’t have to think what type of the asset you have.

And as you saw in when we are actually posting something or let’s say, and sharing, we can decide on different type of format, right? And suddenly it can be become a PDF, right? And obviously in order not to have some if else statements or others, and maybe even on Cloudinary, you can use PDF as image and as raw.

So that’s where maybe you will need eventually get into the, those case or if statements, if you want really let’s say taking control, right? How you want those files be [00:44:00] accepted by Cloudinary, right? But if you don’t, then auto is a very good option to, to use. So now actually I’m gonna get back, and this is going to be in this case could be a PDF, but also we are going go to Cloudinary right now.

Let’s see, we’re gonna go through the Cloudinary and reload or refresh or now we have another asset, right? Image format, PDF, right? So, that’s just the power of Cloudinary.

Sam Brace: It is. Now one thing that I’m missing right now in the code situation and, I’d love for you to see it cause we’ve referenced this a few times, is this f_auto and q_auto that we keep talking about.

And of course f_auto means automatic format, so that way when you’re getting these as JPEGs or PNGs [00:45:00] from Canva, we at Cloudinary can deliver them in the most optimal format possible. So it may not stay as that JPEG or PNG, it might become a WebP as an example, or it might stay as that if we see that as most optimal.

But it’s allowing Cloudinary to help make the choice so that way the content is as lightweight as possible, but it’s only based on format. But, and q_auto is similar when it comes to the compression side, making sure that we’re providing the most optimal level of compression based on the person’s browser and and frankly, device as well.

But what I’m wondering is how are you applying this f_auto q_auto inside of your code? What’s making that be appended into the URL?

Igor Vorobeychik: Sure. In my particular, there is various techniques that you can use, right? I decided to use actually another Cloudinary method, right? That is basically the URL the method that allows me to [00:46:00] build the URL.

We also have a method that allows you actually to build the whole image tag, right? If we want the whole image tag, I use the URL here and within the URL, once I uploaded to Cloudinary and got back as part of the result, a public id, right? If you remember, I told you that I allow here to use a dynamic upload presets, which actually generates the unique name for these uploaded files.

It adds some characters. So I do not know, at this stage, what will be the public id. That’s why I need the response. Once the Cloudinary uploaded and I’m gonna get the public id. Now, once I get the public id, I can build the URL. And here again you can use any of your requirements. I do here very bare minimum,

I saying use version I don’t have to use version if I don’t want to. [00:47:00] I would like to use transformation. In this case, I’m saying I would like to use quality fetch format, which is auto, right? I could have specified particular format I want to use, right? I could have specified particular quality I would like to use, right?

I could have add all hundreds different transformations which Cloudinary supports and generate URL, right? So this is something that can be I’m not using here again, that was build when I just step into the Cloudinary world. You can use here name transformations, right?

Which is very powerful because then you actually give something of another like encapsulation. So basically let’s say if I would add here a name transformation, then I could have [00:48:00] used Cloudinary and build very complex name transformation, right? And give it to the no code user, right?

The user doesn’t have to write the code maybe later to change this name transformation, right? And use Cloudinary transformation builder for that, right?

Sam Brace: Hold on, Igor, I mean as big as you can make this, the fact that you are even able to apply just these two is so powerful too. So it’s to say yeah, you can always iterate, but this is pretty impressive in itself to be able to add f_auto q_auto to every URL.

And then Becky, make sure I’m understanding this correctly. So if I’m looking at this flow that we have here, we have it where we have the endpoint that’s using the Upload API. And then we’re calling, is this the URL helper method that’s taking place for all of this f_auto q_auto and URL generation take place?

Becky Peltz: Yeah. Yeah. So the Uploader, the API returns a [00:49:00] promise and Igor’s dealing that, dealing with that, using the, then so he gets the upload result back after the upload is successfully done and now he has access to the upload response, which contains lots of information. And some of that information is that public id.

So upload Result public ID is the unique identifier from Cloudinary upload result format was the original format that he used to upload version is the result version. So he’s able to pull in data out of the response and use that to generate a unique URL from the Cloudinary URL and there are other kind of, I call ’em helper methods.

This one builds a URL. There’s one that will build you an image tag. There’s one that will build you a video tag and they basically just produce strings. And then once you request that string in your browser, it goes through a lot of processing and eventually gets served off of a CDN. So [00:50:00] lot, a lot of things going on once you’ve got a Cloudinary URL that you can take advantage of.

Sam Brace: I love it. This is absolutely fantastic. Igor, you of course you wrote this or there’s so much we can unpackage, but whatever big things do we wanna make sure that people understand, like maybe was there any roadblocks that you came across? Was there any big learnings that you came when you were building this project that is worth unpackaging for the audience?

Igor Vorobeychik: Some little things which I found is maybe that I couldn’t actually find in documentation or wasn’t wasn’t clear. For example, when I used the subfolders API of Cloudinary the Cloudinary has also root folders of something API, which I didn’t want to use both.

And then I found the way, if I will just pass the back slash, that’s actually give me a route, the little things like that. [00:51:00] Also I found a bit not a clunky, but I spent some time on the not necessarily on Cloudinary end, but on the Canva around the validation, right? All of these validation of security which implemented here, which I advise to go and look at, right?

A bit more closely. What else? The rest is a, I wouldn’t say that other things are basically wasn’t that hard to implement. And again even if you new to node JS, if you are new to Cloudinary, new to Canva, you should using this blog and those few resources put this together in several days and already have your own Canva published extension. Now, my extension is not public [00:52:00] extension. This extension is of the it’s a team team extension, right? So when you publish it, you basically do not have to go through scrutiny of the Canva, which should make it available for millions of users.

Obviously there are there are some things that you will have to fulfill, but so it’s a bit easier to build your prototype to play with it. And then obviously expose it within your organization. So that’s what I was using here. I found this a very easy way of. If you, let’s say, building a new version, which you wanna point to, different end point.

Maybe this is fraud and you wanna point to staging, right? Or maybe you have pro too. Canva have out of the box, create new version. Now [00:53:00] it’s become draft of the new version, right? Which you maybe can repoint to some other place. You maybe even want to let’s say, remember I told you I’m forcing the message, right?

Maybe you don’t wanna force the message, right? Maybe you want to use different not allow, maybe PowerPoint whatever extension, right? Maybe you want to reconfigure it as well, right? And the interesting thing is using the same client secret, if you using the same endpoint, you just may be messing up with the descriptions with the UI, it doesn’t have to be changed within the code, right? So those type of things. And then you can even preview it. So right now I actually can maybe preview and you see now, I mean they have right now two [00:54:00] names I probably should have named the second one. This might be different. But if I’ll choose this one I by mistake, choose the designer, which I need to buy.

So let’s use something free and choose. And you will see right now that I don’t have this PowerPoint, right? Selected. I don’t have this message as something I have to use, right? And in this case, I’m using the same. So actually there is some error. I need to go dive. Maybe there was actually change in these secret key and et cetera, et cetera.

Sam Brace: Right, but you can test it and…

Igor Vorobeychik: Yeah, exactly. Exactly. And this is where the logs are coming into place. And there I should, or some public ID invalid name. So actually it was Cloudinary error. Probably not do doing a good job on the on these [00:55:00] naming convention. But again, this is how you are debugging the stuff actually intentionally wanted to show you.

So this is how you getting help from what are doing and perfecting your integration. And the great thing is the the Canva also makes it very easy for you to basically publish your draft. Now I have my new draft version, right? Which I can continue to edit, right? Or maybe I want to delete it, and once I’m done, I will be able to publish it and it’ll override my extension because this is a new version of v2.

So, again love what Canva did around extension love what they did around around security and even more excited about the Cloudinary, what we now, how we can help all these millions of Canva users to publish their [00:56:00] designs to deliver them across the globe in the most unified and optimized way.

Sam Brace: And to encapsulate everything. What I am really happy about of course, is that not only will people have this podcast episode to be able to reference, to understand all of the ins and outs of doing this, but you also have a fantastic blog post that’s published on Cloudinary’s main blog that highlights all of this.

It has clickable, usable links to be able to get access to a lot of this so you can remix exactly everything that you’ve gone ahead and built as anybody that’s working between these two platforms. So it’s a, you have plenty of resources available to the world to be able to make this Canva, Cloudinary connection, a real thing within their organizations.

So you’ve really empowered a lot of developers here at Igor. This is fantastic.

Igor Vorobeychik: Thank you. Excellent.

Sam Brace: So Igor, we’re gonna let you go, but have a wonderful day. This [00:57:00] is wonderful to have you here. And then me and Becky are gonna say some nice things about you. So yeah, have a wonderful one, Igor.

Igor Vorobeychik: Thank you, Sam. Thank you, Becky. Have a good day. Yeah, bye-bye. You too.

Sam Brace: Becky, what’s your key takeaways here? There’s a lot of things that we can unpackage of this project, but what are the things that are standing out to you?

Becky Peltz: I think the way that the documentation for Canva is set up, that they give you a Glitch starter.

You can take that and then just play around with all of the different, certainly Igor’s talk, generate a lot of ideas on built based on what he did and then what else you can do as far as you could maybe start bringing video in then you could bring, stuff from Cloudinary into Canva and just lots of different permutations there.

I think. It looks like a fun playground.

Sam Brace: I agree.

Becky Peltz: I would probably look into, building out some serverless functions [00:58:00] too, because as long as they all are posted at the same domain and you have that base URL, you can do that in a serverless mode as well. So lots of interesting paths that a developer might take with this.

Sam Brace: Yeah, I agree. And I think you’re touching on something that I think is really inspiring to me and it’s a move that I’ve seen Cloudinary starting to do with more quick starts, more ways to try it, exploring code. And Canva has something very like-minded where we have a lot of ours tied to Repl.it, which is a similar service with some differences of course, but similar service to what Glitch is providing.

And we have a lot of that in our documentation for people to try it out, to actually, let me quickly show our audience what I’m talking about here, but if we pop over to our documentation, you’ll see that we have quick starts, very similar to what they had here, where we can test out the node SDKs right from this area with a overall similar service to what they’re providing for this.

So people can expand and try [00:59:00] things out in a safe space. So it is where I like that Canva and Cloudinary are doing something very similar in that space, but it’s where they’re also encouraging everything that Igor did is they want more developers to create connections between this system and that system and the other system to Canva.

So if it’s inspired from a business perspective that they’ve embraced the creator and the developer within their overall product, which is very very cool to see.

Yeah. And I think a good developer experience is the one where there’s less code. So anytime they can supply you with a nice set of code that you can just put your specialty stuff on, that’s a good experience.

And they’re definitely in the right place as Cloudinary is too.

It is. And it was smart for Canva to use Node as a starter, frankly, because, think a lot of our coursework was written in Node intentionally, because it [01:00:00] is a framework, it is a way for people to be able to do things truly front end, back end because of the JavaScript connection between all of it.

So it is where it’s, if it’s a smart space for them to be in and, but it’s also to say that if someone were to try to replicate what Igor did, possibly in other SDKs, it might be possible. So version, there’s lots of connectivity there too, which is

Becky Peltz: Yeah. Just go home and talk to Chat GPT-4 and he’ll give you probably three or four ways to do it.

Sam Brace: Oh man, we like, it wouldn’t be a podcast if we didn’t mention Chat GPT in it, right? No, absolutely. But great stuff and to highlight of course, everything that we have talked about. Once again, on cloudinary.com/blog, you’ll see Igor’s post, we’ll have that of course in the show notes with all the associated links if you wanna follow along with everything that happened to be there.

So wonderful space for you to be at. And of course, before we do let our [01:01:00] audience go, we would do wanna point out that this is not the only Cloudinary podcast episode that has been out there. We have many, we have years now that we have produced of this. So you can always find every and all episodes of the podcast programs we produce.

There’s two: DevJams, as well as MX Matters, and you can see those at cloudinary.com/podcasts and that’s where you can dive into the episodes, watch and listen, and also have links to any of the associated podcast services that we happen to be subscribed to, such as Spotify, Apple Podcasts, Google Podcasts, YouTube, as well as our own training resource, the Cloudinary Academy.

And without making sure that we don’t continue the conversations, we have to continue the conversations and if someone has questions about anything we’ve covered at any program, or frankly, anything that is tickling their brain about what Cloudinary can provide, they can always go to community.cloudinary.com, where you’ll find our overall community forum and [01:02:00] it’s associated Discord server for you to continue with conversations.

So this is all good stuff now, Becky, any final thoughts about the Igor conversation?

Becky Peltz: No. It’s great to have Igor on and to be able to share some of the work that our own employees are doing. It’s, there’s a lot of creativity in the company and it’s nice to be able to pass that around.

Sam Brace: Absolutely. Absolutely. One last thing that we do wanna point out here is, this is actually somewhat of a bittersweet episode for us, because this is gonna be Becky Peltz last episode on DevJams. Becky’s moving on to some brand new adventures, which we’re really excited for her to be a part of, and it’s been amazing to have her as my co-host since we’ve launched this overall effort.

But it is to say that this will be the last time you have Becky on as our official co-host. Becky, I wanted to say thank you for the many years of helping our [01:03:00] developers, helping out the overall community to understand what is available with Cloudinary and expanding their knowledge. So thank you for being a part of this.

Becky Peltz: Hey, it’s been my pleasure and I’m happy to be here. I’ll have to check out what you’ve got going on next time.

Sam Brace: Absolutely. Absolutely. And that’s to say that we are still absolutely continuing the DevJams program. We’ll be out once again in the next few weeks with a future episode where we’re talking with another developer that is doing some amazing, innovative, inspiring things with the overall service.

So don’t worry, even though Becky won’t be with us, we’re still gonna be here. And of course, hopefully, Becky, you’re cheering for us from sidelines on this overall case too. Excellent. So on behalf of everybody here at Cloudinary, thank you for being a part of this episode and learning more about what our services can provide and we’ll see you at the next one.

Take care everybody.

Sam Brace: [00:00:00] Hey everybody. My name is Sam Brace, and I am the Senior Director of Customer Education and Cloud community here at Cloudinary, and you are about to watch and listen to the latest episode of Dev Jams.

I gotta tell you, I’m really excited for this episode because in terms of JavaScript development, we have one of the, my opinion, the foremost experts in JavaScript development. Joining us as the guest for this episode, Kent Dodds, and if you’ve ever gone to Epic react.dev, if you’ve ever just seen overall talks in the space, if you’re even touched some platforms like Remix, you’ve been experiencing things that Kent Dodds has done and.

What’s very exciting is that Kent has an amazing blog and associated community that’s tied to his overall brand. But what’s [00:01:00] great about this is that he has gone through and developed some really great ways to handle what we call cumulative layout shift. And that’s done through low quality image placeholders, making sure that people have content that’s loading quickly and efficiently, but also doing it in a way where they can make sure that they know content’s even gonna be appearing on the page.

So those are all topics we’re gonna be talking about here today in this overall Dev Jams episode. Now, of course, with every Dev Jams episode, my co-host Becky Peltz, who handles overall curriculum management and program development for our developers that use Cloudinary. She’s joining me for this episode, just as we said on every single one of these.

Becky, it is wonderful to have you here for this conversation.

Becky Peltz: Hey, I’m happy to be here. I we’ll be learning a lot here. There’s a blog that we’ve all read that is, just wonderful at blending inspiration to solution. You [00:02:00] read through it and it just flows out this great idea and then how to solve it.

And then we get to see how he uses Cloudinary to to as a big tool in getting that solution.

Sam Brace: One thing that I love about it, and you articulated it well, is that the one thing that’s nice about having a guest like Kent on here, because as we said, he’s an expert in this overall space, is that he also is very good at being able to show the step by steps, the understanding, sometimes historical background information you may need to know, which I know we appreciate as educators, but it really does help to have a holistic view of why you might wanna be doing something or what this person experienced with the overall project.

Becky Peltz: Yeah. I know he’s an educator and I think that, programmers, we’re good at breaking down steps for machines, but I think when you get into educators, you get people that can break it down for people and it’s so much appreciated.

Sam Brace: Completely agree. So before we bring Kent on to be able to talk about all the great work that he’s doing [00:03:00] with his blog presence, and of course because me and Becky work for Cloudinary, there’s gonna be some Cloudinary things that we’re gonna talk about in this overall space.

But we do wanna make sure that you guys know that if you are the first time listener, first time watcher of this overall content, you can always go to Cloudinary dot com slash podcasts. And that’s where all of our podcasts for the two programs that are managed by the company. Are going to be. So if you ever have questions about what past episodes, what topics have we gone and covered, they’re all going to be in that overall space.

And of course you may decide to listen to or watch some of the programs on certain services like YouTube or Apple Podcasts or Google Podcasts or Spotify. We happen to be in all those different places. So if this is your first time here, welcome and of course we are very happy to have you here. And we wanna make sure that you know where you can be catching all of these episodes down the road because this won’t be the last conversation we have.

But it may be definitely [00:04:00] one of the best, cuz as I said, we are so excited to have Kent here today. Let’s bring Kent on and let’s get into the start of our conversation. So Kent, welcome to the program.

Kent Dodds: Thank you so much. And you’re right. Those were very nice words like you said at the start. Thank you.

I appreciate it.

Sam Brace: And also very true, very true. People that are not completely familiar with all the great things that you’ve done, all of the work that you did to get to the spot, give us a little bit of historical data. Who’s Kent and why

Kent Dodds: are you here? Yeah, so I live in Utah with my wife and four kids, and it’s a very snowy day out today.

It’s been a very fun winter if you enjoy snowboarding. And yeah. So I have been an educator since, like even before I graduated. I’ve been teaching people the stuff that I know, whatever it is. And I worked as a full-time engineer for [00:05:00] a number of companies, probably the one most people recognize is PayPal.

And then I decided to go full-time teacher because I was I just enjoyed that more and I can’t do it all. Went full-time teacher. That’s right around the time I built testing JavaScript and then I built Epic React. And then I actually built my website and lots of the stuff that we’re gonna be talking about today.

And then I, now I’m working on Epic web.dev which is everything that I know about the web. And this topic will certainly be included in that. And yeah I also did spend about 10 months working on remix, the sign behind me and the framework that I use to build my website as well.

Yeah I do plenty of stuff in the open source space and I blog a lot. So that’s me. [00:06:00]

Sam Brace: Kent, is that it? I mean that

Becky Peltz: Is that all?

Sam Brace: That amazingly historical data that you have there, and it shows the overall space that you’re in. It’s where being an educator, but also understanding a lot about how the web works, a lot of things that we’re talking about, of course, you’re tied to the React community, the JavaScript community. So it’s where you’re touching a lot of different places, but it’s where to say that you’ve, you have some experience working in this other area, so what you’re telling people to do or not to do there’s some credence to that.

Kent Dodds: Yeah I would say so. People follow my advice and then they thank me later. And then I don’t know if people follow my advice and it doesn’t work out. They just haven’t mentioned anything. But I do have experience in this space shipping apps to millions of users. And I’ve been developing for the web for almost a decade now.

So it’s yeah I’ve got some stuff to say. [00:07:00]

Sam Brace: When I’m seeing comments popping up from, people are saying like, he’s also the author of React Testing and off and a thousand NPM packages.

Becky Peltz: You’re being modest, in other words.

Sam Brace: Regardless of how people feel or not feel about this, it is to say that I’m very happy that you’re here today.

And what I’d love to be able to understand, so now that we can see this, you have your blog, you have your website, so that’s kentcdodds.com. What took you to the space that you started to say yourself. I wanna start working on some of the things that we’re gonna be talking about today as I mentioned earlier, cumulative layout shift, low quality image placeholders.

Why did you start to see the need for some of these things that we’re gonna be talking about?

Kent Dodds: Yeah, that’s a great question. My original website at kentcdodds.com, if you go to the web archive and look back in like 2015, the website was basically a white screen with text that says, I’m too busy to build my [00:08:00] website.

Here’s some links to my Twitter and whatever. And then at some point I decided, I would like to have a better online presence. And so I wrote my site in Gatsby and statically generated it. And that’s when I started writing being really active on my blog. And one of the cool things that I got out of Gatsby was it’s built in support for image processing.

So it was able to take my image, turned it into an SVG. And so when you landed on the page, you would see an SVG as a placeholder, and then the image would load in and it looked awesome. There were a number of problems with that not at least being that processing took a lot of time.

And so deploying my site, even like fixing a typo, would take 20 minutes. It was the worst. I hated that. And so you could add a bunch of caching and stuff, but yeah, that was not fun. And so when I for that and various other reasons, I decided to [00:09:00] rebuild my website. And it was this really big effort that I did.

Was that last year or maybe the year before? And yeah, in the process, I didn’t want to lose that really nice loading experience cuz my website has images everywhere. But like the biggest, of course, is my blog. Every blog post has a header image, and I wanted that loading experience to be as good as possible just because when I decided I wanted to make a professional website, part of the reason was because I wanted to illustrate that I really knew what I was talking about.

Especially when I am saying, “Hey, come learn how to build awesome websites with me”. If my personal website’s no good, then okay, you’re gonna teach me how to make like a website like yours, that’s garbage. I don’t want that. So my personal website needs to be very good. And so avoiding poor user experiences I’ve had cumulative layout shift.[00:10:00]

And that basically that, if you go to a website and you think see things popping in that’s bad cumulative layout shift. You basically want it to poof, there it is, and nothing moves, other than things that may be animated. Nothing moves. Yeah. That’s like in animations are a fun subject that we could talk about later.

But the idea is you don’t want things popping in place. And images are one of the biggest culprits of bad cumulative layout shift as well as banners that pop up that those are the worst. And yeah, so that, that sort of thing. Or ads, of course, like I, I don’t do any ads, but pretty much anything that you do that happens only on the client can cause cumulative layout shift. And the fact is that we’re not server rendering images. We’re server rendering an image tag that tells the browser how to load the image. So you can technically server render an image if you use Base 64, and we can talk about that. I [00:11:00] actually do that.

But for performance reasons, you typically don’t want to server-render your image like that. There are special considerations that you need to take into account when you’re talking about an image heavy site like mine.

Becky Peltz: Yeah. You definitely don’t wanna see big chunks of things moving around and at the same time, there’s a lot of options for those chunks. And I think, you have to pick a really good option. For, we’ll see how you figured it out. But just popping up a bunch of little tiny thumbnails isn’t really gonna be a solution because that’s gonna be just distracting.

Yeah, the user is looking for a continuous experience. It’s okay if it’s, if it changes, but it has to kind of transition. It can’t be like “boom” kind of effect. And I think as people who write frontend code [00:12:00] are really dependent on the device or the browser that they’re working with, they really have to like, understand it and work with what it can do.

And I think probably why Google is the one that is telling us about cumulative layout shift and how you’re gonna maybe lose your SEO ranking if you don’t, get it working.

Sam Brace: Now we’ve talked about cumulative layout shift, but I also know that’s an area that Google has started to look at when they came up with the concept of Core Web Vitals. That’s something that I started at least hearing about a lot back in 2021, I feel was the first time when someone said Core Web Vitals or Web Core Vitals or whatever they wanna, mix, match.

But something called me about this. Was that also part of the reasoning for it? It was tied to Core Web Vitals and the scores that are associated with that?

Kent Dodds: So I actually do have metrics for my Core Web Vitals, and they’re actually even public. You can find it on, if you [00:13:00] scroll down to the bottom of my website, there’s a transparency link.

I think it’s, do I call it transparency? I, it might be mission or something. Yeah, “My Mission”, if you go to that that’s my transparency page. And on there’s a link to both my analytics as well as my metrics for my site. So anybody who wants to explore that a little bit. So I do keep track of the Core Web Vitals, but I never look at it.

For me, especially since I’m not actually selling anything on my website, I’m selling myself. And the investment that you’re offering me is your time. That’s really it. And also I suppose your email address. Of course I link to to courses and stuff like that, and I do sell those, but not on my personal website.

So the reason why my personal website needs to be a good experience is just like I said to illustrate that I do know what I’m talking about. I know how to make really awesome [00:14:00] experiences for the web and also because it’s it’s like a game of code golf. Like you just, it’s fun.

How good can I make this experience? And for businesses where you are selling something on the site, it can make a drastic impact on your bottom line based on how quickly your application loads and how confident users are that your application is doing what it should be. That it’s capable of doing whatever it is that you’re selling.

So if users land on your site and things are bouncing around a lot, it really reduces their confidence in your ability to provide whatever it is that you’re intending to provide.

Becky Peltz: Yeah, a website is a reflection of your product. If you’re doing a lot of crazy weird stuff on your website, maybe the product is a little funky too, just leave it alone.

Kent Dodds: Yeah. I sometimes will pick [00:15:00] restaurants based on how good their website is.

Sam Brace: Yeah. I actually have done the exact same thing, Kent, where I’m like, oh, that probably is a reflective of the overall service that I’m gonna be getting.

Kent Dodds: And maybe it’s not like it, it might be, it might not be, but it doesn’t actually matter cuz what matters is, did you go?

And so yeah, it does impact the customer’s impression of you.

Sam Brace: Absolutely. And when, and I think what’s also important, like whenever I thought about the Core Web Vitals as well, is that they’re normally done because Google is looking at it from a sense of trying to make the best user experience.

It’s not based upon trying to hit some score that’s arbitrary and doesn’t have significant value to it. They’re looking at to make sure that when we’re saying this has XYZ score to it, or 123 score to it, it’s indicating some factor of quality as overall associated. So I think that’s what [00:16:00] you’ve ultimately done with this overall experience to be able to provide these low quality image placeholders, be able to do the work to make sure the layout shifts aren’t constantly shifting.

To say that you did, to increase the quality. And I think that’s one thing that people should look at from an episode like this, is that if you’re trying to increase the quality of their overall web presence, a lot of the practices you did here who are directly applicable to things they could possibly do for their content as well.

Becky Peltz: Yeah. Yeah. They’re unleashing tons of crawlers on the web and these things need to act fast. And if those crawlers are waiting for images to load before they can figure out what the content is, that’s gonna be a problem for them, too. It works both ways. It’s like machines are sensitive to it as humans.

Sam Brace: So what I wanna jump into, so I’m, what I’m showing here is the blog post that kind of inspired this overall conversation. So if people are [00:17:00] saying, I wanna follow along, you just have to go to the kentcdodds.com and make sure that you’re looking for the “building an awesome image loading experience” post that you put out in late 2021.

But you can see here this video that you created is articulating exactly what you ultimately have as the result of this effort, where it’s making sure that the image has a place, it’s showing a low quality, blurred version of it, and then the full image will eventually come in, and that’s what we’re calling the low quality image placeholder.

Am I correct about that overall summary? Yeah.

Kent Dodds: That’s the basic idea.

Sam Brace: Okay. So looking at this overall situation here, I think the first section that we can see that you’re touching upon is the overall layout shift. As we mentioned, we don’t want it where you have text and it’s jumping to be able to bring in the overall space for the image.

We want it where you have the layouts make, it’s almost static. It’s where things should [00:18:00] be in certain places at certain times. It looks like you were able to do that with Tailwind. Talk to me about this overall plugin that you had here that was helping with the layout shift.

Kent Dodds: Yeah, sure.

The principle is aspect ratio. So you don’t know necessarily how big the image is going to be a lot of the time. But you might know the aspect ratio of the image. So because the, you might say, I want the width to be 90% of the viewport. The viewport could be any number of pixels. But you know the aspect ratio of the width and the height.

And Tailwind actually now supports aspect ratio as a built-in feature of Tailwind. So you don’t have to include a plug-in anymore. But the idea is just using that class name and it’s, I should also say that aspect ratio is a built-in feature of the browser that Tailwind is just using.

But yeah, [00:19:00] so that aspect ratio just will say, “Hey, I know that the image isn’t here yet, but when it is, this is how much space it’s going to take up” relative to how wide it is or whatever. And so then the browser can say, “okay, I’ll just leave that much space for that image”.

And so when the image shows up, it just pops in place and doesn’t have to move anything. So that’s actually a really, even if you’re not doing the nice placeholder or anything like that, that by itself is really useful. It can be kinda tricky if you don’t know what the aspect ratio is going to be.

So if you’re thinking about Instagram and you got pictures that are all sorts of different, you’ve got this grid and there are pictures coming in all over the place that can be tricky. The solution to that really is to just store the aspect ratio as part of the data for the for the images that you’re displaying so that when you server render or when you end up starting to render those images, you can include that because it, there’s really no other way to solve [00:20:00] this particular problem.

That’s precisely what aspect ratio CSS property was created for. And it is definitely better than having pictures pop in place cause even if we’re talking about that sort of grid of photos, you’re gonna have one pop in and then one above it pop in. And so that shifts this one down and they’re, they’ll just be going all over the place.

It just does not feel good. So aspect ratio is the solution to content layout shift for images.

Becky Peltz: And I noticed you linked to the article on setting height and with on images is important. Again, because for a while people went away from that. There was, initially height equals blah, what width equals blah.

And then the browser could figure out the aspect ratio that you were going for. But people stopped doing that. And a lot of it probably because we went from, just a desktop to a mobile and it didn’t really make sense in that respect, but this is a really good point here.

Sam Brace: What it also seems like it’s directly tied to the [00:21:00] next point that you raised here when you’re working on responsive images. Because aspect ratio, of course, is based upon the actual ratio. It has nothing to do with pixel width or pixel height. So when we’re saying we want it to be, let’s say, a three by two aspect ratio that we’re gonna be able to allocate the space for, that’s gonna be three by two for tablet, for desktop, for mobile, or maybe you need it to change, but it’s indicating what it should be based on these different areas.

So I think it’s leading us into the conversation about what you’ve done here with making sure that everything you are doing when it comes to this effort also is tied to responsive design as well.

Kent Dodds: Yeah. So if I’m on a desktop with a huge 5K monitor with this ridiculous resolution, then I can load an image that’s, really high quality and, pixel perfect.

And that’s awesome. The problem is that’s just a ton of pixels, and that’s a [00:22:00] lot, a very big image. And then if I shrink that down to something that I can see on a device and I’m using the exact same image either way. Then I am, basically what the device is doing is throwing away a bunch of pixels that it doesn’t need. It can’t display that many pixels on the device. Anyway, so it’ll look really nice and crisp, but there’s a lot of wasted download there. And the web platform comes in clutch for us again with the sizes and source set attributes on the image tag.

This was something new for me when I was working on my site. I’d never used these properties before. But the basic idea is these are configuration options that say so we’ll start with sizes. It’s a comma separated list of basically you could think of it as a tuple. So you’ve got an array of first the media query that should match and [00:23:00] then the width of the image at that media query.

And I can say for small sizes, then this is how wide the image should be, for bigger sizes, this is how wide and so on. And so I’m going actually in the blog post here, I’m going the opposite direction. Big size, this is how big or how wide the image is gonna be and so forth. I only know that because I know that the CSS that I’ve applied and so I added this later on and I just pulled up my site locally and looked at how wide the image was at different breakpoints, and then just said, here’s the size of the the image or the width that it’s gonna be here.

So then the source set says, here is the URL for when the screen is at this size. So if the screen is this big, then this is the URL to get that sized image. That allows you to really fine tune which image [00:24:00] is loaded for a given screen size which avoids the wasted bytes and ultimately results in a much faster loading experience.

Becky Peltz: Yeah. And with your sizes, because they’re always concerned, really they’re really focusing on width rather than height. You’re gonna see that the size that gets assigned is really based on the width. So you, you have a width of 50, then you’re gonna get 50 and width 30, 30. So feeling that.

Kent Dodds: Okay. Yeah I’m not sure if there’s a way to switch it so that it goes by the height, because if you wanted a horizontally scrolled thing or something, I don’t know, people come up with funny things. I don’t know what the world of VR says about all of this stuff is very width centric or, the way that we build most websites.

But yeah, this works out well for 99% of people.

Becky Peltz: Yeah. Yeah. No, totally.

Sam Brace: So in looking at this, so now scrolling down to the post, you can [00:25:00] see that now that we’ve understand like source and source set that we covered at this point, we can see how this is being done for a blog post like yours, where we’re looking at the overall URLs that are coming from here.

And of course now I’m starting to see Cloudinary and for his first case. So talk to me about what’s ultimately happening in this situation, because I can see that you’re declaring the whiffs as we’ve talked about, but then you’re also doing certain other things that are tied to this overall place that looks to be at least longer in URL compared to what you have for the initial example.

So talk to me about that.

Kent Dodds: Yeah, sure. My Cloudinary URLs, this is one of the things that I just love about Cloudinary, is the capability to transform the images on demand. And what’s cool about this is because I have q_auto and f_auto, this will not only give me well, and then of [00:26:00] course I have that w_ that specifies the width of the image that I want.

But this gives me not only the right size of image, but even the right quality and format based on whatever browser is requesting this image. Which is just awesome because we have a bunch of different formats whether it be a GIF or a PNG or a JPEG or a WebP or AVIF, all sorts of formats that various browsers support.

And it’s impossible for me to know at development time what browser is going to be requesting this, cause it’s literally all of them. And having Cloudinary be able to dynamically serve the proper image at request time is awesome. And it should be noted also that we do still have the regular source, attribute and that I just sent to like the middle between all of these sizes.

So if your browser doesn’t support the source set and sizes [00:27:00] attributes, then sorry, you’re just gonna get like a middle of the road thing here which is probably your experience on the entire web. If your browser is that old, it’s gonna be a pretty poor experience anyway. But but yeah, so I have a bunch of different sizes based off of what made sense for wherever I’m rendering this image.

This one in particular is the header image that I have on my blog.

Sam Brace: And then looking at this so I can see here you have very clear widths that you’ve declared when it comes to this, and as you said, like your source in here is in between the range that you have between 280 and 3,100.

But how are you getting those sizes? Is that just saying double the next one and then going it up? Or is there tools or utilities that you’re using?

Kent Dodds: Yeah, I wish there were tools and utilities and there. There may be now. But when I was writing this I didn’t know of anything, so I literally just pulled up my site, opened up the dev.

And then just [00:28:00] resized it every now and then, and just said that, that looks like a pretty good size. And then I grabbed what that size was and I have the next block of code here is the get image props that accepts what I call an image builder. It’s just a special little function that allows me to generate these URLs, cuz who’s gonna write that URL by hand, not me.

And then I can specify the widths that I care about for this particular image and the sizes, as well as any additional transformations I wanna make. And with that I can very easily just say, here are the different widths that I want to be concerned about for this particular image.

And these are the sizes when those widths matter. And yeah that ends up working out. If you scroll down a little bit further, you can see an example of using that utility. It ends up [00:29:00] being a relatively simple way to to manage this. Though there are some tools that I mentioned at the bottom of the blog post that can make this process even easier.

I’m not sure exactly how they accomplish that, because I feel like every image experience is gonna be actually a little bit different. But yeah, this is what I came up with and it’s been running on my site for quite a while now, and it works great.

Becky Peltz: Yeah, and it’s nice that you’ve codified it because if you decide you wanna change those widths, you just change a few numbers here in your code and you can spin up a whole other set of responsive images.

Kent Dodds: Yeah, mhmm.

Marker

Sam Brace: Now, one thing that, I saw a comment just come through here and saying “this approach would work potentially amazing for videos too”. Based on your experience, do you feel like that’s correct, or do you feel like there’s any caveats to that statement?

Kent Dodds: Yeah, I actually I’m guessing I haven’t looked in this, but I’m guessing that videos also [00:30:00] have a source set.

And sizes props. I can’t imagine why they wouldn’t. And Cloudinary also has support for on demand video as well. So I can’t imagine why you wouldn’t use this for that. I don’t have a lot of use cases for video on my site. Normally I just embed a YouTube or something like that.

Cuz yeah, I just don’t do it enough. But yeah, it sounds like that would be a pretty good solution for that as well.

Sam Brace: Excellent. And yeah and shout out to the community for being able to address things like this as we’re be going through this overall process too. So it seems like some of this was inspired, I know you mentioned Gatsby earlier, but also this was inspired by what Unsplash has been doing with your placeholder process. Talk to me about this and maybe what did you extrapolate from what Unsplash is doing to be able to keep going down this process with your own blog?

Kent Dodds: Yeah, sure. Unsplash [00:31:00] is like probably the pinnacle of image display on the web.

Like they, they do just a silly amount of work on displaying images. And so when I moved away from using Gatsby and I still wanted to have this nice load loading experience I tried to figure out, okay, so how do I have a nice placeholder that I used to have with Gasby and I thought about the SVG thing.

But SVGs sometimes look really funny. They do not. I mean they’re very small and that’s quite nice. And they, server render fine which is also nice, but yeah, the images can sometimes or the placeholder can sometimes look very odd. And so I I’ve seen Unsplash and Medium and others will have this placeholder that’s just like a blurred version of the image. And what I discovered as I was reverse [00:32:00] engineering what they were doing, I would look at what was server rendered, and it turns out they server render the primary color of the image. So they do some pre-processing of the image, determine what the primary color is. And then they also and that’s what ends up being so server-rendered.

Then another thing that they do, they pre-process the image to create what’s called a blur hash. And this is actually, it’s an open source thing. You can go grab it yourself with the blur hash is like 30 characters max of just random, seemingly random characters that somehow, it just is magic to me.

But they somehow represent a blurred version of the image. It’s like total magic. I don’t understand how this works.

Becky Peltz: Base64, a Base64 version of a blurry image that they can move in quickly, but it has to be a small string .

Kent Dodds: Yeah. It’s actually, it’s not even a base 64, because they’re using characters that are not [00:33:00] base 64 characters.

Some cool algorithm that somebody figured out. And what they do though is they feed this into a canvas and then the canvas can draw out the image based on that that blur hash. So what’s interesting though, or unfortunate is that canvas doesn’t server render. There are probably people doing some mad scientist stuff to make canvas sort of server render in some ways.

But yeah, that, that’s just not a thing. There’s no server rendering of canvas. And so that’s why they have their three-step process of first server render the primary color, and then show the blurred version with blur hash and then the final image loads. Now, this is actually not a big problem for oh, and the other thing is the blur hash library is not small.

It’s not huge, but it’s not small either. So that’s another thing to consider when we’re talking about making things fast and load as little [00:34:00] JavaScript as possible and all that. This isn’t a big problem for Unsplash because lots of the time, people will show up to the site and then they’ll click on images.

And if they’ve already got everything loaded, then we’re not server rendering those images anymore. Now we’re rendering them on the client side. So you actually will not see the full primary color displayed like we see here when you’re on Unsplash, because you typically are, you go to unsplash.com and then you click on an image and you, they already have the blur hash right there, so they don’t have to server or render the the primary color.

So for me though, lots of times people just land on my blog post. In fact, most of the time they do. So I didn’t want to have this three step process where we’re displaying the primary color first, cuz it just, it felt wasteful and a lot of the time the people wouldn’t even see the blurred version anyway, cuz Cloudinary’s CDN is very fast and so we’re gonna get the image anyway.

And so having that three steps just didn’t make any sense [00:35:00] to me. Yeah, that was honestly just a fun learning experience. I didn’t actually use any of their techniques myself because I didn’t want to to do the canvas approach or the primary color thing.

Sam Brace: One question I have about the primary color thing.

So if I go back up to the overall script that we’re showing you here, and you can see that we have these transformations and you have the background call on this case, is that the primary color coming through in that situation?

Kent Dodds: Yeah, that’s a great question. So I think that is just for transparent images.

Like I have a couple blog posts that have a transparent background and I decided at some point that they just look funny, to be transparent. And so I can’t remember what color that is. But it was just like a good background color that’s generally use or good for anything that has a transparent background.

No there’s no I’m not like determining what the primary color is and [00:36:00] putting it in there. That’s hard coded.

Sam Brace: No, but I still like this approach though. Cause it’s a flat color. It’s showing this is where something should be. So it may, it makes sense why you would do this type of a transformation.

So it may not be exactly like what we saw with Unsplash, but it is showing similar purpose.

So moving on to you. So now we’ve gone through the overall process here of talking about what you’ve gone and done and we can break down some of this, but we’ve touched upon Base 64 encoding. For those that aren’t fully aware of what we even mean when we say something like that.

What is Base 64 encoding and why would you even wanna do something like that?

Kent Dodds: Yeah base 64 encoding is just a way to represent binary data as a string. And like in, in particular as like a string that’s using characters that we recognize. But the particular [00:37:00] nicety of base 64 is that it can be used as the source attribute for an image element.

It can actually be used as a source attribute for a lot of things. There’s another place on my website, it’s the Call Kent podcast where you can actually record yourself asking a question and that will save to my database. And then I record my response later, and then that turns into a podcast episode.

It’s actually very cool. And I use Base64 encoding to set the source attribute of an audio tag so I can preview what they’ve recorded and stuff. So you can use Base64 to encode just about anything into what is a readable string and it’s not necessarily really small.

But interestingly, that that audio file that I create when people record themselves in the Call Kent podcast, I tried saving it to my database as binary, and I then I tried saving it to my database as Base64 and Base64 [00:38:00] was smaller. So I probably did something wrong, but I was, because I was very surprised by that.

But that’s how it’s saved in my database today is I’ll save it as Base64. With that the binary data that I want to turn into Base64 is a blurred version of the image, my placeholder. I want to turn that into Base64. And the reason that I wanna do that is so that I can render my blog post with that Base64 hard coded as the source attribute so that the browser doesn’t have to actually make any request to display that placeholder image.

And yeah, that’s the entire reason that we’re doing Base64 at all. Because if I what’s cool with Cloudinary is I can just say, “Hey, give me an image that has a width of a hundred and give it the effect of a blur of a thousand”, whatever that unit means. I don’t know what it means. I tried a bunch of numbers and that worked.

Becky Peltz: Best way to figure it out.

Kent Dodds: Yeah, exactly. And then and I [00:39:00] also specified the format as WebP, just because this is my server doing it. So I can’t rely on whatever browsers are requesting this. Anyway, I make a fetch request on the server at runtime to this, that gives me back the image data, which I then encode with Base64 and then set as the source property of my image as the background of the image that’s going to be loaded later.

So the drawback of using Base64 versus the blur hash is Base64 is 10 times bigger. In, practice it’s 10 times bigger of, a couple characters is actually not a whole lot. Like you look at the size of this blog post, it’s, it’s just a little drop in the bucket, but it still is not the best.

And so I wish I could avoid this. But for the use cases that I have, it’s definitely the best option.

Becky Peltz: It’s just like a lot of [00:40:00] channels on the web only can deal with text, if you want to put an image in a email or something, sometimes it has to be Base64 encoded.

Kent Dodds: Yeah. They don’t want to load remote stuff

Becky Peltz: Yeah.

Kent Dodds: But this wasn’t the end of everything because one thing I noticed was, and you scrolled to it for a second there. The blurred image looked really bad, like very pixelated, because what I did was I took it only a hundred pixels, so it was a hundred width. So not a hundred pixels, but it was width of a hundred.

And then blurred that, and then I upscaled it to 10x, a thousand pixels width. And so that just made it look, even though it’s blurry, it looked pixelated, just didn’t look very good. And luckily there is an awesome filter that you can apply to a div. So I put a div on top of, positioned absolutely on top of this image where the backdrop [00:41:00] filter to set a blur.

And then so I blur it from Cloudinary and then I blur it further from the browser to give it.

Becky Peltz: You have a tiny blur. You expand it and then you make the browser blur it. So that’s.

Kent Dodds: Yeah. Yeah, exactly.

And I actually, now that I say that I didn’t think about just saying, “Hey, Cloudinary, give me a small image and then I’ll just have the browser blur that myself”.

But maybe I could have tried that. But it’s working now, so why bother?

Sam Brace: And that’s one way we look at it is it’s like not everything always has to be a hundred percent Cloudinary. It’s where with CSS, other things you can come up with amazing results. And this is a proof of that. So we’re a piece of the pie.

We’re not the only pie that’s there. So that’s good.

Kent Dodds: Now I want pie.

Sam Brace: You can see the immediate difference here too. Like you’re, you can see like the rings of this are very distinct. It’s, it almost has a muddy look to it with the amount of moving you’re seeing there. And then when you did the work that you did, everything’s [00:42:00] smooth.

It’s very hard to tell even from the background what I’m looking at here. Which is the point of blur. So it’s a good, it’s very good what you did.

Kent Dodds: Yep. That, was actually that, that worked out really well. But it still wasn’t quite what I wanted because what I was looking for was you have the blurred image and then it fades into the finished image.

And what we had at this point was you have the blurred image and then when the actual image loads, it just takes its place. And that doesn’t look too bad. It’s fine, but I wanted it to fade into place. This is tricky because there’s no API in the browser from HTML that says, “Hey, apply this class when it’s ready to go”.

Of course, there’s a JavaScript way to do that, but there’s no HTML way to say, “on load, do this thing”. And what I had to do was I, and of course [00:43:00] like already we’ve gotten a couple of things in here that I’m like, yeah, I definitely want turn this into a component so I don’t have to do this all over the place.

So I made this blurrable image component, and so the code that we’re looking at now is an example of that blurrable image component. Where you passed the Base64 URL. That’s the blur data URL that we see as the prop there. We have our aspect ratios there as well. And then we have our image, the element, that you’re supposed to be rendering here and there’s the get image props there as well for doing our different sizes and all of that stuff.

So the actual implementation of the blurrable image component is a little bit further down, and this does some pretty interesting things.

Becky Peltz: Yeah.

Kent Dodds: Yeah. Sorry. Did you have a question about the usage though?

Becky Peltz: No, I just said this is cool. I [00:44:00] like how you did this.

Kent Dodds: Yeah. So the blurrable image component it takes that image, it takes the blur data URL, and then the rest of the props that it takes are just whatever else you can apply to in an image element. We’ll just pass those along. And so what we have to do in JavaScript because we, there’s no HTML way to do this as we have to maintain some state to say whether or not the image the final loaded image is visible.

And then I use that visible value to determine what class names should be applied. So this is all React’s nice and declarative model where we can re-render, and now the, here are the class names that it should be now. So you’ll notice on line 33, I’m cloning the image element that they gave me.

So , we have the react element that’s the image element that they created. I’m actually going to not render that directly and instead create a new one that’s a copy of that. That I have a reference to that’s the ref prop there. [00:45:00] And then I have a class name that’s going to be all the classes that they provided.

Plus I want to transition the opacity so I can animate that. So I can transition in and then I set the opacity to zero if it’s not yet visible. And then we’ll get to that use effect here in a second. But then where I render, I need to render the div. I’m gonna put all of the the rest of the props on that.

So I guess those that rest is not the image element, it’s the div element props. So yeah, I, I render a div around all of this to keep them together. If there is a blur data URL honestly, I shouldn’t make it so you can render one of these without that, because why would you use this component if you didn’t have a blur data URL?

But if that does exist, then I will render the blur image. So that is the source is the Base64. The class name is gonna have the same [00:46:00] class name as the image that you’re providing, so it has the same sizes and everything. And then the alt text because we care about screen readers.

And then we have that backdrop blur you URL to give it a smooth blur. And then next to that we render our JS image L and then the no script image there. So in case the, this is very rare but if somebody has disabled JavaScript on my site, I still want them to be able to see the images. And so we’ll just render the image as it is and it will work.

And I’ve tested that. That works. And so yeah that’s the basics. Now the trick is how do we know when we should remove that opacity zero class name? And so that’s what the use effect is for. If you go a little bit above, like in the middle of the blur image component, there’s this use effect where we say first we do some early returns, like if the ImgElRef, if we don’t have a current [00:47:00] DOM Node of that image, then that’s unexpected. We’ll just return that, that will never happen. But, I mean it could, and we don’t want bad things to happen if it does. So I guess and then the jsImgElRef.current.Complete. That .current is just a DOM Node reference to the image element.

And so .complete is a property on an image element that says whether or not that image is finished loading. So if we have finished loading, then we’re just gonna return. We’re all done. We’ve done this before, it’s fine. And it then we say add event listener on that image element, Load.

So when that load has finished, then we’re going to set visible and we’re putting that inside of a set timeout for a good reason that I can’t remember, and I probably should have wrote a code comment to explain why we’re doing that. I remember putting it there. I just don’t remember why I did it.

Just putting it on the next ticket to the event [00:48:00] loop for some reason. I just can’t recall why that was necessary. So anyway, that, that’s a basic idea. We’re fundamentally we’re just saying when this image has finished loading, then let’s set it to visible so that it will fade in. So it’s actually a lot of work just for the simple fact that I wanted to be able to have it fade in rather than just magically appear.

And that the bulk of this component is for that particular feature, we could probably remove everything from line 14 to line 41 if I didn’t care about that. Yeah.

Becky Peltz: When you do have timing considerations here cuz you’re rendering really two images. You’ve got your blurrable image and then you, in the background, the other, the real image is loading and you need to know when it’s done before you can do your transition. So you do, you are working with some things that you have to think about there.

Kent Dodds: Yeah. Now what’s kinda interesting about this is I ran [00:49:00] into some problems. First of all, it makes me a little uncomfortable that I require JavaScript for my images to be seen. So if we have to wait until the JavaScript shows up before we can actually get that opacity zero class off, cuz we, we render that opacity zero class on the server.

So you will not see this image until React does its thing and I can say, okay, re-render without that class name. That makes me feel uncomfortable. And it actually played out in in production where I had some sort of error with my site where the JavaScript errored out. And so this code never ran, and so people could only see the blurred image only the stuff that was sever rendered.

And the no script stuff on line 54 doesn’t work in that case because scripts are available, they’re just, they failed to run. And so I don’t really like that too much. And I just moved [00:50:00] on and it was fine. And this only happened once and so it wasn’t a really big deal.

But it does make me feel uncomfortable that I have to wait for JavaScript to load and then be parsed and then executed before we can actually remove that visible zero or opacity zero class name. Yeah, that’s just unfortunate because the image could actually have finished loading before the JavaScript has even been loaded itself.

And so we’re showing a blurred. A blurred placeholder when we could just be showing the full image and that would be a lot better. On top of that, if the browser has already cashed the image and you just go up and hit refresh on the page you’re going to see the blurred image until the JavaScript is evaluated and stuff.

Where, what I would prefer is that you don’t see a blurred image. So what our status quo is now is you always see a blurred image and you’ll see a flash of blurred state and then you’ll see the [00:51:00] full image. And I would much rather say if the image is in the browser cache, it should just instantly show, I don’t even care about showing a placeholder.

And so I left it this way for a long time and then like two months ago, you all reached out to me and said, “Hey, we want to talk about this cool blog post”, and in the back of my mind I’m thinking, “Oh shoot, there’s that one thing I don’t like about this”. Two days ago, two days ago, right before we did this, I spent a little bit of time investigating.

This this loading experience to make it a little bit better. And so that’s the next section here is fading faster. Yeah, I said, and really that’s it. That was how I ended my blog post before. And then I added, except now that it’s 2023, I decided to improve one more thing, and that’s to make it fade faster, to solve this problem of what if the JavaScript fails to load?

What if something goes wrong? And the fact is because html doesn’t support any mechanism for updating or for saying, I want to fade this image [00:52:00] in. We have to do it in JavaScript. But, I don’t want to tie all of this logic into that particular bunch of JavaScript that happens within the react hydration and all of that.

I would a rather just have a little bit of JavaScript because it’s really not a lot that says when this load thing happens, just remove that class. And so that’s exactly what I do in theory, this is as easy as it should be, is you just add an on loan prop. I realize there are a lot of people who are looking at me right now and saying, “you’re doing inline JavaScript, you’re a joke”.

“That’s even worse than inline styles”. And it is. This is the quintessential, like perfect use case for something like this. It’s the simplest amount of JavaScript I can imagine for for this type of use case. I could also do render another script [00:53:00] element that does the same thing, but I don’t know, look at line 5.

That’s easy. There’s nothing complicated about this. Unfortunately, there is something complicated about this because React does not like inline JavaScript like this and it will not render it will not render these prompts and instead it will give you an error that says you need to use the on load prop with an actual function.

And so that is annoying. That’s really unfortunate.

Becky Peltz: There’s nowhere.

Kent Dodds: Cause now I’m like right back into the React thing and I have to wait for all of React to hydrate and all of that. So, I did a fair bit of work to make this this work. That is a little involved and I don’t think it’s necessary for you to dive in.

You can look into the commit that I linked to a little bit below to dive into how I made this work cause it is kind of complicated. But at the end of the day, I was able to make a really awesome experience where if you’re on the page and you hit refresh, [00:54:00] so the image is already in your cache, you do not see a flash of loading state.

And it just it instantly just shows the image. And I think that is a much better user experience. Yeah, you, if you click on that, yeah, you can see on the left side it’s flashing. Each one of them is hitting the refresh button at the exact same time. But the left side is flashing the blur state and the right side, you don’t see anything like that, so much better experience. Some people actually comment on this and they say, “I actually like seeing the blur state, cause it shows me that it refreshed.” And I’m thinking “You’ve been conditioned, my friend. That’s wrong. You don’t like it. You don’t like it.” So anyway, there you go. That’s how I did nice placeholder and an awesome loading experience on my website.

Becky Peltz: Yeah.

Sam Brace: Amazing.

Becky Peltz: It’s so interesting how there’s such a battle with wanting to use JavaScript to help you make things work, but then JavaScript takes long to [00:55:00] load, so for performance reasons you don’t wanna use it. Yeah. It’s kinda like you’re torn.

Sam Brace: So, a couple questions for you, Kent, about this overall thing. So, obviously we’re using React for a lot of the things that we’re showing in this case, but could you take similar concepts that we did here or maybe identical concepts and apply it to other frameworks, let’s say Vue or Angular other things, or is this like where unless you’re using React, this is impossible.

Kent Dodds: Yeah, that’s a good question. There’s nothing in here that I’m doing that is exclusive to React. This is all web platform stuff. Arguably it might even be easier in other frameworks because of that on load thing that I was talking about.

React just really, doesn’t want you to do that. Like I said, I could do an inline script or a script tag that does the same thing and that maybe I’ll switch to that. Because you can’t actually the content security policy doesn’t work very well with inline scripts JavaScript or attribute scripts.

Which, [00:56:00] yeah, so I should probably change it for that reason. But yeah, actually at the bottom of the post there, I have that little Ps there’s this unpic image component that is a framework agnostic implementation, very similar to what I’m doing. They actually don’t do a Base64 and instead use CSS gradients to accomplish a blurred version of the image.

It’s very interesting and they have implementations in all sorts of different frameworks. They also support a lot of different image CDNs, including Cloudinary and others. Look, I wish this existed when I was building mine, but now I have this cool blog post where I can explain how it works.

Becky Peltz: Yeah, no it’s just a neat, watching you come up with a solution in this, and I’ll just share too, that like the Cloudinary React SDK does have a placeholder plugin that you as it kind of starts out blurry and it turns [00:57:00] full resolution while you’re watching it. But again, you’re loading somewhere JavaScript to make that happen.

Sam Brace: And I, I actually love the shout out you’re doing for the unpic side of things because I can look at just the contributor to list here, and there’s some really awesome people that are tied to this. Looking at Zach, who’s tied to Eleventy here, our friend Elad who’s tied to Stackbit, like there’s a lot of good minds that are putting contributions into this particular thing.

I agree it’s a great place to be able to start handling multi framework imagery and responsive aspects of it. So it’s great. So, one question that did come up in the community that I wanna address here, because a lot of things that we covered here, of course they’re, in my opinion, I would say advanced topics.

You’re doing things where you’re almost like optimizing what’s already been optimized with some of the things that you’ve gone through, this process stuff. But, let’s say that I’m a fairly new JavaScript developer or someone thats new to web development, [00:58:00] where would I be going to learn how to do more of these things? And I’m not trying to give you a softball like, “Hey, queue up Epic or React and all the great work you’re doing there.” But please do. But in the same sense, like where, is there any spaces where people can be getting to better understand what’s happening with the web, particularly with JavaScript development that you’ve come across that have been helpful?

Kent Dodds: Yeah, I have a blog post about experience and getting experience as a web developer, cause this is a very common question, how do I get better? And the answer sounds pretty obvious. You get experience by having experiences. You really just have to you, you can spend all day on Twitter. You can spend time on YouTube watching videos. You can spend, buy a really great course like Epic React when Epic Web comes out, Epic Web. And that’s all good. You should be doing those things some of those things. [00:59:00] But really you don’t get experience until you have those experiences.

I strongly advise just spending a ton of time working on actually building stuff. And subscribing to newsletters is good for keeping up. I’ve got a really great Discord community that you can come in and keep up with what’s going on in there. Staying involved on Twitter and stuff, that’s also really good.

To be involved in that. So all of these things are useful to give you a sense of what’s going on in the ecosystem. But then you have to take that and actually build something.

Sam Brace: A hundred percent, and I’ll plug your Discord community. I’ve become a recent member of it myself, and I think it’s a great place to be hearing about these conversations, but to further your point, it’s where if you hear something that kind of tickles your brain and you’re like, oh, I wanna learn more about this, then yeah, do your job to learn about it, [01:00:00] but then get your hands dirty and get into it.

And that’s the only way that you’re gonna be able to grow, in my opinion as a developer. You, you have to if you always say good writers write a lot, the same thing, good coders code a lot. And it doesn’t mean that every line you write is gonna be beautiful, but sometimes it will be, and it all comes experience.

Becky Peltz: I think its sort of like any kind of like an athletic event, if you wanna be prepared for it, or if you wanna prepare for it, you just have to do a lot of it, it sounds like every day you have to dedicate time to massaging that and building it up.

Sam Brace: Excellent, Kent. I’m inspired and I, and of course we’ve already shown the blog post extensively to all the places that people can understand what’s happened and be there. I’ll also point out in, gimme a little bit more detail there too, but you have a GitHub repository that is focused on just the overall blog presence that you have here, and I’m sure that a lot of the things that you have that you’re showing here [01:01:00] are available through this overall repo. But what, like, why did you ultimately decide to expose everything you have for your website in this repo?

Kent Dodds: It’s easier. Yeah. So my, my content is actually inside of the website itself. So there’s the content directory and that’s all my pages, all of my blog posts, everything is in there. And I do that because the, it’s just a lot easier to manage the contributions when I have like typos and stuff, people contribute I have hundreds of contributors to my blog posts through that mechanism. And then my, having my site open source just makes it a lot easier for me to answer people’s questions. They’ll say, how do you do this? And I’ll just say, here’s the file where I do that.

And so yeah, the entire site is open source and it I’ll I’ll also mention that my website is not your typical developer portfolio. And if what you’re [01:02:00] building as a developer portfolio, do not use my website as a template because it is way over scoped for what you’re trying to do.

And that scope brings along a lot more complexity than you need for your site. So start use somebody else’s because I’ve got three SaaS products that I or three things that I could turn into SaaS products on my website. That you definitely don’t need on yours.

Sam Brace: Completely fair. And it, it’s good to get people of those caveats. I completely agree. And I think we’ve also one thing I always ask before we end one of these conversations, Kent, is where people should be going for more information. I think we’ve made it pretty clear, kentcdodds.com is your main portal for all things that are tied to you.

But is there any other places where you find that you’re more active? Are you more on Twitter or LinkedIn or other places? Or if you wanna get like the the latest that’s coming from you? [01:03:00]

Kent Dodds: Yeah. I’m most active on Twitter and I always share stuff to the Discord community. They typically get the exciting stuff first.

And then the, my mailing list that you can find, just kentcdodds.com, scroll down to the bottom you can or just sign up for an account there and you’ll be put on the mailing list as well. But yeah I’m doing remote workshops and stuff like that I, yeah, I recommend yeah your signed up looks like, cause you, you signed in, but yeah, so that, that little image on the right there turns into a form if you’re not signed in.

Okay. So yeah, the, that’s probably the mailing list is the best way to not miss anything, for sure.

Sam Brace: Excellent. Kent, once again, I’m inspired even past what I read of the blog post, getting to hear your introspective review of how you [01:04:00] got done, what you got done, and also getting the business case of it.

So, keep up the good work, Kent. Obviously there’s lots of people that are tied to the communities and the work that you’re doing, but we love what you’re doing here at Cloudinary, so keep it up.

Kent Dodds: Thanks a lot. I appreciate that.

Sam Brace: Excellent. So Becky, I had wanted to ask you.

Becky Peltz: Yes?

Sam Brace: What is our big takeaway from this? There’s a lot of things that are bubbling up my mind by what’s yours.

Becky Peltz: I think that Cloudinary needs to create an e_kentdodds effect. So we don’t have so much JavaScript. His process is just wonderful. And I think the effect is something that anybody could appreciate. And he does use one of our effects, the blur effect. But then he has that little bit of magic in it that gives you something before, and then it transitions into it. Yeah it’s definitely something if you’re putting images on your site, think about something like this or [01:05:00] use this.

Sam Brace: Yeah. It’s one of the things that we’ve seen other great guests talk about some similar stuff, like when we had Brad Garropy on, he was talking about cumulative layout shift and being able to understand it.

But it’s where this is kind of taking what Brad did which was kind of creating a simple placeholder for it and really doing a lot with it. Being able to tie in the blur effects and then being inspired for the different places on how we can maybe incorporate background colors as we saw so, and being able to evaluate what is the right choice for your overall presence.

But it is to say that the more you can create an optimal experience for the visitor or the user or the person that’s diving into your content as Kent showed, you can really do it in a really fun way and make sure it also helps out your presence from how search engines and others see.

Becky Peltz: Yeah, and I think too, like just the idea he got inspired by what he saw on Unsplash, that you could see something on the web that you like and you can [01:06:00] actually take it, tweak it, write your own code for it and make it even better, so it’s great to, to be aware of that inspiration out there.

Sam Brace: I completely agree. And talking about further inspiration, Becky, we have future and past episodes. They’ll always be at cloudinary.com/podcasts. So if you took something away from a conversation that me and Becky just had with Kent, please make sure that you’re checking out other episodes that are happening to be in the space.

And of course, those episodes are gonna be on all the places where you typically will like and subscribe to podcast content such as YouTube, the Cloudinary Academy, Spotify, Apple Podcasts, Google Podcasts. There’s so many out there, but it’s where we do have hopefully our presence in those different places, wherever you like to consume content.

And similarly, I recommend continuing the conversations about this overall content in the Cloudinary community. That’s gonna be at community.cloudinary.com [01:07:00] and as you can see, when we take a look at this, this is going to be where you have lots of forum based tools, but also if you’re an active Discord user, we do have a lot of members of the community that are also having more real time conversations in that space.

And so if you’re a forums person, if you’re a Discord person, if you’re both, it gives you options to be able to continue the conversations about what you’ve just heard about in our conversation with Kent and have that possibly affecting the way that you’re building out your next software development project.

Becky, before we let everybody go, any final words, any final thoughts?

Becky Peltz: Yeah, I just, it’s amazing what’s going on in the community and to meet somebody like Kent Dodds who is so involved and in into so many things. I think I’m thinking, I’m gonna go sign up for his newsletter, let’s just say.

Sam Brace: Becky, thanks for being a part of this as always. And thank you, all of you that are listening and watching this DevJams episode on behalf [01:08:00] of everybody at Cloudinary, thank you, and we hope to see you at the next DevJams episode, and where we’re we gonna profile another developer that is building inspiring, innovative, exciting projects, and of course using Cloudinary for an aspect of it. Take care everybody. We’ll see you soon.

Sam Brace: [00:00:00] Hey there everybody. My name is Sam Brace and I am the Director of Customer Education for Cloudinary, and you are about to watch and listen to DevJams.

For all of you that are coming in, thank you for being a part of this amazing episode where we’re gonna be talking with Joel Turner about some of the awesome work that he has done to incorporate Instagram to develop a project that’s allowing to bring in the illustrations that he’s sharing through that social media service and using Cloudinary to be able to do so because on Dev Jams, we’re featuring developers like Joel and many others who are developing, inspiring, innovative, interesting projects that happen to use Cloudinary in some way and of course, our overall development projects. So we’re gonna be talking about all things API, SDK, and overall code related concepts.[00:01:00]

So, with every one of these episodes is Becky Peltz, and she is the overall curriculum development manager, program manager at Cloudinary. When it comes to developer education, we’re always having her on these episodes, and it’s always a pleasure because of the wealth of development experience that she brings to these conversations.

Becky, wonderful to have you here once again.

Becky Peltz: Hey, thank you, Sam. It’s great being here.

Sam Brace: So tell me why are we excited to talk to Joel here today?

Becky Peltz: You know what I really notice about this project and this whole discussion that we’re gonna have is we all interact with websites that have images, especially like social media.

And in this case will be Instagram. And what I like is that you can simplify your interaction with the images, video, whatever type of digital media that you’re working with. By moving it to Cloudinary and that’s what I think we’re gonna see here because [00:02:00] Joel is able to pull his images out of Instagram into Cloudinary and then moving it around in different stacks and different formulations.

He has simplified his work. So it’s a neat little story. I really hope we can share the code and everything that he’s done for that.

Sam Brace: I agree. I think one thing that’s very cool about the way that he’s gone about this is that he’s made this social media service, which of course he’s used for many different purposes, and kind of almost turned it into his CMS for all things illustration related and being able to be able to not just be solely reliant on the Instagram APIs.

That way you can involve the content delivery networks and all the various things when it comes to web-based delivery and caching that Cloudinary can provide. It creates this really nice, stable way to make sure his illustrations are shown without any hiccups or issues. So it’s an exciting time.

Becky Peltz: Yeah. Yeah. No, it’s exactly very well said. [00:03:00] Thanks. Yeah.

Sam Brace: So before we jump on over to Joel, what I do wanna make sure for, because this may be your first time going through DevJams here with Becky and myself and the Cloudinary team, but always know that all of our past episodes are gonna be located at Cloudinary.com/podcasts, and that’s where you can see that all podcasts that our team has developed for the DevJams program, as well as our sister program, MX Matters, where we talk about thought leadership when it comes to what they call the visual economy, that’s where you can see all of the various episodes. And then of course, if you are a listener or a watcher of podcasts on other services such as: YouTube, Spotify, Apple Podcasts, Google Podcasts, and wherever else we’re probably there too. And on top of that, also at our Cloudinary Academy, which is where all training things take place. Know that if you are saying, wow, this was a [00:04:00] good episode. I would love to do more of these or be part of more of these, know that you can always do all of that there.

And just to point out, we do have an excellent and vibrant Cloudinary community for users like you. So if you are inspired by some of the conversations that me and Becky and Joel are about to have, know that you can always continue those conversations here at community.cloudinary.com so without further ado, let’s bring in our friend Joel and start talking a little bit about this amazing project that he has gone and developed. Joel, welcome to the program.

Joel Turner: Hello. Thanks for having me on.

Sam Brace: So tell us a little bit about yourself and how you got to the space that you’re in today. Where, as we’ve pointed out, you’re using Instagram, you’re an illustrator, you’re combining these two things together. But even before that, how did you get into the overall development space?

All things that I’m very interested to learn about.

Joel Turner: Yeah. I studied graphic design in college and [00:05:00] that kind of morphed into working on websites as, as soon as people know you have some sort of design, they tends to be design everything. So I spent a couple years just tearing apart websites and trying to figure it all out and got into html and css pretty solidly.

And then yeah, that just morphed into more of a technical role with companies where I was the IT webmaster, graphic designer, all that. And that kicked some of my design sense down a little bit I guess I was spending so much time in front of the screen and wanting a break from that.

So I started drawing every day and sharing those on Instagram and knowing that, they’re [00:06:00] gonna be bad at first, but hopefully I would progress in public and got a couple years of drawings.

Becky Peltz: Yeah, and the drawings are wonderful.

Joel Turner: Oh, thank you.

Becky Peltz: If we don’t see ’em right away, we’ll definitely be taking a look at them and I just so appreciate the fact that you have the attitude of, I don’t care if it’s not a perfect drawing, I’m gonna get it out there, it’s gonna be put online, it’s gonna be cataloged as we’ll see. Yeah, it’s a very good approach.

Sam Brace: So Joel what led you to starting to say, cause I, I love the idea of learning in public or doing things in public, as you’re pointing out. It’s a great way to get instant responses, but it also encourages you to keep going through the practice. But what got you to say, I wanna post this content on Instagram? What was that turning point? [00:07:00]

Joel Turner: I think I, I was seeing a lot of hand letters on, at the time, this was 2015, I think 2014, 2015. And the community around hand lettering was so supportive and beautiful. So I thought, may, maybe this is a safe place to, to start exploring this. And sure enough, everyone was so supportive and warm and we just all bounced everything back together. And I think I got to an emotional point where I just wanted to do something in public that was different than my normal day to day and try to get rid of all the fear and anxiety around shipping something. And there was a lot.

Becky Peltz: Yeah. I’d say it’s a critical public, that’s for sure. And even putting anything on social media [00:08:00] you’re putting yourself at risk, but I, one thing about Instagram that I’ve always appreciated is that it’s, it is a visual, more visual medium. Visual social media, you’re not sharing links, you’re not making little, snide remarks. You’re saying, “Hey, take a look at this.” So I think that’s a great place to share.

Sam Brace: So then looking at this, and I feel like I’m gonna bring up your screen here so people can understand some of this, because now that we can see that you’re doing all of this amazing work with hand lettering, you’ve got great illustrations taking place. You were taking this content, you were ultimately bringing it also to your personal web space. But then, because of that, it sounds like there was some type of pain point or maybe some type of issue with getting the content from Instagram to the Joel Turner personal space. Can you talk to me a little bit about that?

Joel Turner: Yeah. There, there came a point where I wanted to share some of my, what I thought were my better pieces in, in one [00:09:00] collected area. And at the time I was still on WordPress and found a couple of WordPress plugin dealt with Instagram, but it wasn’t quite what I wanted. I couldn’t narrow it down very specifically. And then Gatsby came along and shifted my whole mental model of what could be a source for a website. And that, that’s one of the idea of using Instagram as a CMS by adding hashtags to all of these posts like these that are up. I’ll have a JMT underscore featured hashtag on ’em. That way I can search my user and those hashtags and get that whole list. And Gatsby worked really well with that sort of system.

Sam Brace: And to be clear, so you’re adding those hashtags like let’s say in the description of the [00:10:00] post, and then it’s able to extract that from.

Joel Turner: Yeah, and there was a limitation on Instagram, which we can go into it later, but they, for a while, they wouldn’t allow you to edit your original description, I guess for the post. So I would have to add those hashtags later on in the comments.

Becky Peltz: There is always really around.

Joel Turner: Yeah. So when I’m pulling from them, I have to look through multiple comments as well.

Sam Brace: Got it. Okay. Okay, so I’m starting to understand the workflows. So Joel draws something fantastic.

He documents it in Instagram, makes sure that there’s a certain hashtag that’s been applied there for tagging purposes. So then, now that you’ve applied the tag, it sounds like then that’s acting as a signal to whatever service that you need to be able to display it onto the website. And I know you just mentioned Gatsby, so is that what’s happening there?

Is Gatsby involved in that [00:11:00] process?

Joel Turner: It originally it was, yeah, there was a, there’s a plugin from one of the community members called Gatsby Source Instagram that pulled all that pretty much anything from your user in, and then added a little feature to that to also filter down on hashtags and let those.

Becky Peltz: So I’m gonna call out a little bit there about Gatsby Source, because you’ll see if you go out to Gatsby and Gatsby, if anyone’s not familiar as, a static site generator for producing websites. And it’s now been purchased by Netlify, but always deployable there. But the thing, the Gatsby source is something that they created to allow you to go in, to basically

API your way into many different sources, but then get it into that GraphQL Gatsby data layer. [00:12:00] So is, and so that’s if you go out, Gatsby source, Contentful Gatsby source, all these different things. So you found one that was for Instagram and that was your starting point to getting into Gatsby.

Joel Turner: Yeah, exactly. And that exact plugin didn’t quite support the hashtag feature. So that, that little bit I added to the plugin and then that shows up in your Gatsby, GraphQL as all the hashtags, an array of hashtags that are on that Instagram post.

Becky Peltz: And that was kind of like, was that your first step into open source, of submitting PRs and working with developers like that?

Joel Turner: Yeah. I had done a minor one before that was just, one character change, but this was like the [00:13:00] first actual feature and a little bit of a complex one. I wouldn’t say people were clamoring for this feature. It was…

Becky Peltz: I don’t think anybody realized you could tag Instagram. Kinda like we have tagging and Cloudinary, for to help us manage. But to be able to tag your Instagram using a hashtag is a really great idea.

Joel Turner: Yeah, ended up working out really well and actually Cloudinary’s ability to use tags was a major part of my decision to use Cloudinary. The one API that I wanna pull from for my site.

Sam Brace: Yeah, that’s what I’m looking for here.

Cause I like that’s the big connection that I might be missing. Cause like I understand that you have this flow. To me it seems like it’s almost that would work perfectly. Like you’re querying Instagram. You’re getting all the data you need, you’re getting a place to do [00:14:00] it.

Where did Cloudinary come into the process? Why did you decide that we were part of the, when I say we Cloudinary why were we part of the process?

Joel Turner: Yeah. There were two major pieces of that. One, I was exploring building my site in SvelteKit and NextJS and I didn’t wanna have to redo all the images everywhere that I went, each has their own way to handle images.

And I love the simplicity of a Cloudinary URL where you can just add whatever parameters you need to there. So it, it felt more portable if I could leverage Cloudinary in that way, and the big reason was every time I opened my website locally to write a new post or anything, the Instagram API had very [00:15:00] aggressive limits.

So you spin it up once it works. If you have to restart the dev server, it’s not gonna work again for 15 to 30 minutes or sometimes more than that. So I got real tired of that flow.

Sam Brace: Oh, I would get tired of that too if I had to say oh, for me to do something, it should be fairly simple.

It’s gonna take me 15 to 30 minutes to do, I would be looking for alternatives immediately. So I understand exactly why you went down that path.

Becky Peltz: And I think the thing too, when you submit things to social media, a lot of times you, I just go in with the idea that I’m giving it up my content.

I don’t own it anymore. I don’t have a really great way to access it again. But what you’ve done is open that up, so now you can, now you, when you get it in Cloudinary, you do own it, and it’s, there’s many ways for you to interact with it. So it’s a good idea.

Joel Turner: Yeah, and the in, in that vein, the service is meant to [00:16:00] hopefully pull from other endpoints maybe Google photos or iphotos, things like that.

I have plans for that in the future. My, my wife is really good at photography and it’d be nice to be able to pull her photos from Google Photos and display them on her site.

Becky Peltz: That’s, yeah, that’s really great.

Sam Brace: I would love to be able to see a little bit of how it, how you got it all to work.

Is there any way we can dive into some of the code, take a look at how this overall flow worked?

Joel Turner: Yeah, definitely.

Sam Brace: Awesome.

Joel Turner: So lets start with the, so this is the service. It’s mainly all in, in one file. That’s just a couple of the functions here. So we have our setup for the Cloudinary, API, just getting all the right config in there.

Becky Peltz: So just to be clear, we’re no longer talking about one [00:17:00] of the Gatsby source. You, this is a script that you wrote, Instagram Cloudinary, that deals specifically with this.

Joel Turner: Yep. Yep. This is bypassing that whole flow. And originally after I set this up, got my images up on Cloudinary, I was able to use the Gatsby source Cloudinary to pull those back into Gatsby.

Flawlessly. Never had to worry about timeouts or anything, so that was a huge improvement. Just right there. So if we go down to where we’re calling the file here the first step we’re fetching all the posts from Instagram, and then from there we’ll convert those into the shape that I want to send up to Cloudinary that’s going to have the tags and the [00:18:00] public Id or the name of it.

Then we upload those and then few pieces here just to make sure that they did upload correctly, which I never had a problem with. Just being a little redundant there.

Becky Peltz: Yeah, no good idea to use those net netlify or the web hooks.

Joel Turner: Yeah. And then, yeah, and then it tells Netlify to go build my site again. Once it’s good, we can so when we fetch from in Instagram just this one URL with parameters, so you can give it your Instagram id and then it’s gonna call just your user. It’s not gonna crawl all of Instagram to find these hashtags whatever you tag, you’re only gonna get yours, which was key for me.

I, if somebody else tagged something, JMT featured, I didn’t want theirs on my site necessarily. Then [00:19:00] you can specify…

Sam Brace: One thing, Joel, pardon my ignorance on this, where is the hashtag being specified in this?

Joel Turner: So in this one, you actually just specify that you want comments and you want the description.

And then when that comes back, the Instagram object, I think I might even have the types here. They’ll have the comments, which will have hashtags in it which you have to parse out a little bit. And then sometimes they’ll have, a little bit extra.

Sam Brace: Okay. No that, that’s really helpful.

Joel Turner: And right now I’m supporting carousels, just the first image of a carousel, but that was a fun gotcha that I ran into [00:20:00]

So yeah, once, once we get all the posts back from Instagram, then we can start converting them into what I’m calling an upload post, which is just the shape that I want to give Cloudinary all the required fields and the array of tags, which is the important bit.

Becky Peltz: So you’re specifying a folder, a public id, and then you’re taking your hashtags from Instagram and turning them into Cloudinary tags.

Joel Turner: Exactly.

Becky Peltz: Yeah.

Joel Turner: Exactly. Yeah. And the folder works really well for this just having the illustration folder that matches with this whole model, and I chose to name the images with the timestamp so I could sort ’em again on the front end. So it’s whenever they were posted on Instagram and that then I sort reverse on that. [00:21:00]

Sam Brace: And I think that’s pretty smart, frankly, cause if a timestamp is acting as a like unique identifier, it like there never could be identical timestamps likely, unless you are really doing something crazy, in my opinion.

So I think that’s a nice way to look at it, because it makes sense to you. It’s not true randomization, but it’s randomization in the sense that you’re not gonna be accidentally overriding files or anything like that. So I think that was an excellent identifier for what you’re naming things, putting them into Cloudinary.

Becky Peltz: Especially when you’re using tagging, it’s not so important to like, put a big description into your public id, because you’ve got all that description in the tags.

Sam Brace: Exactly.

Yeah. Yeah.

Joel Turner: And it’s, it is not like they come with names since they’re on Instagram it’s not a…

Becky Peltz: Yeah. You’d have to run ’em through some kind of an AI, yeah. Which we have, but…

Joel Turner: Yeah, I definitely thought about it. But so far this is working pretty well. But this is the big bit that [00:22:00] reduces all the comments down to one big string. So it combines all the comments and the description into just a large string that I can then use a RegEx to find any of the hashtags that I specified.

Becky Peltz: I gotta say, the code is so clean. I know. When I was looking through this, I was like, this is really great. It’s very easy to read.

Joel Turner: Thank you.

Sam Brace: Yeah, it really is. I, I don’t mean to just be like, Becky, I agree, but oh my gosh. It it’s so easy to follow. So this is fantastic.

Joel Turner: Thank you.

Becky Peltz: I guess this is when a designer starts coding, they know how to make the code look good.

Sam Brace: Yeah, that’s a good point.

Joel Turner: Been working on way too many projects where I go back to my own code six months later and have no idea what it does. So, it’s nice to document it all. These are the RegEx’s for all of [00:23:00] those hashtags that I’m pulling into the site, so I can just, say “anything that’s j-anything and ends in 2017”, which this is gonna be.

I mis-tagged a few photos. Some were added an extra letter at some point or an extra underscore, so this catches all of that. Make sure that it’s Joel M Turner, ABC’s 2017. And then same with all the others here.

Becky Peltz: Yeah, it’s nice to get those all in one place too. When you just have those scattered throughout your code, that’s pretty hard to find.

Joel Turner: So after that then we create the new timestamp and then the ID based on that. So it’s creating it with the timestamp of the the post, the created time of that post, and then using the Post ID from [00:24:00] Instagram. So if I ever need to go look up that image on Instagram I have that post ID right there. Which I’ve never had to, but just in case…

Becky Peltz: yeah.

Joel Turner: Kinda works out. And having the timestamp first allows me to keep that sort…

Becky Peltz: Kind of have like a bidirectional index there between Cloudinary and Instagram.

Joel Turner: Yeah, definitely. And then if we already have that ID in there we start to add the tags based on is this a new upload post that we’re adding?

Otherwise, if we already have it, then we’re just gonna add the new tags that we just found into the original tags. [00:25:00] So this just loops over all the posts and makes sure that we get all the tags into the posts.

Becky Peltz: Oh, because over time people are gonna be commenting and so you might pick up more tags to add?

Joel Turner: Potentially. Yeah. Or what often happens is I scroll through some of my posts and say, “Oh, you know, that one should be tagged this, or, something else.” I might add it to the featured or remove it from featured or something like that.

Sam Brace: Yeah. Yeah. And that makes sense. Absolutely.

Joel Turner: And then we do the then we send it up to Cloudinary. Once we have all those, and this is just using the upload function from the API. Yeah, just give it a few parameters that we defined in our [00:26:00] upload post and yeah. Always works so well. At first I was nervous because I was thinking I’ve got potentially hundreds of posts here that I need to upload.

Becky Peltz: Yeah.

Joel Turner: What you know is there no bulk uploader that, can handle this? When I was reading through the docs, everyone mentioned, oh, just use the upload function. It’s fast. It works for that. I was like, yeah. Oh, okay. It, can it be that fast and yeah it is.

Becky Peltz: That’s really good to hear. I know we have some situations where people have like thousands and thousands of things they need to migrate and we have to write, a, multi-threaded or kind of functions to do it. But how many would you guess you’re uploading here? Maybe a hundred?

Joel Turner: Yeah, probably. I think it gets up to 200.[00:27:00]

Becky Peltz: 200. So this, yeah. So it is fast. Yeah.

Joel Turner: Yeah, it, I was blown away by that. And again, I had a little catch here just in case, one of the uploads fails and I think I only ran into that once and it was when I before I had formed this correctly it was just a malformed request to Cloudinary.

Becky Peltz: And you’re running this in node with node type NodeJS.

Joel Turner: Yeah.

Becky Peltz: One thing I could call out here though is that they did make the V2 uploader a promise, so you can await it if you

Joel Turner: Oh, nice.

Becky Peltz: Yeah. Yeah. It was a, an improvement that they made. So that, yeah, you don’t have to wrap it. It’s good to see that you can wrap it too, and it still works. Just you don’t have to upgrade your code even though they upgraded the functionality there.

Joel Turner: Yeah. [00:28:00] I’ll have to look at that, that it’s a little cleaner to, to read for me.

Becky Peltz: Yes. If you just wait that you’ll, yeah.

Joel Turner: That’s awesome.

Sam Brace: And one question I have here, Joel, so I can see the overall upload processes taking place. It’s clean, it’s simple, it’s scalable from what I can see here. So if you decide to start illustrating every single day, this can handle the hundreds, if not thousands of illustrations. That’s gonna be coming from Instagram out of Cloudinary.

But one thing that I noticed when I was taking a look at your site is that you have certain transformations that you’re applying. To these various images. I think for consistency purposes, maybe for optimization sides of things. Talk to me about that. And also maybe where those transformations are being applied in the overall code you have here.

Joel Turner: Transformations as in…

Sam Brace: Like, I can see like you’re adding like f_auto to be able to optimize the …

Joel Turner: Oh, gotcha.

Sam Brace: And be able to resize it to maybe width 400 on the gallery view, but then the, like the carousel view, it’s at 700 [00:29:00] pixels width all of that detail.

Joel Turner: Yeah. And that kind of comes down to a, another great Cloudinary utility. I think Colby made it next Cloudinary.

Becky Peltz: For NextJS? Or, for Netlify yeah.

Joel Turner: Yeah. This one is the the wrapper around next image.

Becky Peltz: Oh, okay.

Joel Turner: That allows for Cloudinary URLs. And it, as soon as I learned about it, threw it in there because I had so many troubles getting it just right between next, next next image and the Cloudinary URLs.

Just mainly the width and height. It just never gave me the quality that I wanted necessarily. But then, but now using using that component it allows all the right parameters to go into the [00:30:00] Cloudinary URL. So we now we get f_auto q_auto and all the right sizes, all the you can even do responsive sizes pretty easily with that.

So you get the, the best of the both worlds. Next Image plus Cloudinary.

Sam Brace: Oh, that’s exciting.

Becky Peltz: That is really cool. Yeah, Colby’s done some really great work. Even like he put a plugin in Netlify to just add f_auto q_auto to everything, so using a fetch, so it’s like very easy to get that going. But this is another, this is next Cloudinary, isn’t it? Is that what it is?

Joel Turner: Yeah. And right now I’ve got it, I’m using the CLD image from Next Cloudinary. And that’s, I think the docs on that are …

Becky Peltz: The frontend SDK. Like the React frontend…

Joel Turner: Yeah.

Becky Peltz: Yeah.

Joel Turner: Exactly. Yeah. So this is [00:31:00] my website code now it’s on NextJS and this, the component’s a little weird.

I’m wrapping that CLD image with Chakra’s image just so I can apply. Chakra styles to it. Chakra UI is like a little component UI library that I’m using throughout the site.

Becky Peltz: That’s great though. So you can not only take advantage of Next Cloudinary to get the sizes and responsiveness, but then you can even wrap that in a, another styling type of UI. So that’s yeah. Component.

Sam Brace: That’s pretty cool. I honestly I feel like this is my first time really seeing this part, and this is what I’m taking away from this episode.

Becky Peltz: Yeah

Joel Turner: This was fun. Without, people like Colby sharing all the cool things, [00:32:00] and this podcast sharing all the things that you can do, I wouldn’t have gotten this exact flow down. So it’s, yeah, it’s nice to be able to keep optimizing, keep playing.

Becky Peltz: I think what I think Colby, in doing this with Cloudinary image, he made it almost like a data driven… a data-driven component. So rather than you having to learn all the details of Cloudinary image and all the functions and whatnot, you just pass in a few bits of data width, height, source, whatever, and he takes care of all that for you. So that is nice.

Joel Turner: Yeah. Yeah. And we can see how I’m implementing that here. Some of this is a little bit Next image and some is just for Cloudinary the width and the height the source are the big ones for Cloudinary. From there it handles all the others [00:33:00] which you can also add, different styles, different parameters that Cloudinary supports. And so all that can be added here which makes that really nice.

Becky Peltz: Yeah. That’s great.

Sam Brace: One more thing that I really love that you have in here is the placeholder. Like you’re doing a blur, and that’s coming from the fact that everything’s frontend and you’re doing that. That’s great. I love the fact that like you have like low quality image placeholders through that area.

I also really love the fact that you’re bringing in a lot of the details through the alt in here as well. This is, there’s a lot to like about this. This is fantastic.

Joel Turner: Cool. Thank you. Yeah, and part of the feature on this site, I’ll demonstrate. When you click on one of these, it comes up in a light box so you can get a little [00:34:00] bit bigger view.

And the other piece is the reason I have three different sizes on it is you can adjust the sizing of the grid. So can see these all.

Becky Peltz: That’s cool. That’s really neat. Now, what gave you that what component gave you that, that was light box, did that?

Joel Turner: Yeah, I created my own little light box component.

And and we can see that these are just slightly sized, larger than what I’m rendering. I’m at, but that allows for any kind of wiggle room mobile to desktop. But it, it adjusts the sizes based on which grid mode I’m in, which is nice. So if you want to keep it at the smaller grid mode, you don’t have to download the massive images.

Becky Peltz: Yeah. [00:35:00]

Sam Brace: And the nice thing I like about this too, Joel, is that let’s say that in time you decide to adjust the sizes for the light box. Let’s say that you want a four by four grid at some point or a five by five. It’s where, because you’re keeping the base original in Cloudinary, and then you’re just changing with size requirements based on what you have in your code.

You can always just declare a different size. Then it’ll transform it and make sure it’s optimally placed. So it, you’re future-proofing the ability to grow this grid as you so choosed with the way that you’ve done this. So this is very smart. This is very smart.

Joel Turner: Thank you. Yeah. This also allows for, say I wanted to showcase Instagram images that weren’t artwork, that wanted to focus on people’s faces and things like, Instead of having to, figure that out every time you just add that parameter, crop and…

Becky Peltz: Gravity face.

Joel Turner: Yep. [00:36:00]

Becky Peltz: Yeah. Nice. Wow.

Joel Turner: Makes it a lot easier if you’re really trying to dial things in.

Sam Brace: Gravity. Yeah, this is great. Yeah, this is really…

Becky Peltz: Yeah. Is this component available? Open source? Is this something? Check out.

Joel Turner: Let’s see. Outside of that, so those are the way that we render the images and here’s the grid that we adjust based on the input of the whichever icon you, you chose for the.

And then it’ll kick off this light box, which has another just same sort of image that, that we had there. And then a few other navigation pieces on the sides. And then, so after [00:37:00] we get our images up to Cloudinary, and it kicks off a new build. This whole site is static, so it’s doing everything at build time right now.

I might explore server side coming soon, but it should be pretty much the same flow. We have on the illustration page for GET static props. This is where it gets all the data that needs to be rendered on that page. So I’ve gotta function to grab all of those images that we just uploaded.

This is using the Cloudinary search API. So you’re just designating which folder you’re looking in and you want to sort by public id, that allows that timestamp piece that allows me to sort based on that. And then right now I’ve just got a [00:38:00] hard coded 800 just to keep it safe. I don’t have that many posts coming in yet, but one day…

Sam Brace: I like it. It’s aspirational, Joel

Becky Peltz: There’s a cursor too with that call. So if you ever need to like, you’re up to like 2000, whatever, you can grab a cursor and keep going. It’ll just keep going.

Joel Turner: Nice. I think that’ll be helpful. And then, yeah, you just specify that you want the tags to come back with all those images and yeah, it gives you this nicely shaped image response.

So you have so many fields that you could use if you wanted to off of this like looking through those just, the geeky part of me loves seeing all those stats.

Becky Peltz: Yeah. Yeah. [00:39:00]

Joel Turner: But for the display purpose I only needed just a few fields here. And then here we’re just adding these tags whatever we found.

This image we’re gonna add that image to the tag set that I have specified up here. This allows me to essentially have an array of images just for that tag.

Becky Peltz: So those arrays is like public ID or something of the images that

Joel Turner: It’ll be the whole image object. This whole object here.

Becky Peltz: Oh, got it.

Joel Turner: Just, so I don’t go look up those again, but that would be a nice optimization actually to have just the ID in there. But the same image might be in two different arrays depending [00:40:00] on if I tagged it both. So this gets returned to the page. And then from here I can just pass that data down into my gallery component.

And the selected images is easier to show whatever you select in here. Is gonna be pulling from one of those arrays. Now you can kinda look at different aspects of what these are. And there’s a kind of a bonus feature that is overkill for all of this. When you click on an image, I actually add to the URL the collection.

So that’s the selected group of images [00:41:00] in this case, letter clash and the index of that image. So if you want to share that with somebody, you can actually they just use that URL and it’ll pop up this image in the light box.

Becky Peltz: Oh.

Joel Turner: Kinda state management

Becky Peltz: Yeah, got all the data that they need there.

Joel Turner: Yeah.

Becky Peltz: That’s the nice thing about static sites too, is that you had to have these shareable links.

Joel Turner: Yeah.

Sam Brace: And I know you called it overkill, Joel, but I can see exactly why you would wanna do that because you’re putting all this time into this art. You wanted to be represented in the best way possible.

So it’s not only get to the exact piece you’re trying to show, but also in a nice format so that way it’s as big as possible so that way they can see all the detail you put into it. So I think that level of detail. Perfect. I totally agree with what you did there.

Joel Turner: Thank you. Yeah, and then that’s,[00:42:00]

I, I think that’s about it for the light box and the gallery there.

Sam Brace: I think this is good time for us to talk about the move, because one thing that we talked about at the beginning was we talked about going from like the concept of WordPress and then deciding to use Gatsby for the project. But I can see, and we alluded to it when we talked about transformations and the Next side of things that Colby helped with, but you moved from Gatsby to Next.

What was the decision making for that? It’s something that I think we’ve seen, not necessarily people do, but it’s where people are always deciding what should people use for static site generators or for site display. What was the reasoning for the Gatsby to Next move that took place?

Joel Turner: Yeah, that’s it didn’t come easily for me.

I love Gatsby. I [00:43:00] love how easy it made it to pull from different sources, pull ’em all together, get something up. A few factors started coming in. I’m primarily an app developer like web apps, so we use Next JS a lot, I wanted to get better with that. The issues that I was having with Gatsby, so many times when I load up my project locally and have different dependency issues and build issues like those kinds of things those were the impetus to move it over to Next JS.

But for websites, especially this website like mine Gatsby is amazing for it, and actually we have the whole WHO dashboard that our team built. That’s all on [00:44:00] Gatsby.

Becky Peltz: Hey, can you show us that? I love that site. That’s, its really cool. So this is your work site, right? You built this at work.

Joel Turner: Yeah. This is…

Becky Peltz: This was great in the pandemic.

Joel Turner: This is kind of an oddball for our team. We’re data visualization developers. And then this kind of came into our lap while we were early on in the pandemic.

Becky Peltz: This was important when Covid was really revving up and everybody was kind of needing to know where it was happening and how far away it was from your place, where you’re at.

Joel Turner: Yeah, definitely. Yeah, especially to see the trends and pinpoint areas of interest there.

Sam Brace: And so your team built this with Gatsby. That’s very cool actually.

Joel Turner: Yeah. Yeah. All of this was Gatsby has a lot of features, a lot of data. [00:45:00] This site has so much data that we’ve had to continually optimize in different ways because it’s multiple data points per day, per country, so it’s, it just grows so, so quickly.

Becky Peltz: I can see how GraphQL could help out when you’re dealing with lots and lots of data. Cause it’s gonna do a little filtering for you.

Joel Turner: Definitely, yeah. It makes it, especially on a page that shows all the data like a table

Becky Peltz: Yeah.

Joel Turner: That have everything showing up.

Sam Brace: I think this is good to point out because it’s where, yeah, you made a choice for your personal presence to be able to move it from Gatsby to Next, but it’s also pointing out that both solutions are fantastic for what you might need it for.

So it wasn’t like, you’re moving from a bad source to a good source. You’re moving from a good source to a good source that just had different needs and different use cases. So I love [00:46:00] this comparison.

Becky Peltz: I think we’ve seen a lot, we’ve talked to a lot of developers who use their blog as a place to test out something new or something they wanna learn.

So making that choice is not like condemning the thing, they’re leaving so much as saying, “Hey, I really wanna learn this new thing that I don’t know yet.” Yeah.

Joel Turner: Yeah, and sometimes, unless we keep creating multiple sites like our personal sites just kinda becomes that.

Becky Peltz: joelmturner.com one, joelmturner.com two. Pick your framework.

Joel Turner: Yeah.

Becky Peltz: But yeah.

Joel Turner: I, yeah, I ended up creating joelmturner.com dashboard just to pull in my stats from dev.to and Code Sandbox. One of the others just to play with NextJS and different variations of it.

Sam Brace: Yeah. Becky, this reminds me like I remember one of our initial DevJams episodes, we talked with Ryan Filler and he was talking about how he [00:47:00] moved from like from Jekyll to Gatsby to SvelteKit was constantly just moving and moving and moving.

So it’s where I agree it’s sometimes it’s nice to be able to have that personal presence to be able to test drive something before you try to do it professionally or try to do it at scale. That’s also a massive reason to try something else out.

Joel Turner: Yeah.

Becky Peltz: Yeah.

Joel Turner: Definitely.

Sam Brace: So Joel, so now that we’ve seen this and I’m inspired in many different ways.

First of all I think I’ve gushed a lot about the transformations, but it’s a, it’s where, but this is fantastic and I love the fact that you took something that was handmade, hand lettered, be able to have a digital output for that and be able to do something the way that you did it. So it’s a fantastic project and concept.

Where can people learn more about the work that you’re doing? Obviously you have your website, but is there any places that you’re continually contributing, maybe insights outside of the blog that you have there? Is there, are you [00:48:00] are active on LinkedIn or on Twitter or other places where can people learn about Joel?

Joel Turner: Yeah, primarily, Twitter is probably where I’m most active. I tend to read a lot and not post a lot, but sometimes I’ll jump in on conversations.

Becky Peltz: I post my wordle scores there. I read it a lot more than I write

Joel Turner: But outside of that dev.to try to stay a little bit active on there as well.

Sam Brace: Yeah. I would say the same for Becky. Like you’ve, you have a good growing dev.to presence yourself.

Becky Peltz: I like it there. It’s a real easy site to post on. Look things up, save things. Yeah.

Joel Turner: Yeah, definitely.

Sam Brace: Excellent. Joel, this has been fantastic. I really love this example here and of course we’re gonna point people to the blog post that you wrote where you detail everything there.

[00:49:00] I know you have active links to GitHub repos for people to be able to look at this and be able try to be able to learn from all the concepts that you took the time to learn from as well. So yeah, I really appreciate everything that you’ve done here.

Becky Peltz: I’m just, sorry we didn’t get to get into how you learned PHP while you were a dog sled guide.

Joel Turner: Wouldn’t recommend it’s slowly to learn but it worked.

Sam Brace: Yeah, I think it, it could be part two for sure let’s have Joel come back and talk about the way that he got to the, where he’s at with this. So maybe there’s a little bit of dog sledding adventures we can weave in, in, in a future visit.

Joel Turner: Good.

Sam Brace: Excellent. Excellent. Joel, thank you. Thank you again.

Joel Turner: Thank you both.

Sam Brace: Becky, there’s a lot to take away here. There’s a ton to take away here cause this is an amazing project. Obviously Instagram is a network that is widely used. We’re talking probably [00:50:00] millions and millions of users. So this is something where if you’re tied to development and Instagram, you’ve probably seen something there.

But what’s your overall takeaway from this?

Becky Peltz: You know, I’m thinking a lot about how, I hear a lot of talk about composable architecture and how you’re gonna pick pieces of a cloud, put your cloud stuff together so that it’s easy to compose. And when you think about an app like Instagram, it’s not really part of that composable world.

It does have APIs, but it’s not really intended. So moving your, what you own, your content into something that’s composable makes so much sense. And we’ve seen it here really well. That he was able to then make his move and Gatsby to Next that’s not an easy thing to do, but, how Cloudinary helped that with that.

Sam Brace: Oh and I love that yours is so much more articulate than what I was gonna say.

Becky Peltz: No, you were more articulate before.

Sam Brace: Cause like it’s one of those things where yeah, that, that’s an amazing reason for it. And you’re right, there’s a lot of conversations taking [00:51:00] place about composable architecture, headless architecture, all of these concepts.

Being able to have a single source of truth. So that way, regardless of what you use for your framework or what other systems you hook into it, your content is always there and stable is absolutely true. So I agree with that. My takeaway was just the fact that oh my gosh, Colby Fayock, like that guy is doing amazing things.

So it’s to say like Colby, of course is, and I think we’ve mentioned him practically on every DevJams episode, but he is one of our lead members on Cloudinary developer relations team or DevRel teams. And it’s where I think in past episodes we’ve pointed to plugins or we’ve pointed to just assistance he’s provided people in the Cloudinary community, whether it’s on Discord servers or on Twitter conversations. So it is to say, that if you need assistance with a lot of this stuff when it comes to image delivery, video delivery, management of us being able to work with certain files [00:52:00] we have go-to people and it’s between like myself, Becky, and others are willing to help, but it’s not just the two of us.

It’s not just the people that are on the support team either. So the lookout for help of people like Colby and others because they can really help guide some of the projects that way you don’t have to build everything from scratch or go hunting through repos. They can point you in the right direction.

Becky Peltz: Yeah, Colby is amazing. He’s always helpful, I know he is really busy, but he always gives me good pointers. He has this series on YouTube called Dev Hints. Very, great stuff to learn about Cloudinary in tiny bites. So yeah, we’re lucky to have him.

Sam Brace: Absolutely. Absolutely. So I think at this point, let’s make sure that people have all the details about what to do after this episode, which of course…

First, go to joelmturner.com. This is where Joel’s whole entire web presence that we talked about in this episode happens to be. You’ll notice here that if you wanna simply go into the illustration grids and [00:53:00] light boxes that we showed, that’s gonna be straight at the illustration part of his page, so you can go ahead and take a look at all of the great work that he’s doing, bringing this content from Instagram onto his web presence.

Thanks to all of the work that he’s done and with assistance from Cloudinary. And if he does detail all of this inside of the blog post that he has, Instagram Cloudinary, as well as some of the things that we talked about, such as the move from Gatsby to Next. It’s all very well detailed, so it makes it frankly easy for you to follow along with the episode.

Once this is in a recorded format, you have a chance to follow along probably side by side with something like this. And to point that out. For those of you that are interested in further Dev Jams or Cloudinary podcast in general, all of those are gonna be found at cloudinary.com/podcasts.

And you can see not only all the episodes that we’ve produced, but also links to many of the places where you can listen and watch to the content such as the Cloudinary Academy. [00:54:00] YouTube, Spotify, apple Podcasts and Google Podcasts, and I can’t not feature this where I love this transcript feature that one of our team members and Nadin went and built where if you are simply just wanting to jump to a certain part of the episode, you have to click the timestamp and it takes you right to that, it’s fantastic.

So really easy to follow along with all of the conversations that are taking place. Now, also keep in mind that all of these podcasts, as I mentioned, they’re housed in the Cloudinary Academy. That’s all of the work that myself, Becky, and others at the company are putting into educating developers. On the many use cases that are available, with our APIs and the various SDKs that we support.

So please take the time to look at that at training.cloudinary.com and keep the conversation going at the Cloudinary community. You can see that we have it at community.cloudinary.com and it’s associated Discord server, but you can easily access directly from there. So before [00:55:00] I let everybody go, Becky, any final thoughts?

Anything that we wanna leave our audience?

Becky Peltz: No, just I’d say dive into some of this code. It’s really good. Very helpful, and get you on a good path.

Sam Brace: I agree. I completely agree. On behalf of everybody at Cloudinary, I’m also gonna say on behalf of Joel, because we, he probably would say so himself, thank you for being a part of this episode.

Thank you for listening and watching DevJams and being interested potentially in Cloudinary, and we hope to see you at the next. Take care everybody. We’ll see you soon. Bye.

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.

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.

Sam Brace: [00:00:00] Hey everybody. My name is Sam Brace, and I am the Director of Customer Education here at Cloudinary. And this is DevJams. This is where we talk with developers who are doing innovative, inspiring, or at least interesting things. And in many cases, since I do work with Cloudinary, as well as my cohost, who I’ll introduce shortly, works at Cloudinary, typically the developers we’re talking to in these episodes are using Cloudinary as well. But with that said, the types of projects can wide greatly in all of the different things that they are doing. So we wanna be able to bring these to you in this format. So as I mentioned, I do have a co-host for this program and that of course is Becky Peltz.

Becky is our curriculum program manager for developer education here at Cloudinary, and I love having her as the co-host in all these episodes. She brings [00:01:00] a wealth of experience and knowledge for all of these conversations. So Becky, I am so happy to have you here again for this one.

Becky Peltz: Hey, I’m glad to be here and I think this is particularly exciting day since we’re live streaming. We have done this in a more non streaming fashion in the past, and this is exciting and we have a fantastic guest with a lot of good knowledge here to pass on.

Sam Brace: Absolutely, and it’s an exciting time to talk to somebody like Brad who we’re gonna be getting to know a lot more about in this episode, because Brad has been doing lots of really interesting things, helping out developers with his own blog, contributing to podcasts, but also has a day job working at Atlassian as well.

But one of the things that we’re gonna be talking about with Brad really is to better understand a couple of big topics, which are tied to his project. It’s gonna be able to understand details about Markdown. It’s able to understand details about also something called [00:02:00] abstract syntax trees, which you’re gonna start to understand a little bit better.

You may have seen these mentioned in certain types of articles about also known as ASTs, but these are two big things that have been coming up in lots of conversations when it comes to web development, software development, and sometimes tied to images and videos, which is why we’re getting involved in the conversation.

But it’s something that I’m excited to talk to Brad about today.

Becky Peltz: Yeah, I’m looking forward to him explaining how we put together Rehype with for Cloudinary images that he solves an important problem there and I think he is gonna be able to explain a lot to us about how to go about working with ASTs to solve this type of problem.

Sam Brace: Absolutely. Now, before we do get to Brad, and I just wanna point out to everybody that is watching this overall episode that if you are so inclined, you wanna see previous DevJams episodes, understand the things that Becky, myself, and other Cloudinary team members have done around this DevJams initiative.

You can always go to Cloudinary dot [00:03:00] com slash podcasts. And you can see here that there are many different links to the podcast programs that we have, including our latest episode, which focused on the way that Daniel over at Legitimate was able to build a Web3 marketplace with Cloudinary and talks about the ways that Cloudinary works from a Web2 to Web3 standpoint.

So it’s a fascinating episode, but it is to say that after you get to hear from myself and Brad and Becky, if there’s more that you wanna be able to be a part of, know that you can always go to Cloudinary dot com slash podcasts. And as you can also see at the very bottom, all the links of where you may be consuming podcasts already.

That could include Spotify, Apple Podcasts, Google Podcasts, YouTube, and even our own Cloudinary Academy. So lots and lots of great information there, just in case you are so inclined after all of this.

Becky, any final thoughts before we bring Brad on?

Becky Peltz: No, I think we’re gonna get into a lot of interesting conversation and he [00:04:00] has done a lot of different types of work with the this area and so hopefully we can cover all of that and be enlightened here.

Sam Brace: Amazing. Let’s get to it. So Brad, welcome to the show.

Brad Garropy: Hey, thanks so much for having me on. This is awesome.

Sam Brace: Brad, we talked a little bit about you, we said some things. What do you agree with, what do you wanna share with about yourself at this point?

Brad Garropy: You guys are right. I do have my hands in a lot of different buckets here.

I have a lot of side projects and that’s something that I really like to do is work on coding outside of my normal day job. It gives me just like a lot more perspective on the wider industry and allows me to solve problems and learn new technologies on my own.

Sam Brace: And I think it’s definitely something that I think as someone that’s trying to grow in their career is great advice for them.

Just in general, like when I’m trying to learn about the education space, since that’s what I do for my day job. If I [00:05:00] just focused on what I was doing for Cloudinary, I’d probably feel very insular with all the things that are taking place. But trying to keep your hand on the pulse of what’s new, what’s cutting edge, if it, there’s certain things that your day job allows for, but there’s certain things that it definitely doesn’t.

So to keep expanding your scope it’s needed. So I think it’s great that you’re doing what you’re doing for the development community by putting your hands in lots of different pots and touching it and feeling it and understanding it because it is something that I think helps us to grow within our various careers.

Becky Peltz: Yeah. And we know from talking to you previously that you actually graduated with a degree in electrical engineering. So you, that’s a tough one. And but you got into coding. And can you tell us a little more about what you like about coding?

Brad Garropy: Yeah you’re right. Electrical engineering was actually very difficult.

But throughout my curriculum I specialized in like computer systems, so I actually learned how to like, build computers from scratch, like how to build logic gates [00:06:00] to make memory and then make, adders and dividers and things like that. But through the course of that curriculum, I had two programming classes.

They were both in Java, and there was just something so satisfying about programming. You’re like doing this kind of creative thing, writing code because you can organize it in ways that work with how you think and structure your code that’s personal to you. And then it’s also like really great because you get immediate feedback, you make a change, you run your program, you see the LED turn on, it was all hardware stuff at the time.

So that immediate feedback I loved a lot and that’s where coding really struck me. And I wound up just kept going down that path in my career.

Becky Peltz: Yeah, I I’ve always teased with people that are learning coding that if you’re in a search for truth, you’re definitely gonna find it in a computer because if you do something wrong, it’ll tell you right away. [00:07:00]

Brad Garropy: Absolutely. Yeah. And coding is better at telling you what’s going wrong than hardware. Cause stuff just, if it’s hardware, it just doesn’t work. If it’s coding it, you got an error message or something like that.

Becky Peltz: Yeah. That’s true. It’s great that you got into it and now you’ve dived into some of the hottest stuff going on as you moved into like static site generators and and your blog is written in the static site generator, which we’ll get into more.

So how did you make that transition into this area? There’s many areas of computing we, we hear about Web3 and lots of many different things. So what attracted you to this?

Brad Garropy: Yeah, I I was working at Dell writing like very low level code. I was writing c code, making firmware for their servers, and it’s basically just like how you power on power off, update, change settings in their servers.

And it was just, it was tough. It was in the weeds. You couldn’t talk to anybody [00:08:00] about what you were doing. You certainly couldn’t show them you can’t just bring them into some big hardware lab and be like, see I did that. So I just found interest in doing things that I could share and web development was really kicking off at that time.

There was like a transition into Angular around that time and I was just learning how to like, build things and share it, whether it’s with friends and family or other coworkers trying to find ways to apply it at work. And then I made a really big jump. I left Dell and I went to Adobe, and that was like where all the doors opened for me.

They are a web company. I was working on web products and I got to just play with all the latest and greatest stuff because I joined a brand new organization and it was like a field day for me. I loved every second .

Becky Peltz: Yeah I think of it like a candy store at Cloudinary sometimes. There’s just so many things [00:09:00] going on that to, to play around with.

Sam Brace: So, Brad. When, now that we’ve explained some of the details about how you got to where you are in web development, I’d love to know a little bit about this project that we are talking about with you today. Explain to me some of the details about it, and of course, if there’s certain terms that I don’t know I might ask the questions about that, but tell me a little bit about the project.

Brad Garropy: Yeah, maybe I’ll start with like why it came about, because I feel like just spouting off the name of the project might not make a lot of sense if we don’t have context on why I needed it. As y’all mentioned, I wrote my own website and I did that as a learning experience early on when I was, starting in web development.

And this website’s gone through many iterations over the years. But one thing that’s stayed true is that I always author my content in Markdown. I have a blog on the website and I write content in Markdown because I think it’s important to own [00:10:00] your own content instead of putting it on a CMS you check it into your GitHub repo or something like that.

And so it’s definitely a challenge getting this Markdown that you write, which is like a markup language, but it’s very readable’. Intended for articles or text. And it’s a challenge to get that Markdown presented on your website in exactly the way that you want, whether it to get it to look a certain way, render a certain way, or even optimize the things that are included in that Markdown.

So yeah, that’s like where this project was birthed. I was using images on my website in my blog, and I needed them to not cause layout shift when you render a page and I can show more detail, but initially when you convert Markdown to HTML, images have no attributes on them.

So it’s a raw image tag with a [00:11:00] source on it. And so that’s where the customization really comes.

Sam Brace: Yeah, break it down a little bit for me because like I, I’ve used Markdown in different capacities for a good portion of like Cloudinary’s time, all of the blog posts were written in Markdown, so it was something that if you wanted author a blog post, it helped to provide it in Markdown.

So that way it was just an easy copy and paste for the publication team. But I know that you said about converting Markdown to HTML. What, talk to me about why authoring makes sense from the Markdown perspective, maybe particularly for a developer audience?

Brad Garropy: Yeah, for sure. So at the end of the day, you’re gonna wanna present this content on a website.

Websites are built with HTML, but you don’t wanna write a blog post in HTML. Think about it like P tags and a tags and like manually doing all that stuff. No, you’d rather write it in something that’s much more friendly, much more geared towards prose or text content. So Markdown fills that gap.

It’s a [00:12:00] specification that is very easy to read, like it’s very human readable and you could write a blog post in it, but it also has support for some HTML basics like tables, links, images, headings, and so just by writing a couple hashtags you can get a heading out of it once that Markdown is then converted to HTML.

So it’s the perfect tool for kind of writing on the web. You may have seen it on, GitHub in their README’s, or a lot of CMSs support Markdown. It’s becoming a lot more popular today because it’s just a couple little syntax things and you’re off to the races.

Becky Peltz: I think also you can stay away from a CMS in a way you can, Markdown can be your CMS.

So if you don’t wanna invest the time and possibly money in getting a CMS or even a database to put all of your thoughts and data in, you can just put it Markdown. And then, as you said, you can check it into GitHub or wherever [00:13:00] you’re storing your stuff. It’s yours, you own it. There’s no need to create any kind of integration except for the type that you’re gonna talk about in a little bit.

But in general it’s easy to read for anybody if, GitHub actually shows Markdown rendered as HTML for you. So yeah, it’s a great, in fact, I’ve heard people say, why do we even have HTML? Why don’t we just go to Markdown? You can just save a lot of time. But yeah.

Brad Garropy: And it comes with a fringe benefit. When used in like a blog post kind of way on my website, I have a edit this post if somebody wants to make a correction or something. And it essentially just opens a pull request with their edits. So it’s like really cool. It can be more collaborative that way.

Becky Peltz: That is, that’s a really great idea.

Sam Brace: I, I’m blown away just by that alone. That’s a great idea. Yeah. Note taken. That’s something that I might wanna do for other things that we do. That’s [00:14:00] really… nugget right there. But one thing I don’t fully get about what you were saying is when you’re talking about rendering issues when it was attached to Markdown or essentially display issues with the Markdown, talk to me about how that can come into play with Markdown files.

Brad Garropy: Yeah. Out of the box Markdown doesn’t do anything. It’s just a specification. It’s just a, it’s just a file type. It’s a dot md file. So in order to turn it into something you can use like HTML, you’ve gotta use some different libraries. And there’s some really high level ones out there. One comes to mind called Marked. And Marked will just do one basic transform on a Markdown file to turn it into HTML, Markdown straight to HTML, but you can really peel back the layers of that onion and do a lot of different things with it. So Marked may be the easiest and highest level package, but you can actually [00:15:00] get into parsing Markdown, transforming Markdown, and even modifying the output of Markdown based on this whole ecosystem called Unified, where it’s a collection of packages to turn these different file types into abstract syntax trees, make modifications to them, convert them between different file types and then ultimately spit it out as HTML or whatever you choose.

Becky Peltz: Yeah, and I think we’ve been focusing on kind of the text aspect of Markdown, but we know too that we can put images in there, we can put lots of other types of media in there.

Maybe we could move into looking at, cuz I, you’ve mentioned that the first step is to move it into one of these trees. We could take a look at that because I think you have a visual that we could share.

Sam Brace: Yeah, absolutely. Let’s put your screen up and let’s take a look at what you got going on.

Becky Peltz: Yeah, I, and [00:16:00] when I saw this, I really thought about how this is so much like what a web developer working in the DOM is used to, where you’re used to a DOM tree and you’re gonna be able to go in, traverse the tree, find the element you wanna change and make that change. So I like thinking about that way, but could you explain what’s going on here, how this works?

Brad Garropy: Yeah. This is called AST explorer.net. AST stands for Abstract Syntax Tree. And this is just a really cool way to visualize what an abstract syntax tree is. On the left, you have Markdown. If you’ve never seen it before, it’s pretty easy to read, right? It’s just like sentences. And you’ll see little annotations here, like this is a link.

So this link, the text that’s rendered is Vercel serverless function. But the identifier for the link is Vercel functions. So if you go down here at the bottom, this is like the link that it [00:17:00] actually links to. So it’s still pretty readable as you’re scanning through it. But this is technically like a form of code.

But in this particular situation, or I guess, let’s see, to tell you more about what this is. This is just like a sentence or two, like a paragraph. And if you look on the right, this is the abstract syntax tree representation of Markdown. An abstract syntax tree, you can think about it like, like a JSON file pretty much.

And it breaks every individual little piece of this Markdown file into its own node. So for instance, in Markdown, some of the basic node types you can have is a paragraph. And so you’ll see what’s really cool about this explorer is as I highlight the different paragraphs, it shows you on the left hand side what it’s referring to.

So the first sentence of the [00:18:00] post relates to this paragraph here. It’s of type paragraph, and it has some children with a text, a link, different things like that, because later on in this paragraph, there’s a link right there. So yeah, there’s a chunk of text, then a link, then some more text.

And this is the basics of breaking Markdown down into something that you can edit, modify, traverse, search, all these operations that you could do on a data structure to actually change what this Markdown can eventually be turned into.

Becky Peltz: And so when you’ve gotten it over into this point where it is in a tree and we can see it as JSON, we’re actually in this intermediate state where you’re not in Markdown anymore.

You are more of a kind of, I don’t know, just something that is more universal or, [00:19:00] not tied to any final format.

Brad Garropy: Yeah, exactly. So you can imagine if you were gonna take a Markdown file and eventually turn it into HTML, what it does is it goes from Markdown to an abstract syntax tree. And then there’s another kind of library or function call you can make to take that abstract syntax tree and then write it out to HTML and there’s these kind of libraries for all sorts of file extensions. You can actually do this for code, JavaScript or TypeScript, and code can be broken down into abstract syntax trees. That’s actually how ESLint works to walk through your code and look for problems. It traverses these syntax trees and, runs rules on each of the nodes in there and makes sure your code’s formatted or, annotated properly.

Becky Peltz: Yeah. So truly the word is abstract. It puts you into a situation where you, I could create my own file format and [00:20:00] then I could translate any of these other formats into my format by accessing it through the tree.

Brad Garropy: Yep, exactly.

Sam Brace: And Becky, looking at this, I can see. Brad, I can also see as well, like on like lines 40 through a few others, like lines through 45.

You’ve got different type of calls to images, which of course are Cloudinary hosted and delivered. So to your point earlier about this, Becky, a lot of times when people are talking about Markdown, they might be thinking about just being text-based, but this is indicating that there is media, there’s assets that are associated with this outside of just general markup of text.

Becky Peltz: Yeah. It’s, I, and it provides a Markdown provides a way to show images in its own format. Markdown also allows you to put HTML in it. It will generally render [00:21:00] HTML, so you can do it using that. But it is really interesting to think about what your next step was in the in, in getting into the Cloudinary experience.

So how did you move from looking at your Markdown like this and becoming familiar with the tree to the project that you used Cloudinary for?

Brad Garropy: Yeah, so basically outta the box Markdown has some basic transformations. For instance, if you put in a single hashtag and then this is my heading that’s actually a heading node.

So like Markdown syntax says that one hashtag is a H1. It corresponds to an HTML H1 tag. Two hashtags is a second level heading, an H2. [00:22:00] And Markdown has all sorts of these little shortcuts to map what looks like plain text over to HTML. Now it does the same thing for images.

And I can make this a little bit simpler. Instead of using these references, which are maybe a little bit harder to understand, Markdown space syntax looks something like this. Exclamation point with some square brackets indicates that you are starting an image link. And so what’s in the square brackets is the alt text, and what’s in the curly braces is the actual link to the image.

So Markdown takes that funny syntax and turns it into an HTML image tag with a source attribute of this url. And nothing else. And that’s great. But if you’ve worked with images on the web anytime recently, you know that images have gotten like way more complex [00:23:00] and making your websites optimized especially when it comes to images, which are one of the huge factors in optimizing a website.

You need attributes on your images for a lot of different things. Think about lazy loading, aspect ratio, all sorts of different optimizations, like source sets and things like that. So Markdown drops the ball here. But the ecosystem around Markdown has a lot of tools for helping with that luckily.

Becky Peltz: Yeah. When I looked at your image there, I only see five properties exposed through Markdown. And so you’re saying that we need, we really have many more properties, more attributes that we wanna be able to supply. Yeah.

Brad Garropy: Exactly. Yeah. So this image essentially turns into this funny image syntax essentially turns into this right here, image source equals this string. [00:24:00] Okay. So we wanna be able to modify this Markdown transformation, the default Markdown transformation, and do more. And there’s an entire kind of ecosystem for turning files into ASTs, making modifications on those ASTs, and then spitting it back out as some other file type.

Becky Peltz: Yes. And I think this is the exciting for, I had not heard of this before. I’m, I look forward to hearing more here.

Brad Garropy: Yeah so my use case was essentially images were not being optimized very well on my website. As I was migrating away from the Next.js image component, I was left with just the raw Markdown output, which was pretty suboptimal.

So I went searching and I didn’t find any libraries that did the kind of thing I was looking for. At the end of the day, what I wanted to do was add width and height attributes [00:25:00] to my images so that they didn’t cause layout shift. And if you’re not familiar, there’s this thing called the Core Web Vitals, which are Google’s metrics of seeing how well your website performs. And one of these core web vitals is called cumulative layout shifts. And it basically means as your website is loading, how much jumping around does your content do as different things are loading in. Because HTML can call out to the network and bring in additional resources as it’s loading the DOM.

So in this case, I really wanted width and height on my images to prevent layout shift. And getting a good core web vital score is very important because Google will actually rank you higher in their search results, in their SEO if you have a high core web vital score. There’s a direct correlation there.

Sam Brace: And I [00:26:00] wanna ask you about this because like with layout shifting, because we focus on a few different things when we talked about it from the image side of things like largest… like content paint and making sure that you know what is the largest piece of content on your site. Making sure that’s optimized, cuz that’s typically gonna be an image or video in a lot of cases.

But the layout shift isn’t something that we’ve really talked too much about in these episodes. Tell us more about why you think Google cares about this in terms of the core web vitals.

Brad Garropy: Yeah, totally. I can show you an example, right? It’s actually very jarring if you have a website with a lot of layout shift.

Imagine you’re loading something in and you start reading the blog post, but then images keep popping in later because they’re big and they’re, more expensive to load and the paragraph you were trying to read all of a sudden just gets pushed all the way down off the screen. That’d be super frustrating.

So having these width and height attributes lets the browser know the image is gonna be this big, or at least have [00:27:00] this aspect ratio reserve that space and then continue rendering. So this is a a blog post that I have called Securing Web Hooks. And I have an image right here where I’m showing the environment variable configuration screen in Netlify.

I installed this url throttler extension, so that I’m like making Cloudinary requests slow so that we can see the images pop in. And I’ll go to my code and make sure I’ve got this… yeah. Turned off. So if I load this page, you’re gonna watch as this image jumps in a couple seconds and it’s gonna push all the content down.

Sam Brace: Oh, there we go.

Becky Peltz: Yeah.

Brad Garropy: So imagine if you’re a really fast reader and that can be jarring, right? Especially if you have a lot of images. Or what if your header or your [00:28:00] hero image was on top and just push the whole page down?

Becky Peltz: I just have to share that I worked with making dashboards with images and, they would just come, and this was about 10 years ago, these things would come in and push the other one away and the whole page would re-render.

And then another one would come in, because it’s an asynchronous environment, you’re, you have no control over that. It’s however the network brings it in. But controlling the size can make a huge difference. So…

Brad Garropy: Yeah you can add like preloading to images but you’re gonna look at a blank white screen for a whole lot longer.

There’s a lot of different strategies on not only when you load your images but how, and what size you load them. So now with my plugin enabled if you refresh the page, you’ll actually see that space is actually reserved and the image then just pops up into that space.

Becky Peltz: That’s a great demo that really shows the importance of what you’re talking about.

Sam Brace: [00:29:00] Absolutely. It does. And it also, frankly, under, I better now understand why Google even care about this as being a core web vital. Because to your point, if you’re making reading and accessing content on the web hard by constantly shifting things up and down, then that’s not a good user experience.

So it makes perfect sense what you’re showing there. And I, it makes sense why they would rank it so highly in that case and good on you to understand that because you don’t wanna have your core web vitals impacted. And so understanding that’s gonna make for a better user experience for people that are reading your stuff.

Becky Peltz: Yeah. And just to be clear, what you did different is you added the height and width attributes to the image. And that was enough for the browser to make a good decision about it?

Brad Garropy: Yeah, so based on the height and width, the browser can then calculate the aspect ratio. The image might actually be larger than what’s actually displayed, but with the height and width, it knows the size of that [00:30:00] box.

They’re rendering this column here that has a max width of, whatever, 800 pixels or something, and it says, oh, if this is an aspect ratio three by two you can multiply that by the size of your column or your container, and it’ll know exactly how much vertical space to hold for the image.

Becky Peltz: It’s like you’ve reserved a table at the restaurant and then you got that space no matter what.

Sam Brace: Yeah, I was just about to use an analogy myself. I love that, that you did that but I can also see this being really helpful because as we know, the web is responsive now, and this makes sure, to your point about aspect ratio, if you’re keeping that same aspect ratio, this means if someone’s looking at this on their iPhone in portrait mode all the way to a beautiful desktop display, it’s gonna ensure that image still has the same level of placeholder regardless of what the pixel width and height that’s gonna be because it’s allowing for that set amount of space based on the viewport.

Brad Garropy: Yeah, and it was just recently that width [00:31:00] and height became important again. Images can now calculate aspect ratio through width and height. Prior to that, you had to specify aspect ratio, which is even one of the newer image properties as well. So all of this stuff is just coming to the forefront once again, because browsers are getting smarter with what they can do with these images.

Sam Brace: So how did you pull this off? I saw of course you, you did the AST example, so you were adding width and height and details in there, but it, how do we, how did you start going and doing this more turnkey with what you’re doing with your blog presence?

Brad Garropy: So yeah this really was enabled by the Unified ecosystem, which helps transform things to and from ASTs and then make modifications to those ASTs.

I think that was the question you were asking, right?

Sam Brace: Yeah, exactly. Exactly. So how did you end up doing that with the Unified system?

Brad Garropy: [00:32:00] Yeah. So Unified is complex. You can find it at Unifiedjs.com, but it’s very complex and this is something I feel like I wanna make a course on in the future because there’s just not enough information out there to figure all this stuff out.

But how I did it, let me open up the source code so I have a reference here.

So one of the first things that you can do in this Unified ecosystem is you can write your own plugin and you can use this plugin at any point in the chain of transforms that you’re applying to your Markdown. So for instance first you have to parse that down into an AST, and then you can apply multiple transforms at the AST level, and then you can change that AST over into a different kind of ast, like an HTML ast.

And now this gives [00:33:00] you HTML properties you can work with. And so that’s precisely where I started to inject the things that I cared about into the HTML. So you can either modify it like the Markdown content itself or swap it over to the HTML version, and then start working with like HTML nodes and attributes and things like that.

So in order…

Becky Peltz: …way to do that, right? You, we know, we, I could see in your, for example, line 11, rehype Cloudinary image size. So Rehype is a tool that you’ve incorporated to help.

Brad Garropy: Yeah, let me pop over here. This is probably a better a better high level overview. So this is the function that actually transforms my Markdown on my blog.

And the very first thing you do is you call into Unified and it says, okay, start my Unified chain. What’s the first thing you wanna do? You want to use Remark, which is a parser for Markdown to turn that into an AST. [00:34:00] And then you can see I’m like applying a bunch of transformations to that AST.

I’m using GitHub flavored Markdown. Unwrapping images, removing the paragraph tags around them. I’m changing the way these inline links work a little bit. I’m doing very fancy embeds for Twitter and Twitch and YouTube, and these are all just modifications to that Markdown AST. But then there’s a very pivotal moment here where I call Remark Rehype, and that’s a plugin that takes a Markdown AST and converts it into an HTML AST.

And these functions are all chained after each other. So like you’re, it’s just returning essentially the AST each time. And so now you have a HTML AST. And this is where I wanted to actually change the image tag to add width and height. And so I injected my own [00:35:00] plugin, my own Unified plugin to do exactly this.

And so this is how you hook into the whole process. And I’ll show you what that looks like.

So the name of the thing I made is called Rehype Cloudinary Image Size. It’s a plugin specifically for HTML ASTs to reach out to Cloudinary, grab some information about the image and then add that into image tags as width and height attributes. So you have to like actually create this this traversal of your AST.

And in this case we’re, walking around the AST looking for image nodes that are Cloudinary images. So you stop at every anchor link or rather every image tag in your AST. [00:36:00] Check the source attribute and make sure that has like res dot Cloudinary dot com and that way you know it’s a Cloudinary image and you can then go get more information about that image.

Once you have identified that, what I do is I run this little function called get image dimensions, which is an API call out to Cloudinary and then add those dimensions onto your image properties as width and height. And you do that for every image you find in your AST and then move on with the rest of the Unified chain and eventually convert it to actual HTML.

Becky Peltz: That is really cool…

Sam Brace: Maybe I missed it, and it hopefully you’re like, oh Sam, you need to pay better attention. But how is it getting those image properties? I understand it’s calling Cloudinary at this point, but what are the image properties it’s grabbing? Is it grabbing the original width and height or is it grabbing an optimized version of it? What is it grabbing there?

Brad Garropy: Yeah, so this [00:37:00] is where this get image dimensions function I wrote comes into play. And this is just leveraging the power of the Cloudinary API because it’s really good. I will say I use the Cloudinary API for like automatically optimizing my images’ format and quality.

So it doesn’t matter what I uploaded the Cloudinary, I can get a WebP on my website or I can retrieve the image at 80% quality where you don’t see terrible degradation or anything. But the same API can also get you like metadata about those images. And so I essentially just look at the source attribute and splice in this API endpoint that Cloudinary has called fl_get_info.

And it returns this really cool JSON object of all sorts of metadata about the image, including the width and the height.

Sam Brace: I love the fact that you’re using this and once again it [00:38:00] emphasizes the power of JSON in another way where it’s like the fact that you can get all of this additional metadata, get all this additional detail from something that’s being delivered by this, you can, it shows how you can use that information really well.

Becky Peltz: Just to clarify a little too there, cuz it’s pretty cool what you did here. You took the original URL and you added to the path you added slash fl_get_info, which is one of our transformations. And that allowed you to get back this JSON that you could then pull properties out of.

Brad Garropy: Yeah, exactly. Yeah, because you need the reference to the image and then you need to splice in the path and it’s nested after like your account name in the url.

So it, you kinda have to find that and then put it after that.

Becky Peltz: Yeah. Yeah. So you had to learn how our URLs are composed of domain, cloud name, transformation…

Brad Garropy: exactly.

Becky Peltz: Upload. [00:39:00] Yeah. And once you master that, then you’re able to figure out how to stick a little transformation into the path and do more with it.

Brad Garropy: Yeah. Now I will say one thing that, that would be really convenient here is if, maybe suggestion for Cloudinary, if y’all had an fl_get_info endpoint, that after that you could put a full like URL there.

Becky Peltz: I’ll share one little tidbit there that might get you there. We have what’s called a list type of delivery.

Like normal delivery is gonna be like uploaded, authenticated, various types of access control. But if you have list and you have tagged your assets, you can, what’ll happen if you call for the name tag, whatever you named your tag, you know like Brad, is you tagged your assets with Brad dot JSON with the list type, you [00:40:00] will get back a JSON you know, you’ll get back, it’ll be like you’re calling and getting, you’re getting a massive amount of information about each of your assets that are tagged with that.

Brad Garropy: And that’s for all tagged assets, not just a single asset?

Becky Peltz: It’s it, you have to have tagged with that, Brad. So if you tagged all your assets with Brad and you ask for Brad dot JSON, you get ’em all, there may be a limit, like if you have thousands, maybe there is a limit there. But in general, it’s a way to get back JSON data without having to use any kind of API secret or API key because it’s all public.

You’re basically considering back public information about your assets.

Brad Garropy: You’re making my gears turn because this kind of happens at runtime a little bit like when these are generated and I wonder if there’s maybe like a way to pre compile this image data so that we don’t have to make as many API calls.

This API call happens once per [00:41:00] image, which is one of the things I really had to optimize. I didn’t want to traverse the tree. Make one API call. Wait on it. Yeah. Find another node. Make one API call. Wait on it. What I did was traverse the tree, found every image, collected all those URLs, made all the calls at once.

They all came back altogether and then made the transforms. Yeah, but this is good cuz you could technically recompile everything, have a JSON file and just reference it. That’s nice.

Becky Peltz: Yeah. Yeah. That would work. I’m curious about ASTs that, with the DOM you have the query selector that’ll let you say, go get me all the image elements on my page.

Have they got anything like that so that you can, like just instead of having to walk through the whole tree, you can just grab certain elements?

Brad Garropy: That’s absolutely an awesome question. There are some helper functions that do stuff like this. So you’ll see that I’m using packages called [00:42:00] Hast, which stands for HTML ast, or Hast Util is Element.

And which is just to check on is the particular node I’m on an image element or a paragraph element? There is, I believe one called hast query selector or something like that where it can more directly access these nodes. But typically the way you do these trees is you walk them, you do walk ’em.

Yeah. And so it gets really complex in there because you can’t modify the tree that you’re walking. If you add a node underneath the one that you’re currently on, you could make a recursive loop because you’re adding a new node, continuing to traverse it, finds it, maybe makes a transformation.

A lot of what you have to do is save off your modifications for later and then apply them at the end or something like that. So that was something I shot myself in the foot with a couple times doing this because I [00:43:00] accidentally made infinite loops by modifying the tree that I was walking.

Becky Peltz: Oh, wow. Yeah, no, walking through trees is, that’s an advanced course in computer science, so yeah, it’s not for everybody, but you’ve got a really good example of how to do it here. So I think this could be…

Brad Garropy: One of those things where you learn just enough to make it work and then say, okay I get it.

Sam Brace: Brad, this might be a silly question, but I gotta ask you cuz I, I’m not sure if I fully understand it, but, so obviously I can see here that everything that you have, like the various files you’re showing Markdown dot ts, ts stands for TypeScript.

Is all of this stuff possible only because you’re using TypeScript or is it something where the techniques you could be shown, could they be done in other ways?

Brad Garropy: Yeah, a hundred percent. All of these libraries are JavaScript libraries. I choose to use TypeScript because I love the auto completion.

I love how it keeps me in my lane, gives me hints on what these APIs [00:44:00] do. And I just, I feel like it’s just becoming the gold standard for web development now. But at the end of the day, JavaScript is just a super set of, or sorry, TypeScript is a super set of JavaScript, so all of this is available in JavaScript.

Sam Brace: Okay. No, that makes perfect sense. And yeah, it I, everything I’m seeing here is just JavaScript in general, but I just wanna make sure that was clear cuz it’s where you I can see people that are maybe new to some of these concepts being like, oh, this JavaScript is not TypeScript, but JavaScript is TypeScript and I wanna make sure that it was clear.

Brad Garropy: Yeah, for sure.

Sam Brace: So now that we’ve seen these different processes that are taking place, one thing that I also wanted to ask you about, cuz I’ve seen it in a few of the examples you’ve shown, was this f_auto and q_auto. That’s coming from Cloudinary, of course, Cloudinary, we’re calling this auto format auto quality, and it’s dealing with making sure that images are compressed to a [00:45:00] certain value, making sure that it’s delivered in the most optimal format based on the browser.

Talk to me about more about why you decided to use this and how maybe you’re applying it to your images.

Brad Garropy: Yeah, so going down this path of image optimization, I’m using Next.js, but I’m trying to migrate off of it, but it’s like a process because you have to pull yourself out of their APIs one at a time.

So the first one that I got away from was the Next image component in React, which did a lot of this stuff for you. But I wanted to just write code that kind of works everywhere and be able to take it with me instead of being so bought into a specific framework. So when I lost image optimization, I was like, oh man, it’s gonna hurt my web vitals.

Maybe my SEO will be worse. So Cloudinary was like one of the first things I looked at because one, the free tier is ridiculously good, and two, they offer all of these transformations that are so easy to apply with the [00:46:00] URL of your image. And I was constantly writing in Markdown, so I just needed a way to access these images via a url.

I was, I didn’t wanna store them in my GitHub repo. It was getting too big for that. So I offload it to Cloudinary. And one of the things that, that Cloudinary does offer is image optimization. With this particular URL path, you can add in these this comma separated list of keywords that affect how your image is brought back to you.

And you could do like a lot of really cool things here. But the basics in my opinion are your format. Like essentially what file type this is. Is it a jpeg, is it a PNG, is it a svg, is it a WebP? If you use f_auto, Cloudinary will figure out the best format for the browser or device that you’re on and deliver that.

So I could have uploaded a jpeg, Cloudinary will serve a WebP if that works [00:47:00] best for your browser. And then the second thing that I have here is q_auto, which affects the quality of the image. If you’re serving it at, a hundred percent quality, you could probably get away with a little bit less, to be honest, and nobody would know the difference.

And I think just to test this out, what if I did, I think it’s q_10. Yeah, that looks much worse. I don’t know if you can tell, I don’t know if you could tell through the thing, but auto looks just as good as q_100 at the end of the day, but it’s a much smaller file size. Like you, you’re not gonna be able to tell the difference between a 100 percent quality and q_auto and it’s gonna save you bytes or kilobytes over the wire, meaning your website’s faster, higher SEO, better core web vitals, all that stuff.

Becky Peltz: I’ve gotta congratulate you on… you did a great job of explaining q_auto. I mean it, I think we should encapsulate this in it. [00:48:00] Very easy to understand.

Sam Brace: And I just verified it. I pulled it up on my screen as well and checked your profile page on your blog and yep, you’re absolutely right. Take the jpeg, it converted to WebP because I was using Chrome for my browser.

And so it, it makes perfect sense what you’re describing here. And one, once again, kudos for you to understand optimization to that level. But one thing that I would, I’m curious about is how are you applying f_auto and q_auto to your images? Are you baking that in through some form of automation?

Is it a manual add? How is this taking place?

Brad Garropy: This is something that I need to improve. I finished this image transition not too long ago, and right now what I’m doing is literally just using the Cloudinary URLs in my Markdown sources with f_auto q_auto in them. Going back to like my actual blog source code, you’ll see down here this Cloudinary image has that in there.

And I, that’s [00:49:00] actually something I was looking for is I don’t really wanna write another like a Remark or, yeah, this would be a Remark plugin to add these in there. I feel like there’s gotta be some setting in Cloudinary that says, just serve all my images like this by defaults all the time. So what do you say? Do y’all have that kind of feature?

Becky Peltz: We I think that feature, yes, in a sense we have a feature. But for developers, I think what we like to do is we have a SDK for JavaScript that allows you to add that kind of on the fly, or especially if you’re in Next, they can have it pre-processed, through the s… there’s or if you’re using Remix something, if you’re using an sdr… ssr, you can have that done ahead of time.

But yeah, so the SDK, I think is the easiest way to do that [00:50:00] automatically. And you could, you could use a JavaScript SDK. There’s React and if you’re doing React you could also have a microservice with Node that just did that, so you could just have that be your optimizer as you’re… and generally I would say you would be doing that during your building of your pages rather than real time.

Yeah. And I will throw out here that one of our DevRel, Colby Fayock, has written a plugin for the Netlify. So if you’re deploying to Netlify, he uses what’s called a fetch type, which is letting it uses Cloudinary to proxy your image. So say your image could be sitting in your own assets folder on your website.

He’ll go out, his code will go out, grab it and f_auto, q_auto it, and get it into our into your [00:51:00] cloud or product environment. But it’s, it will leave the source of truth as your list of assets. So if you change that, it could get updated cache. But yeah. There are a couple of ways I think developers are doing this in that way, in and on, but I could bet you could come up with an automated way that would be even cooler than that.

So I don’t wanna tell you.

Brad Garropy: Yeah. I’m telling you it’s… Markdown. While it’s very great it’s, you’re not like in a runtime environment where you just have access to these URLs and can, and transform them and stuff on the fly. This is a very pre-compiled type thing where you’re working with raw source, trying to transform that.

Yeah. I gotta go back to the drawing board on some of this stuff. See if I can make it better. For sure.

Becky Peltz: Yeah, some of those functions that you see in the Next framework where they are grabbing your Markdown and doing some processing during the build cycle. [00:52:00] Those are those are great places to, to do that.

Sam Brace: So looking at this again and we’ve also alluded to some of this because we’ve talked about what our next steps for this type of project or what’s next steps for your blog presence, but what else are you cookin’ up? What other things are you doing when it comes to your blog, the delivery of maybe images, maybe not? But what’s on the roadmap for Brad?

Brad Garropy: Yeah, so I’m, like I mentioned, I had this effort to move my blog off of, I’ll show you what it looks like. Migrating my blog from Next.js over to Remix and in the process, trying to just take a lot of code that was very Next.js specific, like their image component and pull that out into kind of framework agnostic packages or code that lives in my repository because this website switches frameworks once or twice a year. And I just want that process to be easy, [00:53:00] essentially everywhere I go. So if I have one function that transforms my Markdown and grabs my Cloudinary images and stuff, then I can drop that in any framework anywhere and put it in the compile step and it’ll be just fine.

So it just helps me explore new technologies and makes me feel like I’m not like buying into one framework or one hosting provider or anything like that. So in this transition, I’ve had to do a lot of work. I had to get rid of the Next image component. I’m moving all of my CSS over to Tailwind because that just works a lot better in the Remix model.

And then at the end of the day, I actually have to make the migration over to Remix. So it’s a large effort, but it’s something I like doing cuz I always view this website as hopefully, the best thing that I can produce showing like where my skills are at today because it’s kinda like my landing page on the internet.[00:54:00]

Becky Peltz: All right. That’s a great idea to think of your blog that way is that you’re continually having it reflect what you’re interested in. The technology that you use to build it is the stuff that you’re working on. That’s a great way to do it.

Sam Brace: One question I have for you that you just mentioned, Tailwind.

Talk to me a little bit about that, because I see this constantly coming up in developer blog posts. Evangelists are talking about Tailwind in different places. We have not covered this topic at all when it comes to DevJams. Tell me just basically in your own words, what is Tailwind? Why does it matter? You mentioned it in the vein of CSS. Anything, details like that could be really helpful.

Brad Garropy: Yeah, Tailwind is a collection of CSS utility classes. So what that means is there’s a like a color blue class or a color red class, or a color green class or a margin [00:55:00] left two class.

And they’ve got like hundreds of classes and you might think that’s overwhelming. And when you first pick up Tailwind, it is, and all of these classes are just applied to your HTML elements. So if you wanna style something with 10 different styles, you’re putting like 10 different class names after that element.

And the first thing that people say is, Tailwind is ugly, but , you don’t understand the benefit. They think the authoring experience is ugly, but they haven’t thought through of why this matters, why it’s different than something like CSS modules or using even vanilla CSS or, using some other like Bootstrap or something.

So in those other solutions, the size of your CSS grows over time because CSS cascades, you’re afraid to remove things. So you style something new and you’re like I guess I just have to make a new class or selector and add styles there. [00:56:00] And so what happens is your style sheet just keeps growing.

And it can grow infinitely. Like even if you wrote your styles very well. Your website gets larger and you keep adding more css and that will grow indefinitely. Yeah. As you add more pages. Tailwind is cool because it has a set number of utility classes and that never changes. And those utility classes essentially enable everything in css.

So your CSS file stays the same size no matter how big your website gets. What’s even cooler is that all the classes you don’t use, they strip out. So your CSS file is exactly as big as you need it with a maximum size guarantee. And what’s even better is that CSS file is generated and it’s super cache-able.

So like you’ve got one declaration file, it’s cache-able all over your website, so anytime you go grab it, it’s very, very fast.

Becky Peltz: Yeah. I have to say too that it’s CSS is [00:57:00] hard. Anybody that’s worked with it. Yeah. The fact that the order of the elements in your CSS file has a big effect on what, how they’re gonna get interpreted is a hard thing to teach people.

And I worked on a project once where a guy looked at our CSS and he said, oh, I think this would be better if I alphabetized it. I was just like, terrible mess. I was like no. That’s not what it’s all about. So yeah, it’s a hard thing to understand CSS and how so if someone gives you CSS that’s all nicely formatted and guaranteed, and like you said, small, cache-able, all that, it makes a huge difference.

Brad Garropy: Yeah. And that’s the performance benefit of it. I actually haven’t talked about the the authoring benefits. They have a vs code plugin with IntelliSense that’s so good. It’s like TypeScript for css and it like has inline previews of all the colors and [00:58:00] descriptions of every property. It’s amazing.

So like it actually has a better experience than writing vanilla css.

Becky Peltz: That’s cool. Yeah.

Sam Brace: It’s really cool. And I’m glad you went into that detail because we actually got some comments in the… from the people that are watching this asking about CSS with this particular project. So I think this was very enlightening to be able to dive in and tie that into what we’ve been able to cover with all the things that we’ve talked about so far.

So thanks for that. Absolutely. And so it does seem if people are wanting to stay up to speed with what you’re up to… main… going to your main website or your blog is the best place to do so, but I also know you’re probably active on a few different social media areas. Is there any particular place where people can get the latest and greatest that Brad’s working on?

Brad Garropy: I’m all over the place. I do a lot of stuff but I’m very active on Twitter. That’s how I like, find out all about web development. I, hang out with all my friends there and stuff like that. So that’s [00:59:00] twitter.com/bradgaroppy. Actually, if you’re seeing my video, I’ve got @bradgaroppy.

That’s my handle everywhere. So I’m on Twitter. I have a YouTube channel where I make web development videos. I even talked about converting my website over to Next.js when that happened. And you can find me on GitHub @bradgarropy, as well as Twitch. I stream coding every now and then over there on my Twitch channel.

Sam Brace: Yeah, as we can see from your amazing mic and camera set up, hopefully you’re on that.

So that makes perfect sense to me too. But this is amazing, Brad, and obviously this is, in my opinion, this is probably just one step of a multi-part journey that is taking place with the blog redevelopment, reconstruction, working with images in these different ways.

So hopefully this isn’t the last time we talk, so if you have anything else that you’re working on, especially when it comes to the Cloudinary side of things, reach out and we’re happy to have you come back on any time. [01:00:00]

Brad Garropy: That’s awesome. Thank you. Absolutely.

Sam Brace: Thank you. Let’s say goodbye to Brad real quick.

Thanks again, bud. And we’re gonna go ahead, quickly sum this up. Becky, after talking to Brad, what do you feel your biggest takeaway was?

Becky Peltz: I just love the descriptions of why these things are done. Like understanding the web core vitals aspect of this. It’s such a simple thing to be able to have those width height attributes, but they’re not available in Markdown.

And so to come up with a way to, to make them available makes a huge difference. And the demo on that was really good. And just getting the overall understanding of this AST and how powerful it is. And he’s able to just spin this up in a JavaScript file, even TypeScript, but it’s basically JavaScript.

So really great to hear all that. And just a really well rounded look at where a web developer might be in this [01:01:00] time and space. Working through problems that we all are encountering with browsers and such.

Sam Brace: Absolutely, and it’s something that I’ve been hearing coming up a lot from many different people that work at Cloudinary is there’s conversations taking place about ways that people can be working with images better with Markdown files.

And I think basically Brad just demystifyed that entire thing. So if someone’s saying, how do I work with Markdown and images in general, but also Cloudinary images, then we just showed you an amazing example of that. And I think that’s something we’re being able to understand the processes, as you said, being able to understand the connection between this and abstract syntax trees, ASTs, it now is now coming to fruition and hopefully we start seeing more people using the work that Brad did developing the plugin or the work that he did in his GitHub repo, applying that to their own [01:02:00] projects for future uses.

Becky Peltz: Yeah. And I love that he gave so many good plugs to Cloudinary because we didn’t ask him to do that. Nope. But he really did seem to be able to embrace what’s going on there and just start working with it right away.

Sam Brace: Absolutely. Absolutely.

And I do wanna emphasize that if people enjoyed this episode, once again, make sure to follow everything that Brad is doing and then sim… similarly make sure that you are following everything that we are doing here with the DevJams program. Of course, when this episode is available on demand, you will be able to get access to that just by simply going into Cloudinary dot com slash podcasts.

And also, as mentioned earlier, if you are interested in seeing any of the past episodes, they are all there, including in all the places that you are likely consuming podcast content such as Spotify, Apple Podcasts, Google Podcasts, YouTube, and even in our own training academy that we have for Cloudinary, also known as the Cloudinary Academy.[01:03:00]

So make sure that if you’re so interested in DevJams and what we’re talking with, because we’ve profiled amazing developers, including people like Brad. So this is definitely not the first. This won’t be the last, and we hope that you guys are enjoying this overall experience. Becky, any final words before we let our audience go for the day?

Becky Peltz: Oh, I’m just gonna go out and try Remix now.

Sam Brace: I agree. I’ve definitely been inspired to dive into a few things that Brad showed in this episode. So as we say regularly, this inspires us at Cloudinary just being able to see all the things that you guys are up to. So thank you again, and we hope to see you all at future episodes and future streams of DevJams.

Take care everybody. We’ll see you soon.[01:04:00]

Sam Brace: [00:00:00] Welcome to DevJams. This is where we talk with developers that are doing some amazing things when it comes to website development, mobile app development, and as you’re going to see, development that is starting to get into the blockchain and involving NFTs. But what that ultimately means is that they’re probably using Cloudinary in those projects in interesting ways, which is how they got on our radar to be in a DevJams episode.

My name is Sam Brace. I’m the Director of Customer Education here at Cloudinary, and joined of me as the co-host on all of these DevJams episodes is Becky Peltz, who is our curriculum program manager for developer education at Cloudinary. So Becky, welcome to episode. Glad to have you back.

Becky Peltz: Hey, glad to be here.

I really like this whole project. I’m super excited about it. It took me a while to totally understand [00:01:00] it before to get a understanding ahead of time, I had to read some blogs and so I’m really looking forward to hearing Daniel explain this cause I think there’s a lot of concepts here that we need to build before we totally can appreciate what’s going on here.

Sam Brace: I agree with that because it’s a multi-layered project in many ways, because they’re doing certain work in the blockchain, so that makes it a web3 project in certain ways. They’re doing certain things with non fungable tokens, also known as NFTs. They’re working with certain marketplaces where certain details can be sold.

They also have an aspect that’s tied to physical goods as well as digital goods. It’s a very cool project that we’re doing with Legitimate with, we have the tap project that we’ll show here. We have the drops by legitimate, so there’s a lot of different things that are here, but what it ultimately shows is that when we’re looking at media management and delivery, there’s a lot of new ways to be thinking about it that Daniel’s gonna talk through in this episode.

But [00:02:00] also it shows how spaces like that are things that Cloudinary and other vendors can definitely live in and be very, very helpful when it comes to those projects. So there’s tons of data here that he’s gonna share. So in my opinion, out of all of the episodes that we have shown, this is one of the ones that you may need to pause, go back and listen to again, because there’s so many nuggets of knowledge that are shared throughout this piece.

Becky Peltz: And having Cloudinary on web2 and interfacing with the this application on web3 allows you to really kind of understand the difference between them, and then why we still need both of ’em, why we still need web2. So it’s really, really great learning here.

Sam Brace: Absolutely. Absolutely. And if you thought web3 was only cryptocurrency, oh my gosh. Daniel’s going to blow your mind, let’s just put it that way. Cause like I said, I can’t say it enough. There’s a lot happening here. This very cool, [00:03:00] cutting edge project. Let’s get into it. Let’s talk to Daniel and learn more about Legitimate and all the work that they’re doing over there.

And then once Daniel and Becky and I wrap up, don’t turn off the episode because we have some key takeaways for you that will help summarize the points that are raised and maybe help you with your next project, especially if you’re trying to get involved with any of the things that are involved with the blockchain, NFTs and more. So see you in a little bit.

Daniel, welcome to the show.

Daniel Duan: Hi Sam. Thank you.

Sam Brace: So Daniel, before we start getting deep into this project, and there’s so much to talk about when it comes to what Legitimate is doing between the various projects that are you guys are taking part of, I do wanna take a chance just to talk a little bit about you.

So tell us about you and how you got into software.

Daniel Duan: Yeah, so brief intro about me. I’m Daniel. I’m the head of engineering here at Legitimate. I got involved with Legitimate when Calvin, the [00:04:00] CEO and founder, also one of my good friends from college basically pitched me the idea of connecting the digital and the physical through the use of NFTs and blockchain.

And I think right now, it is an exciting space to be in because there’s a lot happening on the web3 crypto blockchain front. And also because we get to work with a lot of cool artists and brands and providing them with the technology that can really unleash their creativity without having to worry about the technology and the technical side of things. In terms of where my technical background is, I studied computer science at UCLA years back.

I spent some time at Squarespace doing content management system related things, really focusing on performance and usability of the websites that are built on Squarespace and also the building experience on Squarespace. And then after that, I spend some time at goat.com, which is a sneaker resale platform [00:05:00] because they are an e-commerce platform, performance and usability is really front and center in the product roadmap. And a lot of times we try to optimize the checkout flow to be easy to use and also as fast as possible. So more users get funneled through that process and ends up converting more transactions that way.

So, that’s a little bit about me.

Sam Brace: So I can see some of the connections between some of the things that we’re gonna talk about where having something like Squarespace where obviously it’s driving websites, easy to use interfaces, make it simple for people to publish, moving into the sneaker space, obviously we’re gonna be talking about physical goods and fashion and a little bit here, but what was the thing that got you interested in some of the other aspects of what Legitimate is doing?

Like NFTs, web3, working with the blockchain? What, what got you going here?

Daniel Duan: Yeah, so I think a lot of the newness of the web3 and also just how early on we [00:06:00] are in this blockchain technology, it really allows us to drive the behavior or what is the definition of a product on the blockchain.

So that in of itself is really exciting. And then the other part is that I get to use some of the learnings that I had from the previous jobs in, in this new job as well. So, a lot of the processes around like authenticity and around e-commerce and sale, we’re actually doing that with the marketplace

part of the protocol that we’re building on Legitimate, where we help the creators sell the physical NFTs that they create. And on the other hand is the website building experience. So we do allow creators to customize the experience that pops up when a Legitimate tag is tapped with a phone.

And so a lot of that is the website building experience and being able to host different types of content and also optimize for that as well.[00:07:00]

Becky Peltz: So now that we’ve heard about your background and you have a really strong background in e-commerce, can you show us your products? Can you start to talk about your tap and drop products and the artifacts that go with them?

Daniel Duan: Yeah, so let me share my screen here and I can go right into it. So, the company website that we have shows the typical interactions that you can do with the physical NFT product that we have. So the physical NFT is comprised of two components. One is the digital NFT that comes with the product, and two, the physical chip

that we encode and integrate onto the products themselves. So, for something like a sneaker or a painting, the tag could be either placed on the shoe in here somewhere sewn in, [00:08:00] or it could be attached to say, like a flat surface on a painting. And with each of these trips, it emits a single use link that the user can then scan with their phone and it pops up on their phone,

and view the provenance information, the item information, details, things like that. And also additional exclusive content that maybe the creator might want to include as part of their digital experience as well. And, with this chip, because the links that it emits through the NFC tag is a single use link that ensures that the chip cannot be duplicated and the one to one connection between the NFC and the NFT is always there. So, the user can tap it, by putting their phone near the NFC tag, and then it’ll bring up a special site that we have for them.

Becky Peltz: So just to get a bigger perspective here, what you guys are [00:09:00] doing is bringing retail into the blockchain and therefore blending physical and virtual.

And the chip is a conduit from the physical into that virtual, and you have this tap product that allows a person to, with a cell phone to read that

chip. And right. Access. Yes.

Daniel Duan: So, the tap site is part of the customization that we allow the creators to do.

So a lot of the cooler things that we’ve seen with what people have done is some artists, maybe they do performative art. So the end product that they create is only part of the story that they’re trying to tell. The painting process or the creation process is the other half. And being able to include that into the chip with a video that’s shown when a person taps the tag with their phone. That’s really powerful and that’s something that traditional art doesn’t really benefit [00:10:00] from,

and I think we are able to create. So this is just a demo tag that we have here, because this is on the blockchain, you can see that we meant the NFT and whoever is the owner of the NFT will also show here. And on OpenSea, you are able to bring up the provenance, how many transactions it’s been through, which previous wallets have owned this NFT and things of that nature.

And through the use of this blockchain, you are able to trace the previous sales, transactions and things like that. Yeah.

Becky Peltz: You’re both bringing the retail into the blockchain. You’re providing this extra digital experience.

I know you also are using this to provide authenticity for the artwork.

Daniel Duan: Yeah. So let, let me show you the chips actually. Cause I think that will answer a lot of the questions around how this actually works. [00:11:00] So we, we have two different types of chips. One is a really thin flat sticker and the other is a plastic more durable type. So with these stickers, we usually advise to the creators to integrate it under a product label or things of that nature.

Whereas the chip, you can see it has a little bit of thickness, but something like this could be sewn in maybe to like a clothing tag on the back of a t-shirt or like inside a suit jacket or something like that. And through these chips right here, because you are able to, let me bring up my phone so I can show you the actual tapping experience with these NFC tags that we have.

Anyone with a smartphone can bring up the website through the tapping, and then see the actual information of each tag. So this is a demo one that I just showed off earlier and [00:12:00] the user can see that Legitimate minted it. The Legitimate currently owns this one, and they can go into OpenSea and, and take a look at what other metadata or provenance information that’s displayed through OpenSea.

And because it’s an NFT, it works on other NFT platform as well, not just OpenSea. So

Becky Peltz: anyone familiar with reading QR codes on their phone is gonna have no trouble picking up this information on the blockchain?

Daniel Duan: Yeah, I, I think this is actually easier than QR codes because you don’t have to even bring up the camera.

On the newer iPhones, you put it next to the tag, it will pop up. That’s nice. Yeah.

Sam Brace: So I’m seeing the overall flow that we have here. We have something that, it’s a physical space item where we have, as you said, it could be a painting, it could be a piece of clothing. Someone has tapped it. I would imagine that’s the right terminology for what they do.

They bring that up onto their [00:13:00] mobile device and they’re able to easily see all of the details to it. As you were saying, pointing them to the NFT marketplaces like OpenSea, but how are you handling the overall development of this? Like how did you connect all of these different pieces together?

And I can also see there’s of course, imagery and video of all of this too. I’d love to know some more about the underlying components of this overall structure.

Daniel Duan: Yeah. So, we do host our images on IPFS, which is a distributed file system. But because the distributed file systems aren’t usually built to scale in terms of performance, we put Cloudinary on top of that to help us deliver the images in a fast and optimized way.

I do have a component that I have pulled up here where, actually, let me find this. So, let me share my screen one more time, and I can go over the component that we do have to show the image. [00:14:00] So, on IPFS, the image URL that we do have in our backend is usually something that starts with IPFS.io, something like that.

We do run our own gateway that fetches the image from the IPFS, passes it through our domain. This is mainly to ensure that the Cloudinary side of things, it doesn’t fetch from other domains and other people use our account, and usage data on our Cloudinary account, right?

So with that image that is fetched, we asked Cloudinary to basically say, pick the best file format that is for the end user device and also the best quality that you think is, you know, optimized for whatever delivery of that content. And then we ask for a specific set of file sizes, and we let the browser determine which is the more optimal resolution to [00:15:00] display.

So, we start with 200, 400, 800. It goes up to about 4,000. And, that is the native resolution that we shoot these product images and things like that at. And if you imagine 4,000 times 4,000, we have transparency in our images that, and we upload these in PNGs. They’re about eight megabytes.

And to deliver that is insane to end users. And so, fortunately Cloudinary makes it really easy. We basically tell Cloudinary all these parameters, and most of the time for Chrome and for newer Safari users, I believe it delivers in AVC image format. It ends up being somewhere around 2000 times 2000 couple hundred kilobytes.

Super easy, reall