Dive into All Things Digital Media
Explore our podcast programs: DevJams and MX Matters, each with its own take on what it means to build, manage and deliver the modern web.Watch Featured Podcast
Building a Web3 Marketplace with Cloudinary and IPFS
Daniel Duan, who is the head of engineering at Legitimate, has helped build out a truly innovative Web3 marketplace. The Drops by Legitimate project allows artists to create non-fungible tokens (NFTs) for their physical products, such as paintings, photography and even wearable items. As the artists’ product images are delivered via Cloudinary, Becky and Sam from Cloudinary’s Customer Education team sat down with Daniel for this DevJams episode. They discuss all things related to the Drops project, including a walkthrough of how Cloudinary works with IPFS for optimized, accelerated image delivery through various caching mechanisms. If you are looking for a great developer-focused introduction to Web3, NFTs, cryptocurrency and the blockchain, you won’t want to miss this DevJams episode!
Sam Brace: [00:00:00] Welcome to DevJams. This is where we talk with developers that are doing some amazing things when it comes to website development, mobile app development, and as you’re going to see, development that is starting to get into the blockchain and involving NFTs. But what that ultimately means is that they’re probably using Cloudinary in those projects in interesting ways, which is how they got on our radar to be in a DevJams episode.
My name is Sam Brace. I’m the Director of Customer Education here at Cloudinary, and joined of me as the co-host on all of these DevJams episodes is Becky Peltz, who is our curriculum program manager for developer education at Cloudinary. So Becky, welcome to episode. Glad to have you back.
Becky Peltz: Hey, glad to be here.
I really like this whole project. I’m super excited about it. It took me a while to totally understand [00:01:00] it before to get a understanding ahead of time, I had to read some blogs and so I’m really looking forward to hearing Daniel explain this cause I think there’s a lot of concepts here that we need to build before we totally can appreciate what’s going on here.
Sam Brace: I agree with that because it’s a multi-layered project in many ways, because they’re doing certain work in the blockchain, so that makes it a web3 project in certain ways. They’re doing certain things with non fungable tokens, also known as NFTs. They’re working with certain marketplaces where certain details can be sold.
They also have an aspect that’s tied to physical goods as well as digital goods. It’s a very cool project that we’re doing with Legitimate with, we have the tap project that we’ll show here. We have the drops by legitimate, so there’s a lot of different things that are here, but what it ultimately shows is that when we’re looking at media management and delivery, there’s a lot of new ways to be thinking about it that Daniel’s gonna talk through in this episode.
But [00:02:00] also it shows how spaces like that are things that Cloudinary and other vendors can definitely live in and be very, very helpful when it comes to those projects. So there’s tons of data here that he’s gonna share. So in my opinion, out of all of the episodes that we have shown, this is one of the ones that you may need to pause, go back and listen to again, because there’s so many nuggets of knowledge that are shared throughout this piece.
Becky Peltz: And having Cloudinary on web2 and interfacing with the this application on web3 allows you to really kind of understand the difference between them, and then why we still need both of ’em, why we still need web2. So it’s really, really great learning here.
Sam Brace: Absolutely. Absolutely. And if you thought web3 was only cryptocurrency, oh my gosh. Daniel’s going to blow your mind, let’s just put it that way. Cause like I said, I can’t say it enough. There’s a lot happening here. This very cool, [00:03:00] cutting edge project. Let’s get into it. Let’s talk to Daniel and learn more about Legitimate and all the work that they’re doing over there.
And then once Daniel and Becky and I wrap up, don’t turn off the episode because we have some key takeaways for you that will help summarize the points that are raised and maybe help you with your next project, especially if you’re trying to get involved with any of the things that are involved with the blockchain, NFTs and more. So see you in a little bit.
Daniel, welcome to the show.
Daniel Duan: Hi Sam. Thank you.
Sam Brace: So Daniel, before we start getting deep into this project, and there’s so much to talk about when it comes to what Legitimate is doing between the various projects that are you guys are taking part of, I do wanna take a chance just to talk a little bit about you.
So tell us about you and how you got into software.
Daniel Duan: Yeah, so brief intro about me. I’m Daniel. I’m the head of engineering here at Legitimate. I got involved with Legitimate when Calvin, the [00:04:00] CEO and founder, also one of my good friends from college basically pitched me the idea of connecting the digital and the physical through the use of NFTs and blockchain.
And I think right now, it is an exciting space to be in because there’s a lot happening on the web3 crypto blockchain front. And also because we get to work with a lot of cool artists and brands and providing them with the technology that can really unleash their creativity without having to worry about the technology and the technical side of things. In terms of where my technical background is, I studied computer science at UCLA years back.
I spent some time at Squarespace doing content management system related things, really focusing on performance and usability of the websites that are built on Squarespace and also the building experience on Squarespace. And then after that, I spend some time at goat.com, which is a sneaker resale platform [00:05:00] because they are an e-commerce platform, performance and usability is really front and center in the product roadmap. And a lot of times we try to optimize the checkout flow to be easy to use and also as fast as possible. So more users get funneled through that process and ends up converting more transactions that way.
So, that’s a little bit about me.
Sam Brace: So I can see some of the connections between some of the things that we’re gonna talk about where having something like Squarespace where obviously it’s driving websites, easy to use interfaces, make it simple for people to publish, moving into the sneaker space, obviously we’re gonna be talking about physical goods and fashion and a little bit here, but what was the thing that got you interested in some of the other aspects of what Legitimate is doing?
Like NFTs, web3, working with the blockchain? What, what got you going here?
Daniel Duan: Yeah, so I think a lot of the newness of the web3 and also just how early on we [00:06:00] are in this blockchain technology, it really allows us to drive the behavior or what is the definition of a product on the blockchain.
So that in of itself is really exciting. And then the other part is that I get to use some of the learnings that I had from the previous jobs in, in this new job as well. So, a lot of the processes around like authenticity and around e-commerce and sale, we’re actually doing that with the marketplace
part of the protocol that we’re building on Legitimate, where we help the creators sell the physical NFTs that they create. And on the other hand is the website building experience. So we do allow creators to customize the experience that pops up when a Legitimate tag is tapped with a phone.
And so a lot of that is the website building experience and being able to host different types of content and also optimize for that as well.[00:07:00]
Becky Peltz: So now that we’ve heard about your background and you have a really strong background in e-commerce, can you show us your products? Can you start to talk about your tap and drop products and the artifacts that go with them?
Daniel Duan: Yeah, so let me share my screen here and I can go right into it. So, the company website that we have shows the typical interactions that you can do with the physical NFT product that we have. So the physical NFT is comprised of two components. One is the digital NFT that comes with the product, and two, the physical chip
that we encode and integrate onto the products themselves. So, for something like a sneaker or a painting, the tag could be either placed on the shoe in here somewhere sewn in, [00:08:00] or it could be attached to say, like a flat surface on a painting. And with each of these trips, it emits a single use link that the user can then scan with their phone and it pops up on their phone,
and view the provenance information, the item information, details, things like that. And also additional exclusive content that maybe the creator might want to include as part of their digital experience as well. And, with this chip, because the links that it emits through the NFC tag is a single use link that ensures that the chip cannot be duplicated and the one to one connection between the NFC and the NFT is always there. So, the user can tap it, by putting their phone near the NFC tag, and then it’ll bring up a special site that we have for them.
Becky Peltz: So just to get a bigger perspective here, what you guys are [00:09:00] doing is bringing retail into the blockchain and therefore blending physical and virtual.
And the chip is a conduit from the physical into that virtual, and you have this tap product that allows a person to, with a cell phone to read that
chip. And right. Access. Yes.
Daniel Duan: So, the tap site is part of the customization that we allow the creators to do.
So a lot of the cooler things that we’ve seen with what people have done is some artists, maybe they do performative art. So the end product that they create is only part of the story that they’re trying to tell. The painting process or the creation process is the other half. And being able to include that into the chip with a video that’s shown when a person taps the tag with their phone. That’s really powerful and that’s something that traditional art doesn’t really benefit [00:10:00] from,
and I think we are able to create. So this is just a demo tag that we have here, because this is on the blockchain, you can see that we meant the NFT and whoever is the owner of the NFT will also show here. And on OpenSea, you are able to bring up the provenance, how many transactions it’s been through, which previous wallets have owned this NFT and things of that nature.
And through the use of this blockchain, you are able to trace the previous sales, transactions and things like that. Yeah.
Becky Peltz: You’re both bringing the retail into the blockchain. You’re providing this extra digital experience.
I know you also are using this to provide authenticity for the artwork.
Daniel Duan: Yeah. So let, let me show you the chips actually. Cause I think that will answer a lot of the questions around how this actually works. [00:11:00] So we, we have two different types of chips. One is a really thin flat sticker and the other is a plastic more durable type. So with these stickers, we usually advise to the creators to integrate it under a product label or things of that nature.
Whereas the chip, you can see it has a little bit of thickness, but something like this could be sewn in maybe to like a clothing tag on the back of a t-shirt or like inside a suit jacket or something like that. And through these chips right here, because you are able to, let me bring up my phone so I can show you the actual tapping experience with these NFC tags that we have.
Anyone with a smartphone can bring up the website through the tapping, and then see the actual information of each tag. So this is a demo one that I just showed off earlier and [00:12:00] the user can see that Legitimate minted it. The Legitimate currently owns this one, and they can go into OpenSea and, and take a look at what other metadata or provenance information that’s displayed through OpenSea.
And because it’s an NFT, it works on other NFT platform as well, not just OpenSea. So
Becky Peltz: anyone familiar with reading QR codes on their phone is gonna have no trouble picking up this information on the blockchain?
Daniel Duan: Yeah, I, I think this is actually easier than QR codes because you don’t have to even bring up the camera.
On the newer iPhones, you put it next to the tag, it will pop up. That’s nice. Yeah.
Sam Brace: So I’m seeing the overall flow that we have here. We have something that, it’s a physical space item where we have, as you said, it could be a painting, it could be a piece of clothing. Someone has tapped it. I would imagine that’s the right terminology for what they do.
They bring that up onto their [00:13:00] mobile device and they’re able to easily see all of the details to it. As you were saying, pointing them to the NFT marketplaces like OpenSea, but how are you handling the overall development of this? Like how did you connect all of these different pieces together?
And I can also see there’s of course, imagery and video of all of this too. I’d love to know some more about the underlying components of this overall structure.
Daniel Duan: Yeah. So, we do host our images on IPFS, which is a distributed file system. But because the distributed file systems aren’t usually built to scale in terms of performance, we put Cloudinary on top of that to help us deliver the images in a fast and optimized way.
I do have a component that I have pulled up here where, actually, let me find this. So, let me share my screen one more time, and I can go over the component that we do have to show the image. [00:14:00] So, on IPFS, the image URL that we do have in our backend is usually something that starts with IPFS.io, something like that.
We do run our own gateway that fetches the image from the IPFS, passes it through our domain. This is mainly to ensure that the Cloudinary side of things, it doesn’t fetch from other domains and other people use our account, and usage data on our Cloudinary account, right?
So with that image that is fetched, we asked Cloudinary to basically say, pick the best file format that is for the end user device and also the best quality that you think is, you know, optimized for whatever delivery of that content. And then we ask for a specific set of file sizes, and we let the browser determine which is the more optimal resolution to [00:15:00] display.
So, we start with 200, 400, 800. It goes up to about 4,000. And, that is the native resolution that we shoot these product images and things like that at. And if you imagine 4,000 times 4,000, we have transparency in our images that, and we upload these in PNGs. They’re about eight megabytes.
And to deliver that is insane to end users. And so, fortunately Cloudinary makes it really easy. We basically tell Cloudinary all these parameters, and most of the time for Chrome and for newer Safari users, I believe it delivers in AVC image format. It ends up being somewhere around 2000 times 2000 couple hundred kilobytes.
Super easy, really quick. So that’s what we’ve been using Cloudinary. And one of the things that we do also want to migrate onto eventually is the the video asset that we have. And I think Cloudinary [00:16:00] also offers a pretty cool set of APIs to do that. We just haven’t had the engineering bandwidth to do that product migration.
Becky Peltz: And by way can I mention that this GIF that you just shared, you’ve actually shared with us. So we’ll be able to share with the audience that this is code that they can look
Daniel Duan: at. Yeah. And I think a lot of that is usable across, not just us, but anyone else as well. So I hope that helps.
Becky Peltz: It does. Yeah.
Sam Brace: One thing that, I want to unpackage with this because I think we said it, and I know what it is, you know what it is, Daniel, but IPFS is something that might be new to a lot of developers, especially if they haven’t gotten involved with web3 or the decentralized space in some ways. Can you explain a little bit more about what ultimately IPFS is and why, maybe it’s a vital part to doing something that’s going to be similar to your business?
Daniel Duan: Yeah. So in terms of companies that do run in the web3 [00:17:00] space, we want to decentralize as much as possible when it comes to our providers, our services, things like that. So that ultimately the images and the assets that do come with the NFTs live as long as possible. And we can do that through IPFS because they are distributed, multiple people can host copies of a single file, and when you request it through the IPFS protocol, any one of these people can send the file back. And how it works is really, it’s like going into a room full of people and asking like, hey, do you have this file?
If you don’t, you ask the next person and sometimes these people will help you ask their friends, family, people who they know to fetch this file for you. And I think that’s the cool part of this distributor system where it just fans out until you find this file and then it gets back to you.
Now the [00:18:00] downside to that is that it is obviously slower to ask multiple people versus one single service like Cloudinary, and I think that’s fine for long term storage, but for you know, more immediate needs like an e-commerce store or like a digital user experience, I think, Cloudinary plus IPFS, that’s the better solution.
Sam Brace: And I was just gonna say that, I like, Daniel, way to summarize exactly what I was going to summarize it, because it does seem that when I’ve seen NFT marketplaces, others that are doing things with NFTs in different ways, sometimes where they try to shoot holes into the way that they’ve developed their architecture, develop their business is they say, well, wherever these images are hosted, wherever these videos are hosted, that you might be purchasing as non fungible token,
it’s where if that goes down, you lose your asset. But I think by making sure that you’re focusing on performance [00:19:00] aspect with Cloudinary, but also ensuring that your file always is there because of this decentralized aspect, that part of IPFS, it adds this really nice blanket of security, in my opinion. So I do think they combined very, very well.
If you get into this type of space.
Daniel Duan: Yeah. And that’s pretty much why we use it. And I think a lot of marketplaces or other projects, they end up standing up their own like image service. And I think that’s a huge level of effort and also just cost and other things like that where for us. It makes more sense to just pay a vendor, get the guaranteed service that we do get and move on to other things that we do need to build custom.
Sam Brace: The other thing I wanted to ask you about is I saw right at the top of the gist that was there, you’re building everything with React, it seems like. What do you know about like the decisioning? The reasonings that that Legitimate decided to go down the React path? Because that is one area that we find a lot of our [00:20:00] developers that are involved Cloudinary, we’re always trying to figure out what new framework, what new things should I be building my project against?
And you seem to have chosen React. What was the reason?
Daniel Duan: Yeah. So, we think that a lot of the things that we’re building in terms of the product side is very new, that we want to build on a foundation that’s reliable and also well supported. React has a huge ecosystem of testing libraries, tools, build tools, optimization tools.
So, I think that’s great. And there are also a bunch of other external vendors that, that we do use as well. And they mostly all support React. So that’s been pretty great in terms of just engineering velocity as well. One thing I don’t think I shared yet is the drop side of things, which is the platform that the creators of our NFTs can use to sell and transact their physical NFTs, their creations.
So let me share my screen again and we can go through that and also some of the technologies that power that as well. So this is the drop site. It runs on Next js, which is the server rendered version of React, basically. And we chose that because it is an eCommerce site, where you get to bid [00:22:00] on different products and creations that artists brands have created and things like that. And because, we do want to convert users into bids, speed and reliability is front and center for this platform right here. And, also a lot of the marketing side of things, we do want to optimize in terms of processes and this is where builder.io came from. So a lot of the content that you see here on the site that’s more marketing related, these are actually all builder.io blocks or, pages that are configured. And I believe they are one of Cloudinary partners as well.
So just want to highlight that they’ve been very helpful in reducing the amount of, you know, engineering efforts spent on marketing content.
Sam Brace: Yeah, and I, that’s one thing that’s I think very smart that you guys have done, because obviously you’re the head of engineering. You’re someone that understands developers, you’re a developer yourself.
But the people [00:23:00] that have to ultimately maintain a lot of these websites, they’re not developers in a lot of cases. They’re people that are tied to marketing. They might be tied to understand just content management and be able to put a nice user interface, essentially a wrapper around the content management system, like the way the builder provides it.
It’s a very good technique to try to get more adoption rather than people saying, Oh, that CMS is so hard to use. So I think you’re doing a lot of really smart things by building up this infrastructure that I’m seeing of Legitimate, by including some vested vendors for sure.
Becky Peltz: You’re running with Next.js and Vercel is also a Cloudinary partner, so we are all in a mesh here with this.
Daniel Duan: Yeah. Yeah. I, I think my philosophy here is that if I can pay a vendor to do something, it’s cheaper and easier than spending our own engineering time to build the same thing out and possibly a lot more reliable as well. So I think some of the cooler content that we’ve done, with builder.io io here is like, say, you know, we want to embed a video [00:24:00] showing how the tapping mechanism works.
Like this is all builder.Io. We spent five minutes putting the builder.Io block in. That’s it. And I think for one of the items here, we also included a promotional video that is also part of the marketing effort that we did here. And this took two seconds to upload. That was about it.
And we did also like two different revisions of this video. And the marketing team was able to just do that themselves. We didn’t have to spend any engineering effort to swap the videos in and out. So, that was really great as well.
Sam Brace: Like I can see looking at this drop site now that we’ve seen an example of like a product, you’ve kind of gone into the product detail at this point.
I can see why you shoot the images at such a high resolution. It’s where you want be able to zoom in, see the textures, see the actual fabric detail that’s associated with it and sometimes that’s not necessary. So that’s why I love what you’ve done with the different [00:25:00] breaks that you have for your sizing that you go all the way down to 200 pixels in width all the way to 4,000 pixels in width, or up to 4,000 pixels in width.
And that’s because you legitimately need, no pun intended, all of those sizes. So, I can see the purpose here for sure.
Daniel Duan: Yeah, so I think for purchasing artwork especially, like you want to see the nitty gritty details. You want to see texture, why someone created something or just like upfront and close when this is hanging on your wall, you know, what do you see?
And I think replicating that online as much as possible really makes sense for us.
Becky Peltz: I’ve heard this website drop referred to as the Christie’s or Sotheby’s of Web3, and it makes me wonder about the problems that you were trying to solve when you moved retail into web3, because there is that link there.
Daniel Duan: Yeah. For the transaction that are happening for physical items on Web3, [00:26:00] I think that’s the difficult part of the equation where we have to make sure that the buyer gets the NFT and the physical item together and that when, that is resold or transferred again, that both things go hand in hand.
And so we do have a locking mechanism that’s built into all the NFTs, physical NFTs that we do create, where we ask that the new owner of the digital NFT tap the NFC chip that’s on the physical item, in order to unlock the metadata after the transfer of each NFT each time. And because we lock the metadata that comes on the NFT side of things, we incentivize people to fetch the physical item,
and also own both of ’em at the same time. So they are able to unlock the digital side of things and because their wallet address or their Ethereum name resolution [00:27:00] resolves to their own wallet, if someone else owns the digital version but not the physical item, it incentivizes them to also grab the NFT instead of selling two of them separately.
Sam Brace: One thing I wanted to ask you about, cause Daniel, this is a very eloquent situation that you have here. You’ve created this amazing pathway to create this connection between physical and digital goods. And it’s gonna be working for the emerging technology that we have, but, in terms of developers, of course when they’re going through and developing something, it’s almost experimenting as they’re going along the way.
Is there any like big roadblocks that your team encountered when you were going through developing all of this that you feel like maybe would be good for others to not do or not encounter that roadblock in the future? Cause I think it’s definitely where, I feel like if I were to try to do what you guys have accomplished, I would fall on my face immediately.
Like there’s just, there’s so much greatness that’s happening here. So [00:28:00] give me any, anything that our audience can learn that you’ve learned along the way.
Daniel Duan: Yeah, so I think a lot of the major roadblocks are related to just how new web3 and the tooling and development environment and things like that are. And so like we’ve encountered a handful of bugs in the web3 libraries that we’ve used things like, how do you test making transactions on the web3 in an automated fashion, doing integration tests and things like that. There aren’t really established patterns to how to do these things just yet.
And I think as time goes on and the technology matures, we will see those coming up. But for now, I think everyone in this space is defining their own pattern and trying to get through as much as possible. So it is exciting but also pretty challenging.
Sam Brace: I agree with that. I think it’s where, like to my earlier comments about people poking holes and certain [00:29:00] parts of how secure unsecured NFTs are, I think it’s not to say that those vendors may have done anything wrong, it’s just where we’re learning so much about this space as you’re pointing out. It’s something where it’s fast, it’s growing, and of course there’s gonna be bugs along the way, or things that we don’t realize that’s even a bug or an issue.
So I think that makes tons of sense, why that would be a roadblock. And in some ways it almost feels unanticipated where because you are in web3, you almost have to be willing to deal with some of the bugs that come from it because it’s going at such a fast pace. Am I correct about that?
Daniel Duan: Yeah, I think, in terms of developing any product, whether it’s creating a library for developers to use, or for us putting physical NFTs out into the world, you really don’t know what people are gonna do with it until you give it to them, you know? And a lot of times, like some people might wanna screw with it and mess with it and see how they break.
Other people might try to create interesting use cases for specific things that we might have not imagined. [00:30:00] And enabling all that, putting it in front of people so they can play with it. I think that’s all part of the product process at the end of the day.
Becky Peltz: You know, another thing is a lot of what we read in the news is about the web3 and the prospect of buying currency and making profit on the currency going up. And what you’re doing is you’re not focusing on making more currency, but actually just transacting within that space. And so if capital flows into that space, it’s as the result of retail transactions, not just people trying to buy and grow their value of their currency through that.
Daniel Duan: Yeah, the value of our platform is really in the value that we create for our creators and partners who leverage our technology. So in essence, the people you know, who should really benefit from our technology are just creators. And hopefully, this increases the value of their artwork, their [00:31:00] creations and things like that.
But we don’t plan to be like a speculative coiner yeah or any of that. Very
Sam Brace: different.
Becky Peltz: I know, because you provide an authenticity by linking it to an NFT, linking the physical product to the NFT. In a world where people are getting into online consignment and they want to know that what they’re buying online as a used product is that very expensive purse or whatever, your development could lead to quicker ways to have that authenticity, to make that authenticity come true.
Daniel Duan: Yeah. Like the demo that I showed you earlier, anyone, you or I, with a physical tag and also a smartphone can verify the authenticity of something. I think that’s really powerful to put in the hands of consumers, right? So we don’t have to go to, say a consignment store or a professional authenticator to say like, oh, this is a real [00:32:00] thing.
Yeah. And in terms of the value that brings to that product now, because you’re able to authenticate yourself, you don’t have to pay the resale price of say, like, any of these consignment platforms that, that most people currently have to.
Becky Peltz: Yeah, and you’re gonna be willing to pay the asking price when you know that it’s an authentic good so to speak.
Daniel Duan: Yeah.
Sam Brace: So Daniel, I think we’ve covered so much here today and I know that hopefully our audience will start diving into Legitimate and all the projects that are associated with what Legitimate is doing and hopefully they also get a better understanding if they are planning on dipping their toe into the web3 waters, how they can be working with media in a better way.
Very similar cause I feel many of the things that you showed are absolutely best practices that when you are going into that space. Is there anything else that you can think of that you could say, this would be very important for audience to know, or anything that you wanna drive people to for more information [00:33:00] about what Legitimate is doing?
Anything. This is your time.
Daniel Duan: Yeah. So, we do have a company blog as well, blog.legitimate.tech. I can share that in a little bit. We actually just got done creating our new blog. This is hosted on Squarespace. It has a little bit of technology highlights around, what it is that’s powering our technology, but we really want to highlight the artists and their stories, and why it is they create and what they create.
So a lot of these artist spotlights are really on them. So that is a good place to get information on Legitimate and what we’re up to. We do have social links, Twitter, Instagram, we are on TikTok now as well, and LinkedIn. So find us on our company website and the links there to follow us.
Sam Brace: Wonderful, and I hope everybody does continue to follow the work that you’re doing. When we came across this [00:34:00] project, I was very inspired. I know Becky, I don’t want to speak for you, but we were both love. It’s great. It’s really cool. So I would say keep up the great work that you’re doing, Daniel and the entire Legitimate team as well.
And I hope to see some awesome things in the next few months, because this is a just in the time that we’re getting and talking with you as we were talking about this episode, it’s where there’s been big leaps and bounds of what you guys are doing. So you guys are moving at a very rapid pace, which is also very, very exciting.
Daniel Duan: Yeah, thank you for having me as well.
Really appreciate the time that both of you take to showcase what it is that we do and a lot of the cool things that we also do with Cloudinary as well.
Becky Peltz: Yeah, well we love seeing that you’re using f_auto, q_auto cause you’re optimizing for the web, so.
Daniel Duan: Thank you. Thank you.
Sam Brace: Becky, my head is spinning with all of the awesome information that Daniel was able to share this here.
And it just shows how [00:35:00] passionate they are about what they’re doing by showing off what artists are building, what their artists are creating, and showing awesome ways for people to be involved in that through their marketplaces, but also the authentication aspects of it. There’s so much here.
Tell me what got you going? What are your key takeaways from episode?
Becky Peltz: I like the idea that you could buy a hat and along with it, you could get the whole digital experience of how the hat was created. We definitely appreciate the authenticity
part of this whole process, but also the fact that you are getting these NFTs and they do contain lots of interesting information that just goes along with the physical product, and just the whole idea that you can actually pair digital stuff with physical stuff, with a little tag that you can just wave your phone pass and then pull in that whole digital experience.
So there’s a lot here and I think it’s gonna be really neat when this really gets into the hands of consumers.[00:36:00]
Sam Brace: I agree, and I think there’s so many angles that you can take with it, because there are some people that are very focused on authenticity, where we’re saying, hey, if I’m purchasing this unique brand, this specific brand, I want to ensure that it is what it says it is.
It’s just not a knockoff. I didn’t buy it from some cheap market or something along those lines. It’s to say, yes, this is real. This is exactly what I expected it to be. But I think the thing that Daniel talked about in his episode that wasn’t necessarily readily apparent to me was how this type of experience that they have going from physical to digital and creating that digital experience with
the consumption of that and also being able to be part of that, build that relationship with the artist and the person in a deeper way, I think is really even possible with a face to face interaction because now they can be contacting them. They can send them details about the next things are coming out.
They can explain the building process the way it took to be able to purchase the hat that you [00:37:00] mentioned. There’s just a lot here that I think will really expand the fashion space, the artist space in new ways if projects like Legitimate are really embraced.
Becky Peltz: Yeah, well, there’s a lot of people into consignment now too, and being able to authenticate when you want to charge a larger amount for it, that’ll be really nice.
You can do that without bringing in a bunch of experts to actually look at the goods. So that
Sam Brace: Yeah, Becky, that’s completely true. Wouldn’t it be nice to see like a big, big consignment situation, like a Poshmark or an Etsy be like, make this technology and, and
expand it and help all of our people that are selling vintage wear, maybe wears that they’re producing themselves, that are artists made. Like I could just, yeah, there’s so many applications to what they’re making here. Like maybe this is something even bigger than what we anticipated. Right.
Becky Peltz: Yeah. Yeah. I clearly see it as a very disruptive type of thing. Like somebody got a really innovative idea and they’re delivering on it. So that’s [00:38:00] really neat. It was really cool to hear him. Talk about those technologies, though, as you mentioned, the NFTs and then the IPFS. I really never understood that.
I didn’t even know what the acronym was, but inner planetary file system, that totally changed my view of a lot of things. Okay, so we’re talking about moving when we wanna put this images that are out on web3, on the web2, we need to move them from the interplanetary file system into something like Cloudinary.
And so we got to see that. And of course it’s done with all of the technology that we see and use a lot, React, Next js, and then a lot of technology that I don’t see a lot, but is just nicely blended into all these applications.
Sam Brace: Absolutely, and it’s one of those areas where this is a technology that is rapidly being iterated [00:39:00] upon new people, new vendors, new overall influencers are coming into this space that is web3. I think it’s one of those things where, as we said, we didn’t really have a firm understanding before talking to Daniel about what IPFS is.
I think even some of the marketplaces that they had, that was the first time I had ever seen some of those. So it’s definitely an area where if you’re feeling like, oh, this was all new to me, that’s fine. It’s new, it’s interesting and it’s showing that this is a space that yes, vendors like Cloudinary that really did a great job with web2.
It shows that it can work great in web3 too, but it’s where you have to be able to play with it and start to understand how the technology you love and use every day can fit into this new space.
Becky Peltz: Yeah, it could lead to a lot of things. Just the appreciation for the artist and the crafts people out there that are creating things.
You know, the idea that they could get those into the market and really own them and [00:40:00] actually follow their movement through different consumers. If that happens, it’s really exciting.
Sam Brace: Absolutely. It absolutely is. And I think the one thing that is also really cool about this be is that, it shows that web3 of course, meaning that you can read, you can write, but now you can own.
Right. Which is very, very different than the way that the web was looked at previously, where we had read, then we had read write. Now we have this whole new aspect to it when it comes to ownership and authenticity. Yeah, as we’ve shown in this project, but it’s not just some of the things that the media talks about on a regular basis like Bitcoin and maybe Ethereum if they’re lucky to be mentioned or things like that.
It’s not just about crypto. It’s not just about cryptocurrencies. It’s about all sorts of things and it just, this is scratching the surface of what’s gonna be available with the blockchain and web3 technologies for years to come. So I’m very excited to see this growth. Going
Becky Peltz: back to your point about the [00:41:00] owning, starting in the beginning, web1, I can remember the big term was content is king.
That was like this term you heard over and over because, you had to get something to put on your webpage. And that seemed in web2 to move to, hey, let’s get our users to write the content. And we were happy to on social media and now we are seeing, hey, maybe we can let people own that content and we can still build a business around that.
So that’s a really neat evolution.
Sam Brace: Yep. I completely agree with that. And hopefully we see this continue to evolve in ways that I can’t even anticipate, frankly. Maybe into industries that we can’t anticipate. But this is showing an amazing application. At least in the fashion space and also the space when it comes to creating unique pieces of art.
So once again, Legitimate is awesome. Good job, Daniel and the team, and hopefully this inspires you. If nothing else, to check out the great work that they’re doing. So now that you’ve gotten to the end of the [00:42:00] episode, thank you. Thank you for taking it all the way to the end with Becky and myself. And of course, if you had a great experience, go ahead and like and subscribe to any of the various episodes that we have here in any of the places where those episodes are delivered, such as Spotify or Apple podcasts, Google Podcasts, even our own Cloudinary Academy.
And of course, stick around because we’re gonna be putting out more episodes highlighting amazing developers like Daniel and others on future episodes of DevJams. So thank you again and take care.
Accessing Cloudinary with GraphQL in Gatsby
Tapas Adhikary, who is a frequent contributor on FreeCodeCamp.com and other developer resources, recently created an excellent image gallery with Gatsby and Cloudinary! Becky and Sam from Cloudinary’s Customer Education team sat down with Tapas to walk through his “Imaginary” project and better understand some of its components, such as its use of GraphQL and deployment via Netlify. If you are looking on building your next project with any of the mentioned technologies, this is an episode you won’t want to miss.
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.
Providing Headless Learning Management Systems for Educators
Continuing some of the recent discussions on MX Matters about headless architecture and systems, we learn how Thought Industries recently extended their customer education and external training platform to be headless. Sam and Maribel at Cloudinary sit down with Jack Antico – Technical Program Manager at Thought Industries – to better understand the purpose of learning management systems and the considerations companies should take if they choose to go headless as part of their education and enablement-based plans.
Sam Brace: [00:00:00] Welcome to MX Matters. This is where we talk about all things tied to the visual economy, talking about the ways that images, videos, rich media assets are being displayed, being used across websites, mobile apps, and other amazing projects by leading companies, leading developers, leading thought industry people, as we might be talking about a little bit later with all things that are gonna be really driving the trends in that overall economy. My name is Sam Brace. I am the Director of Customer Education here at Cloudinary, and joining me for this episode for the first time, but certainly not the last is Maribel.
She’s been many things at Cloudinary working as a customer success manager and now as a technology partner manager. And she works with companies big and small to understand how they can integrate with Cloudinary, and she’s obviously gonna be somebody that’s gonna add a lot of [00:01:00] insights, a lot of wealth to the overall conversations in this episode, and as I said, in future ones too. So Maribel, wonderful to have you here.
Maribel Mullins: Thanks for having me, Sam. This is so exciting and yes, I can’t wait to have this conversation, but yeah, happy to be here. Thank you.
Sam Brace: So joined with us for this episode as the guest is going to be Jack. And Jack works at a company called Thought Industries.
Thought Industries is one of the leading providers of learning management systems for companies that are typically in the software as a service space or SaaS space. And in previous MX Matters episodes, we’ve had lots of conversations about headless architecture, maybe tied to MACH, and the overall stack that can be part of that, in terms of microservices and API first and cloud native SaaS and headless architectures, they’re moving in an interesting direction with some of their products to be focusing on learning management systems being able to be headless. [00:02:00] So while we’ve had conversations about content management systems, we’ve had content overall about the headless space, we thought it would be interesting to bring Jack and the Thought Industries team in to help to explain why the learning management space or the overall customer education space is something that is also receiving the same type of treatments.
So Jack, happy to have you here.
Jack Antico: Thanks. Happy to be here.
Sam Brace: So Jeff, from your perspective, I think we need to set a foundation here. What exactly is a learning management system?
Jack Antico: So a learning management system is essentially like an online school in many ways. It’s where you can host content for users to go and learn. It’s a very crowded space. There’s like over 700 players in it. You can separate LMS into two categories. There’s internal LMS, which is like the majority of the space. It’s where you get training on conduct or your employee handbook or you get training on like internal marketing resources or stuff like that.
And there’s also external LMSs, that’s what Thought [00:03:00] Industries is. Those are externally facing. So it’s training customers on how to use your product, training partners on how to use your product.
Sam Brace: I’m sure most people that are working here, because we’re talking to those in the technology space, they’ve probably encountered an LMS in some form or fashion throughout their career.
Whether they’ve joined a new company, they’ve had to go through employee onboarding and they had to make sure like, don’t share your password to people and make sure that you’re not harassing your colleagues. That’s types of stuff that lives sometimes in learning management systems because people have to track the progress of that.
How much of a course did they complete? Did they complete the course? Can it reward certificates? So those are all activities that would be tied to an LMS. But you talked about something that I think is interesting about the external side of it. Like so what, why exactly would you be using an externally facing lms?
Jack Antico: There’s lots of different use cases. There’s a professional training use case. For example, we work with a lot of healthcare providers or healthcare industry people, whether [00:04:00] that be training nurses on their latest certifications or training physical therapists or, you know, some people for their job, they have to get a certain requirement every year, so we could train them for that. Um, all sorts of different use cases.
Sam Brace: That would normally be where they would buy a system. Right? And then from there, that would also include a front facing element, meaning this is the way that people can interact with the LMS in the sense that they can register for a course, they can sign up for an account, they can make sure they’re tracking their student progress. That’s the front end, right?
But then you have all the back end data that would be there as well. Someone that would be in an administrative role that would be tracking the progress of those things, they would be tracking, how do we make sure that certificates are being rewarded the right way?
They would be setting up the reporting mechanisms to show people who’s completed what at what times. But what’s interesting about the concept of headless is where we’re decoupling the front end of something from the back end of something. So [00:05:00] from that understanding, why would someone want to have their LMS be decoupled? Why would they wanna move into a headless situation?
Jack Antico: There’s lots of different reasons. The most important thing is all coming back to data. So it’s very rare for… almost like never happens that one company all of their data is in one source. It’s very rare. So essentially with headless, you’re allowed to bring in data from your LMS, such as like learner participation and certifications and attendance and stuff like that. But then you’re also allowed to bring in data from other sources, whether that be a headless CMS, you’re bringing in data from a place like Contentful or another headless CMS.
Or you could bring in data from e-commerce or other places like that. You can bring in data from all sorts of different areas, which is why it’s such a popular use-case.
Sam Brace: Looking at that perspective though, because you’re right, you do have it where, yes, the LMS is a single source of truth for learner data, but to your point, it could be where we want to weave in certain other [00:06:00] systems into the overall experience.
That makes a ton of sense of why that would be taking place. This sounds like an extensibility type of effort. For the learning teams, the people that would be producing the educational content, for them to weave it in to e-commerce platforms and to content management systems, into some of the things that you mentioned.
It seems like that’s the solution. To say we should go headless. Is that the fact, or is it just because that’s the trend that’s going on, or is it more of it’s stating a lack of integrations that maybe other LMSs are providing to these learning teams?
Jack Antico: There has been a very large headless trend.
That’s not the reason Thought Industries is pursuing headless. We’re pursuing headless because it’s what our customers want and it’s what they’ve been telling us for a while. And then as far as the most popular use cases, pulling in outside data, it’s just every LMS and every person’s learning setup is just so different.
We talk to so many different customers who have so many [00:07:00] different unique wants and needs. It’s impossible for us to serve everyone’s needs. So we give them the keys to their own kingdom with headless. And they’re able to generate their own solutions for their own unique needs.
Sam Brace: So what would be some of those unique needs? Do you have an example? You don’t have to mention customers, but like, is there anywhere this is a very clear use case of where a headless LMS environment would’ve benefited them compared to what they would’ve had if they hadn’t moved into that type of environment?
Jack Antico: One really interesting use case that we found is AR and VR. So essentially like being able to integrate questions and different experiences into AR and VR is really cool. And we don’t necessarily have all of these experiences happening in the same place. So for example, you could have some type of training be on your phone with an AR app.
But then after you complete that training, you go into a virtual reality simulation and you complete that virtual reality simulation in some type of lab. [00:08:00] Or you do some type of physical training with your hands in person in real life. And then after you complete that training, you can log back into the app and resume the rest of your coursework and training there.
So that’s one, you know, interesting use case, but there’s so many different ones. It’s hard to pick one, but that is one interesting one that we’ve seen.
Maribel Mullins: Are you seeing a shift on how people prefer learning? Like, are you seeing more like a shift towards mobile devices or tablet learning or, you mentioned AR/VR? Are you seeing more people gravitate towards a certain device or format?
Jack Antico: I think the trend that we’ve seen is contextual learning, so meeting the learners where they are. If you’re having an issue with your car or something, for example like that, and there’s an online school, an LMS for fixing car parts.
Maybe there’s an AR app on your phone where you can pull it up and then it shows the car and it shows exactly where underneath the hood where to touch what and which buttons to press. It’s one thing if you learn that and then you know, two weeks later you’re like, Oh, well what do I actually do now?
It’s much better to [00:09:00] actually have that learning in the moment when you need it, as opposed to having it, you know, two weeks to a month before, and then you’re like, Oh wait, what did it say? What part was that again? I think that’s where we can provide a lot of value for people and that’s where headless is really powerful because you’re able to deliver that data. Wherever the user is, we meet the user where they are.
Sam Brace: If I’m thinking about it correctly and tell me if I am, essentially a headless LMS would be the API layer to a lot of things that could be tied to the learning experience. Because if we’re using the example, I go work on this particular simulation. As soon as I achieve progress, like I’ve done this task or I’ve learned this thing, and then that could feed data back to show the progress that’s been taken, that can also help me with being able to potentially earn a certificate if I’ve achieved certain goals along the way. So it’s really saying that you’re combining a lot of different API calls together, where we have Thought Industries acting as the progress [00:10:00] checking, the enrollment aspect in certain ways, the certificate granted.
But then on top of that, you have it where other platforms can easily tie to that. So that way as soon as I click this button on this other system, it can report back in that way, and it’s all done because it’s headless. Am I understanding that correctly?
Jack Antico: Yeah, totally. You can do all sorts of different funky things. You could even use two LMSs in the same way. You could have a Thought Industries course and use that for the first part. And then once you get to a certain part, you send them to a different LMS and you have them complete three or four different chapters there.
And then once they’re done with those chapters, they come back into Thought Industries. Some customers that we’ve been talking to, they’ve been managing their LMS for so long. They actually develop their own LMS and they’re like not ready to part ways with it. Those integrations are very much mandatory for them because they’re not ready to give up the old LMS that they’ve invested so much time and resources into.
Sam Brace: I could also see it being valuable cuz we’ve talked a lot about in previous programs, microservices, where rather [00:11:00] than having a certain aspect where you have to completely rip apart this big stack, you can essentially swap out what happens to be there.
So if you have, as an example, the search capabilities of the LMS for the external user. Let’s say that the default search that you would normally have doesn’t cut it for them and they would prefer to use somebody like an Algolia or another type of service like that. It’s easier for them with the code, as long as they understand what’s happening there, bring in Algolia, remove the other search that happened to be there, and then that’s something that you can also benefit from by being headless. Cause everything’s much more swappable.
Jack Antico: Yeah. And you could do search, you could do image hosting, you could do video playing, audio playing, you know, all those different microservices.
Sam Brace: You’re controlling your own destiny when it comes to the technology that you’re using for the learning experience, which is something that we’re seeing a lot when it comes to headless CMSs, when it comes to the web presence.
So now it’s just kind of taking a lot of those [00:12:00] mindsets and saying it’s not just for the website, it’s also this other thing that we have managing the whole educational aspects of the company, which is cool to see that you guys are moving in that direction.
Jack Antico: No, it’s really cool. And headless, a lot of it’s taking control of your own destiny, and being able to develop features if there’s like an integration that’s really important to you because our platform is API first, you can just go out and build it instead of having to wait for us to build it. Kind of the trade off there is like, you know, with great power comes great responsibility. So because you have all this flexibility and customization, it’s kinda on you to be flexible and how to customize it.
That’s kind of the big thing that I think people need to be thinking about before they go headless. Is this worth it for my business? I think most of the time the answer’s yes, but not all the time.
Maribel Mullins: Jack, you mentioned customization. I know Sam mentioned Algolia, but what other microservices do you see people using with the LMS, the headless LMS?
Jack Antico: Yeah, I mean, we see all sorts of different types of microservices. At Thought Industries, we really like Airtable. We’ve been using Airtable [00:13:00] for a while, so for some like internal demos we’ve been, you know, playing around with the Airtable API.
Sam Brace: I think one thing that is interesting about this though is it’s a very similar experience to what we found with content management systems as well, is that, you have all of these developers, right?
And they’re all really excited about headless architecture, and it makes sense, right? Because it’s allowing for them to not say, Well, we can’t do this and this and this with this. It’s giving them all the access to the APIs that they would need to develop a really turnkey experience for learning. But the people that ultimately create the content are not the developers in most cases for these LMSs.
How do we marry the two together? How are you guys working to help explain the significance of this to the content creators or the educators that likely have never touched your APIs before?
Jack Antico: Yeah, it’s a great question. It’s definitely like a difficult handoff because you have two people kind of speaking like [00:14:00] two different languages. The technical and the non-technical folks. With headless, what it boils down to is just requirements. You can say yes to more, you know, is it possible to integrate with Contentful?
Yes. Is it possible to use a different languages engine? Yes. Is it possible to use different search? And then I think where the teams need to come together is like, well, yeah, it is possible, but like, is it worth it? And that’s a question that like, we can’t answer for customers. They kind of have to answer it themselves. If they want to spend their own internal developers time doing it, they can do that. Also because it is headless, a really nice option is you can hire a third party to code an integration or do stuff like that for you if your personal team doesn’t have bandwidth, which is really cool. But I think that is kind of the large conversation that teams need to have themselves internally, which we try to help facilitate as well.
Sam Brace: In my opinion, the move to headless requires development resources. It, it absolutely does.
And I think that’s one thing that sometimes gets missed [00:15:00] in these conversations because as we’re saying headless, it’s so helpful for developers. If you lack it, don’t just get excited by this buzzword. Like you have to have people that know how to do something with these APIs that are so flexible, right?
Let’s say I am a company and I have heard, Oh, I can have a headless LMS today. This is an exciting thing. What are the things that I should be planning for before I call Thought Industries or call another company and say, you know, let’s build it. What are the steps I need to have taken place? What could happen is people could talk to you and it’s putting the cart before the horse that they wanna go headless before they’re ready to go headless.
Jack Antico: So there’s like the actual content authoring itself, but then for the actual building of a learning instance or an LMS website, that’s where the technical piece comes in. So I think just having a plan for that ahead of time is, you know, do we have the developers for this? Do we have the budget to hire developers?
Something that I will say is the headless product that Thought Industries has is utilizing the MIT [00:16:00] open source license. So all the code for us is open source, which I think is really big because there’s lots of, you know, headless players out there who aren’t open source.
There’s lots of different tradeoffs with that. But we’re really happy that we’re open source. But part of being open source is that you’re able to utilize other open source tools such as Builder.io or other WYSIWYGs, which let you take in an open source framework and drag and drop different elements of it around.
So just because you know it’s headless doesn’t necessarily mean that we’re completely leaving the non-technical content creators or the business users behind, we still have, you know, support for them. They have to kind of go through different avenues to get there, but you know, it still is possible, but I think knowing which avenue you’re gonna take to build your learning instance or your LMS website before you purchase a headless LMS is definitely a conversation that you should be having.
Maribel Mullins: When I’m thinking of like a headless CMS system and developers who are involved in how they design it for websites and whatnot, do you have to have a special person to [00:17:00] create the front end of a LMS system? Does somebody have to have knowledge about that?
Jack Antico: There’s the classic problem of the designer to the developer handoff where the designer will make some Figma files, hand it off to a developer, and then the developer will create it, you know, create the code for it.
And then the designer will be like, Well, this isn’t anything like that I wanted to look like. That’s definitely a common problem. We’re trying to solve for that or, you know, help alleviate parts of that process. We have a Figma design library. So there are kind of ways to try to make that handoff easier, but there definitely will always be things that get lost in translation.
But trying to mitigate that is, you know, just part of doing business when you’re headless.
Jack Antico: I think it depends a lot on, you know, which headless LMS you’re trying to integrate with.
Us personally, we’re using TypeScript and GraphQL. Those are our core technology tools, so obviously having a familiarity with those tools would be beneficial. That being said, you know, headless comes all back to data, which is for us is powered through GraphQL.
I actually personally didn’t know GraphQL before I kind of began on this headless journey with Thought Industries. But it’s very easy to pick up if you’re like a programmer. It’s basically just SQL, but for APIs. Um, so I think those are kind of the two main things to look out for.
Sam Brace: I shouldn’t have to say to myself like, Oh no, I have to learn TypeScript and I have to learn GraphQL. What I should hear from what you just said is, you know, I don’t know what those [00:19:00] terms mean, but here’s what I do know is I can go ask my vendor that I wanna use. What do you think is important and make sure I’m weaving it into job requirements when I’m looking for that next developer, building a team or even looking for a partner to say, I need to be looking for a development shop that understands GraphQL through and through.
It will be easier to work with when it has to come with LMS implementation. Right?
Jack Antico: Yeah, exactly. And I mean, like, you know, we’re headless, so, you know, whatever head you choose, you can, that’s kind of what the technology you wanna search for. So if you want to build a Swift mobile app, you’re gonna wanna find a very good Swift developer.
Or if you’re very into AR and VR, you know, looking for a specific technology stack that fits your needs there. That’s kind of the beauty of headless is it’s so flexible.
Sam Brace: And, and it’s, it’s definitely a slippery slope that I’ve seen companies take with this because we’re saying like, hire good developers. But then what I’ve seen them do is they throw every single buzzword that they’ve ever heard attached to developers and they throw it all on. They’re like, “must know CSS and SQL.” It’s like, well, those are two different people and [00:20:00] it’s like, so I, I think it’s where like a little bit of vendor back and forth, a little bit of asking people around like, what did it take for you to go headless, will be helpful rather than just being like, find the best developers out there. Cause you’re gonna find a lot of shapes and sizes, right?
Jack Antico: Yeah, absolutely. We personally have five verified partners that we’ve vetted a little bit. And they each kind of have like a specialty, like one is very good with AR and VR, another is a very good design firm.
So we are trying to not just throw customers off the deep end and be like, All right, now go find someone to build this.
Sam Brace: But I think that that’s also a great thing to be asking is like, do you have people that you would readily wanna work with or that you recommend for us? If you’re seeing that it’s not possible to do it completely all in house. One of the other things that I wanna ask you about, as somebody that understands open source to an extent, and I can’t promise I’m the world’s utmost expert on this, but it is to say that one of the things I’ve seen with other situations where you’re readily contributing the code, it’s [00:21:00] attached to a GitHub repo or repository.
So is that gonna be the same case for what Thought Industries is doing with the LMS? Are you guys looking for people to be able to fork the code? Clone the code? Are you looking for PRs and pull requests for people to contribute to this? Or is that even something that is outside of the realm of what you guys are looking at for this type of headless endeavor?
Jack Antico: Yeah, no, we’d love pull requests. We’re definitely looking for people to contribute back to the repo. You know, our repo’s available right now on GitHub. And I think it’s really beneficial for the customer too because, say they like build an integration or some type of component or you know anything and they want it supported going forward, they don’t wanna fork the full repo because then they’re gonna lose out on all the updates that we bring to it.
But if they submit a pull request, and we’re working on making like a contributing guide, that’s kind of the standard is you have like a contributing guide for how people can go about making these pull requests. We’d love to get those into the platform because we’re not the only ones who, you know, write code.
And if someone writes a whole awesome feature for [00:22:00] headless LMS or any type of open source project, you know, why wouldn’t they wanna contribute it back to the repo?
Sam Brace: This is also helpful because you can make sure that it really is controlling your own destiny.
Because if you have development teams that are tied to this, they can be in regular conversation feedback loops with people that are writing and authoring these APIs that will be part of your headless environment. So I, I love the strategy. It makes a lot of sense to me on why to do that. I think that almost be if I was looking at a checklist of the things that I would want if I was building headless LMS, headless anything, I’d wanna have a way to have that feedback loop with the people that I’m gonna be using their APIs as part of my composable architecture.
Jack Antico: Yeah. I mean, it’s a pretty crazy idea if you think about it, versus the traditional SaaS model where, you know, other developers get direct access to the people writing the code.
We also have a Discord server where you can engage with our team, and then you get actually like, contribute code back. If you think about a SaaS, that’s a crazy idea. Imagine being able to launch a feature on like Instagram [00:23:00] that, like you yourself wrote, I would never think about doing that a million years, but because we are open source and we, you know, are headless, that kind of is a possibility.
Sam Brace: So thinking about this, so like I, I kind of have a checklist in my mind, like, okay, if I’m sitting here as a listener and I’m saying, okay, and now I’m starting to understand the things that I would have to make sure are done there, we’ve kind of covered the bases. The development team has to be able to understand how to use this API.
You have to have a development team. It’s a good idea to check to see what types of technologies are gonna be required to do this properly. Maybe investing into a type of solutions partner here. Is there anything else that’s like a big checklist item that I’ve maybe skirted over or is where you’re hearing it more from customers or maybe as your team is going through the planning processes that more customers or potential customers should be thinking about as they’re moving into the headless environment?
Jack Antico: So I think builder.io. What’s really cool about them is that they, I think, make it very easy for technical and non-technical teams to collaborate because they let you [00:24:00] register, I think it’s React components, so you can have your developers create these custom React components, which you know, are very custom. They have their own look and feel. Very unique. But then they also give the non-technical user access to these custom components that the developers have written, which they can then kind of drag around and customize through React props and, you know, various different methods of customization, which is really cool.
I think Builder’s really good there for that kind of handoff that we were talking about earlier, Sam. I mean, that’s not necessarily like the best use case for every team. Like if you have a team of a hundred percent developers, just make, you know, a React app or an Angular app. But if you have like kind of a mixed team, maybe, you know, Builder.io would be a better use case for you.
Sam Brace: Yeah. The team that’s authoring the content being separate from the team that’s developing the LMS, I kind of see that what you’re describing as almost like this middleman where they can ensure that the development team can get what they need, access to flexible environments, build a flexible environment, but content team isn’t stifled with the development of the [00:25:00] courses, the learning materials, the resources that they’re gonna be building either. It makes sense to why that would be something to be considering if you move to headless. And it sounds like from what you’re saying, Thought Industries is probably gonna start having some type of interaction more with these services like Builder, but it’s also one that there’s other players in the space, which we all love that can be also ones to be considering as you’re going through it, because as we’re saying with headless, you don’t have to be tied to any one vendor. You can say like, Oh well I like Stackbit, or I like what other ones that happen to be out there. And you can choose what you want for your visual experience too.
Jack Antico: Exactly, yeah. There’s tons of different open source tools. We’ve explored a lot of different options, which is really cool.
Maribel Mullins: From the viewpoint of the content authors, does their mindset have to change as far as going headless? Cuz I, like, in my head, I’m imagining like they’re providing content and, but now they know that for instance, it’s gonna go on AR/VR or it’s gonna go on mobile or something that maybe they have to change the way they lay out the content or the way they provide the content.
So is that [00:26:00] a mind shift or you think everything’s the same still?
Jack Antico: I think a quiz question is ultimately a quiz question. It’s gonna be like a multiple choice question with four choices. I don’t think that’s really gonna change a ton. And I think just because you have the actual content themselves, whether it be like quiz questions or text pages, they can actually change how those questions are displayed, are determined by the actual technology that you’re displaying them with. So I think that’s more on like the technical user to decide how to best do that versus the people actually like writing the content. But it’s definitely something where those teams would have to collaborate more closely on.
Cuz like if you are exposing more of a technology layer to the content authors, for them to understand some of the underlying parts, not all of it. We’re not asking [00:27:00] ’em to interact with an API in that way, but for them to understand like what are the moving components of their systems can be helpful.
Also I think Markdown is another like content authoring area that I would say people of both sides of the house should understand. And it would be very helpful when it comes to doing this type of decoupling to be like, okay, but our content team might have to author more things in Markdown than they ever had to. And that can actually be a really easy way to get things out. Maybe the quiz questions have a Markdown component to it compared to putting things into a text field or a dropdown list.
Jack Antico: Yeah, that totally makes sense. I’m actually so happy you brought that up, because that’s something that we’ve kind of been looking more into. And it’s an interesting use case, because if you actually look at like some API documentation for various websites, their entire documentation is written in Markdown because kind of Markdown’s the preferred tool for authoring more technical oriented documentation. Think about just like READMEs on GitHub. Those are all in Markdown. We’re actually supporting a really cool technology [00:28:00] called MDX, essentially Markdown and React kind of combined in one. And it’s kind of like the best of both worlds in many ways because it’s not super intimidating for non-technical users to learn.
There’s like kind of Markdown editors and stuff like that. But it’s also where technical users are very comfortable, just because that’s kind of like the go-to documentation, content tool for software engineers. I don’t know if it’s a very popular use case, but it’s definitely a use case that has a lot of value for a specific niche.
Sam Brace: But it is to say, Headless is ultimately a topic that is a very developer driven topic. So I think being able to say like, Hey, there’s some things that your content team might get pushed into some areas where we’re saying, Okay, I’m not immediately comfortable with this, but I’m gonna get more comfortable with it. Or how do we make sure that we’re finding the gaps between the two and getting them to get along in some ways? I think Markdown can be one where there’s lots of applicability, there’s lots of value to it, to understanding it.
And frankly, you might find the content team says, This is [00:29:00] easier to author content if we know how to do it this way. But to the same extent, if you not finding that, that’s where like the Builder.io’s of the world can come in, and they’re like, great, we can easily take all of this API data and create a nice layer to it so that they’re used to, text-based fields, drop down, sliders, all the things that are tied to typical user interfaces.
Jack Antico: And something I think we’ve talked a lot about is like, you know, headless data. You know, we talked a lot about like reading data. You also have the ability to write data so you can create update data. A very popular use case for the LMS world is if someone has like a tool that they’re very comfortable authoring content in and say they switched to Thought Industries or a different LMS, they would traditionally have to do some type of migration or manually copy and paste all their code into the new content authoring tool, which is a very painful experience. And then they have to learn a whole new content authoring flow. One of another advantages of switching to a headless LMS is that you don’t have to switch from where you’re authoring content. We kind of can meet you where you are as long as you just set up like the necessary [00:30:00] API connections to transfer that data, whether that be on like a weekly or a nightly basis.
But I think that’s one more use case and one more example of being able to go headless.
Sam Brace: It is helpful because I could see it where people are authoring things in a certain space, exactly as you said. They can keep their existing flow and the development team has created the underlying APIs. Literally nothing changes for the content team. We just keep doing as they are, and there is this whole new workflow that sends it to this new space, new area for it to live. That’s also highly exciting.
So Jack, we’ve unpacked this topic, I think fairly well. Obviously this is something where the conversations about headless, just to explain with our podcast shows how there is many different facets, many different aspects of ways to look at this and to understand with this because it’s a continually evolving topic within, as we’re saying, the visual economy.
But for someone like you, for also the overall team that you’re working with at Thought Industries, where do you [00:31:00] recommend for people to go to learn more? Not necessarily just about your product, but where are you staying up to the latest and greatest when it comes to what’s happening in your field and helping to drive maybe some of the roadmap or drive some of the initiatives that are happening with your company?
Jack Antico: Yeah, we definitely keep an eye on other open source CMS. There’s not really like another open source LMS that’s headless. But just looking at like open source trends in general, technology trends, whether that be like the latest, you know, React tools that are being released.
I think a new version of React was dropped recently. So I think just keeping up the trends there and then trying to support the latest technology is kind of where we’ve been looking the most.
Sam Brace: Excellent. Well, Jack. This has been fantastic. So for those that are like, Oh, I really think Jack was insightful, I would love to keep learning from him. Where can people follow you? Are you on LinkedIn? Are you on Twitter? Where can people go?
Jack Antico: Yeah, mostly on LinkedIn. I also have like a YouTube channel that I kind of maintain for like Thought Industries, LMS learning [00:32:00] stuff. So you could go there as well. It’s just Thought Industries on YouTube, and then LinkedIn I think my handle is just Jack Antico. But yeah. Thanks so much for having me on the show, Sam. It’s really great to be here.
Sam Brace: And Maribel, of course, first time. But you did great.
I’m so excited to have you here. And of course we’re gonna be hearing a lot more of Maribel for all of you better listening in future episodes.
If you had a great experience listening to me, Maribel, and Jack talk about all of these fun topics, make sure to like and subscribe on all the platforms where we happen to be on and where you happen to be, of course listening.
And on behalf of everybody here at Cloudinary and the team that’s tied to MX Matters, thank you for listening and we hope to see you at the next one.
Connecting Cellists Globally Fullstack with Python, D3.js and Cloudinary
In classical music, knowing the people you have trained with has a lot of value! This is why Cori Lint, software engineer at Ovia Health, developed Cello Tree – a directory of cellists to show their relationships to each other. Becky and Jen on Cloudinary’s Customer Education team sit down with Cori to learn more about the project and its underlying technologies, which include Python, D3.js and Cloudinary. If you are looking to develop a side project about your passions, this is definitely a DevJams episode you won’t want to miss!
Becky Peltz: [00:00:00] Hey, welcome to Cloudinary DevJams. I’m Becky Peltz, my usual partner in this endeavor, Sam Brace, isn’t here today. Instead, I’m joined by Jen Brissman, our developer education instructional designer and more. Fun fact about Jen is that she was a guest on this show last year, and now she’s co-hosting. So I’m going to let Jen introduce our guest, Cori Lint, because they attended bootcamp together. So Jen?
Jen Brissman: Yes. Hi, thanks for the intro Becky. Welcome to Cori Lint. We went to Hackbright Academy Boot Camp together and now we have her today on the show, now as a software engineer at Ovia Health and she’s going to be talking about a project she built called Cello Tree. We’re so excited to have you, Cori.
Thank you so much for being here.
Cori Lint: Yeah, hi. I’m so excited to be here and it’s really fun to be here with Jen and also Becky, I met you more recently, but thanks so much for having me on. [00:01:00]
Becky Peltz: Oh, you have a wonderful project and I know you guys are in Artist Who Code. Maybe you can say a little about that.
There’s probably other artists out there that might be interested.
Jen Brissman: Yeah, definitely. Artists Who Code is a community that Cori and I are in, and Cori is actually, her role is Director of Artist Who Code. And I’m the Director of Mentorship at Artist Who Code. And this is a cool segue into the project we’ll be talking about today, because Cori’s app is called Cello Tree, and this is probably because she’s a cellist and also a software engineer.
So Cori, if you want to introduce yourself a bit and also talk about your history as an artist and also what prompted you to get into software engineering. And then we’ll get into your project.
Cori Lint: Sure. Yeah. I guess starting way back when I was a child, I started playing piano and cello and my whole family are either professional or amateur musicians.
So it was just kind of something we did. And as I grew up, I guess I was good at it. I was [00:02:00] successful in it. I also had a lot of other interests, but it just happened to be the thing that I pursued. I loved it. It was fun. I went to University of Michigan, got my cello degree there.
And then after a few years of freelancing, I got to play with some amazing people. Had a lot of fun doing that. I worked on cruise ships with a string quartet for a while, so it took me literally all over the world, which was amazing. And then after a few years, I was in my mid twenties and I was like, I really want that steady paycheck, slow life down a little bit, have a bit more stability.
So I went into the other side of the business, which was administration. So I got into specifically orchestra administration. Also got to work with some amazing people, some amazing orchestras, including the Cleveland Orchestra and the Florida Orchestra. And all throughout this time, I was still playing cello as well, so it’s definitely stayed a part of my life.
And then as far as how I got into software engineering, it’s funny cause it was right before that pandemic time, where a lot of people [00:03:00] started reevaluating their life plan and what they were doing. Especially people that were in the arts world who suddenly, their work just was gone.
A lot of people are like, I’ve never thought of what else I would do. And I had about a six month start on that. So I was a bit just burned out by the orchestra industry. It’s a lot of work. It’s like every day and the pay is not great. The industry is a bit like slow, in the way that software is very like innovative and moves quickly.
The orchestra world is almost the opposite of that, at least that was my experience. And sometimes it was a bit frustrating and I was just ready for a big change. So I looked at a bunch of different things, but I had a friend who had learned software development and had a really successful career just through free online programming, like freeCodeCamp. Big shout out to freeCodeCamp.
So that’s actually where started, yeah. Yeah. An amazing resource and actually has been developed so much more even since I used it. But that’s where I started and I was like, hey, this is actually kind of [00:04:00] fun. And I feel like this actually really suits, like how my brain works . And it’s also strangely enough, even more creative in some ways than doing music.
That was a circuitous route to where I am now too. So I, I started just learning on my own. I got a web development job, so just spinning up websites, mostly WordPress based websites where we would do a lot of customization. This was for a marketing agency.
And after doing that, I was like, I’m really interested in like what’s happening behind the scenes, what’s happening with this data when I submit this form, what’s going on back there that I just sort of take for granted that happens auto magically, as people at my company like to say.
So I decided to go to Hackbright Academy, as Jen mentioned earlier. It’s a coding boot camp that’s focused on gender diversity, which is really cool thing about it. And it’s based in San Francisco, but I attended the virtual option and yeah, finished that. Did a lot of algorithm drilling and studying and job applications and after a few months, [00:05:00] I ended up at the job where I am now and I’m coming up on my one year anniversary there.
So, congratulations. Yeah, long journey .
Becky Peltz: Thank you. Yeah. Now that’s wonderful though, how you took an interest and then you pursued it online and then now you’re actually, it is your profession, so yeah.
Jen Brissman: Absolutely. Well, Cori, tell us a little bit about yourself as a developer and the languages you work with now versus maybe the first ones you learned.
So all of these things like interact together really nicely, especially with SQLAlchemy, which we can talk about later too. But that was my stack there was basically Python, Flask, SQLAlchemy, and now, yeah, back to PHP. So full circle, I guess.
Becky Peltz: That’s awesome. Yeah. That’s a good language to learn.
I mean, given that, you know, WordPress is like, I don’t know, is it 40% of all of, that’s what they say? Definitely a good thing to know.
Jen Brissman: One other question I was interested in is how you learn and just if you wanted to share the way you learn best.
Cori Lint: Sure. I would say at work, so I came in as sort of a traditionally what would be a software engineer one or a junior or even apprentice type employee. So it was expected that I would learn a lot on the job, which is amazing and I have the perfect environment at Ovia Health to do that.
But I would say I probably learn [00:07:00] most from direct feedback like we require two code reviews on all of our PRs. We’re supposed to review two PRs to every one PR that we put up, that kind of thing. So I would say it’s a combo of direct feedback on my work, which I try to apply and just build on every time.
If I get feedback about one specific thing in this PR the next time I try to remember that, and then maybe I’ll get more feedback, just continually building on that, the 1% better thing. And then also seeing feedback on other people’s code, I mean, sometimes the code of senior engineers feels a bit over my head or it’s just I have to like, learn a whole system to like even figure out what’s going on in their PR and that can be a bit daunting. But the strategy that I’ve taken more recently is just to get in there and start asking questions, like what would I ask if I were working on this?
Like, why is this happening? Why did you use this instead of this? And those kinds of things. And that’s been a huge help in my learning [00:08:00] too.
Becky Peltz: I think on the job learning for coding is really the way to go. It’s because you’re going to get exposed to so many different ways from your different coworkers, and it’s stuff that works and it’s in production and it’s just a really good way to learn.
Cori Lint: Yeah. Yeah, exactly.
Jen Brissman: Absolutely. Well, I think that’s a great transition into talking about your project because your project is something you built solo. You weren’t working on a team. This was Cori’s project. Cello Tree is your baby that came from your brain, and we’re really interested in hearing about it today.
So let’s talk about it. Tell us a bit about it.
Cori Lint: Yeah, it’s funny that you mentioned that this is my project, it was all me, because it’s so different from the enterprise code base that I work on now, and I’m sure every coding boot camper experiences this. The move from this like tiny little thing that you think is, is everything like this full stack project to this code base that’s just like absolutely monstrous.
It’s just such a different experience. But, so yeah, just to introduce [00:09:00] Cello Tree, which I often describe as like the nerdiest project ever, but I say it in an enduring way, like I love this stuff. So I am a cellist, I play cello and I had the idea to create a family tree of cellists and spoiler alert for later, I wasn’t the first person to think of this.
But I hadn’t heard of it before. When you’re going through the classical music education, who your teacher is, is probably the most important credential there is. Maybe even more than where you went to school, because really you go to school for the teacher. I went to University of Michigan for my teacher, Professor Elliot.
So, sometimes, it’s as specific as like a certain way that a person is holding their instrument can identify like which teacher they worked with that has huge influence on how they play and even their career and things like that. So, my teacher, Tony Elliott, would always talk about how my cello grandfather was Janos Starker.
[00:10:00] And most people in the classical world would know that name. He’s like an iconic cellist. Lots of stories about him smoking cigars during his lessons and things like this, like just absolutely iconic. So my teacher would always refer to him as my cello grandfather, and that sort of stayed on my mind.
And I, I always thought that was kind of funny. And then I also worked for this cello festival in Dallas called the Lev Aronson Cello Festival. Just this amazing story of this cellist who, basically was forced to immigrate from Europe. He lost his family, he lost his cellos in the Holocaust.
Terrible story. But he came to Dallas of all places and quickly became the principal cello there. And his students went on to be some of the most like successful cellists of the 20th century. And he just had great influence on generations of cellists afterward. So this really just stayed in my mind of his legacy idea, like who we learned from, and I’ve even heard that in other professions.
[00:11:00] The medical profession there, there’s a similar like lineage type of thing. I just thought, how fun would it be to see if like Yo-yo Ma is like my cello cousin or something like that. So that was the origin of the project. I visualized having this giant like family tree that you could like click around and stuff and yeah, I still have this idea in my mind where it started and then of course, what it looks like is never what you imagined.
But I think I did a pretty good job executing in the end.
Becky Peltz: Oh, you have some really interesting things in there so.
Cori Lint: Oh, thanks.
Jen Brissman: Yeah. Yeah. So this idea that was in your brain, you visualized it and then now you built it. So can you give this a preview? Show us the functionality?
Cori Lint: Yeah. Yes. I’ll take you on a little tour.
I have to just, I have to just give the disclaimer that this was a student project, I built it all myself. A lot of these things I was just learning. So no judgment on [00:12:00] those kinds of things. But like I would love some rounded corners in here, but it’s fine. So I guess this is the mission statement.
Discover your cello family, honor their stories, connect with the community. That was like the whole idea behind it. Like I mentioned, the family tree was like the core idea here. It turned into something else, as well. So these are all of the cellists that I have in my sort of fake local database, when I built the project. Oh, there’s me.
In here, if you want to go in and search my professor that I mentioned, Tony Elliott. You can just search him and he comes up there. We can go look at his profile. So yeah, whereas the tree was the initial idea, it also became like directory of cellists almost.
So, obviously we have some info about Mr. Elliot here, including about his cello because cellist instruments are like a really important part of their sort of identity as a musician. We have the tree, which I’ll maybe come back to in a little bit because I think that’s the most interesting, [00:13:00] little bio section.
This forum, which is really just like comments. So I can add like, this is my teacher, and add that comment and it dynamically renders, and then I can go in and upvote some other comments.
Becky Peltz: That’s a great insight into the world of cello, in addition to, with a lot of interesting components here.
It’s just neat to see what are the details that are of interest to cellists.
Cori Lint: So, exactly, exactly.
Becky Peltz: You’ve got a lot here and so you’ve got some multimedia, you’ve got images, and I see a listen now. Mm-hmm, are you using Cloudinary here?
Cori Lint: Yes, I am indeed. So all of my image storage is through Cloudinary, and I can walk you through how that works too in a bit.
When we look at the code, but yeah, that was a great asset to the project. And then this was my MVP version, where it’s just a link, a hyperlink. Okay. But someday I would love to [00:14:00] have this be like a Spotify widget or something like, that would be really cool.
Becky Peltz: Yeah, yeah. Well that tree is really neat and I know you’ve got a lot going into that. Are you going to talk more about that?
Cori Lint: That’s really, yeah. Let’s talk about that. So I guess I’ll show you from a user perspective before I get into like the technical aspects, but so this is obviously the profile that we’re on. To the left is teachers, to the right is students.
And I would like to represent that better someday. Actually this is my cello grandfather that I was talking about. You can just see from his face.
Becky Peltz: He looks a little bit mischievous. Exactly.
Cori Lint: So now that we’re on his profile, it shows his teacher, I just have one in here.
I’m sure he had many, but it shows his teacher here. We can navigate there. It goes to his profile. Back to Mr. Starker, that has his students here. What if I show you, let’s add a student that already exists. Let’s say we’re looking for someone to add and we think they already [00:15:00] exist in this database, so let’s put Sujari Britt, and the tree just regenerates and it adds for, as one of the children or the students.
We can do the same thing with the teacher. So bam, there it is. And then if we don’t see someone in this tree that we’re looking for, I guess this is the other feature of this whole thing is we can add someone to the database. Oh yeah, and I have a note here to check that they’re not already here.
So this just goes back to this all cellist page. So let’s say I want to add like Yoyo Ma. Okay. So looks like he’s not in there. So then we can click, add cellist. Everybody knows this guy, right? Probably the household name of all cellists. Yep, so we’ll drop in his instrument information.
One of the cool things about these instruments is like, these things cost gazillions of dollars.
Becky Peltz: I’m amazed at the age too. I mean, 1733, I noticed the last one [00:16:00] was from the seventeen hundreds.
Cori Lint: Just, yep. So this is where Cloudinary comes into play. When I add this, obviously not when I add the image, although I would love to add like a widget here, that’s really nice, kind of like it’s on the Cloudinary Media Library.
But for now it’s just this HTML element. But I won’t put in a link. But when I hit submit, all of these things are going to fire off between the front end, the back end, back to the front end, including a call to Cloudinary to upload this photo and store it and return a link to me, so it will display.
Yeah, so he’s been added and there’s this photo, which is stored now up in Cloudinary.
Jen Brissman: That’s really fantastic. And also, Cori, what happens if you don’t have a photo for the cellist?
Cori Lint: Great question. Let’s add somebody, Jen, you’re a cellist now. We’re not going to give you any info. We’re just going to put your name and no photo.
[00:17:00] So this is actually something I learned more recently when I was updating the project was that, you can have like a default or let’s see, I added a default photo to my media library, so I’m actually just pulling this. The logic is such that instead of saving a photo up there, it’s actually retrieving information about a photo that’s already in my media library.
So I added Jen and it’s just this default cello photo that I decided.
Becky Peltz: Well it’s a very easy to use interface, like the flow that you’re showing, you’re not going to get stuck and go, how do I get back to that thing I was doing before? You know, which is always.
Jen Brissman: Yeah. And Cori, I wanted to ask you too about your data model and how you visualize the relationships between the teachers and the students, that seems complicated.
Becky Peltz: If anybody is familiar with family trees, you’ve got a lot of very complex relationships that you’re trying to.
Cori Lint: Oh, this was like, the most interesting, the most infuriating, like the most tears, but ultimately [00:18:00] I think like the most interesting thing about the project. Let me go back to, this is actually one of my other teachers, Martha.
So again, just from the user perspective, before I get too into like the code, the way this is organized in the back is actually. This is one tree over here, with Martha as the root node. And then this is another tree with Martha also as the root node. So what I did is create a proxy root node, and I added the children of one and the children of the other to the same fake root node essentially.
So this is actually two trees, one to the right and one to the left. So the way that’s organized in my data model, this was crazy to figure out because I was thinking in terms of students, teachers. Teachers, students. Okay. A teacher can have many students. We can also have many teachers. A student can have, you know, and just back and [00:19:00] forth.
Yeah, yeah, yeah. It got a bit tangled, and then one day it just clicked and I was like, wait, okay. They’re all just cellists. They’re teachers and students, but really they’re all just people. And I can just say a cellist can have students and it can have teachers, and so rather than creating like a teacher and student table, I just created a cellist table.
And then this one links here, it’s called a junction table or bridge.
Becky Peltz: Many to many relationships, right?
Cori Lint: Yes, exactly. So all it does, it doesn’t really hold like meaningful information. It just links the two tables, which in this case is one table.
So it’s a little bit weird.
Does that make sense?
Jen Brissman: Yeah a really complicated relationship. And many relationships going different directions, but this does make sense and I feel like this has to be the most interesting part of the tree and how you made it all work.
Cori Lint: Yeah, yeah, definitely, pretty fun.
Becky Peltz: It’s a nice looking diagram too. What did you use for that?
Cori Lint: Oh my god. You know what? I’m going to have to get back to you and we can put a link or [00:20:00] something, because I cannot remember and I was trying to find it, but I’ll find it. Yeah, I love how this looks. It’s very pleasing to me.
Jen Brissman: Yeah, I love it too. I’m looking up the name of it. We should share it in the resources for this episode, because I’ve used this same data modeling resource and I’m forgetting the name too. And it’s fantastic and easy to use.
Okay, cool. Well, Cori, let’s take a look at your code and see how you made everything.
Cori Lint: Yeah. What would you like to talk about first?
Becky Peltz: Well, I’m interested in how you worked on your front end here. Because you’ve got a really nice flow. You must have been thinking in terms of pages and components and things.
Cori Lint: Yeah. We put a lot of work into the planning stage, like a week out of a six week project or something like that. And I thought it was overkill, but then when I actually got to the development of it, I was like, oh, this was like not even enough. And I use that in my current work too, the planning is everything.
So anyway, I had that going for me when I got into the code. Let’s see. Let me [00:21:00] show you how we basically walk through getting that image from the form that we submit. Okay, I’ll do that. That’s an interesting one.
Becky Peltz: I can see your model there, that you have an image URL. So I’m guessing that you’re storing there.
So we’re naming our files property that we’re getting from that form, which I actually just learned this. I’d always thought of the files property from a form as an array, but it’s actually just an element. So it’s an object [00:22:00] essentially. So we’re calling those files that we grab are media files and then we’re sending those to our function upload media.
And we’re going to wait for the response of this upload media function before we move on. So I’ll show you that. Just right up here. So this right, upload media. We’re passing in a parameter of files. So we’re going to have a default endpoint here called use default image. So that’s exactly what I was showing you when I added Jen to our database.
We didn’t add a photo, so this is our default endpoint. Grabbing the form data or creating new form data to send to that endpoint. So here this is my MVP version, we have the option to add one image, zero or one. So in this case, if we have one image, I’ll take that out.
Our endpoint is going to be upload media instead of the default endpoint. We’re going to reference the first of that one file. And then we’re going to append the information from [00:23:00] that file to the data that we’re sending to this endpoint. So we’ve got our endpoint, which is either default image or upload media.
And then we’ve got a post request and we’ve got our upload data, which has that file attached, if there is one. So I’ll show you these end points.
Becky Peltz: So now you’re going to your back end, your Flask, and Python.
Cori Lint: Exactly, yep. And I love how clean the Flask backend is, it makes it so easy to look at.
Yeah. This view function is going to handle a post request to this route, essentially. So if there’s no image attached, again, super simple. Use the Cloudinary API to grab a resource that has a public ID of cello tree default. And I set that, I uploaded that into my media library from the dashboard.
And I just called it cello tree default. So this is going to return this JSON object of all the [00:24:00] attributes. Yeah, all the attributes of this image. So I can do so much more with this, but all I’m doing in this case is just grabbing the URL when that comes back. So that’s the default version.
Becky Peltz: Well, that’s the unknown image that you don’t have to upload. Yes. You’re just going to use for default. Yeah.
Cori Lint: Exactly. And if I did upload an image, I’m going to hit this end point. And with that, I’m going to use this uploader upload method, also from the Cloudinary API or I guess, Python SDK, which I was happy to find out there was.
And again, that’s just going to upload it to the cloud and then it’s going to return the attributes of the image. I put this to do here because I thought this was so interesting that there’s actually
like a quality set to true when you do the upload, and then it, it gives you like a quality score. So you could even show, I think this is my understanding from just reading the docs.
Becky Peltz: Yeah, there is a way that [00:25:00] you can have it return information about the quality, like if it’s fuzzy or something, you know?
Cori Lint: Right. I thought that would be great because then on the form, you could even just display a little error validation thing that says, please upload a better quality photo so the website doesn’t look like crap.
Becky Peltz: I mean, and like you could, if you were expecting a face for example, you could have it checked to make sure there was a face.
Like if you upload a chair, you could say, only take it if it’s a face. So yeah. That is nice to have a little bit of built in AI there.
Cori Lint: Yeah, that would be super helpful. So yeah, those basically return the same just attributes about the file and then that’s what we’re going to reference.
We’re awaiting that response from one of those backend functions and returning it back to here. So this is our response. And yeah, this is basically an end. This is the form data that we’re going to take and we’re going to throw it again to the back end and say, here, store this stuff as a new cellist and the part that we’re using [00:26:00] from the responses is that URL.
So then when the profile page is displayed, it’s just displaying it from that URL, which is now storing Cloudinary. So, pretty cool.
Becky Peltz: Very nice, yeah.
Jen Brissman: So how did you figure out the call to the Cloudinary API for upload? Were you always doing it this way, or, how did you kind of start out?
Cori Lint: Good question. At the time I was actually doing the Cloudinary call on the front end.
More recently, I mean, it was just so much easier because I have so much more [00:27:00] experience, but also I decided to move it to the back end and it was just that much easier. So you saw back here, it’s just these really simple, built-in methods. I can go to the docs and say, okay, I’m using Python.
There’s a Python SDK, I can find the code in Python, which is awesome. Just grab it and look at what the documentation tells me that it’s going to return. And that’s actually what showed me like all these options about quality and the one Becky mentioned about faces and things like that. So yeah, really just referencing documentation, maybe looking at other projects on GitHub that use it, that kind of thing.
Becky Peltz: I think you’re wise to move all of that thing, all of that to the backend because you will get a signed upload, because it will be using your security credentials when you’re on the back end. Like you wouldn’t be able to really do that on the front end. Exactly. In general, this is the way to go. You could start with something on the front end, get it going, but then get it more secure by [00:28:00] moving it to the back end.
Cori Lint: Right.
Jen Brissman: How does your crud file work to update your database, and what do you save about the image in your database that you can then pull from?
Cori Lint: Sure. This is a funny file because the way I would have organized all of this now, knowing what I know about object-oriented programming and everything, this would be very different.
Like these methods would belong with the class for post, that kind of thing. But what I did is just throw all of my helper functions into this crud file. Anything that does a crud function goes here. So I guess we’re looking for create cellist.
There you go. So, what’s happening here is I have a class, actually I should show you that class is probably where to start. So this is model, look for my cellist.
Becky Peltz: This is where you get into SQLAlchemy ORM, is that what you’re using? Object relation mapper? Exactly.
Cori Lint: Yeah. And I love this cause [00:29:00] again, I just feel like it’s so clean to look at and it’s also just really straightforward both for learning and just like if you want to whip something up really quickly, it’s simple.
We’re saying this is a class cellist and that translates directly to a table called cellist. So this functions is both as my data model and I can just code all of the tables out right there, instead of actually using SQL which is really nice. SQLAlchemy does all of the sort of translation in the background for me, which is nice. So these are my columns. Each of these is a column. Each of these is a column.
So what I’m doing in my crud file when I create a cellist is I’m just instantiating an object from that cellist class. So whenever I pass all of that data that I put in the form or the user put in the form to the back end, I’m calling this function and I’m saying, okay, I’ve already grabbed all these things from the form.
That’s what I’m passing in. So then I’m just [00:30:00] creating a new object based on all of that information. And then, adding and committing it, just bam, like that. And then I’m returning the cello object, so then I can reference all of the information that I added.
Becky Peltz: Well, it makes for some really clean code.
Like it’s nice, like you probably worked on this a while ago, but you can come back and read it and know where you were. Exactly. Yeah. I also noticed when you’re calling these from the front end, you’re using async await, so yes, want to talk about that a little?
Cori Lint: Sure. That was actually brand new to me when I think this was the first or this was the first async function that I ever wrote,
Becky Peltz: But you’re taking advantage of promises, which Cloudinary can return for you so that you don’t for your error handling and stuff.
Cori Lint: Yeah, exactly. And I didn’t deal with error handling at all here, which I realized when I was working on more development recently.
Oh, what? Nothing happens if I, I have a server [00:31:00] error, so it doesn’t work very well. But yeah, this async function is, there are several different levels that I’m waiting on, essentially waiting for a response from the backend, waiting for a response from Cloudinary, waiting for a response from this function.
So yeah, there’s actually like three levels of await going on here.
Becky Peltz: It would get very messy if you were using callbacks. You’d have a lot of these callbacks. So this keeps it really clean.
Cori Lint: Yeah, Yeah, yeah, definitely really useful.
Jen Brissman: So is Cloudinary the only cloud service you’re using, and also, what did you think of using Cloudinary?
Cori Lint: So Cloudinary it’s the only one I’m using in this project. At work, we do use like AWS. But yeah, in this project and really in my development up to this point, this was the only cloud service I had used. I found Cloudinary pretty simple, especially the second time around.
Now that I have more development experience. For me, I’m like really big on documentation, both writing it and consulting it. And [00:32:00] so I think how good an API is really for me depends on its documentation. Can I find what I need to find easily? Does it make sense? Is it easy to read? Are there code examples?
That’s a big one for me too cause sometimes I have to be able to actually walk through it. And actually the Python code in the Cloudinary docs I thought was set up really nicely because it’s not just like, oh, you can use this piece or you can use this piece. It actually had you go ahead and create the environment variable that you needed for your account.
Lay out like three or four different functions and then run the whole file. So you’re actually seeing like the entire sort of life cycle of what you need to be doing. And you’re like, oh okay, this makes sense. Now I know how to apply it to my project, versus just pulling out like one or two functions.
So I did end up just using two methods, but now I feel like I have a much better sense of how the whole thing works in a big picture way.
Becky Peltz: You used the upload API for your upload and you used the [00:33:00] admin API to get their default image and basically those are our two main APIs.
Those are the two big crud APIs anyway. Yeah. So you’ve tackled both of them. Yeah.
Jen Brissman: Is there anything else that you would want to add to your project media wise and anything you could see changing in the future?
Cori Lint: Yeah, I feel like there’s so much potential here. If I look at, for example, I mentioned before like this listen now button would be nice to have Spotify widget or something like that.
But I was also thinking what if users could upload photos of, this is me with Martha when I was 15 at this competition or something. Maybe this is a profile, but what if there’s a gallery here of like photos from students or something like that. Yeah. I also thought obviously music gets performance, so video and audio is really important.
So I thought having obviously just the capability to upload and store video and retrieve it would be really nice, and then audio as well. I thought it would be cool [00:34:00] maybe eventually in addition to these comments to have like audio stories or something like someone could go in and be like, oh, I have this great story about Janos Sharker smoking a cigar during my audition or something, you know?
Yeah. These are the kind of things that we love to share. Like we all have endearing or funny stories about our teachers, so I thought that would also be just a really nice way to share their legacy and the things that they taught as well.
So yeah, audio, video, multiple photo uploads, that kind of thing would be really nice.
Becky Peltz: Yeah. If I have one thing, then, I don’t know how much time we have left here, but I would really like to see how you did your tree in the front end. I know you used special libraries.
Cori Lint: Yeah. Yes. Oh, it’s kind of a beast, but I’ll give you the tldr. So wait, let find that. There it is. tree class. Okay, let me minimize some things in here. I should first talk about probably the [00:35:00] library that I use, which is d3: data driven documents. And a lot of my bootcamp classmates were using Chart.js, which is actually really cool, really nice looking, easy to use, easy to reference.
And I quickly realized that it was like, it just didn’t have the capabilities of my project. So actually, let me show you something that I was looking at on D3. This is kind of what I pictured in the beginning is like a giant tree that you could, you know, navigate through.
But even this doesn’t cover the many to many. This is still just a one to many. That’s right. Yeah. Yeah. So I should actually show you this other project that I just think is amazing, and this was also on my mind when I was developing. So this is like you search an artist that you like.
But I absolutely love this. So this shows like, the closer in proximity they are to the artists that you searched, the more similar they are.
I don’t know how they figured that out.
Jen Brissman: l love how Betty Davis and Janelle Monae I guess are closer than we all thought.[00:36:00]
Cori Lint: Who knew? So these were just ideas, things that were on my mind. I searched the internet to find like an example of something that made sense.
And what I finally found was this like pedigree or literally family tree option by this user on GitHub. So many thanks to them for contributing this idea, which I really borrowed pretty heavily from the whole idea of the using one root node, but actually having two trees. That idea came from this person’s project.
So this file is really just here are the classes, here are the relevant methods. So here’s a tree class, here’s what children are, here’s what data are, here’s how to draw the lines that connect the different nodes, draw the nodes, and you notice that when we added someone to the tree, the whole thing would sort of regenerate.
So every time you do that, it refreshes, it redraws the entire tree.
Becky Peltz: Like listening [00:37:00] for an event kind of to, to let it know.
Cori Lint: Yes, exactly. Yeah, this was pretty old.
I think when I found this. It was four or five years old or something. It still works great, but it’s using like a, I think D3 is on version seven and this is like version three or something. Oh great. So it definitely could use an update, which I wasn’t quite ready for at the time.
But yeah, it works great. It is super fast. I did a bunch of customization too, like I could have gone forever with the customization. I was just starting to get my head around everything that I could do because it dynamically generates everything, so you can make things, whatever color or size you want and yeah, just so many possibilities there so.
Becky Peltz: Yeah. I’m kind of curious if it would perform well if you were to stick a little image in each one of those. I think you could cause you could optimize the images and that would be kind of cool to just see all the people.
Cori Lint: It would. So many possibilities. I [00:38:00] would love for there to be that like giant tree that I had in mind. I don’t know what that looks like, but it would be really cool.
Jen Brissman: So Cori, do you have any next steps for Cello Tree in mind?
Cori Lint: Actually, I’ve mentioned a few with the different media options and of course there’s so much. But I do have to mention something really cool happened. As I was talking about this project, actually, I think it was someone through in Artists Who Code. I was talking about this project.
I shared my demo video and like I said, like, we’re big nerds, right? So cello nerds. So someone reached out to me and was like, hey, did you know that someone else actually built something like this like many years ago, like early two thousands or something.
They pointed me to it and it actually is not live anymore. But I did a little bit of digging. I found the person who created it, and weirdly enough we even share a birthday, so it is meant to be. Wow. His name’s Carol, and he lives in the Netherlands. He’s a cellist and a self-proclaimed nerd.
So he [00:39:00] had this website, it was essentially very similar to my project without the data visualization, but he has a database of over 1200, I think it’s actually more like 2000 cellists. Oh. And their relationships to each other, like exactly what I was doing. So I would love to migrate all of that data into my project.
Also would be a fun scripting project to figure out how to do that. But he actually said, I reached out to him, we chatted a little bit. He was like, your project looks so cool. Like, I was always sad that I had to take my website down, you know? So yeah, I definitely want to do that in the future, integrate all of that new data and like really flesh out my project with some more data.
Jen Brissman: So he just willingly shared all of his data with you and said, run with it. You can do it.
Cori Lint: Yeah, I was kind of shocked. I was kind of shocked actually. But I think it was just like the connection that we had by being cellists, being little bit of techy nerds, having the same birthday, like I said, it was meant to be.
Jen Brissman: Cori, this is amazing. You built this project in the course of what, a few [00:40:00] weeks?
Cori Lint: Yeah, five or six weeks, I think.
Jen Brissman: Wow, so that’s amazing. And I just wanted to ask you, what was it like bringing together your skills as an artist with your skills as a software engineer and exploring what that looked like together?
Cori Lint: Yeah, we could seriously spend a whole podcast talking about, music or arts skills and how they lend themselves well to software, specifically software development, but a lot of other things too. But more briefly, for one thing, as a musician, you spend a lot of time inside, at least a classical musician, inside the four walls of a tiny six by six practice room.
Very self-driven, very focused time. I think there’s so many parallels between learning a piece of music and either learning a new coding language or building a coding project. Just the sort of exploration phase.
The just getting the mechanics to work, getting from point A to point B, and then more efficiently and more beautifully. There’s so many [00:41:00] parallels there. I think as a musician, I learned, yeah, focus, self-motivation, attention to detail, how to communicate with other people because yeah, you spend a lot of time inside a practice room, but you also spend a lot of time playing with other people.
Like I worked with a string quartet professionally for a couple of years and like working really closely on a team, making decisions together, those sort of soft skills as well. But it’s funny because I’m a cello substitute, so they call me up if, you know somebody can’t play the concert or whatever. And sometimes I go back and play and other cellists are like, oh, what are you up to now? And oh, I’m, you know, a software developer and a lot of them are just absolutely shocked and say things like, oh, you must be so smart, or I could never do that.
And I’m like, I don’t think you realize how, if I can do this, anybody can do this. Maybe not anybody, but somebody with the type of drive and attention and just mastery of a skill like that. I have no doubt in my mind that they’re not only smart enough, but have so many other [00:42:00] skills to contribute that maybe people even from technical backgrounds might not have as much.
So yeah, there’s a lot to cover there for sure. But yeah, it’s been a really interesting experience and I feel like it’s actually given me. Yeah, I’m not a genius. I’m not Steve Jobs. I’m not going to be maybe the best developer at my company. I’m like a year in. But I think I have all of these other things that I can offer that in part, were very much developed by my music career.
Jen Brissman: Yeah. And probably things like empathy and other soft skills that you have make you a better developer, make you a better teammate, and make you able to collaborate in a better way and maybe learn quicker and just be a contributor. So yeah, and so I know, obviously I know personally because I’m in Artists Who Code as well, but I didn’t know if you wanted to chat about Artists Who Code before we sign off or mention how that’s impacted your journey into the tech space.
Cori Lint: Yeah, absolutely. A lot of what I just said, I’ve had the words for it [00:43:00] because I’ve had these amazing conversations with other people in the same space. It’s an interesting group. I would say it’s like maybe half support and half advocacy. So we do need a lot of support when we’re making these career transitions.
People in the arts, it’s our life, it’s our identity. And when we move into something else, there’s this like sense of, of loss, of almost grief, of like identity crisis, like that kind of thing. There’s also just the, how do I make a resume, cause that like maybe we have our arts resume, but what does a technical resume look like?
I have no idea. What’s LinkedIn like? Not everybody, but a lot of us don’t have that really basic knowledge. So there’s the support for folks that are wanting to make the transition. And then also for folks that are in the tech industry who maybe just want to be around people like them.
And then on the other side, there’s this advocacy piece that’s like, recruiters may look at [00:44:00] a resume and be like, okay, you have orchestra experience. That’s totally unrelated, right? But, if they understand like the type of people we’re talking about, they might realize that these people are very high empathy, very creative, very good communicators.
So if we educate the public on these skills that artists already have, it might make that pathway just a little bit easier for them. And I think it will really enrich the tech industry. Just this new wave of like very empathetic and creative people. I think that’s always a good thing.
Jen Brissman: So, Cori, tell us a bit about where you work now and the stack that you work with, the languages that you use primarily.
Cori Lint: Sure. So I work for Ovia Health. It’s a health data company. Basically, we have apps for fertility, pregnancy, and parenting, which is really cool. It’s always nice to work for a company that makes a product that I can actually explain to people.
Yeah, it’s not so esoteric. I love their product [00:45:00] and I get to work on really fun features like logging a child height or birth control logging, or right now we’re actually working on some stuff for inclusivity around the app experience. I’m not sure if I can talk about specifics, but that’s really nice to be working on as well.
Ovia was actually acquired by LabCorp last year, but it’s nice because we maintain the close knit culture still feels like sort of startup, the good parts of startup culture where we’re all very close and very kind and yeah. It’s a great place to work. As far as the tech stack, we mainly use PHP, which has been really interesting moving from Python to PHP, as with all languages, tons of overlapping concepts, but the syntax is just like night and day.
I feel like with Python, even if you’re not familiar with language, it’s pretty straightforward. Like you can look at it and know what’s happening. It almost reads like a sentence. Yeah. But PHP I found not that way. Yeah. And to be fair, I [00:46:00] also moved from like student level Python to an enterprise code base in PHP, so that’s a big difference as well.
PHP is funny. I think it’s sort of a misunderstood language. It gets a lot of hate. And I had heard this out in the tech world before and not really understood why. And now that I’m getting into language, I’m understanding sort of the reasons for the bad reputation, but also finding ways to counteract that because the language has evolved so much over the past few years.
There’s a lot of old kind of bad PHP code out there on the internet. That doesn’t mean it’s a bad language, it just means it’s an old language. But one of the things that I actually love about PHP is that it’s an old language. So sometimes when I’m asking one of the senior engineers, like, why are we doing something this way?
It opens a can of worms and we end up talking about the history of PHP and backwards compatibility and, you know, all these kinds of things. But modern PHP has all of the capabilities of any other modern language, like [00:47:00] object oriented programming, strict typing. It also just the sheer volume of like history and the sheer number of developers out there that work on it is always fun.
There’s a ton of information out there about it.
Jen Brissman: I feel like if you’re coming to the defense of PHP and you use it all the time, that must mean you love using it and it’s a great one to work with. So I think that’s telling that you’re strongly coming to its defense for any of the haters on the internet.
Cori Lint: Yeah. I’ve also been like indoctrinated by the senior engineers at my company who really love PHP. So shout out to them as well.
Jen Brissman: I love that. I love that. And it seems like you have some good mentorship at your company too, and have grown a lot in the last year?
Cori Lint: Definitely. Yeah. Absolutely. Yep. Obviously a lot of code review, but also, a senior engineer will just say, hey, I saw this thing in your PR I’d love to chat about. Do you want to just hop on Zoom? And we can pair through it. And sometimes we have an hour long conversation. I learn so much.
And there’s just a culture of that. Like there are no dumb questions. I think that’s [00:48:00] so important for a junior engineer, especially coming from outside the industry. So yeah, it’s been a really great place to grow.
Jen Brissman: Amazing. That’s so great to hear. So, just to wrap up, if anybody wants to get in touch with you, Cori, we’re going to share your LinkedIn and other details with how to get in touch and yeah if there’s anything else we want to add, I just think we want to say thank you so much. Great.
Becky Peltz: Thank you. It’s really been wonderful hearing you talk about it and I love your project, so.
Cori Lint: Thanks so much. It’s been really fun to revisit it and also to see it through other people’s eyes is always fun. So I really appreciate the opportunity.
Becky Peltz: And you used Cloudinary, so nobody told you to do that.
Cori Lint: Exactly. I used it before I even knew.
Jen Brissman: Yeah. Actually, one more follow up question before we wrap up. How did you find out about Cloudinary?
Cori Lint: I think it was just something that our teachers and advisors at Hackbright were familiar with, and they knew it was a good product. So it was recommended.
[00:49:00] I kept hearing the name and I was like, I guess I should check that out. And, yeah.
Jen Brissman: Yeah, I always like to ask people, because it’s something I think more people will know about going forward, but I wish more people knew about Cloudinary. And I think when I was building my project that also used media at the same school, Cori was at and I found out about Cloudinary.
There wasn’t any other competition. There wasn’t any other cloud service that I could have used that would’ve done the same thing Cloudinary did. So I’ve yet to hear of one that does the same thing. So I’m glad you found Cloudinary Cori, and I’m glad that you shared your time with us today.
This was such an interesting conversation and we’re so grateful for you.
Cori Lint: Thank you so much.
Becky Peltz: Thank you. Thank you. This was a great episode. I really enjoyed hearing Cori explain her thought processes, her love of cello and Artists Who Code. But I really liked that data model that she created. It was really easy to understand, and anytime you’re dealing with many to many, it can be challenging.
And she did a really good job showing us the flow of creating the model and then [00:50:00] translating that into a UI with two trees.
Jen Brissman: Yes, exactly. And we’ll share the resource that she used to create her data model, and she really had a difficult task. She had to show the complicated relationships between teachers and students.
And then she realized that everyone was a cellist, but also a student and also probably a teacher to someone else. So D3 was a great resource for her to show that as well.
Becky Peltz: Yeah, the whole student teacher model was really interesting. It definitely fit into this idea of setting up a tree for cello, but I could see other people wanting that model, who taught you how to code or something, or who taught you how to ride a bike and who taught them.
I don’t know. But I think it’s been a good model. I also just coming from Cloudinary customer education, I really want to emphasize that this shows a good example using the Python SDK with Flask to create an API for both upload and admin. So she uses admin to get her default images, and then she uses the upload API to upload any kind of [00:51:00] new work.
So I’m really appreciating that.
Jen Brissman: Yeah, definitely. And then another takeaway is Cori started with someone else’s solution and she built her project from there, and that’s something that’s totally kosher to do. I think maybe we’re conditioned like, oh, don’t copy someone else’s work. But there’s a big difference with starting with someone else’s solution and building from there.
That’s something that happens all the time in the developer community.
Becky Peltz: Yeah. I’ve been a developer for years and years and even going back to looking at the scientists like Newton, it’s always start with somebody else’s stuff. We build on each other’s shoulders. Yeah. And that is the cool thing about technology is it’s an evolution of how people think about things.
So we have some ideas about copyright and don’t copy other people, but that’s not how it works in technology. Open source code really blew away a lot of the secrets about coding anyway. Yeah, she did it in a really good way I think.
Jen Brissman: Yeah. Yeah. And lastly, I think [00:52:00] it was a really important case to look at bringing your passions.
She’s been a cellist her whole life professionally, and she had this idea to build this app and learning about how the developer in the Netherlands shared his data with her, and they made these connections worldwide because of something she created that really started from her passion in another unrelated field.
So it was interesting to hear about that, and it’s just important to remember that bringing other passions in is only going to make for better projects and a more meaningful experience for the developer.
Becky Peltz: Well, in general, I think that’s the whole reason why so many companies are investing in diversity is that the more points of view that you get, the more we realize the problems out there, and then also get a lot of ideas for solutions.
So passion and having a voice in the projects you’re working on. And she does demonstrate that really well in this conversation.
Jen Brissman: Absolutely. Absolutely.
Becky Peltz: Yeah. So all in all, I hope that this [00:53:00] will be not only informative, but fun to watch. I think there’s a lot of good material for any developer that wants to work with Cloudinary, especially if they’re a Python developer or just a web developer. This has a lot of interesting code and ideas.
Jen Brissman: Yeah. Thank you so much to Cori for coming on, and stay tuned for the next awesome DevJams episode.
Becky Peltz: And that’s a wrap.
Creating GitHub Wrap with n8n, Cloudflare and Cloudinary
Many developers make tons of open-source contributions, but keeping track of all of the various commits, pull requests and other actions can be challenging. Harshil Agrawal, who is a Developer Advocate for Contentful and formerly with n8n, created a project that solves this issue – GitHub Wrap. Using technology like n8n, Cloudflare and Cloudinary, he developed this excellent product that makes it easy to get a yearlong recap of the parts developers have taken to benefit the open-source community. Sam and Becky from Cloudinary sit down with Harshil to walk through his project and show how he built it in episode #10 of DevJams.
Sam Brace: [00:00:00] Welcome to DevJams. This is where we talk with developers that are using Cloudinary in their projects, maybe in interesting ways, inspiring ways, or just ways that we’ve never seen before. And of course, this will help people like you, hopefully that are thinking about their next websites or next mobile apps or next software projects, and thinking about ways to help manage and deliver media in some of the ways that our guests are showing in these episodes.
My name is Sam Brace. I am a Director of Customer Education here at Cloudinary and joinning me for every DevJams episode is Becky Peltz, who is our curriculum program manager for developer education at Cloudinary. Becky, nice to have you back.
Becky Peltz: Hey Sam, it’s great to be here. I think this is a really fun episode.
I know when I saw this come across, [00:01:00] I had to immediately do my own GitHub wrap. So I can’t wait to see what it’s going to look like when we talk with Harshil about it.
Sam Brace: Absolutely, and Harshil, he was working for n8n at the time, and we’ll talk more about where he’s at later, but when he built this project called GitHub wrap, it was a way to really show off all the amazing work that as a developer, that you’re putting into GitHub, but to summarize it into a yearly report and to really do it in a fun way to show off all of the great work that you’re doing, all of the repositories you’ve created, maybe all the pull requests you’ve done and,
we’re really inspired by this because one, you see companies that have done similar things like Spotify, where they’ve created their Spotify wrapped project to show all the different music you’ve listened to and the artists you’ve learned about and started listening to more over a course of the year.
Sometimes it’s embarrassing. Sometimes it’s helping you to realize [00:02:00] how much you enjoy that product and that person, but in the same way, I think the GitHub wrap project had a very similar flare to it. And what Harshil has pulled off, it’s fantastic. And of course, all the media that is associated is done with Cloudinary, which we are very, very excited to see.
Becky Peltz: Yes, and I haven’t seen n8n used, and I’m really looking forward to seeing that, because we are all getting into low code now. Even as developers, we are looking at the low code as a good solution.
Sam Brace: Absolutely. So let’s get into it. Let’s go and meet Harshil and take a look at his GitHub wrap project.
And then stick around at the very end. Me and Becky will give you some key takeaways that we felt were important from this episode for you to be successful as a developer if you decide to take on any of the learnings that are found in this episode, so see you then. Harshil, welcome to the show!
Harshil Agrawal: Thank you so much for having me.
Sam Brace: So Harshil, we’re excited to talk to you about the [00:03:00] project that you developed: GitHub Wrap. We’re excited to be able to talk about lots of other things that are associated with the project, but I really wanted just to get to know you for a little bit here, cause I think you’re doing some really cool things.
Obviously other people are noticing out in the tech sphere. So tell us a little bit about your role at n8n and what you’re doing as a developer advocate there.
Harshil Agrawal: So I work in the developer relations team at n8n, where I get to talk about automation and low code and also help the community to get started with their automation journey.
I do a lot of things at n8n, but one of my favorite thing is being lazy, because it helps me, you know, be more productive, find solutions to things that I kind of don’t like, and then share with the community.
Sam Brace: And I think that’s a great thing to be able to talk about because one of the things that it happens with automation, right, is you kind of want to automate things that you don’t want to have to manually do, things that might feel repetitive, as you’re pointing out.
If you’re saying you’re lazy, I don’t think you’re lazy by the way. [00:04:00] But if things that make you feel like, oh, I don’t want to have to do this perpetually, automation is a really good functionality for that. And it seems like a lot of the things that you’re focusing on with this program, with this project, it is really tied to automation.
So talk to me more about that. Why is that exciting? Why is that something that developers should be caring more and more about?
Harshil Agrawal: So a lot of times I have noticed, we as humans, we don’t realize that we are doing a lot of same things again and again, and wasting our time on that, which can eventually be done by a machine.
But we are like, okay, it’s just going to take me a couple of minutes to do it, and I’m going to do it. And eventually we end up wasting a lot more time than just a couple of minutes. That, accumulates all together and we don’t realize it. And that’s where, you know, I feel automation, not just for developers, but for everyone out there is really helpful.
Becky Peltz: Hey, can I say something here, because you’re not the first good developer I’ve heard this week say they were lazy. I think this is a good quality. And I think it goes [00:05:00] hand in hand with automation. You know, we’re going to make things so that we don’t have to do the same thing over, but the other really key thing is that we’re lazy and we’re prone to error.
And so if you are doing things manually, there’s going to be lots of error. Whereas with automation, you can fine tune it and get it so that it’s going to work good for everybody every time. And I see that in your app too.
Harshil Agrawal: Exactly, yeah.
Sam Brace: So Harshil, some of the things like, let’s just, before we get into the project, what are some things that you’ve automated?
I’m interested. Like where, where is this taking you? This automation journey?
Harshil Agrawal: One of the cool things that I automated was clearing my inbox. So I have subscribed to a lot of newsletters and my inbox was a mess. So I created an automation where it gets the WebView version of those newsletters, adds it to my Notion.
And then, you know, just deletes it, that email. Now my inbox looks good, a bit good, but my Notion is just going on.
Sam Brace: And I think [00:06:00] this is a helpful advice for like anybody. That’s not like, you know, regardless of who we are, email’s a problem, right? Like we’re always struggling with that inbox zero, or trying to make sure that it’s clean.
You’re not getting all of the spam, all of the newsletters, all of the things that, you know, that somewhat create clutter. So yeah, that’s an excellent idea for automation for sure. So obviously also you’re a developer, you’re on a developer relations team for the company that you work for. Talk to me also about your journey as being a developer, because obviously being a developer advocate, you’re probably catching people within different points of your journey.
Yeah. What was your journey like?
Harshil Agrawal: So, very early in my school days, as I got attracted to the technology space and I was like, I want to do something in here. And as I got to dive deeper into it, I got interested more and more, and I started learning on my own. And after I completed my high school, I came across freeCodeCamp which became my source of learning for web development.
And I still, you know, whenever someone asks [00:07:00] me about, “Hey, where should I get started?”, I always suggest them to just go ahead and or take a courses on freeCodeCamp, because they’re completely free. But apart from that, it’s structured so well. And they also have really amazing community around the world that is always ready to help you out.
So that’s how I got started into development, and while I was in university, I tried to dabble around with different technologies. So I did a bit of work at Android, machine learning, and Blockchain, just to get an idea of where my interest lies. And that’s a quick summary of my developer journey, I guess.
Sam Brace: So looking at something like that, because I think you’ve touched on a lot of really interesting points, like online learning, obviously. That’s how you learned, you didn’t go to like a formal school. You don’t have a computer science degree. You did this through freeCodeCamp.
So what are your recommendations there? Like as somebody that, you’re talking developers all the time, like, is that going to be a place where you find a lot of people are going to, should they be [00:08:00] investing into that? Also, was there any places where you were going for online learning where you’re just like this, this isn’t super helpful?
Any advice for our developer community there?
Harshil Agrawal: Yeah. Just one thing to correct. I have a formal degree in computer engineering, but I believe that, you know, whatever I learned in my university, I am not actually using that. What I’m using currently is, you know, everything that I’ve learned online.
So even though I have a degree over there, I still call myself as a self taught developer, because everything I have learned I believe is from the internet. But coming back to your question, it depends, you know, what the people want to learn. If it’s, you know, something kind of web development, I always ask them to get into freeCodeCamp because that is the place
went through a few courses by [00:09:00] Udacity.
So that’s another platform there, you know, people can learn about this. But what I have learned from my experience is you cannot learn anything just by following the tutorials or reading articles, you would have to go ahead and create something on your own. That’s when the actual learning happens.
Becky Peltz: Yeah, it is kind of one of the fun things about coding is that you can go off and do your own project, something nobody’s ever done before and in the process, learn something new and then turn around and teach it. Because I know that you are a teacher, you have many avenues for teaching. Do you want to share some of that?
Harshil Agrawal: Sure. So earlier last year, I think I was playing around, with n8n and Twitch and I was like, huh, I do live streams. I don’t want to tweet every time I go live, so I know there is, there has to be a possible way to automatically do that. And while I was researching into that, I learned, okay, so Twitch has an integration, which I can leverage and [00:10:00] create an automation workflow.
I did that and I wrote about it so that other people can use it. And I get feedback from people like, Hey, thank you for writing this. It’s helping us with our streaming. And we also want to see how we can extend this. So I kind of experiment on my own, build stuff, and then write about it.
So that’s kind of my process of teaching.
Becky Peltz: So we love problems, huh? Because that’s a good, a way to get a solution.
Harshil Agrawal: Exactly.
Sam Brace: Also once again, proving you can automate all the things, right. So very good job. Yeah.
Harshil Agrawal: I told you I’m lazy.
Sam Brace: Now one thing that I wanted to ask you about, because a lot of the things that we’re going to be talking around workflows and automations tied to your projects, it is tied to this concept of no code or low code.
I know that you mentioned that even a little bit earlier. Kind of unpackage that for us, because I think this is the first time we’ve really discussed no code or low code products at all in our DevJams overall program. So let’s introduce that a [00:11:00] little bit for our audience, cause it’s still kind an area that I think there’s a lot of ambiguity about.
There’s some questions about like, is this low code? Is this not low code? So what, what are your feelings about it?
Harshil Agrawal: Sure. I would say that we have been in the low code ecosystem for a while now. Because WordPress has made it easy. It has taken a lot of abstractions out there. So I think that was, that was the first part, you know, where low codes started, but people didn’t realize it at that point of time because there was still a lot of coding involved.
But if you look at it, from just take an overview of it, it actually abstracted a lot of code from the user endpoint. So the user just had to go ahead, you know, just play around with the blocks in WordPress and then they had a website ready. So that’s where I feel, you know, the journey of low-code started and low-code, and no-code actually
is the ability where, you know, people get the abstraction of the code. So they don’t have to go ahead and write the code by themselves. That’s basically what no code does, but [00:12:00] with low code, it makes it more flexible. So, okay. You don’t want to write a code? That’s completely fine. Here is the abstraction.
If you want to write the code, if you want to extend the functionality of the project or the product, you can go ahead and write some code at this particular stage. So that is what is the major difference, I think between low code and no code and I have seen developers are now getting more adapted towards low code technology as well, because it provides you an abstraction.
It saves you a lot of time of writing that code again and again, why would you write a code when someone has already done that? Right? It does not make sense. And that’s what low code is trying to solve.
Becky Peltz: I kind of see it, like building up to that, the whole sandbox technology where there’s lots of code snippets out there.
So if I want to write code, I do not start from scratch. I go Google somebody else doing it, grab their stuff, and then I start changing. But now to have it more formalized, you know, and present it as this is good low code, no code. It will [00:13:00] be a great starting place. I think it helps everybody.
Sam Brace: Now, one thing that I wanted to ask you about with that is, so I think there’s a misconception that I’ve definitely seen in the low code, no code discussions where for like, as we’re pointing out very clearly with what you’ve said, what Becky just added on.
It’s where no code to low code tools are used by developers. And I have seen it where like people are saying, well, low code and no code should be used by people that don’t know how to code. It’s a way for them to use this tool. And I disagree with that. So it sounds like you do as well. Am I right about that Harshil?
Harshil Agrawal: Yeah. Yeah, I agree with that because, we as developers, we are also humans, right? We also want to find solutions that make our lives easier. If it’s a product that is no code or low code, why do we discriminate it against it? If it’s making our life easier, right. I feel we should be open and see if it’s working for us. If it’s not working, then that’s a different thing.
Sam Brace: No, absolutely. Absolutely.
Becky Peltz: I noticed that you got into the NoCode [00:14:00] November event. So can you talk about that a little? Like how, what kind of projects and what you did there?
Harshil Agrawal: So the NoCode November event was a one month long hackathon, which was organized by Typedream. That Typedream is again a no code automation platform to build websites, but they organized this event and involves participating organization with them.
And I really like that event, because you got to build a project and not just build a project, but you also had to, you know, share it with the world. So oftentimes at hackathon, we see people build a project and it stays within the hackathon community and does not get out. But with that, they had a strict rule.
You have to publish it on Twitter or, you know, launch it on Product Hunt, which kind of attracted me to be a part of it. And the other thing is they were offering free credits up to for certain tools. And I was like, I want to try out these tools. I want to try it out, so I might [00:15:00] just participate and get those coupons.
Becky Peltz: Yes. There’s nothing like a free tool to get you going.
Sam Brace: I love what you just said Harshil because like you’re saying, like, it’s so easy to get these products up and running. You just have to use product time. I mean, obviously you can get this things out there and I’m just, I’m thinking back to like, you know, 20 years ago and we have to
spin up Rackspace servers and all this stuff. Like it’s so easy to get projects out nowadays. So I, I’m so excited that we’re at a stage of innovation, which you’re obviously a part of, and you’re able to get things out through hackathons and get things built out so easily. It’s great to see where things are ultimately going.
So thanks for being a part of all of that and giving people all these ideas on how they can get their projects up and going too. One thing I wanted to ask about is your specific project. When I saw this being talked about on blogs, when I saw it popping up on Twitter, I was like, oh, this is such a fantastic idea.
Because as a developer, you’re developing so many different projects, you’re doing so many commits. You’re [00:16:00] doing so many pull requests over the year. How do you summarize all of that work in a way? And you did that with this GitHub wrap project. And I just, I thought it was genius. So tell me more about it.
Why did you decide to go down the path of building this thing out?
Harshil Agrawal: Yeah, I’ll be honest. It wasn’t an original idea. This idea was inspired by Spotify Wrap. So if you have used Spotify, you might have got those notifications from Spotify at the end of the year. Like, hey, here is your wrap, which summarizes your listening habits.
I never have tried out Spotify wrap because I believe if I tried it out, it is going to influence my listening habit and, you know, I might be influenced in some way, but I was like, but this is a cool idea, right? I get to summarize what I have done in the year and share it with the people. So it’s like, why not take this and, you know, do something around the open source because being an open source contributor, I always like to talk about open source and encourage people to do that.
So I went ahead and, you know, [00:17:00] tried to look up at a couple of projects and there were already a few of them similar to GitHub Wrap. So I was like, huh, do I want to reinvent the wheel? Do I want to create it on my own and do that. But then I was like, these projects are amazing, but they are build with code.
Why not go ahead and challenge myself to build it using low code tools and see how that goes. And that’s how the project was born.
Becky Peltz: I think it’s a great idea. I know when you’re a developer, it’s important to put on your resume or somehow share your work. And a lot of hiring managers look at your GitHub record, you know, how active is this person or whatever if you’re in GitLab.
But the thing is, this gives you like an instant summary, and it’s a link that you can share. And I mean, it just satisfies so many features that help you to share your work.
Harshil Agrawal: Yeah, exactly. One of my colleagues gave me the same feedback. Like he, he really loved the project and we were brainstorming more ideas on what we can do on top of this.
And this is the exact same [00:18:00] idea that he shared with me.
Sam Brace: Yeah, I gotta tell you, I think you’re onto something Harshil. Like I’m a Spotify user, and I have to tell you, Spotify Wrap influenced my music listening completely. So you’re on to something here. I’m like, uh oh, I’m listening to too much of that.
That’s a little embarrassing. So yeah, I get that completely, but in the same sense, because they do such a great job of summarizing all the content and it’s literally just, you know, pulling data and compiling it. Very much, like what you’re doing with your project. It is where it helps you to reflect and say like, oh, wow, I really did do a lot this year.
Or maybe I should have done more. So I think there’s lots of ways this can be used. I think Becky’s definitely onto something where being able to provide an instant result for hiring purposes or contract purposes. But I mean, I think the use cases for what you’ve developed are endless for the overall developer community, especially those that are doing open source contributions that you have been doing.
So, kudos to you, even before we show people the project. I’m excited [00:19:00] to get this thing up and going. So, Harshil, do you want to show this thing off? Walk us through it a little bit.
Harshil Agrawal: Sure. I’m excited to show this, so let’s see if I can grab it.
Becky Peltz: Right.
Sam Brace: Perfect.
Harshil Agrawal: Yes. So this is the website for, low code land slash GitHub Wrap. This is kind of a very simple UI and I’m surprised that people really love the UI because it’s very simple. And I am not a designer. So for me, I was like so happy when you know, people say to me like, hey, this is something that we love.
This is the wonderful UI.
Becky Peltz: I like the simple UI myself, if it’s to the point. And I think everybody should put that Product Hunt and tweet on their app. So that’s a good idea. I know it was to satisfy your experience in the hackathon, but it’s a good idea.
Harshil Agrawal: The tweet idea was a bit different and I am going to jump into it, but let me just quickly show over here.
So a user, [00:20:00] they can enter, their GitHub username, click on Wrap It. Some automation is going to run behind the scenes on n8n. It is going to generate this wonderful image, which gives you all these stats that you have. So it gives you the number of commits that you created, the number of issues that you created, pull requests, new repos, all that you have done in just one year.
Becky Peltz: Yeah, it’s just a really nice clean summary and it introduces you to the person visually, as well as the work they’re doing.
Harshil Agrawal: Exactly. I’m just going to talk a bit about the tweet button, because that was something interesting and I think might be relevant to what is going on nowadays. When I created the idea was like, okay, this is wonderful.
This is up and running, but how can people share this? Because if people don’t get to share this, I might not be able to reach out to a lot of people. So that forces an interesting challenge that I faced. And I’m talking about this, because if you talk about Wordle, the game [00:21:00] that is kind of popular right now, right?
Yeah. So it has this feature of sharing it on Twitter and that’s how I think it got a lot of more popularity. And every project out there, I think, you know, if you have that feature that you can share what is being done on that project, I think it can help you get more traction over there.
So if I click on tweet, it creates a wonderful tweet, and it will generate image. For me, it does not generate an image, because I did a lot of testing. And in the case, it still uses the old data that it has, but will generate a beautiful image with the link so that people could easily go to the link and get it on the website as well.
Sam Brace: That’s one of the big powers of what Spotify Wrap did was that they made it super shareable. Take that image and you can put it on Facebook and Twitter and Instagram and all these things. So like, you’re onto something here because, well, I don’t necessarily think that sharing off your GitHub pull requests and commits on [00:22:00] Instagram stories is going to be the best thing to do.
But in the same sense, I think what you’ve done here, you’re having an instant tweet option. You’re picking up on the best things about what Spotify did with a wrap project and making it for this developer purpose. So once again, that’s fantastic. Really, really smart move on your part.
Harshil Agrawal: Thank you.
Becky Peltz: I also like your URL, low code land. It’s got kind a cool jazz vibe to it.
Sam Brace: So let’s walk through the workflow. How do you get this to actually all take place?
Harshil Agrawal: All right. So there are two workflows that are running behind the scenes and the first workflow is the workflow that would generate the HTML page that is shown to the user. Now, I am using a WebHook node, which would listen to this incoming request, process that request,
and then output something. Now the wonderful thing in this webhook [00:23:00] is you can send the response as a binary file as text or as JSON and you can even send an HTML file or just the HTML code, which I didn’t do until last summer. And when I knew, I was like this is amazing. So I can have kind of a whole website running on n8n.
It would be the entry point for that. So basically creating a whole web server with n8n. So whenever a request comes in, I set some information, such as the title, the description, the URL, and the username. And again, the og URL is the Open Graph URL. Now these are all the information that goes into the meta tags, which helps you creating those SEO tags and make this more searchable on the internet.
Becky Peltz: Just to be clear. This is your product, the n8n right? This is, yeah, this is the automation product, so that you can set up logic [00:24:00] with your web hooks and the data that’s being generated. Yeah. But it seems too, because you can generate HTML that it’s almost like a web server.
Harshil Agrawal: Exactly. So over here, if you see. I have hardly any code, all the code that I have, it’s just for the HTML pages, and I am using just the code nodes of n8n here to interact with different services and create the code for my project. Now I am next checking.
You know, if the username is present or not, because now the user might want to, you know, just go to the landing page of the website. So if they want to go to the landing page, this is the HTML code for that. Now, as I said, I’m just writing the HTML code. But apart from that, all that is, you know, being done by n8n.
So I’m using the HTML code over here and then returning back to the user. But if the incoming request contains the username, now we want to do something. We want to get the user’s information [00:25:00] from some place. We want to generate that image and then we want to return that image. And this is what the other workflow does.
So if there is a user name, we run another workflow, which would make a call to that workflow. So over here, this is the workflow that does all the processing. So again, this is a webhook node because it is listening to the incoming request from the previous workflow. We are passing on the username.
So in GraphQL node, I am querying the GitHub GraphQL API to fetch the information, passing on the username that is coming in from the webhook node, getting all the information that we need, like the comments that they made, the repositories that they created, the issues that they opened and stuff like that. And then we are passing on this information to the next nodes.
We’re not going to go into a lot of details with all this nodes but what is happening next is we are creating [00:26:00] the profile image for the user. So one thing that I kind of ran into an issue was I had the information, now how do I create that dynamically? I tried out a lot of different base, a lot of different designs, but none of them satisfied what I was looking for.
And then I eventually ended up using Cloudinary. So I am making a call to the Cloudinary URL and passing all the information that I get from the previous node. So we can see the commits, the pull requests, the issues, and everything. And this is using the transformation of Cloudinary. So this then gives me the template image returned with all this information.
But while I was building this, I realized there is one thing that was missing and that was, adding the avatar of the user on the profile image. So if I show you over here, now everyone likes to, you know, have a picture of themselves on stuff like this. It makes it feel more [00:27:00] personalized.
And I ran into a couple of issues when I was doing this, and I was like, huh, I don’t want to ship it without adding this particular feature. So what can I do? So I got back to my team, and I was like discussing with them hey, this is the limitation that I’ve run into. What can I do? And they suggested me of using the added image node in n8n, which is a node that allows you to manipulate images and work with them.
So I use the added image node, which resizes the avatar image, crops them into a circle, and then we append it to the image that is written by Cloudinary. And then this image is finally returned to n8n so that’s kind of the whole summary of this workflow.
Becky Peltz: So if I understand, you’re using Cloudinary to create a text image using the transformations.
Harshil Agrawal: Yes, exactly. So, all the text that is coming in, like the issue numbers, the commit numbers and everything is using Cloudinary.
Becky Peltz: Yeah, because once [00:28:00] it’s in text form, it kind of is easier to just plop it down on a HTML page. That’s really a neat idea rather than sitting around and messing with CSS and stuff.
Sam Brace: Yeah. What I noticed that, because like when I was looking at the transformations, you had all of these various overlays that you’re doing, and you also had it where you were colorizing it. So like, if I look at that, I can see co_rgb, that’s a RGB value that’s here. Yeah.
Yeah. You’re using X and Y coordinates to determine where things should be laid out within the card. And then from there, you’re even defining the font and font sizes all from there, but it’s all being done, through Cloudinary transformations. It’s very slick what you’re doing.
Harshil Agrawal: Yeah. And I really loved the transformation dashboard because
I was playing around with it and I saw, okay, so they also provide an URL for that. So, you know, I took this URL, figured out what are the dynamic values and just changed those. So it really helped me, not to just waste a lot of time in trying out and [00:29:00] digging too much into it, on the dashboard, play around with it, get the URL and just use it.
Sam Brace: When I like what you’re showing here, because as I’m seeing, you’re pulling from the JSON to be able to say it, like suddenly, like the JSON is acting as the variable in this case. Like whatever we’re getting from a JSON commits line, this is what’s going to be published on this part of the card. And I think that’s one thing that sometimes Cloudinary users get stuck on is they don’t think like, what are all the applicability options when it comes to using overlays and text based overlays, like what you’ve done. They think it has to be statically written in where you’re proving very easily,
you can pull from something that has lots of variable aspects to it, like a JSON file. So this is excellent work Harshil. I’m very, very impressed.
Becky Peltz: And you mentioned that you’re using the GitHub GraphQL. Can you talk a little about that? How that helps you out?
Harshil Agrawal: Sure. So I have the GraphQL Explorer open for GitHub. Now, I’m just going to give a brief introduction about what GraphQL is, because I [00:30:00] believe for a lot of people, GraphQL is still very new.
So, traditionally, if you want to get information from an API, we mainly use the rest API for that particular service. Now there are a couple of problems with the rest API. First of all, each endpoint, you know, returns only some sort of information. So like, just say, I want to get the username and the avatar URL.
I might have to hit the user endpoint, but if I want to get the information about the commit, I might have to hit the commit endpoint for the rest API. Now, if I took that approach, I would be making a lot of API calls to the GitHub endpoint, right. And I never wanted to do that.
It would be just insane to do that because of all the incoming traffics that I had on my server. What GraphQL helped me do is make one single request. And in that request, I could define what information I need, and GraphQL in that one, single request would give me the information. So over here, this is just one single request.
And I am asking for the [00:31:00] information that I need, like the commit, the user, the Twitter username, their name, that avatar URL, and all that is just being sent back with just one API call.
Becky Peltz: So it’s kind of like if, for people that use SQL or various querying language, it’s kind of like, you can make a query out of a combination of APIs.
You’re not stuck pulling in every API and sorting through all their data and trying to match it up with some other API data.
Sam Brace: Becky, goodness gracious. That was like the best explanation I’ve ever heard of GraphQL, like being able to break that down in that way. Cause like coming from a bad base administration background and some of the things that I’ve done, like being like, oh yeah, there’s a lot of commonality to GraphQL and SQL.
Wow. I say a light bulb just went off in my brain when you said that. Hopefully that happened for one other listener or a viewer of this program. So good job guys. Very, very helpful. One thing I want to ask you about here, so I know or maybe I’m getting a vibe here that [00:32:00] CloudFlare is involved with this project in some way.
Talk to me about why you would be using CloudFlare with the project like this. Obviously they’re an amazing provider when it comes to CDNs and other things that they do, but how are they involved in this project?
Harshil Agrawal: Yeah. So one of the main challenges was to hide this particular URL. Like if there is a project that people want to use, they don’t want to have such a long URL.
And I wanted to find a way to have a proxy between the main URL that I want to use and my n8n webhook URL. So that’s where CloudFlare helped me. The other thing was, once I was trying out and testing out the project, I realized that a lot of time people, sometimes they would just
add at the rate symbol as well with the username. So not just Harshil1712, but @Harshil1712. Now that is not a valid username. So I wanted to also filter that out. I could have done that in n8n as well, but it would have added [00:33:00] more nodes, and I didn’t wanted to do that.
So I took a look at CloudFlare and I was like, okay. So with CloudFlare, I can divert the traffic to the URL that I want. And I can also handle such use cases or such edge cases where people, if they are trying to use anything apart from this particular thing, they’re going to get this particular page.
So that is what was happening with that. So I can also quickly show you the CloudFlare worker code that I am using. So most of this is the boiler plate code that I got from the CloudFlare documentation. So over here, we have a regular expression, which checks if someone is using the at the rate symbol and down below. I set in the handle request function, what is happening is, please have a parameter that is none.
So if nothing is passed, this parameter gets added to the URL, gets back to n8n and n8n says, okay, nothing is passed. And [00:34:00] it sends up the landing page to the user. Over here, you can see that we are checking, you know, if they have added the @ symbol or not and stuff like that. And then we are simply sending all that content that was returned from n8n to the user.
Becky Peltz: Kind of looks like a Lambda function. And so they’re letting us put Lambda functions out on the CDN, it looks like. Is that correct?
Harshil Agrawal: Exactly. I think that’s kind of a good way to explain CloudFlare workers.
Becky Peltz: Yes, sorry to interrupt Sam. It is really clean code.
It’s very easy to read. So basically you get line 25 and you get a none, your n8n will just send out your home landing page. Yeah. Yeah. Just render that HTML. Otherwise, it’ll go in and process it and put together what you need to get an actual wrap. So, that’s [00:35:00] really neat.
You have many levels in this application, but always very small amounts of code, which is nice. Exactly. Like a page worth.
Harshil Agrawal: And as I said, they already had the code on the documentation page. So all I had to do was make some changes here and there to adapt it to my use case. It was mainly copying and pasting.
Becky Peltz: And as I recall reading this, you did this all for free. Like every piece of this is. Yeah, that’s really cool.
Sam Brace: Also, I mean, that points back to what I was saying earlier, too. You didn’t have to spin up servers, you didn’t have to worry about all of that. Like it’s where a lot of this seems to have been done, because if I know this correctly, you’re using actually the free plan of Cloudinary to get this done, which is pretty awesome that you’re able to get it done without having to spend a single dime on that aspect, which proves once again, our peers at Cloudinary are hopefully generous with the application of this, but with something like CloudFlare, am I correct also that you can use [00:36:00] everything that you were showing with CloudFlare also on their free tier?
Harshil Agrawal: Yeah. If I’m not wrong, they allow you to have two worker script per project for free. I just needed one worker script to handle this. So still using CloudFlare for free, haven’t paid a single dime.
Sam Brace: Oh, gosh, I gotta say Becky, hopefully you’re agreeing with me on this one, but that’s pretty amazing. Like the fact that you can spin up such a helpful project, not have to spend a dime other than just, you know, your time, obviously Harshil is worth something, but in the same sense, you didn’t have to put actual, like monetary dollars, cents, coins to anything.
So this is great. I’m really inspired by this.
Becky Peltz: I think the fact that you’re using code that has been shared to you by, you know, the companies that produced it, it’s sort of tested in that sense. So you don’t have to spend a lot of time writing tests and things like that. Here’s what works, if you use it, it’s going to work for you.
Sam Brace: So, one thing I wanted ask you Harshil, [00:37:00] so whenever I’ve done development projects, when Becky’s on them, probably you too, there’s always a roadblock. There’s something that you didn’t anticipate. And I know you touched upon some of those things, like when you were saying like someone using the at symbol inside of their GitHub and like that’s probably not something you were like, oh yeah, I already have a plan for that.
It’s probably things you, you figured out during the development project and people testing it. But what are some like major roadblocks that you feel like people might face with any of the technology that we’ve talked about here today? And maybe some details on how you overcame it.
Harshil Agrawal: So one of the major roadblock that, I faced was when the project started getting a lot of traction on Twitter.
Few folks from the security community started playing around with it and not in a good way. And they started tweeting and I was freaked. I was like, it’s a weekend project. I didn’t, you know, take security measures, because I wasn’t expecting it to get so much traction. And now you [00:38:00] are doing this to me.
I’m like, I don’t know what to do. I am not someone who has done a lot of work in the security space, so how do I solve this? That was one of the major roadblocks and I freaked so much. I called up my friend who is well-versed in the security space. I’m like, you need to help me out.
I don’t know what should I do? Unfortunately, he wasn’t available. So for 24 hours, I was just reading on the internet, trying to find out a solution. And then I came across this CloudFlare, where you can have firewall rules. So you can set up rules without writing anything. So just telling CloudFlare, okay, if a request contains maybe this thing in the URL, block it. If a request is coming from this particular IP address, block it. And that saved me from, I think, a lot of other malicious requests that were coming in. Even if today I check the logs, I see a lot of people are trying to, you know, attack the website, but because I have those rules in there, it saves me a lot.
So that was one of the [00:39:00] most terrifying challenges that I had.
Becky Peltz: It’s pretty unsettling when people are going after your stuff. I mean, even if you are not taking it personally, you know, it’s still is like, what are they going to do to me? You know? And where will this all end? So it sounds like you were able to create a firewall with CloudFlare, and you didn’t have to pay for that either I bet, huh. Exactly. Yeah. That’s pretty nice. But you still had to figure out all of the things that you wanted to block. It sounds like that took some time to, yeah.
Harshil Agrawal: It did. So the process was just going to the log and understanding what was the repetitive things that people were doing.
What were the IP addresses that were making the same request again and again. And that’s kind of how I started doing it. And then I found a pattern and using that pattern, I created a firewall rule that now stops or blocks all those requests.
Sam Brace: Now, one thing that I’m also thinking of, because I’ve had this also in development projects and also [00:40:00] just other projects I’ve done that have nothing to do with development, but sometimes you don’t anticipate how popular something will be. So like, obviously something like this, like you know, there’s a lot of people that are developers. There’s a lot of developers that use GitHub. They probably would love to try something like this out.
Did you find like any issues, like in terms of like, oh, there’s too many requests coming in or, oh no, this is getting too big. Like anything like that happening with the project?
Harshil Agrawal: That’s a good question. I am an alumni for a program called GitHub Campus Experts. And I shared that program with my friends over there and the program manager, Juan Pa. He really liked the project and he tweeted about it and that’s how it kind of all started.
So, once he tweeted about it, it started getting more and more traction from the developer community. And then one fine day, GitHub also decided to tweet it from their official channel. And I, and that’s when I freaked out. I haven’t built this project to scale up. I’m not sure if it’s going to [00:41:00] scale or not, when it’s going to break.
So I was almost every 15 to 20 minutes, I was looking at my server logs. I was looking at the logs at Cloudinary to make sure that I have enough credit. I was looking at CloudFlare to see, you know, if anything is breaking over there. So that was a kind of interesting time that I had with the project when it got really popular.
And the major thing that I was worried about was, the expense that I might have at the end of the month when everything cools down and I was like, yeah, I’m going to have a terribly long invoice coming in for me.
Sam Brace: It’s such a good question. Like when you’re ever building any project is like, can this scale and am I ready for it to scale?
Right, and we deal with it all the time where like somewhat, like I remember we’ve had people that are using Cloudinary, and they get suddenly featured on Shark Tank or other these programs, like they’re these awesome startups. And then suddenly, they peak. And we’re like, we had no idea that we would have these overages or we’d have all these situations.
And of [00:42:00] course we take care of it. We help them out. But you’re absolutely right. Sometimes it’s unanticipatable based on what you have there, because that one tweet that one influencer that suddenly is like, this is a good idea. Boom, then everything catches fire and it is just like, they put gasoline all over it too.
So I’m glad to see that you had the concepts for it. Also, really glad to hear that even with a lot of influencing factors, you still didn’t have to pay any money, so good for you. Way to plan that out in as much as you possibly can.
Becky Peltz: It speaks to the cloud too, where you’ve got all these different pieces and they’re all doing
their chunks in the small way that they each do and put it all together and it still comes out free. That’s really good.
Harshil Agrawal: Exactly. I think I was also lucky enough because I had gathered a couple of extra credits for Cloudinary by doing the courses and, you know, following all the steps that they had.
And this route just helped me with getting the credit, which also helped me understand Cloudinary better because I [00:43:00] was playing around with Cloudinary. I often use it in a couple of projects, so it also gives me a good insight into the product.
Sam Brace: Wonderful. And I love that you’re using our courses.
That makes me happy. So, one thing I wanted to ask you, so obviously, you’re doing a lot of great work. This is just kind of a sample of the things that you are doing. As we pointed out, you’re contributing to lots of open source projects, you’re doing a lot of great work for your employer, but it’s also where. I would love for people to figure out ways to be part of that. Like, can we see all the great work that you Harshil are doing? Where are you really active? Where can people follow more about what you’re up?
Harshil Agrawal: So I am really active on Twitter and I’ll be honest.
I don’t always talk about tech stuff on Twitter. So be aware if you’re following me on Twitter, but but that’s the best place to get in touch with me, see what I am doing. And I also often share all my learnings on my website. So, if you want [00:44:00] to read about what I am doing, what I have learned recently, and if you want to learn that as well, you can always go to my website and that’s harshil.dev.
Becky Peltz: I like that you’re keeping track of bandwidth saved, all the things that could add up to cost you something.
Sam Brace: Perfect. And frankly, look at this, like your UI here. Once again, it’s simple, it’s minimal, but it’s so clean. Like I gotta tell you Harshil, you might find a way to get you involved with UX and UI one day.
Cause you’re doing a good job with everything you’ve been developing. This is as clean as I possibly can imagine for a personal blog, personal website, personal portfolio. So I’m impressed with that factor alone too. Becky, any final things that you wanted to ask Harshil before we let him go?
Becky Peltz: Well, the only thing I had asked is it would be fun for us to run it against one of our team members, run that project against that.
So if I could share my screen, we have a new team [00:45:00] member here, Jen Brissman. She was actually on our program last year and now she works here. So I’ve got Jen Brissman, and we’re going to wrap it for Jen, and see that she has been very active. She just learned to develop during the pandemic.
And she’s been working away here and working on new code for us, as well as going to be presenting. But anyway, I really appreciate the fact that we can see this so clearly, and I’m encouraging anybody who is working on GitHub to wrap it and share it. So I think it’s a really neat project.
Sam Brace: I agree completely, completely.
And I’d love to see all the great work that Jen on our team has been doing, you know, before Cloudinary, while at Cloudinary. So, and actually for Cloudinary now, too, so that’s awesome. So Harshil, keep up the good work and keep in touch. We can’t wait to show off the latest projects you’re working on, hopefully in a future program or if nothing else, we’ll make sure we tweet about it.
I [00:46:00] think you’re doing some pretty awesome stuff in the dev space right now.
Becky Peltz: Yeah. It’s really nice talking to you too. Very, very inspiring.
Harshil Agrawal: Thank you. Thank you so much for having me. It was wonderful talking to you all.
Sam Brace: Harshil is a wealth of information and honestly, very nice guy as well. I think this is a good, good conversation. Becky, when it comes to the key things that you felt were important from what we’ve learned from Harshil today, what stands top of my mind?
Becky Peltz: Well, there were so many things here, you know, I think it, the one thing is it’s a great little gift to developers, because it lets us quickly gather up all the data from GitHub about our own work and put it in a really nice little webpage that we can share. So it’s kind of like Harshil’s gift to us in a way.
Sam Brace: It’s one area that I almost wonder how deep this could go, because if I think about like very developer focused organizations, let’s say like Cloudinary, let’s say Stripe, like Twilio, and they were saying, we want to show [00:47:00] all of the amazing work, all the pull requests, all the repositories, all the things that our developers are doing.
Could we do this project and then create these beautiful reports off of it to be able to show off at work. So I think the legs that what Harshil has developed has a lot of opportunity. And I don’t think this is just for personal developers, I think it could even be done at the large enterprise level based on what we’re showing here, because there’s a lot of cool ways to show off the data.
Becky Peltz: Yeah. I mean, what if we could all put together something like that about our work for the entire year when it’s time to get a raise or something like that? So, yes, I think I could see a lot of extensions to this. It was also really fun to learn about low code and see how Harshil could kind of create these steps that pulled in different tools and services like Cloudinary.
So essentially it turned out that Wrap is a Cloudinary image hosted on a webpage. So that was really cool [00:48:00] to see that he thought of that and laid it out so nicely.
Sam Brace: I agree it, and I think that’s one thing that Harshil definitely showed is that yes, he was able to develop this, but he developed it as part of a low code offering.
So if someone wasn’t necessarily a developer, they could still maintain it and still work with the project. And I think that’s one area that, at least I’m seeing when it comes to the buzzword that is low code, the buzzword that is no code. There’s some misinterpretation to that because sometimes that means that low code is just meant for developers and or no code is just meant for marketers.
Low code is just meant for people that don’t like to code. I think it’s a missed concept because as we’re showing developers absolutely can use something that’s low code and no code where, because it has a user interface on it, it’s not necessarily bad by any means. So I love the fact that we’re using something that has very clear drag and droppable content.
It’s very [00:49:00] easy to see the flow of it. Harshil did a very good job with this, and I think more people should be embracing low code and no code tools, just like the ones that he was able to develop.
Becky Peltz: Yeah. Well I know I’m noticing companies all over are creating workflow products and they’re marketing them as workflow.
And they’re basically like this, so it is definitely a thing to keep an eye on. So, what about Harshil’s product got very popular and got even a little scary for him. He was getting called by GitHub because so many requests were coming in. I mean, is this a good thing?
Sam Brace: I think it is. I mean, back to my point.
Like if you’re popular, you’re going to be recognized by some of these larger companies. It might be able to help them to grow, but in the same sense, it shows that people really do want data and sometimes it’s not easy to come across it, or it’s not even something that comes top of mind, like, oh yeah, I remember I did work on that in February and it consumed a lot of time. Because you’re thinking about always what’s next, what’s right in front [00:50:00] of you and being able to combine all of that data into an easy retrospective like this.
I think it’s where, yeah, it makes sense why it was popular. It can make sense why people were using it and wanting it. Anything it’s only a good thing, but it’s also where it can be a double-edged sword, because it’s where if you create this just as a personal project for yourself, and there was no growth plan, obviously attached to that, you just wanted a fun way to visualize data, then yeah, it could come off a little bit crazy.
You’re like, oh, where is this coming from? I never expected everybody to want this, but I think Harshil definitely found a little bit of a disruptor here to get people to think about things in a different way.
Becky Peltz: Yeah and developers are now more into sharing on social media. I mean, Twitter is a huge place to find out things about what’s going on in the world of development.
So this is one thing that you can share about yourself in an easy way.
Sam Brace: Absolutely, absolutely. I mean, we see like at the end of the year, when Spotify comes out with their wrapped, you see tons of people putting on their Instagrams and [00:51:00] Twitter and saying like, these are all the songs I listened to, or this was the artist I’ve listened to the most.
Wouldn’t that be great, if we also saw this happening with Harshil’s project saying like, look at all the cool repos that I built over the year. Like that would be pretty slick, and of course, we got to talk to the guy that made it all. So that would be a really cool thing.
Becky Peltz: And, you know, hiring managers, look at that little chart that he’s got and if you’re applying for a job, you can run this anytime of the year and share it.
So it’s a neat little tool.
Sam Brace: And speaking of hiring managers, one thing that’s actually happened in the world of Harshil, which I love is while n8n, great company, and obviously we showed a lot of it in this episode, Harshil actually went on to go work for one of Cloudinary’s best technology partners:
Contentful. And they’re a fantastic company when it comes to the content management system side of things, especially for headless CMSs. So it’s to say, keep following what Harshil is doing, because he’s definitely making some waves in this space. And of course also can’t [00:52:00] say that our work that we’re doing is to plug a certain person or a certain program, but we also really enjoy the work that they’re doing at Contentful across the board.
So always a company to look at if this is something that you’ve never heard about before today. Excellent work Harshil, congratulations.
Becky Peltz: Congratulations.
Sam Brace: Excellent. So now that we’ve given the world, our key takeaways or things that we took away from this episode, Becky, we also of course want people to know that if you are happy with this episode, you had a good experience, then like and subscribe at all the places where we typically host all these DevJams podcasts.
That includes our Cloudinary Academy, but also on large platforms like Spotify, as well as Apple podcasts, Google podcasts, and many other places. So we hope that you had a great time. On behalf of everybody involved with this episode, as well as all of Cloudinary, thank you for listening to this episode of DevJams, and we [00:53:00] hope to see you at the next one.
Take care. Bye.
Benefits and Factors to Consider with MACH Architecture
If you’re considering a change with how software and technology is managed in your company, particularly with a focus on microservices, APIs and headless systems, this episode of MX Matters is one you won’t want to miss. In Episode 13, Sam and Gary at Cloudinary talk with Tim Benniks, who is the Principal Developer Advocate at Uniform. They dive into concepts surrounding MACH architecture and explain the various benefits, as well as factors to consider, with the infrastructure and solution model. The discussion also covers details around the MACH Alliance – an organization presents and advocates for an open and best-of-breed enterprise technology ecosystem – and the opportunities it provides for vendors, system integrators and developers alike.
Sam Brace: [00:00:00] Welcome to MX Matters. This is where we discuss the changes, the trends that are happening in technology, specifically the visual economy. I am Sam Brace.
I am the Director of Customer Education for Cloudinary and in this episode is our friend Gary, who of course, if you’ve been listening to other MX Matters episodes, you know him as a frequent guest co-host for this program, but also for those of you that are joining us for the first time, he is our Vice President of Technology Partnerships at Cloudinary.
So Gary, great to have you back again.
Gary Ballabio: Thanks for letting me be here, Sam.
Sam Brace: Of course, of course. And for this episode, we are gonna be talking about something called the MACH architecture, which sounds very fancy, very fast if you know anything about mach speeds, but we have someone that is very tied to what this architecture is, why people that are based in all sorts of the spaces that we’ve talked about in the program, as we said, the visual economy, so people that are managing [00:01:00] websites, web presence, when it comes to large spaces of imagery, videography, but also even marketers, creative professionals that have to play in this field with SaaS-based companies, what they might need to know about this new or rebranded type of architecture that is taking place.
Joined with us for this to be able to add some light to this topic is our friend, Tim Benniks, who you’ve probably seen Tim Benniks in another Cloudinary capacity, if you’ve been paying attention to our marketing, our outreach programs, because he is someone that definitely understands how we work as a company, but also an amazing public speaker and has quite the online presence as well.
But his current role is a Principal Developer Advocate at Uniform, which also happens to be a member of the MACH Alliance like Cloudinary is. So we’ll talk about all those details. So without further ado, Tim, welcome to the program.
Tim Benniks: Hello. Thank you so much for that [00:02:00] lovely intro. That was super fancy.
Sam Brace: I, I try. Thank you, Tim. So Tim, let’s break this down. So I’ve said MACH architecture, but for people that are listening to this, they might be saying, okay, well, that’s gonna be like a new form of like the LAMP stack, right? Or maybe the Jamstack. Like, is that the same thing or is it slightly different?
Tim Benniks: Oh, wow. We are starting with the best questions that are hard to answer. Like architectures can go so many different ways and MACH is just one of those iterations. And you just mentioned in your intro that it’s maybe a little rebranded and that’s actually a really interesting part about it. So the acronym stands for microservices based, API first, cloud native SaaS, and headless, and all these things on their own without going into them right now in this answer have existed for a while.
Right. And now they’re just put together as this magical combination [00:03:00] of awesome as I like to call it. And it’s mainly there because you have multiple streams going on in, building architecture for big brands in the enterprise. And you can range that from monolithical applications to maybe MACH based applications and those have some significant differences that we should probably talk about today. And it’s an exciting and effort changing world.
Sam Brace: Let’s break down that term because as you said, microservices based, API first, cloud native SaaS, and headless. Talk to me about what microservices mean, because I think all three of us might have a slightly different definition of what microservices are. So tell me about the way that maybe the MACH Alliance, the people that are talking on MACH architecture, how are they defining what microservices are, as that M in the overall acronym?
Tim Benniks: All right. So I, I think within this acronym, the microservices is the one that might [00:04:00] be ranging across multiple things the most. And so microservices can be as simple as literally a service that only does one thing. That’s why it’s called micro, right? So it’s a singular endpoint for something that provides you a service.
And how I personally like to see those is they’re stateless and they’re not super smart in that sense. So you have an input, it does some stuff, and then there’s an output. And that can go as small as a serverless function or a Lambda function. For example, in AWS. Towards more, this is an API endpoint with a bunch of different things that it does, but it’s only scoped to one thing.
And so that’s slightly bigger. And so generally microservices are used to connect things up, or maybe you can use them as a small API endpoint to get the stock of a product or the size of an image, or maybe to do a compute, right? Potentially [00:05:00] you want to remove some background from an image or you want to get some metadata from something, you don’t wanna have all that logic in your front end app.
So you just put it in a little microservice, you query, it comes back, you use it. And the beauty of this is that these microservices they’re kind of standalone. So you can code them in any sort of coding language that you want without affecting how the rest of your app is built. So they’re a very interesting approach and I might have offended some people with this answer because for some, this might be much bigger than for others. And so I just gave you my context here. So, Gary, what do you think when I say these things?
Gary Ballabio: I dunno if you wanna. Um, there we go. What, so honestly, like what I’m thinking of, whenever I hear the term, you know, microservice, I’m always thinking about, well, usually that does come with cloud and that does come with API.
Why do we have to call it out separately? There must be reasons why we’re calling it out or, you know, it is called out separately. That’s my big question. Actually, I don’t really have a good answer for that myself. I was actually gonna ask you that question, Tim.[00:06:00]
Tim Benniks: Maybe let’s say you’re building this whole application and architecture and stuff, and there is something that you need that you cannot get from one single vendor or that one single vendor gives you too much or in a different way.
A microservice is something that you built specifically for a task that would then maybe split an order and come back with some information or something that another SaaS cloud system doesn’t do, you can make your own microservice for it. And you can even think about, okay, maybe I need to connect to a legacy surface that is pretty slow, that doesn’t have any caching. I mean, I put a microservice in front of it that then handles that caching for you. That is, for example, in my opinion, how it could be used.
Gary Ballabio: Got it. So it could be a set of APIs even from different vendors and bringing it together as, you know, solving a problem.
Tim Benniks: Exactly. And what I tend to like about this, and this goes a little bit deeper into why this MACH stuff is so cool. These microservices, or at least when you use, let’s say [00:07:00] Amazon Lambda functions or Azure functions, or there’s different names for them, right? They are turned off and you don’t use them.
Hence you don’t pay for them if you don’t use them. It is very interesting. So when you start using them, they wake up, they do their stuff and they go back to sleep. So it’s a usage based payment system there. And that is a very interesting thing because on the other side, on the monolithic side, your server is always on with all bells and whistles, even if you don’t use them.
So if you think about environmentally friendly energy usage, consumption, stuff like that, it’s, it’s a very interesting concept.
Gary Ballabio: Since you brought up the monolith term, first of all, it might be good to define that for some of our audience. But in addition to that, maybe you can go through your thoughts on how the industry you think is going to evolve as more businesses adopt headless architectures, or MACH architecture, what will happen to the monoliths? It’s like, do you see it being combined, where there’ll be some architectures [00:08:00] utilizing them as well as headless capabilities or like, where do you see from your perspective? Where do you see things, the way things are trending?
Tim Benniks: Before we dive in, let’s define like what you asked, this monolith thing. Monolith on its own means something that’s all together as one. And so there’s a whole bunch of software that has existed for a good while that was great, this is actually handling all your potential business problems you could have on the web. They would do that with one vendor. So it’s a monolith and we call this a suite. So there’s a whole bunch of services, ranging from servers to front end, to application management, to databases. It’s all one vendor.
And this comes with some benefits because you install the thing. You run. Everybody’s happy. You have accelerated time to market in that sense. And if something is broken, you point a finger to one person. This is my contract, this is my SLA, fix it. So there’s some real benefits there. On the other hand, it’s not super flexible because if you wanna break out and do your own thing, you’re breaking out of how [00:09:00] that vendor has interconnected all these services together.
And then when you need to do an update, it’s no longer possible, or it is. Everything is possible. It just costs you a lot of money and time. And so what we’re seeing now is that these vendors were really great. In like a digital experience platform, you have stakeholders that are practitioners, content editors, marketing managers, end users, of course, and you have all the tech.
And so for the longest time in these monoliths, these suites, the practitioner came first because the marketer needed to be able to go into all these systems, drag and drop things around, have a preview, hit “Publish”, and run, but it gave technical issues for the front end developers.
And if you wanted to scale only one thing, you cannot just lift something out of that monolith and then change only that one and not the rest. Right? So there was this huge change into more IT-first stuff. Developers needed freedom. They were running with headless CMSs because they could make their own front end, completely [00:10:00] separated from that system.
And so now to come back to that question of how will it evolve? I think there is a place for all of this, right? The more MACH-first you go, the more composed you go. You choose the best pieces and you put them together through microservices, for example, or APIs, it also becomes a little bit more complex.
You kind of have to know where everything lives and how it all works. And that’s a valid argument for some companies to not do it, because if you’re fully driven through this “what you see is what you get” kind of approach, and you have trained your people for 10 years in this, doing a big bang release where this is no longer possible or partly possible, it’s, it’s pretty challenging. And, um, there will be a mix because lots of companies still have a bit of legacy and they want to go to this composable stuff because in the end you have so much more freedom because everything is separated. You want a better wishlist system, you just rip the old one out, lock the new one in, and it’s better, [00:11:00] right?
Only that part. So it’s great. But still, now it’s still very IT driven, right? So we have to get these practitioners back in, to also be happy. And this is the area, for example, where Uniform is playing, and this is not a Uniform marketing talk. So I won’t be talking too much about it, but this is where we are playing a little bit.
And because companies like Uniform are there to help you with orchestration of all this stuff together, there will always be a mix. And what I’m personally thinking, and this is my personal opinions or not the MACH Alliance opinion. Let’s be clear on this. I’m thinking that all these monoliths, these suites, they still have a great place because if you think about Shopify, it’s one of these, right?
It’s a website out of the box kind of thing. It’s great. All of that will go mid-market. It will all go slightly down. And all the top market, the big players, the enterprise players that need to have all the specificity, they’ll be doing MACH architectures.
Gary Ballabio: Yeah, it makes sense. I mean, it is [00:12:00] interesting to hear that. So you think it it’s much more of an enterprise play. So I won’t put words in your mouth, but this is my interpretation of what you said.
The trade off there, there’s definitely trade offs on the business side, because I mean, I could hear, you know, procurement people saying I’d rather just buy from one or just deal with, or even finance, deal with one invoice, deal with one vendor, and not have all of these agreements and all these negotiations and everything. So there’s clearly a pretty major tradeoff there.
Tim Benniks: There are some challenges, let’s be honest. And so what we will probably see in the future, if there are going to be consultancy companies that might take parts of these contracts for you and deal with it for you.
And we’ve already seen some deals going on, for example, between… I won’t name any names now, because it probably will change over time and then this does not fit anymore, but you have like headless eCommerce vendors that have a deal with the front end. The deal is one deal as in the front end will just earn 25% off the contract for the eCommerce vendor, and then they only [00:13:00] pay the e-commerce vendor.
So you have these kind of things going on now, and that we’re trying to find our way of what is the best approach here. But generally, if you can solve your business problems better with MACH approaches, which is generally the case, that outweighs the negativity of having to deal with multiple SLAs and stuff like that.
And so I think we are in a paradigm shift at the moment where we are going towards MACH Alliance type architectures, and we all want it. There’s kind of a fear of missing out thing going on almost. It’s a very interesting one. But our minds are still in the place where we think one solution will give us a full chain fix for everything.
While the paradigm shift doesn’t actually tell you that our minds are still a little bit there. We are kind of struggling as a whole in the tech industry at the moment because that paradigm shift like change takes time, [00:14:00] right? And if you go fully MACH architecture, not one of the vendors that you choose will be full chain.
So you have to do more yourself. As a technical stakeholder, you will have to take more responsibility of the tools that you choose. And so there’s many more SI system integrators that are gonna be amazing at helping you choose, and they will bear a bunch of that weight on them of doing that. And it’s, it’s a really cool thing to witness.
But there’s also one drawback. And I kind of coin this term myself that I call the MACH monolith, which is kind of a fun, strange way of talking. But what you see now due to this paradigm shift, everything is headless now, right? You mentioned Cloudinary. You have full coverage of your API completely headless. CMSs do the same.
Ecommerce is doing the same. But in our minds, we still want this full suite approach where I can see the preview of what I’ve been doing. And so what is [00:15:00] now happening? So in between the paradigm, starting to shift and ending to shift, we are now actually seeing headless systems implementing monolith like features to keep everybody happy. There’s a product category coming up where Uniform is playing that helps you with all this, but it doesn’t exist yet other than Uniform and some other players.
And so, you’re starting to interconnect all these MACH-like tools to be able to actually get somewhere. But what happens in a year when everything is interconnected and you wanna change one thing, you can no longer point a finger to anyone. And so suddenly there’s an extra complexity in here because our mindset is not fully composable just yet.
And what I’m hoping and what we’re working on very hard with the MACH Alliance is to actually educate everybody about this stuff, to make sure that people are enabled to actually choose the right tools and how to connect them and what these microservices would do. And what is real cloud native and [00:16:00] what is managed hosting and what is real headless and what is hybrid headless. There’s so many words here.
Sam Brace: You’ve just touched on a lot of interesting points that people need to be thinking about as they’re making these architecture decisions. You raised a really big one that I think I’ve experienced with people that we interacted on a daily basis from like the community standpoint, user standpoint, where there is a fear of missing out or FOMO that’s attached to these things where headless as a term, MACH as a term, those are things that people are saying like, oh, I wanna be a part of that.
Cause it’s buzzy, it’s exciting. There’s movement happening with this. And of course, when they say themselves, okay, this is gonna take more time than maybe they anticipated because it does take time to develop the vendor list for that best of breed and the APIs you wanna bring in to build your architecture. It takes work. It’s not where it’s as turnkey as you’re saying, going with a one stop solution, something that’s more of that monolith type of category. So I think that’s something that people do need to keep in [00:17:00] mind is that all of these terms have conditions that are tied to them and that’s not bad.
It just means, you know, you doing the research, hopefully like listening to podcast like this, it’s gonna keep making people more enlightened to what this could possibly look like if they decide to go down the path of building something with a MACH architecture, 6, 12, 18 months after they decide to make that initial decision.
Have you also experienced something similar with your conversations, maybe in the Uniform space, but also just being a developer advocate?
Tim Benniks: All the time. And the interesting thing here is like, my answers might have complicated a little bit what this whole amazing adventure of ours is about, but it’s actually, once you are through and you have your composable architecture, you never have to replatform again.
You can scale easily. And the benefits start. It’s like raining benefits, but the hump, the initial hump is a bit high and due to this FOMO, people tend to choose quickly because they have used a certain CMS before and [00:18:00] they quickly choose it and then this has an integration filter to the other thing.
So let’s just run. So we have this composable stuff. And so if you go quite fast and make these decisions early without actually thinking about how are my concerns separated, right? Do I maybe need two headless CMSs for global content and local content? And do I maybe need to integrate a DAM solution into one of them or also into the other one?
Or do I separate that out completely? And do I make my compositions in a completely different space? Because a CMS should just be a bucket for data. It shouldn’t actually compose a whole page, potentially if it’s headless, because you might wanna do that somewhere else in your front end, potentially, or in a tool like Uniform that helps you to kind of plug stuff in and replace it in an easy way without upsetting the front end.
And so we’re gonna slowly grow towards that. But what I wanted to say is don’t choose too early and [00:19:00] don’t interconnect too much because you get an indivisible thing and you might in the end want to remove that one CMS and plug in another one. Right? And if that’s no longer possible, you have created your own monolith.
And so, yes, the FOMO is real, but it’s relatively easy to solve if you are learning about how does content modeling actually work. Right? I would suggest make an account at Headless Creator and look how Marcello is talking about how you do composable and how you do content modeling and how do you separate your design from your data and where do you compose everything together?
It’s really interesting.
Sam Brace: And it seems like one thing that you’re saying that I’m very clearly hearing that I hope others, and tell me if you agree with me because I may misinterpret it vastly, but what I am hearing is that if you are inside of a technology office, if you are involved with overall architecture of the company, I think a big thing that you should be doing before you go down this path is getting a good list of requirements from the teams that will [00:20:00] be touching these parts, like talk with your marketing team, talk with your content teams, make sure that you are fulfilling all of their various needs, understanding the pain points, because what I have potentially seen other companies do is they go down the path saying we’re gonna be headless because they like the term, but they don’t realize that the marketing team really loved their CMS.
And so, and they don’t say like, okay, how do we give a lot of the same functionality, but get the outcome that we want from moving to a headless environment? So I think making sure that you’re bringing a lot of people into the MACH conversations will ensure a great outcome as you’re talking about, something that’s highly scalable, making sure that it’s future proof, all those wonderful aspects. But requirements are important right now.
Tim Benniks: At this moment, I’ve made this literally my job. How can we help educate all our lovely community from our technical partners to developers in the field to marketers or decision makers? Everybody kind of needs to find their own vibe [00:21:00] in it and then just run and try stuff. Initially, I might have let shine through that it’s only for enterprise. It’s not really true. Cuz if you have a small website and you just have a headless CMS and you have Cloudinary as a DAM and a Jamstack front end, you have a MACH architecture. My website is a MACH architecture, to be honest, right? It, it can be quite small cuz I use a little serverless function to update my Algolia index.
Oh now suddenly I have a microservice. Right? So the interpretation ranges quite wide. And so it’s relatively easy also to get started.
Gary Ballabio: Just maybe elaborate a little bit more about how Jamstack fits in with this type of architecture number one, and then number two, I’m also curious your, your thoughts on… there’s a lot of great vendors in the Jamstack space, but we don’t see them showing up necessarily in the MACH Alliance or in MACH based conversations. Why is that? And do you think that will change over time?
Tim Benniks: That’s actually a great question because the Jamstack started very [00:22:00] simple and then it became everything. And now we don’t really know anymore. Like literally today I asked in a tweet, can I use this in this framework to build a Jamstack site? And the creator of the framework asked me, what do you mean by Jamstack?
And generally the combination of these three will render you a static site. So you do all the fancy stuff with your new technology, with your front end tools, everything that you want, and then you hit compile. And then in this compile step that happens in your CI/CD server somewhere, rather than just creating you a website that is dynamic, it actually creates you a bunch of files because [00:23:00] the dynamic stuff happens on this CI/CD stack.
And then it just literally uploads almost like an artifact of a ZIP file of your website, like we had in the two thousands. Right. And so that’s the essence and the great thing about that is if you wanna scale a website like that, you just put that file on multiple places and suddenly it’s better. It’s faster.
And also because it’s not super dynamic, it’s literally a static HTML file. The CDN edge that is closest to you will serve that file in like 20 milliseconds. Right? It’s really fast. And because of that as well, it’s really hard to hack cuz there’s nothing dynamic going on. The surface of levels of attack is very low.
And so Jamstack is just a way of how you can build a website that in my opinion is one of the best approaches to it. It’s not [00:25:00] super easy, but it works really well. And so you don’t see it in the MACH architecture because it’s not a microservice. It’s not an API. It’s nothing headless, it’s literally just, I build my website. A or B.
You can also do it in runtime with PHP or with React Native or whatever you want. So it’s just one of the ways you build your site.
Sam Brace: And so if I’m sitting here as a, let’s say, a software engineer, marketer, creative professional, anybody that’s gonna be touching web in some way for my company, my organization, if I was to say like, okay, I love the idea of microservices. I’m able to get the best of breed. I’m able to bring them in API first, which means they’re easy to move in and out of the code as I need to do so.
How do I even figure out who the best of breed is? Potentially looking just through the MACH Alliance list, I could potentially do that and say, okay, these are companies that are affiliated. They understand this type of architecture, but is [00:26:00] that the best way to do it? Just to comb through and be like, alright, I see this vendor here.
I’m gonna do research. Or is there a better way for me to start doing this exploratory stage?
Tim Benniks: As far as I know it, there’s no official list of what a best of breed tool is because it keeps changing. Even if you look at Cloudinary, where you guys work, right? First, it was one big product with all APIs and probably within a while, you’re gonna maybe split it up because not everybody wants everything.
And then suddenly your best of retool is multiple small ones or a portfolio of features, or, and that has changed. Right? And we see that in different places. The question at the MACH Alliance that we get a lot is what is the best blueprint to actually get something to market fast with the best stuff, because we are so used to that sweet approach where everything is handed to you.
And we don’t really reply to that because it’s up to you, what is your business case? What do you need? And then you [00:27:00] find that, and that is really challenging. And so at the MACH Alliance, they’re not gonna say, use this one and not that one, that’s not gonna happen. That’s where the agencies and the consultancies are gonna help a lot.
You can see that a bunch of global agencies or systems integrators are now finding that if we use this combination, we are generally good to go without becoming a one trick pony that always does the same. So they have a golden five CMSs and they have certain DAMs and they have certain PIM systems. And then they look at the problematic that the customer has and they choose the right things.
And then they run. And I can probably guarantee you that in a year or two, there’s much more technology internalized at brands and at customers that I see as a customer, right, but as a brand? And people will have learned much more what they like. And they will like the tech is maturing. The technical stakeholders at brands are also maturing.
And so opinion is gonna come in a bit. Some [00:28:00] researchers come to come in and then hopefully you can maybe get a consultant to help you. And at one point, you know it yourself and then you run cuz you know your business the best. If you are a product owner, you have a certain business problem and for now, it’s just research or ask your friends. But there will not be blueprints that tell you, this is the way because business is different for every brand.
Gary Ballabio: You wanna make sure you’re pulling services together that work together and work well together. There is this underlying assumption because it’s API based, we can get it to work together, but you know, somebody who’s worked in the WordPress world has seen plugins collide with each other all the time on WordPress, right? So…
Tim Benniks: Oh yes. I’ve been there.
Gary Ballabio: So then coming with a mindset, maybe that is, you know, creating some sort of like uncertainty, right? And so if you can ask somebody, what are the best ones to work together? Then you might get into this point where you get to this MACH monolith, you know, like where you’re actually on the same one over and over again.
Tim Benniks: Yeah. And what is really interesting here is that there [00:29:00] is a new product category emerging to be able to deal with that problem, cuz there’s a certain maturity level between how you integrate these things. The first one, the lowest maturity is in my front end, I connect to two APIs. I do two AJAX calls and I build my front end.
So the developer completely decides what do I query? How and when? And then the next level up that’s one higher is more the integration side of things where a headless CMS has an integration field where commerce flows in. So now it’s on CMS level. So the content editor in the first one where the developer connects everything, the content editor has no idea where it comes from.
The second one, the content editor actually knows, oh, this is my commerce system. This is my DAM system. So they know they’re connecting to other bits. And then in the front end they query the stuff, they render it. And then you have the third one, and that’s where all these new companies are gonna come up.
Where [00:30:00] Uniform is playing is the orchestration game, where you have a unified interface that is no code where the content editor actually doesn’t know which system they’re connecting to because it all looks unified and awesome. And so they just know I’m now querying a product or five products or some images and the interface thus reflect where it comes from, but it all looks the same.
And they are kind of plugged in, in a way where the concerns are completely separated because your composition happens in that tool. So you will not have composition or contextual data to a component in your CMS anymore, but that will be in that orchestration tool where you make your composition for a page.
Let’s not dive in too deep here because we can go really deep. Let’s not do that now, but that means to make sure that you don’t create your new monolith, but connect it all to kind of like a middleware layer where you have all the freedom to compose in [00:31:00] no code or where the developers get an SDK that is super open, where we query everything the same way. Suddenly that what works together well is no longer a real question is just what do you like most and what is cheapest for your business? Right? Because it just flows into that Uniform- like orchestration system. And so you don’t have to make an integration. It’s integrated in that orchestration system.
Sam Brace: When we’re talking about MACH, I mean, it’s been a case where we, I think we’ve done a really good job of explaining what everything is in the acronym and some of the things that people should be thinking about before they go into this process. But I think one area that I’d love to get your insight on, Tim, when it comes to the types of microservices that you commonly are gonna see in MACH architecture. I know we talked about content management systems or CMSs. In other conversations that we’ve had, you hear people talking about like e-commerce systems. Like if we think about something that’s very API based like a Stripe as an example, that would be [00:32:00] getting brought into this, but like what types of services do you commonly see being brought into MACH? Like other than those two?
Tim Benniks: What is actually really interesting would be a use case that I’ve worked on a while back, where for example, you work somewhere and they will lease you a car for you. That’s a perk of the job. Imagine this, right? So you go to a website and you get to choose your car, but I also want fancy rims.
I want leather seats and I want a fancy stereo. Your boss is not gonna pay for that. Right? So you have now an eCommerce system, you have a CMS and you get everything on the page. You go to the checkout and how do I now make sure that the car part of what I want to lease is approved by a third party because the job where you work will have to approve your choice because of pricing, stuff like that.
Right? So, but these rims and all that other stuff, you have to pay that for yourself. So what you effectively need is a different route [00:33:00] for getting approval for that car and getting that for free, but then paying the rest themselves, but then still get one car with everything connected. So what you see is you plug in a microservice or a serverless function or whatever that grabs the basket or the order, splits it and then talk to the eCommerce system, talks to the approval system, talk to the payment system, and then effectively creates two orders, puts it back and gives that back to the front end. So you can show, hey, this order you pay for, this is what you got for free. And it has been approved. Now go to the payment system. Microservices are the perfect way to make that happen because this is such a crazy use case. And an eCommerce system is never gonna build that in. These makes sense in this kind of complex use cases.
Sam Brace: And I think that’s where looking at something like the MACH Alliance, but also as you mentioned, an SI, is that with your example, it actually helps you to understand like what the differences between fancy rims and the [00:34:00] differences between the wheels or the, the back like steering wheel, like what are the essentials? The things that I can’t not have, and I don’t wanna miss in that way, you can see the list. Okay. These are the types of things that I have. These are the types of areas that I shouldn’t be thinking about or should be thinking about.
And I think that’s where having the consultant, have a system integrator coming along, they can point out to you. Like these are the things that are essential as part of your architecture. Yeah. And also these are the things that are nice to have.
Tim Benniks: Exactly. And the words, MVP, minimum viable product starts to have more meaning here.
Right? And so you, you find what is minimum great for your business and you find the tools to put together and make it happen. And then you can iterate. And the beauty is of a MACH architecture or something composed like this is that you can choose, okay, this month we’re going to iterate only on that surface that approves my rims or approves my car.
Right. Because you can then only work on one part, make it performing better or add some [00:35:00] features. And then next month you work on another part. Imagine if you had a monolith, you would have to work on one part, but always deploy the whole thing and then do try to test the whole thing and all the regressions that you could have because you’re working on a monolith and you cannot separate things out.
And so it’s really interesting to make a good architecture where everything is composed in such a way that it’s much easier to work on and iterate on and scale even. We’ve seen projects where during Christmas, the wishlist is used much more than actual checkout. That happens later. Right?
So what happens if you suddenly have a million people using your wishlist? You’re gonna have to scale that service up, right? You and I add a bunch of more microservices or whatever, make sure that that works. If you had a monolith eCommerce, you would have to scale up your whole system, including all your databases and how can you scale databases?
That’s really hard because then you have session management. Otherwise you can check [00:36:00] out with somebody else’s basket, cuz you have multiple databases now. And there’s many stories around how hard it is to scale something up. And with MACH architecture, you can just scale one thing and pay more for that one, but not the rest.
And then suddenly is where all this enterprise stuff is gonna make a lot of sense.
Sam Brace: That’s actually a really good point that you’re making there. Cause it is something that we even see from the Cloudinary standpoint where when you have a situation, let’s say that you go through a peak business period, like you mentioned the holidays, or we’ve seen where customers get featured on like Shark Tank. So like, boom, everybody’s paying attention to you. So then your image bandwidth, your video bandwidth, it just skyrockets, but it also very clearly is gonna go down at a certain period of time. So knowing how to scale up that microservice in that case, Cloudinary makes perfect sense. And yes, there are other things that are tied to image bandwidth and video bandwidth, but it’s not where I suddenly have to scale up everything that’s part of the stack.
So I think you’re making a huge connection there and hopefully people are starting to see like [00:37:00] how that can be, where it iteratively grows as your business has those ebbs and flows in traffic, in attention.
Tim Benniks: And isn’t it nice that all these best of breed tools are all cloud based and therefore have their own CDNs and DDoS attack prevention and SLAs?
So when you know images are gonna be hit hard, as an architect, you’re not that worried because you know that this best of breed tool will just deal with it. And if not, you call them up and then you deal with it. And so you’re not like, of course you’re responsible for your whole architecture.
But in that sense, you’re quite safe because it’s not, um, how can you say this? Like, it’s not a pile of rocks that you put on top of each other, where if one is out, everything falls down, it’s actually a bunch of stuff that is just laying in a circle. If one goes down, the rest still works and then you just plug the one back in and the circle is complete again, it’s a very different approach. And so at scale, that’s gonna help you a lot.
Gary Ballabio: It’s really interesting when [00:38:00] you said about, they may all have different ways to deal with, you know, vulnerabilities or attack scenarios. That could be good. I mean, could be bad too. There’s just a lot of like internal people inside of the company who may have…
Tim Benniks: Oh yes. Well, let’s be honest. If multiple things fail, you’re gonna have different processes to escalate. Yeah. It’s it’s, you know what they call it web development for a reason. The word development is in it. It’s really hard. Let’s be honest.
Gary Ballabio: Speaking of which, for anybody who may be working with a monolith right now, or just like right now considering going down the path of this type of architecture, well, what is your recommendation for how they go about doing that? What’s the best practice or the first step that they can take, assuming they’re running in production today?
Tim Benniks: I think there are two ways, and I’m now speaking from experience of working at an SI for a long, long time. And so one way is we’re just gonna do a greenfield big bang. So we let the old system work.
And then in a year, we built the whole new system and then just [00:39:00] replace it. And some companies love that. Others not so much because your stakeholders also want to see progress every quarter, let’s say, or every month, for example. So one way is the big bang thing where you train people separately on the new way of working with it and you just switch and everybody’s happy, but it takes some time and it’s expensive.
And then we have the other approach, which is probably more realistic for a bunch of brands out there is find a way to start your new system, but then integrate the old system a little bit in that. And then, so like I’ve had a project for example, where we had to separate the front end from the back end because a release flow was 48 hours.
And it was crazy. Even for a CSS change, like a styling, it took that long. So we had to separate it. So what we did is we made a new design. That new design was applied to the old website. So all the stakeholders saw, hey, there’s cool, new design, new things are happening. And [00:40:00] at the same time we were building the new system and that new system would then every month or every sprint overtake a page of the old one.
So it’s just a DNS change basically. And so after six, seven months, the old system was no longer used and the new system had taken over these pages and the designs that changed were just maintained in both. So what that means is you’re giving a sort of a safe path towards going to that new thing over time.
And the interesting thing here is if you have an orchestration platform where you can plug in multiple things, you could actually make a new website, all fancy front end, and then plug in the old CMS. Even if it’s legacy in Uniform’s case, we can also handle legacy CMSs. Plug it into the system.
So you can still work in your legacy CMS as you are used to, but the front end just queries it differently. And then over time, certain components just come out of a new [00:41:00] system and certain come out of the old system. So as a brand, you have a safe path toward modernizing things. And also that means on the governance level, you can start teaching people how to edit or marketing things or do data management in the new system, but you don’t have to do it in a big bang where everybody suddenly has to change.
You get your own timeline, shall we say? And that’s generally the safest approach, but you can imagine there’s lots of organization going on if you have to do this.
Sam Brace: I’m gonna take Gary’s question and apply it to the vendor, to the SI.
Let’s say that I’m a vendor listening to this conversation. I’m an SI listening to this conversation. I say, yeah, I actually feel like I align a lot of my values, a lot of the ways that I work with clients, work internally. Maybe I am a microservice. How do I get involved with the MACH Alliance? What benefits do I even have for getting my foot in the door with that overall team?
Tim Benniks: A great [00:42:00] benefit of the MACH Alliance is the fact that there is an alliance of smaller players. Like for example, Cloudinary is not a small player because you’ve been doing it for so long, even bootstrapped. But there’s other players like Uniform that just started and there will be many more smaller players playing against the giants in the field.
Wouldn’t it be great if we had an alliance of where we have validated that all these smaller tools work really well, cuz they had a rigorous process to get in and then we can actually say to brands that want to use it, it’s actually not that scary to go with a smaller or newer company because they’re in the MACH lines, they have been validated.
They have the stamp of approval and that’s a great power to have as a vendor, as a microservice or as a SaaS system if you have been approved and you’re in, you can say, hey, but we also play in that MACH space because we are approved and suddenly you get the foot in the door and pitches are [00:43:00] much easier. And of course there’s a pretty big community around the MACH Alliance.
And especially now that’s ramping up, there’s lots of conferences going on. There’s people that write insights, articles. And so this is one of those things in that community that will hopefully help people. So it’s also just a place to be as a SaaS project or company, for example. To be able to actually get in it, that’s very interesting. There is a technical council, which I am a part actually, that evaluate people or companies, SIs, or a whole bunch of different ones that actually want to come in to this alliance. And so there’s different criteria. Like you can be a vendor like Cloudinary. You can also be an SI for example, like a Valtech or an Epam, like an agency, but we also have a new category called Enablers, which is something like Netlify. They help you to enable to[00:44:00] run your website. And so they’re not actually a MACH vendor, but they help you to make that architecture will happen. Like Amazon could work, for example. And then we have one last one, which is the Ambassadors. And so Ambassadors are individuals that are really excited about the MACH Alliance, but their company is not part of the MACH Alliance or not yet.
And so they’re basically making sure that where they work and in their community, people start to hear about this composable stuff, about MACH Alliance, about architectures. And we have a whole bunch of these ambassadors and they are amazing cuz they have so much knowledge of how to do projects in multiple ways. If they can be an ambassador for the MACH Alliance, they can try to sell it in, but they can also change their company in such a way that they can actually apply to become a vendor or an SI.
Sam Brace: Tim, it sounds like we have a lot of information that we provided to people about what MACH is and with all the things that they need to know about it. In terms [00:45:00] of you obviously being a developer advocate for an up and coming company like Uniform, if people wanted, just to see the latest and greatest of what you’re thinking about, especially around these types of topics, where can they go?
Tim Benniks: Oh, there’s multiple places because nowadays my job is to create content around this stuff. A year ago, I didn’t even think I would do that, but here we are. You can go to my personal YouTube channel. Look for my name, Tim Benniks and you’ll find it. But in the name of Uniform, we’re doing a lot of content to educate around this as well.
So you can go to uniform.dev. You can find this on YouTube also, or on the Uniform website. Because I dropped that name here and there, because it’s such a new, interesting way of working in these architectures and there’s no other options or some maybe, but not wide enough to have spoken about these here.
So I do apologize for saying that name here and there, but it is actually a very interesting thing to have a look [00:46:00] at it, how you can compose with these headless sources.
Sam Brace: I think you have a great website as well. So timbenniks.dev, if you’re trying to get the latest and greatest for what you do, it’s, it’s a well built website.
So you’re trying to see how things are done, as you pointed out, it’s built with MACH.
Tim Benniks: So this website has Cloudinary, obviously. It has Algolia, it has Contentful. It has Prismic. It’s running on Vercel and it’s in Jamstack with Nuxt. So lots of things combined.
I have to talk about this stuff, so I have to work with it as well.
So why not go all over, you know, go for it. And so there you go. And it’s working pretty well.
Sam Brace: Well, Tim. Thank you again. Hopefully we can have you some time back to talk more things MACH, maybe things that are just tied to overall development in this space, but it’s been a pleasure having you on the program.
Gary, any final words for us to be thinking about in terms of MACH from your side of the house?
Gary Ballabio: Not at all. I just wanna thank Tim for the time. Loved hearing you talk and learned a lot from you today, so thank you for that.
Tim Benniks: [00:47:00] Awesome. Thank you very much guys. Absolutely.
Sam Brace: And make sure to come back for our next episodes of MX Matters, we’ll be talking with people just like Tim, the visionaries, the people that are overseeing the changes with visual economy and the trends that are taking part of that. So make sure to Like, and Subscribe, so, you know, when the latest and greatest episodes are coming out, just like this one. From all of us at Cloudinary and the MX Matters team, thank you, and we’ll see you next time.
Demystifying Headless and Static Architecture with WordPress
Join Sam Brace and Gary Ballabio from Cloudinary with Miriam Schwab, co-founder and head of Strattic for this MX Matters episode! They discuss details associated with static and headless architecture, particularly when using WordPress as your site’s content management system. If you are exploring the concepts of decoupled architecture for your website – one of the hottest trends in the web development space today – and trying to decide if it will work for you and your organization, this is a talk you won’t want to miss.
Sam Brace: [00:00:00] Welcome to MX Matters. This is where we discuss amazing things that are happening in the space of the visual economy, whether that’s trends, best practices, case studies and more.
I am Sam Brace. I’m the Director of Customer Education for Cloudinary. And joining me for this episode is my friend Gary, who happens to be the VP of Technology Partnerships also at Cloudinary, Gary, welcome to the show.
Gary Ballabio: Thank you for having me, Sam.
Sam Brace: So Gary, we have a great guest with us here today, Miriam, who happens to be the head, the lead at Strattic. And I’m very excited to have this conversation because we’re gonna dive into lots of different topics when it comes to the concepts of headless architecture, we’re gonna get into what a static site generator is. We’re even probably gonna unpackage a lot of terms like Jamstack and microservices, and even more.
But Gary, before we do any of that, tell me a little bit more about what that means for you as somebody that works for [00:01:00] Cloudinary in a technology partnership role.
Gary Ballabio: I’m really excited to have Miriam here. We’ve been working with Strattic for the last year and a half or so, maybe a little bit more, something to that effect. They’re a great partner of ours. Strattic is based out of Israel and a startup slash emerging company I would say in the Jamstack space, but specifically focused on WordPress. So, we love working with her and her team. Miriam is filled with knowledge about this space and it’s gonna be a very interesting conversation for everybody.
Sam Brace: I completely agree, and I think it’s great for us to just now bring her on board. So, Miriam, do you agree with what Gary said here? Do you feel like this is gonna be the type of conversation?
Miriam Schwab: I think it can be a very interesting conversation. We’ll see how it goes, but I’m excited to be here and talk about all of my favorite topics with you guys.
Sam Brace: So tell us a little more about Strattic. I know that Gary gave us a good rundown of what this is from a high level view, but of course you’re in all of the details. So tell us a little bit more about the company.
Miriam Schwab: Strattic is a new approach to hosting [00:02:00] and deploying WordPress websites.
It’s an end to end platform where the WordPress site is hosted within Strattic, except for that site is not accessible to the internet. And in one click our users deploy a static replica of the site. And that is what the internet uses. Static doesn’t mean, not exciting, not dynamic. It can still have dynamic functionality.
And the benefit of that is that that site, that replica of the WordPress site is the most secure, fastest, most performing and most scalable version of the site that you can possibly have. That’s Strattic.
Sam Brace: I know that you’ve mentioned static architecture at this point, but I also have heard lots of people within this space talking about headless architecture.
Can you define like what the differences might be between something that’s static versus headless?
That’s in the standard headless ecosystem how people approach it. But static and headless can overlap in that the front end of the site can actually be a statically generated version of the content. So some tooling around that is something like Gatsby and other static site generators.
With regards to Strattic, we see ourselves as living between those two worlds. The reason is that first of all, the WordPress site is statically generated on Strattic. So it’s definitely a static site, but also what we’ve done is we’ve completely decoupled the front end of the site from the back end.
[00:04:00] So that also makes it headless. So, you know, some people may agree or disagree with how we see things, but we see Strattic as fitting like pretty much within those two worlds in many ways.
Gary Ballabio: Yeah. Speaking of which, I think it is quite interesting, there’s been a debate that’s been happening on the WordPress side for, you know, I guess it was maybe again, like a year ago or so where there was a very famously at I think it was a Jamstack conference if I’m not mistaken where Matt Billman and Matt Mullenweg were debating over the the benefits, pros and cons of headless architectures and specifically around WordPress as well.
They had clearly, they were representing both sides of that conversation. I think it’s kind of interesting to hear your perspective Miriam of that debate of that conversation, cuz you seem to sit sort of right in the middle of it all. What’s your take on the debate?
Miriam Schwab: That debate is connected to kind of the history of Jamstack and where it came from and how it is positioned vis-à-vis WordPress. Matt Billman, the [00:05:00] co-founder of Netlify, the way I see it is he essentially created the Jamstack approach to kind of be the anti WordPress. WordPress at that time, he started kind of toying with this idea and developing products around it, let’s say 2015, 2016. So at that time, WordPress had been around, I don’t know, 15 years, 14 years, and continued to grow and gain more and more market share, but also continue to demonstrate the issues around managing a WordPress site. And the challenges, which kind of, as they went on became more and more present for users just as WordPress’s market share grew, it started becoming more and more hacked and performance because it’s on what’s known as the LAMP stack, you’re constantly kind of fighting against that architecture to make your site performant. All of that became constant pain points in the WordPress ecosystem. And Matt Billman came along and was like, okay, that’s too painful. It’s also not so developer friendly. Let’s try to figure out a different way to approach web development. And he started to work on and promote this concept of [00:06:00] static site generators.
And then eventually he coined the term actually for Jamstack. So just so you can hear it, Jamstack, LAMP stack, you know, that terminology even comes to be the anti LAMP stack and anti WordPress. From its infancy, Jamstack was basically meant to replace or aim to replace WordPress. And so that debate between Matt Mullenweg, the co-founder of WordPress, the open source project and the CEO of Automattic, which is a company behind WordPress and just full disclosure, Automattic is an investor in Strattic. And Matt Billman, the CEO of Netlify was based on their two seemingly opposing positions where Netlify is like WordPress you know, you did a good job. Your time is done. You’re legacy. Now it’s time to go to the future. And WordPress’ perspective, which is, you know, WordPress continues to be a great product. And there’s a reason that this market share grows so significantly all the time. So we’re here to stay and we’re here for the future. That debate never was shared. They kind of went at each other [00:07:00] almost in a pretty aggressive way. It was interesting to watch, that’s for sure. I was fortunate to have tuned in when it was happening live.
Chris Coyier was the MC, the moderator, and he was just sitting there, like Matt, Matt? It’s like a little bit awkward. But a few things have happened since then. So first of all, from my perspective and who am I versus them? But I’m just saying how I see it is that it’s not either / or, and I think they, in that debate, they kind of were both missing the point. Netlify’s approach depends on a content management system being involved in the stack, it needs a CMS and you can choose many different CMSs. One of which can be WordPress, which is a very legitimate option. And particularly with WordPress powering 43% of the internet now, there, you know, you can’t ignore it. And there’s a reason it’s growing, because it’s so user friendly and just people are so used to it, particularly marketing teams who are the ones who use WordPress sites on a day to day basis. You need to give them their power tools. So that I think that point was missed there. And Matt from Automattic, WordPress continues to grow and I think its [00:08:00] future is assured, but we are in 2022, which is different than when WordPress was originally created 18 years ago. The internet has developed further. Peoples’ needs and demands are different. And there are amazing new approaches in web development that WordPress can definitely look at and try to gain inspiration from.
What I’ve seen since then is that both sides can’t ignore each other and they shouldn’t ignore each other. Netlify did a survey of their own developers, 7,000 developers. And one of the questions was which CMS do you use? And WordPress like blew everything else out of the water in terms of adoption.
Like, and this is in WordPress’ cutting edge, sophisticated developer community. They’re using WordPress, whether they like it or not, that’s what they are. They have to use for the marketing teams or the content managers. And in the world of WordPress, there’s some interesting projects that have come along related to headless and static WordPress, Strattic being one of them. If I do say so myself, it’s interesting. Like it’s weird to call my own product “interesting”, but it’s one of them. But even Automattic, the company [00:09:00] has deployed some headless projects for their own clients and customers. There’s like a convergence or at least a greater understanding that there’s no reason has to be either / or. Everyone can live together and everyone can learn from each other. Netlify shouldn’t ignore WordPress. It continues to grow. It’s got huge market share. It’s here to stay. And for good reason, cuz it’s an amazing platform. And WordPress needs to also look towards these modern trends and be like, what can we learn from here? What can we adopt to assure our future? So anyways, that’s my perception around that debate.
Gary Ballabio: Yeah. Makes sense. Neither can be ignored and both are gonna be part of the future. You know, they’re both still growing.
Sam Brace: So from what I understand, from what you just said, as well just in research that I’ve done is that WordPress can be a headless CMS in that scenario. What do you feel are the pros and cons?
Miriam Schwab: The pros and cons of using WordPress in a headless format are as follows. The pros are that you can gain the benefits around security, performance, and scalability because once you’ve decoupled the front end from the back end, that front [00:10:00] end can run more seamlessly and be more efficient.
And the other benefit of running a headless WordPress and a headless format is that developers like it more. So now, while that seems like, well, does that really matter? It does because developers definitely drive adoption of software. And so the more they like to work with something or in a particular way, that is what they’re going to promote within their organization. And often they’ll win out. The reason developers prefer that is because in that architecture, the front end can be built not with PHP. When you’re working with standard WordPress, the front end theme is built with PHP. And once it’s decoupled, you can use whatever you want, like React. Another advantage is this is relevant for like really big organizations, particularly media driven organizations like news sites, you can create a site that’s more API driven and then pull in content and information from different sources in maybe an easier way, which is kind of what React allows you to do to a certain extent, maybe better than PHP, although, by the way, I’m not convinced. But this [00:11:00] is often, you know what is said. And then the content is more portable and more malleable and just that can make it easier to mesh different content together.
Sam Brace: You mentioned something here though, like, so you’re talking about security and performance being increased when you moved to headless in the WordPress environment. Break that down for me because to me, I would feel like if you keep everything as is with WordPress, that actually would be more secure because you’re not pulling in all the different API calls and all these different places. But that’s of course me being a layman, not knowing the topic of the way that you do.
So what exactly are the benefits from security and performance by moving to something that’s headless?
Miriam Schwab: When you’re running WordPress in the headless format, the backend is not as visible or as, okay, it’s definitely not visible, but it’s also not as accessible to the end user who’s visiting the site because it’s somewhere else.
And so what are the causes of WordPress security issues? It’s when you’re running WordPress in a standard format, you have a lot of layers of potential [00:12:00] vulnerabilities. You have the LAMP stack itself, all of which is generally comprised of open source software and, you know, functionality that needs patching that can have vulnerabilities.
So that’s those four things, the LAMP. And then you’ve got WordPress itself, which is actually pretty secure. If you’re running a WordPress site just on its own, there’s very little to breach, but still every once in a while, there’s some kind of security update that’s released.
And so just having that, there’s a window of opportunity for hackers between when a vulnerability is published and people update their site. So you do have that window there of potential vulnerabilities. Then there’s all the plugins that people install on their sites. Plugins are the great source of power for WordPress users, because they can just like install something and then they’ve got new functionality without having to use developers, et cetera.
And there’s a lot of plugins that people use as like the main components of their sites. So some examples of that are Yoast SEO or Rank Math SEO. Elementor page builder, other page builders or form plugins. Like it’s just you, they [00:13:00] can’t run their sites without them. And they shouldn’t run the sites without them.
They are really valuable plugins, but the more plugins you have, each one is a piece of software in and of itself that could potentially have vulnerabilities. So you have to have like a really disciplined regimen of patching and updating. And if you don’t on time, then you also have a window there for hackers.
So when all of that is not there, meaning not like as accessible to the internet, so you’ve removed a lot of the attack surface of WordPress. But in standard headless, and this is not the same as how we do it in Strattic, we do it differently. In standard headless, that WordPress admin or backend still always has to be up and running because it’s being pinged and accessed for its APIs to pull data into the front end of the site.
So it is accessible because it’s accessible from the front end. And one of the emerging security threats on the web today is API security. So we’ve just shifted the attack surface to something else essentially. [00:14:00] And then performance can also be an issue in a standard headless format because that front end of the site is pinging those APIs. And if not done in a very efficient way, it can actually overload that WordPress back end also, and then cause performance issues, which would then impact the front end. So headless offers a level of improvement for those aspects of WordPress, but doesn’t solve for them completely and they’re still there and they still need addressing to a certain extent even in standard headless format because the WordPress backend is always running.
Sam Brace: Does that mean that when you move to a headless environment with WordPress, does that mean that you can’t use plugins or does that mean that you just use ’em in a different way?
Miriam Schwab: That’s a really good question. Actually, a lot of plugins, you can’t use them anymore. So basically anything that impacts the front end of the site, like any plugins, I’ll just use Elementor again as an example, Elementor brings a lot of power to content managers, cuz they can just quickly lay out a page, design a page and they don’t need developers and they can see what that page will look like on the front end because the front end is completely tied to the back end. But in a headless [00:15:00] format, doesn’t matter how beautiful the pages are that they lay out in the back end, that will not be applied to the front end. So a lot of like functionality that’s easy to get in WordPress just becomes not easy to get in headless and you end up having to reinvent the wheel with so many things that we just take for granted in WordPress. So yes, you can’t use a lot of plugins in the headless architecture on WordPress, or you can, but you just won’t gain the benefit.
Sam Brace: And I guess, depending on who your audience is, that could be either a pro or a con, right?
Because like, I would see like some IT administrators would be like, “great! We don’t have to worry about security coming in through all of these plugins!” But then also as you’re pointing out, marketers, which are typically the main audience for a content management system, they are probably used to having Yoast, an amazing SEO plugin that’s used probably for at least a good percentage of WordPress instances, then that potentially pulls ’em away from the equation.
Miriam Schwab: I do just wanna say that Yoast actually has a headless implementation for its plugin, but that’s because they made the effort to do it. But still you [00:16:00] can’t just install it and be like, oh, well now it took care of everything, which is how it is on regular WordPress. You still have to tie it to the front end. And I think that it’s a much more limited support. Like Yoast has so much functionality and capabilities that replicating all of it for headless, I can’t imagine that they’ve done that, I don’t know for sure. But even so, let’s say they have, you still have to tie it in and that depends on developer resources to the front end. And so you’re in some ways still reinventing the wheel.
Gary Ballabio: What’s your best practice recommendation?
I mean, there’s a lot of websites out there. You mentioned 43% of the world’s internet websites are built on WordPress. There’s a lot of them that need to go through this, you know, migration to a headless architecture. I’m sure you’ve seen a lot of companies go through this already.
Miriam Schwab: First of all, if you’re exploring headless, make sure you really, really understand what that means. Understand how that will impact your marketing and content teams and your costs.
So for example, if you want to go the standard headless route, and again, this is not with Strattic and I’ll explain the difference, but if you wanna go the standard headless route, it means that if you have a WordPress website [00:17:00] today, you need to throw that website in the garbage and build a new one.
Okay. So that is a cost right there. And then add to that the cost of on average building a headless architected WordPress site costs 50% more than building a regular WordPress website. So there’s an additional cost. You had a perfectly good site you have to throw in the garbage, you have to build a new site and that site will in any case cost you more. Then on an ongoing basis, it will cost you more because stuff that your marketing team could do on their own, they can’t anymore. So there’s going to be greater dependence on developer resources. Plus you now need kind of two teams of developers, backend and front end. And like we mentioned, a lot of plugins that you could have used in the past to just get stuff done in one click, you can’t, so you have to develop it. So you really, really need to understand what that means for you. Do the benefits outweigh these disadvantages? From what I see, the main types of organizations where going headless makes sense are really the large media [00:18:00] companies that are like either themselves news sites or they behave like news sites, or they have many like web properties that all need to be linked together in some way.
And also that the organization already had developer teams that can support this move. And it fits in really nicely with the general company kind of ethos of web development. But really that tends to be larger organizations. I wouldn’t move to headless because of marketing messaging.
So what I, what we’ve seen is that people read about marketing like headless and it sounds cool. And then they’re like, well, this is the next best thing. So we really should probably use it except for that just because people say it’s the next best thing doesn’t mean it is the next best thing for you as an organization.
So it’s really, really important to understand what it means. If a company really wants to test the waters, I would say do it with a small site, some kind of mini site or something like that, or like landing pages, and then see what it means for you to operate for a few months, see how your marketing team reacts because they’re the ones who have to use it on a [00:19:00] daily basis. What does that mean for them? Are they frustrated or are they excited about it? And yeah, that’s what I would recommend for companies considering moving to headless.
Gary Ballabio: That’s a good point. I mean, it sounds like a monumental transition.
Miriam Schwab: It’s a really big ask to move to headless just because of those first steps, which is throw away your site now, build a more expensive one. Just that already is like really? Yeah. Okay.
Gary Ballabio: And then it’s when we’re gonna see the return on this?
Miriam Schwab: Yeah, exactly. Exactly.
Sam Brace: Let’s say, as a organization, an enterprise, something along those lines, do they need to be involved with CDNs? Do they need to have a tie to a content delivery network to be truly headless or truly static ?
Miriam Schwab: Once a company’s going headless, then they might as well use a CDN. It’s like, it only brings value. Hook it up into your CDN and then it’s fast everywhere. That’s basically what it comes down to. And you know, Akamai’s like super expensive and just, I don’t know. It powers the biggest companies in the world. It’s not for everybody, but there’s great CDN options out [00:20:00] there. So, on Strattic for example, what we do is we allow users to continue using WordPress as usual. So you get to use all the plugins, all that still works. But it’s containerized and isolated so that all you don’t have that attack surface. Hackers can’t access it.
And performance is an issue because the only people using the site are the team. Click a button, generate the static replica of the site. So it’s just a collection of static files. And then we tie it into a CDN. So all of our users get a Cloudfront CDN, which is Amazon CDN out of the box. It’s immediately tied in and their site then becomes fast everywhere.
So what happens is particularly in a static-ly generated site, as opposed to headless, it’s a collection of static files. So it’s already faster because every page has been prerendered and is ready to be served up immediately. And there’s no underlying processing server to potentially slow things down under load or whatever.
Plus then you serve it through CDN. So not only is it pre rendered and fast already, it means that if I’m in Australia, I’m going to access the replica of the site in the edge location nearest to me in Australia. And if I’m in the UK, [00:21:00] I pull it from the UK. And if I’m in the states, I pull it from the states. In standard WordPress, your WordPress site’s hosted in a geographical location.
So let’s say it’s in Texas. Means that people far away from Texas actually have to kind of travel across the world to get that data and pull it back to them. And that creates a level of latency. So CDNs offer a lot of benefits. They do need some management. So for example, when you update your site, you need to what’s called invalidate the cache, so that the changes appear immediately on Strattic.
Gary Ballabio: Tell us a little bit more about where Strattic is going this year into next year if you can, if you get into that a little bit.
Miriam Schwab: We launched some really interesting functionality over the last little while. First of all, we have a new dashboard for our users. First in order to access the WordPress site, our users log into Strattic and we have a new dashboard, which also adds some additional functionality. For example, they can trigger backups from there and things like that, but also you can see who did a static publish and you can see what type of publish it was. In Strattic, we offer incremental builds. In this world of Jamstack and static site generation, one of the biggest challenges are larger sites because generally in order to update the site, you end up having to publish the whole site. And that can be a very lengthy process, particularly [00:23:00] for larger sites.
So what we rolled out in Strattic is in one click, our users can choose to do partial builds, like based on whatever they updated. And so that goes much faster. So if I write a new blog post. I can choose to only update the blog homepage and any related categories. I don’t actually choose it.
It’s actually like, that’s how it works. You just do quick publish and it does that for you instead of publishing the whole site again. We also have something called selective publish, which is literally like, I’m on this URL. I’m writing this blog post. I just need this to get updated or go live. Click. Done. Very, very fast.
So that’s this, those features are actually unlike anything that exists in this world of static site generation. So going forward, we have some interesting and practical things on our roadmap. So, we now can support larger media sites, but we can’t support really big media sites yet because they still, even the faster publish takes a long time with them.
So, we have some really exciting and interesting, innovative ways that we plan to support them. By com component… I keep saying this word that I think I’m making up, but I can’t [00:24:00] actually say it myself component componentizing
Sam Brace: I like it.
Miriam Schwab: so taking parts of the site and, and making them into components that are then pulled in rather than like having to publish everything and optimizing our own, our published speed in general. And we like to roll out initial steps in supporting WooCommerce, which is the largest eCommerce platform.
We have WooCommerce sites running on Strattic, but they use a third party headless shopping cart cause the shopping cart’s very dynamic, but the catalog and everything works fine on Strattic, but we just need to solve for that. And some other interesting things around workflows like for example one click rollback of the static version of the site. All of our users have two static sites actually. They have like a staging static and a production static so that they can make changes, test them on the staging static first, and then only then deploy them to the production. So, you know, you don’t add a plugin. You’re like, this should work great. And then you deploy to your public site and you’re like, oh, oops, actually. It’s not like perfect. They need to tweak it. So this way you can do that. So the idea is to be able to [00:25:00] publish from this preview static directly to the public product static and some other enterprise level features that our enterprise customers have been asking for.
So, yeah, so we have very exciting, big features and smaller features, which in many ways are revolutionizing this space of static and headless WordPress.
Sam Brace: I can definitely see the benefit of that, Miriam. Cause I’m just thinking about like large e-commerce sites that we buy things from. They have millions of products and if we’re saying we need to generate millions of products with every deployment, and I would think even in like a best case scenario that would still take at least three to four hours, if you were saying like certain things are done, that’s just, that’s not reasonable to ask. If you’re thinking about someone that’s like tied to the business line to the money and you’re saying, yeah, when we need to publish new stuff, three to four hours, That’s just not a reasonable answer. So it sounds like what you’re doing, you’re almost doing things in increments, the way that you’re breaking this down, rather than having to publish and deploy everything at once.
Miriam Schwab: Yeah, exactly. And also in this world of eCommerce or particular WooCommerce, whatever pain points we’re solving for WordPress, they are more [00:26:00] acute in many cases in this world of eCommerce because the sites are more complex. They have a lot more moving parts, which can negatively impact performance. And on eCommerce, performance is even more important. You know, for actually making sure that people buy from your site. And then security is more of a concern because people are processing more personal data through WooCommerce around shopping, you know, names, email addresses, things like that, that people generally aren’t doing on WordPress. So security’s even more of a concern there. It’s an exciting challenge that that we hope to tackle over the next year.
Sam Brace: One thing that somewhat selfishly that I do want to ask you about before we let you go. Obviously we’re talking about API based companies working with headless environments, and that seems to be static environments too, is where companies like Stripe for the e-commerce side of things. I know we’re talking about WooCommerce and the WordPress examples, but Stripe obviously benefits in a headless situation because it’s API based.
Somebody like Cloudinary, it is where the whole media management side of things, it’s API based. Do you see this as a [00:27:00] good thing, a bad thing? What should people that are deciding to make those decisions about going into headless and static? Is there any like considerations that should be taking about like what APIs they’re using or what companies are affiliating with? Anything along those lines?
Miriam Schwab: One of the great things about this trend in general, and it definitely applies to regular WordPress as well, people try to isolate and be like, it’s only about headless and it’s not true. In regular WordPress, it’s the same. Before founding Strattic, I had an agency that I founded and managed, and even there, our approach was the following. Always use the best tool for whatever goal it is that you have for your site. So WordPress is the best tool for the CMS, for content management, nothing beats it. Totally use that.
Do not use it as your CRM. like, really do not use it. I mean, there’s some great solutions out there, but in my opinion, don’t use it for newsletter management or, you know, emails. Like it’s not built for that. That’s not where it excels. Use the tools that excel for it. Don’t use it for e-commerce. Don’t try to be an e-commerce provider. Use Stripe or PayPal or whatever you want.
[00:28:00] And then I see Cloudinary, at least particularly in relation to Strattic as being the last mile optimization. So we do static site generation really well, like really well, but we do not do image like media optimization or management. That is not our strong point and it’s not part of our offering.
So while sites are going to be fast, after they’ve been published on Strattic, you can definitely gain even further performance improvements by implementing Cloudinary. And that’s why our partnership has always been really exciting to us because we’re not going there. Like we’re not gonna try to be, you know, Cloudinary has been doing this for so many years.
They’re like the best at it, because this is your focus. So it’s not our focus. So with an easy integration with Cloudinary, you get all of the performance benefits of statically generated site. Then, all of your media can be optimized properly and intelligently and media definitely impacts performance and page speed score.
So totally just add that as the last mile. It’s really [00:29:00] easy to do. And then you like covered so much ground. So from that perspective, in terms of looking at WordPress, I see WordPress is kind of like, I don’t know, the center of some kind of flywheel or I don’t know what to call it. And then you pull in or apply the right tools for each need. And so for that component, Cloudinary is a really great solution.
Sam Brace: I hope that people are using this now as a chance, if this is a first time experiencing Strattic, I hope they take the time to investigate the company. And then of course, if this is their third or fourth time that we’re hearing you on podcasts and other blog posts and whatnot, then hopefully they’ve been able to get new perspective from things that you shared here today.
I do wanna make sure that everybody knows that if they’ve enjoyed this episode, make sure they take the chance to like, and subscribe to all the different places where we happen to be. We’re on all the major podcasting networks like Spotify, Apple Podcasts, Google Podcasts, YouTube, et cetera.
And then Gary, it’s always a pleasure working to be on these projects. So hopefully we’ll have you back for another episode too.
Gary Ballabio: Same here. And thank you, Miriam. I enjoyed the [00:30:00] conversation and I always love listening to you. I learn a lot from you, so thank you for taking the time. It was awesome.
Miriam Schwab: Thanks for having me and I don’t know if it’s okay if I mention this, but anyone can go to Strattic and sign up for a free trial. No credit card needed and you can totally test it out. So when you sign up, you immediately can install a regular, fresh WordPress website. You can migrate another site into Strattic and test it out by clicking our static publish button.
It’s a third day free trial. If you want to extend it, just chat to our amazing support and they’ll extend it for you. So please check it out, kick the tires. And also we’re always open to feedback.
Developing a Netlify Build Plugin to Optimize Web Media with Cloudinary
Netlify Build Plugins can add powerful capabilities to every build, thanks to an ever-growing community directory! Find out how Colby Fayock – Senior Developer Experience Engineer at Cloudinary – created a Build Plugin that automatically optimizes and converts images on a Netlify-deployed site into modern formats with Cloudinary. Our hosts Becky and Sam explore many topics with Colby in this DevJams episode, diving into all of the code that makes this plugin possible.
Sam Brace: [00:00:00] Welcome to DevJams. This is where we talk about interesting, innovative, inspiring development projects done by our Cloudinary community. And of course, because they are Cloudinary community members, they probably use Cloudinary in those. I’m Sam Brace. I am the director of customer education for Cloudinary and joined me for every one of these DevJams.
Episodes is Becky Peltz, who is our curriculum program manager for developer education. So Becky, welcome back.
Becky Peltz: Well, Hey Sam. Um, I’m really excited to be here. And, and, and, and it was, this was a fun episode because for working with our colleagues here at Colby Fayock, and, you know, he’s always a pleasure to work
Sam Brace: with.
He really is. I got to tell you, since Colby has come on as a member of our developer evangelism, developer relations team, he’s just made such a massive impact. And we normally don’t [00:01:00] profile people that work Cloudinary because they know all the things to do with cloud. But he developed such an interesting project working with Netlify and building a build plugin to automatically optimize all of the images, all of the videos that are being delivered on a web application web.
Via Netlify and it’s something you can even use today. So if you are a Netlify user, you can go and attach this plugin to your account and start using it and getting the nice magic of all of the automatic formatting and compression when it comes to quality for your overall project. This is where we walked through it all with Colby, understanding exactly how he built it, why he built it and not just about the Cloudinary aspects of it, but just developing the overall plugin and submitting it and working with Netlify for so many things that we talk about with him in this episode.
Becky Peltz: And he uses some really nice, um, Cloudinary technology [00:02:00] for accessing remote images. He uses our fetched delivery type and by using them. You don’t have to like, do a big migration to get your images into Cloudinary, to work with Cloudinary. And so I think it’s interesting as you watch the episode to see how he does
Colby Fayock: that.
Sam Brace: Yeah. I completely agree. And it’s definitely where I think there were so many nuggets in this one, guys that I think this is going to be an episode where if you’re doing anything, when you’re working with the JAMstack, when you’re working with images and videos, if you’re. Anything where you’re just trying to understand how do I build this thing to benefit the overall user community of this application or overall site that I really love.
There’s so many things that Colby teaches us here in this episode. So I don’t want to waste your time anymore. I think me and Becky could go on all day gushing about how good this episode is going to be. So let’s just get into the episode and let’s have you listen to it. And then at the [00:03:00] end, come on back because we have some key takeaways for you about the things that COVID.
Colby. Welcome to the show.
Colby Fayock: Thank you so much.
Sam Brace: So Colby, you’re a little bit different than every other guests we’ve ever had on DevJams up to this point because you actually work with us at Cloudinary. Normally we’re talking to people from the outside that are doing really awesome things with Cloudinary, for part of their development projects, but you actually happen to work with us.
So this is a, this is a treat to be able to talk with you about the things that you’ve been doing since you’ve started as part of.
Colby Fayock: Yeah. And it’s been a fun journey so far. It’s only been, I guess, a little over a month now. And, um, I’ve just been having a lot of fun playing with all the different, uh, new Cloudinary APIs that I’ve been learning about.
And, um, one of the things has been this Netlify plugging that I’ve been messing around with so excited to chat about it
Becky Peltz: and happy to hear about Netlify plugins. We haven’t talked to anybody that’s, that’s created one and it’ll be fun to see how that works.
Sam Brace: Absolutely. So before we get into that though, Colby, [00:04:00] I do want to give people a little bit of context.
Cause obviously we know who you are. I knew about you before you started Cloudinary, but in case that our listeners and viewers haven’t been privy to the awesomeness of the Colby, can you just give us a little bit about who you are, how you got to Cloudinary and maybe some of the things that you’re doing here now that you’re a part of.
Colby Fayock: Sure. So I’m Colby Fayock. I made a developer experience engineer. Uh, I’ve been with, again, I’ve been culinary for a little over a month now, but I’ve been talking to the team for a little while now, uh, since right before the pandemic and it finally worked out. Where I now joined the team. Um, I kind of focused on trying to help bring developers, uh, specifically to solve their challenges with media.
So, um, hopefully that’s with Cloudinary, you know, but ultimately my goal is to help the developers, uh, accomplish their goals. Um, I kind of started off as a front end engineer and UI designer and transitioned into. Developer relations, developer advocate, a roll from there. Cause I just enjoy [00:05:00] teaching and helping create content for developers to learn.
Um, so that’s kind of where my journey came from, uh, to this role.
Becky Peltz: Hey, you know, I’ve watched you on a rapid learning path here at Cloudinary too, and I’m interested in like kind of how you learn and how you share what you learned.
Colby Fayock: Sure. Uh, so for me, it’s, I like to learn by just diving in. I like to kind of say learning by doing, um, cause that’s for me the best way to learn where, um, instead of trying to like read through a bunch of stuff, I just like to spin up a new project and try to.
Work my way through the tool, uh, whether or not I’m fumbling through it, you know, trying to work through any of the documentation, just, uh, try to make it work and see what I learned along the way. But that’s proven pretty well for me so far. And then once I do learn that I take that and I try to teach other developers in a, in a way that, uh, you know, I found it helpful to kind of explain, trying to cover some of those details that might not traditionally be covered, um, by other people’s, uh, educational.
Sam Brace: have to say Colby, like [00:06:00] basically about the program, I think your learning style and your, the way that you approach it almost fits exactly how the plugin came about. At least from the outside perspective, because it almost was like day one. Colby’s working for us. They too, the plugin is here. So it was definitely a gateway.
I feel like the learning by doing is definitely something that we had here, where this was your first chance to develop a project to Cloudinary. That was now part of your full-time work with Cloudinary. And you just dumped, jumped in hands. First feet burst into the project, which I was really impressed.
Becky Peltz: I’ve noticed that you are great at asking questions. I see you on many slack channels and you reach out and, and that I think is a superpower. So question our great,
Colby Fayock: awesome. Yeah. I always hope that I’m not asking you too many questions, but, uh, now I’m, I’m eager to learn all these things and try to make it through.
But yeah, I’m a big Netlify fan. And I saw an opportunity there because I tried to search around and see if there was any existing work on that. And there’s not. So I saw an opportunity to kind of both learn about. [00:07:00] Learn more about the Netlify plugging process and, uh, try to build something that would help people get pretty, uh, broad coverage, other applications.
Cause it’s a nice, nice way to fit that in through that process. So
Sam Brace: talk to me a little bit about Netlify, cause we’ve mentioned Netlify in different ways throughout the program. Obviously we have a great working relationship with that company as well, but why are you a super fan or why are you a fan?
Maybe I put too many words in your mouth when I said super fan, but why are you a fan of Netflix?
Colby Fayock: Yeah. So I think Netlify at its simplest. A lot of people consider it a hosting company, but it’s a lot more than that. It’s like an automation auto dev ops. I like to call it a where they really handle a lot of that process for you in terms of taking a website that’s traditionally stored in some kind of get provider like a hub, um, taking that code and deploying it out to the world, but also all the processes around that.
So building that site, um, providing things like plugins to transform that say, uh, the delivery of that site where a lot of those things. Take a lot of effort. If you’re [00:08:00] doing it manually on your own a cloud provider like AWS or something like that, where it’s a really powerful platform, but Netlify just makes that process super smooth.
And it was actually one of my entry points into the JAMstack world where I just, the first time I deployed a site with Netlify, I was just amazed at how easy it was and coming from a team where I had to mainly do that with AWS all the time. And again, this isn’t putting down 80 Ws to be clear. Um, but now if I just make that so smooth, it was such a beautiful thing.
And, um, I’ve always been a fan since then. I
Becky Peltz: think they’re currently referring to AWS now is bare metal. Whereas if you’re working on that, , it’s like you’ve got a dev ops team working
Colby Fayock: for you. Yeah. And no, and I think that’s, uh, like there’s a lot of really powerful things you can do with AWS, but you have to do some of the things more manually, right?
So like as a front end engineer who doesn’t necessarily care about all that stuff, I just want to get my, my application deployed to the world and Netlify is a beautiful solution. So now
Sam Brace: that like, we know that you’ve developed this plugin, we’ve [00:09:00] referred to it, like in 10 different ways and like Ms.
Ancillary way, I think it’s, this is a good time for us to actually talk about this thing. What is the thing you actually developed?
Colby Fayock: Tell us about the. Sure. So I created a Cloudinary plugin for Netlify where, uh, what it’s going to do is on the, within the life cycle of the Netlify process, after the site is built, and you have all of your static files, uh, this plugin will go through and it’ll replace all the images that it can find with Cloudinary images.
So it’ll use your hosting, uh, your Cloudinary account cloud name. It will replace it with Cloudinary URL so that ultimately you’re serving those files from clutter. Now, why would we want to serve it from flattery? Yeah. Standing up here trying to advertise for Cloudinary, but you get a lot of awesome things like out of the box with this.
Um, the two that I love the most, because they’re easy is the auto format and auto optimization where it’s going to gracefully compress your image to what needs to be so that it still looks like a great image, but it’s going to reuse that file format, but also the, the auto format where we can serve modern.[00:10:00]
Image formats to the browsers that can actually support that, uh, which can in sometimes greatly reduce the file size, which is a huge win when you’re trying to serve websites to people all over the world who, who knows what kind of internet connection they have.
Sam Brace: I think one thing that I, that stood out to me was just the fact that like you decided to go the route of building the plugin, like.
But I also know there’s lots of different ways to do this. Like just do like local functions and whatnot. Why did you decide to take the route of creating the plugin and Ms. Case? I mean, other than just being able to understand the Netlify ecosystem a little bit better potentially, but what, what was your reasoning for that versus local?
Colby Fayock: So the biggest reason is just simply trying to make it as easy as possible for somebody to just flip on that switch and serve the images from Cloudinary. Um, just because of that broad coverage, you don’t have to think about how, where the images are, how they’re served. Um, you don’t need any special functions, which of course provides you a lot more capabilities on top of that, such as cloud transformations.
Um, but being able [00:11:00] to do this in such a broad way, just gives so much benefit without really having to think.
Becky Peltz: Well, I think you also discovered that you can take advantage of Cloudinary without having to upload all your images there. You made it kind of a, a lazy optimization through your Netlify plugin.
Colby Fayock: Yeah. Yeah. That’s a great point. Um, so by default, it’s going to use the fetch method, which it’ll take that. Uh, image, whether it’s hosted on Netlify or hosted on whatever other CDN that you’re using for your images, it’ll fetch that image into Cloudinary, and then it’ll serve it and deliver it from Cloudera, but that you also have the option to use the upload features like there’s auto upload and just standard upload where through that plug-in process.
Um, if you prefer to do it that way, it’ll actually go through and upload all those images for. And then serve them, uh, using the public ID from Cloudinary. So you have a couple of different options, but just to make it as easy as possible by default, it’ll just flip it on with fetch and it will just be served from.
Becky Peltz: And you’re, [00:12:00] you’re using your favorite, um, transformations I found on Q auto, but you actually could develop more on this and have all sorts of different transformations added in. Sure.
Colby Fayock: I think I’m pretty like early in the development of it. Like, there’s still some holes I need to fill a for instance, but yeah, like the great thing is you can provide like any kind of configuration that you would like through, uh, than LFI plugins configuration.
So I can really open it up to whatever people want to do with it. I don’t think it’s ever going to be as flexible as using the SDK inside of your application, but there’s still a lot that we can make available right inside that config file and not even have to think of.
Becky Peltz: Yeah, I think you found something that a lot of developers want, you know, they, they want and kind of a simpler way to get optimization into their website, media optimization, especially image optimization.
Sam Brace: Now, in terms of like the development of this, was there any particular frameworks that you focused on or any, like when you were actually going through the building CAF? [00:13:00]
That’s currently not in the plugin, as we can say, if you have all of your images in the images directory, we can redirect them all to Cloudinary and use some clever ways to do that on the Netlify, um, infrastructure, but that’s currently not implemented. And we’re looking to how we can do that in a comfortable way.
That makes it easy for us.
Becky Peltz: Oh, I’ll throw out there too. There is a Cloudinary labs website [00:14:00] where there is an implementation where involving service workers. So if you want to get deeper into front end on that, there there’s some work out there, but this is, this is a wonderful challenge. And, and it, and then for me, I want to, I’m, I’m interested in how you put together.
Uh, plugin, like just the process of getting that going.
Colby Fayock: Yeah. I’d be happy to kind of share the code around it, but I mean, that’s a good point about like the challenges of it. That’s also kind of why I enjoy doing this is I love to try to find these new challenges where I can try to solve them and work through them.
And I ended up learning more about the technology while doing that. So this is, it’s been a lot of fun for me, uh, trying to work through this. Um, but if you want the, I can, uh, open up the code and we can kind of walk through what it looks like. But all you really need to do is add it to your Netlify configuration file, right inside of your project, specify the package name along with your cloud name, but you can either do as an input right inside of that configuration file.
Or you can add [00:15:00] it as an environment variable if you prefer, but then it kicks off that process and it just transforms the, uh, the HTML is. Now to actually dive into what’s going on, uh, the let’s dive into the code itself, um, where here we have the index dot JS, which is just the source of where the plugin kind of comes from.
Um, but with Netlify you have a bunch of different, uh, Entry points into the life cycle. Now the particular one I’m using is on post build, which is referring to once the project is done building, I now have this ability to hook in and run some kind of custom functionality, which is where I’m providing these transformations.
So beyond a lot of the. Kind of configuration of grabbing some of the inputs and the API keys and such really at that point, we tap into the Cloudinary, uh, SDK, where we’re going to start to configure that with all the different credentials and whatnot. Um, but then we look through all the files. We grab all the [00:16:00] HTML files that were compiled as part of that, uh, deep build and deployment process.
And we’re going to loop through all of them and we’re going to update the HTML so that that image source is transformed to a Cloudinary. Now it’s a little abstracted here. So of course not everything is happening here, but we can click right into this and I can start to show what that’s actually, what.
Speaking of that we look through and we try to find all the images on that page. And we loop through all those images. We grabbed the source and we tried to. As part of this get cloud and our URL, which again, I’ll get to in a second, uh, we try to determine [00:17:00] where that image is actually coming from. So let’s click through there.
Cause I think that’s probably the most interesting bit of what’s happening because once we find that URL, we actually set that attribute on the image and we return the HTML as a string. So let’s dive into now get Cloudinary. Yeah. Well, what this is going to do is it’s going to try to determine how you want this thing actually serve.
So, as I mentioned earlier, we allow a couple of different methods where the default one is going to be fetch, which in my opinion is really the easiest because. You can just kind of set up there with not a lot of configuration, just your cloud name and you’ll be up and running, but we’re going to try to determine what that file URL is going to be, uh, because whether or not it’s coming from a non Netlify host, uh, such as your own other CDN, or if you are serving it from Netlify, we need to try to find where that final URL is going to be so that we can pass that into a Cloudinary so that Cloudinary itself can fetch that image for us.
But once we go through. [00:18:00] Uh, the other types are upload where we will actually go through and upload the image, uh, whether signed or unsigned. That’s another option that you have, uh, since, because you do have the option of providing like an upload preset in Cloudinary, and we’re getting very, uh, in the weeds with the Cloudinary, uh, API.
Once we do upload that image similar to the fetch. We return that location where we have our Cloudinary URL and we provide those very basic transformations and we returned the URL, which then again, gets replaced inside of that HTML. So that’s kind of the. The life cycle of the plugin. It’s, it’s pretty straightforward at this point.
Um, in terms of what the flow of it is, where we, we look for all the images in the HTML. Uh, we grabbed the Cloudinary URL representation of all those images and we replaced them. And this
Becky Peltz: is all occurring when you, um, in the build that Netlify is performing.
Colby Fayock: So, so, so [00:19:00] once the application itself is built, uh, like the web app, it’ll take the output of that and it’ll run this on post build function.
If I can navigate back to it. Yep. This on post build function, where then it’ll run all my custom code that replaces the URLs based on that. That,
Becky Peltz: that just looks so nice. Your code is so clean and easy to read. I was also really happy to see you had tests. So when I first looked at your repository, it’s always nice to go in and look at tests and that kind of flags, the kind of important functions that you’re, you’re looking.
Colby Fayock: Yeah. So admittedly, I’m not always the best at writing my test, but I wanted to make sure since I am developing something that I’m hoping is going to get a more broad usage and it looks like I have a failed test there actually. But, um, you know, I wanted to make sure that I am providing a hardened functions so that.
It will actually go through and work with everything that I’m doing. No [00:20:00] matter the changes, especially because as we are trying to add more broad coverage, I don’t want to have some regressions on some of the more, uh, basic transformations that we’re doing within it.
Becky Peltz: Yeah, no, it’s, it really helps to see like w you know what, you’re actually applying these functions to what they, what it looks like.
So we appreciate that.
Sam Brace: So Colby, now that we’ve walked through the code, and this was an excellent explanation of all of it. How does this ultimately translate to someone that would be using this within the Netlify ecosystem? What does this look like?
Colby Fayock: Yeah. So really, if you have your web app in a, well, I guess wherever you have your web app, whether it is and get where if it’s just locally deployed with Netlify CLI uh, you’ll just want to add this package via NPM.
Um, and then you’ll add this configuration into your Netlify. That Tomal is the typical file that I see for the Netlify config locally. Add your cloud name, whether as an [00:21:00] input or as an environment, variable, and really that’s all you need to do. I mean, of course you’ll need your Cloudinary account, but in terms of Netlify, that’s really all you need to do once you deploy it, Netlify will see that configuration and the plugin in that configuration.
And it’ll just take it into consideration as it’s working through the. That’s incredible. Hey, I
Becky Peltz: know you have a demo page too, where you can kind of show this in action.
Colby Fayock: Yes. Let me find which one that is. So this demo is from a tutorial that I actually did for walking through this, on my, uh, on my blog. Um, but really it’s a static, uh, web app where.
Running this plugin, uh, during the build process so that we can kind of see how this is actually working. Now, I’m not going to dive in too much into the code itself. Um, but what we have here is a pretty basic next JS application, um, where I just have some images, images on the page, um, that are getting statically rendered, uh, with the application.
Now, if we [00:22:00] look inside this Netlify dot Tamo file, kind of like I was alluding to before now, part of the tutorial I through. Additionally, how to deliver them with upload. So that’s why we also see this upload, uh, input here. But as we can see, even without that, it’s really just this simple few lines of configuration to get that up and running.
Um, now once that’s actually being served, let me grab the, deployed your L for that. We can see that this is the demo application and these images are now being served from Cloudera. And we can see that by inspecting the URL. And let me make this a little bit bigger just in case it’s hard to see, but we can see the rez.cloudinary.com URL, where it’s providing my, uh, my cloud name and the symbol transformations along with the public ID of that image that was uploaded in.
So my Cloudinary account. When I walked through the demo, I’ll show some other cool things that I like about why this is actually [00:23:00] impactful. Um, but as we can see that there’s really nothing else that I did special in terms of the application, in order to serve these from Cloudinary, I just added that plugin and it automatically serve them for me.
Sam Brace: And what I like about what you’ve done is that it’s also, it, it is, as you’re saying extremely simple in its design, where all we’re focusing on is transformations dealing with fetch format and quality. As we’ve seen also through your code, if one were to upload with upload presets and be able to do cropping and resizing that way you can always tack things on like almost ad hoc to your existing plugin structure.
So it’s not like where someone has a developer would be waiting for you to develop new code against this. They could easily take what you do with just some quick changes to Cloudinary and develop it to fit their particular use case. If I’m
Colby Fayock: understanding it correctly. Absolutely. Now. So the only difference, I guess, would be you’re you’re talking about actually changing the code for the plugin, right?
So somebody could absolutely develop their own plugin, [00:24:00] clone it, publish it to NPM and have their own completely custom version of this. That’s the nice thing about the Netlify functions is really it’s using NPM as a source to grab that package where it can then. Come in and run whatever you code you want on that Netlify build and deploy process.
Um, now the only slight differences Netlify has their plugins directory, and they’re very particular about making sure that, you know, we’re, that they’re installing safe plugins and everything is getting reviewed, um, as part of that process, uh, which is a great process for them to be having that kind of thing.
But yeah, of course anybody can build their own plugin and, uh, have it readily available for their sites so they can provide these kind of transformations. It’s especially helpful. Uh, team doesn’t have certain access inside of their code base to do things like this, where if they still can install on Netlify, they can still provide that benefit, whether it is Cloudinary or some other tool.
And then still be able to work through that with the modern tech, [00:25:00] uh, modern tech.
Sam Brace: Absolutely. And of course of all the clean code that you’ve supplied them as a starting point to if they love,
Becky Peltz: you know, I’m curious because the code really is very clean and it’s easy to understand the process that you’re going through to create it.
But did you run into any roadblocks as you were developing this, anything that you had to learn new things or master
Colby Fayock: yet? So I think the most interesting thing. That I ran into was learning about how, what data was available to me on the net five build process, particularly because we need to have that fully forms, URL for the image, whether or not we’re a fetch.
I guess that’s the only in the fetch case, right. Where we need to pass in that remote URL. We need to be able to know what that final URL is going to be on. Netlify. Um, so I, I talked to the Netlify team and figured out, but they have, uh, a lot of environment variables and configuration available within the plugin ecosystem where we’re able to [00:26:00] find how to create that URL pattern so that we would have that representation of the URL to pass into the Cloudinary, uh, transformation.
Um, otherwise. Because a lot of the images that are on the page might just be slash images slash uh, you know, whatever dot JPEG. So I need to have that fully final URL to pass it into Cloudinary as a fetch. No, it’s,
Becky Peltz: it’s, it’s really nice to see how that all came together and you’re able to work with Netlify to figure out some of those problems.
Colby Fayock: Yeah. And that’s a butter now that buy up too much, but, uh, they’re a great team and they were super helpful with, uh, uh, you know, helping me work through. So Colby,
Sam Brace: when I’m thinking about this overall deployment project, when we’re talking about getting this thing live, what does that ultimately look like?
I feel like it’s something that I don’t know if I’ve even actually seen this from that perspective, having worked with Netlify and whatnot. Can you
Colby Fayock: show us. Yeah, for sure. And I do have a little starter project that I [00:27:00] can kind of work from. So first of all, I’ll pull that up and kind of show what I have, uh, where I’ve used this framework called Astro, which is from the snow team.
But I wanted to use this because I knew I could deploy a static site really quickly, um, and kind of see what this would look like, but what this is going to actually be, I’ll pull up the demo itself for it. Um, where again, I just have a bunch of images on the page and we can start to inspect them. And we can see that it’s just serving this locally, uh, on Netlify, uh, just as if I weren’t doing anything else.
Um, but because this is an Astro, uh, site, what I’m going to do is I’m going to treat it as a starter where what that means is I’m going to clone it down locally, [00:28:00] um, as if I’m creating a brand new project with it, and I’ll show you how to. First of all, how to deploy it over to Netlify, but also how we can actually install that plugin after we do that.
So how I’m going to actually do this is I’m going to use as a starter. So I’m going to head over to my terminal. The first thing I’m going to do is make a new directory for this product. So let’s just call it my Astro Cloudinary, where I’m going to now navigate into that. And if we go to astro.build, which is their website, we can actually see how we can start a new project.
And the way that I’m going to start this new project is I’m going to. Use what’s called a template. Um, so actually it might’ve been on that first page. Yeah, here we go. So we can see that once we have our directory, we’re going to run NPM in it, Astro, and I’m going to actually pass in my template. So I’m going to run NPM in Astro dash dash dash dash template.
And I’m going to pass in my Colby Fayock Astro image gallery. What this is going to do is it’s going to clone down that site that I just showed you inside a get hub. So it can actually [00:29:00] make it available locally for me to start up the project. Now, if you’re familiar with next JS or eating Gatsby, typically you can do this and create the folder, uh, as part of that process.
But Astro actually requires you to do all that a little bit more manually in which isn’t a big deal. It’s just something that to keep in mind as you’re working through it. But now we see that our next steps I’m going to NPM installed. And we can even initialize get, because we’re going to want to actually put this up on how to deploy to Netlify.
But once this is, this is working through installing the NPM packages, which might just take a second.
In the meantime, I can start to create my get hub repository because I know that I’m going to need that, so it can hit new repository. And I called this my Astro Cloudinary. And because I’m going to deploy a project that I already have locally, I’m just going to create the repository instead of adding any of those other files.
But let’s see here once we have all the MPS. [00:30:00] Packages installed, which is taking a little bit of time. I guess my Internet’s a little slurry. Now I can continue on with the process inside of the browser because we can push those changes up once we have the project itself. So I’m going to head over to Netlify and I’m going to log in.
And once I’m in there, I’m going to hit add a new site, which I’m going to import an existing project. Now, as we know, I don’t have anything in this project right now. I probably want to wait for that actually, because one of the cool things about Netlify is when you import a new project, it’s actually going to be able to help detect what that framework is before you use it.
Yeah. We have that locally available now and I’m going to initialize my get repository, but then I can run NPM run dev, and we can just see what this is going to look like locally before we push it up. So I’m going to open this up in my browser and we can see that I have all my images here. Again, I can inspect this and these are all just being served locally.
Um, that’s why they loaded so fast, but we can see that we just have a really basic site. So now let’s actually get this up [00:31:00] into our get repository and let’s get it into Netlify. So now that I have an initialized, I can add it into get hub by adding this remote origin. First of all, and then pushing that up into hub itself.
Once I reload, we can see that we have that new project. So now let’s actually import this into Netlify so we can see how that works. So once I’m in Netlify again, I created a new site. I’m going to hit get hub, which if this is your first time in Netlify, it’s going to ask you to authorize with GitHub, but because I’m already authorized, I can just search for my repository.
We’re once the search actually turns up all those results. I can select that. And like, I was kind of alluding to it already knows how I want to configure this site. Now it does this with all the different frames, the, all the different popular frameworks, at least where with next GS, it’s going to actually tell you, ask you if you want to install the next JS plugin we’re here.
It knows that these are the default commands with Astro. So it automatically puts those in for us. So I’m going to click, deploy. [00:32:00] And in the background with this, this is going to do is it’s going to start to build and actually deploy that site up onto the Netlify, uh, infrastructure, just based off of that get repository.
And because Astro is actually pretty fast, this shouldn’t take too long, uh, to actually. I’m kind of
Sam Brace: mystified right now, to be honest, because like, for people that may have not played with net Netlify and Netlify see a lie, the fact that you’re able to run Netlify dev and it just did so many magical things right there to be able to see everything locally, it just.
I was just, I just I’m, I’m really impressed. It’s really, really fantastic. All of the things that Netlify is doing on the back end there, um, for sure. Am I, the only person that feels that way, like, like when you
Becky Peltz: kind of freak out, I love this product. You can do all of that CLI. And then when you, once you hook up your get hub to it, every time you push to get hub, it’s got a hook and it just rebuilds your project for you.
Yeah. So we’ll [00:33:00] actually see
Colby Fayock: that when I configure Cloudinary, which will be cool. Um, but yeah, I think I kind of take it for granted now because easy it is. It’s.
Sam Brace: It is one of those things where it just like, I think as a developer, I mean, obviously we work for Cloudinary. We don’t work for Netlify. I need to make sure that’s a very, very clear based on how the tone of this conversation has been going.
But, but in the same sentence, like, like if I was trying to easily, you know, spin up a project, the fact that you just showed how easy it was to do this, um, I I’m just, I. Um, I’m very, very blown away. Very, very cool
Colby Fayock: It is amazing. Um, but as we can see, it’s green and it was actually deployed already. So we can start to look at it on Netlify servers, uh, where if I inspect, uh, like we would expect they’re being served from Netlify, um, which is completely fine.
Netlify is a great CDN. But, you know, ultimately we want to see how we can add, uh, optimize this, uh, moving forward with Cloudinary. Now, one thing I do want to kind [00:34:00] of show before we get into that is kind of what we’re looking at inside of the network panel. Now, if you’re not familiar with, uh, what I’m showing you here, this is the developer tools that Chrome provides you and all the other popular browsers have something similar.
But what we can see here is all the different images that are being read. And one thing that I like to pay attention to are things like the size of that image and how much time it’s actually taking now I’m on pretty fast internet. So, you know, aside from that NPM install that we saw earlier, so these times are going to be pretty fast, but we want to see how we can actually improve.
These times, and to be fair, now that they’re cashed, we can refresh it again and see that they’re more normalized rather than that first request, which is going to be a little bit slower until it actually caches on the servers. So let’s leave this page open. We’re going to leave this page open and see how it compares once we actually convert this site to use, uh, the Cloudinary, uh, image hosting.
So what I’m going to do is I’m going to head back over to that plugin. [00:35:00] If I can find it with all my different tabs open of. But what we’re going to do is we’re going to first install our Netlify plugin locally as an NPM package. I’m going to simply paste that right in. And hopefully this one doesn’t take as much time to install since it’s just that single package.
But we can see that the second thing that we need to do is we’re going to need to add. Plugins snippet into our Netlify configuration. Now, what that means is I’m going to actually grab this full snippet at the bottom where this kind of just walks you through how that works, but I’m going to first open this up inside of my editor, which I’m using vs code right now.
And what I’m going to do is at the very root of the. I’m going to create a new file called Netlify dot Tommo. And only way to do is paste in that snippet. We’re here. We’re defining the plugin that we want to use, which is our Netlify plugging Cloudinary, and we’re going to define an input and that input is going to be my cloud name.
So I’m going to specify Colby demo [00:36:00] and make sure if you’re following along that you want to use your own cloud account. So you’re not limited to my demo free. Uh, so just to make that clear, um, but now all I’m going to do is simply add all those files to get. I’m going to commit it. Say adding Cloudinary, plugin.
And a way to push that up, which as, uh, was kind of alluded to here, what’s going to happen is if I refresh the page here, we now see that I have that file there, along with the changes for adding that package to MPM. If we head over to Netlify and I refresh the page here, where if you wait long enough, it will actually refresh on its own.
We can see that we already have a new build kicked off. And that’s because I pushed up to the main branch, which is the default branch for my note by site. You can change that branch and you could even create what’s called deploy previews, where if I push to another branch and create a pull request, there’s a little bit of a tangent.
But if I create a pull request with another branch, it’ll create a separate deployment rather than [00:37:00] deploying to that main, uh, that main domain. But once we kind of wait here for this bill to finish. We can see it’s already published before I dig in, though, let’s click through and look through the logs because what I want to show you is we can see that it’s going through this Netlify build process.
We can see that it runs the build command, which is just running through Astro for us, but we can now see that we have this Netlify plugging Cloudinary on post build event. And that’s exactly kind of how we talked about how this process would work going through. Now. I don’t really have a lot of logs going on here unless you have some kind of air, but we can see that it’s done.
So we want to see. Actually, it looks like when it’s done. So I’m going to head back and I’m going to open this up in a new tab and we can see that the images kind of look exactly like it did before, but let’s open up our inspector or I’m going to look the image and we can see that it’s now being served from Cloudinary.
Let’s actually look at the network tab and see what happens. I’m going to refresh the page and similar to before, after that first request, it’s going to kind [00:38:00] of normalize how it’s being loaded, but we can see if we’re starting to look here. We were originally requesting JPEG. But now we can see that we have a type of Ava is AVF the proper, uh, phonetic pronunciation of it.
But now we have all these Ava files, which are going to provide us a lot of benefits on top of that. Now, if I switch back and forth between these let’s just look at this beach bat JPEG where this original size was 566 kilobytes. Now, if I go back to the. That’s 186 kilobytes. We can see that. Let’s see. We can probably look at the total transferred at the bottom here, where we have two megabytes of those images.
Uh, what the ADA format I believe. And we had 4.5 megabytes for the JPEG format. Now I didn’t do anything aside from installing a plugin. And what that’s going to do is it’s going to automatically optimize and it’s going to automatically serve that modern format of Avis, which is going to give those smaller file size, which is first of all, transferring [00:39:00] less data to the browsers and devices that are requesting that.
But it’s also going to be quicker because you’re transferring less data. So. It’s a really easy way to have an easy performance wind, uh, to optimize those images on your site. And of course, we’re looking through this, nothing looks different between the two sites. It’s completely, it looks completely the same, but you have that auto, uh, bet optimization.
And I should
Sam Brace: clarify something here, Colby, cause you’re showing an awesome example and I’ve loved everything that you’ve shown him. This one thing that sometimes I, when I’ve talked to developers over the years that I’ve worked at Cloudinary, they sometimes think that EFA auto, which is the format transformation that you’ve applied.
It’s like almost like a web P converter or an AVF converter, like, and we’ve seen an example where we took everything from JPEG to AVF, but I shouldn’t really emphasize. He only did that because it found aid. That was the most optimized file. It doesn’t mean that everything will become Avis because there are some times you have a developer.
Who’s like, well, I don’t want all my files to be a w why [00:40:00] should I use that photo? And it’s like, well, it’s choosing the best possible version for what’s going to be there. So it actually, if you ever see a piece for you’re using F auto and it’s. The type didn’t change at all. I say, it’s stayed as JPEG.
That doesn’t mean that actually, if auto didn’t work, it just means that it said what you served originally is what is the most optimal version of that case. So just want to have as a clarification,
Becky Peltz: and just also that you didn’t lose your original file. The JPEG was what was uploaded to Cloudinary. And if you look at the media library, you’re going to see it.
There what’s been what’s happened is. Our transformation was run and you have a derived Ava file. So the Cloudinary CDNs can determine, oh, you’re coming from Chrome. You probably would do well with an AVF. And it’s going to go pull that derive. So you’re not losing your original image at
Colby Fayock: all. And thank you for clarifying those, those little details.
Definitely get lost in translation, but they are very important to that process. [00:41:00]
Sam Brace: But, oh my gosh. It like, it just, it, it really does show like the plugin. Fantastic. It does exactly what it’s supposed to do. You did the right thing by deploying Netlify and working with them. So, um, I’m, I’m very, very impressed.
Very good job holding. One question I did actually have for you about the plugin situation would Netlify being someone that’s has used Netlify before you’re familiar with everything that’s involved with that company and what they provide. Is there any other Netlify plugins that you’ve seen that had actually really helpful for you, for you to see your overall development work?
Anything that you’re saying while people are getting into maybe learning about Netlify learning that plugins. Is there any other ones worth exploring that are part of that like official
Colby Fayock: library? Yeah, there’s definitely a bunch. I can’t say that I’ve used a ton of different ones. I know there’s an Algolia one, which is a search.
Uh, it provides search onto your site. And part of that process it’ll automatically, uh, scrape your notifies site. I don’t know too much about that. I haven’t used it. I just heard cool things about it. But one [00:42:00] thing, one that I really enjoy is there next JS plugin, which it’s kind of behind the scenes.
Cause you don’t really think about it where if you’re a next JS application developer, which I love next year. Yes. When you deploy it up to Netlify part of the issue is a lot of features and next JS aren’t kind of JAMstack friendly or Netlify is really on the JAMstack static web kind of thing. Right.
Uh, plus Lambda functions on top of that, where next she has has some server side rendering and, um, Capabilities on top of that. But what they’re, what they’ve done is they’ve taken this next year. Yes. Plugin on LFI where it’ll take your next JS site and it’ll transform it into functionality where it can deploy on Netlify.
And if I’m not mistaken, it has most of the features covered. I know there might be some small ones that aren’t covered. Generally you can display any of your next chat sites on Netlify because of that, where things like server-side rendering, it’ll transform into Lambda functions. Um, probably more technical than just calling a general broad [00:43:00] list of functions.
But, um, that’s probably my favorite plugin and that I use all the time, even though it’s kind of just behind this. No,
Sam Brace: I, I can see that thing super helpful. And actually, Becky, tell me if I’m wrong about this. Is this the first time we’ve actually talked about next JS on any of our programs? I know we’ve covered damn stack projects, but this next feels new to me.
And in this case,
Becky Peltz: I think it is, I don’t think we’ve had anyone on that has brought it up. And I know I use it a lot in training to put together, you know, when you’re working with react and you want to like, say, put a video player up on a page. I like that. Just for the fact that I don’t have to get a router.
I don’t have to set up a router. And so I love I’m right with you on next JS was created by versatile and you can deploy it there, but for some reason I’ve put together next JS with Netlify in the way that you’re describing. So, yeah.
Colby Fayock: Yeah. And varicella is another great company. Um, nothing against them. I just, I’ve always been a Netlify fan.
[00:44:00] Um, Prefer it for whatever reason, maybe it’s just the UI or something. And, um, I, I have no reason to switch, so I keep the plant there and they’ve been amazing with, uh, keeping up with the next shift development, um, to make sure that the features are. Yeah.
Becky Peltz: I have a feeling there’s a laziness about developers, where when we find something that works, we stick with it for awhile.
Sam Brace: sure. So now that you’ve developed this plugin, you’re diving into all things Cloudinary course and your day-to-day work. What are, what are the next things? What what’s next for the plugin what’s next for Colby?
Colby Fayock: Yeah. So I think the biggest thing in terms of the plugin is I want to try to provide more, uh, broad coverage out of the box.
Coverage, uh, for your application. Um, but ultimately I want to try to make it as easy as possible to just, uh, put Cloudinary on your entire site because of the awesome optimization that you actually get for performance on it. Um, for me, you know, I want to keep trying to find. Different things that I can do with Cloudinary.
I’ve been having a blast learning about, uh, all the different tools on it. Um, and that’s not me here trying to plug Cloudinary. Um, but I’ve just been having a blast with it. And I can’t wait to keep digging into things like.
So congratulations to you. And I’m so happy that you could be part of this.
Colby Fayock: Thank you so much. Yeah. [00:46:00]
Becky Peltz: Yeah. It’s been great working with you and I’m really happy that we could have you on this program. And as Sam said at the beginning, you’re the first to appear here that works at Cloudinary. So
Colby Fayock: I consider it an honor.
Sam Brace: There. As I mentioned at the very beginning of this. You saw it. There’s so many things that we talked about with Colby that just, when it comes to web development, it’s going to make your life easier to pick up some of these best practices and tips and tricks that he provided. But I think the first one that I have to stay in, I need to indicate I’m not paid to say this.
This is just because how much I believe it to be true. Netlify is making it so much easier to deploy your web projects then. Any time before today, because it’s just where you have to do certain things, but the certain things are very small and then once it happens, it just the deployment process. It just it’s easy.
And we saw it with Colby’s project. [00:47:00] Becky. Do you agree easy? Oh yeah.
Becky Peltz: I am a big fan of Netlify and I, I feel almost like I have a dev ops team of my own when I’m working there. They do all the building. You can pull in these, um, plugins to add extra functionality. And they make it pretty easy to configure.
You can run it from the command line. There’s just a bunch of things that make it a really a pleasure to work with. Netlify
Sam Brace: I agree. And you, and you said something that’s very true. I have worked with Netlify CLI I’ve seen it. I’ve talked to people that have developed it. It’s awesome. So if you haven’t had a chance to touch the Netlify overall system and ecosystem of what they provide in not just with some of the things that we should, but otherwise.
Take the time to do a little bit of investigation. I think you will be impressed like the way that me and Becky are. And I also think back to what Colby set out to do with this plugin. One thing, this is proving, and I think in general, what the efforts [00:48:00] of our cloud and your community is showing is that every project for the most part can benefit from some form of image optimization or video optimization efforts.
So whether it. Getting them to be at the right format, whether that’s changing your JPEGs to web PS or Avis, or whether that’s ensuring that they’re at the right resolution or they’re at the right aspect ratio, any form of optimization you can be thinking about before you deploy and put it out into the.
Is a great thing to be considering. It’s like, I remember back in the day, you’d see people walking around with bracelets that would say WWJD, which would mean what would Jesus do? I almost want you to be thinking of like, how can I optimize this and have this on a bracelet? Because there’s so many cases and I’m not saying you need to do a Cloudinary, but I’m saying you should be always thinking of yourself.
If you were in web development, can I optimize this? And probably the answer is.
Becky Peltz: I think, yeah, we’re, we’re all aware as [00:49:00] web developers becoming more and more aware because of web core vitals. If you’re working in Chrome, you’re gonna, you’re going to be aware. There’s going to be indications that you are not doing things in an optimized way.
Um, and. And then if it’s with you, especially with images and video, these tend to be the things that slow down layout and such or cause large downloads. So once you discover what Cloudinary can do with a photo and Q auto, it’s like, why wouldn’t you use it? You know? And then to have it built in with, uh, Netlify here during your build, it’s it really makes.
Pretty easy to incorporate. So
Colby Fayock: Becky
Sam Brace: we’ve said internally, just to each other, that, you know, even if you see yourself as a lazy person, it’s not hard to upend effort on cue out all your URLs and get it done and just let the system do all the work for you. It’s like it’s passively optimizing as you’re doing this process.
So it’s a good thing for sure. I [00:50:00] think the final thing that I wanted to point out with this is just the. Netlify is they’re showing they have a robust amount of build plugins that are happening, that are touching other types of microservices and other API driven companies like Cloudinary into the Netlify ecosystem because of their bill plugin program.
So I’ve seen them wherever, working with new Relic, I’ve seen them work through Algolia and other companies to help bring that in for helping people with their overall deployments, but also their overall product development. For developers that are saying, I would love it. If this thing could do this thing a great way to do that is to build a plugin or extension.
So whether that’s building Chrome extensions for your browsers, or if it’s building as Colby showed bill plugins for a system like network, Take the time to think about how you can benefit your user and developer community by creating something, just like the way that Colby did. I think it’s a great way to get your name out [00:51:00] there.
If you’re trying to make your presence spelt and shown, but it’s also definitely a way you can contribute back and help people accelerate and optimize their overall developing.
Becky Peltz: Yeah, I think this really brings us to, into integrating the best services in our applications that the cloud offers and it makes it these plugins make it really easy for us to do that.
And I think if you’re working in the cloud, this is kind of the dream of the cloud is that we can just pull the best of breed of all of these different services easily into our application. So this is a really big deal for, for optimizing images and video
Sam Brace: integration. Absolutely. Absolutely. And I think there’s so many reasons why it’s wonderful that.
Because of just the vastness of what the internet has provided with cloud-based services that provided you can really do that best of breed that you’re talking about. Becky it’s now [00:52:00] where with a little bit of research, I can find that great e-commerce system. I can find that great static site generator I can find back to, like I mentioned, Algolia a great way to really enhance all of your search capabilities.
There’s so many things that you can do, but of course you can pull it all in together. Plugins and extensions are a great way to do that from a nice turnkey perspective.
Becky Peltz: And then the other really neat thing is that they’re all open source. So you can go and read the code. You can read their test. You can really verify for yourself as a developer, whether this is something that you want to bring in to your system.
You know, this is the kind of thing that you want to add to your build. So that’s, that’s a real
Sam Brace: plus to it is. I mean, as much as I love marketing teams, there are times where you want to get into the technical details of this before you add it to your system. Yeah. Review a case study or a white paper or a web page description.
So I think the fact that all of these services have open hubs. I mean, we even see it with Netlify. They’ve [00:53:00] had their Jason for publishing the plug-in list right there available on GitHub. So it’s where the more transparency that all of these companies are providing, it helps out developers to see what gaps there may be and how they can fulfill that.
And also, what are we getting into before we get into installation prep? Becky and I, we’ve got our key takeaways here. And of course, hopefully you have your own after watching and listening to this episode, the only thing that we ask of you is tell somebody about this. If you had a good experience. So if you’ve watched this on YouTube or the Cloudinary academy, or you listened to this on Spotify or apple pie, Make sure to like it, share it, subscribe to it if it’s possible.
And then also make sure that you are just readily telling people that this content exists because we love making this content for listeners and viewers like you. And keep in mind that we always are going to be putting out new DevJams episodes from thought leaders, from people [00:54:00] that are pushing forward development projects, just like Colby.
If you are interested in being a part of this episode, if you feel like you are doing something interesting, feel free to reach out to us as well. We would love to talk to you about all the great things you might be doing. And of course, thank you from everybody at Cloudinary, our customer education team there, and of course, Colby and the developer relations team at Cloudinary.
Thank you for being a part of this and we’ll see you next time for the next episode of.
We did it. We did it.
Gamifying Developer Education With TwilioQuest
Margaret Staples, staff developer educator at Twilio, introduces TwilioQuest – a free learning platform that takes developers through gamified adventures. Along with Tessa Mero of Cloudinary’s Developer Relations Team, Margaret elaborates on the platform and its successes, as well as its recent initiatives for extensions from the developer community.
Tessa Mero: [00:00:00] Welcome to MX Matters, where we discuss all things media experience and the trends shaping the visual economy. I’d like to welcome you, our guest, Margaret Staples. Thank you for joining us today or joining me today. Everyone. Um, yeah, I’d love to hear. What do you do? What is your role?
Margaret Staples: Who am I even? I’m Margaret staples and I work for a company called Twilio, um, and we do lots of things.
Um, mostly we make communications APIs. So if you were creating an app and you want to add some sort of communication to that, be it text messaging or WhatsApp or Facebook messenger or email or voice, or with all of the communication things that aren’t in person. Uh, we have APIs for [00:01:00] that. At Twilio, I specifically work in a teeny tiny team.
Uh, that way it makes our educational video game, which is called Twilio Quest. Um, and I both create, uh, I both write code within the game. Um, and I also run our community things.
Wonderful. What sparked Twilio quest and how has it evolved over the last. So four years
it’s more than four, more than four, but yes, yes.
Okay. So, um, the Twilio, none of the history didn’t used to exist, but it was born out of something called the developer education team. And the developer education team was originally tasked with creating and maintaining our documentation and also running our training programs. And Twilio Quest was originally created to be the curriculum for those full day training programs that the education team would run.
And in its first incarnation, it was actually just a webpage that was a gamification of a collection of micro [00:02:00] tutorials. Um, and every micro tutorial would accrue experience points. And you had like a little avatar that you could like that if you got loot drops, you could like equip your avatar. But it was really just a website with like some, uh, 16 bits gamification elements to it. Um, and that was actually created by, uh, my, my fellow Twilio human Kevin Whinnery. Um, and, uh, it was actually, it’s really funny cause like in Twilio we’re, we’re, we’re very much, one of our, one of our mottos is keep it weird. Um, and so specifically on the developer network, which is the team of teams that I work on, we’re a little bit notorious for like, wandering off of the beaten trail. So Twilio Quest is one of those things that we asked if we could do and were told no, and then did it anyway. Um, but then after it existed, it was actually so popular. Um, unsurprisingly developers, like nerdy things, surprise, surprise, um, that it actually became something that we invested in more and more [00:03:00] year after year until eventually it became its own team. And it’s actually a legit like video game, video game. Now, like you can install it and, and on, on Mac, on, uh, on Windows, uh, on Linux and you, you install it as a standalone video game and you run around, um, and you, uh, you play a video game and in the course of that video game, you learn things, in addition to accruing experience points and loot drops and stuff.
Tessa Mero: I respect that so much. And. I just feel it’s, it’s amazing that I got to see how Twilio quest evolved over the years since it launched. And I’ve been to so many conferences and seen Twilio at so many conferences and these Twilio quest workshops get very popular people. Um, some individuals love learning in a gamified way.
So this is. Amazing what Twilio
Margaret Staples: is doing. And this year we actually, we actually did something super cool that you’re aware of, but I’m [00:04:00] going to say it out loud for audience humans, who might not be. Um, we actually came out with an authorizing toolkit for Twilio quest for human beings. That’s me want to.
Content within Twilio quest who don’t work at Twilio. So, uh, we, we made it available to our community earlier this year and sort of like a preview beta thing. And Tessa, you were kind enough to work with me through directly on creating some of our first, uh, external Twilio quest created levels, which is just so amazing.
Thank you so much for that support. It was really exciting to work with you. Definitely.
Tessa Mero: An easy way and a free way to be able to create your own content, whether it’s developer related content or other, other types of content. So I’ll definitely check out Twilio quest extensions
Margaret Staples: free and open source.
Tessa Mero: Have you found any, um, challenges with Twilio request extensions and, and something they promise to overcome over time or maybe specific to Twilio quest [00:05:00] itself?
Margaret Staples: Oh yeah, absolutely. I mean, uh, Twilio quest has it’s its own fun, weird collection of challenges. Uh, we, we kind of backed accidentally into creating an educational video game.
I mean, that was not Twilio’s original. Michigan. So we’ve, we’ve wandered into a problem space that, uh, isn’t one that any of us had thought that we would be engaging with, uh, professionally. And so it’s been a very, it’s been a learning journey for us. So, uh, part of, uh, creating these offering, uh, this. Pass for people, um, has been exploring the different ways that Twilio quest can be useful.
Um, so we’ve, uh, been partnering with like boot camps and like code camps and, um, actually, uh, like even, even like, uh, primary and secondary, uh, educators to figure out like how this can be an educational resource that is useful to educators in a variety of different contexts. And each one of those contexts.[00:06:00]
Own set of challenges. So in addition to getting to work with you and Joel with the Cloudinary team, um, I also have gotten to work with some, uh, community humans, including some, uh, junior developers. Hi Arthur. Um, and also, uh, we we’ve been working with a legit professional curriculum designer because one of the bigger challenges that we’ve been tackling is, um, as very large.
Community taught and self-taught developers. Um, we’re not necessarily going to automatically know what makes a great learning experience for a wide variety of, of learners. And so it’s been wonderful to like unpack some of the, the lessons that actual curriculum designer who, who that has been her entire professional career, uh, can bring in and integrate into this, uh, virtual gamified environment.
It’s very cool. You
Tessa Mero: can have community engagement and, and I’m part of the Twilio quest discord, and I’ve noticed it’s growing pretty quickly and there’s [00:07:00] more interest in it. Can you elaborate on the success Trulio quest as had with this community engagement with building all this community and working with all these partner organization?
Margaret Staples: Sure. Okay. So, um, because of the way it started out, um, as just the curriculum for our, our trainings, um, that, that, that actually stayed the core of its functionality for a very low, for most of its life. I would say. Up until the end of last year. Um, the Twilio quest community was really more just the developer community that got excited when there was Twilio quest event available.
Um, and I definitely fed into that because I’m an eighties kid I’m very into like the arcade aesthetic. And I would show up to these conferences with a bunch of arcade prizes, and I would let people cash in their Twilio quest points for prizes. And there was a lot of. So Lizzie Adam, there was a lot of just sort of like affection for the concept and engagement with it, but there wasn’t, there wasn’t a community because there was [00:08:00] no, there was no, um, connective tissue to keep these people relating to each other and investing in those mutual support relationships over time.
So with the discord and with our forums and with these offering tools and with our steady cadence of streaming every Tuesday on. At 9:00 AM Pacific time. Uh, we have actually built up a community of mutual support learners and educators that aren’t just engaged for an individual event, but instead are engaged with the idea of making the technical education more accessible to a wider variety of human beings.
Tessa Mero: So now that Twilio extensions is going to be a bigger thing over time, where will they take the game? Are his Twilio quest going to add more extensions on there? And how,
Margaret Staples: how do you see this? So, um, obviously, you know, I don’t predict it. I can’t tell the future, but, um, talking to the team, I actually, I actually.[00:09:00]
Uh, I actually got to meet with a bunch of my team members in person in Seattle, yesterday, mindblowing, Ooh, blowing people in person who knew and, and, uh, it sparked a lot of discussion about where we see Twilio quest and the team going. And we see three main avenues. Roads coming out of the offering tool kit, um, and there, so there’s the, so there’s the internal product growth like, oh, Twilio has just continued to create amazing tech products over time.
And, and there are just tons and tons and tons of them. And so one of the things that we’re doing with the offering, a toolkit is making it more self-service internally. So these different product teams are more able to create Twilio content, uh, for, for their users to, to onboard the, these new technical solutions that they’re developing.
And then there’s also the, uh, the external, uh, community and, and, uh, organization driven development. So like the content that you’ve created for Cloudinary, we definitely see that [00:10:00] being a growing thing. Um, because. Teaching is the best way to learn for our community and creating a gamified option for learning is a great way for any organization to diversify the onboarding experience, to appeal to more humans.
Um, and then the third piece that we’re really excited to see. Grow is we have just started embracing Twilio quest as an educational platform for more than just technical content. So that’s one of the things that we’ve worked really closely with our curriculum designer on is developing some of the first nontechnical educational content within the game, and both with the technical and with the non-technical educational content.
We’re seeing a lot of appetite. In more traditional educational spaces for figuring out how, how we can partner with educators to make this more of a universally applicable and useful educational tool, because it’s free, it’s [00:11:00] flexible. And if we can make it accessible to educators in a variety of contexts, that just makes all of, all of this learning potential more accessible to more humans.
Tessa Mero: I, I definitely agree. And we both have a background in education. So we have this passion and understanding for, for teaching, especially in, in, uh, creative ways. Um, so that brings me to the last question where. Is Twilio quest headed in the next five years. And you did mention that that’s not something you can predict if you had it your way, where do you think it should head in
Margaret Staples: the next five years?
Oh gosh. Um, so one of the things I’m really. Excited about with, uh, with Twilio quest that I’m certainly hoping we can pursue in the next five years is re-engaging in live events. Um, there’s, there’s so much magic that happens when you, when you can get people into the same room. One of the first [00:12:00] things that I loved about Twilio quest was I found that when I put together a training days using Twilio quest, because of the nature of the platform and the choose your own adventure style of, of.
Learning that it provides. I would see people who are like in their first, their first six weeks of a bootcamp sitting next to somebody who’s been an engineer for 40 years. And they’re both engaging with the same learning platform, but they’re able to tackle the pieces that are right for their experience level and what they’re attempting to learn and watching them support each other.
And, and it’s just, it’s just, it’s just magical to be able to create these experiences where people have. Variety of backgrounds and out of variety of experience levels, you can dig into the same thing and enjoy the same shared experience. So I’m very excited to see how that grows once that as, as the world, uh, opens up again.
And as we all are, are able to start meeting in-person again. Um, but also I’m [00:13:00] just very excited to see this grow as a free educational resource. We just need to be able to make a lot more, uh, cutting edge. Educational concepts accessible quickly. You don’t, you don’t want to have to wait until it can be codified in a textbook to learn tech things.
That’s, that’s too slow for tech. Um, I, I love, I love that we can shorten the feedback loop between, uh, uh, somebody finding a new tech thing that they love, and then turning that into an educational experience that a huge number of people can tap it.
Tessa Mero: There’s just so much potential that Twilio quest extensions has to offer for everyone on a global scale.
So this is very exciting and. Yeah, I want to thank you again for coming on the MX matters show and, and talking a little bit about Twilio quest extensions and Twilio quest. So yeah. Thank you so much.[00:14:00] .
Creating a Work Portfolio with Heroku, Flexbox and Cloudinary
Learn how Sean Morgan – full stack web developer and illustrator – created his work portfolio with technologies like Cloudinary, Heroku and CSS flexbox layouts. Sam and Becky dive into his techniques, showing how he updates the pages via JSON listings of assets in his Cloudinary account and applies contextual metadata in the process for search engine optimization purposes. If you are building out your first portfolio to showcase your work, or just giving it a needed update, this is a DevJams episode you won’t want to miss.
Sam Brace: Welcome to DevJams. This is where we talk about exciting, interesting, innovative development projects done by members of our Cloudinary community that use Cloudinary in those ways. My name is Sam Brace and I am the director of customer education here at Cloudinary. And joining me for every episode is Becky Peltz, who is our curriculum program manager here at Cloudinary for our developer products.
Becky, always good to have you here.
Becky Peltz: Oh, it’s exciting to be here. This is one of my favorite topics here is working on portfolios.
Sam Brace: I agree. And I mean, obviously of course, having a good portfolio is a huge reason why people get hired for freelance work or contract work, or to be able to get hired as part of a full-time piece of work.
But what’s exciting about what Sean’s done here. Our subject for this program is. He’s developed a portfolio to show off his [00:01:00] work as an illustrator, as an artist, but he was able to do this with a lot of development tools that he learned about by going to a coding bootcamp. And you might be saying yourself, Sam, Becky enough of the coding boot camps.
But gosh, they’re a fantastic, because. We are just finding some of the best up and coming talents in this area between episodes we’ve done with Hannah, who now works at DataDog and Jen who now works at Cloudinary. And now of course, Sean, who I think he actually is still looking for his next spot. So. But it’s where he’s putting himself out there as an amazing artist.
And when it can draw beautiful artwork for professional purposes and he wants to showcase that to the world and he was able to do that
Sam Brace: through lots of various technologies he’s learned about,
Becky Peltz: and it’s exciting to see artists making the transition from. Are what we know as illustration, or when we talked with Jen acting and voice into development, it enriches actually both fields.
Sam Brace: [00:02:00] Absolutely. So let’s get into this let’s show exactly how a good work portfolio is developed and how you can do it. Using some of the tools that are going to be showcased in this all the way from just building things with node and using. Yes. And how to use Cloudinary specs technology, and how to deploy the Heroku.
There’s a lot of really cool insights that happen to be there. I’m actually particularly excited to see what you guys think about the way that he was able to show, how to get alt texts from some of the things that he has uploaded and managed in his Cloudinary account for contextual methods. Pretty slick, how he pulled it off.
Becky Peltz: I keep an eye out for how he gets data out of Cloudinary, because he does it using a technique known as fetched delivery, which is great for front end programmers. If you just tag your assets, you can pull them through this fetch system.
Sam Brace: It’s pretty slick. I agree. Definitely agree. So let’s get into it.
Let’s watch the episode. And once we get back, me and Becky have a few takeaways for you. Sean welcome to the program, [00:03:00]
Sean Morgan: right? Thanks for having me.
Sam Brace: So, Sean, I’m really excited to talk to you because there’s a lot of things. I think we’re going to dive into, into this conversation all the way from your experience as a developer, we’re also gonna be talking a lot about your specific portfolio, but I think we’re also gonna have a lot of things that I think developers will be able to extract from this.
Why they probably should have their own portfolio as well. So I think there’s a lot here that we’re going to talk about. I’m excited for it. Hopefully you’re excited for it too. Yeah.
Becky Peltz: And I want to point out to that, Sean, you’re there, our first illustrator that, um, illustrator turned software engineer that we’ve had on this program
Sam Brace: as a good to get.
Yeah. So it is a case where one thing that we have seen in working with. Many types of developers talking to them about their projects. In this podcast, we have seen a lot of them where they have started their career in one [00:04:00] space and then moved to a different space, which is now being a developer in some way.
You started off and you actually are still doing work in this area, but you are a designer. You, as Becky just said, you’re an illustrator. You’re someone that creates art and then you’ve progressed and started bringing on more code related aspects, more automation, more things that are involving API APIs.
Why is that?
Sean Morgan: I find for me, the connection is pretty close. I see them as. Side-by-side analogous. I, uh, in college I had to take a portfolio class to graduate. Um, for illustration, we all had to make our own HTML CSS portfolios from scratch, which is where I first learned anything about coding. Um, but the core of illustration and development I feel for me is [00:05:00] solving a problem, taking it, baby.
Complicated idea. Um, an illustration that could be distilling a book to a cover or a big national chicken campaign into a billboard, um, uh, where with code it’s. I want to make an app that does this very specific thing in this case. Dynamically rendering portfolio. Um, and there’s the big idea. Now I get to do all the fun little noodley, uh, work, uh, that builds up to that.
Sam Brace: like, And honestly, again, that’s pretty forward thinking that your school even decided to do that in terms of the curriculum, in my opinion, because I have seen where people that I know that are graphic designers, illustrators, where, when they’re asked to do a portfolio or talking about like a hard bound book or something where we’re trying to show like the textures of the paper and all of these things, where being able to say like, [00:06:00] The web is where people are going to be learning about.
Sean Morgan: I was terrified cause I never coded anything before and I was always a. I always assumed there’d be more math. And I was not a math kid, um, case in point I went to art school, uh, to avoid math. We, we, we painted, uh, pine cones for my college math class. Um, so I was terrified at the idea of having to code something.
Cause I didn’t know what that entailed and, uh, I th and it’d be. Coding for a design for illustration. It was so visual centric that [00:07:00] I could see the puzzle pieces. Um, as my instructor, uh, explained it and I wound up just take into it, uh, like a duck, like water, duck to water, if that’s the phrase, um, where I was like, I, it just made sense in a weird way.
Just it tickled my brain just the right way. Click into, yeah, I’ve been doing it ever since.
Sam Brace: I love it. And of course you would have never known that unless you had got an exposure to it. So once again, it kind of shows that if you just give people a taste of something, sometimes they might actually like it.
Right. So I’m glad that someone gave you a taste of code. And now we’re getting to this point where you’re getting to talk to us about all the things that you’re working on.
Becky Peltz: And of course in this for a webcast here, we’re going to see that you’ve gone way beyond the basic HTML, CSS and your coding and react now.
So that’s quite a big leap.
Sean Morgan: That’s a fairly new development, [00:08:00] but yeah,
Becky Peltz: but you did that by going to a bootcamp. So how did that come about?
Sean Morgan: Um, I had been thinking about wanting to do more with. Web design and development. Uh, for a few years now I met some friends who were doing it professionally and I just found, I had a lot of questions.
Like what did that job entail? What did that career look like? And the more I talked to them, the more interesting it sounded. Uh, so I asked a friend of mine, Brett, about how he got his start. Um, and he told me about, uh, the trilogy boot camp. Uh, which this over the summer, uh, as most of us were, I spent pretty much all my time in, uh, in this room and I’m like, I could, I could learn something while I’m here.
So I called up my local university and, uh, asked about a bootcamp and [00:09:00] decided to do it one day and jumped right in.
Sam Brace: And so the portfolio that we’re going to be diving more into, into this episode, was that something that you developed inside of the bootcamp or what, was there certain fundamentals that you were able to take from the bootcamp and apply to this portfolio
Sean Morgan: project?
600 lines of code, just to see if one thing was working in at, um,
Sam Brace: I feel like that’s the reason why a lot of people like react. So you’re [00:10:00] echoing a very clear sentiment there. Am I right about that?
Becky Peltz: Definitely. Um, you know, the HTML is essentially a bunch of components. You know, you have your image tag as a component, your give tag and with react or any of the frameworks really, but react is the most popular.
You are building set tags, you know, your own tag, you have your own image tag, you have your own, you know, so that it gives you a lot of power, but it keeps you working within. The framework of HTML and, and all of the, you know, specifications laid down for years about serving it. So, yeah, it’s a, it’s a great way to go.
And like you said, being able to focus on a very small amount of code is way better than dealing with monster code. Yeah. So good education. If, if you’re at the point where you realize that, you know, it’s very.
Sam Brace: So then you you’re working on this project. Well, you’re [00:11:00] learning react as part of the bootcamp in this case.
So then what brings you to say the portfolio? The way that I represent Sean Morgan is going to be with react. What brought you to that? Hi,
Sean Morgan: I’m uh, I try and build a new portfolio every year, just to keep it as fresh as possible. If I have a good year of illustration, I have a bunch of new stuff. Great. If I don’t throw a fresh coat of paint on it for where I send it to a art directors that year.
Um, but I had so many more tools this time. I got to really sit down with a pad of paper and make a note of what, what do I want out of a portfolio site that I hadn’t been able to make myself or haven’t found.
An alternative to, uh, like every year I iterate on it last year I did, um, [00:12:00] I wanted it to scale better, uh, where the images would wrap, um, in a more dynamic way. Uh, so I made individual columns that just went one after the other, uh, as the screen track. That means it was just columns going down. So all my art side to side was hard to place, so I wanted something much more dynamic and I found react and.
CSS. Ooh, uh, Flexbox was the best solution. Sorry, I’m being distracted. So we did detention.
But how did you, how do you feel about CSS? What your,
Sean Morgan: I love it. I was like, I think it’s just the designer and may I like, like, I want to get very noodley with how things look, specific, colors, fonts, just every little thing I can tweak. I want to tweak. So I love
Becky Peltz: playing around. It is really fun. Um, I know I will go out to like code pen and just look at people’s projects.
Cause they do amazing things out there with CSS. And, uh, this is a lot of.
Sam Brace: So talk to me more about Flexbox because maybe this is the first time that some people that are watching this program are familiar with it. What exactly is it and why did it help when you’re trying to display many different types of art?
Because of course you’re not developing all of your paintings, all of your illustrations in the exact same way. They’re not all landscaped. They’re not all poured through it. Sometimes they’re going to be of different sizes. Why did that help with that [00:14:00] portfolio project?
Sean Morgan: So. Back back in the before times, uh, the solution would be to use floats, which, uh, never work the way you think they’re supposed to suddenly something will be behind something or everything will just stack on top of each other and they never work.
And then it’s a lot of trial and error. So Flexbox, I can. Set everything to just start floating or start flowing from left to. Right. And it will break onto a new line. Every time it’s hit the width it’s scales, um, with the window size. Um, and I can also affect how I want things to be spread apart. Do I want everything to be justified?
So everything will just go edge to edge. It will vary the space in between. I can have just space on the end. Um, I can get really specific with what, how I want things to look and how I want things to be [00:15:00] spaced out and played with, um, which. It’s just so, so much fun and so, so much easier than it used to be.
Sam Brace: Well, it seems like also it’s a pretty naturally helpful tool because now, I mean, of course we work for Cloudinary, me and Becky. So we’re going to be talking about Cloudinary just a little bit here, but it seems like a natural tie to say, like, if I want these images to all splay right away, if I’m handling it easily through deployment delivery with Cloudinary, you still have to worry.
Okay. How did he all arrange himself nicely on the page? And so it was kind of like, these are playing nicely together. You handled the image delivery aspect. So now Flexbox takes care of how everything’s spaced and set up.
Sean Morgan: And I also don’t have to worry about, yeah, the sizing, um, everything will thumbnail down to a specific height, um, when it full screen.
So no longer. Cropping images and essentially creating, you know, new lit new [00:16:00] little or images. Part of it, piece of art. Um, I can just have like a full landscape next to a portrait and they’ll build, just have the same height and the width can be whatever it needs to be.
Sam Brace: And I, what you have here, of course, because you’re artists that has a portfolio.
So the way that I look at this is that you of course, want to be able to show your full width, full height piece of art. You want people to see the intricate detail of what you’ve gone and drawn or what you’ve designed. So it’s not like you can just go in and just, Hey, like, Hey, here’s some thumbnails.
Like he might be able to do if like you’re doing something for e-commerce or if you were, I mean, even just a developer doing a portfolio, you want them to get into the artistic detail that it’s there. So it makes a lot of sense that you need to be able to dive into full size and doing that with Flexbox with Cloudinary seemed like it makes perfect sense to me.
And I’m really glad that you did it the way you did.
Becky Peltz: Yeah. And then you’ve also used Lightbox. So you’re able to give us [00:17:00] a nice big picture on just where they click. And I don’t know if you want to bring up the portfolio and have a look at carriers
Sean Morgan: can do
Becky Peltz: that. We can see what we’re going to be talking about.
Sean Morgan: All right. So here we are. Uh, if I scroll down, we can see. Yeah. So it’s all a done. Uh, Flexbox so I just had everything justified to the left side and, uh, equally spread apart. Um, and if I let’s do inspect and we start to already, you can see once it shrinks down a bit, uh, it automatically just everything just, you know, breaks as it needs to, to fit.
And at a certain point, it hit, we’ll get to a break point where it’ll be. You’re ready. Yeah.[00:18:00]
Becky Peltz: Yeah. That looks great. And you’re able to keep the aspect ratios that you, that you created. You’re not having to like turn everything into a template and sort of picture. Yeah. Nice. Yeah. And then you can carry yourself through it with the light box. So that looks really good. Um, and yeah, this is all done this, so, so I guess if we wanted to start talking about your full stack, what you used.
Um, so starting on the server side, uh, what did, what did you use you want to share? Sure.
So. Reacts. So you chill the page.
Becky Peltz: Yeah. You have a note express app. And um, and then, um, this actually you deployed on Heroku. Do you want to talk a little about that using no to express on Heroku?
Sean Morgan: Yeah, I just I’ve, uh, it’s how we, uh, deployed full-stack applications in, uh, the bootcamp, but I just it’s. They worked so well together.
It’s just so easy to, uh, create Heroku app push Heroku main, uh, integration is a super
Becky Peltz: CLI nice. Isn’t it? Hiroko CLI here, you can have a really clear. Understanding of the model, how, you know, you’ve got get hub that you’re pushing [00:20:00] too. And then you’ve got Heroku that you’re pushing to
Sean Morgan: and you can link the two together, which for this one I did.
Uh, so whenever my get hub is updated, um, Heroku will automatically rebuild my, uh, app on the Heroku side.
Becky Peltz: Okay, great. Yeah. So, so, so here at the very back end, you’ve got the note express and then you’re, you’re basically just going to pull. You have a public path pulling index HTML. We’ll look at that. So this is where you’re going to start moving into your front end.
Sean Morgan: So, uh, again, this is largely just the reactive boilerplate. Uh, it doesn’t really start getting fun till we get into, uh, app JS, but, uh, yeah, so, uh, but like, you know, uh, my title, my head or all that stuff is here and then the body. Goes into the room for anybody
Becky Peltz: that didn’t know the react is [00:21:00] going to just take everything you put and apply it to that route ID.
So that’s basically all your, your rendering there. Uh, so yeah, let’s go to, let’s go into app JS. Uh,
Sean Morgan: so, uh, here’s. Pretty much everything, uh, more or less, um, like we were talking about everything’s really clean. Like I have my, you know, uh, the return is all that’s rendered. So my header, my light box, all that, uh, different components, uh, that have the different code.
Um, but just starting from the top, uh, All those different components, uh, from within my code, I use the Axios package to make my call to Cloudinary.
Becky Peltz: Yeah. That’s, that’s an interesting one. I, I see like, uh, there on line 12, you’re using a react hook you with to make your fetch call and you’re using Axios too.[00:22:00]
How did you choose Axios? I mean, cause like there’s a lot of alternatives there for Ajax.
Sean Morgan: Yeah. It’s just the one I was, I become most familiar with. Uh, I’ve done much and more robust full-stack applications. I’ve done much longer, uh, and more complicated, uh, pull push requests. But, uh, as this is right now, all I need is to.
Pull all the data from Cloudinary. So just a simple, uh, async await with Axios, uh, allows me to do that. Yeah.
Becky Peltz: And that’s an interesting call you make there in, in Cloudinary. That’s our, we’ve got, you’ve got, if you could see that list in there, that’s our list delivery type. So instead of delivering, uh, an image or a video where you’re going to deliver a list, Yeah.
Do you want to talk about, about how that works? Like how, how that [00:23:00] went like that name illustration. Jason, where does that illustration come in?
Sean Morgan: So the illustration that Jason, uh, list is, um, uh, the illustration is, uh, the tag for my, uh, Cloudinary database. So anything that I tied with that is being WhatsApp.
I pulled out here and being added to my image state. So on load, uh, the page, well, Penn Cloudinary pull everything from that list back to the front end, uh, which will then be mapped over and rendered to the page.
Becky Peltz: Yes. Yeah. So, so essentially, um, how did you get your images up into clouds?
Sean Morgan: I can show you that right now.
Um, so I, uh, just created my list. We can go in here. Um, [00:24:00] I’m just doing a simple drag and drop, add a new image. Um, manage. Is that what I want? Yes. Illustration tag. Okay.
Becky Peltz: Yeah. So that’s, so by adding that tag, you’re automatically going to pull it with your, with your Axios call to the list state P list delivery.
Sean Morgan: Yep. I can add a title and a description,
and now all of this data will be available, uh, in.
I should have done it, right. If it’s safe. Nope. Still there. Okay. And all that data will be available in the light box as an alt tag. So
Becky Peltz: it’s very dynamic. Then you just do your [00:25:00] upload, you tag it and now it’s going to pull it nice. Yeah. Yeah. And if you, if you wanted to leave it out, you could just remove your tag and then it was.
I wouldn’t come forward. Exactly.
Sam Brace: I like the way that you’re using tags here, because in a lot of cases, when we talk to other people that use clot and URI, they always think of tags on those as internal, not necessarily external. So thinking about it to say like, oh, if I need to find all of my illustrations within it, like almost like as a digital asset management system, or just as a way for you to find things for your own list purposes.
But the fact that. Taking those tags and using those for external display. So that way it dynamically updates, as long as you apply a tag. Um, I think it’s a really good use case to think about it for developers, because now it ensures that when you have new content, as long as your tagging system has been set up the right way, your website can continually be updated with the freshest, newest stuff.
So, yeah. Very good workshop.
Becky Peltz: Yeah. [00:26:00] I think that is, that is really cool. And then, um, I think let’s maybe take a look at your index dot JS. So, or your app JS is set up to do the fetching and lay out your components what’s going
Sean Morgan: on. So, um, again, this is mostly a high Rosie, um, uh, reactive. Boiler plate. Um, the app, uh, here is the app jazz.
We just looked at that’s what’s been rendered. Uh, the one thing I added here is the simple Lightbox package. I downloaded it and added it around my app. So all images that are rendered within my app can be affected by, uh, my light
Becky Peltz: box. That’s really neat. I mean, that’s one really great thing about working in react.
Isn’t it is there so many people developing and it, you can find. Libraries and get [00:27:00] that functionality. Um, that’s really nice now. Um, what about line 17? We’ve talked about that a little. You get that with your create rack, create react app. You’re going to get the, uh, core web vitals, uh, computing kind of built in.
Yeah. So what’s going on there though. We’re here, we’re making a call to, to a function and not function. You’re importing it. So, and again, I think if we looked at, if we opened up that report, yeah. This is just boiler plate from, from react. Right. You don’t have to write any code for this and you can see it’s doing get CLS, get FID.
These are all of the new Google. Webcore vitals, you know, to help them figure out whether you’re a good UX designer and whether they want to like, recommend your page, therefore getting [00:28:00] your, your, your stuff ranked higher for SEO. So, so, so what happens? What can we see? I mean, we talked a little about trying to console log that
Sean Morgan: yeah.
We, uh, where it was that, so yeah. Threw in a console log there. So. I can refresh this just in case sometimes the council likes Meredith autumn. Yeah. I see that. Yeah.
Becky Peltz: Yep. So if you look at those, we can get the numbers. And then, um, of course like, um, some of these I’ve noticed will show up right away in some later they’re basically like it’s like firing an event for Google.
They, they kind of, you get that. When it’s available, but those numbers you can now, like, it makes it really easy as a developer to immediately look at those numbers. And then you can kind of go check on the, what, what Google is looking for to see if you’re staying in bounds. [00:29:00] So it’s kind of a neat, neat thing about that.
Create reg. Yeah. Yeah, I’m glad.
Sean Morgan: Thank you for showing me that now. Now I know
Becky Peltz: after I saw your code, I didn’t realize that react was doing that. So that it’s kind of a two way learning there.
Sam Brace: I’d love to dive a little bit more into the images that you are showing here. So I know one of the things that people do.
Commonly look at when they’re deploying any type of project, especially a site like this, because you want it to load as quickly as possible. What are you doing to make sure those images are loading quickly? We’re optimized for the overall user’s browser of advice, anything like that?
Sean Morgan: So, um, yeah, this has always been a problem for me because you know, my art’s precious and I don’t want to.
Make it too small. So, uh, thankfully CloudOne area is able to help with this, uh, is in Lightbox. No, it is. [00:30:00] Yeah.
Becky Peltz: Your JS. I think you’ve got,
Sean Morgan: I think I, yep, there we are. So, uh, here’s where, uh, we’re actually rendering a picture, uh, and we have the Cloudinary call, uh, and we’re using a Cloudinary is a. F auto and Q auto to, uh, adjust, uh, to, uh, my website accordingly and make it look as good as possible without me having to worry too
Becky Peltz: much about it.
Yeah. I mean, so the Q out or you get some compression, um, but, but with Cloudinary kind of checking to make sure your image will still look good. Yeah. And then F auto, you going to get whatever that, whatever the browser likes best, you know, the format when P yeah.
Sam Brace: Yeah. And what’s neat about what I think you’re showing here, Sean, is that this is automatically appending that list because you know, everything you’re going to be using are going to be images.
You know, that you’re going to be uploading it and you know, that you [00:31:00] want to make sure that you’re adding those two transformations on it. So then when you’re doing either a programmatic upload or like when you showed doing the upload into the media library, it automatically appends F auto queue out of thanks to what you’re doing here, image JS, because then it just grabs whatever the public ID.
As the alt based on what you were able to bring through for the metadata, and if you have a tags. So once again, this was smart. So very good job because now, regardless of how you decide to upload, you’re ensuring that certain parameters and certain checks are being done along the way. So I think this is also something that hopefully more people that are working with Cloudinary, um, are looking at it and saying, oh, I can get something from this.
So good job on.
Becky Peltz: No y’all tag is really important. And, and a lot of times it’s something that people just leave out because PE you know, they don’t, it’s not a priority, but I noticed when you do your upload, you go immediately in and enter your information for alt and, and make it available. Um, [00:32:00]
Sean Morgan: I’m the fact that Cloudinary has gives me the option to do that.
And I can, uh, when I call my state, which is returning a bunch of data, Um, you know, I can drill down into it to get, uh, like the public ID is, uh, what I’m calling when I render the image, but I can also go and get my custom alt tags. So that renders each time as well.
Becky Peltz: Hey, you know, we can actually look at that data if you want.
Um, if you go back to where you make the Axios call, uh,
Yeah. If you grabbed that string and just pre it with HTTPS colon in your browser, we should be able to actually see the data that you’re. So if we just go to a browser
Sean Morgan: yeah. There we go. Okay. [00:33:00]
Becky Peltz: Yeah. So here’s what, yeah. So here’s what the data that your Axios is returning and it shows. That you’re picking up, not just public ID, but a lot of information about the image and then the alt and the caption.
So this is like really a nice compact set of data that anybody would need. You know, if they’re going to show an image. So nice. I like that.
Sam Brace: And one thing that I was also inspired by Sean with your project, but also kind of on your outlook on life was that this is somewhat tied to a project that I know that you’re working on called a hundred days of code.
And of course that’s not your project. It’s a kind of an overall thing that’s happening. We’re asking. To code for least one hour a day, to make sure that they’re improving, making sure that they’re getting used to new technologies, maybe trying new things. Um, it almost feels like I know like the NFL hazards play outside for 60 minutes thing.
[00:34:00] In some ways that’s a coding equivalent of. Um, but why did you subscribe to that? And also, why did you decide to be so transparent with the work that you’re doing with a hundred days of code with the portfolio, but also sharing all that through markdown files on your get hub?
Sean Morgan: Uh, peer pressure, right? We, uh, I, we had just finished, uh, the bootcamp and some of us were looking for ways to, uh, encourage each other.
Especially now that we’re all on the job hunt it’s, uh, sometimes can be easy. It’s easy to be demoralized. So having a way to check in with each other and create new projects and have friends to bounce ideas off of, and kind of keep that. Class community together was a large part of it,
Sam Brace: thinking back to it.
Cause now we’re, we’re getting close to, you know, you’ve gone through many days of this project. [00:35:00] Is there any like specific learnings you’re like, oh, because of this happening on this day, I was able to apply this for my portfolio. Like any things that you’ve had from learnings experiences going through that type of a practice,
Sean Morgan: relying on my community and friends a lot more.
Um, I think the thing I learned about. I’ve learned the most, uh, is, uh, I’m sometimes I’m not smarter than my coat. Like I think I know what it’s supposed to be doing and it won’t do it. And, uh, I’ll bang my head against the keyboard to try and figure that out because I made it clear that. I know what’s wrong.
And sometimes I just need to like reinstall my packages because something wasn’t working, I think on this app, um, this app specifically, I spent three days trying to debug something and ultimately it just came down to remove my node modules. NPM installed. And then it just [00:36:00] worked.
Becky Peltz: Java’s challenging too, because if you, you know, if you make a typo, it can still sort of work, but you know, something major’s missing.
I noticed when I was reading your 100 days of code, that what I saw was you were sort of doing the rubber ducky thing, you know, where are you in the morning? If I describe my problem, even if it’s just to myself, it’s somehow helps to. Put it in context and get a solution. If I
Sean Morgan: can, if I can put something into words, then it’s not as big and a morphous and scary.
It’s just a big
Becky Peltz: idea. Yeah. Yeah. I think, I think, you know, that kind of blogging or logging your, your issues is really good, but sometimes like, I’ll just. Talk to somebody even who’s not even technical about a problem, I’m having this technical. And of course, they’re just staring at me blankly, but just my ability to just put into words, what I’m dealing with, I [00:37:00] ended up solving.
So anyway, good practice.
Sam Brace: Now, if I do a control F on your a hundred days of code GitHub markdown file, that you’ve shared wonderfully where the world, if, and I was searched for Heroku, I get six details. That. So Heroku has been part of your life for the past hundred or so days. Talk about working with Heroku.
Talk about that. And of course, what does that mean when you’re telling this to other developers? Like it, your experiences working with that type of a service, especially knowing that it’s going to be a react based project that you’ve had done, it’s involved in Cloudinary it’s involving, you know, express for middleware purposes.
How does Heroku play and all of that? Sorry,
Sean Morgan: largely. It’s so damn convenient. Um, okay. Rosie, you really need to stop. I know. Um, I mean, that’s largely why I continue to use it and it’s [00:38:00] a great way to get something. Just get something out there quick. Um, with, since react, you know, runs off a local host, I can tweak and play with it all.
I want. I’ll know what it’s going to look like when it’s deployed and I know how it’s going to interact. Um, but I can only do so much with that on my side. And, um, I know for another app I’ve been working on, I’ve been playing with things and if things aren’t working necessarily correct, and I want some help.
If I have it deployed, it’s easier for people to go in and play with it. Especially when I have like sensitive data or dot NV that I don’t want to share. If it’s deployed that stuff’s still working in the background and people can go and, you know, help me with it, uh, easier instead of me having to send a big file dump to
Sam Brace: them.
[00:39:00] That’s a really good reason for it because I mean, I’ve personally done that as well. I wish I just had an easy way to show you this and then yup. You deploy it through something is like, you know, lightweight, flexible, like Roku, then it makes it now, you know, you have a URL attached to it. So at least in the glass for people to get your hands on it.
And yeah, it may not be something more than just showing proof of concept or testing, but that’s the wonder of Roku, right? Yeah. Now Becky, we’ve had actually a lot of different types of developers on this program. And so like with Sean showing. That he was doing all of this with w with Heroku. I know we’ve also had projects we’ve shown where they’re doing deployment and hosting with Netlify.
Is there any, like, based on your experience, is there any situations where you’ve you should use one versus the other?
Becky Peltz: Well, yeah, I think, well, Heroku has been around a lot longer, like, um, I’ve taught in a boot camp before and was probably like five years ago. And that was the go-to place. That was the go-to [00:40:00] place to deploy because, you know, It’s easy to deploy just front end, but if you’re trying to deploy full stack, you need a server.
You need a place to put your environment variables Hiroko makes it really easy. Netlify is a little newer and it has brought in the ability to write serverless functions. So basically you can write AWS Lambda in and deploy it for free. So when I think about. So here’s here’s where, like where I’ve used Heroku, uh, because Heroku is full stack and web.
If I want to, if I have a form, a multi-part form where I want to push up a image, you know, to be processed as a multi-part form, I can’t do that in a serverless function on Netlify. So I use her. Uh, Roku’s great. I can use Malter. I can, you know, set up and we have, we can do remote functions in Cloudinary that help with our [00:41:00] transformations.
And right now I just use Heroku it’s free and I can do anything I want because it’s full stack. I can’t do that on a serverless function. And Netlify right now, if I was using the Lambda and AWS, I could go through the API gateway and I could push up a image, but, but I can’t do it in, in now. So sometimes the go-to place is Heroku for me.
Um, but I’m starting to really enjoy playing with a serverless function. So I highly recommend that if you decide, you want to get into that, Netlify, you can deploy for free. It has a similar kind of, um, It’s CLI and you could hook it up to get hub and push, push your stuff out there. So there are, there are some differences and I think it’s all kind of an evolutionary process.
And so depending on these case
Sam Brace: that I loved it, the various use cases and of course deployment where you’ve done a Shaun makes perfect sense. [00:42:00] So once again, good job. Um, so now that you’ve got a portfolio out there and I also, once again, I really liked the approach that you’re taking, like redo it every year, try to incorporate new things you’ve learned.
Try to, as you said, put a fresh coat of paint on it. Not all. Visually, but maybe based on what’s deploying it, what’s putting in all of the bells and whistles and functions. So this is great. So it could be a case where next year you decide not to use react or something along those lines. Did I get that right?
Yeah. That’s perfect. Yeah. So now that you’ve got your portfolio out here and we want people to see it, hopefully this program attracts more business for you in this way. Other than the portfolio, where should people be going to learn more about what you’re up to? Is there any particular platforms you’re really active on?
Is there any social media networks you’re really active on, um, feel free to use this chance to promote yourself?
Sean Morgan: Um, [00:43:00] so, uh, my main websites are, uh, Sean Morgan designs.com, uh, which is mostly my web development stuff. And Sean Morgan illustration, which is a trembling illustration.com, which is now hosting, uh, my portfolio here.
Um, then that I’m a get hub is, uh, inside Shawn’s head. And, uh, now these days I’m mostly just on LinkedIn.
Becky Peltz: I got you on LinkedIn. So yeah, no, that works pretty good. Yeah.
Sean Morgan: I’m, I’m enjoying that. I’m enjoying that more and more.
Sam Brace: Excellent. Sean, thank you so much. And like, like I said, right at the beginning, I was sure we would get a lot of great nuggets of knowledge out of this.
And I feel like I at least have a dozen now. So thank you again for your time. And I can’t wait to see what you do next with. Ever-growing development career. So keep it up. Thank you very much. [00:44:00]
Becky Peltz: Yeah. Thank you.
Sam Brace: Sean has a lot of amazing qualities and of course, every one of our guests on DevJams does, but there are some key things that I really want to emphasize in this episode with Becky here.
First being. If we take a look at what illustration is, of course you’re looking at all the fine details. Exactly. All of the beautiful colors and the gradients and the shading that’s taking place with art like that. But it’s still it’s to say that you can’t optimize it. You can change the formats for sure.
You can do a little bit of light compression to be able to make sure that content loads as quickly as possible, but still shows off all of the beautiful aspects of the art. So I think it’s showing that someone like Sean. Yes, he has development shops. Yeah. Obviously was able to do some cool things by building the portfolio the way that he did.
In general, I think showing your art as an illustrator at full within Heights, taking up so much [00:45:00] bandwidth ultimately is doing a disservice to you, your art and the people that want to be a part of it. So I love the fact that Sean took the time to do a little bit of compression in format.
Becky Peltz: I totally agree.
It’s really tipping a hat to the medium. This, when you’re on the internet, you know, there are sort of rules that, that can make it a better place. And one of them is optimization and the fact that he used F auto Q auto and relied on Cloudinary to kind of help out with that, get the kind of trade off between smaller, but still looks good.
I was really impressed just to see that he, he added that to his URL. So that was really a pleasant surprise.
Sam Brace: I agree. I mean, I gotta say, I feel like F auto and Q auto it’s like, it’s kind of like peanut butter and chocolate, like separately. They’re good. But like when you put them together, it’s like, oh, oh my goodness.
Becky Peltz: I see it as a sort of internet sophistication when someone throws in, you [00:46:00] know, formatting and quality optimization.
Sam Brace: Oh, absolutely. And the fact that he was able to do that, it’s, it’s, it’s this case where he knows it’s always going to work. It’s going to be the right format. It’s going to be the right level of compression for that.
Browser for devices. So it’s it, it hits that sweet spot, just like when you have a little bit of chocolate and peanut butter in the same way it hits that sweet spot. So yeah, I, I think he, what he did was great. Um, but it definitely shows that there’s nobody that’s. A little bit of compression, a little bit of format.
I think it’s definitely where Sean is. You know, he needs to show off his work, you need to sell his work. So it definitely proves that to be true. And I think to that same extent, I think one thing that Sean, I think Jen is also another good example of this. And I also think Hannah is a good example of this, the three bootcamp students that we’ve profiled in programs so far, is that.
These were people that had had schooling for other things, but then went back to learn [00:47:00] more about software development and to know how to code. And I think you’re, it’s never too late. It’s never a point where you say like, well, I’m too far along in this process, everybody can benefit from just understanding the way the web works.
Technology is something that’s not really going anywhere, obviously. So being able to know. How will the inner components of this work and how to make it benefit for your project, your side project, whatever it is, is a huge win for someone like Sean and others. So I think just take the time to learn how to code if you haven’t done so already, it’s, you’re going to be able to be so much more impactful for the projects you want to actually.
Becky Peltz: I agree. And I, I really liked his comment that, you know, he studied, he was, has a bachelor of fine arts. He studied art in college math. Wasn’t part of a big part of his curriculum. And he was afraid that getting into coding might involve a lot of math. He had his math class in college and via involved painting pine Combs, you know, so his, he, [00:48:00] there was a little bit of that math anxiety and fear involved, but he overcame that and found that.
You know, he, he was able to use his natural skills in the coding world. So I was, I’m happy to see that.
Sean Morgan: Yeah. I
Sam Brace: mean, it really does show and I think this highlights, that third point that we do have is that a lot of people in Shaun included, like where they sometimes blend in coding with things like science and math.
I mean, obviously stem, right? I mean, science, technology, engineering, math, but in the same sense, it is where. There’s a lot of artistic aspects to coding. It’s where it can be a creative endeavor. You’re building something from scratch is allowing for your voice to be seen. I mean, I know that there’s programmers that I know personally that talk about how beautiful somebody’s code is in the way that they write it.
And that’s something that sometimes you hear used in the same way as like how beautiful that painting is or how beautiful that sculpture is. It can [00:49:00] be a creative endeavor. So it is. If you see yourself as a creative person, you might be surprised at how much you actually love the code. Once you start figuring out how to do so.
Becky Peltz: Well, I, I have a background of doing a lot of just kind of serious business coding. And, and later on, I, I had found myself in an art installation coding for that, and, you know, You know, basic, you know, browser type coding, but it turned out to be an art project. And I was kind of really amazed that I could cross over that way.
So it’s, it’s a very nice for both the arts and the sciences to come together on. And coding is a great way to do that.
Sam Brace: I completely agree. If you’ve enjoyed this program and you’ve enjoyed everything that Becky and myself and Sean has shared with you in this program, there are a few things we’d love for you to do.
And the first is to tell somebody about the program, whether it’s on social media or just [00:50:00] in, you know, a slack message to your colleagues saying, check out this. We’d love for you to share this. And if you do so, and you can tell us, Hey, this is how I shared it. Then send that over to us. If you just send it via our support channels, then our support team will actually increase your Cloudinary plan by one credit for every time that you share this and tell us about it.
And that helps with this getting a little bit more bandwidth, a little bit more room for storage to help with those next projects that you have. And of course, If you are listening to this in a certain place, but you want to know where else to go. Of course, we’re on apple music and Google podcasts, and we’re also on Spotify.
We also on YouTube as well as the Cloudinary Academy. So there are plenty of places where. If you are saying I’d liked this, but I’d like to do it where I like to listen to podcasts or watch podcasts. We are on pretty much every platform and place you can think of. So keep liking and subscribing and all the other things you can do to let us know that you had a good time [00:51:00] wherever you choose to consume your content.
Becky, anything else to tell our audience before we let them go to her big thing that they’re going to be working on, or the next thing they have.
Becky Peltz: Well, I’m just hoping that people are out there finding interesting projects and looking at what other people are doing and certainly building out their own portfolio.
It’s something you can work on all the time.
Sam Brace: I agree. Excellent point. Keep searching for that awesome thing, everybody. Thank you again. And we’ll see you again for the next episode of DevJams.
Tracking Entertainment Auditions Fullstack with Python and Cloudinary
Curating and Delivering Open-Source Icons With Cloudinary for Iconduck
Adding SVGs and other vector graphics to your website can be somewhat tricky! But Oliver Nassar, co-founder of Iconduck and Stencil, was able to overcome the challenges associated with these files for his projects. Find out how he did it in this in-depth DevJams episode, using Cloudinary’s transformations and other development tools.
Learn about next-gen video formats with Visionular’s Zoe Liu
Zoe Liu, who is the founder and President of Visionular, dives into the details of emerging video codecs and formats with Prajanma Singh, Senior Product Marketing Manager for Cloudinary. They discuss codec standards, such as AV1, H.266/Versatile Video Coding (VCC), Essential Video Coding (EVC), and Low Complexity Enhancement Video Coding (LCEVC), and many details dealing with overall video compression.
Integrating Cloudinary, Dropbox and Postman for Product Screenshots
Creating automation and streamlining tasks can be such a powerful way for developers to make a business impact. Kyle Calica-St, who is a Product Support Engineer at Postman, was able to combine Cloudinary, Dropbox and Postman’s toolset to create a unified screenshot repository for all of his company’s teams – Documentation, Support, Marketing and more. Find out how he developed this process through his conversation with Sam and Becky at Cloudinary for this DevJams episode.
Learn More about XWP and How They Help Power the Modern Web
Join Gary Ballabio, Cloudinary’s Vice President of Technology Partnerships, for this discussion about all things web development with Amit Sion, Chief Revenue Officer for XWP. They dive into topics dealing with website performance, e-commerce, user experience and many others in this MX Matters episode.
Mediavine’s CEO on what brands must know about Core Web Vitals
Join this conversation between Eric Hochberger, who is the CEO of Mediavine, and Juli Greenwood, Cloudinary’s Senior Director of Communications and Customer Marketing. They break down Google’s recently released Core Web Vitals and explain how these metrics will likely affect brands’ web page rankings on search engines. Juli and Eric also outline some ways to improve user experiences on websites and align to Core Web Vitals.
Taking Cloudinary to the Command Line
In this MX Matters episode, Mickey Gordon – Senior Product Manager at Cloudinary – shares the company’s Command Line Interface (CLI) and the reasons it can benefit developers when trying to upload, manage and deliver their rich media assets in a lightweight way. We also talk with Erez Rokah, who is managing Netlify’s CLI, to discuss why they made an investment in building a command line tool for their business.
Building Your Next Blog Fast With Cloudinary and AWS Amplify
With AWS Amplify, you can easily and quickly build your next full stack application. And by combining Cloudinary’s uploading and delivery capabilities for rich media assets, such as images and videos, you can launch something highly optimized and scalable in a few clicks. Find out how to start your next project in this DevJams episode, where we learn from Alex Patterson – AWS Community Builder and Cloudinary Media Developer Expert (MDE).
Contentful discusses the power of content-first CX post-Covid
Watch host Gary Ballabio talk with our guest Rouven Weßling of Contentful about how they got started and how they’re solving content needs for a rapidly changing web.
Improving Asset Sharing with Collections
If you are looking for a better way to organize and share your assets, such as digital images, videos, and PDF documents, you’re in luck! Cloudinary actively enhanced a feature – Collections – throughout 2020 that lets you group these files together and share them internally with other Digital Asset Management (DAM) users. Additionally, you can share the Collections externally with stakeholders, such as agencies or the media. Liat Perlmutter – Senior Product Manager at Cloudinary – demonstrates the tool and all of its capabilities in this episode of MX Matters.
Creating Social Sharing Images with Cloudinary and Svelte
Want to know how to dynamically develop Open Graph images and Twitter Cards for your JAMstack website? Check out this discussion between Ryan Filler and Cloudinary’s Customer Education team to see how it is possible, using Svelte, Sapper, Puppeteer and Netlify Functions.
How Google’s Core Web Vitals Affect SEO and Visitor Traffic
Learn more about Google’s Core Web Vitals, their recommended values, and other metrics Google has adopted or might embrace as benchmarks in this conversation with Tamas Piros – Google Developer Expert (GDE) specializing in web technologies and performance.
New, User-Friendly SDK Versions From Cloudinary
Integrations with Adobe Creative Cloud and Cloudinary
Join our host Sam Brace for this in-depth interview with Ariel Shiran – Senior Director of Product for Cloudinary! They discuss the major integrations from Cloudinary that were built for the Adobe Creative Cloud in 2020. If you are looking for ways to easily improve your creative teams’ workflows with Cloudinary and programs such as Photoshop and Illustrator, this is an MX Matters episode you won’t want to miss.
AI-Driven Video Delivery Innovations from Cloudinary
In our first-ever MX Matters episode, our host Sam Brace interviews Yaron Reichert – Director of Product Management at Cloudinary – about the milestone feature releases and enhancements from his team in 2020. Watch as Yaron covers ways to automatically generate AI-driven video previews, use content- aware cropping capabilities to identify the must- keep video sections, as well as create dynamic video slideshows from images and videos in your Media Library.
Fetching Local Production Images With Cloudinary for an Eleventy Site
Watch our hosts Sam Brace and Becky Peltz, as well as our special guest host Eric Portis, interview Chris Coyier about his recent development project. With Eleventy, Netlify, Puppeteer and Cloudinary’s fetch capabilities, he was able to create a microsite for his famous CSS-Tricks.com site that showcases various coding fonts you can use. Find how he did it by watching this episode!
Controlling Video from Cloudinary With Voice Commands
In our first-ever DevJams episode, our hosts Sam Brace and Becky Peltz interview Hannah Kofkin about her recent development project. With React, Rails, Cloudinary and a PostgreSQL database, she was able to develop a recipe app that allows the user to control videos through voice control. Find how she did it by watching!