---
title: "Unpack the Stack w/ Colby Fayock"
description: "Unpack the Stack livestream with Colby Fayock, Senior Developer Experience Engineer at Cloudinary. In these live streams we unpack a stack. As in, a technical person explains how they built something or we talk about something technical that excites them."
date: "2022-10-22T03:17:46.000Z"
url: "https://timbenniks.dev/videos/live-uniform/010-rbjccl9qate"
youtube_url: "https://www.youtube.com/watch?v=RbJCcl9qaTE"
playlist: "live-uniform"
duration: "1:08:49"
image: "https://img.youtube.com/vi/RbJCcl9qaTE/hqdefault.jpg"
tags: ["content-ops", "performance", "cloud-infra", "frontend", "devrel"]
---

# Unpack the Stack w/ Colby Fayock

Unpack the Stack livestream with Colby Fayock, Senior Developer Experience Engineer at Cloudinary. In these live streams we unpack a stack. As in, a technical person explains how they built something or we talk about something technical that excites them.

Watch on YouTube: https://www.youtube.com/watch?v=RbJCcl9qaTE

## Transcript

definitely go right that let me just go let me go back in a few slides then how about that all right um I guess this is part of the game Colby and I were just chatting away for like four solid minutes I missed some really good stuff you guys missed some really good stuff and so how about we start again because we I can see now actually that we're live I can see it in the corner how about that this time it'll be better I promise the thing is this is literally my job what happened anyways all good so welcome to unpack the stack and today we have Colby fayock on the stream and so uh Colby how about you introduce yourself for a second sure so yeah I'm Colby fayak I work at cloudnary as a developer experience engineer so I do everything from like content creation to building Integrations and just generally helping people do awesome things on the web and you know hopefully sometimes or a lot of times that includes cloudinary but you know ultimately I enjoy you know helping people get productive you certainly have for me I've read a bunch of your stuff and it's super fun um so industry in the streams we also always go over some industry news and after that we'll dive into the actual subject and so um let's go over that for a minute so we literally just described this one and now that real live we'll just describe it again um so this is about something we call Dreamy blur and I saw this the other day and I got really excited about it because this developer um saw an image from a friend and that friend had taken that picture and it had like this really nice glowy blurry thing on it and the developer asked hey but how did you do that like did you have some filter or maybe post process this thing and then as it turns out the lens was just smudgy which is kind of crazy right and you can never really reproduce that but then he did because he he made like an XML kind of filter and I think it's four or five filters on top of each other that make this image and it's just kind of fun and so Colby how could you do this with cloudinary I think you can right yeah so I don't know the exact filters that he's using but like just kind of looking at the thumbnails here at a minimum it looks like we can get a little brightness we can definitely add blur um and those two like there's a ton of effects you can do on top of that but those look like probably the primary ones right yeah whatever brightness we want and we can make it as blurry as we want just right in the URL and it also looks like the the highlights are a little bit enhanced and I think you can probably do that as well right there's yep there's a highlights feature as well so yeah exactly I always love this stuff like it makes the web a little bit more Arty if it performs I don't know you better do a cloudinary filter because then it's just baked in basically yeah um so then the next one that is really fun uh well fun I don't know it's it's important like this was all over my Twitter and my LinkedIn and even I saw it on Tick Tock where Wix which is a really large platform that allows people to kind of drag and drop design websites they have a lot of features and they also have a lot of error messages and these error messages are pretty hard to write like because they tend to like make the the user feel like they're stupid or there are no actions that they can ask somebody hey what happened here or things like that and so I think they rewrote thousands of error messages into something good so Colby have you ever had to write error messages yeah so for that that was probably more when I was doing um more like my engineering work and um trying to figure out how I could you know in human speak describe the errors that were happening from the apis um definitely nothing nearly as extensive as that but um we I tried to do what I could to make it so people understood what they have you know giving enough information that they could try to fix it otherwise like you know shoot them to support yeah exactly and like they had this if you go to this link you'll see some very interesting um examples of where it basically just says the third party we integrated with broke and then that's it like that's an error message you kind of have to say something happened in the communication beware we saved your data on our end like and then click here to try again or contact someone like yeah that alone is such a big difference right totally because you know if somebody gets an error and especially if you've been doing a lot of work that's a lot of anxiety right so like that could like make somebody drive somebody crazy so being able to give them that confirmation that the work that they have that they did isn't you know lost is important yeah and people do important things like for example I'll be speaking at gems.com and I'll have to travel so I have to fill out an esta form because I'm European and then if you type in your phone number in this U.S Integrations field kind of thing it never says it's a correct number because it doesn't know the format of France interesting you can and then after if you do it two times or three times type in the number it says just say this is fine kind of in the error if they're like okay if you're sure that this number is actually correct even though we think it's not correct just leave it so it tries I've never seen that before where the it tries a few times with the air huh yeah so you remove a zero you add an extra one before right because you have the plus something and then it still says it's wrong but then the next part is if you know this is correct just leave it that's fine the strangest thing and I think because of stuff like that you and me will always have a job right right there's always place for better web developers on one hand though like it sounds like the ux could use some improvement there but I also do like the idea because I I know there's been times where I've seen people get frustrated because they know they're entering where they think they're entering the right thing so they could air air with nothing to help them but being able to let them still submit is important otherwise yeah yeah so there's there's it's it's a whole thing how about that these error message stuff I like it um and then this one is all I love the controversial stuff about Tailwind because I never liked Dill wind until I used it and that was for a while I used it so much that I forgot how to do CSS and now I'm kind of in the middle again and they just released a new version and so Colby where are you with with Dylan I appreciate it for what it is but I don't think it's my cup of tea I I haven't used it extensively so like I you know I it's really I only poked around with it but I really enjoy writing my uh external SAS files and um using that to do what I do what I do like any time I've come into a nap and had to deal with that it personally just it feels overwhelming because like I'm imagining like some of the scenarios I've been in where like you know just the basic HTML and then you have a ton of those CSS selector strings on top of that that just to me feels overwhelming and makes it hard for me to read through the HTML um but like I said it's I appreciate it for what it is it's just not my cup of tea yeah and this is it for a lot of people and interestingly like with this new version especially when they went to First in three they improved performance like by I don't know 100 it's it's a lot nicer now yeah it's really cool to see the like the strides they're making with it yeah it's a it's an interesting approach but if you have to repeat yourself all the time then it's no longer nice so if there's a way to go but like for example they now have things like container queries which is what we want right yeah but I'm not even sure they're actually using CSS native container queries I think they're just parsing whatever is above it and do stuff with that or interesting I'm not actually sure that it totally works how it's expected to work so I'll I'll just have a look I've used it because sometimes it's nice and fast because this is the one thing I always struggle with are you going to use bam naming if you use your own CSS or I always start with that and I like it and then halfway down the project it just fails and I stop using it and then it's a mess yeah so what I've been doing is I I try really hard to jam myself into uh mod the what is it CSS what's a module CSS modules so like every single component I have has its own style sheet okay now forcing myself into that sometimes I get in a space where it's like I really have to create a new CSS component for that um but like because I'm forcing myself in that habit like it ends up for me being easier to maintain and manage without having to do hacky things to get around some of those things now what I typically try to do is if I have a component like I try to accept an external class name and so that I can layer that on top from the page style sheet um but it's you know it it's really helped me to kind of narrow my focus onto the different work I'm doing yeah and I think that whole scoped approach with some Global Styles and then overruling these Scopes that's really cool yeah as long as you don't get too specific with the selector is then you can kind of shoot yourself in the foot oh yeah I've been there and you know that's a nice bridge to the next one um where the emotion team is talking about actually no longer using CSS and JS and I don't know where they'll go with it but it's a really interesting article about the things they've mentioned have figured out about to use snjs that made them go away from it and mainly I guess that it looks like maybe it has a bit more CSS over the wire and there's more CPU usage because when you react rehydrates it also has to apply all these CSS classes and then break that up and does all the smart stuff with it because there's lots of FL going on yeah and also what I've seen in projects before where we use this stuff that we had memory leak after memory leak because not all developers get it and I think that might be the biggest issue have you ever used this stuff um it's another one of the things that I've played with but never have really adopted um I've always wondered that about that though because you know just even in the name CSS and JS that means there's likely more JavaScript right um so I've always wondered if how that impacts performance and um yeah it's like I never found that compelling enough for me to want to really give it a try um so that's yeah you know I enjoy and I'm very productive with the SAS style sheets and I've been that for many years and now I'm kind of switching around and at work we've used emotion quite a bit there it works well because the developers are awesome so everything is structured but before when I worked at agency we had to work with Partners where we had this huge website all in react script so not with next and they didn't fully set up how everything rehydrated or re-rendered itself and so after two minutes on a page we would have a crash of the browser because they would do one change somewhere and then the whole tree had to be rehydrated with all the cas snjs classes and they would were not actually garbage collected somehow or it keeps kept happening and so yeah without that stuff it would have been like a no problem or less of a problem at least yeah interesting yeah I'm interested to see what the emotion will do from now on um I think that was my last slide yes it was all right so thank you for talking to me about all the new stuff we saw this month um how about now we go into the real subject stuff so tell us what you want to be talking about sure so I've recently been working on a project called next cloudinary and it's a way to bring some of the best culinary Tech into an xjs application easily right now the kind of default solution is you can use uh you can just either pass your cloud or URL straight into the next JS image component which is fine but then it kind of does double the work with it next year they have a loader right for it yep that's the second thing you can do by default no no no no no but uh it's it's very basic so like it just supports like the the width height you know um not a lot of features in it that can fully take advantage of boundary so um I wanted to extend that and see what I could do and um that's where next Cloud owner came from so um for people who don't know can you explain what cloudinary does and maybe a bit for developers but also a bit more higher level because there's also like a damn system right yeah so we do everything from Asset Management to the delivery uh so that includes uh you know maybe a creative team uploading their images and then uh somebody being able to manage those search for the images and use them in the content where they need to or product managers right but then that goes to starts to bleed over to the development side where developers can take that imagery and adopt it into their uh their application um once it is in cloudinary you have a ton of different features on top of that the most basic and most compelling in my opinion is the automatic optimization where by tacking on a simple URL parameter you're going to get automatic formats delivered like avif if the browser supports it and it'll automatically compress it to a point that's not visually different so those are huge performance wins right especially if you're managing images from people who don't know to optimize their images right yeah exactly and so is there also stuff like when a Content editor uploads an image can they kind of like apply a template or of sorts where it basically says okay this one is going to have to be a square somewhere but we need to focus on where the action is is that a Content editor thing or is that more of a developer thing so there's kind of different approaches that you can do we have what's called upload presets where if this this upload preset ID is used in that upload process we can automatically do some of those things maybe it's resizing or maybe it's uh kicking off an AI analysis of the image to add tags automatically but at the same time you could also do something where we have web hooks or notification URLs where maybe you're listening for any upload to occur and you kick off another uh an end point maybe a serverless function that'll automatically perform that work for you so like there's a couple different options for how you do that and especially depending on how granular you want to be with the Transformations that you're making but we you know we give a lot of opportunities for whatever you want to do yeah I I honestly I haven't seen a system that does it this well because it's kind of like it's it's super smart out of the box but you can then add so much on top which is almost crazy yeah and I feel like I I should also add like uh we were talking about uh doing those Transformations on upload but you can also do all that on the Fly which is how I usually do it so you can have your main source image and then just tack on the parameters to resize it to re to crop it using face detection so it automatically crops to the subject um so there's a lot of things you could do on the Fly which just makes it a breeze for developers to use yeah and do you feel in your opinion that developers should be the people who make these images responsive choose the sizes choose the crops based on maybe some a point that somebody sets or should that be more on on like in acms or something so that's a good question I think there's a mix of it so um I think where possible using the AI to determine the subject and crop based off of that that just makes it easier for everybody but sometimes creative creatives want to have very granular control over that right so that they can edit that image to whatever crop they need now the thing that's where the developers should have full control is things like the responsiveness where we can we can specify what sizes we want build all those URLs with the dynamic sizes on the fly to make sure that we are delivering the size that we need yeah that that's really I've in my career I've seen so many different approaches to this and I think what I love about cloud in there it's literally just the API is the URL yeah like I like to think about e-commerce where if you have a product page usually you have a big image and then you have some little thumbnails right yes like you don't need two different Source images you have that one source image and specify the exact sizes you want or say maybe a month down the line you want to change that a little bit you don't need to go back to creative you just change it in the code and it's now mandated it's so easy and cool but that those are two different images right they just become a different URL so it's a different source so it's the same Source uh so like you have your source file in cloudinary but then cloudinary you know chops it up or resizes it and it stores it cached so that it doesn't need to be reprocessed every single time but you're still pulling from that same Source image so that you you know and so let's say I'm just going to ask a few annoying questions and then after that I'd love to see what you've built and so let's say you have an image of a model on a fashion website like generally models have these kind of contracts that say for Autumn or fall whatever this is the image that you can be on but then after that has to go off the internet because the model goes to another brand and does something else are there kind of like this type of rules for cash purging and removing stuff or is this like a crazy question that you never see I don't know that I'm gonna be honest I've never heard of this use case before me many times but there's yeah there's absolutely rules for caching but I would expect that it you know just thinking about it I would expect that the image would just be changed at that date as opposed to busting like I wouldn't expect a team to use the same exact image and then bust to that to refresh it as opposed to swapping what images used but I'm not sure I've never been in that scenario yeah I'm somehow in my career I've only worked in like luxury brands with models and but also like um I work to work on the the website for FIFA football games right like I think it was FIFA 12 and 13 and 14 and there we had the same issues where football players were not allowed to be in the same place or soccer players I'm sorry and like all these things man it's it's really funny how that works yeah I've heard something similar to like other sports where like especially with contracts or if there's a strike like you have to be very specific to be able to uh change that image on the fly right um and I know there's definitely Solutions around that uh for how you actually approach that um I just don't know the answer to speak confidently on it that's all good now we had things like where we actually started using gladenary for these kind of campaigns where we overlay different shoes because Adidas and Nike couldn't be in the same image uh okay like these kind of crazy things right so we just kind of Photoshopped it and then made a layer in cloudinary anyways without going too far away from all this would you mind maybe um sharing your screen and then showing a bit of maybe getting started or something or or like anything around how it works because I'm old school cloudinary user so everything I do I do directly on the URL because I can like dream these variables I can imagine you're not doing that because that wouldn't be super easy so are you like using an SDK from cloud and area perhaps yeah so I I'm using the cloudner URL gen SDK but I yes I built a wrapper function around it so that I could simplify the API uh specifically for the component and my plan is to eventually take that API and roll it outside of their Frameworks but you know that's that's a future thinking here that's something that's going to happen at one point yeah I'm I'm actually all already talking to Astro about how we can make something happen that's interesting yeah so I'm excited like to be able to figure out how to bring it to different Frameworks but yeah so what what happens is here should I start squaring my screen yeah sure sure share ahead okay let's go into it uh okay there's you so anyways yeah so I have my project that's uh next cloudinary and again like the the goal for this is that I want to make it really easy for somebody to be able to work with cloudinary tech um extending what the next JS image component has already done um and the next JS image component what I'm actually doing is wrapping that rather than rebuilding everything from scratch so that we can still take advantage of all the good things that the next JS image component does um so you know just starting from the top uh the basic usage is adding it you gotta specify your Cloud name because of course we need to know where to serve the images from but once you're all set up this is just basically all you need to do you specify your width and height just like you would an image and your Source where at this point the source would be the cloudinary public ID or we also support passing in the full URL right now oh that's nice and so this is amazing is this feature parity with next image or is this like a separate component this is pretty much feature parity at this point anyway interesting um for just this basic usage the only real difference for this particular usage is passing in the public ID so that you're actually sourcing it from cloudnary but let's get into some more things um skipping ahead to let's say maybe examples so this is just like a dump of different examples that you can do but I'm trying to take advantage of all the different features that we can to really make some cool things happen like background removal so we support on the background removal if you have the cloudinary AI add-on actually added so you can super easily do that just right inside your nexjs app or pan and zoom which is another cool one which could become like a gif or something yeah it creates a gif and I mean you can also make it a video if you prefer but like wow you can make it a gif where now you can set up your um the zoom pan you can Target where you want it you can even use uh AI to determine where to target so for instance if I wanted to Target uh the turtle's face I can set it up to do that there's a lot of crazy things you can do with the cloud energy API and what I try to do with this if I can find another example um so like tint for instance like what I'm doing is I'm taking the uh the cloudinary tint API and I'm pretty much just passing in that string so it fully supports what cloudnary can do with tint I'm just making it a prop so that it's a little bit easier to use on any image you want so all of these are literally just props on the image tag yep yep all you see here in the code these are just props and it starts to get more complicated so we were talking about the cropping and yeah this is using gravity Auto which will automatically determine the subject in the photo and it'll crop it to that um moving down and I'm so used to doing all this in the HD in in the in the URL yeah yeah so many like mapper things and stuff this is nice yep and like the image overlays uh like I this is still a little bit like configuration heavy but um it kind of has to be because what you can do is you can overlay an image on top of it but you gotta specify what that image is you know position it where you want um and add some effects so that you're basically so you add your base layer and then whatever you want to do with it right so whether that's positioning or whatever you want to do but you can also do images underneath so if you want a turtle floating in space you know you can remove the background and then add an underlay underneath so that you can completely control what that looks like which may not be practical for a turtle in space but imagine something like e-commerce where maybe you have the product models and you want to switch the background underneath depending on the usage so that can become a very compelling example right yeah once in a while back I had to do for like a luxury brand they had like lots of earrings and things like that and they had like 5 000 images I think for all the products and they were all like on white but with like um a shadow photoshopped in it by interns over the years they're all PSD files and then we had two options because we had to clean it all up and make pngs without the background so it's either we go to cloud and area and we make few rules like you have or we hire another Army of interns to just open all the psds and change everything up and in the end we did it in two days with Cloud an area it just makes it so much easier to like and we're talking here about scale right like maybe maybe being able to do some of those things manually works fine for your own little personal project but yeah talking about scale with huge e-commerce stores or whatever your use case is if you are a big Sports uh organization like these are things that will take a lot of time for people to do manually oh clearly and so you like looking at this for like here add some text and some color and all the things so did you just kind of rewrite that a URL API into something with props yeah so I'll I can show um the only other thing I want to say is so we have a basic usage set up for an upload widget which I still need to work on the documentation and clean it up a little bit but um what I wanted to show here is that like we're trying to push it to make it easier to integrate with a lot of the different Cloud Tech and I also have a PR for open graph images so it's based on the cloudinary image API but it's nested inside of the head component so that all you need to do is drop it in a page with whatever you want in the image using this API and you have yourself a man you just built this by hand for uniform yeah like it's that's what I do too I use the node SDK to create the images and I'm hoping to make it a lot easier to do without having to fuss around with all the different sdks like in next year's for example you have this helmet part or maybe it's just called hat now I don't know it's had you can literally just add a cloudinary image in there for your OG tag so technically you have to include it outside of that this is getting in the weeds but you have to include it outside of the head component only because the head component doesn't support react components um oh okay so inside of the react the OG image component I include the head tag so that next.js sees that and kind of pulls it up okay that's the other way around basically which is super smart in nextgs yeah like any component can have a hat property right and then it just injects it yeah and let's it looks like the next JS URL is wrong right now I think I have that fixed in a branch but um but yeah so like next.js will do all the looking through all the different head components and figure out the order to kind of cascade them on top of each other uh to pull the correct uh tags for the page that's being rendered oh man it's so easy and magical it's no it's amazing um yeah and I know you're in the next World does next have similar things like that only just now okay yes the next three to have it it's cool to see the progress and uh I'm not a I'm not a view guy but like it's I love to see that you get similar developer experience tooling or whatever framework you're closing it's the Gap is closing at one point it's just whatever you like you choose and you're fine yeah right before next caps advancing a lot and then next stayed behind a bit but now when they're going live whenever they finish their thing it's going to be relatively similar wow um what is kind of fun with nox is that they make this own like the nitro engine they call it and it just runs in a serverless function somewhere and then does all the things that next time for sale combined do so it's kind of um you can put it anywhere on Azure and it does that as well it's kind of fun and it works on all the edge workers and stuff that's super cool it's going to be next next going to do that soon like let's see what they say next week they're always amazing with that stuff yeah I'm excited to see everything they announce um but like if we start diving in I probably does not worth going through the readme because uh the docs are going to be taking over the readme so they're more up to date but let's dig into the actual code of what's Happening um so starting at the actual component that I have in here um this is see we we're importing the image component and we're literally just wrapping it and applying additional props to it so this is literally the image and you wow you make your own loader that's it so yep so the loader is so we talked earlier before about how you can use cloud Nary in the default next JS image component exactly and they have that basic Cloud9 loader but what I'm doing is I'm creating my own loader so that I can extend it with the cloudinary features um so there's a few things that I need to do inside of the component itself but I try to avoid doing those things here um like for instance the one thing I need to do is I want to create some options for people using the placeholder um just it's these aren't super practical but they're just more fun so that people do have options for the placeholder they use yeah that's actually my next question because next image has all this like blur up placeholder auto loading fancy stuff and so you re you still have that with this option yep so what I'm doing and I can open up this let's see so you just rebuild it and then you're actually just doing a blur of your Glutton area image exactly nice let's see but the nice thing is what I'm doing is I'm adding some additional features on top of that so maybe you want a grayscale you know and again like it's they're just additional options that you can have in order to do this if you want um or you can change the colors so that you have like a colorized placeholder look um I don't know it's just being able to use cloudinary Tech to give you more options is ultimately my goal and just it's a lot of fun being able to provide those different options for people and you're setting quality to one so it's going to be like super yeah super small stuff quality to one uh making a hundred I tried to play around with the different widths to see what works and if you make it too small you start to lose the image detail and yeah it's not because you're blurring it you don't want too much image detail but you want enough to kind of make it look like it is replacing the image you know exactly and so I don't see any blur added here is that done with the CSS filter or something yeah so next.js actually does the blurring also in the Dom I don't know if the next image will do that but they do do it right in the Dom oh that's interesting yeah yeah that's the one thing I liked a bit less about the next image deck is that they add so much HTML around your image and then has have some sort of CSS and you know what if you use it correctly it works really well and you don't have to think but I'm old school and what I want to do is like add an image that I can just add it with yeah no I just taken oh that's dead right that doesn't work well maybe now it's fixed but when I tried it definitely not so the issue with that though like I understand why they require the height and it's to avoid the layout shift right like I totally get that I wish there was an easier way to make that happen automatically but um like I think it's a valid reason to require it even if it is a pain sometimes but it actually makes sense because the width and height are just for the ratio so you don't have any changing in your rendering which actually makes a lot of sense yeah for sure so like they they don't actually hold you to that width and height it's just basically being able to calculate that and make it responsive based off of that exactly but yeah let's dig into more of the features so ultimately I create this cloudinary loader and I've actually kind of EX refactored this a little bit since uh in a different PR which we don't need to really cover now but um so what I'm doing is ultimately I'm building my own cloudinary loader and I'm going through I've set up this plug-in system where I'll create the basic image but then I have each of the different Transformations defined in a plug-in so that um and the reason I did that is because I'm trying to think about how I organize the logic of adding whatever somebody wants for a transformation that would be a really ugly looking function or whatever to determine all that right so very big switch case with a lot of ads ins and pushes to do it yeah of course so I created these plugins and let me pull that up now we're in the plug-in section where let's look at overlays for instance I know that's one of the more complicates but let's just look at remove background let's start with a simple one yeah so remove background all it is is a very simple effect that you add to the URL so what I'm doing is I'm defining the prop that controls that checking if it's there and I simply take the existing image instance that I created that gets passed into that plugin and apply that effect um you don't even have to remove it you're just modifying the current cloudinary image object I imagine yep yep so what you do when you're using the JS URL SDK the URL gen SDK words um you you create your image instance yep and then you apply whatever effects you want and then at the very end change right you can just pipe things in and at the very end you turn that into a URL which I can show so at the very end we return this URL and that's what gets passed as the return statement to the loader because the loader ultimately wants a URL and that's what we're giving them but you can see I'm also passing in the default options for the formatting quality so I I choose Auto for both of those by default so by default you're optimized um but if you want to change it because I know some people prefer to have more control over that you absolutely have that option yeah I've seen people use quality 70 and stuff like that I'd never do that I I loved an Aries quality setting is insanely good but yeah it's nice you can change it because sometimes you want something just to be a PNG right exactly like it like there's different use cases right so I'm trying to respect what those are um so the effects like I try to support all the different effects that are you can find in the culinary docks so um I created this big list of what the of what's available some of them are one word so I don't need to create a mapping but I I'm trying to keep a consistent uh camel case uh for the entire API so that's why I have to have a little bit of a mapping here but you know looking through trying to find what they're defining and applying that effect based off of what um what rules they have on the component I kind of won the CD oil paint yeah do I have an example of I don't know if I have an example of that but maybe if you don't we can actually set one up yeah absolutely that's exactly what we could do yeah um yeah do you think is there anything else you want me do you think I should cover when I'm looking at this what I'm seeing is not that much react I'm just seeing some very smart JavaScript yeah and so will this this mainly runs on SSR right it just outputs something through node yeah yeah that's that's a great Point um I I was thinking about ways that I could extend it to make it more helpful like I was thinking do people want hover effects for instance uh then it's different then you certainly are going to do yeah sure but I don't know if that's something that people practically would want to use as opposed to using a different tool for that but you see all the times when you hover that Zooms in slightly but that is just a c is s property exactly exactly like I personally prefer to use CSS for those kind of Transmissions yeah um so I don't know if it's something people want so it's not a high priority right now but there's another thing that it is because I kind of want to look at how this would work in other systems without having the extension of the react image but that whole loader thing that you just made with these props that could work in like I guess it can even work in like I don't know anything like anything JS based yeah like so like it could even be nuts I think there is a nuts component but there's the next image component that looks a lot like the next one oh does it it's a bit simpler but it has a ton like the new one is coming out soon and I think this this would be a really nice extension to that but I meant I think there's a cloudinary one already right and I I don't know why I haven't looked at that for inspiration I probably should um yeah I didn't uh yeah I was just gonna say I think Maya worked on that I was just opening up with her on that as she said Microsoft now it's a different world yeah but she she still works on the culinary things which is pretty cool oh that's nice yeah um but yeah so I guess uh should we dig into the code yeah let's let's make like a fun image okay so where's my terminal okay All I'm gonna do is create a next app uh so yarn create next app and let's call this Tim's image app yeah I like it there we go um so what it's doing if you're not familiar with create next app I know you are probably but like to the viewers uh it's gonna clone down the default next.js application install all the dependencies and uh even reset git history and just basically really give us a starting point for uh creating a new nexjs application and it goes so it's so it's not there's not that much going on here right it's quite fast yeah it is and the interesting thing that I've always wondered is it's much faster than create react app which is kind of surprising because I would have thought that there's more going on but yeah and but this is not the rust stuff right in here it's only on the server I don't know about that to be honest uh who knows you said rust yeah didn't they um replace webpack with a rust based bundler I don't know about that I'll have to look into that I'm not familiar room for sale for the build most likely I don't think it's running locally yeah but yeah so we have that all ready to go I'll CD into Tim's image app and I'm going to open that up in my uh vs code I'm quite intrigued to see how you'll do this because I've recently learned a lot more react and next and so I rebuilt my personal site in this with uniform and all the images are cloudinary and I made my own loaders okay because sometimes the image needs to be small and square and other times it needs to be bigger with a different crop for the hero so I literally made like four or five loaders okay which is actually silly I should just literally use your tool now it's yeah I'm curious to see this I'm curious to see if this hits your use case um so let's play with it but so like ultimately we just need to install the next cloudinary component uh the uh the package so you gotta add next Clan right so I hope my colleagues are seeing this because we're going to have to replace whatever we did with your component well please if you have any feedback if your colleagues work on it I'd love to hear excuse me I'm gonna send a quick message for them to come in the Stream and actually check it out well let's see cool sounds great um okay the only other thing that I I need to do in order to configure my application to use this is set up my my cloudinary cloud name and the reason we need this is because we need a way to be able to communicate to for what account you're using for what images you're pulling in so we need to set up that and the way that we're doing it is we're just setting up an environment variable so inside of the code we can create our env.local I can set up my cloud name and now I need to get that cloud name now I created a new account before I jumped in here um so don't it's just a new free account so you can create your own but the DG Knight fyb anyways I can paste that interesting yeah I can paste that into my we need to use the network it's just in your EnV file nice yeah yeah we need to use the netify conventions where they have the randomly generated I got rainbow sprinkles yesterday I was so happy really yeah not bad I have like the strangest one because my account is very old okay okay but what's uh you know that's all you need to do for configuration and I'm going to run yarn Dev that is really not a lot yeah and at this point like we didn't we didn't add any images right but yeah sure this was this is just for configuration so now let's add an image in here so I'm going to open up my media library and while I do have some samples in here I'm partial to jellyfish so let's I love it what what jellyfish do you want to use how about oh that's a paid one how about this one this is a nice one yeah this is perfect okay so I'm gonna save this jellyfish oh it's going to be in fifth is that what you get from unsplash nowadays so if I would have clicked download free I think it would have given me like a full JPEG but yeah um I just click right clicked here and downloaded it because then I was able to save it as is and uh rename it and everything so just a little bit easier and plus now I can just drag it up here rather than um yeah yeah um but now as soon as we upload it to Cloud Neri uh we have this public ID which is just gonna be the identifier for that image so this is what we're going to use to actually add it to the page so let me first open up the page this is my new nexjs application and let's go into the code so if I go to Pages index the very first thing I need to do is I need to import my CLD image from next Cloud Mary and then at the top or really wherever I want to add this let's get rid of the boilerplate just so it's easier to see yeah yeah and so while you do this did you actually do you load the next image as like a dependency or a peer dependency or something or do you also need that other package so I'm loading the next JS package as a peer dependency which the the whole next package includes all those components so um I can probably show you what I mean by that quick let's see inside next cloud in there because I saw that you're actually using it yeah so it's a peer dependency so what that means is when I'm developing it like it relies on it but it'll use the the version of nexjs that the person has installed exactly I'm still somewhat new into the world of of building releasing and managing projects like this so I I think I did it right but if anybody ever has feedback sounds good to me okay because you don't wanna like imagine you're you're gonna load your own next image on a certain version and then somebody later on gets a newer one you don't want that right yeah and I think that's especially important now because they're going to be releasing a new image component which is publicly available uh yeah so I I want to be able to support both of those right so if I if I fix it in there like that'll probably create problems so I'm trying to make it as uh whatever next year as version you have the hope is that it will work yes that's the point yeah um so now now that I'm inside of Tim's app I'm going to say CLD image I'm going to specify my source as that jellyfish public ID yeah see I didn't grab the width in the height but it looks like that is 13.74. I'm specifying the height really just as a way to create that aspect ratio right like it's going to be big on the page and but we can deal with that later but so this is something in image specs that you should basically give the browser at all times now right yes yes and like actually yes like I think they require it but it's it's a good thing to do generally just because as we were talking about before if you don't you're going to be subject to layout shift which is is poor for a user experience perspective yeah no that's terrible exactly yeah um but now if we open up yeah it's a big image so like At first all it was doing was loading up but now like every time you load it it's going to be nice and snappy um but we have our big jellyfish image yay that's all we had to do so that was literally three lines of code yeah that's all we had to do except for the alt yeah but yeah it looks like it's important too but yeah so I consider doing the in fireable if a variable and then you import it on the top and you add this it's three little steps yeah and like the nice thing is for the most part it's a drop in replacement um as long as like you're if you're sourcing your images from Cloud area already it's a drop in replacement um so it makes it really nice and easy for people to use I I see this happening on the uniform.dev website we're just gonna go to CLD image instead because all the images come from there anyways yeah I'd love to see what you all do with it by the way can you do a Fetch with this one because our some of our images come from content content stack for example for contentful I think that's a good question I don't think I support that yet but I need to because I love the fetch API I don't know why I haven't thought about that yet thinking about this somebody told me recently that about like 98 of people you don't use the the damn but they actually use the fetch API I'm not surprised by that but I well I'm surprised how high that is but it's really it was like maybe it's a little lower but it felt like super high to me when I heard the thing is like it's such an easy way to deliver from cloudery and just like you don't really have to think about moving any of your images or like where they're being managed you just tack that in on the end right and then you can exactly immediately open yourself available to cloudery Tech so um I would say add a prop or maybe in an M Farm where you just say this is my base URL of cloudinary oh no but the thing is you already have the the how do you call this would be like delivery time URL already and the cloud name so you just have to say fetch equals true and you just concatenate the URL differently and you're done yeah or I think there's different delivery types so like if I have like a delivery type prop I'll look into it I'll see what maybe I'll see if uh Maya is doing something in in the next one see if she has thought about this um yeah but yeah I can't believe I haven't thought about this yet that's a really great point well nice good to know because I use it lately I generally use it with the dam because I use that mainly but I also have like videos where for example I do a simple thing like um I have a YouTube player that is actually a light player which means I'm grabbing the image from YouTube posters basically and I added on a div and the moment you click it actually renders your iframe for YouTube but that image I it's when I get the image from YouTube it's actually not cached well and it's quite sluggish and it's not great I don't understand how they could do that but that's what it is yeah and so then I just piped that to Cloud an area and now I have super high performance and so that's one of those fetch ones where I would use that directly perfect use case yeah or if you're using a CMS and you don't want to integrate um like if you don't want to put the cloudinary in at the CMS level which part of the nice thing is you can choose what part of the stack that you integrate Cloud rate right like it's super flexible that way so if you have a CMS or if you're using uniform that could be combining multiple cms's right like you don't care where that URL is all you're doing is jamming it into a planner URL and you're done exactly and so actually our cloud and air integration in uniform expects you to use to them oh no interesting okay yeah so I I've set it up for that right now but it kind of makes a lot more sense let's say you have a hero component like this Tim's app with the jellyfish I might want to get the the hero component from a CMS and then the image still from cloudinary that so that could be two Fields but what I can also do is only apply the cloudinary rules for the transformation and then get the image from the CMS yeah and that's where it gets really interesting and that's what you can do with your fetch problem we're good to go yeah exactly I I created an issue I don't know if you saw I created an issue yes I don't otherwise I might forget about it but I'll make sure yeah um okay let's start playing around with this right so I have a question here can you make this one like responsive yeah let me remember so it supports the default um the default oh you probably have the next sizes prop right yeah something so let me let me inspect this image is this typed can you is it easy to find what to add it's not typed uh I'm not a typescript guy I would happily be willing to support somebody uh adding that but I I just don't I'm I'm not a typo man I I I'm only learning it now if you like it very interesting if it works it feels magical because it all kind of just fits together nicely and it's really easy to work but if you just don't fully get it you're starting to add too many types and kind of things don't match up and then suddenly it's a mess and then I don't like it anymore I don't know I've just been I've been struggling wanting to get into it mostly because of the readability and I I've heard everybody say that once you're like once you're you spend a lot of time with it like it starts to click but um I think that's the barrier that I'm that I need to kind of fight in order to get into it I'm on the cusp of that like it has clicked like four times and the rest it hasn't clicked and then I'm like not yet it's not cool yet but when it did click you were like yeah yeah because like my colleagues are full on typescript Geeks they're I'm amazing and you know what they the amount of types they write is very very low if you look at our code base of the uniform dashboard you don't see many types because everything that has been typed is kind of abstracted away okay and then coding is amazing everything you do it just tells you you can do this you cannot do that and things work out but it takes some effort well if any of your colleagues are interested in adding typescript support I'd be I'm thinking William might actually yeah uh hacktoberfest is still in session so like oh man I wish I had some time because I'm I'm quite excited about what you've built and maybe thanks I could even just extract parts and just add it to the next module or some other thing I don't know well I'm gonna be uh so I'm gonna be publishing that the cloudinary loader essentially as a separate package so that we can pull into different Frameworks so that's coming if that'll make it easier for you 100 because I was probably about to do that so awesome that way like I can easily import it and maintain that same logic for different frames right because it's all kind of similar as long as props transpile to whatever you have there it works yeah yeah so hopefully that works out well um but let's let's look at this so you mentioned the sizes so I think it looks like by default it's giving you the the one time it is once oh wait there is a source set look at that I think this is if I'm not mistaken this looks like it might be like uh retina but it looks like it's the same URL so maybe it depends probably on a MacBook I am that's why they did it right maybe because I don't know but it's like this is what I don't really care for like they actually did this oh wait that just worked yeah so what I did is I added sizes and it looks like why isn't it giving you the height I don't know the interesting thing to me is sizes and sources work together so why is it only one prop oh yeah display block perhaps no I'm not sure why it's not showing I it's not getting its worth somehow let me try saying this also to it 100 it might be because of how the layout that they have set up here let me know what maybe you have to just kill it I don't like the defaults that they put in here okay there we go yeah they do a weird Flex box on it I'm not trying to bash them or anything but like they do a weird it's not a very practical starter layout well you remember how flag box and image um sizing and like skewing in a weird way because I don't know yeah there's a bunch of things like every time it happens when I have flag box and I put an image in and it goes and stretches weird I have to Google it and I'm like oh that's it and then I fix it and it's every time and probably this was similar yeah I yeah well anyways like yeah as long as you're doing something sane in the CSS like yeah yeah exactly I don't think I even needed you probably don't need this anymore no no there you go okay okay you added 100 W in steis which means the image is always 100 width of the screen yeah that's my understanding of it at least so so what it's doing is so next year yes is generating these different image versions on the Fly and it again looks like they all have the same it's the same URL everywhere yeah what's called I could have sworn that they were actually dynamically adding the different image sizes I'm gonna have to look into that I hope it's not a bug on my end so much for a nice demo of this right this is why we do unpack the stack because we're actually unpacking stuff and learning as we go and the one thing I want to note mention here is that image are hard let's be honest images are just hard to deal with because my next question was a picture tag but maybe that's too much I don't support a picture tag yet but I mean that's a that's a fantastic idea um like there's no reason I shouldn't support a picture tag let me add that as well Tim if you want to contribute I'd love to um I I feel it coming like I'm probably gonna help you here because I love this stuff I've done these things in in their own scope separately all the time for all my lots of projects but maybe it's time to actually contribute some of that learning and then put it in one place a lot of them everywhere else and I feel like everything we're doing here can be ported to whatever other framework so like it's um it's it'll be cool to see uh but either way like I have an issue in there whether you or some me or somebody else that you know make that happen so let's go to a simpler thing and actually make this oil painting thing work uh yeah let's add some fun stuff and maybe add some text on top that sounds great um so for oil painting I'm gonna get rid of the sizes since it's not doing anything but yeah yeah actually a little paint that's literally all I have to do that's it no okay now it's rendering it's in the background uh yeah cloudnary is um in the background like it'll create that new image the first time but you know after that like it'll be cash yeah and searching the CDN um looks like I'm logging out props I think I fixed that in fpr too it's still like uh we're gonna officially launch it next month but so it's still like I'm still working out the Kinks out of it but yeah but that's how this goes man but we have a basic oil painting right and the nice thing is we can tune this I believe this prop we can tune to whatever we want so let's add a thousand and see what happens maybe we can't it's not like that I don't use oil paint that often so I'm not quite sure oh I just saw it in the code it's like let's go so maybe 1000 was too high but 100. this is great yeah like we were able to set it to a higher setting so that we can you know increase it the default is kind of low so it was hard to see especially for a big image but now we can see we get that effect and that it turns out really good for the jellyfish yeah it does this this suits it yeah and so um I'm not sure if we have time to try this out but like I I built a little thing with cloud and area a while back where for streams like these when when I didn't have time to design a new poster frame every time I actually built a little tool where I could say these people are in the Stream because we then did internal ones right and I had a title and a subtitle and based on the title and subtitle the some things would be lower than others and there's all these layers yeah can you do that stuff with your cloudinary image tag as well so if you're referring to the nesting I don't think it currently supports nesting however um it broke my brain to be honest what nothing yeah oh yeah no yeah oh man it was too deep but it's working it's amazing that you can do it but it's it's it is a little complex but um let me pull in just the basic text overlay example um so I'm not going to try to write this all by hand but you have an overlay let's just put this one on yeah perfect okay um so I'm gonna copy that and let's make it white because of the color of the image but I'll walk through quick what this configuration is doing and you don't need all this configuration this is just for my specific example of what I'm showing to do um but the width I think we so I'm doing crop I don't even need this um this part right it's just I have the fit so that what that does is if you define the width and you say fit if you have text that's too long it'll drop down to the next line that is so nice yeah um what do you want to put on the image as the text jelly beans um but yeah the rest of this is defining what I want the text to be source and spray is like the font that I use for everything um you know we don't need the underlying uh letter spacing you know this is just a bunch so that you can customize it to whatever you want right exactly um but let's also just get rid of the no we'll sleep in that in there let's just see what it looks like yeah let's see what this comes out oh there you go there we go this is so cool yeah and we can see that like you know I can now take off that angle um I can take off the gravity which the default gravity for cloud Mary is the center so it'll be kind of centered instead of the southeast which it doesn't really seem like it did too much because I had that X and Y in there if you remove this it just goes yeah now it's in the center I think oh wait it's rebuilding now I'm refreshing I think sometimes I don't know why or how to fix it but I know sometimes um the new URL loads but the image doesn't load and that's that's not something pertaining to cloudery like I think interesting you probably need a key tag that changes every refresh that you do okay so what what I've seen work with this kind of stuff is just internally keep a counter so when a hot module refresh happens you update the counter and that counter goes into some key text somewhere okay and because of that it sees a new key so it has to re-render would it would it be but maybe that's more of a few approach but it must be similar to react right would it be a poor choice to use the URL as a key I think that's perfect because it's literally a different thing yeah I'm just curious about if there's any performance implications but um yeah that's something I'll have to look into then yeah but you know it gets too long it might not be worth it to put it as a key right but you need something that updates it so react knows to re-render that makes a lot of sense but yeah so let's take this a step further so so if I'm making this the header of my site like this is probably too tall right yeah it looks like a nice thing like the resizing aspect of it let's make this 600 and I'm going to set my crop to crop so that what it's going to do isn't I guess I okay there's a bug in this but I there's a fix in for this okay there's literally you have to put the gravity always that's only that's only um that's only because there's a bug but the bug has a PR open for having this effect so just to be clear uh but as we can see like when you're actually doing this you won't need the gravity prop here but all we did is we set the crop as opposed to scale because if we set it to scale it'll just try to resize it and shrink it but we set crops so that cloudnery knows to actually chop it down and the cool thing is we're also using the gravity of Auto so that it makes sure that it focuses on that jellyfish uh rather than you know just doing it at will oh yeah exactly and you have many more of these props man this this was I love this because I've been working with cloudinary doing all this stuff kind of like once in a while do it like this and then do it like that but now there's actually a library that you made that makes it this easy I'm gonna have to use that I will definitely be one of your um uh contributors let me show you the I'm I'm pretty excited about the OG image like I'm so excited about this one um because I think it just makes it so much easier to do let me pull up the website for it yeah I'd love to see this one I think if if you make this if you Market this correctly this is gonna be a big one I hope so like uh versel just came out with their own solution and oh yeah I've heard I'm not not intended to be a competitor by any means but like it's it's a bit easier to do with the cloudery component that I created so I'm excited about that there you go um but basic usage like it uses the same API and by default I'm not requiring the width and height for this one even though you can specify it because uh they're specific width and height for social image right that's best practices so for this one we don't even need that but what it's going to do is it's going to Output all these tags for you um there's one little weird caveat here is if you want to use the summary card which is what I'm defaulting to you have to have a title and I can't know that I haven't figured out at least according to the Twitter docs so I haven't figured out a way to do that so I'm kind of just like wedging that in there I'm giving the option to specify that title um but it's it's not almost have a title tag on the cloudinary image yeah yeah exactly uh let's see but this would be the title of oh yeah a Twitter title like that yeah I'm not sure that should fits there no I totally agree I if you have any better ideas I just don't have like because it requires the tag I want to make it easy for people to do without having to think about it so like otherwise I'd have to make a requirement must use Twitter tag in order to use this component which feels kind of sucks right yeah what you could do is just not bother at all and only add the Twitter image property and then people can do the rest themselves yeah it's just like they like I would have to make sure it's documented that it has to be there but what I also did is I added a where's a configuration prop called exclude tags that way you can just like exclude it and handle it externally yeah this is fine yeah there's always a fine line by how much your API gives and how much it doesn't Freedom welcome to open source man we already have the discussions yeah but like uh so this is just like some examples that I put together um like this first one like if you literally just want to add text on a white background this is all you have to do literally all you have to do um the visual that I'm showing here is actually using the CLD image component because I can't embed the OG image on here right oh exactly but it uses the same exact API so I can show that it's just the props that you have to add to generate this now if I wanted to the turtle in space colored uh purple with the text on top you know this is the code that I would need to do that where I'm blurring it I'm changing the color removing the background and adding that text on top and this basically becomes your OG tag yeah and that's so good and this can be dynamic right for whatever page that you're on you pass in the different text attribute um so that you have that that same look and feel and you can even abstract this into your own component that way like you can create your own OG image component that wraps this so that all you have to do is pass in your text with the same pattern on every single page okay I'm gonna have to ah I just I'm gonna release a pretty big website at gems.com and I want this but it's in next yeah it's like and because I also speak at few Toronto which is of course a whole next hub and few stuff so I'm I just build it in that because I wanted to try Tim just rewrite it in next just rewrite it in next it is possible like I did as well no but I actually did it to learn react because at work we do a ton with react as well so I had to learn and it's honestly the I said this the other day on a Twitter space Oh that was the same Twitter space you were on as well yeah where I never used react and I learned it by using next and just try to build a website and the learning curve was not that steep that's you know I've been saying that to people like I think I mentioned this as well and like um I know it seems like such a weird idea but being able to use these Frameworks as an entryway into learning these Concepts is so welcome back because you can use HTML if you want and all like really like you there's a if if you're copying and pasting the pages to create your page routes and all you're worrying about is the little HTML inside that's such a great entryway where you can start to play with it outside of that little bubble right exactly what did trip me up sometimes was the jsx stuff where if you want to Loop over something you have to do a map but the map doesn't become a const which is kind of strange to me but it might be but under the hood and so I have to get used to the fact that I can just do JavaScript that becomes template Snippets yeah I mean technically you could save that map into a consonant if you prefer but I I should be doing that because I just don't know the right way for react but the project runs well and especially I didn't do any performance optimization I just built the thing as I thought it would be a good site and this course a hundred that's awesome like that's next and cloudinary combined for you right that's amazing yeah is there anything else you want me to show you here or I think we're good because we're an hour and six minutes in okay so uh oh I didn't realize you stopped sharing the screen anyways oh no I I just did it so it's written because we spoke about something else cool um dude I really want to thank you for being a soldier and being on two streams today that's awesome no worries it's my pleasure and uh thank you so much for having me on um the the main thing you actually achieved here is that you probably will get an open source contributor out of me now I would love it I would be happy to have you when I have a bit more time after conference season dies down a bit I'll jump in and that gives you the chance also to do a bit more because I it seems like you have a lot of PRS open right yeah I've been very fortunate uh with I opened up a little uh not hackathon hacktoberfest uh special where I'm giving away swag for people who's contributing so nice um no you're not too late like you still have time if you want to get something nine days but I also have to make I have too much on my plate but after the season I'm in I'll still send you swag you deserve it well I'll see you at jams.com so I'll have some fun yeah I'll have some track for you how about that I just got stand like a big box so nice um dude thank you so much and for everybody who's watching or watching later the the thought of this if you like um what you saw Colby where can people find you everywhere at Colby fayak I have it up on this on my little screen name yeah on your your name yes all you have to do is Google Colby fayock and I'll come up exactly that's the best answer like the real death rails have this one right you will find it yeah and if you like cloud in the area it's cloudinary.com or maybe um Discord right yeah we have a Discord where um I don't if you Google cloud and you Discord you'll be looking at people I don't know if we have a short Mentor but um yeah we have a Discord where you can you know talk about media and all those uh you know cool stuff around it if you want to check out the next component um it's on my GitHub at slash next you can go to next hyphen cloudinary Dot spacejelly.dev and you'll get there exactly nice um so at uniform we're not that famous yet so we do have a short link uniform.2 Discord there and so um if anybody's interested in what uniform does you can see is there but today we didn't discuss uniform that much so feel free to for go towards Colby um thank you very much for watching and um see you next time cheers thanks everybody