Accessing Cloudinary with GraphQL in Gatsby

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.