Serving Optimized Docusaurus Images with Rehype, Markdown and Cloudinary

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.