Retrieving Instagram Content, Delivering with Cloudinary

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.