Dive into All Things Digital Media

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, really quick. So that’s what we’ve been using Cloudinary. And one of the things that we do also want to migrate onto eventually is the the video asset that we have. And I think Cloudinary [00:16:00] also offers a pretty cool set of APIs to do that. We just haven’t had the engineering bandwidth to do that product migration.

Becky Peltz: And by way can I mention that this GIF that you just shared, you’ve actually shared with us. So we’ll be able to share with the audience that this is code that they can look

Daniel Duan: at. Yeah. And I think a lot of that is usable across, not just us, but anyone else as well. So I hope that helps.

Becky Peltz: It does. Yeah.

Sam Brace: One thing that, I want to unpackage with this because I think we said it, and I know what it is, you know what it is, Daniel, but IPFS is something that might be new to a lot of developers, especially if they haven’t gotten involved with web3 or the decentralized space in some ways. Can you explain a little bit more about what ultimately IPFS is and why, maybe it’s a vital part to doing something that’s going to be similar to your business?

Daniel Duan: Yeah. So in terms of companies that do run in the web3 [00:17:00] space, we want to decentralize as much as possible when it comes to our providers, our services, things like that. So that ultimately the images and the assets that do come with the NFTs live as long as possible. And we can do that through IPFS because they are distributed, multiple people can host copies of a single file, and when you request it through the IPFS protocol, any one of these people can send the file back. And how it works is really, it’s like going into a room full of people and asking like, hey, do you have this file?

If you don’t, you ask the next person and sometimes these people will help you ask their friends, family, people who they know to fetch this file for you. And I think that’s the cool part of this distributor system where it just fans out until you find this file and then it gets back to you.

Now the [00:18:00] downside to that is that it is obviously slower to ask multiple people versus one single service like Cloudinary, and I think that’s fine for long term storage, but for you know, more immediate needs like an e-commerce store or like a digital user experience, I think, Cloudinary plus IPFS, that’s the better solution.

Sam Brace: And I was just gonna say that, I like, Daniel, way to summarize exactly what I was going to summarize it, because it does seem that when I’ve seen NFT marketplaces, others that are doing things with NFTs in different ways, sometimes where they try to shoot holes into the way that they’ve developed their architecture, develop their business is they say, well, wherever these images are hosted, wherever these videos are hosted, that you might be purchasing as non fungible token,

it’s where if that goes down, you lose your asset. But I think by making sure that you’re focusing on performance [00:19:00] aspect with Cloudinary, but also ensuring that your file always is there because of this decentralized aspect, that part of IPFS, it adds this really nice blanket of security, in my opinion. So I do think they combined very, very well.

If you get into this type of space.

Daniel Duan: Yeah. And that’s pretty much why we use it. And I think a lot of marketplaces or other projects, they end up standing up their own like image service. And I think that’s a huge level of effort and also just cost and other things like that where for us. It makes more sense to just pay a vendor, get the guaranteed service that we do get and move on to other things that we do need to build custom.

Sam Brace: The other thing I wanted to ask you about is I saw right at the top of the gist that was there, you’re building everything with React, it seems like. What do you know about like the decisioning? The reasonings that that Legitimate decided to go down the React path? Because that is one area that we find a lot of our [00:20:00] developers that are involved Cloudinary, we’re always trying to figure out what new framework, what new things should I be building my project against?

And you seem to have chosen React. What was the reason?

Daniel Duan: Yeah. So, we think that a lot of the things that we’re building in terms of the product side is very new, that we want to build on a foundation that’s reliable and also well supported. React has a huge ecosystem of testing libraries, tools, build tools, optimization tools.

And Facebook is still actively developing on it, creating new features and things like that. So it’s a very solid foundation to build on versus other newer frameworks and things like that. And it’s also easier to hire developers for, easy to find API vendors for, you know. Like Cloudinary, I think you have docs that are specific to React. So we can just copy and paste the code instead of saying like, well, in [00:21:00] this framework, how does this translate with this JavaScript API. Do I need to write a new component, new util, things like that. We don’t have to do any of that.

So, I think that’s great. And there are also a bunch of other external vendors that, that we do use as well. And they mostly all support React. So that’s been pretty great in terms of just engineering velocity as well. One thing I don’t think I shared yet is the drop side of things, which is the platform that the creators of our NFTs can use to sell and transact their physical NFTs, their creations.

So let me share my screen again and we can go through that and also some of the technologies that power that as well. So this is the drop site. It runs on Next js, which is the server rendered version of React, basically. And we chose that because it is an eCommerce site, where you get to bid [00:22:00] on different products and creations that artists brands have created and things like that. And because, we do want to convert users into bids, speed and reliability is front and center for this platform right here. And, also a lot of the marketing side of things, we do want to optimize in terms of processes and this is where builder.io came from. So a lot of the content that you see here on the site that’s more marketing related, these are actually all builder.io blocks or, pages that are configured. And I believe they are one of Cloudinary partners as well.

So just want to highlight that they’ve been very helpful in reducing the amount of, you know, engineering efforts spent on marketing content.

Sam Brace: Yeah, and I, that’s one thing that’s I think very smart that you guys have done, because obviously you’re the head of engineering. You’re someone that understands developers, you’re a developer yourself.

But the people [00:23:00] that have to ultimately maintain a lot of these websites, they’re not developers in a lot of cases. They’re people that are tied to marketing. They might be tied to understand just content management and be able to put a nice user interface, essentially a wrapper around the content management system, like the way the builder provides it.

It’s a very good technique to try to get more adoption rather than people saying, Oh, that CMS is so hard to use. So I think you’re doing a lot of really smart things by building up this infrastructure that I’m seeing of Legitimate, by including some vested vendors for sure.

Becky Peltz: You’re running with Next.js and Vercel is also a Cloudinary partner, so we are all in a mesh here with this.

Daniel Duan: Yeah. Yeah. I, I think my philosophy here is that if I can pay a vendor to do something, it’s cheaper and easier than spending our own engineering time to build the same thing out and possibly a lot more reliable as well. So I think some of the cooler content that we’ve done, with builder.io io here is like, say, you know, we want to embed a video [00:24:00] showing how the tapping mechanism works.

Like this is all builder.Io. We spent five minutes putting the builder.Io block in. That’s it. And I think for one of the items here, we also included a promotional video that is also part of the marketing effort that we did here. And this took two seconds to upload. That was about it.

And we did also like two different revisions of this video. And the marketing team was able to just do that themselves. We didn’t have to spend any engineering effort to swap the videos in and out. So, that was really great as well.

Sam Brace: Like I can see looking at this drop site now that we’ve seen an example of like a product, you’ve kind of gone into the product detail at this point.

I can see why you shoot the images at such a high resolution. It’s where you want be able to zoom in, see the textures, see the actual fabric detail that’s associated with it and sometimes that’s not necessary. So that’s why I love what you’ve done with the different [00:25:00] breaks that you have for your sizing that you go all the way down to 200 pixels in width all the way to 4,000 pixels in width, or up to 4,000 pixels in width.

And that’s because you legitimately need, no pun intended, all of those sizes. So, I can see the purpose here for sure.

Daniel Duan: Yeah, so I think for purchasing artwork especially, like you want to see the nitty gritty details. You want to see texture, why someone created something or just like upfront and close when this is hanging on your wall, you know, what do you see?

And I think replicating that online as much as possible really makes sense for us.

Becky Peltz: I’ve heard this website drop referred to as the Christie’s or Sotheby’s of Web3, and it makes me wonder about the problems that you were trying to solve when you moved retail into web3, because there is that link there.

Daniel Duan: Yeah. For the transaction that are happening for physical items on Web3, [00:26:00] I think that’s the difficult part of the equation where we have to make sure that the buyer gets the NFT and the physical item together and that when, that is resold or transferred again, that both things go hand in hand.

And so we do have a locking mechanism that’s built into all the NFTs, physical NFTs that we do create, where we ask that the new owner of the digital NFT tap the NFC chip that’s on the physical item, in order to unlock the metadata after the transfer of each NFT each time. And because we lock the metadata that comes on the NFT side of things, we incentivize people to fetch the physical item,

and also own both of ’em at the same time. So they are able to unlock the digital side of things and because their wallet address or their Ethereum name resolution [00:27:00] resolves to their own wallet, if someone else owns the digital version but not the physical item, it incentivizes them to also grab the NFT instead of selling two of them separately.

Okay.

Sam Brace: One thing I wanted to ask you about, cause Daniel, this is a very eloquent situation that you have here. You’ve created this amazing pathway to create this connection between physical and digital goods. And it’s gonna be working for the emerging technology that we have, but, in terms of developers, of course when they’re going through and developing something, it’s almost experimenting as they’re going along the way.

Is there any like big roadblocks that your team encountered when you were going through developing all of this that you feel like maybe would be good for others to not do or not encounter that roadblock in the future? Cause I think it’s definitely where, I feel like if I were to try to do what you guys have accomplished, I would fall on my face immediately.

Like there’s just, there’s so much greatness that’s happening here. So [00:28:00] give me any, anything that our audience can learn that you’ve learned along the way.

Daniel Duan: Yeah, so I think a lot of the major roadblocks are related to just how new web3 and the tooling and development environment and things like that are. And so like we’ve encountered a handful of bugs in the web3 libraries that we’ve used things like, how do you test making transactions on the web3 in an automated fashion, doing integration tests and things like that. There aren’t really established patterns to how to do these things just yet.

And I think as time goes on and the technology matures, we will see those coming up. But for now, I think everyone in this space is defining their own pattern and trying to get through as much as possible. So it is exciting but also pretty challenging.

Sam Brace: I agree with that. I think it’s where, like to my earlier comments about people poking holes and certain [00:29:00] parts of how secure unsecured NFTs are, I think it’s not to say that those vendors may have done anything wrong, it’s just where we’re learning so much about this space as you’re pointing out. It’s something where it’s fast, it’s growing, and of course there’s gonna be bugs along the way, or things that we don’t realize that’s even a bug or an issue.

So I think that makes tons of sense, why that would be a roadblock. And in some ways it almost feels unanticipated where because you are in web3, you almost have to be willing to deal with some of the bugs that come from it because it’s going at such a fast pace. Am I correct about that?

Daniel Duan: Yeah, I think, in terms of developing any product, whether it’s creating a library for developers to use, or for us putting physical NFTs out into the world, you really don’t know what people are gonna do with it until you give it to them, you know? And a lot of times, like some people might wanna screw with it and mess with it and see how they break.

Other people might try to create interesting use cases for specific things that we might have not imagined. [00:30:00] And enabling all that, putting it in front of people so they can play with it. I think that’s all part of the product process at the end of the day.

Becky Peltz: You know, another thing is a lot of what we read in the news is about the web3 and the prospect of buying currency and making profit on the currency going up. And what you’re doing is you’re not focusing on making more currency, but actually just transacting within that space. And so if capital flows into that space, it’s as the result of retail transactions, not just people trying to buy and grow their value of their currency through that.

Daniel Duan: Yeah, the value of our platform is really in the value that we create for our creators and partners who leverage our technology. So in essence, the people you know, who should really benefit from our technology are just creators. And hopefully, this increases the value of their artwork, their [00:31:00] creations and things like that.

But we don’t plan to be like a speculative coiner yeah or any of that. Very

Sam Brace: different.

Becky Peltz: I know, because you provide an authenticity by linking it to an NFT, linking the physical product to the NFT. In a world where people are getting into online consignment and they want to know that what they’re buying online as a used product is that very expensive purse or whatever, your development could lead to quicker ways to have that authenticity, to make that authenticity come true.

Daniel Duan: Yeah. Like the demo that I showed you earlier, anyone, you or I, with a physical tag and also a smartphone can verify the authenticity of something. I think that’s really powerful to put in the hands of consumers, right? So we don’t have to go to, say a consignment store or a professional authenticator to say like, oh, this is a real [00:32:00] thing.

Yeah. And in terms of the value that brings to that product now, because you’re able to authenticate yourself, you don’t have to pay the resale price of say, like, any of these consignment platforms that, that most people currently have to.

Becky Peltz: Yeah, and you’re gonna be willing to pay the asking price when you know that it’s an authentic good so to speak.

Daniel Duan: Yeah.

Sam Brace: So Daniel, I think we’ve covered so much here today and I know that hopefully our audience will start diving into Legitimate and all the projects that are associated with what Legitimate is doing and hopefully they also get a better understanding if they are planning on dipping their toe into the web3 waters, how they can be working with media in a better way.

Very similar cause I feel many of the things that you showed are absolutely best practices that when you are going into that space. Is there anything else that you can think of that you could say, this would be very important for audience to know, or anything that you wanna drive people to for more information [00:33:00] about what Legitimate is doing?

Anything. This is your time.

Daniel Duan: Yeah. So, we do have a company blog as well, blog.legitimate.tech. I can share that in a little bit. We actually just got done creating our new blog. This is hosted on Squarespace. It has a little bit of technology highlights around, what it is that’s powering our technology, but we really want to highlight the artists and their stories, and why it is they create and what they create.

So a lot of these artist spotlights are really on them. So that is a good place to get information on Legitimate and what we’re up to. We do have social links, Twitter, Instagram, we are on TikTok now as well, and LinkedIn. So find us on our company website and the links there to follow us.

Sam Brace: Wonderful, and I hope everybody does continue to follow the work that you’re doing. When we came across this [00:34:00] project, I was very inspired. I know Becky, I don’t want to speak for you, but we were both love. It’s great. It’s really cool. So I would say keep up the great work that you’re doing, Daniel and the entire Legitimate team as well.

And I hope to see some awesome things in the next few months, because this is a just in the time that we’re getting and talking with you as we were talking about this episode, it’s where there’s been big leaps and bounds of what you guys are doing. So you guys are moving at a very rapid pace, which is also very, very exciting.

Daniel Duan: Yeah, thank you for having me as well.

Really appreciate the time that both of you take to showcase what it is that we do and a lot of the cool things that we also do with Cloudinary as well.

Becky Peltz: Yeah, well we love seeing that you’re using f_auto, q_auto cause you’re optimizing for the web, so.

Daniel Duan: Thank you. Thank you.

Sam Brace: Becky, my head is spinning with all of the awesome information that Daniel was able to share this here.

And it just shows how [00:35:00] passionate they are about what they’re doing by showing off what artists are building, what their artists are creating, and showing awesome ways for people to be involved in that through their marketplaces, but also the authentication aspects of it. There’s so much here.

Tell me what got you going? What are your key takeaways from episode?

Becky Peltz: I like the idea that you could buy a hat and along with it, you could get the whole digital experience of how the hat was created. We definitely appreciate the authenticity

part of this whole process, but also the fact that you are getting these NFTs and they do contain lots of interesting information that just goes along with the physical product, and just the whole idea that you can actually pair digital stuff with physical stuff, with a little tag that you can just wave your phone pass and then pull in that whole digital experience.

So there’s a lot here and I think it’s gonna be really neat when this really gets into the hands of consumers.[00:36:00]

Sam Brace: I agree, and I think there’s so many angles that you can take with it, because there are some people that are very focused on authenticity, where we’re saying, hey, if I’m purchasing this unique brand, this specific brand, I want to ensure that it is what it says it is.

It’s just not a knockoff. I didn’t buy it from some cheap market or something along those lines. It’s to say, yes, this is real. This is exactly what I expected it to be. But I think the thing that Daniel talked about in his episode that wasn’t necessarily readily apparent to me was how this type of experience that they have going from physical to digital and creating that digital experience with

the consumption of that and also being able to be part of that, build that relationship with the artist and the person in a deeper way, I think is really even possible with a face to face interaction because now they can be contacting them. They can send them details about the next things are coming out.

They can explain the building process the way it took to be able to purchase the hat that you [00:37:00] mentioned. There’s just a lot here that I think will really expand the fashion space, the artist space in new ways if projects like Legitimate are really embraced.

Becky Peltz: Yeah, well, there’s a lot of people into consignment now too, and being able to authenticate when you want to charge a larger amount for it, that’ll be really nice.

You can do that without bringing in a bunch of experts to actually look at the goods. So that

Sam Brace: Yeah, Becky, that’s completely true. Wouldn’t it be nice to see like a big, big consignment situation, like a Poshmark or an Etsy be like, make this technology and, and

expand it and help all of our people that are selling vintage wear, maybe wears that they’re producing themselves, that are artists made. Like I could just, yeah, there’s so many applications to what they’re making here. Like maybe this is something even bigger than what we anticipated. Right.

Becky Peltz: Yeah. Yeah. I clearly see it as a very disruptive type of thing. Like somebody got a really innovative idea and they’re delivering on it. So that’s [00:38:00] really neat. It was really cool to hear him. Talk about those technologies, though, as you mentioned, the NFTs and then the IPFS. I really never understood that.

I didn’t even know what the acronym was, but inner planetary file system, that totally changed my view of a lot of things. Okay, so we’re talking about moving when we wanna put this images that are out on web3, on the web2, we need to move them from the interplanetary file system into something like Cloudinary.

And so we got to see that. And of course it’s done with all of the technology that we see and use a lot, React, Next js, and then a lot of technology that I don’t see a lot, but is just nicely blended into all these applications.

Sam Brace: Absolutely, and it’s one of those areas where this is a technology that is rapidly being iterated [00:39:00] upon new people, new vendors, new overall influencers are coming into this space that is web3. I think it’s one of those things where, as we said, we didn’t really have a firm understanding before talking to Daniel about what IPFS is.

I think even some of the marketplaces that they had, that was the first time I had ever seen some of those. So it’s definitely an area where if you’re feeling like, oh, this was all new to me, that’s fine. It’s new, it’s interesting and it’s showing that this is a space that yes, vendors like Cloudinary that really did a great job with web2.

It shows that it can work great in web3 too, but it’s where you have to be able to play with it and start to understand how the technology you love and use every day can fit into this new space.

Becky Peltz: Yeah, it could lead to a lot of things. Just the appreciation for the artist and the crafts people out there that are creating things.

You know, the idea that they could get those into the market and really own them and [00:40:00] actually follow their movement through different consumers. If that happens, it’s really exciting.

Sam Brace: Absolutely. It absolutely is. And I think the one thing that is also really cool about this be is that, it shows that web3 of course, meaning that you can read, you can write, but now you can own.

Right. Which is very, very different than the way that the web was looked at previously, where we had read, then we had read write. Now we have this whole new aspect to it when it comes to ownership and authenticity. Yeah, as we’ve shown in this project, but it’s not just some of the things that the media talks about on a regular basis like Bitcoin and maybe Ethereum if they’re lucky to be mentioned or things like that.

It’s not just about crypto. It’s not just about cryptocurrencies. It’s about all sorts of things and it just, this is scratching the surface of what’s gonna be available with the blockchain and web3 technologies for years to come. So I’m very excited to see this growth. Going

Becky Peltz: back to your point about the [00:41:00] owning, starting in the beginning, web1, I can remember the big term was content is king.

That was like this term you heard over and over because, you had to get something to put on your webpage. And that seemed in web2 to move to, hey, let’s get our users to write the content. And we were happy to on social media and now we are seeing, hey, maybe we can let people own that content and we can still build a business around that.

So that’s a really neat evolution.

Sam Brace: Yep. I completely agree with that. And hopefully we see this continue to evolve in ways that I can’t even anticipate, frankly. Maybe into industries that we can’t anticipate. But this is showing an amazing application. At least in the fashion space and also the space when it comes to creating unique pieces of art.

So once again, Legitimate is awesome. Good job, Daniel and the team, and hopefully this inspires you. If nothing else, to check out the great work that they’re doing. So now that you’ve gotten to the end of the [00:42:00] episode, thank you. Thank you for taking it all the way to the end with Becky and myself. And of course, if you had a great experience, go ahead and like and subscribe to any of the various episodes that we have here in any of the places where those episodes are delivered, such as Spotify or Apple podcasts, Google Podcasts, even our own Cloudinary Academy.

And of course, stick around because we’re gonna be putting out more episodes highlighting amazing developers like Daniel and others on future episodes of DevJams. So thank you again and take care.

Sam Brace: [00:00:00] Welcome to DevJams. This is where we talk with developers who are creating some pretty awesome projects. Maybe they’re inspiring, maybe they’re innovative, maybe they’re all of the above, but they also are typically using Cloudinary in ways that we consider to be pretty awesome to show off. So we want to talk of those developers and really start to break down their code, be able to break down their concepts and share them with you, so that way, you can hopefully start to take away some of those aspects for your own projects. Such as those next websites, those next mobile applications, or something else that I can’t even imagine that you have dreamt up and have started to build.

My name is Sam Brace. I am the Director of Customer Education here at Cloudinary, and joined to me for this episode as well as almost all episodes, is Becky Peltz. She is our curriculum program manager of developer education [00:01:00] at Cloudinary. So Becky, nice to have you here again.

Becky Peltz: Yes. Thank you Sam. It’s great to be here.

This is a really neat episode. I was very interested when I saw that somebody was accessing Cloudinary with GraphQL and Gatsby. Typically we’re just seeing, restful API access with Cloudinary, so this is a neat twist. And I’m really looking forward to seeing how this goes.

Sam Brace: Yeah. And I agree with everything you’re saying. This is the first time we’re really showing a project that uses Gatsby in a project. This is the first time we’re really diving into GraphQL in a deep, deep way. So if those are subjects that are interesting to you, and you’ve always tried to figure out how to build that next thing with those, and also figure out how you can weave in

Cloudinary for the media management or media delivery aspects of those, because it might be very image rich or video rich, then this would definitely be an episode that is worth your time. I think the Imaginary project that he was [00:02:00] able to build, and you’ll understand what that means here as you start to watch the episode.

I think it’s very cool and as we also allude to in the episode, it has a lot of interesting applications that could come in for people that are trying to display lots of images at once, maybe of a class of a, frankly, an organization. There’s lots of applications for what Tapas is built here.

Becky Peltz: Yeah, when I was looking into this too, I looked at his website and got to know him a little and I’m very fairly impressed with him as a developer educator.

He puts in a lot of effort and it looks really good, so lots to share there.

Sam Brace: Absolutely. So let’s get to it. Let’s go talk to Tapas and then stick around at the end of the episode where we have finished talking Tapas, because Becky and I will come back to summarize everything with some key takeaways that we have for you that hopefully will help you with your next projects.

So stick around and enjoy the episode. Tapas, welcome to the show!

Tapas Adhikary: Thank you, thank you very much for having me.

Sam Brace: [00:03:00] So for those of you that don’t know all of the amazing work that you’re doing, your background, of course, give us a little bit of detail about yourself. Tell us about Tapas.

Tapas Adhikary: All right. So hey, this is Tapas.

I’m from India, a place called Bangalore. Some of you might be knowing already. So this is called Silicon Valley of India. A lot of software companies and all are here, and I work in a company called MicroFocus as a senior manager, UI/UX. I have experienced around 17 years in doing software programming, writing code, building applications, and a lot of passion about teaching.

Probably I would’ve been a teacher if not software engineer. Yeah. So I like teaching, you know, that’s the reason I keep writing. I have a blog where people are publishing articles, the technical articles, everything that I have learned in over the years. I have close to 250 plus articles written, published on my blog,

on freeCodeCamp, CSS Tricks, and various other platforms. I also share knowledge using YouTube. That’s very recently [00:04:00] I’ve started and enjoying that. Apart from that, I’m on open source enthusiast, so maintain a lot of open source project, contribute to all the products that I like using, and like to mentor a lot of folks who want to embark the journey in terms of becoming a software engineer, just coming out of college.

So yeah, that’s what kind of I keep doing and personal life. I have wife, I have a nine years old daughter. That’s what basically I am.

Sam Brace: So what got you going? So you’re doing all of these amazing things. You’re publishing all over the place. You’re obviously software engineer as well, where you’re creating your own work.

What got you started on the journey? Because one thing that we’ve noticed with our audience for DevJams is that we’re talking many people that are starting that journey or maybe wanting to start that journey. Yeah. So how did it all take place for you?

Tapas Adhikary: Yeah, so see, I’m probably a regular software engineer, if I just take out all blogging, YouTube, and all other stuff, open source [00:05:00] things that I’m doing right now.

And it did happen from the start of my software development journey. I started all this probably three to four years back, just three to four years back. And when I look back and I see like, you know, oh man, I could have started it 10 years back, but only thing that I couldn’t do because probably I didn’t have a mentor,

who would’ve told me, hey Tapas, this is something else that you can do and this is going to help you, and in turn, it’s going to help many others. When I picked it up, then I started understanding like, this is not only about me. It’s about the developer community, right? It’s about everybody who is going to learn from my journey.

So what exactly happened basically, there are a lot of customer issues I used to fix, used to work with a lot of my peers, and I used to document each of the steps that kind of helped me to fix those. And later point of time, if somebody says, hey there’s a similar issue happened, could you please help us?

I used to give that document and they told, oh, it is kind of well written. It helped us. Then it kicked me like, you know, if I just make it public, it goes beyond my office. Probably there are more people who will come to know about [00:06:00] this. So I started putting that in Stack Overflow and things like that.

So there are more response started coming in. Then I thought, why not my own blog? So that’s how I started putting into blog, going to freeCodeCamp. This is like more and more readers, you get more and more people you get right, who get to know like who you are, how you solve problem and things like that.

There are so many people having similar problems. It’s just a solution that we have to take out and it’s solve a lot of people problem. So that’s all. That’s how it started actually in 2019.

Becky Peltz: I just want to say, don’t you feel that as you are teaching people so many things that you’re also learning, like when you find out about new problems and then you share the solution, kind of solidifies it for you?

Tapas Adhikary: Definitely. I think teaching is probably one of the best way of learning. And once you teach somebody, it is face to face or through kind of asynchronous way, like writing blog or things like that. You still get a lot of feedback from people. They might be doing certain things in a different way, and once they express that, then you think, oh yeah, there is a different way of thinking about doing about it.

[00:07:00] And you pick that point and you kind of learn from there. So I guess, definitely, I definitely agree with you.

Becky Peltz: Yeah, I think it’s a great relationship, the teacher student, and it bounces back and forth between the two people. Yeah. Yeah. So I just want to say one of the things that caught my attention. We have a feed that shows us people that are using Cloudinary and are getting published either in various places around the internet. What’s the name of your project that you’re gonna share? Imaginary, because we do see a lot of plays on the Cloudinary name and a lot of times it’s more like the cloud side.

CloudyCAM. We have an evangelist who created CloudyCam, but yours is called Imaginary. So we’re gonna be seeing this, and this is a Gatsby app that you’ve created and probably have made a decision at some point. Why would I choose Gatsby?

Tapas Adhikary: Okay, so I’m just trying to share my screen.

Sure. So that name Imaginary came from the fact that I was using [00:08:00] Cloudinary and I was dealing with image. So it’s like image plus Cloudinary, you know. That was one of the reason for doing it, Imaginary. And then all the images that you are seeing here are of actors or the actresses and all over the world.

And they live in a world of imaginary. So I thought, okay, both of things kind of coincide well and let’s name it as Imaginary. So what exactly this application is is I have a Cloudinary account, and I have bunch of images over there. And what I wanted to do is I wanted to build an app where things are kind of gets loaded very fast and I can actually call all the images that are there in the Cloudinary through some API mechanism maybe, and then get into a user interface using any of the technology and kind of show them in a beautiful presentation mode so that it looks great. Right? So, that was a actual intent of it. And, when I was actually looking for something like, you know, where I should [00:09:00] upload this photos and I’ll be pitching them and showing them, I was looking for any application or any probably SaaS provider, which provides speed and mechanism to put my media and then allow me to get into an application.

That’s when I come to know about Cloudinary. And if you see, like this application is not probably very recent. It’s like I have created probably a year or so back, right? And I was not very much aware of what Cloudinary and what it does basically. So this idea made me do a Google search and then Cloudinary came up and I read about that, and then I kind of did the generous free account. Thank you for that. And then I uploaded all these photos, did some of the property changes, like putting the captions, some of the property edits, and then tried to pull this information into a Gatsby application. The whole reason of doing it, like just learning.

Becky Peltz: Yeah. Well one thing, so like when I saw this application I was like, no, this is pretty cool. We’ve got this animated gallery of actors. But then when I [00:10:00] looked a little closer, so here I’m pulling up the inspector and I looked at the URLs and yes, you’re uploading there from Cloudinary, so you’re uploading there.

But you have the q_auto, f_auto in there. Yeah. And they’re in all of them. And so then I was curious to see, how did you do that? These are our big optimization, transformations for compression and getting the right format. So I was curious to look at that.

Can we take a look at the code?

Tapas Adhikary: Sure, sure. Let’s do that.

Becky Peltz: And Gatsby though, a little bit about Gatsby. How did you choose Gatsby? Because when I look at the Jamstack, there’s SvelteKit, very popular, developers love it. Next.js used by people everywhere. Gatsby also really popular. How did you make the decision to go to Gatsby?

Tapas Adhikary: Okay, so, Jamstack is one of my favorite subject. It’s always been that architecture really fascinates me, that, you know, you do something like, which is pre-built, it loads on your [00:11:00] client site very fast. And that’s when I started learning Jamstack and both the names that you have taken Gatsby, Next.js are probably the front runner in that.

I started this one with Gatsby. Reason being is there is a Cloudinary source plugin for Gatsby that was available and I wanted to explore that how it works. Gatsby has a huge plugin system. It’s like plethora of plugins are there that you can use and you just

do some certain configuration and boom, it’ll start working right? That’s the expectation. So I went out with that and this is how it worked. Maybe in future I’ll be creating another project with Next.js and Cloudinary. Maybe something different. But that’s how it actually started, like I wanted to explore how this plugin work.

I wanted to explore like it was minimal configuration, if it’s going to work out. And that’s the main reason I’m going through Gatsby. Another reason was, any source plugin that we use with Gatsby you can actually use GraphQL very freely, right? It also provides a GraphQL editor, acquired editor through which you can [00:12:00] actually pick up all the queries that you need

to query your source system. In this case, it is Cloudinary and fetch all the required details with the response and then start showing it in the UI. And to answer to your earlier questions like,

f_auto, q_auto like the quality and the formatting stuff is all taken care by this Gatsby source Cloudinary. I really didn’t write any extra code to do.

Becky Peltz: Okay. Yeah. So let’s talk about though, you did have to do something cause so Gatsby source Cloudinary, that’s in our Cloudinary devs repository, acts as a medium between our rest API and GraphQL.

Yes. To understand a little bit about what’s happening there, you can look at this source Cloudinary, but in terms of looking what you have to do as a user to use it. You’re gonna come into your Imaginary project and add a Gatsby config. Yeah. So what’s going on in here? This is how you’re hooking up your application [00:13:00] to a layer of GraphQL.

So what do you do here?

Tapas Adhikary: So this configuration is important and it is mandatory. So there are a few things that once you create a Cloudinary account. It can actually generate an API and API key. So these are the things part user, basically part account, and with that, you’ll be able to access anything and everything from that particular Cloudinary account.

So I have a Cloudinary account and from there, I generated this API Key and API secret. And the cloud name is basically my login name. So this atapas is my login name. So I have this three credentials, which are kept in the environment file, and then I’m loading those things from the environment file and populating.

Each of this property, like cloud name, API Key and API secret. And then I’m telling that I am dealing with the resource type, which is of image, and I’m looking into a folder, which is the Cloudinary called artist. So instead of artists, it would’ve gone for flowers or photos, it would’ve picked up the things from [00:14:00] there.

So it is artists. And then I have this stacks, this additional information that I wanted to get, and then the max results, max 50 results that I wanted to get. Right? So these are the configurations that we have to define and as it is a source plugin, like how it’s worked with the Gatsby plugin ecosystem for any source plugin, it has an ability to query using GraphQL, and you can also have other source by like you can query using JSON and things like that.

But this is GraphQL is like more optimal. Maybe we’ll get into details in a bit, but this is why once you put this configuration, restart your Gatsby server, you get to see all the details specifically in the GraphQL editor from where you can actually pick and choose formula query, start using in your React or Gatsby code basically to kind of fetch things.

Becky Peltz: So, yes, you’re supplying a full set of credentials here, and I think that’s because the Gatsby source Cloudinary is gonna be calling our admin API to get your images. And so [00:15:00] once you get those though, Gatsby does not want to receive data as in a restful way. It wants that layer of GraphQL, and that’s taken care of by Gatsby source Cloudinary.

So if we look at your code here then, this is where you’re building your gallery component. What’s going on in here? This seems to be where we’re using the GraphQL. Yeah.

Tapas Adhikary: So, a few things. Once you use any of the source of plugin for Gatsby, very generic format that the infrastructure uses is like, you can get all, as you see, like line number 13, and then the actual object that I am dealing with in the line number 13, right?

So for Cloudinary, the source plugin is giving me Cloudinary media. So the GraphQL object that I’ll be getting is all Cloudinary media. Had I dealt with something else, not Cloudinary, it would would’ve been all something, right? So this is how the infrastructure [00:16:00] works for the Gatsby GraphQL paradigm.

So what is happening basically here I have written a query. The query says Cloudinary image, and the query name and then the all Cloudinary media in that what I am actually looking to extract is the source URL. At insight context, I want to extract the caption and the movies. These are the extra information that I have provided for every image in the Cloudinary.

Becky Peltz: Right, so yeah, with these nodes and edges, some people might not be familiar with, what are nodes and edges? Yeah. Because we’re just querying maybe with SQL and we can do joins and things like that to get our data, so get relationships that way. But in a graph system, when we talk about nodes and edges, I think it’s helpful to think about nodes are the thing, like let’s say the image, and edges are the kind of the page of the thing.

Exactly. And then what you’re able to do here, you have your own custom query. So rather than grabbing all of the [00:17:00] data that comes about an image from the admin API, which is what you would normally get in an restful call, you’re just gonna say, hey, I want all caption movies.

Tapas Adhikary: Yeah, I think that’s a biggest advantage of using GraphQL over rest is like here you can actually limit like what exactly you’re querying for and that is pretty easy, right?

It just, you have to mention either I want this or I don’t want this and this is what I’m going to fetch. And that’s the biggest advantage over rest. Yes.

Becky Peltz: Yeah. So we’re not pulling in a lot of data that we know that we’re not gonna be using. Yeah, absolutely. It’s really nice to have all that information available, but then able to select just what you want to bring into your browser and your webpage. So that’s very helpful. So then you get this data, which you’re grabbing the URL and some context data.

The resource type, then what do you do with that down here to create the actual gallery? Cause there is a challenge in creating a nice gallery. You want it to [00:18:00] be responsive.

And I know you’ve written an article about that too, so if anyone’s interested in that. So yeah, what’s going on here in developing your gallery?

Tapas Adhikary: Yeah, at the line number 30 is where I’m extracting all the images. That’s going to be an area of images because there are multiple images.

And then what I’m doing is basically at the line number 63, I am iterating through these images. Getting each of the image out and making each of those boxes basically. So each of the boxes are nothing but an anchor tag. And inside anchor tag, there is an image tag. Nothing beyond that. It’s like as simple as that.

And I made it clickable so that if you click on it, I’m taking that caption value and searching on Google. Oh yeah.

Becky Peltz: Because you pulled context, you get title and description. Yeah,

Tapas Adhikary: exactly.

Becky Peltz: Both your alt tag and your caption. That’s great.

Tapas Adhikary: Yeah, so that’s what basically happens. Now if we go to galleries.css, that is where a lot of styles are written, basically.

Becky Peltz: Yeah, [00:19:00] let’s go take a look at that.

Tapas Adhikary: So this is where a lot of code is written, a lot of style is written. So I’m leaving out this header and footer. Header is giving that particular header stuff where that Imaginary level is

there. But apart from that, if you go to wave, I think this is the main thing that is actually making it sliding right? That animation. So bottom of the file, you should have something called a key frame, which defines animation at the bottom of the file.

So the key frame is like, what I’m saying is that you would transform from zero to three degree this side. And then again, zero to minus three degree this side. Just like this. Degrees and then minus three degrees. Yeah.

Yeah. If you tweak that value going to developers two, like from 3 to 30 or 20 to just start moving, like, you know. So fast and things like that. Yeah. So that kinda effect. And then there are many small, small things are there. So if you look into like wave. [00:20:00] That pseudo before, like line number 1 0 5.

So there is a background image through which I am bringing that hook. So on the hook, that photo is hanging right, in the Imaginary. Oh yeah. Yeah. So that is where I’m getting that hook. And this is giving that representation and dot wave after is giving that thread basically.

Okay, so that is a hook. Then the thread and then dot wave is basically the image, which is having that key frame animation to move this side and that side. So that’s how everything is tied in. CSS animation is pretty cool thing. I’m still learning and there’s a lot of learning from basically CodePen.

I have learned this web thing from CodePen, probably somebody was teaching on CodePen, like how to do this. This is really, really super thing to learn.

Becky Peltz: It’s really fun though when you find some effect or something that you like and then you can just build it into your own project.

Tapas Adhikary: Yes, yes, that’s true.

Sam Brace: Tapas, I want to ask you a question about this, because I’m seeing so many [00:21:00] awesome things about this project. Seeing the animated CSS that you’re talking about, the GraphQL use, Gatsby as your static site generator. How did you make all of these choices for overall stack for this project? Why did you make the choice between Gatsby or maybe another set site generator, like Next Js?

Mm-hmm. What, what was, what helped you to make those decision?

Tapas Adhikary: Yeah. So, the reason for going for Gatsby is like that source plugin. Okay. The moment I went to the Cloudinary and I was actually reading about Cloudinary, I figure, oh, there is a source plugin already available. So if it is available, it’s something that I can make very, very quickly.

I don’t have to really think about much mostly because I’ve used Gatsby extensively, I’ve used many other source plugins, so I was quite familiar with the GraphQL when we are building things. So, it was like, do something fast and write in freeCodeCamp. So that that was the thing. So that made me kind do it with Gatsby but I know Next.js as well.

Maybe I’ll be doing something with Next.js as well.

Sam Brace: And then like with the GraphQL side of things, cause obviously [00:22:00] Gatsby and GraphQL are very intermingled, they’re very tied together. But do you feel like that’s something where if I’m a developer, and I say I don’t know anything about GraphQL, why would that be a benefit for me to learn and try to maybe use a product that has GraphQL in your opinion?

Tapas Adhikary: Yeah. Yeah. In my opinion. See, many of us are from the background of the SOAP or rest, and we have used them extensively for years. One of the problem that in risks that we always face is like the liberty of selecting what I want and what I don’t want, right? The segregation between this, so where you have bunch of attribute, a bunch of data without writing any extra code, it is going to give you all, and it’s a client’s duty to do some kind of messaging, things like that, and then try to get into the set that you are looking for, right?

That is one thing. Second thing is like in a query level, there is no way of doing certain kind of join. The join happened in the database level. If you have database tables, you do the join there and the middle layer rest is going to fetch the [00:23:00] thing. In GraphQL, there are a couple of advantages spot on. Like first of all, you decide what you need and your query actually talk about that.

You don’t mention anything else that you don’t need. Second thing is like the query level is that you do lot of joins. Like you have multiple table and you want to extract data from them. At the query level itself, you can actually specify those associations very well. And that is going to get you the result after performing all these associations, right?

So these are the two flexibility as a consumer perspective, I feel it’s like great, great advantages for GraphQL, and other thing is like what driven me towards GraphQL is like, today, if you take likes, SaaS software as a service. Today, even databases are a software as a service, and each of this database software service, they always have a layer of GraphQL in front of them and project them very, very high. Of course, of course it’s qualities are such that, that they can. So it is kind of natural tendency that, okay, I have to learn GraphQL, I have to go for GraphQL because there is a good community support, I can connect to [00:24:00] this databases pretty well. So this ecosystem I think is moved to, from the rest to GraphQL pretty right way, and it’s kind moving in the right way as well.

Becky Peltz: It’s very efficient. I mean, it’s very efficient. Efficient. You’re not bringing tons of data across everything you touch. And then the other thing is like, here you’re dealing with a plugin, so you’ve got some functions that are creating that GraphQL and node get edge and stuff. In some cases, GraphQL may be implemented out on the server so that you actually are not even bringing any of the data you don’t need across.

Absolutely. Yeah. It is a good approach in that respect.

Sam Brace: So it also makes me just really happy that there’s a source plugin frankly. If you weren’t able to find that source plugin, this project may have never happened and the choices that it may had never happened either, so probably the fact that it exists makes everything easy, right?

Tapas Adhikary: Yes, Yes. The source plugin was one of the reasons that I went with Gatsby plus Cloudinary to be very frank.

Becky Peltz: [00:25:00] Absolutely. Absolutely. Now it is. I’ve looked at the code on the source plugin and it’s great. It’s really well documented and easy to put together. So I think this is really a neat project. It’s done a lot of neat things with Cloudinary.

You’ve gotten all your images optimized, but I know you are working on another project that is also really interesting and I’d like to share that too, if you want to just describe it. This is a good educational thing. React now is probably the most used language. And so you’ve created this

application, ReactPlay.Io. And let me just go browse here. Can you talk about the motivation behind this and how it can help people who are trying to learn React?

Tapas Adhikary: So the ReactPlay, as I said, is like an open source platform for learning, creating, and sharing React.js project.

I’ll just keep some background, like why I had started with this is like, I have a course on my YouTube [00:26:00] channel and I’m teaching React probably very, very in depth, and I’m getting a lot of good feedback, like the way people are perceiving that. But one problem that I’m seeing is like everybody wants to build.

And they want to build some application. They want to put into their resume and tell them, hey, this is something that I built. I’ve learned something from this one. But the problem here is like, unless somebody has spent a great amount of time with the technology, they cannot really tell what is the right way,

or what is the wrong way of building something. You can always build, but what is the right way of building something? Taking care of performances, making sure you’re not putting a lot of bugs into it and things like that. So whole idea of ReactPlay was like, let’s create a platform where people come with the idea of building something with React, and we’ll have someone experience from the industry come look into their code. Teach them like what is the right way of doing it through the code review process. And once kind of everything is done, the code review is done, project is ready, we actually [00:27:00] merge that project.

The project is available in the ReactPlay platform, and the person who has built this particular project also feel great about it. There is a learning curve. There is a learning thing, is always associated with it and the person, oh, I have learned something that probably is something different. Even an experienced person coming and creating a project.

The other contributors who is looking into that person’s code, will learn from that saying that, oh, this is how this person actually code. He or she’s having probably 15 years of experience, and this is how differently he or she thinks. So this platform is about collaborate, learn, and share.

If you go to browse, you get to see basically bunch of projects. We are working on arranging them in a better way. But if you see bunch of projects over there, you can go to work any of the projects. Fun quiz is one of the project, right, where you can actually do certain data quiz and things like that.

Just click on that filter icon once.

Becky Peltz: Yeah, I like that filter cause you can now pick things according [00:28:00] to

Tapas Adhikary: Yeah, just put a level, say intermediate, and then filter on. Just apply the filter. Yeah. This is all React tags.

Becky Peltz: But now, we’re looking at the intermediate project. Yeah.

Tapas Adhikary: So this is intermediate project.

So top row, the last one, if you can just pick up fun quiz. Yeah. Yeah. You can click on that. So this is a quiz like somebody has built. So you select a topic like computers or books, and select me in. It’s going to ask you bunch of questions. You give answer, and then basically you learn things like, you know, you test your education on that. Like how much you know about a movie, how much you know about book and things like that, right?

So it’s a very cool project. Like it’s a bit complex project that it’s not very usual project, right? You have to keep track of question, answer, the score, and things like that. So when somebody is seeing this for project, they’re also feeling like, hey, how to create this project? Okay, let me try out, okay, let me go to this GitHub, and let me try to figure it out. Like how this person has created this project.

We have a Discord server where people [00:29:00] collaborate. So they go to this particular data, hey, have you have done this project? Can you spend half an hour to teach me how we have done this code? That person spend some time to teach this person on this. This is how they learn, right? Yeah. So the whole idea is to build the community around ReactPlay, let people learn, share, grow.

Becky Peltz: That’s wonderful. And I like having this quiz, being an educator or something, I’m sure. Oh, that’s cool. But then now you can look at the code on these too, right? Yes. So if we wanted to.

Tapas Adhikary: Yeah, there’s a top right, there’s a GitHub icon. You can just click on that.

Becky Peltz: So this is the code that you use to create this website.

Tapas Adhikary: Yes. So a bunch of projects in this React organization. Something deal with the backend, something just deal with the small projects, and then something deal with the application itself. There is a create project workflow that we just built in.

There’s a different workflow where user can tell what is the project name, blah, blah, blah. So how it’ll work is like once you are [00:30:00] running this on the development and click on the create, it’ll ask you, okay, what is the project name?

You know, give me a cover image, and is it a beginner project or intermediate project? What’s your GitHub ID? Boom, you say create. What it is going to do is basically is going to create a project structure for you, a basic project structure for you. Oh. And that will be another thumbnail into that page, right, for you.

And then you start developing in a local mode, saving your file. You’ll start seeing your changes coming up over there. Raise a pull request review, and get it in the production.

Becky Peltz: Okay. That’s neat. So if a person wants to join and add to this collection, they can do that?

Tapas Adhikary: Yeah, definitely.

Becky Peltz: Well, and I just want to share one more thing too.

You have a website here and it gives links to all of your training, your blogs, your videos, and it’s a great source, I think. So would this be probably a good way to contact you to through. Yeah.

Tapas Adhikary: Yeah, definitely. So this is built on Next.js. I’ve kind of built in a way [00:31:00] like, it’s mostly API dependent, so all the data. For example, there is a growth tab at the top right. So all the data that you get to see is like, it’s API fetched.

So there is nothing that I will be modifying daily business, even my blog. So if I write one blog or one article on my blog, it’ll automatically come here, over here. So I wanted to build my website in a way where we have to spend least amount of time in maintaining it after I build it. So everything is built based on API.

So just collecting.

Becky Peltz: These are all API calls to get the number. All the data is. You’re not sitting there at night counting up there. No. You got on something. Yeah. That’s great. Automated data, data driven. That’s really cool. And then, your videos, I think these are really cool.

You have a number of topics there, so it’s very useful. I think this is a great source all around.

Sam Brace: So Tapas, now that we’ve seen all of these different things you’re doing, we’ve dived into the Imaginary project, we understand it’s applicability and frankly, it’s interesting.

One of the [00:32:00] things that we do here at Cloudinary when we do these courses, we have this student ID app that Becky actually built. I could see where if we wanted to start adding some animated CSS to that, I could see where we could take some of the learnings and weave it all together so it all could connect.

But one thing that I would love to be able to ask you before we let you go, since I know you’re a busy guy. But it’s where I’d love to know from a developer standpoint, we focus on images. Obviously we’re Cloudinary, so we care about that kind of stuff, but why do you feel like developers should start to embrace more when it comes to image delivery optimization?

Some of the things that you encountered with this project, because I have talked to various types of developers, and it’s not necessarily always apparent why they should care about this. So from Tapas’s perspective, why should they care?

Tapas Adhikary: Great question. I think that only reason that I will care is, because I don’t want to manage and maintain them in house.

So if you see the ReactPlay project that we just seen like, each of the thumbnail is having an image, right? [00:33:00] And each of the images right now in the source repository. I don’t have any control. If somebody is checking in a image of six mbs or somebody’s doing hundred mbs or two mbs or things like that. Bring your own image, have it in the cloud. Have it in a things like Cloudinary where you can, it’s not only the storage, right? You can do lot of stuff, right? Once the image is coming up, it is having this formatting intact. It’s having its quality intact. You can do image processing and all this kind of thing you can do, right? So take advantage of that.

And then you can actually bring that image to ReactPlay in the project. In the next version of ReactPlay, we are going to do that. The moment somebody upload an image as a cover, we are going to push it through API to Cloudinary, get the image from there. That’s what is going to happen, right?

I don’t know. I might go for a plan to you guys sometime.

Sam Brace: So we might be able to help you with that too. Is that like put the bill of the whole way through? We’re happy to help you.

Becky Peltz: If you are using Next.js, one of our evangelists did write a [00:34:00] Netlify plugin that will add f_auto, q_auto, so you can look for that if you’re.

Tapas Adhikary: Sure, Sure.

So that’s specifically my reason is like, why do we have to maintain and do something of myself. Somebody’s already doing it, somebody’s already broken that path, let’s use it. And very fortunately, Cloudinary is having a generous, free plan, which worked out for me so far. And at least for my personal projects, it worked out really well.

I have never overshoot the quota so that I have to think about something else. And, I can always go to each of these images, whatever the edits I need to do, whatever the metadata I have to put, then I have to get them in a form that I’m looking for. This and all, I can’t think of doing it by myself very frankly, because I am,

I’m a coder, I want to focus on my business log. Let this thing be done by somebody who is best at it. So you guys are, so why not Cloudinary?

Sam Brace: And I love what you’re saying there because it’s something that we hear a lot about why people use cloud-based services, microservices, is that [00:35:00] your focus, this isn’t getting almost bigger than the image video type of conversation, but it’s to say that you’re trying to focus on a microservice like Cloudinary that might be best of breed.

And you’re also doing that for other components of your projects, like finding the best static site center generator, where you chose Gatsby for this one you use Next for others. So it shows that, it makes it where it’s easy to weave things in and out when you have it in that type of way where you can focus on these specific APIs, these specific microservices.

So I think you’ve touched on a lot of really good things there that hopefully developers are able to take away from your learnings and your expertise that you’re actively sharing with the world. So excellent Tapas. Sure.

Tapas Adhikary: Thank you. Thank you very much.

Sam Brace: So we’ve shown a lot of places where we can learn from you.

Obviously ReactPlay, wealth of information that can be there to start any type of project. I was very impressed with the quiz as well as Becky pointed out. I personally loved, but I like the cheat button. But I also will say that I hope people continue to [00:36:00] follow you, because as you’re putting out lots of stuff on YouTube, as we’re saying, you have lots of active things that are in projects. So hopefully, this is not the last time that we ever hear from you Tapas on the Cloudinary DevJams program, so feel free to come on back anytime and tell us about what’s new, what’s interesting with the way that you’re working with images, videos, Cloudinary in all of your projects.

It’s an exciting time for you.

Tapas Adhikary: Sure, sure, definitely. And I’m looking forward to it. And I have a lot of project ideas in pipeline, so sure.

Becky Peltz: Wonderful. I’m gonna follow you myself cause I like what you’re doing. It works really well.

Sam Brace: Becky, you said it very well in our introduction, where Tapas is an amazing developer educator, and he’s doing so many great things to help developers when they’re starting their next projects.

We’ve seen it with what he did with Imaginary, where we’ve seen it with what he’s doing ReactPlay.io. What an amazing person. So first of all, thanks to Tapas for reaching out and letting us be a [00:37:00] part of this, and I think this was definitely time well spent.

Becky Peltz: Yeah. Yeah. I mean there were some technical things here that were really interesting. Seeing the NPM package that he pulled in to be able to convert our admin API into a GraphQL nodes and edges.

That’s great to know. There’s probably going to be a lot of uses for that. And then his application, very playful. We have the little hangers on hooks and things swing. But he took the time to show us how those wave transitions were built. And transitions are great in CSS, you know, it’s a really efficient way to get that kind of animation on your screen, so.

Well, that was really fun.

Sam Brace: It is. It’s one of those areas where there’s so many times where, when me and you, as well as others on our team have done trainings. Sometimes we show ways to do CSS workarounds, as an example. To say like, oh, you don’t need to necessarily put in corner radius into your CSS. You can [00:38:00] technically go ahead and round the edges with Cloudinary.

But what I love is that he was able to use a lot of great concepts of how to display images through Cloudinary, but also do things that are definitely out of the toolbox that show that you can only do with CSS. Like as we said with the hanger and being able to show the back and forth movement. And I think just being able to catch somebody’s eye to tickle their brain a little bit with the way that things appear on the screen.

I think being able to know how to apply all of those awesome front end details. It was fantastic. So this is something where hopefully, this inspires people to take a look at maybe the CSS of their own projects and find ways to get it to be a little bit more delightful.

Becky Peltz: Yeah. Well, I think as developers, we’re all kind of building on each other’s work, so I think it’s fair to go in and grab these CSS and try it out on your own webpage.

Sam Brace: Isn’t that the truth? I feel like out of all the people that have ever met my life, the people that are totally like plagiarize what I [00:39:00] use are developers. Absolutely. Hopefully Tapas feels the same way.

Becky Peltz: Yeah, it’s kind of an honor to get plagiarized in some cases.

Sam Brace: So it really is. No, I completely agree with that.

I think the other thing that’s standing out to me is just the use of Gatsby, because it’s one of those times, as we said earlier, this was our first time working with Gatsby project in our DevJams program, but its an amazing static site generator. They have so much information that’s available to them.

We work with Gatsby in many different ways at Cloudinary, but it’s to say if you haven’t taken a time just to look at what that company is doing and how you could possibly use a project, it’s worth delving in a little bit and seeing if it works for you, because I think there’s a lot of cool momentum that’s happening with the Gatsby space race now that is worth understanding better.

Becky Peltz: It’s one of those frameworks built on React that’s just super popular. Makes [00:40:00] it a lot easier to build some of the more complex applications, especially if you’re looking for static pages, things like that.

Sam Brace: Absolutely, absolutely. And I think the one last thing that I’ll mention, I said it in the beginning, but, what I love about some of the people that we’ve gone to interview. Colby, on our team is one of those, Tapas is very similar in that way. Harshil, who we’ve talked to in episodes is similar in that way, where they’re not just building projects for themselves or building projects to help the developer community, and I love that

way of thinking about themselves, but also being altruistic and saying, how can we benefit those that maybe are starting out, giving them templates, giving them guidance. In many ways, that’s the same intention we have here at DevJams is that we are only doing this to help foster more development, to help people get their feet wet when it comes to that first project or that next project. So the fact that he built something like ReactPlay.io to quickly give a template for building quizzes and calendars and timers, but doing [00:41:00] it with React. Yeah, it’s not using Cloudinary. It’s not necessarily benefiting us right now, but in the same sense, it’s totally benefiting us because we like React developers. We like developers. So it’s definitely something where I hope that if you are thinking about how can my project benefit others, that’s a great thing to be thinking about, and I love what Tapas did with that energy.

Becky Peltz: Yeah, I’m a fan of that site.

I might take some of that stuff for myself. No, it’s really nice. It’s a lot of fun.

Sam Brace: Yeah. Speaking of plagiarism, right?

Becky Peltz: That’s one of the things I like about DevJams. We are sharing a lot of techniques and technologies that other people can tap into.

Sam Brace: Absolutely. Absolutely. So now that you’ve seen the things that are sticking in me and Becky’s brains about the key things that we heard in Tapas’s conversation, of course we want to let you know that we’re gonna be putting out more of these episodes.

And if you want to know when the next one comes out, make sure that you’re liking it, subscribing it, wherever you’re [00:42:00] listening or watching podcast. That might be the Cloudinary Academy. That might be on Spotify, that might be on Apple Podcast, Google Podcast. We’re all over the place, but wherever you are consuming content, hopefully we’re there and hopefully you can find out when the next one comes out, because me and Becky and our guests, who put a lot of effort and to trying to let you know all of these interesting details to help you with your next projects.

So on behalf of all of us here at Cloudinary, thank you again for listening and watching this episode of DevJams, wherever you happen to be doing it at, and we hope to see you at the next one. So take care.

Becky Peltz: [00:00:00] Hey, welcome to Cloudinary DevJams. I’m Becky Peltz, my usual partner in this endeavor, Sam Brace, isn’t here today. Instead, I’m joined by Jen Brissman, our developer education instructional designer and more. Fun fact about Jen is that she was a guest on this show last year, and now she’s co-hosting. So I’m going to let Jen introduce our guest, Cori Lint, because they attended bootcamp together. So Jen?

Jen Brissman: Yes. Hi, thanks for the intro Becky. Welcome to Cori Lint. We went to Hackbright Academy Boot Camp together and now we have her today on the show, now as a software engineer at Ovia Health and she’s going to be talking about a project she built called Cello Tree. We’re so excited to have you, Cori.

Thank you so much for being here.

Cori Lint: Yeah, hi. I’m so excited to be here and it’s really fun to be here with Jen and also Becky, I met you more recently, but thanks so much for having me on. [00:01:00]

Becky Peltz: Oh, you have a wonderful project and I know you guys are in Artist Who Code. Maybe you can say a little about that.

There’s probably other artists out there that might be interested.

Jen Brissman: Yeah, definitely. Artists Who Code is a community that Cori and I are in, and Cori is actually, her role is Director of Artist Who Code. And I’m the Director of Mentorship at Artist Who Code. And this is a cool segue into the project we’ll be talking about today, because Cori’s app is called Cello Tree, and this is probably because she’s a cellist and also a software engineer.

So Cori, if you want to introduce yourself a bit and also talk about your history as an artist and also what prompted you to get into software engineering. And then we’ll get into your project.

Cori Lint: Sure. Yeah. I guess starting way back when I was a child, I started playing piano and cello and my whole family are either professional or amateur musicians.

So it was just kind of something we did. And as I grew up, I guess I was good at it. I was [00:02:00] successful in it. I also had a lot of other interests, but it just happened to be the thing that I pursued. I loved it. It was fun. I went to University of Michigan, got my cello degree there.

And then after a few years of freelancing, I got to play with some amazing people. Had a lot of fun doing that. I worked on cruise ships with a string quartet for a while, so it took me literally all over the world, which was amazing. And then after a few years, I was in my mid twenties and I was like, I really want that steady paycheck, slow life down a little bit, have a bit more stability.

So I went into the other side of the business, which was administration. So I got into specifically orchestra administration. Also got to work with some amazing people, some amazing orchestras, including the Cleveland Orchestra and the Florida Orchestra. And all throughout this time, I was still playing cello as well, so it’s definitely stayed a part of my life.

And then as far as how I got into software engineering, it’s funny cause it was right before that pandemic time, where a lot of people [00:03:00] started reevaluating their life plan and what they were doing. Especially people that were in the arts world who suddenly, their work just was gone.

A lot of people are like, I’ve never thought of what else I would do. And I had about a six month start on that. So I was a bit just burned out by the orchestra industry. It’s a lot of work. It’s like every day and the pay is not great. The industry is a bit like slow, in the way that software is very like innovative and moves quickly.

The orchestra world is almost the opposite of that, at least that was my experience. And sometimes it was a bit frustrating and I was just ready for a big change. So I looked at a bunch of different things, but I had a friend who had learned software development and had a really successful career just through free online programming, like freeCodeCamp. Big shout out to freeCodeCamp.

So that’s actually where started, yeah. Yeah. An amazing resource and actually has been developed so much more even since I used it. But that’s where I started and I was like, hey, this is actually kind of [00:04:00] fun. And I feel like this actually really suits, like how my brain works . And it’s also strangely enough, even more creative in some ways than doing music.

That was a circuitous route to where I am now too. So I, I started just learning on my own. I got a web development job, so just spinning up websites, mostly WordPress based websites where we would do a lot of customization. This was for a marketing agency.

And after doing that, I was like, I’m really interested in like what’s happening behind the scenes, what’s happening with this data when I submit this form, what’s going on back there that I just sort of take for granted that happens auto magically, as people at my company like to say.

So I decided to go to Hackbright Academy, as Jen mentioned earlier. It’s a coding boot camp that’s focused on gender diversity, which is really cool thing about it. And it’s based in San Francisco, but I attended the virtual option and yeah, finished that. Did a lot of algorithm drilling and studying and job applications and after a few months, [00:05:00] I ended up at the job where I am now and I’m coming up on my one year anniversary there.

So, congratulations. Yeah, long journey .

Becky Peltz: Thank you. Yeah. Now that’s wonderful though, how you took an interest and then you pursued it online and then now you’re actually, it is your profession, so yeah.

Jen Brissman: Absolutely. Well, Cori, tell us a little bit about yourself as a developer and the languages you work with now versus maybe the first ones you learned.

Cori Lint: Sure, Yeah. The very first ones I learned were at this first job I had. And you know, WordPress is based on PHP, so that was actually my first exposure to PHP, which I now use in my job. But I was really more focused on front end. So just enough JavaScript to make things work.

It was a lot of learning on the job, so JavaScript and a lot of CSS as well. And when I went to my coding bootcamp, I learned a bit of SQL with this job too. But coding bootcamp, we really got more into SQL, our main focus was Python, and then we used Postgres and we used the [00:06:00] Flask, framework for Python.

So all of these things like interact together really nicely, especially with SQLAlchemy, which we can talk about later too. But that was my stack there was basically Python, Flask, SQLAlchemy, and now, yeah, back to PHP. So full circle, I guess.

Becky Peltz: That’s awesome. Yeah. That’s a good language to learn.

I mean, given that, you know, WordPress is like, I don’t know, is it 40% of all of, that’s what they say? Definitely a good thing to know.

Jen Brissman: One other question I was interested in is how you learn and just if you wanted to share the way you learn best.

Cori Lint: Sure. I would say at work, so I came in as sort of a traditionally what would be a software engineer one or a junior or even apprentice type employee. So it was expected that I would learn a lot on the job, which is amazing and I have the perfect environment at Ovia Health to do that.

But I would say I probably learn [00:07:00] most from direct feedback like we require two code reviews on all of our PRs. We’re supposed to review two PRs to every one PR that we put up, that kind of thing. So I would say it’s a combo of direct feedback on my work, which I try to apply and just build on every time.

If I get feedback about one specific thing in this PR the next time I try to remember that, and then maybe I’ll get more feedback, just continually building on that, the 1% better thing. And then also seeing feedback on other people’s code, I mean, sometimes the code of senior engineers feels a bit over my head or it’s just I have to like, learn a whole system to like even figure out what’s going on in their PR and that can be a bit daunting. But the strategy that I’ve taken more recently is just to get in there and start asking questions, like what would I ask if I were working on this?

Like, why is this happening? Why did you use this instead of this? And those kinds of things. And that’s been a huge help in my learning [00:08:00] too.

Becky Peltz: I think on the job learning for coding is really the way to go. It’s because you’re going to get exposed to so many different ways from your different coworkers, and it’s stuff that works and it’s in production and it’s just a really good way to learn.

Cori Lint: Yeah. Yeah, exactly.

Jen Brissman: Absolutely. Well, I think that’s a great transition into talking about your project because your project is something you built solo. You weren’t working on a team. This was Cori’s project. Cello Tree is your baby that came from your brain, and we’re really interested in hearing about it today.

So let’s talk about it. Tell us a bit about it.

Cori Lint: Yeah, it’s funny that you mentioned that this is my project, it was all me, because it’s so different from the enterprise code base that I work on now, and I’m sure every coding boot camper experiences this. The move from this like tiny little thing that you think is, is everything like this full stack project to this code base that’s just like absolutely monstrous.

It’s just such a different experience. But, so yeah, just to introduce [00:09:00] Cello Tree, which I often describe as like the nerdiest project ever, but I say it in an enduring way, like I love this stuff. So I am a cellist, I play cello and I had the idea to create a family tree of cellists and spoiler alert for later, I wasn’t the first person to think of this.

But I hadn’t heard of it before. When you’re going through the classical music education, who your teacher is, is probably the most important credential there is. Maybe even more than where you went to school, because really you go to school for the teacher. I went to University of Michigan for my teacher, Professor Elliot.

So, sometimes, it’s as specific as like a certain way that a person is holding their instrument can identify like which teacher they worked with that has huge influence on how they play and even their career and things like that. So, my teacher, Tony Elliott, would always talk about how my cello grandfather was Janos Starker.

[00:10:00] And most people in the classical world would know that name. He’s like an iconic cellist. Lots of stories about him smoking cigars during his lessons and things like this, like just absolutely iconic. So my teacher would always refer to him as my cello grandfather, and that sort of stayed on my mind.

And I, I always thought that was kind of funny. And then I also worked for this cello festival in Dallas called the Lev Aronson Cello Festival. Just this amazing story of this cellist who, basically was forced to immigrate from Europe. He lost his family, he lost his cellos in the Holocaust.

Terrible story. But he came to Dallas of all places and quickly became the principal cello there. And his students went on to be some of the most like successful cellists of the 20th century. And he just had great influence on generations of cellists afterward. So this really just stayed in my mind of his legacy idea, like who we learned from, and I’ve even heard that in other professions.

[00:11:00] The medical profession there, there’s a similar like lineage type of thing. I just thought, how fun would it be to see if like Yo-yo Ma is like my cello cousin or something like that. So that was the origin of the project. I visualized having this giant like family tree that you could like click around and stuff and yeah, I still have this idea in my mind where it started and then of course, what it looks like is never what you imagined.

But I think I did a pretty good job executing in the end.

Becky Peltz: Oh, you have some really interesting things in there so.

Cori Lint: Oh, thanks.

Jen Brissman: Yeah. Yeah. So this idea that was in your brain, you visualized it and then now you built it. So can you give this a preview? Show us the functionality?

Cori Lint: Yeah. Yes. I’ll take you on a little tour.

I have to just, I have to just give the disclaimer that this was a student project, I built it all myself. A lot of these things I was just learning. So no judgment on [00:12:00] those kinds of things. But like I would love some rounded corners in here, but it’s fine. So I guess this is the mission statement.

Discover your cello family, honor their stories, connect with the community. That was like the whole idea behind it. Like I mentioned, the family tree was like the core idea here. It turned into something else, as well. So these are all of the cellists that I have in my sort of fake local database, when I built the project. Oh, there’s me.

In here, if you want to go in and search my professor that I mentioned, Tony Elliott. You can just search him and he comes up there. We can go look at his profile. So yeah, whereas the tree was the initial idea, it also became like directory of cellists almost.

So, obviously we have some info about Mr. Elliot here, including about his cello because cellist instruments are like a really important part of their sort of identity as a musician. We have the tree, which I’ll maybe come back to in a little bit because I think that’s the most interesting, [00:13:00] little bio section.

This forum, which is really just like comments. So I can add like, this is my teacher, and add that comment and it dynamically renders, and then I can go in and upvote some other comments.

Becky Peltz: That’s a great insight into the world of cello, in addition to, with a lot of interesting components here.

It’s just neat to see what are the details that are of interest to cellists.

Cori Lint: So, exactly, exactly.

Becky Peltz: You’ve got a lot here and so you’ve got some multimedia, you’ve got images, and I see a listen now. Mm-hmm, are you using Cloudinary here?

Cori Lint: Yes, I am indeed. So all of my image storage is through Cloudinary, and I can walk you through how that works too in a bit.

When we look at the code, but yeah, that was a great asset to the project. And then this was my MVP version, where it’s just a link, a hyperlink. Okay. But someday I would love to [00:14:00] have this be like a Spotify widget or something like, that would be really cool.

Oh, yeah.

Becky Peltz: Yeah, yeah. Well that tree is really neat and I know you’ve got a lot going into that. Are you going to talk more about that?

Cori Lint: That’s really, yeah. Let’s talk about that. So I guess I’ll show you from a user perspective before I get into like the technical aspects, but so this is obviously the profile that we’re on. To the left is teachers, to the right is students.

And I would like to represent that better someday. Actually this is my cello grandfather that I was talking about. You can just see from his face.

Becky Peltz: He looks a little bit mischievous. Exactly.

Cori Lint: So now that we’re on his profile, it shows his teacher, I just have one in here.

I’m sure he had many, but it shows his teacher here. We can navigate there. It goes to his profile. Back to Mr. Starker, that has his students here. What if I show you, let’s add a student that already exists. Let’s say we’re looking for someone to add and we think they already [00:15:00] exist in this database, so let’s put Sujari Britt, and the tree just regenerates and it adds for, as one of the children or the students.

We can do the same thing with the teacher. So bam, there it is. And then if we don’t see someone in this tree that we’re looking for, I guess this is the other feature of this whole thing is we can add someone to the database. Oh yeah, and I have a note here to check that they’re not already here.

So this just goes back to this all cellist page. So let’s say I want to add like Yoyo Ma. Okay. So looks like he’s not in there. So then we can click, add cellist. Everybody knows this guy, right? Probably the household name of all cellists. Yep, so we’ll drop in his instrument information.

One of the cool things about these instruments is like, these things cost gazillions of dollars.

Becky Peltz: I’m amazed at the age too. I mean, 1733, I noticed the last one [00:16:00] was from the seventeen hundreds.

Cori Lint: Just, yep. So this is where Cloudinary comes into play. When I add this, obviously not when I add the image, although I would love to add like a widget here, that’s really nice, kind of like it’s on the Cloudinary Media Library.

But for now it’s just this HTML element. But I won’t put in a link. But when I hit submit, all of these things are going to fire off between the front end, the back end, back to the front end, including a call to Cloudinary to upload this photo and store it and return a link to me, so it will display.

Yeah, so he’s been added and there’s this photo, which is stored now up in Cloudinary.

Jen Brissman: That’s really fantastic. And also, Cori, what happens if you don’t have a photo for the cellist?

Cori Lint: Great question. Let’s add somebody, Jen, you’re a cellist now. We’re not going to give you any info. We’re just going to put your name and no photo.

[00:17:00] So this is actually something I learned more recently when I was updating the project was that, you can have like a default or let’s see, I added a default photo to my media library, so I’m actually just pulling this. The logic is such that instead of saving a photo up there, it’s actually retrieving information about a photo that’s already in my media library.

So I added Jen and it’s just this default cello photo that I decided.

Becky Peltz: Well it’s a very easy to use interface, like the flow that you’re showing, you’re not going to get stuck and go, how do I get back to that thing I was doing before? You know, which is always.

Jen Brissman: Yeah. And Cori, I wanted to ask you too about your data model and how you visualize the relationships between the teachers and the students, that seems complicated.

Becky Peltz: If anybody is familiar with family trees, you’ve got a lot of very complex relationships that you’re trying to.

Cori Lint: Oh, this was like, the most interesting, the most infuriating, like the most tears, but ultimately [00:18:00] I think like the most interesting thing about the project. Let me go back to, this is actually one of my other teachers, Martha.

So again, just from the user perspective, before I get too into like the code, the way this is organized in the back is actually. This is one tree over here, with Martha as the root node. And then this is another tree with Martha also as the root node. So what I did is create a proxy root node, and I added the children of one and the children of the other to the same fake root node essentially.

So this is actually two trees, one to the right and one to the left. So the way that’s organized in my data model, this was crazy to figure out because I was thinking in terms of students, teachers. Teachers, students. Okay. A teacher can have many students. We can also have many teachers. A student can have, you know, and just back and [00:19:00] forth.

Yeah, yeah, yeah. It got a bit tangled, and then one day it just clicked and I was like, wait, okay. They’re all just cellists. They’re teachers and students, but really they’re all just people. And I can just say a cellist can have students and it can have teachers, and so rather than creating like a teacher and student table, I just created a cellist table.

And then this one links here, it’s called a junction table or bridge.

Becky Peltz: Many to many relationships, right?

Cori Lint: Yes, exactly. So all it does, it doesn’t really hold like meaningful information. It just links the two tables, which in this case is one table.

So it’s a little bit weird.

Does that make sense?

Jen Brissman: Yeah a really complicated relationship. And many relationships going different directions, but this does make sense and I feel like this has to be the most interesting part of the tree and how you made it all work.

Cori Lint: Yeah, yeah, definitely, pretty fun.

Becky Peltz: It’s a nice looking diagram too. What did you use for that?

Cori Lint: Oh my god. You know what? I’m going to have to get back to you and we can put a link or [00:20:00] something, because I cannot remember and I was trying to find it, but I’ll find it. Yeah, I love how this looks. It’s very pleasing to me.

Jen Brissman: Yeah, I love it too. I’m looking up the name of it. We should share it in the resources for this episode, because I’ve used this same data modeling resource and I’m forgetting the name too. And it’s fantastic and easy to use.

Okay, cool. Well, Cori, let’s take a look at your code and see how you made everything.

Cori Lint: Yeah. What would you like to talk about first?

Becky Peltz: Well, I’m interested in how you worked on your front end here. Because you’ve got a really nice flow. You must have been thinking in terms of pages and components and things.

Cori Lint: Yeah. We put a lot of work into the planning stage, like a week out of a six week project or something like that. And I thought it was overkill, but then when I actually got to the development of it, I was like, oh, this was like not even enough. And I use that in my current work too, the planning is everything.

So anyway, I had that going for me when I got into the code. Let’s see. Let me [00:21:00] show you how we basically walk through getting that image from the form that we submit. Okay, I’ll do that. That’s an interesting one.

Becky Peltz: I can see your model there, that you have an image URL. So I’m guessing that you’re storing there.

Cori Lint: Yes, exactly. Yep. Right there. Okay, so here we have just our html form, as you can see, called add cellist. Here’s our photo upload section, and then here is our JavaScript. And I did use some like jQuery syntax just for shorthand, but other than that, yeah, exactly. So this is referencing that add cellist form that we just saw, and it’s saying when we submit it, perform this asynchronous function.

So we’re naming our files property that we’re getting from that form, which I actually just learned this. I’d always thought of the files property from a form as an array, but it’s actually just an element. So it’s an object [00:22:00] essentially. So we’re calling those files that we grab are media files and then we’re sending those to our function upload media.

And we’re going to wait for the response of this upload media function before we move on. So I’ll show you that. Just right up here. So this right, upload media. We’re passing in a parameter of files. So we’re going to have a default endpoint here called use default image. So that’s exactly what I was showing you when I added Jen to our database.

We didn’t add a photo, so this is our default endpoint. Grabbing the form data or creating new form data to send to that endpoint. So here this is my MVP version, we have the option to add one image, zero or one. So in this case, if we have one image, I’ll take that out.

Our endpoint is going to be upload media instead of the default endpoint. We’re going to reference the first of that one file. And then we’re going to append the information from [00:23:00] that file to the data that we’re sending to this endpoint. So we’ve got our endpoint, which is either default image or upload media.

And then we’ve got a post request and we’ve got our upload data, which has that file attached, if there is one. So I’ll show you these end points.

Becky Peltz: So now you’re going to your back end, your Flask, and Python.

Cori Lint: Exactly, yep. And I love how clean the Flask backend is, it makes it so easy to look at.

Yeah. This view function is going to handle a post request to this route, essentially. So if there’s no image attached, again, super simple. Use the Cloudinary API to grab a resource that has a public ID of cello tree default. And I set that, I uploaded that into my media library from the dashboard.

And I just called it cello tree default. So this is going to return this JSON object of all the [00:24:00] attributes. Yeah, all the attributes of this image. So I can do so much more with this, but all I’m doing in this case is just grabbing the URL when that comes back. So that’s the default version.

Becky Peltz: Well, that’s the unknown image that you don’t have to upload. Yes. You’re just going to use for default. Yeah.

Cori Lint: Exactly. And if I did upload an image, I’m going to hit this end point. And with that, I’m going to use this uploader upload method, also from the Cloudinary API or I guess, Python SDK, which I was happy to find out there was.

And again, that’s just going to upload it to the cloud and then it’s going to return the attributes of the image. I put this to do here because I thought this was so interesting that there’s actually

like a quality set to true when you do the upload, and then it, it gives you like a quality score. So you could even show, I think this is my understanding from just reading the docs.

Becky Peltz: Yeah, there is a way that [00:25:00] you can have it return information about the quality, like if it’s fuzzy or something, you know?

Cori Lint: Right. I thought that would be great because then on the form, you could even just display a little error validation thing that says, please upload a better quality photo so the website doesn’t look like crap.

Becky Peltz: I mean, and like you could, if you were expecting a face for example, you could have it checked to make sure there was a face.

Like if you upload a chair, you could say, only take it if it’s a face. So yeah. That is nice to have a little bit of built in AI there.

Cori Lint: Yeah, that would be super helpful. So yeah, those basically return the same just attributes about the file and then that’s what we’re going to reference.

We’re awaiting that response from one of those backend functions and returning it back to here. So this is our response. And yeah, this is basically an end. This is the form data that we’re going to take and we’re going to throw it again to the back end and say, here, store this stuff as a new cellist and the part that we’re using [00:26:00] from the responses is that URL.

So then when the profile page is displayed, it’s just displaying it from that URL, which is now storing Cloudinary. So, pretty cool.

Becky Peltz: Very nice, yeah.

Jen Brissman: So how did you figure out the call to the Cloudinary API for upload? Were you always doing it this way, or, how did you kind of start out?

Cori Lint: Good question. At the time I was actually doing the Cloudinary call on the front end.

I ended up more recently moving it to the back end. But yeah, at the time, I really just went to the docs. I think one of my boot camp cohort mates pointed me to the right place in the Cloudinary docs. I hardly knew what I was looking at the time, right. But I knew that I could grab that chunk of JavaScript code, bring it into my project, and try to make it fit into what I already had with the form and everything.

More recently, I mean, it was just so much easier because I have so much more [00:27:00] experience, but also I decided to move it to the back end and it was just that much easier. So you saw back here, it’s just these really simple, built-in methods. I can go to the docs and say, okay, I’m using Python.

There’s a Python SDK, I can find the code in Python, which is awesome. Just grab it and look at what the documentation tells me that it’s going to return. And that’s actually what showed me like all these options about quality and the one Becky mentioned about faces and things like that. So yeah, really just referencing documentation, maybe looking at other projects on GitHub that use it, that kind of thing.

Becky Peltz: I think you’re wise to move all of that thing, all of that to the backend because you will get a signed upload, because it will be using your security credentials when you’re on the back end. Like you wouldn’t be able to really do that on the front end. Exactly. In general, this is the way to go. You could start with something on the front end, get it going, but then get it more secure by [00:28:00] moving it to the back end.

Cori Lint: Right.

Jen Brissman: How does your crud file work to update your database, and what do you save about the image in your database that you can then pull from?

Cori Lint: Sure. This is a funny file because the way I would have organized all of this now, knowing what I know about object-oriented programming and everything, this would be very different.

Like these methods would belong with the class for post, that kind of thing. But what I did is just throw all of my helper functions into this crud file. Anything that does a crud function goes here. So I guess we’re looking for create cellist.

There you go. So, what’s happening here is I have a class, actually I should show you that class is probably where to start. So this is model, look for my cellist.

Becky Peltz: This is where you get into SQLAlchemy ORM, is that what you’re using? Object relation mapper? Exactly.

Cori Lint: Yeah. And I love this cause [00:29:00] again, I just feel like it’s so clean to look at and it’s also just really straightforward both for learning and just like if you want to whip something up really quickly, it’s simple.

We’re saying this is a class cellist and that translates directly to a table called cellist. So this functions is both as my data model and I can just code all of the tables out right there, instead of actually using SQL which is really nice. SQLAlchemy does all of the sort of translation in the background for me, which is nice. So these are my columns. Each of these is a column. Each of these is a column.

So what I’m doing in my crud file when I create a cellist is I’m just instantiating an object from that cellist class. So whenever I pass all of that data that I put in the form or the user put in the form to the back end, I’m calling this function and I’m saying, okay, I’ve already grabbed all these things from the form.

That’s what I’m passing in. So then I’m just [00:30:00] creating a new object based on all of that information. And then, adding and committing it, just bam, like that. And then I’m returning the cello object, so then I can reference all of the information that I added.

Becky Peltz: Well, it makes for some really clean code.

Like it’s nice, like you probably worked on this a while ago, but you can come back and read it and know where you were. Exactly. Yeah. I also noticed when you’re calling these from the front end, you’re using async await, so yes, want to talk about that a little?

Cori Lint: Sure. That was actually brand new to me when I think this was the first or this was the first async function that I ever wrote,

so I don’t know how well I can talk about it cause I also don’t use JavaScript anymore.

Becky Peltz: But you’re taking advantage of promises, which Cloudinary can return for you so that you don’t for your error handling and stuff.

Cori Lint: Yeah, exactly. And I didn’t deal with error handling at all here, which I realized when I was working on more development recently.

Oh, what? Nothing happens if I, I have a server [00:31:00] error, so it doesn’t work very well. But yeah, this async function is, there are several different levels that I’m waiting on, essentially waiting for a response from the backend, waiting for a response from Cloudinary, waiting for a response from this function.

So yeah, there’s actually like three levels of await going on here.

Becky Peltz: It would get very messy if you were using callbacks. You’d have a lot of these callbacks. So this keeps it really clean.

Cori Lint: Yeah, Yeah, yeah, definitely really useful.

Jen Brissman: So is Cloudinary the only cloud service you’re using, and also, what did you think of using Cloudinary?

Cori Lint: So Cloudinary it’s the only one I’m using in this project. At work, we do use like AWS. But yeah, in this project and really in my development up to this point, this was the only cloud service I had used. I found Cloudinary pretty simple, especially the second time around.

Now that I have more development experience. For me, I’m like really big on documentation, both writing it and consulting it. And [00:32:00] so I think how good an API is really for me depends on its documentation. Can I find what I need to find easily? Does it make sense? Is it easy to read? Are there code examples?

That’s a big one for me too cause sometimes I have to be able to actually walk through it. And actually the Python code in the Cloudinary docs I thought was set up really nicely because it’s not just like, oh, you can use this piece or you can use this piece. It actually had you go ahead and create the environment variable that you needed for your account.

Lay out like three or four different functions and then run the whole file. So you’re actually seeing like the entire sort of life cycle of what you need to be doing. And you’re like, oh okay, this makes sense. Now I know how to apply it to my project, versus just pulling out like one or two functions.

So I did end up just using two methods, but now I feel like I have a much better sense of how the whole thing works in a big picture way.

Becky Peltz: You used the upload API for your upload and you used the [00:33:00] admin API to get their default image and basically those are our two main APIs.

Those are the two big crud APIs anyway. Yeah. So you’ve tackled both of them. Yeah.

Jen Brissman: Is there anything else that you would want to add to your project media wise and anything you could see changing in the future?

Cori Lint: Yeah, I feel like there’s so much potential here. If I look at, for example, I mentioned before like this listen now button would be nice to have Spotify widget or something like that.

But I was also thinking what if users could upload photos of, this is me with Martha when I was 15 at this competition or something. Maybe this is a profile, but what if there’s a gallery here of like photos from students or something like that. Yeah. I also thought obviously music gets performance, so video and audio is really important.

So I thought having obviously just the capability to upload and store video and retrieve it would be really nice, and then audio as well. I thought it would be cool [00:34:00] maybe eventually in addition to these comments to have like audio stories or something like someone could go in and be like, oh, I have this great story about Janos Sharker smoking a cigar during my audition or something, you know?

Yeah. These are the kind of things that we love to share. Like we all have endearing or funny stories about our teachers, so I thought that would also be just a really nice way to share their legacy and the things that they taught as well.

So yeah, audio, video, multiple photo uploads, that kind of thing would be really nice.

Becky Peltz: Yeah. If I have one thing, then, I don’t know how much time we have left here, but I would really like to see how you did your tree in the front end. I know you used special libraries.

Cori Lint: Yeah. Yes. Oh, it’s kind of a beast, but I’ll give you the tldr. So wait, let find that. There it is. tree class. Okay, let me minimize some things in here. I should first talk about probably the [00:35:00] library that I use, which is d3: data driven documents. And a lot of my bootcamp classmates were using Chart.js, which is actually really cool, really nice looking, easy to use, easy to reference.

And I quickly realized that it was like, it just didn’t have the capabilities of my project. So actually, let me show you something that I was looking at on D3. This is kind of what I pictured in the beginning is like a giant tree that you could, you know, navigate through.

But even this doesn’t cover the many to many. This is still just a one to many. That’s right. Yeah. Yeah. So I should actually show you this other project that I just think is amazing, and this was also on my mind when I was developing. So this is like you search an artist that you like.

But I absolutely love this. So this shows like, the closer in proximity they are to the artists that you searched, the more similar they are.

I don’t know how they figured that out.

Jen Brissman: l love how Betty Davis and Janelle Monae I guess are closer than we all thought.[00:36:00]

Cori Lint: Who knew? So these were just ideas, things that were on my mind. I searched the internet to find like an example of something that made sense.

And what I finally found was this like pedigree or literally family tree option by this user on GitHub. So many thanks to them for contributing this idea, which I really borrowed pretty heavily from the whole idea of the using one root node, but actually having two trees. That idea came from this person’s project.

So this file is really just here are the classes, here are the relevant methods. So here’s a tree class, here’s what children are, here’s what data are, here’s how to draw the lines that connect the different nodes, draw the nodes, and you notice that when we added someone to the tree, the whole thing would sort of regenerate.

So every time you do that, it refreshes, it redraws the entire tree.

Becky Peltz: Like listening [00:37:00] for an event kind of to, to let it know.

Cori Lint: Yes, exactly. Yeah, this was pretty old.

I think when I found this. It was four or five years old or something. It still works great, but it’s using like a, I think D3 is on version seven and this is like version three or something. Oh great. So it definitely could use an update, which I wasn’t quite ready for at the time.

But yeah, it works great. It is super fast. I did a bunch of customization too, like I could have gone forever with the customization. I was just starting to get my head around everything that I could do because it dynamically generates everything, so you can make things, whatever color or size you want and yeah, just so many possibilities there so.

Becky Peltz: Yeah. I’m kind of curious if it would perform well if you were to stick a little image in each one of those. I think you could cause you could optimize the images and that would be kind of cool to just see all the people.

Yeah.

Cori Lint: It would. So many possibilities. I [00:38:00] would love for there to be that like giant tree that I had in mind. I don’t know what that looks like, but it would be really cool.

Jen Brissman: So Cori, do you have any next steps for Cello Tree in mind?

Cori Lint: Actually, I’ve mentioned a few with the different media options and of course there’s so much. But I do have to mention something really cool happened. As I was talking about this project, actually, I think it was someone through in Artists Who Code. I was talking about this project.

I shared my demo video and like I said, like, we’re big nerds, right? So cello nerds. So someone reached out to me and was like, hey, did you know that someone else actually built something like this like many years ago, like early two thousands or something.

They pointed me to it and it actually is not live anymore. But I did a little bit of digging. I found the person who created it, and weirdly enough we even share a birthday, so it is meant to be. Wow. His name’s Carol, and he lives in the Netherlands. He’s a cellist and a self-proclaimed nerd.

So he [00:39:00] had this website, it was essentially very similar to my project without the data visualization, but he has a database of over 1200, I think it’s actually more like 2000 cellists. Oh. And their relationships to each other, like exactly what I was doing. So I would love to migrate all of that data into my project.

Also would be a fun scripting project to figure out how to do that. But he actually said, I reached out to him, we chatted a little bit. He was like, your project looks so cool. Like, I was always sad that I had to take my website down, you know? So yeah, I definitely want to do that in the future, integrate all of that new data and like really flesh out my project with some more data.

Jen Brissman: So he just willingly shared all of his data with you and said, run with it. You can do it.

Cori Lint: Yeah, I was kind of shocked. I was kind of shocked actually. But I think it was just like the connection that we had by being cellists, being little bit of techy nerds, having the same birthday, like I said, it was meant to be.

Jen Brissman: Cori, this is amazing. You built this project in the course of what, a few [00:40:00] weeks?

Cori Lint: Yeah, five or six weeks, I think.

Jen Brissman: Wow, so that’s amazing. And I just wanted to ask you, what was it like bringing together your skills as an artist with your skills as a software engineer and exploring what that looked like together?

Cori Lint: Yeah, we could seriously spend a whole podcast talking about, music or arts skills and how they lend themselves well to software, specifically software development, but a lot of other things too. But more briefly, for one thing, as a musician, you spend a lot of time inside, at least a classical musician, inside the four walls of a tiny six by six practice room.

Very self-driven, very focused time. I think there’s so many parallels between learning a piece of music and either learning a new coding language or building a coding project. Just the sort of exploration phase.

The just getting the mechanics to work, getting from point A to point B, and then more efficiently and more beautifully. There’s so many [00:41:00] parallels there. I think as a musician, I learned, yeah, focus, self-motivation, attention to detail, how to communicate with other people because yeah, you spend a lot of time inside a practice room, but you also spend a lot of time playing with other people.

Like I worked with a string quartet professionally for a couple of years and like working really closely on a team, making decisions together, those sort of soft skills as well. But it’s funny because I’m a cello substitute, so they call me up if, you know somebody can’t play the concert or whatever. And sometimes I go back and play and other cellists are like, oh, what are you up to now? And oh, I’m, you know, a software developer and a lot of them are just absolutely shocked and say things like, oh, you must be so smart, or I could never do that.

And I’m like, I don’t think you realize how, if I can do this, anybody can do this. Maybe not anybody, but somebody with the type of drive and attention and just mastery of a skill like that. I have no doubt in my mind that they’re not only smart enough, but have so many other [00:42:00] skills to contribute that maybe people even from technical backgrounds might not have as much.

So yeah, there’s a lot to cover there for sure. But yeah, it’s been a really interesting experience and I feel like it’s actually given me. Yeah, I’m not a genius. I’m not Steve Jobs. I’m not going to be maybe the best developer at my company. I’m like a year in. But I think I have all of these other things that I can offer that in part, were very much developed by my music career.

Jen Brissman: Yeah. And probably things like empathy and other soft skills that you have make you a better developer, make you a better teammate, and make you able to collaborate in a better way and maybe learn quicker and just be a contributor. So yeah, and so I know, obviously I know personally because I’m in Artists Who Code as well, but I didn’t know if you wanted to chat about Artists Who Code before we sign off or mention how that’s impacted your journey into the tech space.

Cori Lint: Yeah, absolutely. A lot of what I just said, I’ve had the words for it [00:43:00] because I’ve had these amazing conversations with other people in the same space. It’s an interesting group. I would say it’s like maybe half support and half advocacy. So we do need a lot of support when we’re making these career transitions.

People in the arts, it’s our life, it’s our identity. And when we move into something else, there’s this like sense of, of loss, of almost grief, of like identity crisis, like that kind of thing. There’s also just the, how do I make a resume, cause that like maybe we have our arts resume, but what does a technical resume look like?

I have no idea. What’s LinkedIn like? Not everybody, but a lot of us don’t have that really basic knowledge. So there’s the support for folks that are wanting to make the transition. And then also for folks that are in the tech industry who maybe just want to be around people like them.

And then on the other side, there’s this advocacy piece that’s like, recruiters may look at [00:44:00] a resume and be like, okay, you have orchestra experience. That’s totally unrelated, right? But, if they understand like the type of people we’re talking about, they might realize that these people are very high empathy, very creative, very good communicators.

So if we educate the public on these skills that artists already have, it might make that pathway just a little bit easier for them. And I think it will really enrich the tech industry. Just this new wave of like very empathetic and creative people. I think that’s always a good thing.

Jen Brissman: So, Cori, tell us a bit about where you work now and the stack that you work with, the languages that you use primarily.

Cori Lint: Sure. So I work for Ovia Health. It’s a health data company. Basically, we have apps for fertility, pregnancy, and parenting, which is really cool. It’s always nice to work for a company that makes a product that I can actually explain to people.

Yeah, it’s not so esoteric. I love their product [00:45:00] and I get to work on really fun features like logging a child height or birth control logging, or right now we’re actually working on some stuff for inclusivity around the app experience. I’m not sure if I can talk about specifics, but that’s really nice to be working on as well.

Ovia was actually acquired by LabCorp last year, but it’s nice because we maintain the close knit culture still feels like sort of startup, the good parts of startup culture where we’re all very close and very kind and yeah. It’s a great place to work. As far as the tech stack, we mainly use PHP, which has been really interesting moving from Python to PHP, as with all languages, tons of overlapping concepts, but the syntax is just like night and day.

I feel like with Python, even if you’re not familiar with language, it’s pretty straightforward. Like you can look at it and know what’s happening. It almost reads like a sentence. Yeah. But PHP I found not that way. Yeah. And to be fair, I [00:46:00] also moved from like student level Python to an enterprise code base in PHP, so that’s a big difference as well.

PHP is funny. I think it’s sort of a misunderstood language. It gets a lot of hate. And I had heard this out in the tech world before and not really understood why. And now that I’m getting into language, I’m understanding sort of the reasons for the bad reputation, but also finding ways to counteract that because the language has evolved so much over the past few years.

There’s a lot of old kind of bad PHP code out there on the internet. That doesn’t mean it’s a bad language, it just means it’s an old language. But one of the things that I actually love about PHP is that it’s an old language. So sometimes when I’m asking one of the senior engineers, like, why are we doing something this way?

It opens a can of worms and we end up talking about the history of PHP and backwards compatibility and, you know, all these kinds of things. But modern PHP has all of the capabilities of any other modern language, like [00:47:00] object oriented programming, strict typing. It also just the sheer volume of like history and the sheer number of developers out there that work on it is always fun.

There’s a ton of information out there about it.

Jen Brissman: I feel like if you’re coming to the defense of PHP and you use it all the time, that must mean you love using it and it’s a great one to work with. So I think that’s telling that you’re strongly coming to its defense for any of the haters on the internet.

Cori Lint: Yeah. I’ve also been like indoctrinated by the senior engineers at my company who really love PHP. So shout out to them as well.

Jen Brissman: I love that. I love that. And it seems like you have some good mentorship at your company too, and have grown a lot in the last year?

Cori Lint: Definitely. Yeah. Absolutely. Yep. Obviously a lot of code review, but also, a senior engineer will just say, hey, I saw this thing in your PR I’d love to chat about. Do you want to just hop on Zoom? And we can pair through it. And sometimes we have an hour long conversation. I learn so much.

And there’s just a culture of that. Like there are no dumb questions. I think that’s [00:48:00] so important for a junior engineer, especially coming from outside the industry. So yeah, it’s been a really great place to grow.

Jen Brissman: Amazing. That’s so great to hear. So, just to wrap up, if anybody wants to get in touch with you, Cori, we’re going to share your LinkedIn and other details with how to get in touch and yeah if there’s anything else we want to add, I just think we want to say thank you so much. Great.

Becky Peltz: Thank you. It’s really been wonderful hearing you talk about it and I love your project, so.

Cori Lint: Thanks so much. It’s been really fun to revisit it and also to see it through other people’s eyes is always fun. So I really appreciate the opportunity.

Becky Peltz: And you used Cloudinary, so nobody told you to do that.

Cori Lint: Exactly. I used it before I even knew.

Jen Brissman: Yeah. Actually, one more follow up question before we wrap up. How did you find out about Cloudinary?

Cori Lint: I think it was just something that our teachers and advisors at Hackbright were familiar with, and they knew it was a good product. So it was recommended.

[00:49:00] I kept hearing the name and I was like, I guess I should check that out. And, yeah.

Jen Brissman: Yeah, I always like to ask people, because it’s something I think more people will know about going forward, but I wish more people knew about Cloudinary. And I think when I was building my project that also used media at the same school, Cori was at and I found out about Cloudinary.

There wasn’t any other competition. There wasn’t any other cloud service that I could have used that would’ve done the same thing Cloudinary did. So I’ve yet to hear of one that does the same thing. So I’m glad you found Cloudinary Cori, and I’m glad that you shared your time with us today.

This was such an interesting conversation and we’re so grateful for you.

Cori Lint: Thank you so much.

Becky Peltz: Thank you. Thank you. This was a great episode. I really enjoyed hearing Cori explain her thought processes, her love of cello and Artists Who Code. But I really liked that data model that she created. It was really easy to understand, and anytime you’re dealing with many to many, it can be challenging.

And she did a really good job showing us the flow of creating the model and then [00:50:00] translating that into a UI with two trees.

Jen Brissman: Yes, exactly. And we’ll share the resource that she used to create her data model, and she really had a difficult task. She had to show the complicated relationships between teachers and students.

And then she realized that everyone was a cellist, but also a student and also probably a teacher to someone else. So D3 was a great resource for her to show that as well.

Becky Peltz: Yeah, the whole student teacher model was really interesting. It definitely fit into this idea of setting up a tree for cello, but I could see other people wanting that model, who taught you how to code or something, or who taught you how to ride a bike and who taught them.

I don’t know. But I think it’s been a good model. I also just coming from Cloudinary customer education, I really want to emphasize that this shows a good example using the Python SDK with Flask to create an API for both upload and admin. So she uses admin to get her default images, and then she uses the upload API to upload any kind of [00:51:00] new work.

So I’m really appreciating that.

Jen Brissman: Yeah, definitely. And then another takeaway is Cori started with someone else’s solution and she built her project from there, and that’s something that’s totally kosher to do. I think maybe we’re conditioned like, oh, don’t copy someone else’s work. But there’s a big difference with starting with someone else’s solution and building from there.

That’s something that happens all the time in the developer community.

Becky Peltz: Yeah. I’ve been a developer for years and years and even going back to looking at the scientists like Newton, it’s always start with somebody else’s stuff. We build on each other’s shoulders. Yeah. And that is the cool thing about technology is it’s an evolution of how people think about things.

So we have some ideas about copyright and don’t copy other people, but that’s not how it works in technology. Open source code really blew away a lot of the secrets about coding anyway. Yeah, she did it in a really good way I think.

Jen Brissman: Yeah. Yeah. And lastly, I think [00:52:00] it was a really important case to look at bringing your passions.

She’s been a cellist her whole life professionally, and she had this idea to build this app and learning about how the developer in the Netherlands shared his data with her, and they made these connections worldwide because of something she created that really started from her passion in another unrelated field.

So it was interesting to hear about that, and it’s just important to remember that bringing other passions in is only going to make for better projects and a more meaningful experience for the developer.

Becky Peltz: Well, in general, I think that’s the whole reason why so many companies are investing in diversity is that the more points of view that you get, the more we realize the problems out there, and then also get a lot of ideas for solutions.

So passion and having a voice in the projects you’re working on. And she does demonstrate that really well in this conversation.

Jen Brissman: Absolutely. Absolutely.

Becky Peltz: Yeah. So all in all, I hope that this [00:53:00] will be not only informative, but fun to watch. I think there’s a lot of good material for any developer that wants to work with Cloudinary, especially if they’re a Python developer or just a web developer. This has a lot of interesting code and ideas.

Jen Brissman: Yeah. Thank you so much to Cori for coming on, and stay tuned for the next awesome DevJams episode.

Becky Peltz: And that’s a wrap.

Sam Brace: [00:00:00] Welcome to DevJams. This is where we talk with developers that are using Cloudinary in their projects, maybe in interesting ways, inspiring ways, or just ways that we’ve never seen before. And of course, this will help people like you, hopefully that are thinking about their next websites or next mobile apps or next software projects, and thinking about ways to help manage and deliver media in some of the ways that our guests are showing in these episodes.

My name is Sam Brace. I am a Director of Customer Education here at Cloudinary and joinning me for every DevJams episode is Becky Peltz, who is our curriculum program manager for developer education at Cloudinary. Becky, nice to have you back.

Becky Peltz: Hey Sam, it’s great to be here. I think this is a really fun episode.

I know when I saw this come across, [00:01:00] I had to immediately do my own GitHub wrap. So I can’t wait to see what it’s going to look like when we talk with Harshil about it.

Sam Brace: Absolutely, and Harshil, he was working for n8n at the time, and we’ll talk more about where he’s at later, but when he built this project called GitHub wrap, it was a way to really show off all the amazing work that as a developer, that you’re putting into GitHub, but to summarize it into a yearly report and to really do it in a fun way to show off all of the great work that you’re doing, all of the repositories you’ve created, maybe all the pull requests you’ve done and,

we’re really inspired by this because one, you see companies that have done similar things like Spotify, where they’ve created their Spotify wrapped project to show all the different music you’ve listened to and the artists you’ve learned about and started listening to more over a course of the year.

Sometimes it’s embarrassing. Sometimes it’s helping you to realize [00:02:00] how much you enjoy that product and that person, but in the same way, I think the GitHub wrap project had a very similar flare to it. And what Harshil has pulled off, it’s fantastic. And of course, all the media that is associated is done with Cloudinary, which we are very, very excited to see.

Becky Peltz: Yes, and I haven’t seen n8n used, and I’m really looking forward to seeing that, because we are all getting into low code now. Even as developers, we are looking at the low code as a good solution.

Sam Brace: Absolutely. So let’s get into it. Let’s go and meet Harshil and take a look at his GitHub wrap project.

And then stick around at the very end. Me and Becky will give you some key takeaways that we felt were important from this episode for you to be successful as a developer if you decide to take on any of the learnings that are found in this episode, so see you then. Harshil, welcome to the show!

Harshil Agrawal: Thank you so much for having me.

Sam Brace: So Harshil, we’re excited to talk to you about the [00:03:00] project that you developed: GitHub Wrap. We’re excited to be able to talk about lots of other things that are associated with the project, but I really wanted just to get to know you for a little bit here, cause I think you’re doing some really cool things.

Obviously other people are noticing out in the tech sphere. So tell us a little bit about your role at n8n and what you’re doing as a developer advocate there.

Harshil Agrawal: So I work in the developer relations team at n8n, where I get to talk about automation and low code and also help the community to get started with their automation journey.

I do a lot of things at n8n, but one of my favorite thing is being lazy, because it helps me, you know, be more productive, find solutions to things that I kind of don’t like, and then share with the community.

Sam Brace: And I think that’s a great thing to be able to talk about because one of the things that it happens with automation, right, is you kind of want to automate things that you don’t want to have to manually do, things that might feel repetitive, as you’re pointing out.

If you’re saying you’re lazy, I don’t think you’re lazy by the way. [00:04:00] But if things that make you feel like, oh, I don’t want to have to do this perpetually, automation is a really good functionality for that. And it seems like a lot of the things that you’re focusing on with this program, with this project, it is really tied to automation.

So talk to me more about that. Why is that exciting? Why is that something that developers should be caring more and more about?

Harshil Agrawal: So a lot of times I have noticed, we as humans, we don’t realize that we are doing a lot of same things again and again, and wasting our time on that, which can eventually be done by a machine.

But we are like, okay, it’s just going to take me a couple of minutes to do it, and I’m going to do it. And eventually we end up wasting a lot more time than just a couple of minutes. That, accumulates all together and we don’t realize it. And that’s where, you know, I feel automation, not just for developers, but for everyone out there is really helpful.

Becky Peltz: Hey, can I say something here, because you’re not the first good developer I’ve heard this week say they were lazy. I think this is a good quality. And I think it goes [00:05:00] hand in hand with automation. You know, we’re going to make things so that we don’t have to do the same thing over, but the other really key thing is that we’re lazy and we’re prone to error.

And so if you are doing things manually, there’s going to be lots of error. Whereas with automation, you can fine tune it and get it so that it’s going to work good for everybody every time. And I see that in your app too.

Harshil Agrawal: Exactly, yeah.

Sam Brace: So Harshil, some of the things like, let’s just, before we get into the project, what are some things that you’ve automated?

I’m interested. Like where, where is this taking you? This automation journey?

Harshil Agrawal: One of the cool things that I automated was clearing my inbox. So I have subscribed to a lot of newsletters and my inbox was a mess. So I created an automation where it gets the WebView version of those newsletters, adds it to my Notion.

And then, you know, just deletes it, that email. Now my inbox looks good, a bit good, but my Notion is just going on.

Sam Brace: And I think [00:06:00] this is a helpful advice for like anybody. That’s not like, you know, regardless of who we are, email’s a problem, right? Like we’re always struggling with that inbox zero, or trying to make sure that it’s clean.

You’re not getting all of the spam, all of the newsletters, all of the things that, you know, that somewhat create clutter. So yeah, that’s an excellent idea for automation for sure. So obviously also you’re a developer, you’re on a developer relations team for the company that you work for. Talk to me also about your journey as being a developer, because obviously being a developer advocate, you’re probably catching people within different points of your journey.

Yeah. What was your journey like?

Harshil Agrawal: So, very early in my school days, as I got attracted to the technology space and I was like, I want to do something in here. And as I got to dive deeper into it, I got interested more and more, and I started learning on my own. And after I completed my high school, I came across freeCodeCamp which became my source of learning for web development.

And I still, you know, whenever someone asks [00:07:00] me about, “Hey, where should I get started?”, I always suggest them to just go ahead and or take a courses on freeCodeCamp, because they’re completely free. But apart from that, it’s structured so well. And they also have really amazing community around the world that is always ready to help you out.

So that’s how I got started into development, and while I was in university, I tried to dabble around with different technologies. So I did a bit of work at Android, machine learning, and Blockchain, just to get an idea of where my interest lies. And that’s a quick summary of my developer journey, I guess.

Sam Brace: So looking at something like that, because I think you’ve touched on a lot of really interesting points, like online learning, obviously. That’s how you learned, you didn’t go to like a formal school. You don’t have a computer science degree. You did this through freeCodeCamp.

So what are your recommendations there? Like as somebody that, you’re talking developers all the time, like, is that going to be a place where you find a lot of people are going to, should they be [00:08:00] investing into that? Also, was there any places where you were going for online learning where you’re just like this, this isn’t super helpful?

Any advice for our developer community there?

Harshil Agrawal: Yeah. Just one thing to correct. I have a formal degree in computer engineering, but I believe that, you know, whatever I learned in my university, I am not actually using that. What I’m using currently is, you know, everything that I’ve learned online.

So even though I have a degree over there, I still call myself as a self taught developer, because everything I have learned I believe is from the internet. But coming back to your question, it depends, you know, what the people want to learn. If it’s, you know, something kind of web development, I always ask them to get into freeCodeCamp because that is the place

I started with, and it really helped me a lot. Then the other platform that I used was Codecademy. They also had really good courses around JavaScript, which helped me learn about that. And while I was dabbling with Android and machine learning, I think I

went through a few courses by [00:09:00] Udacity.

So that’s another platform there, you know, people can learn about this. But what I have learned from my experience is you cannot learn anything just by following the tutorials or reading articles, you would have to go ahead and create something on your own. That’s when the actual learning happens.

Becky Peltz: Yeah, it is kind of one of the fun things about coding is that you can go off and do your own project, something nobody’s ever done before and in the process, learn something new and then turn around and teach it. Because I know that you are a teacher, you have many avenues for teaching. Do you want to share some of that?

Harshil Agrawal: Sure. So earlier last year, I think I was playing around, with n8n and Twitch and I was like, huh, I do live streams. I don’t want to tweet every time I go live, so I know there is, there has to be a possible way to automatically do that. And while I was researching into that, I learned, okay, so Twitch has an integration, which I can leverage and [00:10:00] create an automation workflow.

I did that and I wrote about it so that other people can use it. And I get feedback from people like, Hey, thank you for writing this. It’s helping us with our streaming. And we also want to see how we can extend this. So I kind of experiment on my own, build stuff, and then write about it.

So that’s kind of my process of teaching.

Becky Peltz: So we love problems, huh? Because that’s a good, a way to get a solution.

Harshil Agrawal: Exactly.

Sam Brace: Also once again, proving you can automate all the things, right. So very good job. Yeah.

Harshil Agrawal: I told you I’m lazy.

Sam Brace: Now one thing that I wanted to ask you about, because a lot of the things that we’re going to be talking around workflows and automations tied to your projects, it is tied to this concept of no code or low code.

I know that you mentioned that even a little bit earlier. Kind of unpackage that for us, because I think this is the first time we’ve really discussed no code or low code products at all in our DevJams overall program. So let’s introduce that a [00:11:00] little bit for our audience, cause it’s still kind an area that I think there’s a lot of ambiguity about.

There’s some questions about like, is this low code? Is this not low code? So what, what are your feelings about it?

Harshil Agrawal: Sure. I would say that we have been in the low code ecosystem for a while now. Because WordPress has made it easy. It has taken a lot of abstractions out there. So I think that was, that was the first part, you know, where low codes started, but people didn’t realize it at that point of time because there was still a lot of coding involved.

But if you look at it, from just take an overview of it, it actually abstracted a lot of code from the user endpoint. So the user just had to go ahead, you know, just play around with the blocks in WordPress and then they had a website ready. So that’s where I feel, you know, the journey of low-code started and low-code, and no-code actually

is the ability where, you know, people get the abstraction of the code. So they don’t have to go ahead and write the code by themselves. That’s basically what no code does, but [00:12:00] with low code, it makes it more flexible. So, okay. You don’t want to write a code? That’s completely fine. Here is the abstraction.

If you want to write the code, if you want to extend the functionality of the project or the product, you can go ahead and write some code at this particular stage. So that is what is the major difference, I think between low code and no code and I have seen developers are now getting more adapted towards low code technology as well, because it provides you an abstraction.

It saves you a lot of time of writing that code again and again, why would you write a code when someone has already done that? Right? It does not make sense. And that’s what low code is trying to solve.

Becky Peltz: I kind of see it, like building up to that, the whole sandbox technology where there’s lots of code snippets out there.

So if I want to write code, I do not start from scratch. I go Google somebody else doing it, grab their stuff, and then I start changing. But now to have it more formalized, you know, and present it as this is good low code, no code. It will [00:13:00] be a great starting place. I think it helps everybody.

Sam Brace: Now, one thing that I wanted to ask you about with that is, so I think there’s a misconception that I’ve definitely seen in the low code, no code discussions where for like, as we’re pointing out very clearly with what you’ve said, what Becky just added on.

It’s where no code to low code tools are used by developers. And I have seen it where like people are saying, well, low code and no code should be used by people that don’t know how to code. It’s a way for them to use this tool. And I disagree with that. So it sounds like you do as well. Am I right about that Harshil?

Harshil Agrawal: Yeah. Yeah, I agree with that because, we as developers, we are also humans, right? We also want to find solutions that make our lives easier. If it’s a product that is no code or low code, why do we discriminate it against it? If it’s making our life easier, right. I feel we should be open and see if it’s working for us. If it’s not working, then that’s a different thing.

Sam Brace: No, absolutely. Absolutely.

Becky Peltz: I noticed that you got into the NoCode [00:14:00] November event. So can you talk about that a little? Like how, what kind of projects and what you did there?

Harshil Agrawal: So the NoCode November event was a one month long hackathon, which was organized by Typedream. That Typedream is again a no code automation platform to build websites, but they organized this event and involves participating organization with them.

And I really like that event, because you got to build a project and not just build a project, but you also had to, you know, share it with the world. So oftentimes at hackathon, we see people build a project and it stays within the hackathon community and does not get out. But with that, they had a strict rule.

You have to publish it on Twitter or, you know, launch it on Product Hunt, which kind of attracted me to be a part of it. And the other thing is they were offering free credits up to for certain tools. And I was like, I want to try out these tools. I want to try it out, so I might [00:15:00] just participate and get those coupons.

Becky Peltz: Yes. There’s nothing like a free tool to get you going.

Sam Brace: I love what you just said Harshil because like you’re saying, like, it’s so easy to get these products up and running. You just have to use product time. I mean, obviously you can get this things out there and I’m just, I’m thinking back to like, you know, 20 years ago and we have to

spin up Rackspace servers and all this stuff. Like it’s so easy to get projects out nowadays. So I, I’m so excited that we’re at a stage of innovation, which you’re obviously a part of, and you’re able to get things out through hackathons and get things built out so easily. It’s great to see where things are ultimately going.

So thanks for being a part of all of that and giving people all these ideas on how they can get their projects up and going too. One thing I wanted to ask about is your specific project. When I saw this being talked about on blogs, when I saw it popping up on Twitter, I was like, oh, this is such a fantastic idea.

Because as a developer, you’re developing so many different projects, you’re doing so many commits. You’re [00:16:00] doing so many pull requests over the year. How do you summarize all of that work in a way? And you did that with this GitHub wrap project. And I just, I thought it was genius. So tell me more about it.

Why did you decide to go down the path of building this thing out?

Harshil Agrawal: Yeah, I’ll be honest. It wasn’t an original idea. This idea was inspired by Spotify Wrap. So if you have used Spotify, you might have got those notifications from Spotify at the end of the year. Like, hey, here is your wrap, which summarizes your listening habits.

I never have tried out Spotify wrap because I believe if I tried it out, it is going to influence my listening habit and, you know, I might be influenced in some way, but I was like, but this is a cool idea, right? I get to summarize what I have done in the year and share it with the people. So it’s like, why not take this and, you know, do something around the open source because being an open source contributor, I always like to talk about open source and encourage people to do that.

So I went ahead and, you know, [00:17:00] tried to look up at a couple of projects and there were already a few of them similar to GitHub Wrap. So I was like, huh, do I want to reinvent the wheel? Do I want to create it on my own and do that. But then I was like, these projects are amazing, but they are build with code.

Why not go ahead and challenge myself to build it using low code tools and see how that goes. And that’s how the project was born.

Becky Peltz: I think it’s a great idea. I know when you’re a developer, it’s important to put on your resume or somehow share your work. And a lot of hiring managers look at your GitHub record, you know, how active is this person or whatever if you’re in GitLab.

But the thing is, this gives you like an instant summary, and it’s a link that you can share. And I mean, it just satisfies so many features that help you to share your work.

Harshil Agrawal: Yeah, exactly. One of my colleagues gave me the same feedback. Like he, he really loved the project and we were brainstorming more ideas on what we can do on top of this.

And this is the exact same [00:18:00] idea that he shared with me.

Sam Brace: Yeah, I gotta tell you, I think you’re onto something Harshil. Like I’m a Spotify user, and I have to tell you, Spotify Wrap influenced my music listening completely. So you’re on to something here. I’m like, uh oh, I’m listening to too much of that.

That’s a little embarrassing. So yeah, I get that completely, but in the same sense, because they do such a great job of summarizing all the content and it’s literally just, you know, pulling data and compiling it. Very much, like what you’re doing with your project. It is where it helps you to reflect and say like, oh, wow, I really did do a lot this year.

Or maybe I should have done more. So I think there’s lots of ways this can be used. I think Becky’s definitely onto something where being able to provide an instant result for hiring purposes or contract purposes. But I mean, I think the use cases for what you’ve developed are endless for the overall developer community, especially those that are doing open source contributions that you have been doing.

So, kudos to you, even before we show people the project. I’m excited [00:19:00] to get this thing up and going. So, Harshil, do you want to show this thing off? Walk us through it a little bit.

Harshil Agrawal: Sure. I’m excited to show this, so let’s see if I can grab it.

Becky Peltz: Right.

Sam Brace: Perfect.

Harshil Agrawal: Yes. So this is the website for, low code land slash GitHub Wrap. This is kind of a very simple UI and I’m surprised that people really love the UI because it’s very simple. And I am not a designer. So for me, I was like so happy when you know, people say to me like, hey, this is something that we love.

This is the wonderful UI.

Becky Peltz: I like the simple UI myself, if it’s to the point. And I think everybody should put that Product Hunt and tweet on their app. So that’s a good idea. I know it was to satisfy your experience in the hackathon, but it’s a good idea.

Harshil Agrawal: The tweet idea was a bit different and I am going to jump into it, but let me just quickly show over here.

So a user, [00:20:00] they can enter, their GitHub username, click on Wrap It. Some automation is going to run behind the scenes on n8n. It is going to generate this wonderful image, which gives you all these stats that you have. So it gives you the number of commits that you created, the number of issues that you created, pull requests, new repos, all that you have done in just one year.

Becky Peltz: Yeah, it’s just a really nice clean summary and it introduces you to the person visually, as well as the work they’re doing.

Harshil Agrawal: Exactly. I’m just going to talk a bit about the tweet button, because that was something interesting and I think might be relevant to what is going on nowadays. When I created the idea was like, okay, this is wonderful.

This is up and running, but how can people share this? Because if people don’t get to share this, I might not be able to reach out to a lot of people. So that forces an interesting challenge that I faced. And I’m talking about this, because if you talk about Wordle, the game [00:21:00] that is kind of popular right now, right?

Yeah. So it has this feature of sharing it on Twitter and that’s how I think it got a lot of more popularity. And every project out there, I think, you know, if you have that feature that you can share what is being done on that project, I think it can help you get more traction over there.

So if I click on tweet, it creates a wonderful tweet, and it will generate image. For me, it does not generate an image, because I did a lot of testing. And in the case, it still uses the old data that it has, but will generate a beautiful image with the link so that people could easily go to the link and get it on the website as well.

Sam Brace: That’s one of the big powers of what Spotify Wrap did was that they made it super shareable. Take that image and you can put it on Facebook and Twitter and Instagram and all these things. So like, you’re onto something here because, well, I don’t necessarily think that sharing off your GitHub pull requests and commits on [00:22:00] Instagram stories is going to be the best thing to do.

But in the same sense, I think what you’ve done here, you’re having an instant tweet option. You’re picking up on the best things about what Spotify did with a wrap project and making it for this developer purpose. So once again, that’s fantastic. Really, really smart move on your part.

Harshil Agrawal: Thank you.

Becky Peltz: I also like your URL, low code land. It’s got kind a cool jazz vibe to it.

Sam Brace: So let’s walk through the workflow. How do you get this to actually all take place?

Harshil Agrawal: All right. So there are two workflows that are running behind the scenes and the first workflow is the workflow that would generate the HTML page that is shown to the user. Now, I am using a WebHook node, which would listen to this incoming request, process that request,

and then output something. Now the wonderful thing in this webhook [00:23:00] is you can send the response as a binary file as text or as JSON and you can even send an HTML file or just the HTML code, which I didn’t do until last summer. And when I knew, I was like this is amazing. So I can have kind of a whole website running on n8n.

It would be the entry point for that. So basically creating a whole web server with n8n. So whenever a request comes in, I set some information, such as the title, the description, the URL, and the username. And again, the og URL is the Open Graph URL. Now these are all the information that goes into the meta tags, which helps you creating those SEO tags and make this more searchable on the internet.

Becky Peltz: Just to be clear. This is your product, the n8n right? This is, yeah, this is the automation product, so that you can set up logic [00:24:00] with your web hooks and the data that’s being generated. Yeah. But it seems too, because you can generate HTML that it’s almost like a web server.

Harshil Agrawal: Exactly. So over here, if you see. I have hardly any code, all the code that I have, it’s just for the HTML pages, and I am using just the code nodes of n8n here to interact with different services and create the code for my project. Now I am next checking.

You know, if the username is present or not, because now the user might want to, you know, just go to the landing page of the website. So if they want to go to the landing page, this is the HTML code for that. Now, as I said, I’m just writing the HTML code. But apart from that, all that is, you know, being done by n8n.

So I’m using the HTML code over here and then returning back to the user. But if the incoming request contains the username, now we want to do something. We want to get the user’s information [00:25:00] from some place. We want to generate that image and then we want to return that image. And this is what the other workflow does.

So if there is a user name, we run another workflow, which would make a call to that workflow. So over here, this is the workflow that does all the processing. So again, this is a webhook node because it is listening to the incoming request from the previous workflow. We are passing on the username.

So in GraphQL node, I am querying the GitHub GraphQL API to fetch the information, passing on the username that is coming in from the webhook node, getting all the information that we need, like the comments that they made, the repositories that they created, the issues that they opened and stuff like that. And then we are passing on this information to the next nodes.

We’re not going to go into a lot of details with all this nodes but what is happening next is we are creating [00:26:00] the profile image for the user. So one thing that I kind of ran into an issue was I had the information, now how do I create that dynamically? I tried out a lot of different base, a lot of different designs, but none of them satisfied what I was looking for.

And then I eventually ended up using Cloudinary. So I am making a call to the Cloudinary URL and passing all the information that I get from the previous node. So we can see the commits, the pull requests, the issues, and everything. And this is using the transformation of Cloudinary. So this then gives me the template image returned with all this information.

But while I was building this, I realized there is one thing that was missing and that was, adding the avatar of the user on the profile image. So if I show you over here, now everyone likes to, you know, have a picture of themselves on stuff like this. It makes it feel more [00:27:00] personalized.

And I ran into a couple of issues when I was doing this, and I was like, huh, I don’t want to ship it without adding this particular feature. So what can I do? So I got back to my team, and I was like discussing with them hey, this is the limitation that I’ve run into. What can I do? And they suggested me of using the added image node in n8n, which is a node that allows you to manipulate images and work with them.

So I use the added image node, which resizes the avatar image, crops them into a circle, and then we append it to the image that is written by Cloudinary. And then this image is finally returned to n8n so that’s kind of the whole summary of this workflow.

Becky Peltz: So if I understand, you’re using Cloudinary to create a text image using the transformations.

Harshil Agrawal: Yes, exactly. So, all the text that is coming in, like the issue numbers, the commit numbers and everything is using Cloudinary.

Becky Peltz: Yeah, because once [00:28:00] it’s in text form, it kind of is easier to just plop it down on a HTML page. That’s really a neat idea rather than sitting around and messing with CSS and stuff.

Sam Brace: Yeah. What I noticed that, because like when I was looking at the transformations, you had all of these various overlays that you’re doing, and you also had it where you were colorizing it. So like, if I look at that, I can see co_rgb, that’s a RGB value that’s here. Yeah.

Yeah. You’re using X and Y coordinates to determine where things should be laid out within the card. And then from there, you’re even defining the font and font sizes all from there, but it’s all being done, through Cloudinary transformations. It’s very slick what you’re doing.

Harshil Agrawal: Yeah. And I really loved the transformation dashboard because

I was playing around with it and I saw, okay, so they also provide an URL for that. So, you know, I took this URL, figured out what are the dynamic values and just changed those. So it really helped me, not to just waste a lot of time in trying out and [00:29:00] digging too much into it, on the dashboard, play around with it, get the URL and just use it.

Sam Brace: When I like what you’re showing here, because as I’m seeing, you’re pulling from the JSON to be able to say it, like suddenly, like the JSON is acting as the variable in this case. Like whatever we’re getting from a JSON commits line, this is what’s going to be published on this part of the card. And I think that’s one thing that sometimes Cloudinary users get stuck on is they don’t think like, what are all the applicability options when it comes to using overlays and text based overlays, like what you’ve done. They think it has to be statically written in where you’re proving very easily,

you can pull from something that has lots of variable aspects to it, like a JSON file. So this is excellent work Harshil. I’m very, very impressed.

Becky Peltz: And you mentioned that you’re using the GitHub GraphQL. Can you talk a little about that? How that helps you out?

Harshil Agrawal: Sure. So I have the GraphQL Explorer open for GitHub. Now, I’m just going to give a brief introduction about what GraphQL is, because I [00:30:00] believe for a lot of people, GraphQL is still very new.

So, traditionally, if you want to get information from an API, we mainly use the rest API for that particular service. Now there are a couple of problems with the rest API. First of all, each endpoint, you know, returns only some sort of information. So like, just say, I want to get the username and the avatar URL.

I might have to hit the user endpoint, but if I want to get the information about the commit, I might have to hit the commit endpoint for the rest API. Now, if I took that approach, I would be making a lot of API calls to the GitHub endpoint, right. And I never wanted to do that.

It would be just insane to do that because of all the incoming traffics that I had on my server. What GraphQL helped me do is make one single request. And in that request, I could define what information I need, and GraphQL in that one, single request would give me the information. So over here, this is just one single request.

And I am asking for the [00:31:00] information that I need, like the commit, the user, the Twitter username, their name, that avatar URL, and all that is just being sent back with just one API call.

Becky Peltz: So it’s kind of like if, for people that use SQL or various querying language, it’s kind of like, you can make a query out of a combination of APIs.

You’re not stuck pulling in every API and sorting through all their data and trying to match it up with some other API data.

Sam Brace: Becky, goodness gracious. That was like the best explanation I’ve ever heard of GraphQL, like being able to break that down in that way. Cause like coming from a bad base administration background and some of the things that I’ve done, like being like, oh yeah, there’s a lot of commonality to GraphQL and SQL.

Wow. I say a light bulb just went off in my brain when you said that. Hopefully that happened for one other listener or a viewer of this program. So good job guys. Very, very helpful. One thing I want to ask you about here, so I know or maybe I’m getting a vibe here that [00:32:00] CloudFlare is involved with this project in some way.

Talk to me about why you would be using CloudFlare with the project like this. Obviously they’re an amazing provider when it comes to CDNs and other things that they do, but how are they involved in this project?

Harshil Agrawal: Yeah. So one of the main challenges was to hide this particular URL. Like if there is a project that people want to use, they don’t want to have such a long URL.

And I wanted to find a way to have a proxy between the main URL that I want to use and my n8n webhook URL. So that’s where CloudFlare helped me. The other thing was, once I was trying out and testing out the project, I realized that a lot of time people, sometimes they would just

add at the rate symbol as well with the username. So not just Harshil1712, but @Harshil1712. Now that is not a valid username. So I wanted to also filter that out. I could have done that in n8n as well, but it would have added [00:33:00] more nodes, and I didn’t wanted to do that.

So I took a look at CloudFlare and I was like, okay. So with CloudFlare, I can divert the traffic to the URL that I want. And I can also handle such use cases or such edge cases where people, if they are trying to use anything apart from this particular thing, they’re going to get this particular page.

So that is what was happening with that. So I can also quickly show you the CloudFlare worker code that I am using. So most of this is the boiler plate code that I got from the CloudFlare documentation. So over here, we have a regular expression, which checks if someone is using the at the rate symbol and down below. I set in the handle request function, what is happening is, please have a parameter that is none.

So if nothing is passed, this parameter gets added to the URL, gets back to n8n and n8n says, okay, nothing is passed. And [00:34:00] it sends up the landing page to the user. Over here, you can see that we are checking, you know, if they have added the @ symbol or not and stuff like that. And then we are simply sending all that content that was returned from n8n to the user.

Sam Brace: But also this is very clean JavaScript code.

Becky Peltz: Kind of looks like a Lambda function. And so they’re letting us put Lambda functions out on the CDN, it looks like. Is that correct?

Harshil Agrawal: Exactly. I think that’s kind of a good way to explain CloudFlare workers.

Becky Peltz: Yes, sorry to interrupt Sam. It is really clean code.

It’s very easy to read. So basically you get line 25 and you get a none, your n8n will just send out your home landing page. Yeah. Yeah. Just render that HTML. Otherwise, it’ll go in and process it and put together what you need to get an actual wrap. So, that’s [00:35:00] really neat.

You have many levels in this application, but always very small amounts of code, which is nice. Exactly. Like a page worth.

Harshil Agrawal: And as I said, they already had the code on the documentation page. So all I had to do was make some changes here and there to adapt it to my use case. It was mainly copying and pasting.

Becky Peltz: And as I recall reading this, you did this all for free. Like every piece of this is. Yeah, that’s really cool.

Sam Brace: Also, I mean, that points back to what I was saying earlier, too. You didn’t have to spin up servers, you didn’t have to worry about all of that. Like it’s where a lot of this seems to have been done, because if I know this correctly, you’re using actually the free plan of Cloudinary to get this done, which is pretty awesome that you’re able to get it done without having to spend a single dime on that aspect, which proves once again, our peers at Cloudinary are hopefully generous with the application of this, but with something like CloudFlare, am I correct also that you can use [00:36:00] everything that you were showing with CloudFlare also on their free tier?

Harshil Agrawal: Yeah. If I’m not wrong, they allow you to have two worker script per project for free. I just needed one worker script to handle this. So still using CloudFlare for free, haven’t paid a single dime.

Sam Brace: Oh, gosh, I gotta say Becky, hopefully you’re agreeing with me on this one, but that’s pretty amazing. Like the fact that you can spin up such a helpful project, not have to spend a dime other than just, you know, your time, obviously Harshil is worth something, but in the same sense, you didn’t have to put actual, like monetary dollars, cents, coins to anything.

So this is great. I’m really inspired by this.

Becky Peltz: I think the fact that you’re using code that has been shared to you by, you know, the companies that produced it, it’s sort of tested in that sense. So you don’t have to spend a lot of time writing tests and things like that. Here’s what works, if you use it, it’s going to work for you.

Sam Brace: So, one thing I wanted ask you Harshil, [00:37:00] so whenever I’ve done development projects, when Becky’s on them, probably you too, there’s always a roadblock. There’s something that you didn’t anticipate. And I know you touched upon some of those things, like when you were saying like someone using the at symbol inside of their GitHub and like that’s probably not something you were like, oh yeah, I already have a plan for that.

It’s probably things you, you figured out during the development project and people testing it. But what are some like major roadblocks that you feel like people might face with any of the technology that we’ve talked about here today? And maybe some details on how you overcame it.

Harshil Agrawal: So one of the major roadblock that, I faced was when the project started getting a lot of traction on Twitter.

Few folks from the security community started playing around with it and not in a good way. And they started tweeting and I was freaked. I was like, it’s a weekend project. I didn’t, you know, take security measures, because I wasn’t expecting it to get so much traction. And now you [00:38:00] are doing this to me.

I’m like, I don’t know what to do. I am not someone who has done a lot of work in the security space, so how do I solve this? That was one of the major roadblocks and I freaked so much. I called up my friend who is well-versed in the security space. I’m like, you need to help me out.

I don’t know what should I do? Unfortunately, he wasn’t available. So for 24 hours, I was just reading on the internet, trying to find out a solution. And then I came across this CloudFlare, where you can have firewall rules. So you can set up rules without writing anything. So just telling CloudFlare, okay, if a request contains maybe this thing in the URL, block it. If a request is coming from this particular IP address, block it. And that saved me from, I think, a lot of other malicious requests that were coming in. Even if today I check the logs, I see a lot of people are trying to, you know, attack the website, but because I have those rules in there, it saves me a lot.

So that was one of the [00:39:00] most terrifying challenges that I had.

Becky Peltz: It’s pretty unsettling when people are going after your stuff. I mean, even if you are not taking it personally, you know, it’s still is like, what are they going to do to me? You know? And where will this all end? So it sounds like you were able to create a firewall with CloudFlare, and you didn’t have to pay for that either I bet, huh. Exactly. Yeah. That’s pretty nice. But you still had to figure out all of the things that you wanted to block. It sounds like that took some time to, yeah.

Harshil Agrawal: It did. So the process was just going to the log and understanding what was the repetitive things that people were doing.

What were the IP addresses that were making the same request again and again. And that’s kind of how I started doing it. And then I found a pattern and using that pattern, I created a firewall rule that now stops or blocks all those requests.

Sam Brace: Now, one thing that I’m also thinking of, because I’ve had this also in development projects and also [00:40:00] just other projects I’ve done that have nothing to do with development, but sometimes you don’t anticipate how popular something will be. So like, obviously something like this, like you know, there’s a lot of people that are developers. There’s a lot of developers that use GitHub. They probably would love to try something like this out.

Did you find like any issues, like in terms of like, oh, there’s too many requests coming in or, oh no, this is getting too big. Like anything like that happening with the project?

Harshil Agrawal: That’s a good question. I am an alumni for a program called GitHub Campus Experts. And I shared that program with my friends over there and the program manager, Juan Pa. He really liked the project and he tweeted about it and that’s how it kind of all started.

So, once he tweeted about it, it started getting more and more traction from the developer community. And then one fine day, GitHub also decided to tweet it from their official channel. And I, and that’s when I freaked out. I haven’t built this project to scale up. I’m not sure if it’s going to [00:41:00] scale or not, when it’s going to break.

So I was almost every 15 to 20 minutes, I was looking at my server logs. I was looking at the logs at Cloudinary to make sure that I have enough credit. I was looking at CloudFlare to see, you know, if anything is breaking over there. So that was a kind of interesting time that I had with the project when it got really popular.

And the major thing that I was worried about was, the expense that I might have at the end of the month when everything cools down and I was like, yeah, I’m going to have a terribly long invoice coming in for me.

Sam Brace: It’s such a good question. Like when you’re ever building any project is like, can this scale and am I ready for it to scale?

Right, and we deal with it all the time where like somewhat, like I remember we’ve had people that are using Cloudinary, and they get suddenly featured on Shark Tank or other these programs, like they’re these awesome startups. And then suddenly, they peak. And we’re like, we had no idea that we would have these overages or we’d have all these situations.

And of [00:42:00] course we take care of it. We help them out. But you’re absolutely right. Sometimes it’s unanticipatable based on what you have there, because that one tweet that one influencer that suddenly is like, this is a good idea. Boom, then everything catches fire and it is just like, they put gasoline all over it too.

So I’m glad to see that you had the concepts for it. Also, really glad to hear that even with a lot of influencing factors, you still didn’t have to pay any money, so good for you. Way to plan that out in as much as you possibly can.

Becky Peltz: It speaks to the cloud too, where you’ve got all these different pieces and they’re all doing

their chunks in the small way that they each do and put it all together and it still comes out free. That’s really good.

Harshil Agrawal: Exactly. I think I was also lucky enough because I had gathered a couple of extra credits for Cloudinary by doing the courses and, you know, following all the steps that they had.

And this route just helped me with getting the credit, which also helped me understand Cloudinary better because I [00:43:00] was playing around with Cloudinary. I often use it in a couple of projects, so it also gives me a good insight into the product.

Sam Brace: Wonderful. And I love that you’re using our courses.

That makes me happy. So, one thing I wanted to ask you, so obviously, you’re doing a lot of great work. This is just kind of a sample of the things that you are doing. As we pointed out, you’re contributing to lots of open source projects, you’re doing a lot of great work for your employer, but it’s also where. I would love for people to figure out ways to be part of that. Like, can we see all the great work that you Harshil are doing? Where are you really active? Where can people follow more about what you’re up?

Harshil Agrawal: So I am really active on Twitter and I’ll be honest.

I don’t always talk about tech stuff on Twitter. So be aware if you’re following me on Twitter, but but that’s the best place to get in touch with me, see what I am doing. And I also often share all my learnings on my website. So, if you want [00:44:00] to read about what I am doing, what I have learned recently, and if you want to learn that as well, you can always go to my website and that’s harshil.dev.

Becky Peltz: I like that you’re keeping track of bandwidth saved, all the things that could add up to cost you something.

Sam Brace: Perfect. And frankly, look at this, like your UI here. Once again, it’s simple, it’s minimal, but it’s so clean. Like I gotta tell you Harshil, you might find a way to get you involved with UX and UI one day.

Cause you’re doing a good job with everything you’ve been developing. This is as clean as I possibly can imagine for a personal blog, personal website, personal portfolio. So I’m impressed with that factor alone too. Becky, any final things that you wanted to ask Harshil before we let him go?

Becky Peltz: Well, the only thing I had asked is it would be fun for us to run it against one of our team members, run that project against that.

So if I could share my screen, we have a new team [00:45:00] member here, Jen Brissman. She was actually on our program last year and now she works here. So I’ve got Jen Brissman, and we’re going to wrap it for Jen, and see that she has been very active. She just learned to develop during the pandemic.

And she’s been working away here and working on new code for us, as well as going to be presenting. But anyway, I really appreciate the fact that we can see this so clearly, and I’m encouraging anybody who is working on GitHub to wrap it and share it. So I think it’s a really neat project.

Sam Brace: I agree completely, completely.

And I’d love to see all the great work that Jen on our team has been doing, you know, before Cloudinary, while at Cloudinary. So, and actually for Cloudinary now, too, so that’s awesome. So Harshil, keep up the good work and keep in touch. We can’t wait to show off the latest projects you’re working on, hopefully in a future program or if nothing else, we’ll make sure we tweet about it.

I [00:46:00] think you’re doing some pretty awesome stuff in the dev space right now.

Becky Peltz: Yeah. It’s really nice talking to you too. Very, very inspiring.

Harshil Agrawal: Thank you. Thank you so much for having me. It was wonderful talking to you all.

Sam Brace: Harshil is a wealth of information and honestly, very nice guy as well. I think this is a good, good conversation. Becky, when it comes to the key things that you felt were important from what we’ve learned from Harshil today, what stands top of my mind?

Becky Peltz: Well, there were so many things here, you know, I think it, the one thing is it’s a great little gift to developers, because it lets us quickly gather up all the data from GitHub about our own work and put it in a really nice little webpage that we can share. So it’s kind of like Harshil’s gift to us in a way.

Sam Brace: It’s one area that I almost wonder how deep this could go, because if I think about like very developer focused organizations, let’s say like Cloudinary, let’s say Stripe, like Twilio, and they were saying, we want to show [00:47:00] all of the amazing work, all the pull requests, all the repositories, all the things that our developers are doing.

Could we do this project and then create these beautiful reports off of it to be able to show off at work. So I think the legs that what Harshil has developed has a lot of opportunity. And I don’t think this is just for personal developers, I think it could even be done at the large enterprise level based on what we’re showing here, because there’s a lot of cool ways to show off the data.

Becky Peltz: Yeah. I mean, what if we could all put together something like that about our work for the entire year when it’s time to get a raise or something like that? So, yes, I think I could see a lot of extensions to this. It was also really fun to learn about low code and see how Harshil could kind of create these steps that pulled in different tools and services like Cloudinary.

So essentially it turned out that Wrap is a Cloudinary image hosted on a webpage. So that was really cool [00:48:00] to see that he thought of that and laid it out so nicely.

Sam Brace: I agree it, and I think that’s one thing that Harshil definitely showed is that yes, he was able to develop this, but he developed it as part of a low code offering.

So if someone wasn’t necessarily a developer, they could still maintain it and still work with the project. And I think that’s one area that, at least I’m seeing when it comes to the buzzword that is low code, the buzzword that is no code. There’s some misinterpretation to that because sometimes that means that low code is just meant for developers and or no code is just meant for marketers.

Low code is just meant for people that don’t like to code. I think it’s a missed concept because as we’re showing developers absolutely can use something that’s low code and no code where, because it has a user interface on it, it’s not necessarily bad by any means. So I love the fact that we’re using something that has very clear drag and droppable content.

It’s very [00:49:00] easy to see the flow of it. Harshil did a very good job with this, and I think more people should be embracing low code and no code tools, just like the ones that he was able to develop.

Becky Peltz: Yeah. Well I know I’m noticing companies all over are creating workflow products and they’re marketing them as workflow.

And they’re basically like this, so it is definitely a thing to keep an eye on. So, what about Harshil’s product got very popular and got even a little scary for him. He was getting called by GitHub because so many requests were coming in. I mean, is this a good thing?

Sam Brace: I think it is. I mean, back to my point.

Like if you’re popular, you’re going to be recognized by some of these larger companies. It might be able to help them to grow, but in the same sense, it shows that people really do want data and sometimes it’s not easy to come across it, or it’s not even something that comes top of mind, like, oh yeah, I remember I did work on that in February and it consumed a lot of time. Because you’re thinking about always what’s next, what’s right in front [00:50:00] of you and being able to combine all of that data into an easy retrospective like this.

I think it’s where, yeah, it makes sense why it was popular. It can make sense why people were using it and wanting it. Anything it’s only a good thing, but it’s also where it can be a double-edged sword, because it’s where if you create this just as a personal project for yourself, and there was no growth plan, obviously attached to that, you just wanted a fun way to visualize data, then yeah, it could come off a little bit crazy.

You’re like, oh, where is this coming from? I never expected everybody to want this, but I think Harshil definitely found a little bit of a disruptor here to get people to think about things in a different way.

Becky Peltz: Yeah and developers are now more into sharing on social media. I mean, Twitter is a huge place to find out things about what’s going on in the world of development.

So this is one thing that you can share about yourself in an easy way.

Sam Brace: Absolutely, absolutely. I mean, we see like at the end of the year, when Spotify comes out with their wrapped, you see tons of people putting on their Instagrams and [00:51:00] Twitter and saying like, these are all the songs I listened to, or this was the artist I’ve listened to the most.

Wouldn’t that be great, if we also saw this happening with Harshil’s project saying like, look at all the cool repos that I built over the year. Like that would be pretty slick, and of course, we got to talk to the guy that made it all. So that would be a really cool thing.

Becky Peltz: And, you know, hiring managers, look at that little chart that he’s got and if you’re applying for a job, you can run this anytime of the year and share it.

So it’s a neat little tool.

Sam Brace: And speaking of hiring managers, one thing that’s actually happened in the world of Harshil, which I love is while n8n, great company, and obviously we showed a lot of it in this episode, Harshil actually went on to go work for one of Cloudinary’s best technology partners:

Contentful. And they’re a fantastic company when it comes to the content management system side of things, especially for headless CMSs. So it’s to say, keep following what Harshil is doing, because he’s definitely making some waves in this space. And of course also can’t [00:52:00] say that our work that we’re doing is to plug a certain person or a certain program, but we also really enjoy the work that they’re doing at Contentful across the board.

So always a company to look at if this is something that you’ve never heard about before today. Excellent work Harshil, congratulations.

Becky Peltz: Congratulations.

Sam Brace: Excellent. So now that we’ve given the world, our key takeaways or things that we took away from this episode, Becky, we also of course want people to know that if you are happy with this episode, you had a good experience, then like and subscribe at all the places where we typically host all these DevJams podcasts.

That includes our Cloudinary Academy, but also on large platforms like Spotify, as well as Apple podcasts, Google podcasts, and many other places. So we hope that you had a great time. On behalf of everybody involved with this episode, as well as all of Cloudinary, thank you for listening to this episode of DevJams, and we [00:53:00] hope to see you at the next one.

Take care. Bye.

Sam Brace: [00:00:00] Welcome to DevJams. This is where we talk about interesting, innovative, inspiring development projects done by our Cloudinary community. And of course, because they are Cloudinary community members, they probably use Cloudinary in those. I’m Sam Brace. I am the director of customer education for Cloudinary and joined me for every one of these DevJams.

Episodes is Becky Peltz, who is our curriculum program manager for developer education. So Becky, welcome back.

Becky Peltz: Well, Hey Sam. Um, I’m really excited to be here. And, and, and, and it was, this was a fun episode because for working with our colleagues here at Colby Fayock, and, you know, he’s always a pleasure to work

Sam Brace: with.

He really is. I got to tell you, since Colby has come on as a member of our developer evangelism, developer relations team, he’s just made such a massive impact. And we normally don’t [00:01:00] profile people that work Cloudinary because they know all the things to do with cloud. But he developed such an interesting project working with Netlify and building a build plugin to automatically optimize all of the images, all of the videos that are being delivered on a web application web.

Via Netlify and it’s something you can even use today. So if you are a Netlify user, you can go and attach this plugin to your account and start using it and getting the nice magic of all of the automatic formatting and compression when it comes to quality for your overall project. This is where we walked through it all with Colby, understanding exactly how he built it, why he built it and not just about the Cloudinary aspects of it, but just developing the overall plugin and submitting it and working with Netlify for so many things that we talk about with him in this episode.

Yeah.

Becky Peltz: And he uses some really nice, um, Cloudinary technology [00:02:00] for accessing remote images. He uses our fetched delivery type and by using them. You don’t have to like, do a big migration to get your images into Cloudinary, to work with Cloudinary. And so I think it’s interesting as you watch the episode to see how he does

Colby Fayock: that.

Sam Brace: Yeah. I completely agree. And it’s definitely where I think there were so many nuggets in this one, guys that I think this is going to be an episode where if you’re doing anything, when you’re working with the JAMstack, when you’re working with images and videos, if you’re. Anything where you’re just trying to understand how do I build this thing to benefit the overall user community of this application or overall site that I really love.

There’s so many things that Colby teaches us here in this episode. So I don’t want to waste your time anymore. I think me and Becky could go on all day gushing about how good this episode is going to be. So let’s just get into the episode and let’s have you listen to it. And then at the [00:03:00] end, come on back because we have some key takeaways for you about the things that COVID.

Colby. Welcome to the show.

Colby Fayock: Thank you so much.

Sam Brace: So Colby, you’re a little bit different than every other guests we’ve ever had on DevJams up to this point because you actually work with us at Cloudinary. Normally we’re talking to people from the outside that are doing really awesome things with Cloudinary, for part of their development projects, but you actually happen to work with us.

So this is a, this is a treat to be able to talk with you about the things that you’ve been doing since you’ve started as part of.

Colby Fayock: Yeah. And it’s been a fun journey so far. It’s only been, I guess, a little over a month now. And, um, I’ve just been having a lot of fun playing with all the different, uh, new Cloudinary APIs that I’ve been learning about.

And, um, one of the things has been this Netlify plugging that I’ve been messing around with so excited to chat about it

Becky Peltz: and happy to hear about Netlify plugins. We haven’t talked to anybody that’s, that’s created one and it’ll be fun to see how that works.

Sam Brace: Absolutely. So before we get into that though, Colby, [00:04:00] I do want to give people a little bit of context.

Cause obviously we know who you are. I knew about you before you started Cloudinary, but in case that our listeners and viewers haven’t been privy to the awesomeness of the Colby, can you just give us a little bit about who you are, how you got to Cloudinary and maybe some of the things that you’re doing here now that you’re a part of.

Colby Fayock: Sure. So I’m Colby Fayock. I made a developer experience engineer. Uh, I’ve been with, again, I’ve been culinary for a little over a month now, but I’ve been talking to the team for a little while now, uh, since right before the pandemic and it finally worked out. Where I now joined the team. Um, I kind of focused on trying to help bring developers, uh, specifically to solve their challenges with media.

So, um, hopefully that’s with Cloudinary, you know, but ultimately my goal is to help the developers, uh, accomplish their goals. Um, I kind of started off as a front end engineer and UI designer and transitioned into. Developer relations, developer advocate, a roll from there. Cause I just enjoy [00:05:00] teaching and helping create content for developers to learn.

Um, so that’s kind of where my journey came from, uh, to this role.

Becky Peltz: Hey, you know, I’ve watched you on a rapid learning path here at Cloudinary too, and I’m interested in like kind of how you learn and how you share what you learned.

Colby Fayock: Sure. Uh, so for me, it’s, I like to learn by just diving in. I like to kind of say learning by doing, um, cause that’s for me the best way to learn where, um, instead of trying to like read through a bunch of stuff, I just like to spin up a new project and try to.

Work my way through the tool, uh, whether or not I’m fumbling through it, you know, trying to work through any of the documentation, just, uh, try to make it work and see what I learned along the way. But that’s proven pretty well for me so far. And then once I do learn that I take that and I try to teach other developers in a, in a way that, uh, you know, I found it helpful to kind of explain, trying to cover some of those details that might not traditionally be covered, um, by other people’s, uh, educational.

When I

Sam Brace: have to say Colby, like [00:06:00] basically about the program, I think your learning style and your, the way that you approach it almost fits exactly how the plugin came about. At least from the outside perspective, because it almost was like day one. Colby’s working for us. They too, the plugin is here. So it was definitely a gateway.

I feel like the learning by doing is definitely something that we had here, where this was your first chance to develop a project to Cloudinary. That was now part of your full-time work with Cloudinary. And you just dumped, jumped in hands. First feet burst into the project, which I was really impressed.

Becky Peltz: I’ve noticed that you are great at asking questions. I see you on many slack channels and you reach out and, and that I think is a superpower. So question our great,

Colby Fayock: awesome. Yeah. I always hope that I’m not asking you too many questions, but, uh, now I’m, I’m eager to learn all these things and try to make it through.

But yeah, I’m a big Netlify fan. And I saw an opportunity there because I tried to search around and see if there was any existing work on that. And there’s not. So I saw an opportunity to kind of both learn about. [00:07:00] Learn more about the Netlify plugging process and, uh, try to build something that would help people get pretty, uh, broad coverage, other applications.

Cause it’s a nice, nice way to fit that in through that process. So

Sam Brace: talk to me a little bit about Netlify, cause we’ve mentioned Netlify in different ways throughout the program. Obviously we have a great working relationship with that company as well, but why are you a super fan or why are you a fan?

Maybe I put too many words in your mouth when I said super fan, but why are you a fan of Netflix?

Colby Fayock: Yeah. So I think Netlify at its simplest. A lot of people consider it a hosting company, but it’s a lot more than that. It’s like an automation auto dev ops. I like to call it a where they really handle a lot of that process for you in terms of taking a website that’s traditionally stored in some kind of get provider like a hub, um, taking that code and deploying it out to the world, but also all the processes around that.

So building that site, um, providing things like plugins to transform that say, uh, the delivery of that site where a lot of those things. Take a lot of effort. If you’re [00:08:00] doing it manually on your own a cloud provider like AWS or something like that, where it’s a really powerful platform, but Netlify just makes that process super smooth.

And it was actually one of my entry points into the JAMstack world where I just, the first time I deployed a site with Netlify, I was just amazed at how easy it was and coming from a team where I had to mainly do that with AWS all the time. And again, this isn’t putting down 80 Ws to be clear. Um, but now if I just make that so smooth, it was such a beautiful thing.

And, um, I’ve always been a fan since then. I

Becky Peltz: think they’re currently referring to AWS now is bare metal. Whereas if you’re working on that, , it’s like you’ve got a dev ops team working

Colby Fayock: for you. Yeah. And no, and I think that’s, uh, like there’s a lot of really powerful things you can do with AWS, but you have to do some of the things more manually, right?

So like as a front end engineer who doesn’t necessarily care about all that stuff, I just want to get my, my application deployed to the world and Netlify is a beautiful solution. So now

Sam Brace: that like, we know that you’ve developed this plugin, we’ve [00:09:00] referred to it, like in 10 different ways and like Ms.

Ancillary way, I think it’s, this is a good time for us to actually talk about this thing. What is the thing you actually developed?

Colby Fayock: Tell us about the. Sure. So I created a Cloudinary plugin for Netlify where, uh, what it’s going to do is on the, within the life cycle of the Netlify process, after the site is built, and you have all of your static files, uh, this plugin will go through and it’ll replace all the images that it can find with Cloudinary images.

So it’ll use your hosting, uh, your Cloudinary account cloud name. It will replace it with Cloudinary URL so that ultimately you’re serving those files from clutter. Now, why would we want to serve it from flattery? Yeah. Standing up here trying to advertise for Cloudinary, but you get a lot of awesome things like out of the box with this.

Um, the two that I love the most, because they’re easy is the auto format and auto optimization where it’s going to gracefully compress your image to what needs to be so that it still looks like a great image, but it’s going to reuse that file format, but also the, the auto format where we can serve modern.[00:10:00]

Image formats to the browsers that can actually support that, uh, which can in sometimes greatly reduce the file size, which is a huge win when you’re trying to serve websites to people all over the world who, who knows what kind of internet connection they have.

Sam Brace: I think one thing that I, that stood out to me was just the fact that like you decided to go the route of building the plugin, like.

But I also know there’s lots of different ways to do this. Like just do like local functions and whatnot. Why did you decide to take the route of creating the plugin and Ms. Case? I mean, other than just being able to understand the Netlify ecosystem a little bit better potentially, but what, what was your reasoning for that versus local?

Colby Fayock: So the biggest reason is just simply trying to make it as easy as possible for somebody to just flip on that switch and serve the images from Cloudinary. Um, just because of that broad coverage, you don’t have to think about how, where the images are, how they’re served. Um, you don’t need any special functions, which of course provides you a lot more capabilities on top of that, such as cloud transformations.

Um, but being able [00:11:00] to do this in such a broad way, just gives so much benefit without really having to think.

Becky Peltz: Well, I think you also discovered that you can take advantage of Cloudinary without having to upload all your images there. You made it kind of a, a lazy optimization through your Netlify plugin.

Colby Fayock: Yeah. Yeah. That’s a great point. Um, so by default, it’s going to use the fetch method, which it’ll take that. Uh, image, whether it’s hosted on Netlify or hosted on whatever other CDN that you’re using for your images, it’ll fetch that image into Cloudinary, and then it’ll serve it and deliver it from Cloudera, but that you also have the option to use the upload features like there’s auto upload and just standard upload where through that plug-in process.

Um, if you prefer to do it that way, it’ll actually go through and upload all those images for. And then serve them, uh, using the public ID from Cloudinary. So you have a couple of different options, but just to make it as easy as possible by default, it’ll just flip it on with fetch and it will just be served from.

Becky Peltz: And you’re, [00:12:00] you’re using your favorite, um, transformations I found on Q auto, but you actually could develop more on this and have all sorts of different transformations added in. Sure.

Colby Fayock: I think I’m pretty like early in the development of it. Like, there’s still some holes I need to fill a for instance, but yeah, like the great thing is you can provide like any kind of configuration that you would like through, uh, than LFI plugins configuration.

So I can really open it up to whatever people want to do with it. I don’t think it’s ever going to be as flexible as using the SDK inside of your application, but there’s still a lot that we can make available right inside that config file and not even have to think of.

Becky Peltz: Yeah, I think you found something that a lot of developers want, you know, they, they want and kind of a simpler way to get optimization into their website, media optimization, especially image optimization.

Yeah.

Sam Brace: Now, in terms of like the development of this, was there any particular frameworks that you focused on or any, like when you were actually going through the building CAF? [00:13:00]

Colby Fayock: So it’s really not that if I think, uh, really succeeds in kind of the JAMstack area where it’s going to be more static sites. Now, this kind of leads into a question of some of the holes that we still need to fill, because a lot of the web apps you see now are JavaScript based where they’re routing on the page is going to just be.

Uh, JavaScript a page change instead of a full HTTP request. And some of those cases aren’t going to be covered because of what it’s actually doing is it’s replacing those page images. Um, when that first HTP request comes with the page, um, we’re trying to look into solution that how we can solve that, uh, one way is we can.

That’s currently not in the plugin, as we can say, if you have all of your images in the images directory, we can redirect them all to Cloudinary and use some clever ways to do that on the Netlify, um, infrastructure, but that’s currently not implemented. And we’re looking to how we can do that in a comfortable way.

That makes it easy for us.

Becky Peltz: Oh, I’ll throw out there too. There is a Cloudinary labs website [00:14:00] where there is an implementation where involving service workers. So if you want to get deeper into front end on that, there there’s some work out there, but this is, this is a wonderful challenge. And, and it, and then for me, I want to, I’m, I’m interested in how you put together.

Uh, plugin, like just the process of getting that going.

Colby Fayock: Yeah. I’d be happy to kind of share the code around it, but I mean, that’s a good point about like the challenges of it. That’s also kind of why I enjoy doing this is I love to try to find these new challenges where I can try to solve them and work through them.

And I ended up learning more about the technology while doing that. So this is, it’s been a lot of fun for me, uh, trying to work through this. Um, but if you want the, I can, uh, open up the code and we can kind of walk through what it looks like. But all you really need to do is add it to your Netlify configuration file, right inside of your project, specify the package name along with your cloud name, but you can either do as an input right inside of that configuration file.

Or you can add [00:15:00] it as an environment variable if you prefer, but then it kicks off that process and it just transforms the, uh, the HTML is. Now to actually dive into what’s going on, uh, the let’s dive into the code itself, um, where here we have the index dot JS, which is just the source of where the plugin kind of comes from.

Um, but with Netlify you have a bunch of different, uh, Entry points into the life cycle. Now the particular one I’m using is on post build, which is referring to once the project is done building, I now have this ability to hook in and run some kind of custom functionality, which is where I’m providing these transformations.

So beyond a lot of the. Kind of configuration of grabbing some of the inputs and the API keys and such really at that point, we tap into the Cloudinary, uh, SDK, where we’re going to start to configure that with all the different credentials and whatnot. Um, but then we look through all the files. We grab all the [00:16:00] HTML files that were compiled as part of that, uh, deep build and deployment process.

And we’re going to loop through all of them and we’re going to update the HTML so that that image source is transformed to a Cloudinary. Now it’s a little abstracted here. So of course not everything is happening here, but we can click right into this and I can start to show what that’s actually, what.

So I’m using a tool called JS Dom, which is a JavaScript library, which is kind of giving us, uh, uh, Dom, uh, document object model, like representation, um, of the HTML that we pass into it kind of like you would get in a browser, but inside a node because you really don’t have the Dom inside of notes. So this helps you actually kind of query and work through it like you would inside of a browser.

Speaking of that we look through and we try to find all the images on that page. And we loop through all those images. We grabbed the source and we tried to. As part of this get cloud and our URL, which again, I’ll get to in a second, uh, we try to determine [00:17:00] where that image is actually coming from. So let’s click through there.

Cause I think that’s probably the most interesting bit of what’s happening because once we find that URL, we actually set that attribute on the image and we return the HTML as a string. So let’s dive into now get Cloudinary. Yeah. Well, what this is going to do is it’s going to try to determine how you want this thing actually serve.

So, as I mentioned earlier, we allow a couple of different methods where the default one is going to be fetch, which in my opinion is really the easiest because. You can just kind of set up there with not a lot of configuration, just your cloud name and you’ll be up and running, but we’re going to try to determine what that file URL is going to be, uh, because whether or not it’s coming from a non Netlify host, uh, such as your own other CDN, or if you are serving it from Netlify, we need to try to find where that final URL is going to be so that we can pass that into a Cloudinary so that Cloudinary itself can fetch that image for us.

But once we go through. [00:18:00] Uh, the other types are upload where we will actually go through and upload the image, uh, whether signed or unsigned. That’s another option that you have, uh, since, because you do have the option of providing like an upload preset in Cloudinary, and we’re getting very, uh, in the weeds with the Cloudinary, uh, API.

Once we do upload that image similar to the fetch. We return that location where we have our Cloudinary URL and we provide those very basic transformations and we returned the URL, which then again, gets replaced inside of that HTML. So that’s kind of the. The life cycle of the plugin. It’s, it’s pretty straightforward at this point.

Um, in terms of what the flow of it is, where we, we look for all the images in the HTML. Uh, we grabbed the Cloudinary URL representation of all those images and we replaced them. And this

Becky Peltz: is all occurring when you, um, in the build that Netlify is performing.

Colby Fayock: So, so, so [00:19:00] once the application itself is built, uh, like the web app, it’ll take the output of that and it’ll run this on post build function.

If I can navigate back to it. Yep. This on post build function, where then it’ll run all my custom code that replaces the URLs based on that. That,

Becky Peltz: that just looks so nice. Your code is so clean and easy to read. I was also really happy to see you had tests. So when I first looked at your repository, it’s always nice to go in and look at tests and that kind of flags, the kind of important functions that you’re, you’re looking.

Colby Fayock: Yeah. So admittedly, I’m not always the best at writing my test, but I wanted to make sure since I am developing something that I’m hoping is going to get a more broad usage and it looks like I have a failed test there actually. But, um, you know, I wanted to make sure that I am providing a hardened functions so that.

It will actually go through and work with everything that I’m doing. No [00:20:00] matter the changes, especially because as we are trying to add more broad coverage, I don’t want to have some regressions on some of the more, uh, basic transformations that we’re doing within it.

Becky Peltz: Yeah, no, it’s, it really helps to see like w you know what, you’re actually applying these functions to what they, what it looks like.

So we appreciate that.

Sam Brace: So Colby, now that we’ve walked through the code, and this was an excellent explanation of all of it. How does this ultimately translate to someone that would be using this within the Netlify ecosystem? What does this look like?

Colby Fayock: Yeah. So really, if you have your web app in a, well, I guess wherever you have your web app, whether it is and get where if it’s just locally deployed with Netlify CLI uh, you’ll just want to add this package via NPM.

Um, and then you’ll add this configuration into your Netlify. That Tomal is the typical file that I see for the Netlify config locally. Add your cloud name, whether as an [00:21:00] input or as an environment, variable, and really that’s all you need to do. I mean, of course you’ll need your Cloudinary account, but in terms of Netlify, that’s really all you need to do once you deploy it, Netlify will see that configuration and the plugin in that configuration.

And it’ll just take it into consideration as it’s working through the. That’s incredible. Hey, I

Becky Peltz: know you have a demo page too, where you can kind of show this in action.

Colby Fayock: Yes. Let me find which one that is. So this demo is from a tutorial that I actually did for walking through this, on my, uh, on my blog. Um, but really it’s a static, uh, web app where.

Running this plugin, uh, during the build process so that we can kind of see how this is actually working. Now, I’m not going to dive in too much into the code itself. Um, but what we have here is a pretty basic next JS application, um, where I just have some images, images on the page, um, that are getting statically rendered, uh, with the application.

Now, if we [00:22:00] look inside this Netlify dot Tamo file, kind of like I was alluding to before now, part of the tutorial I through. Additionally, how to deliver them with upload. So that’s why we also see this upload, uh, input here. But as we can see, even without that, it’s really just this simple few lines of configuration to get that up and running.

Um, now once that’s actually being served, let me grab the, deployed your L for that. We can see that this is the demo application and these images are now being served from Cloudera. And we can see that by inspecting the URL. And let me make this a little bit bigger just in case it’s hard to see, but we can see the rez.cloudinary.com URL, where it’s providing my, uh, my cloud name and the symbol transformations along with the public ID of that image that was uploaded in.

So my Cloudinary account. When I walked through the demo, I’ll show some other cool things that I like about why this is actually [00:23:00] impactful. Um, but as we can see that there’s really nothing else that I did special in terms of the application, in order to serve these from Cloudinary, I just added that plugin and it automatically serve them for me.

Sam Brace: And what I like about what you’ve done is that it’s also, it, it is, as you’re saying extremely simple in its design, where all we’re focusing on is transformations dealing with fetch format and quality. As we’ve seen also through your code, if one were to upload with upload presets and be able to do cropping and resizing that way you can always tack things on like almost ad hoc to your existing plugin structure.

So it’s not like where someone has a developer would be waiting for you to develop new code against this. They could easily take what you do with just some quick changes to Cloudinary and develop it to fit their particular use case. If I’m

Colby Fayock: understanding it correctly. Absolutely. Now. So the only difference, I guess, would be you’re you’re talking about actually changing the code for the plugin, right?

So somebody could absolutely develop their own plugin, [00:24:00] clone it, publish it to NPM and have their own completely custom version of this. That’s the nice thing about the Netlify functions is really it’s using NPM as a source to grab that package where it can then. Come in and run whatever you code you want on that Netlify build and deploy process.

Um, now the only slight differences Netlify has their plugins directory, and they’re very particular about making sure that, you know, we’re, that they’re installing safe plugins and everything is getting reviewed, um, as part of that process, uh, which is a great process for them to be having that kind of thing.

But yeah, of course anybody can build their own plugin and, uh, have it readily available for their sites so they can provide these kind of transformations. It’s especially helpful. Uh, team doesn’t have certain access inside of their code base to do things like this, where if they still can install on Netlify, they can still provide that benefit, whether it is Cloudinary or some other tool.

And then still be able to work through that with the modern tech, [00:25:00] uh, modern tech.

Sam Brace: Absolutely. And of course of all the clean code that you’ve supplied them as a starting point to if they love,

Becky Peltz: you know, I’m curious because the code really is very clean and it’s easy to understand the process that you’re going through to create it.

But did you run into any roadblocks as you were developing this, anything that you had to learn new things or master

Colby Fayock: yet? So I think the most interesting thing. That I ran into was learning about how, what data was available to me on the net five build process, particularly because we need to have that fully forms, URL for the image, whether or not we’re a fetch.

I guess that’s the only in the fetch case, right. Where we need to pass in that remote URL. We need to be able to know what that final URL is going to be on. Netlify. Um, so I, I talked to the Netlify team and figured out, but they have, uh, a lot of environment variables and configuration available within the plugin ecosystem where we’re able to [00:26:00] find how to create that URL pattern so that we would have that representation of the URL to pass into the Cloudinary, uh, transformation.

Um, otherwise. Because a lot of the images that are on the page might just be slash images slash uh, you know, whatever dot JPEG. So I need to have that fully final URL to pass it into Cloudinary as a fetch. No, it’s,

Becky Peltz: it’s, it’s really nice to see how that all came together and you’re able to work with Netlify to figure out some of those problems.

Colby Fayock: Yeah. And that’s a butter now that buy up too much, but, uh, they’re a great team and they were super helpful with, uh, uh, you know, helping me work through. So Colby,

Sam Brace: when I’m thinking about this overall deployment project, when we’re talking about getting this thing live, what does that ultimately look like?

I feel like it’s something that I don’t know if I’ve even actually seen this from that perspective, having worked with Netlify and whatnot. Can you

Colby Fayock: show us. Yeah, for sure. And I do have a little starter project that I [00:27:00] can kind of work from. So first of all, I’ll pull that up and kind of show what I have, uh, where I’ve used this framework called Astro, which is from the snow team.

If you’re familiar with all the actual JavaScript building stuff, um, it’s, it’s a more modern framework, uh, where. By default, you’re not shipping JavaScript, which is really cool, which is kind of why I like it. And it’s still in the early days for Astro itself, but there’s a lot of cool things, uh, looking forward with it.

But I wanted to use this because I knew I could deploy a static site really quickly, um, and kind of see what this would look like, but what this is going to actually be, I’ll pull up the demo itself for it. Um, where again, I just have a bunch of images on the page and we can start to inspect them. And we can see that it’s just serving this locally, uh, on Netlify, uh, just as if I weren’t doing anything else.

Um, but because this is an Astro, uh, site, what I’m going to do is I’m going to treat it as a starter where what that means is I’m going to clone it down locally, [00:28:00] um, as if I’m creating a brand new project with it, and I’ll show you how to. First of all, how to deploy it over to Netlify, but also how we can actually install that plugin after we do that.

So how I’m going to actually do this is I’m going to use as a starter. So I’m going to head over to my terminal. The first thing I’m going to do is make a new directory for this product. So let’s just call it my Astro Cloudinary, where I’m going to now navigate into that. And if we go to astro.build, which is their website, we can actually see how we can start a new project.

And the way that I’m going to start this new project is I’m going to. Use what’s called a template. Um, so actually it might’ve been on that first page. Yeah, here we go. So we can see that once we have our directory, we’re going to run NPM in it, Astro, and I’m going to actually pass in my template. So I’m going to run NPM in Astro dash dash dash dash template.

And I’m going to pass in my Colby Fayock Astro image gallery. What this is going to do is it’s going to clone down that site that I just showed you inside a get hub. So it can actually [00:29:00] make it available locally for me to start up the project. Now, if you’re familiar with next JS or eating Gatsby, typically you can do this and create the folder, uh, as part of that process.

But Astro actually requires you to do all that a little bit more manually in which isn’t a big deal. It’s just something that to keep in mind as you’re working through it. But now we see that our next steps I’m going to NPM installed. And we can even initialize get, because we’re going to want to actually put this up on how to deploy to Netlify.

But once this is, this is working through installing the NPM packages, which might just take a second.

In the meantime, I can start to create my get hub repository because I know that I’m going to need that, so it can hit new repository. And I called this my Astro Cloudinary. And because I’m going to deploy a project that I already have locally, I’m just going to create the repository instead of adding any of those other files.

But let’s see here once we have all the MPS. [00:30:00] Packages installed, which is taking a little bit of time. I guess my Internet’s a little slurry. Now I can continue on with the process inside of the browser because we can push those changes up once we have the project itself. So I’m going to head over to Netlify and I’m going to log in.

And once I’m in there, I’m going to hit add a new site, which I’m going to import an existing project. Now, as we know, I don’t have anything in this project right now. I probably want to wait for that actually, because one of the cool things about Netlify is when you import a new project, it’s actually going to be able to help detect what that framework is before you use it.

Yeah. We have that locally available now and I’m going to initialize my get repository, but then I can run NPM run dev, and we can just see what this is going to look like locally before we push it up. So I’m going to open this up in my browser and we can see that I have all my images here. Again, I can inspect this and these are all just being served locally.

Um, that’s why they loaded so fast, but we can see that we just have a really basic site. So now let’s actually get this up [00:31:00] into our get repository and let’s get it into Netlify. So now that I have an initialized, I can add it into get hub by adding this remote origin. First of all, and then pushing that up into hub itself.

Once I reload, we can see that we have that new project. So now let’s actually import this into Netlify so we can see how that works. So once I’m in Netlify again, I created a new site. I’m going to hit get hub, which if this is your first time in Netlify, it’s going to ask you to authorize with GitHub, but because I’m already authorized, I can just search for my repository.

We’re once the search actually turns up all those results. I can select that. And like, I was kind of alluding to it already knows how I want to configure this site. Now it does this with all the different frames, the, all the different popular frameworks, at least where with next GS, it’s going to actually tell you, ask you if you want to install the next JS plugin we’re here.

It knows that these are the default commands with Astro. So it automatically puts those in for us. So I’m going to click, deploy. [00:32:00] And in the background with this, this is going to do is it’s going to start to build and actually deploy that site up onto the Netlify, uh, infrastructure, just based off of that get repository.

And because Astro is actually pretty fast, this shouldn’t take too long, uh, to actually. I’m kind of

Sam Brace: mystified right now, to be honest, because like, for people that may have not played with net Netlify and Netlify see a lie, the fact that you’re able to run Netlify dev and it just did so many magical things right there to be able to see everything locally, it just.

I was just, I just I’m, I’m really impressed. It’s really, really fantastic. All of the things that Netlify is doing on the back end there, um, for sure. Am I, the only person that feels that way, like, like when you

Becky Peltz: kind of freak out, I love this product. You can do all of that CLI. And then when you, once you hook up your get hub to it, every time you push to get hub, it’s got a hook and it just rebuilds your project for you.

Yeah. So we’ll [00:33:00] actually see

Colby Fayock: that when I configure Cloudinary, which will be cool. Um, but yeah, I think I kind of take it for granted now because easy it is. It’s.

Sam Brace: It is one of those things where it just like, I think as a developer, I mean, obviously we work for Cloudinary. We don’t work for Netlify. I need to make sure that’s a very, very clear based on how the tone of this conversation has been going.

But, but in the same sentence, like, like if I was trying to easily, you know, spin up a project, the fact that you just showed how easy it was to do this, um, I I’m just, I. Um, I’m very, very blown away. Very, very cool

stuff.

Colby Fayock: It is amazing. Um, but as we can see, it’s green and it was actually deployed already. So we can start to look at it on Netlify servers, uh, where if I inspect, uh, like we would expect they’re being served from Netlify, um, which is completely fine.

Netlify is a great CDN. But, you know, ultimately we want to see how we can add, uh, optimize this, uh, moving forward with Cloudinary. Now, one thing I do want to kind [00:34:00] of show before we get into that is kind of what we’re looking at inside of the network panel. Now, if you’re not familiar with, uh, what I’m showing you here, this is the developer tools that Chrome provides you and all the other popular browsers have something similar.

But what we can see here is all the different images that are being read. And one thing that I like to pay attention to are things like the size of that image and how much time it’s actually taking now I’m on pretty fast internet. So, you know, aside from that NPM install that we saw earlier, so these times are going to be pretty fast, but we want to see how we can actually improve.

These times, and to be fair, now that they’re cashed, we can refresh it again and see that they’re more normalized rather than that first request, which is going to be a little bit slower until it actually caches on the servers. So let’s leave this page open. We’re going to leave this page open and see how it compares once we actually convert this site to use, uh, the Cloudinary, uh, image hosting.

So what I’m going to do is I’m going to head back over to that plugin. [00:35:00] If I can find it with all my different tabs open of. But what we’re going to do is we’re going to first install our Netlify plugin locally as an NPM package. I’m going to simply paste that right in. And hopefully this one doesn’t take as much time to install since it’s just that single package.

But we can see that the second thing that we need to do is we’re going to need to add. Plugins snippet into our Netlify configuration. Now, what that means is I’m going to actually grab this full snippet at the bottom where this kind of just walks you through how that works, but I’m going to first open this up inside of my editor, which I’m using vs code right now.

And what I’m going to do is at the very root of the. I’m going to create a new file called Netlify dot Tommo. And only way to do is paste in that snippet. We’re here. We’re defining the plugin that we want to use, which is our Netlify plugging Cloudinary, and we’re going to define an input and that input is going to be my cloud name.

So I’m going to specify Colby demo [00:36:00] and make sure if you’re following along that you want to use your own cloud account. So you’re not limited to my demo free. Uh, so just to make that clear, um, but now all I’m going to do is simply add all those files to get. I’m going to commit it. Say adding Cloudinary, plugin.

And a way to push that up, which as, uh, was kind of alluded to here, what’s going to happen is if I refresh the page here, we now see that I have that file there, along with the changes for adding that package to MPM. If we head over to Netlify and I refresh the page here, where if you wait long enough, it will actually refresh on its own.

We can see that we already have a new build kicked off. And that’s because I pushed up to the main branch, which is the default branch for my note by site. You can change that branch and you could even create what’s called deploy previews, where if I push to another branch and create a pull request, there’s a little bit of a tangent.

But if I create a pull request with another branch, it’ll create a separate deployment rather than [00:37:00] deploying to that main, uh, that main domain. But once we kind of wait here for this bill to finish. We can see it’s already published before I dig in, though, let’s click through and look through the logs because what I want to show you is we can see that it’s going through this Netlify build process.

We can see that it runs the build command, which is just running through Astro for us, but we can now see that we have this Netlify plugging Cloudinary on post build event. And that’s exactly kind of how we talked about how this process would work going through. Now. I don’t really have a lot of logs going on here unless you have some kind of air, but we can see that it’s done.

So we want to see. Actually, it looks like when it’s done. So I’m going to head back and I’m going to open this up in a new tab and we can see that the images kind of look exactly like it did before, but let’s open up our inspector or I’m going to look the image and we can see that it’s now being served from Cloudinary.

Let’s actually look at the network tab and see what happens. I’m going to refresh the page and similar to before, after that first request, it’s going to kind [00:38:00] of normalize how it’s being loaded, but we can see if we’re starting to look here. We were originally requesting JPEG. But now we can see that we have a type of Ava is AVF the proper, uh, phonetic pronunciation of it.

But now we have all these Ava files, which are going to provide us a lot of benefits on top of that. Now, if I switch back and forth between these let’s just look at this beach bat JPEG where this original size was 566 kilobytes. Now, if I go back to the. That’s 186 kilobytes. We can see that. Let’s see. We can probably look at the total transferred at the bottom here, where we have two megabytes of those images.

Uh, what the ADA format I believe. And we had 4.5 megabytes for the JPEG format. Now I didn’t do anything aside from installing a plugin. And what that’s going to do is it’s going to automatically optimize and it’s going to automatically serve that modern format of Avis, which is going to give those smaller file size, which is first of all, transferring [00:39:00] less data to the browsers and devices that are requesting that.

But it’s also going to be quicker because you’re transferring less data. So. It’s a really easy way to have an easy performance wind, uh, to optimize those images on your site. And of course, we’re looking through this, nothing looks different between the two sites. It’s completely, it looks completely the same, but you have that auto, uh, bet optimization.

And I should

Sam Brace: clarify something here, Colby, cause you’re showing an awesome example and I’ve loved everything that you’ve shown him. This one thing that sometimes I, when I’ve talked to developers over the years that I’ve worked at Cloudinary, they sometimes think that EFA auto, which is the format transformation that you’ve applied.

It’s like almost like a web P converter or an AVF converter, like, and we’ve seen an example where we took everything from JPEG to AVF, but I shouldn’t really emphasize. He only did that because it found aid. That was the most optimized file. It doesn’t mean that everything will become Avis because there are some times you have a developer.

Who’s like, well, I don’t want all my files to be a w why [00:40:00] should I use that photo? And it’s like, well, it’s choosing the best possible version for what’s going to be there. So it actually, if you ever see a piece for you’re using F auto and it’s. The type didn’t change at all. I say, it’s stayed as JPEG.

That doesn’t mean that actually, if auto didn’t work, it just means that it said what you served originally is what is the most optimal version of that case. So just want to have as a clarification,

Becky Peltz: and just also that you didn’t lose your original file. The JPEG was what was uploaded to Cloudinary. And if you look at the media library, you’re going to see it.

There what’s been what’s happened is. Our transformation was run and you have a derived Ava file. So the Cloudinary CDNs can determine, oh, you’re coming from Chrome. You probably would do well with an AVF. And it’s going to go pull that derive. So you’re not losing your original image at

Colby Fayock: all. And thank you for clarifying those, those little details.

Definitely get lost in translation, but they are very important to that process. [00:41:00]

Sam Brace: But, oh my gosh. It like, it just, it, it really does show like the plugin. Fantastic. It does exactly what it’s supposed to do. You did the right thing by deploying Netlify and working with them. So, um, I’m, I’m very, very impressed.

Very good job holding. One question I did actually have for you about the plugin situation would Netlify being someone that’s has used Netlify before you’re familiar with everything that’s involved with that company and what they provide. Is there any other Netlify plugins that you’ve seen that had actually really helpful for you, for you to see your overall development work?

Anything that you’re saying while people are getting into maybe learning about Netlify learning that plugins. Is there any other ones worth exploring that are part of that like official

Colby Fayock: library? Yeah, there’s definitely a bunch. I can’t say that I’ve used a ton of different ones. I know there’s an Algolia one, which is a search.

Uh, it provides search onto your site. And part of that process it’ll automatically, uh, scrape your notifies site. I don’t know too much about that. I haven’t used it. I just heard cool things about it. But one [00:42:00] thing, one that I really enjoy is there next JS plugin, which it’s kind of behind the scenes.

Cause you don’t really think about it where if you’re a next JS application developer, which I love next year. Yes. When you deploy it up to Netlify part of the issue is a lot of features and next JS aren’t kind of JAMstack friendly or Netlify is really on the JAMstack static web kind of thing. Right.

Uh, plus Lambda functions on top of that, where next she has has some server side rendering and, um, Capabilities on top of that. But what they’re, what they’ve done is they’ve taken this next year. Yes. Plugin on LFI where it’ll take your next JS site and it’ll transform it into functionality where it can deploy on Netlify.

And if I’m not mistaken, it has most of the features covered. I know there might be some small ones that aren’t covered. Generally you can display any of your next chat sites on Netlify because of that, where things like server-side rendering, it’ll transform into Lambda functions. Um, probably more technical than just calling a general broad [00:43:00] list of functions.

But, um, that’s probably my favorite plugin and that I use all the time, even though it’s kind of just behind this. No,

Sam Brace: I, I can see that thing super helpful. And actually, Becky, tell me if I’m wrong about this. Is this the first time we’ve actually talked about next JS on any of our programs? I know we’ve covered damn stack projects, but this next feels new to me.

And in this case,

Becky Peltz: I think it is, I don’t think we’ve had anyone on that has brought it up. And I know I use it a lot in training to put together, you know, when you’re working with react and you want to like, say, put a video player up on a page. I like that. Just for the fact that I don’t have to get a router.

I don’t have to set up a router. And so I love I’m right with you on next JS was created by versatile and you can deploy it there, but for some reason I’ve put together next JS with Netlify in the way that you’re describing. So, yeah.

Colby Fayock: Yeah. And varicella is another great company. Um, nothing against them. I just, I’ve always been a Netlify fan.

[00:44:00] Um, Prefer it for whatever reason, maybe it’s just the UI or something. And, um, I, I have no reason to switch, so I keep the plant there and they’ve been amazing with, uh, keeping up with the next shift development, um, to make sure that the features are. Yeah.

Becky Peltz: I have a feeling there’s a laziness about developers, where when we find something that works, we stick with it for awhile.

And

Sam Brace: sure. So now that you’ve developed this plugin, you’re diving into all things Cloudinary course and your day-to-day work. What are, what are the next things? What what’s next for the plugin what’s next for Colby?

Colby Fayock: Yeah. So I think the biggest thing in terms of the plugin is I want to try to provide more, uh, broad coverage out of the box.

Um, now. W, I don’t think there’s going to be a solution where we can have complete complete coverage for any kind of JavaScript application. Um, kind of like next you asked what the client side routing, unfortunately. Um, but kind of like that solution where maybe we can take all images and the images directory, or whatever directory that you [00:45:00] specify so that we can provide at least more inclusive.

Coverage, uh, for your application. Um, but ultimately I want to try to make it as easy as possible to just, uh, put Cloudinary on your entire site because of the awesome optimization that you actually get for performance on it. Um, for me, you know, I want to keep trying to find. Different things that I can do with Cloudinary.

I’ve been having a blast learning about, uh, all the different tools on it. Um, and that’s not me here trying to plug Cloudinary. Um, but I’ve just been having a blast with it. And I can’t wait to keep digging into things like.

Sam Brace: Amazing. Well, Colby, I can’t wait to see what else you have to get into, to be honest, this, this is, if this is step one, I can’t wait to see what step 2, 3, 4, when it comes to your journey, working with us, working with assets, the way that you have been, of course, and empowering the JavaScript, the JAMstack developer community as much as possible.

So congratulations to you. And I’m so happy that you could be part of this.

Colby Fayock: Thank you so much. Yeah. [00:46:00]

Becky Peltz: Yeah. It’s been great working with you and I’m really happy that we could have you on this program. And as Sam said at the beginning, you’re the first to appear here that works at Cloudinary. So

Colby Fayock: I consider it an honor.

Thank you.

Sam Brace: There. As I mentioned at the very beginning of this. You saw it. There’s so many things that we talked about with Colby that just, when it comes to web development, it’s going to make your life easier to pick up some of these best practices and tips and tricks that he provided. But I think the first one that I have to stay in, I need to indicate I’m not paid to say this.

This is just because how much I believe it to be true. Netlify is making it so much easier to deploy your web projects then. Any time before today, because it’s just where you have to do certain things, but the certain things are very small and then once it happens, it just the deployment process. It just it’s easy.

And we saw it with Colby’s project. [00:47:00] Becky. Do you agree easy? Oh yeah.

Becky Peltz: I am a big fan of Netlify and I, I feel almost like I have a dev ops team of my own when I’m working there. They do all the building. You can pull in these, um, plugins to add extra functionality. And they make i