Supper Club × Cloudinary with Colby Fayock

I sure hope you were hungry.

Cool. I'm starving.

Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Talinsky and Wes Boss attempt to use human language to converse with and pick the brains of other developers.

I thought Thought there was gonna be food, so buckle up and grab that old handle because this ride is going to get wild.

This is the Syntax supper club.

Welcome to Syntax.

On this Friday supper club. We have Colby Fayock, who's the director of developer experience engineering at Cloudinary.

We're gonna be talking all about Some really awesome stuff going on over Cloudinary, our use cases that use cases with it, as well as Some just really interesting features and and neat stuff they have going on over there with multimedia. So my name is Scott Talinski. I'm a developer from Denver. With me as always is Wes. Wes, how's it going? Hey. Pretty good. Pretty good. Excited to talk to Colby today. Yeah. And with us today, Colby, how's it going?

Hey. It's going amazing. Thanks for having me. You know, long time listener, first time caller. Excited to be on here. So do you want to give us a little bit of an introduction to who you are, what you're doing,

maybe just some of your background and and how you landed at culinary.

Yeah. Sure. So starting from the background, a lot of my career, I was a lead UX and front end engineer working on, with, like, contracting companies on applications.

But I started to get interested in the teaching space, so that's kinda led me to the DevRel world.

I still really enjoy the coding aspect of it, though. So I wanted to make sure I found a role that was gonna allow me to keep coding as much as I could, you know, whilst Trying to teach that. So that's where the developer experience engineering kinda came in and been having a lot of fun with it. Nice. Awesome. Do you want also for we've talked about Cloudinary

On this podcast, probably a 1000 times. But, for anyone listening, do you wanna give us a quick rundown of what Cloudinary is? Yeah. Sure. So Cloudinary is a image and video platform for developers.

So we have a lot of, nice and easy to use APIs.

And APIs from an image and video perspective, which is not kind of How you traditionally think of it where you have your image URL, then you can add a bunch of parameters to that URL to completely transform that image or video. So for instance, If you wanted to dynamically crop and resize it. So if you have a 16 by 9 video and you want it to be a square, you could just add a simple URL parameter to get it at that square.

So there's a lot of cool transformations that you can do based off of that URL API.

Nice.

Nice. And so Cloudinary has for a little while, they've been doing, you know, just straight photo transformations and even video Transformations and and video hosting now as well.

I know we're gonna dive into some of the Cloudinary tools here.

But I guess, before we even get too much into the Cloudinary stuff, I know you have your own personal brand, which is your your whole space jelly.

Do you wanna give me, like, a a 101 on what that is exactly?

Yeah.

So space jellyfish.

Thank you for calling attention to it. So, you know, back in the day when I started to do the content creation thing, I just thought it would be fun to have my own little mascot guys. So, I asked my buddy who's an illustrator. I'm like, Okay. I think jellyfish are cool, and I really like space.

What can you come up with? And he came up with this guy. So I just kinda Space jellyfish. Yeah. So I just been kind of, You know, building everything around that and just been having fun with it. That's awesome. Sick. Alright. Well, let's get into some really interesting features that you have going on at Cloudinary. You had mentioned to us Some AI stuff. And upon digging into it,

it seems like there's a lot of big opportunities for images And AI on the web, especially from a company that

primarily just is transforming images all day. So Do you wanna give us a little bit of an intro on these AI features, and we can dig deeper? I I know I have some questions about how some of this stuff works. Yeah. Sure. So I think, like, when a lot of people think about the generative AI, they probably think of things like mid journey where you're creating an image based off a prompt, which It's really cool, and we're, you know, hoping to do those kind of features as well. But I'm thinking about some of the more practical use cases, and we had a few things that came out, Came out in beta lately. 1, a couple today, actually, at the time of recording this. But, things like being able to take an image and get the, An alt descriptive of that image. So automating that process of when it's uploaded, you can actually return that alt text so that you can implement it as part of that, you know, the web page. Right? Other things like object removal and replacement. So, traditionally, you kind of think of, are you gonna paint that so that it Remove it or specify the object in some kind of UI. Can we give you a URL parameter so that you say, I forget exactly the syntax, but you specify that you wanna remove something and you specify the object that you wanna remove such as a dog or, you know, whatever, a light post or whatever, and it'll actually remove that from the image in that programmatic way. And similarly with Replacement where you wanna then replace it with another object.

Now another thing that I think is really compelling is the generative fill aspect of it. So Imagine you have an e commerce shop and you have, like, thousands of, images. And one of the compelling features I've always thought about Cloudera was dynamic cropping and resizing. So That's really, like, cropping inward. Right? You're taking a space and removing it. But the idea of the generative fill, which is out painting, if you've heard of it from that before is going outward. Right? So I want them to all be square, but I don't wanna crop any of the existing image. I wanna fill that That padding that I'm adding to the image. So it's going to out paint it, and then you can then still get those consistent images, and it works pretty well. That's really cool.

Let's talk about that for a little bit, because I have seen obviously Photoshop rolled that out, Like, 2 weeks ago or something like that. Yeah.

I know Midjourney now does the the sort of zooming out as well as where It knows enough about obviously, it can use AI to sort of figure out what might be out around it. And it's it's actually Kind of amazing because you can keep you can keep doing it, right? Like, you could take the output of 1 and then pass it in again and keep going out and out, out more.

Do you are you able to talk about, like, the actual tech that you're using behind the scenes to make that work?

I wish I could, but I I don't know what the tech is behind this feature. I don't know that granular level. The beta just came out today. So I don't know specifically for that one, what we're actually using, but I could definitely find that out. Yeah. Yeah. I was, like, wondering where this processing is is even done. So are Are these types of transforms, especially like you have, like, the,

replace, fill, and remove stuff, are these types of transforms done On demand, the same type of way that face detection cropping was in the past with Cloudinary? Yeah. So you kick it off,

Just like any other transformation, it'll process in the background. And then, once it's processed that transformation, you know, whether it's a traditional transformation or AI transformation, It then cashes that and then serves it, you know, instantaneously from the CDN from there on out. So, it's really that first hit that needs that processing and then Quickly delivered from there on out. And

at at the very basic, there's one kind of funny thing. Like, I remember doing WordPress, And the client would get annoyed when the you know how WordPress would generate multiple versions of a thumbnail? You could say, like, give me a square one, give me a rectangle one, and you could, like, you could switch them out. And then they would be like, okay, but, like, The banner is cropping the person's head. And I remember joking being like, there's no crop head. You know? And Right. Literally, we have that now. Right? You can crop to somebody's face or to the

other items in the video or in the photo. Yeah. Yeah. And you You mistakenly said video, but we can actually do that with video too, where you specify the crop that you want, and then Yeah. We use what's called a gravity Basically, the anchor point. And if you set it to auto or if you even set it further, like auto, then the object that you wanna track, it's gonna crop it to that particular location. So and, again, that applies to video. So imagine I think one of our demo videos is a dog jumping for a Frisbee. And as it goes through, it goes through the entire frame of that video. And if you crop it, you're gonna miss out on a lot of part of that dog. Right? So what this is gonna do is it's gonna track that through that video and give you an actual I don't know how to explain it more than that, but it's gonna give you that actual tracked video, as a result. So so, Wes, one thing I did find was that the image stuff is stable diffusion, by the way. Oh, okay. Okay. I was gonna guess that, but I didn't wanna say it and be wrong. So Oh, yeah. No. I hear it. Yeah.

I like that a lot. And what about this I'm just looking at the The website right now, there's a 3 d spin set, which says easily create 3 d animations and videos to give your customers a three sixty view of your product. Does that just Take a a photo,

or do you have to give it an actual three d file? I think you have to give it the three d file. I haven't played around too much with the file yet. But, Yeah. GLB. We're we're trying to I know we're trying to give some, like, similar features that you expect out of the Cloudera suite, but to all the different types of formats. So, I don't I don't know what the current I haven't worked too much with 3 d in my, career yet, so I I just haven't got around to playing with that one. Yeah. Part of the problem is there's so much product that that I just haven't had time to play with everything yet. Yeah. It's funny. We think of Cloudinary as primarily be like the image storing and manipulation.

But if you do go through the platform, there's so many interesting things here.

I mean, even just from, like,

Creative aspects. So whatever it's, the creation process. Like, this whole media flows thing, I'd never seen this before today, which is Build media rich applications effortlessly with, like, a low code, and it's, like, all node based drag and drop. Yeah. And you can kinda think of that like a Zapier or something. Right? Or Zapier. Yeah. Where it's like you're setting up those workflows. So once you have that, asset kickoff, whatever that trigger is, you can jump it through The different processing you want in that kind of low code, you know, visual way, which is pretty cool. Nice. And all these APIs

are still at least from what I can see, they're still all URL able, which I always thought was wild. So obviously, there's a a Cloudinary SDK That you can use to upload videos and transform it. But most of these transforms are doable via the URL.

Is there like, do you guys have any, like, internal mantra or something like that in terms of, like, how do you design such an API?

You got that's another thing that I'm not quite totally sure of. I know that they're very, they're looking at those kind of decisions very closely because, Between just simple, like, URL syntax of what makes sense to add or, like, how does it, make sense compared to Previous tokens that were used in, creating those transformations, but, I know they think very hard as to what specific ways to design those So that it kinda makes sense. But, you know, it it is awesome that you can update all those URL parameters as is, but, really, like, the SDK is gonna make it a little bit easier to work with. We don't we don't really Some of these especially these more complicated ones, we don't expect people to fully write those out by hand. I mean, you can, but Yeah. You know? Shout out to whoever the dev is maintaining the You're all parsing library. I can't imagine that's any fun. That's, like, probably the worst part

of being a web developer is You're all parsing, you know, because it's like you can get most of it done in about 5 minutes, and then you're probably spending years on Little edge cases. What happens when you have an encoded emoji or, like, a non escape forward slash or Oh, man.

I I I do not I'm waiting for the emoji transformations.

Yeah. It's it's funny that you say that, but we're having somebody on the podcast In a couple weeks, that is, behind the Mojo programming language.

And Okay. Mojo,

They're literally, the extension is a, fire emoji. Is that right, Scott? Yeah. It's a fire emoji. And, like, can you imagine the It's probably all edge cases all the way down.

Is that, like, the file extension? Yeah. The file extension is literally a fire emoji. Wow. I didn't know you could even do that. They're the 1st programming language to do it, yeah,

which honestly, sure. I'll take that.

Sure. Oh, man. It's probably gonna cause he I was watching an interview with the guy. He's like, yeah, it's not too many. I haven't really hit too many issues. It's like, there's got to be all that kinds of weird, Like, just wait till this thing is deployed on, like, a Windows 95 machine running in, like, a sports field or something like that.

Takes it takes it all down.

So I I have some questions about this, like, AI video stuff. So we have, like, some really interesting features like, You know, the ability to do detection and smart tagging with with confidence degrees and intervals and stuff like that, Or AI powered video previews.

I'm wondering, like, who who is the target audience for a lot of these features From Cloudinary, when you when Cloudinary develops or or pitches these types of things, what type of products do, you see people making with this kind of stuff, or or do you envision? Sure. So like the auto tagging, I think one of the bigger

Use cases there is making your media library more searchable. Now, of course, you can certainly take that information and add it contextually to your application. But If you think about, like, uploading tons and tons of images and videos to your media library, like, you really don't have anything to search on unless you're Very specific on making sure each file name has that object in it. Right? But being able to auto tag it, you're not gonna be able to search for, is there a dog in the image, or not.

Now that said, like, there's certainly a lot of applications for how you can pull that into, like, an actual dev dev flow. One thing that I did for my render talk actually was I created this little, thing where you can upload an image, and it generates a tweet with AI. So what it's actually doing in the background is when I upload it to Cloudinary, I use auto tagging as well as content analysis so I can Identify what all is in that image as well as, like, for content analysis analysis I'm using, how many people are in that. I stuff that in a in a prompt to hit GBT, and then I can generate this, like, personal personalized tweet that talks about what's inside of the image. Now that that, of course, is just like one example use case, but, it's really being able to take that in I think the biggest use cases are probably the searchability aspect of it.

I'm really interested in a lot of this stuff being on demand or available to us, especially, like, the generated fill Kind of stuff because you don't have to get into the models. You don't have to get into the APIs there, and you can try to take advantage of Some of these features have has there been, like, a specific or several instances of some of these Features that have been really shocking to you or impressive.

I think the generative fill so I kinda look at things both from a impressive, But also, like, a practical use case, and I'm really thinking about the generative fill as the most practical use case, in in my mind right now, because of, like, the example that I mentioned earlier about the cropping, like, that's something we've all hit. Right? Like, images can come in a wild variety of sizes and shapes and being able to have something that's gonna be able to help us or consistently work with those is really, in my mind, a highly practical use case.

Now as far as impressiveness, I'll say it might be it might be the same thing.

But, like, some of the Object removals are pretty interesting.

Also, the back removal is always a nice one.

Doing that on the fly because that's, again, something you could just tack in. I think that one car's an add on, but you can tack that on in the URL and immediately have that background removed, on the fly, but also being able to chain all these things together. I think that's gonna be where you You get some really interesting results. So not just doing that 1 individual thing, but how can you combine those with all those other different transformations and create something pretty special and programmatic.

Mhmm. And is this AI stuff available on the the free plan, or is that is this a paid product? Or how does that work?

My understanding is this is the the ones that I was talking about that came out to beta today, are on the free plan. They just cost a little bit more in terms of transformation.

And when I say cost, so, like, the pricing plan is currently based off of credit. So, like, it eats up a little bit extra credits than some of the other transformations because it's a

crop?

Yeah. Yeah. But, like, some of the other ones, like the back removal, for instance, that I was mentioning, like, that's an add on, which has its own pricing model.

So it really kinda depends on what you're trying to use. But my understanding is the the new ones that are in beta are available on the free tier. Mhmm. So this background removal is really

Impressive.

Wes, have you tried this one out? I've been using the

website remove dot b g, hold on till a while. That all the time? Yeah. It it's amazing. It's it's funny. Like, I the amount of time I spent in my career Chopping things out with I remember I used to have the old Wacom tablet, and I would zoom in and just literally trim Around the entire thing. And then we got, like, the Photoshop got the, like, magic fill where it, like, tried to detect the edges, and that would get you a lot of the way there.

And now you can just throw it up on some sort of service, and it will the remove. Bg is a little bit, like, I I think they give you a couple for free every day or or something like that, or it's not high res. Mhmm.

But it's amazing that That is no longer a thing that we have to do. You just even on the iPhone, like, you ever tap on somebody's On a picture of somebody in the iPhone, and it just immediately happens, and it's like so super fast. I'm curious, like, it must happen entirely On the iPhone on the chip. On the device. You know, I'm curious about, like, Apple's been kinda quiet about all their AI stuff, but obviously, they're

They're doing a lot of it behind the scenes. Wes, and the new Ios is even better in that. Really? Because you can Pull any photo on the web anywhere on your device and pull it the background off of it just by putting your finger on it The same way you do Really? Portrait photos.

It it works with any photo device wide, and you can turn it into a sticker. I don't know how that how it does it so fast. But like you said, I mean, even this, like, in Cloudinary, the URL part is just effect background removal, e underscore background removal. Right? And that just removed the background in in the in the URL of an image, and that to me just is is just That that feels so useful to me if you were working on any sort of product based,

application Yeah. E commerce application. And I feel like a lot of the use cases come back to ecommerce because, like, it's such a huge, like, like, part of everybody's lives. Right? Like, think about changing the background or And now think about sports teams, like, being able to have all your different, the images of the person, and then maybe somebody goes to a different team and you can swap out the background based off of that. Right? But another example of using the background, I was trying to, like, automate creating YouTube thumbnails. So, like, how could I take a picture of myself, remove the background automatically, and Toss it on there. But, like, that's kinda where you get to starting to think about piecing all these things together, where it's very powerful for just, like, Simply removing a background, but then how can you chain that on to the greater thing? Yeah. That makes so much sense that you could create some kind of generator eventually from this Because you can do more than

just working with images and Cloudera. You can work with text and Yeah. Graphics too. Right? I know we did our our automated thumbnails via Cloudinary for level up tutorials.

And while those APIs weren't like a ton of fun to work with, I do see that you have, like, the, another AI tool would be a like an language, Natural language to Cloudinary URL converter, and that feels to me like the exact thing I would have needed doing that that process.

So I I think we might be working on something like that for the for transformations. We'll we'll see.

Yeah. But, I I definitely agree. Like, that's something that would make creating some of those a lot easier. And, you know, I think to your point, like, I think there are there is some work we can do on making the SDKs a little bit easier with it from that perspective.

But I think, you know, it there's a lot of power in that, and figuring out ways to make that intuitive is also a little bit challenging. Oh, I totally think that's the thing because We like how do you put

in image groups and transforming and moving

text and fonts and all sorts of Stuff inside the URL on top of everything else. It's a lot. It's a lot. Yeah. Yeah. It's a lot. And I don't know if you've ever seen there's also a video API. I I think that's also in beta right now that you can do similar things. Like, imagine, like, being able to stuff a few different videos, the text that you want, And, create, like, a whole intro. Like, create the whole video version of syntax fm intro, just by creating this video template where it pulls in those things dynamically just like

Oh, that's cool. Because we were we were talking about that with, The Mux folks. Yeah. The Mux folks. And they that they call that stitching, which is putting Videos together. They don't have that, functionality just yet, but it's cool that you do. But that that's video only. Right? So we have stitching.

We already have that available, actually. But what I'm take talking about is going further with it with, like, overlays and, being able to create templates. So, another example is, you know, ads. Right? And, like, maybe you wanna have 10 different versions of the same ad, but they all use the same template.

But you can stuff, like, different images and text with that same template.

And then you could use, like, the speech to text, and you could say, like, Hey, Colby. You did a 482 commits this year. Great job. You know, like, you could programmatic it's wild that, like, video is becoming programmatic, and you're starting to see a lot of these, like, Spotify wrapped

for literally everybody where every single person in the world can have their own Custom video. Man, that's that's a fantastic idea. When that time of year comes around, I need to make that. But Yeah. People can just sign and create their own with that video.

I was going to ask you guys if you've heard about the function calling as part of OpenAI. I know this isn't cloud now, but we're kind of talking about Natural language to

functions. Did you guys see that? It was launched last week. I saw it, and I sat in on a Twitter space where they were talking about it, and I still Did not necessarily get the Oh, yeah. Case or what it specifically does. Do you have the, 411 on that? It's just basically,

you give it A structure or schema of your functions in a TypeScript like Syntax, I guess. Basically, you can tell it what your entire library is, and I'm I'm wondering who's going to make the TypeScript to function calling trans transmitter or whatever.

And so and then you also give it like a query. So you can say, alright, this is a function called send email, takes in a 2 string, takes in a body, which is a string. Or This is a function called Get Current Weather. It takes in a location which is maybe a lot long and then a unit Celsius or Fahrenheit. And then you can ask it And say, given these functions, answer me the question, get me the weather for Toronto.

And it will Convert that not into text, but it'll convert it to a function call.

And then I'm assuming you just You take back the function call and and run like, you have to pass it to a val or something. Right? Like, you have to call it within I'm not sure I I still understand what it says. I I I agree. It's pretty confusing. But one simple use case that I saw is somebody created a print function where literally all they're doing is they're writing a Print function has that function, but they're using it so that they can return it in, like, adjacent format so that when you grab it I don't know if you've ever tried to get it programmatically in adjacent format. You can sometimes have to fight with it, but this is a more consistent way that you could do that. Okay. That that tracks.

Interesting. It's basically returning its answer In code that you have said that you support.

Gotcha. So you could, like, you could theoretically give it give it, query document. Queer sector all or something to add event listener.

And you could say, listen for events when somebody clicks on a button.

If they click on the span that is inside of the button, then delegate it to x, y, and z, and it will convert your English into all of the possible parameters for that function, and then it returns to you that function. Say, here it is. I made you the function.

Call it. You call it. So the idea is that you can take libraries that you've written or libraries that you get off of NPM And use OpenAI to convert natural text into those libraries. And like it kind of already does it, but this is like a nice structured way To get that response. And the JSON one is a really good example, as well as getting structured JSON back without having to be like, please, this is what we're doing with syntax Right now, only return, Jason. Don't say anything else. It's horrible. Yeah.

Do do not put text above it. Do not tell me Yeah. When your knowledge How about I got it. I got it to work a 100% of the time. Did you? But

there's always a chance that it changes, and and the return says, okay. Sure. Here you go. And then the whole thing breaks. I remember, like like, for creating tutorials, like, I would have something, and I was so confident. It would work every time, and then I go to try to write the tutorial, and Then it just stops working consistently. It's

it's crazy. Well, let's actually take this part of the conversation into the back to the Cloudinary world because With the some of this AI based stuff, look, Wes and I have often talked that they're not, like, pure function, so to say. Right? You can't always predict that the same thing you're going to get back is always going to be the same thing.

So with Cloudinary, How does that work if you're using AI to generate something? Does it generate it once and cache it forever? Does it ever

Generated a 2nd time? So that's a good question.

I don't know the hard answer, but I know generally how some of this works is, Like, background removal, for instance, is it will use as long as it's not with the same image, it'll remove that background, and then it'll use that removed background so that you can apply the transformations on top. So I would expect it to work similarly, though I would imagine there are some use cases where it might change it so that it would regenerate it. But, I think, generally speaking, if you have 2 images that are exactly the same and you pass them in, they they probably would get slightly different results. Right? Like, if they're different Public IDs. They're different. Uploaded assets.

Mhmm. Yeah. I was always wondering if there was, like, a way, to say, hey. I wasn't happy with this outflow.

Please do another one. No. That's a good question. Yeah. Yeah. Because what if it what if what if you do a, generate out out painting and it Puts in a a weird little Gollum guy, and you're like, I don't want you in get out of this.

Yeah. That's the funny thing About AI is we had the guy from OpenAI on, and we're like, well, it's not really pure function. And he's like, But it is, like he just got finished talking about how all this AI stuff is. It's math At the end of the day. Right? And the fact that it doesn't give you the same thing every single time is a feature because They have to literally add stuff into it so that you get a bit of randomness every single time.

So if they took all that randomness out, I guess it would be A pure function.

Yeah. Right. Yeah. Yeah. They should let us access that pure function version. Right? There Yeah. Right. Yeah. There's, like, a

A couple things you get a temperature and what's the other one? It's funny. All those properties exist, and I never knew what any of them meant. So I just didn't even touch them. Yeah. It's temperature, and there's, like, another one that you can set to, and it's basically how wacky it's gonna get, Which is is it the the wacky meter? The wacky meter. Yeah.

Just, like, off the cuff, like crazy uncle. You know? You never know what he's gonna say next.

Yeah. Just just you're telling it how many beers it's had. Alright. Now give me this answer, and you've had 16 beers.

Oh, that's Great. Alright. Let's dive into some, developer focused stuff in terms of the SDKs, and you you said there's community SDKs.

These things that are being created externally from Cloudinary?

Yeah. Sure. So Cloudinary the Cloudinary product team officially supports a bunch of SDKs that are pretty much language specific. So we have a JavaScript one. We have a Node one, you know, Go, PHP, whatever.

But what we're trying to also do is use, they're technically unofficial SDKs, but using more, like, of a community aspect of it to try to build, tooling closer to the developers. So the first one that I did this with was Next. Js where, just as a big Next. Js fan, I I wanted to have a tool that made it easier me to work with it inside of that. So I built an image component that basically wraps the Next. Js image component and then adds all the different Cloudinary features on top of that so they can have a 1st class experience in next.

Now because I made it in an official way, we're considering it a community library. So, that could be the same for anybody contributing to that. So if one of you made a library, for instance, like, that would be a community SDK. Right? But now we're trying to Expand that. And the first 2 that we're expanding that to is Svelte and Nuxt where, we're trying to do a similar thing where the Svelte one, for instance, we're wrapping, a tool called Unpick, which, was created by Matt Cain, if you're familiar, which, is an image compote yeah. It's an image component, and, we're able to take advantage of all the awesome work he did on that rather than trying to redo that ourselves.

We're taking a abstracted way of building the URLs for that based off of props, And we're just kind of extending the the capabilities to provide the same kind of API inside of those different, languages. So the first one's gonna be svelte that we're gonna come up with. I think we're at a one point o, hopefully, this week, and then, the next one should be coming soon shortly after that. The unpick is

It's so good because, like, you think, okay, well, we have Gatsby image component, and then you've got The next JS image component. And then you've got, like, the responses you get from Cloudinary.

Then if you're using Sanity, maybe you also are getting response from them. And it's just like, oh, well, like, none of these things are standards. Right. So unpick is sort of trying to Standardize both the responses, like, just convert the responses to what you want, as well as across all of the different frameworks. So it's At least somewhat similar for every single framework you're working with, which I'm a big fan of that because you don't have to relearn a new Bizarre syntax every single time you wanna put a image

image tag in your project. Right? Yeah. For sure. And, like, one of the interesting things of how he's approaching that is, like, he's very CDN centric. So, like, Cloudinary is an example or some of the other competitors. Right? Yeah. We have our own ways of transforming the URL. So a lot of the meta frameworks that have their own image service might be able to accept a cloud near URL, But then they do their own transformations and optimizations on top, which doesn't make sense. Like, you're doing double the work. Sometimes, you're gonna get charged for that extra work. So why not just have an image component that tacks on those parameters to the existing feature you're using? So, it'll Detect that you're using Cloudinary URL and use the Cloudinary specific, tooling that he has there to change the URL, add the width and height depending on the responsive sizing,

so that you don't have to worry about that. That's really neat. What what made you guys pick Svelte and Nuxt?

Yeah. Good question. So I I was just trying to think of the different communities, that made the most sense.

I don't know if I have too much of a scientific answer about it. I just you know, Svelte seemed to be have a lot of strong, community members behind it.

A lot of support. A lot of people love Svelte.

I never necessarily got into it too much, but I know a lot of people really, really, really like the experience in that. So I thought it made sense for the next step. And similarly with Nuxt. Nuxt is, like, my my understanding is the framework to use in VLAN right now. Yeah. And they already had a cloud remodeling module, actually, that was created prior to this, but we're kind of creating it in light of what we do with Next Cloudinary. So it's a little bit different, but there there kinda precedent there. Right? Like, there was something that was just as existing, that we can kind of,

start to work from. Nice. Where where do you find these,

These do where SDKs on the website. So these are under the these are community ones. So they're not gonna be on that main page because they're gonna be The official SDKs. So if you search for, like, Cloudinary community, there's gonna be a page that includes all the different ones, that we have.

Let me see the actual title. Cloudinary. Yeah. I was gonna say I see Gatsby Gridsome. Okay. Netlify. So next day, it should be there, but we haven't quite launched the,

The other 2. Yeah. So once once they're 1 point o, we'll probably put them up there. Cool. Yeah. Honestly, this is like, you talk about DevRel for different companies. And this is such a big thing that companies can do is either build every single implementation. Like, I think about Sentry. Sentry Has a page for integrating it, not just a JavaScript thing. They have it for, like, every single framework out there. And That's just JavaScript in the web, you know, like, think about all the other platforms where you can write code.

And that's great because If if you were just say, alright, this is how you do in JavaScript, you're sort of sitting there being like, well, what about how do I implement it in in my framework? And I love Yeah. Companies go all out and, like, can't have too many examples.

This is how you do it. Next. Js is the same thing. They have a their examples folder There's hundreds of different examples like these. This is how you use Next. Js with these things, with TypeScript and a s four Hundred or something crazy like that. The only problem with that is keeping those up to date, right? Yeah. I don't know. That's I guess that could be a downfall. We talked about that with, the Gatsby folks. They came on the podcast is that they they sort of left too much to the community. And then things got abandoned, people got frustrated. So

you gotta be careful with keeping those all up to date as well. Yeah. And the ones that we're working on so, Of course, I'm working on the Next. Js one, but, we're working with 2 community members, Matias Hernandez from the Svelte one and, Jacob, Andruski for the next one. But, like, we're we're financially supporting, them working on it. So, awesome. You know, of of course, we'd love to see more, like, open source, support from that, people helping and working with it, but We're specifically investing in it from both a community perspective and ecosystem perspective.

Nice.

Yeah. I I I've been using Cloudinary for a long time, And it does feel like even without these SDKs, it's just easy to use in everything because it is straight URLs. I know we've talked about that a bunch. But The fact that that it that exists as a a feature of the product goes to show you the power behind, like, the encapsulating state Into the URL. Yeah. Right? If I'm past you the URL, it's always going to be the same. You can cache it. You can do anything with it. We modify it, Likewise, and and you get a new one.

I I just think that's such a killer feature of of Cloudinary that you're you're not really deeply tied into Writing code to transform your images, which can end up becoming a pain. Right? For sure. And, like, going back to some of the examples like WordPress,

where you have the specific sizes. I remember, back when I was working in ecommerce, like, we would only have specific sizes that we can pull from on the website. But And it's funny. They pitched, we were pitched cloudinary, but we just unfortunately didn't buy it at the time. And I was like, this is gonna save us so much time in knitting.

But you don't have to think about All those different variations because your source images are gonna stay the same no matter what. So now you can just, like, as you want, add all those different parameters right inside the code. You don't have to care what the creative team uploaded. You're just caring about how you're gonna integrate it, what the size you need to deliver only the size you need in the browser.

Can we Talk about, YouTube for a bit and how do you do that? Like me or Clouder? Or I I think just your personal YouTube channel, which I think would be cool to talk about because people ask us all the time, like, what's your what's your process? What's your setup? What's your stack? And, like, I answer it all the time, but I'm always curious to hear what other people So like, what is your tip to tail? Is that what people say for like, how do you come up with a possible video? How do you record it? How do you edit it? And then how do you how do you publish it? What's your process and stack for that? Yeah. Sure. So

the way that I kinda get ideas, I Have a really long list of things that I just continue to push ideas onto. So anytime I'm having a conversation with somebody, whether it's cloud related or not, or if there's just a tool that I seem interested that I wanna learn myself, I'll push it into this stack of, ideas. And, I don't try to force any of these ideas on myself at a given time, so I'll just try to go back to that list and see what inspires me.

Part of my creative process is if I don't feel inspired for an idea, like, I'm never gonna do it. So I try to find something that sparks sparks joy in me.

Once I had that idea, I create, like, a little demo just to kind of flush out the idea of what I wanna teach.

And then Sometimes I'll write an article. I've been a little bit lazy on that, to be honest. But when I used to write an article for every single one, I would write that out, and it would basically become the script for my video.

When I'm not doing it, I would just try to kind of teach through the demo that I created. So breaking it down piece by piece, trying to create the different concepts that make sense without kind of overwhelming and telling that story of building up to that finished project.

But a lot of the tools that I use, I use OBS to record.

I have some nice, I have a nice mic from that I got from Egghead. I think it's a sure. I'm not a newbie guy, so I don't know too much about this stuff.

I have a Elgato BaseCam Pro. Yeah. That's good. A pretty nice job.

No. Thanks.

From there so the I think one of the interesting things is how I record, because I don't record just 1 long stream of video. Like, I record very small segments, and I might do that same segment over and over and over. And then, like, before I push it into something like Premier, I go through all those segments and just delete the bad ones because what I can do is just shift that over. And I basically have my video where all I need to do there is, like, kind of, scrub out the, what is it called? Yep. The the blank space, between each segment. So it just makes editing much easier for me to get it. But from there, Review, edit, and ship it. Nice. Have you heard of the tool Recut? Yeah. Yeah. Yeah. So I, from Dave, Hopefully, I'm pronouncing.

I I don't know who pronounce that. He's great, and I've talked to him a few times.

So the thing is that tool is better suited for For 1 long video and Oh, yeah. From my understanding It does that it does kind of your process. Yeah. Yeah. But just if you had 1 long video rather than having to Stop it. It's basically just finding the segments, and then you can just click and delete them or whatever. Have you used it before? Yeah. I use all the time, especially when, Okay. Okay. It it because one of the cool things it does is it doesn't need to, like, reprocess your video.

It's the weirdest thing. When you go to export your video from it, it takes about 2 seconds, and I don't know how he does it. Oh. But it doesn't need to, like,

Frame by frame process it or or whatever. So I have no idea what's going on there behind the scenes, but it the export is extremely nice That's awesome. And I like, I've talked to him before about it. I wish there was a way to kinda group import my clips like that and Mhmm. Because the the What is it called? The white noise or the blank noise? Oh, yeah. Even just the display camera on each clip would be so much. The desk base would be so much helpful for my, for my workflow.

Yeah. And that that definitely does. So what are you doing for your background? For the People who can't see, he's got a nice, like, gradient.

So I just have, so I bought some, like, color bulbs on Amazon. I I forget the brand name. And then I literally just bought very Keep the desk lamps, and right now, they're just sitting down there shining up at the wall. I need to do something a little bit more thank you. I need to do something a little bit more white wall behind you? It is a white wall.

Oh, yeah. I thought it was a screen. Oh, no. No. Yeah. Yeah. I wanna work on my setup a little bit more. I really like having the background like you both have.

Gonna try to figure that out, but,

for now, yeah, I just try to have some light colors on there to give a little bit extra than just a dead white wall. Yeah. And Your your camera, where is that sitting? The part of the biggest problem I have with my camera is that I want a monitor in front of me, But I also want my camera as low as it goes. Right? And it's a constant battle. So do you are you you're you're looking at us right now. What's your setup look like that? So behind the camera,

I have a ring light that's sitting up behind here. Imagine if you will.

And I have the camera sitting in the middle of the ring light so that it's kind of like, it looks down ever so slightly, but it's right but it. My camera is big enough. Like, if you see I lift up my laptop, you could already start to see Oh, yeah. Yeah. Mhmm. The background of it a little bit. Yeah. So it's it's at an angle enough that it doesn't Hit the laptop, but is able to kinda get a good,

view. Nice. Yeah. Wes, I really I ended up going My camera at the perfect level and then just having my monitor directly to the side of it. Because otherwise, it's you know, I'll have to deal with the turn to the side thing. But I found when I I actually end up recording or working on my computer, I just turned my whole setup.

You know, I, like, turned my laptop. So I'm not turning my butt my my neck because we are talking about getting repetitive stress injuries from turning your neck all the time and stuff if you're all shifted one way completely.

Let's get into the part of the show that we call the supper club questions. These are the questions that we ask everybody, and,

you know, they're they're kind of fun. The first one is what kind of computer mouse and keyboard do you use? Man, I am all onboard. And, honestly, like, as a longtime listener, I feel at home on this on Syntax FM because for the longest time, like, I thought I was an outcast. Everybody ashamed me for not using an external monitor, but Seems like you have a lot of guests that just use the onboard keyboard and mouse or, you know, trackpad. So, Yet, my entire life, I've just all kind of been hunched over my laptop.

According to our stats, that means you are a genius. A genius? Okay. I'll take it. Yeah. Seems to be the smarter the people we have on the, like, more minimal and, like, basic their setups are when you're expecting them to be like, oh, I have 62 monitors and, the keyboard that's split into 9 pieces. And I just think about it and and it's always like I just have, like, a MacBook Air. I'm not sure. I bought it. I got it from my wife.

You know, she found it in the garbage, and I just hang on it.

Now back in my Counter Strike days, I used to have a fancy mouse and a mouse fix and all this stuff. Oh, yeah. That wasn't that wasn't way too long ago.

Do you sorry. 1 I'm just gonna dip back into 1 more question. Is do you design all of your the stuff yourself as well?

So my my friend Made the initial logo, and that's the only thing he did, and I kinda took it from there. So, sometimes I'll try to move, like, the arms around on him, but, all the other stuff, like, sometimes I just design elements around. I make all that stuff.

I thought about trying to hire a designer, but I'm just very particular, so I just have a hard time.

I don't know. I know there's amazing designers out there, but it's there it's also hard to find amazing designers. Poke around at it yourself. And do you have any, like, formal training in that or just kinda learned it on on the go? Yeah. So I do have a little bit of a graphic design background.

I was Really into it in high school. I actually tried to get into the program in college, but I didn't get into the program in college because they only let, like, 19 people in there.

You know, through that time, I was learning, to code in the background, so it worked out for me. So I do have a little bit of a background of it, though. Alright. Back to our Questions, what theme

editor

theme editor and font are you using? So I'm using Versus Code. My primary Beam is, obsidian,

but for recording, I always use Night Owl. Yeah. A lot of people seem to really like Night Owl.

Sarah, friend of the show. Quite a few. Yeah. It's it's an awesome thing. 5 or 6 people on the show that that use that.

What about terminal in shell? So I'm using Iterm, and I don't have a good answer as to why I use ZSH, with, OhMyZSH.

Again, like, I don't totally know why. I've just been doing it for so long. Showed it to me when I started using it. And Yeah. Every time I install a computer, I do the same thing. So And it's pretty. It is. The vibe. Yeah. And what about staying up to date? Is there any spot you use to kinda keep your finger on the pulse? Yeah. So, I mean, honestly, like, Twitter I know Twitter is isn't the most stable thing right now, but, like, that's really helped me because I'm probably a little bit too so I have, Like, notifications going on every time somebody tweets that I'm following, so it makes it helpful for kinda seeing those things. But, I used to be really into, like, Reading every single newsletter I could, but not as much that that, into that these days.

So yeah.

Right now, really, it's mainly,

Twitter. Yeah. And you're you're a new ish father. Right? When when did Yeah. When was your child born? 2 in a couple of weeks now. Yeah. So, did I remember, like, getting to that age. It was, like, just finally when you were starting to be able to sleep more reliably a little bit, do you feel like you're getting back into that flow yet, or is it still rough? Unfortunately, our little one's a bit of a poor sleeper, so it's it's still Oh, yeah. Pretty rough. But, you know, some nights we have,

we can get a little bit of sleep, but we're still working on figuring that out for ourselves. Yeah. And that's one of those things. Right? Especially around That age, you're just like, please, when am I gonna get to go back to normal? Yeah. Yeah. And, like, it's I think it's been one of our biggest pain points because, like, you know, we can deal with the tantrums. We can deal with, like, like, just, you know, his basic needs. But, like, the sleep is It's just so hard to to function when you're deprived of sleep. Yeah. People really underestimate that.

I I know a buddy of mine who was having their first Somewhat recently, maybe about, like, 6 months ago, before they were even trying, he was just like, so I I'm still gonna be able to get, like, 8 hours of sleep. Right? I'm just like, dude, what are you talking about? Yeah. That's not even gonna So prepare yourself for that. So I'm well, I'm I'm sorry to hear that it it's not not getting there quite, but there there will be light at the end of the tunnel. I know there will be. I I hope so. Yeah. Right. What's a piece of advice you have for a beginner? I think the biggest thing I always try to push people to do is just keep building things.

Like, No matter what it is, is it a personal project? Is it just, you know, some kind of demo? I know that some people can get stuck into just keep watching tutorials over and over and over, and and that was me.

But the the most value that I've ever got, from trying to learn is building things, trying to find inspirations to, actually get in the code.

If you wanna learn how to do, like, drag and drop, actually get spin up a project and try to add it to it.

No no matter what it is, like, you're gonna have you're gonna learn so much more by Having actual firsthand experience of building out those things rather than just kinda watching.

And, you know, I'm a content creator. I know you 2 are as well, and, following along with those is definitely important, but I think people put too much into just kinda watching, like, days and days and days of those rather than building something themselves. Yeah. As content creator, I always tell people,

like, stop watching me. You know? Like, obviously, there's a point where you'd need to learn it, but If if I'm making if you're just watching another one because you think that that's gonna help you rather than actually building something, you're,

you're not gonna progress. Yeah. The real learning happens when you start building your own things. Yeah. And that's why I always really like the use case driven content. Like, that's a lot of what I do. It's because I I don't really have content that's gonna probably do, like, huge numbers as soon as I drop a new video. But what I'm hoping is when people struggle with problem. They're gonna be able to search for that, find it, and be able to it's gonna help them solve that problem. Mhmm.

Yeah. That's totally that was always one of my big strategies, especially on YouTube, was, Like, the content isn't necessarily being made to gain the attraction

at at drop. It's meant to be a resource. That's terrible. Before you 6 years later, one of like, one of your YouTube videos has 8,000,000 views on it, and you just, like, It's some sort of Yeah. Nerve there. You know? Everybody else hits that.

Right. Right. Yeah. I'm telling you, one of my videos, Like, my probably my most watched video is exactly that. It's, you know, like, what is GraphQL? And it was such a slow burner.

It burned and burned and burned, and it still gets just a lot of traffic. That one actually got recommended to me the other day on YouTube, and there was How many how many views are on that one? I couldn't tell you. Let's look it up. I was I was amazed. It's funny. When I when I first started doing it, I was doing a lot of free Code Camp articles, and one of the videos that I did was, Like a pretty high level look at what Open Graph is.

And that video to this day still gets a lot of views because people, Like, I think we kinda take it yeah. Not take advantage. We're kind of, like, people still don't know what Open Graph even means. Right? So We throw around this term everywhere, and people are just kinda confused. So it's resonating. People wanna know what it means. So everybody has to learn what it is. So, Scott, your video is five 100,000 views

in it's just just significant.

Nice. Yeah. Wow. Absolutely. Videos didn't like, they weren't They weren't made with the intention of getting that many views. You know? One of my top videos is

how to get Old Facebook Messenger back, which is, like, back when Facebook took Messenger out of the Facebook app.

Everybody was mad because he had 2 apps, and, like, there was, like, a hack Oh, yeah. That you could do.

And it would I put up, like, an 11 second video showing the hack for, like, a friend, and I looked at it the other day. I think I've made $4 off of AdSense on that or not, yeah, AdSense on that one video.

Just That's hilarious. Still does numbers, which is is crazy because I don't know if it works anymore, but the the comments on it are not this doesn't work. And, like, you think people would thumbs it down if it stopped working? Yeah. My top video is

adding drag and drop with React Beautiful D and D, and I published that 2 years ago. And it's up at, like, 130 k. Cool.

Alright. Let's move into sick picks and shameless plugs. I'm not even gonna ask if you're prepared. You're a listener of the show.

What's your sick pick today? And as as much as I am a listener, like, I was having trouble thinking of, like, what I wanted to actually sick pick.

So I boiled it down to Trader Joe's cold brew. I don't know if you're Cold brew oh, I know, Scott, you are.

Yeah. I remember I picked I Scott, I actually picked up your jar recommendation that one time. Oh, yeah. That was great. Trader Joe's cold brew is absolutely the best cold brew that I've had, and it's fantastic. So if you get a chance to pick up it's a concentrate. See See what? You don't wanna drink a whole glass of it straight. Make sure you mix it in with some water or milk, but it's really fantastic. We used to smuggle this stuff across the border,

because we don't have Trader Joe's in Canada, and it's so good. And yesterday, we went and bought some of the Starbucks cool brews on sale at a store. Like, I'll grab a thing of this.

And I made my wife nice me and my nice nice tall glass and chugged it down. Oh, man, that was good. And then I was looking at the bottle, and you're supposed to cut it with water, Like, 1 to

1.

Yeah. Just concentrate. Yeah.

It. It's concentrate.

I don't know how you told me. Was this Trader Joe's one to 1 as well, like, same amount of water? They all stay concentrated if they're not West. I actually I don't know if you I just I just know how much I Naturally put in my glass every morning. Yeah. Well, they were flying. I had to tell Courtney one time because she filled her mug with concentrate, and I was like, Hey, by the way, that's like 500 milligrams of caffeine, so you probably don't wanna drink, like, you know, even 50% of that. That is Funny. Anyways, I was fine. I didn't die, but, yeah, probably should check that again. I don't I don't usually we usually just take the, like, leftover coffee from A brewer and just throw it in, like, a a pot in the fridge and just drink that, but the cold brew is something else, man. Shameless plugs. Is there anything you would like to plug? So I I don't have anything specific. I was just gonna say, like, my YouTube newsletter

and Twitter, places that you can find me.

I'm always putting out, new videos and stuff, so That's where you can find it. Yeah. Hey. Thank you so much for coming on. Appreciate all your time. Yeah. I appreciate you all's hopping me. Yeah. I'm really excited to see this, AI stuff. Thanks, guys. Alright. Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.