Elevating User Experience with Cloudinary, Markdown and Deno’s Fresh

Sam Brace: [00:00:00] Welcome to DevJams. This is where we talk about innovative, inspiring, interesting projects that developers are building specifically when it comes to delivering images and videos a lot of times on those websites, and of course they probably are using Cloudinary for a lot of those aspects, since this is a program thats developed by Cloudinary.

My name is Sam Brace. I am the Senior Director of customer Education and Community at Cloudinary, and this is gonna be a really exciting program cause we’re gonna be bringing on Adam Argyle, who happens to be a developer advocate, specifically under the Chrome side of things, specifically around CSS. But this isn’t about his time at Google.

This is actually about the work that he’s been doing for his own personal brand. Through a URL called nerdy.dev, and he did this [00:01:00] amazing overhaul to be able to create a space for him to be able to share blog posts and other musings. But, he also did some pretty innovative things with new frameworks, new ways to be able to really push the boundaries of what’s possible.

I love the overall social networking look and feel that he did with this. And of course, he found new ways to be able to deliver images and even videos through his overall web presence, thanks to the work that he was able to do with implementing Cloudinary into his overall website blog overhaul.

Joining me for every single one of these episodes, and I’m so happy to have her here for this one, is Jen Brissman, and she is a technical curriculum engineer here at Cloudinary and working with me on many customer education focused projects. So Jen, welcome to the program.

Jen Brissman: Hey, happy to be here.

Sam Brace: Jen, tell me why are you excited to talk to Adam today?

Jen Brissman: So many reasons. I love nerdy.dev. It has such a cool look, and I like that we [00:02:00] have someone focused on CSS and the way that things look, we’re not necessarily focused on something super technical. It’s really about making things look really good in the technical ways that he did that. So happy to talk to Adam and he’s really fun to talk to. So let’s get him on here.

Sam Brace: Absolutely. And before we do so, one thing that we should always point out is that if this is the first time that you’re experiencing the DevJams program and maybe even Cloudinary, know that we have many years of podcast episodes and livestreams that we have done associated with the DevJams program, and you can find all of those at cloudinary.com/podcasts. So simply go through the list and see all of the podcast episodes that we have put out and explore. And on top of all of that, we can also see here that many conversations take place between Cloudinary users at community.cloudinary.com, and this is gonna be a great place for you to continue the conversations about anything that me and Jen and [00:03:00] Adam discussed today.

Of course, also, maybe conversations of things that got broached in previous episodes as well. So, make sure that you have that and whether you like to use the community forums or you happen to join its associated Discord server, there is a place for you to have those conversations with other users that probably care about images and videos just as much as you do.

So before all of that, and after all of that, let’s get on Adam to the program. So Adam, thank you for joining.

Adam Argyle: What’s up? What a corpus y’all have. That was awesome. Dang.

Sam Brace: Oh, thank you. Thank you. And honestly, it’s great to have you here. This is gonna be a really good exploration on a lot of different things, but I think what would be a great place for us to start at is just for everybody that hasn’t heard about Adam Argyle and get a little bit of a flavor, who are you, what are you up to? How do we, how did we get you here?

Adam Argyle: Cool. All right. I’ll try to keep it short. Been a nerd for a long time. I was a nerd [00:04:00] before it was cool, and then I dropped out. I was like, oh, being a nerd’s not that cool. Look at we’re nerdy. That’s not great. And then later all of a sudden, nerds were cool. And I was like, I’m going back to being a nerd. And I was really happy about it. I studied all sorts of things in college and high school. I’ve been building sites for 25 years. I was in like intense computer science college and noticed that no one else cared about what things looked like. And I was like I do. And I would turn in assignments and they looked good and were functional and they were all like you’re weird. And I’m like, you’re weird. Why are you so happy with the math? Why can’t you make little rock hands pop up and bounce around we’re playing a video game? And they were like, we don’t care. And I was like, dang, I care. And so I switched schools. I was even like, I was like databases and, backend was really fun. And then I went to design school where I studied web design and interactive media, 3D animation, all sorts of cool stuff. Meanwhile, while I was at art school, I was at a startup agency and we were building apps for every digital screen, and I cut my teeth building [00:05:00] everything.

I’ve built an app for pretty much every device, every screen type, even voice apps and stuff like that. And I found myself more and more focused on the user. I wanted the user to be empowered. I was the cool part about the web. The web was like mine. It was like that page showed up on my screen.

It came with some of my preferences and I wanted it to be a really beautiful. So, as I implemented other designers, beautiful designs and studied design, and then I just kept building apps and working at various companies. Found myself at Google after about 20 years. I’ve been happily here…

I started out on Google Cloud and the design systems team which by the way has like a hundred people on it just to manage the design system of Google Cloud. So if you think design systems are easy, they’re gonna save us a lot of work. Try again. They make a lot of jobs. It turns out they’re really hard.

It’s like a garden. You have to continually, look after things rot and things grow, and you have to be there with them and tend to them. These days I’m on the Chrome team focusing on CSS, UI, and Dev [00:06:00] tools. I work with a couple of amazing colleagues. I work with all the engineers. I work with the PMs, I work with the spec authors, and I’m in the middle of all this sort of synthesizing it, figuring out how to use it how to teach it.

That’s mostly what I do these days. It’s a lot of teaching. And then I can’t stop building. I’m just a crafter. I gotta build stuff. And my personal side was getting a little crusty. It’s the one that got me my job at Google. So I’d been there for, I’ve been at Google for six years now, and after about five years I was like, I should probably have a website that showcases a lot of the stuff that I talk about that seems dog foody. I’m gonna eat some dog food. And that led to nerdy.dev, the site you saw. And I was like, people love scrolling feeds. I’ll just make my own feed with my own personas. I even added a persona today. The idea came last week, but now I have an evil persona. So that’s the top post you’ll see is evil, Adam.

And what’s he gonna do next? I have no idea, but something evil and its gonna be really fun. My site, my space. I get to do my CSS my way. I get to build it my way. And I could also [00:07:00] keep rambling for a long time. So I’m gonna stop myself right there. I think that’s pretty good.

Sam Brace: It’s something that we’ve heard actually a lot of times in the DevJams program is that someone wants to re overhaul their overall web presence.

And of course, I think you did something that many developers wanna do. You wanna own that space because we’ve seen social networks come and go. We’ve seen ones rise. They allow certain types of customizations, not customizations. So rather than jumping from space to space to space, you know that everything that you want it to be the way you want it to be is at nerdy.dev.

So, it makes sense why you would do a lot of those things. But it also, we’ve seen this before where certain developers might use that chance to check out maybe a new framework or a new way of being able just, looking at fresh code, it’s, it gives you a blank canvas as to work off of something. So it seems like possibly that’s one of the approaches you took too, because.

I saw that you’re working with Deno, you’re working with Fresh, you’re doing all of these fun things with your framework [00:08:00] choices, but that was something that probably came about because you were just deciding to revitalize your overall web presence.

Adam Argyle: Yep. I’ve been building with frameworks since the frameworks got created.

And so I like to use a different one for each project. Like a couple months ago, I released a project called gradient.style, which allows you to build wide gamut, gradients. So it’s a brand new gradient, syntax. It’ll output the old and the new syntax for you. But that was built on SvelteKit.

I’d already liked svelte from a project about three years ago, and gradient.style just ended up being this, I like building tools, I like building design tools too, and I just wanted the web to have a really good gradient. Anyway, so I used SvelteKit. I’ve built things with NextJS. I’ve built things with just everything.

And so Deno was especially interesting to me because they’re on the web platform tests websites. So the every browser before they release a build, they test their code against hundreds and thousands of tests and they’re called the web platform tests. And Deno showed up in there next [00:09:00] to Node and next to other things.

And I was like, Denos here. Deno is implementing web standards and they’re crushing it, and they’re a tiny version of Node with TypeScript outta the box. And I was like, and it and it renders at the edge, right? So it’s got all these kind of cool advantages and. I was immediately in love. I was like, this is like all the fun part of node where it’s JavaScript very familiar with the MPM package registry, all sorts of cool stuff there.

But, I get to be in this more minimal scenario in this modern distributed sort of architecture. And then they also came out with a framework for themselves called Fresh, which is a Preact, very minimal framework, which I’m a very minimal enthusiast. I like to build things myself so that way I understand what’s going on.

So they gave me that and I was like, I’ll give it a shot. And it turned out to be stellar. I’ve had a great time in Deno and Fresh, the deployments are sometimes seconds, so I’ll push code to GitHub and I’ll go check production and voila, there’s my site. It rendered on demand. It does SSR yeah, here’s [00:10:00] fresh.

It’s really rad. And I’ve had a blast. Yeah, every new project I like to pull in a new framework, expand my repertoire and places that I’ve been and things that I’ve seen. It just makes me a better coder. Plus, I get to feel like I’m relating with what other people are probably building with.

And yeah I think it also shows some clout that I’m not just here in a little silo, shouting out about CSS and how you need to architect things. I get to go try these things in the same space that they are and feeling the same pains that they are too. And I don’t know, it’s just, I can’t stop doing those things.

They’re just a part of me, I guess.

Sam Brace: And I think it definitely shows, I love the growth behind that. Like it’s something where, As we know, there’s, as you pointed out, there’s new frameworks that pop up all the time. There’s new programming languages that become the new hot thing where people want to learn these things.

And knowing how, you know the pros and cons, reasons why you might want to use it, the reasons that you don’t, it makes for much more nuanced conversations when you’re in [00:11:00] education role like yourself. So, I think it’s really astute that you decide to jump in, try something out and use different projects. I love the fact that you tried Svelte for something else that was a passion project.

So, there’s really cool things that you’re doing with that. So that’s very good advice, I think, for any developer to be able to take.

Adam Argyle: Thanks a bunch. I always felt like a senior developer has experienced more bugs than you, and that’s they’re still writing bugs. They just have seen more of them, and so they go, oh, wow, that happened to me last year.

I know the fix, and they do it. So that’s one attribute of a senior, and the other one is trade off management. They know what’s at the end of all these different roads because they’ve walked down them. So I’m gonna keep walking down roads and keep collecting those experiences cause I feel like that’s what makes me a stronger engineer over and over again.

Sam Brace: Absolutely. Absolutely. Now one of the things that you also did with the overall rebrand or rebuild of nerdy.dev was of course you decided to start finding new ways to work with images and videos. And [00:12:00] because of course it’s a being a very well-designed website, it has really fun imagery as we pointed out.

Like you have a great icon, which is the skull with the flipped lid, and you’ve got all sorts of stuff going on there. So you want that to look good. You want that to come through quickly. So it looks like you chose Cloudinary for that. What were the reasons that led you down the path to choose Cloudinary?

Adam Argyle: Yeah, I’ve used Cloudinary in the past, so when I was at Deloitte when I was at agencies, we’d use Cloudinary. It’s just nice to, there’s many niceties, but one of the main ones is and then I’ve also used Eleventy and all sorts of other build systems where I would build out my images. I’ve been in the Squoosh CLI and the Squoosh website, just exporting all these different versions, handwriting the source sets and picture elements, and it just became a big pain and all of it, again, for me, it’s like I’m a very user focused builder. I want the user to have a good experience. And so images and video end up being this humongous asset that you download in order to experience a site.

And as a author, I want to upload the [00:13:00] highest res image and on the fly give people all the little ones. I think my first and best experience with Cloudinary was with a startup that I was at called Lively. And Lively was a, we would record the live show that you were at all the audio right off the soundboard, and by the time you were walking out of the show, you could buy the show that you were just at for five bucks.

Sam Brace: That’s pretty cool.

Adam Argyle: And had, it was super cool. I saw so many shows. But the album art and all this stuff was really hard to deliver across all these platforms. This was a while ago and Cloudinary made it really easy so that I could again, just upload one high res asset from these artists cause it’s a pain getting images from clients, right?

I get one of the best that I could and then I would just downscale it and fit it to each user’s device and then those get cached on the fly and all subsequent pulls are super instant. So it’s just superpowers galore. And so when I’m on my personal site, I was like, of course I wanna do that. Managing images and media and video is not easy.

People are like, oh, you just download an image, you just put one in [00:14:00] your pictures folder. Oh, I have an assets folder and I’ll just serve that. And that is totally fine and that does work. But as you dig into sort of these user necessities and moments that they have with various things, whether it’s like I have GIFs that only play three times, right?

I think that’s really important cuz it can get annoying if they’re sitting there doing that over and over again. I have client headers are sent that send your view port that you’re viewing it on, so that I’ll never send you an image bigger than your view port. Like just the amount of little things that you can do to tweak that asset for that user is bonkers.

And y’all give me an API into that. I just build strings. I do it all on the server side so that, by the way, by the time the user gets it, it’s just html. I don’t even use JavaScript to serve any of my images. I did prototype that at one point I was using the LQUIP images, and then I was showing the blurry one and then loading the big one.

Anyway, so there’s just so many niceties to using something like Cloudinary, right? You get CDNs at the edge. Transformations on the fly that get cashed. The list just goes on, [00:15:00] and of course I was gonna use it again. It’s pretty much top notch for doing this sort of work as long as you can read the docs and sift through and formulate these strings and build them. And yeah, that’s what I did in code. That’s what code’s good for. You’re like, “Hi code. This is confusing. I’m gonna teach you so that you do it for me”. Its very good at that..

Sam Brace: No. Absolutely. Absolutely. And we’re showing on the screen here various parts of nerdy.dev, and you can see that we’ve got videos that you’re bringing through for different things that you’re showing.

You’ve got pictures of yourself, you’ve got various, but all of these images, all these videos that we can see that are part of this overall scrolling feed that are here, they’re all coming from Cloudinary. And when I take a look at some of these, so if I just pull up our handy dandy media inspector let’s take a look at this user centered UI plug that you have here for your Google IO speak. You can see here that yes, sure enough, this is coming from Cloudinary and you can see all of the transformations that are being brought through like f_auto and q_auto and [00:16:00] w_auto. there’s a lot of fun things that you’re putting into this. So I think this is definitely showing that it you’re fully embracing the whole process of images and video through us, which is a great thing to see.

Adam Argyle: There’s even more, if you click that image, it should go into a modal view.

Sam Brace: Oooh

Adam Argyle: Thats a separate path. Stashed on the element is the full URL, the one that’s unfettered. So you should media inspect that one because that has less constraints applied to it. It’s yes, you invoked the large image here is, I think it’s still using client headers and stuff, but.

It’s here’s the big one. You paid for that one, when you clicked it, I mean you didn’t pay for it, like that was more to download than the initial one. It’s higher quality. You get to zoom in on the details. Ah, see one like that, you’re like, that’s nice to be able to zoom in on the details.

Sam Brace: Oh yeah. This is fantastic. Yeah. This is very good work and I like that you exposed a little Easter egg that I didn’t even know existed. I’ve been combing your website for a while here [00:17:00] and that’s neat. So I was just very satisfied to look at how nice it looked just in the scrolling view. I didn’t even think so.

Jen Brissman: Adam, I, yeah. Sam said, I love the look of your website. What gave you the idea to make it look like a social media feed?

Adam Argyle: Yeah. It was a lot of observations. So a lot of people been making new portfolio sites. As much whimsy as I generally like to build I’d build tools and I build whimsy.

I was like, for my site, I I was like, everyone’s just scrolling cards. And I ultimately wanted a kind of content centric site. I knew I was gonna blog and I knew I wanted to make posts. They’re called notes in my code, but like the one at the very top where I’m like, evil Adam, or whatever.

That was just a notes, not a blog post. And you can go to the detail and it’s it’s just a note. The idea was like, people are scrolling a feed, they just wanna see a feed of cards. And so someone can come to my site and they’ll be like, don’t care. Don’t care. Oh, that one I care about. And then the sidebar was just like Twitter and I’m like, there’s so many [00:18:00] people on Twitter. There’s probably a lot of people coming from Twitter to my site. I might as well just make it really familiar that way. That way there’s not a lot to learn. I can keep it really simple. That was the inspiration, just observing the way that people are consuming content these days.

I wanted to give it to ’em in a nice, familiar format, but also do it my way, which is, so there’s a lot of Adam-isms and they’re like, did you notice as you scroll the avatar stay sticky inside the card? There’s just like lots of little things like that I had fun with. And the colors, there’s a lot of Display-P3 colors.

If you hover on those filters on the left, those are using the brightest colors that you can get from your screen.

Sam Brace: Oh yes they are.

Adam Argyle: Brightest green. Yeah. And so it’s a little different on his screen than on ours, but in person those are like, that’s a really juicy neon color. And so I got to go use my, so again, that’s like very dog fooding. I do a lot about color talk at at Google. And so I was like I’m gonna have some nice candy colors on my site. But yeah…[00:19:00]

Sam Brace: I think this is great. I think this would be a real, what I would love to see is some of the ways that you were able to put this together what I plan on doing is I’ll take down my screen and showing off all your great work and you can pop it over to yours so you can show us everything that you’ve been up to and maybe give some people some insights on how they can do this on their own.

Adam Argyle: Sure.

Sam Brace: All right, so there’s Adam. All right, so let’s take a look at this.

Adam Argyle: So this is the pic component. And it ultimately builds the picture element that will contain all of the different sort of information. And so here’s a nice little interface, kinda gives you a preview of the different options that you can pass it.

So it requires a string. alt is optional, though I generally supply alt as often as I can. Height and width, class style and Cloudinary. So the Cloudinary string is interesting because you can pass overrides. Like up here you can see there’s some defaults too. You see the. Google’s you need to update your operating system.

I’m like, no, not today. I’m gonna do it later. It might pop again, pop up again. We’ll see. But here’s like [00:20:00] my standard optimizations here where I’ve got format auto, which is gonna let me supply whatever the browser’s capable of. I got c_limit quality auto and width auto. And those things are gonna play really nicely with the client hints that I send it to.

And just really quick on client hints, those are over here in. A bunch of confusing looking markup right here, right? So except ch, we have content. So these are the different client hints. I’m opting in to send along with my headers to Cloudinary so I don’t have to put these in my requests. I don’t have to put them in the URL for the image.

They get sent with the headers and y’all have an intelligent enough server. To look at these properties and return with something that’s relevant to the factors here. So I’ve got the size of the viewport, like I was saying earlier, will never show an image that’s bigger than your viewport, which is nice because I’m uploading some 20, 2000 or 3000 wide pixel images sometimes, and you don’t have to pay for [00:21:00] that.

Just the regular width, which is doing its best. It can get the width off the image element itself. So there’s a reason to put another reason to put the width property on your images. Downlink is how good the internet connection is. So that gives y’all an opportunity to change the quality and the dpr what’s the pixel ratio quality that they have?

And make sure to give a, give me a 3X if these folks around something super nice. Yeah, and that’s and then there’s also a bunch more here to support that additionally. So that’s like the client hints. But the Cloudinary here allows me to do overrides and sometimes I will do overrides cause like maybe in the moment I know better than what the optimizations are.

And that gives me the opportunity to populate that. So custom styles, custom classes, alt text, and then these like bases here. And then here’s the lquip base, which I’m not using anymore, but this was really cool. Look, I can blur it. 2000 pixels, make sure it’s a thumbnail still. Auto formats. I’m getting nice and small image formats depending on the browser’s capability width auto and quality looking low, [00:22:00] right?

Cause I need a, I need something to deliver. Super duper fast to just provide the scent or the hint of what the image will be eventually. And then I’ll, do a tricky swap. But it ended up being, I was like, y’all serve images fast enough and I don’t want to put JavaScript in there just to serve my images.

And then I also don’t wanna do conditional JavaScript that looks to see if you do have JavaScript enabled, blah, blah, blah, blah, blah. I was just like you, y’all got me covered, so I’ll just ship that high quality one. But it’s just still cool to know that the transformations are just a string.

A few commas and some properties away. So when a picture component gets used, I pass in a bunch of props. I extract things from, so this pic paths is gonna go basically take those base paths that we were looking at before all the optimizations, merge them with the actual path of the image that I passed in and return me like I was showing you earlier, that full image.

So that one’s unfettered, and you’re gonna get that high quality, large modal image. A custom one, which is gonna be a mixture [00:23:00] of whatever Cloudinary ones I passed in combination with the base ones and then the placeholder. And those get extracted from this function picPaths. I also have this here too, which is my site, is if you remember the cards, they max out on their width.

And so you could have a MO, a monitor that’s wide screen. And I’m still only basically gonna be filling up the inner column, which means I’m very, I have high confidence in the max size of that column. It’s in my media queries. So I’m able to give that information to the API and saying look, it’s either gonna be like a hundred or it’s gonna go up to 350 on mobile. I’ve got medium and large. Or have you, have y’all heard of the Goldilocks approach?

Sam Brace: So, I know what Goldilocks is. Tell me what the Goldilocks approach is.

Adam Argyle: You got like your daddy bed, mama bed, baby bed.

Sam Brace: Yeah.

Adam Argyle: That’s pretty much a fun way to work with or think about your media queries. You’ve got your daddy screen, your mommy screen, and then your baby mobile screen. And so those kind are, what these map to here is I’ve got like large, [00:24:00] medium, and small.

Sam Brace: Yeah.

Adam Argyle: And so then this component’s gonna return an image. Obviously that’s what it’s gotta do. Always put loading lazy on there, unless you’re worried about LCP and you’re trying to put something up in the main header area, which I don’t have. So, all of mine are pretty much lazy. Here’s that data-full attribute we were talking about .The alt props, the source that we’ve established that we built, customized during the SSR build process. Height and widths, styles, decoding async, which is like another fun little optimization you can tell the browser like you don’t have to stop when you’re drawing and processing this. I’m probably describing that a little wrong, but it just frees up the browser to be like, oh, I’ll come to this later. Maybe it’s not needed this second, I’ll come back to it like loading lazy. It’s not in the viewport. The rest of the information on this image don’t matter. And then I’ve got source set and sizes, and so these are additional ways for me to tell the browser you know what it is that I’m giving it additional information again to attach to the headers and it, and know for itself that it can size something as small as possible for this [00:25:00] mobile user, but also grow for a larger set.

And that’s that the information that we see there. I think down below, here’s just kind where I build the strings. So this again, is kind of confusing JavaScript. I’m making sure it is a Cloudinary image by looking for my folder. So y’all give me a folder, I put everything in the folder and that’s how I that’s my hook basically, to know if it’s coming from Cloudinary or not.

And then I check if something’s a GIF. Cause if it’s a GIF, I actually wanna serve that as an mp4. Gonna be a lot smaller. Y’all do it on the fly, I can limit the amount of loops. There’s all sorts of good stuff to have there. And so I can also generate a placeholder with y’all on the fly so I can show an immediate image and then if they wanna watch it anyway, just lots of really cool little details y’all give me the ability to do.

Sam Brace: And of course, to unpackage that a little bit, the reason why you would wanna serve a GIF as an mp4 is because of size in most cases, right?

Adam Argyle: Yeah.

Sam Brace: You’re saying like a GIF is normally fat a little bit bloated in some cases in terms of what it is, but we can make that look exactly the same way, but deliver it as a video and then suddenly it [00:26:00] becomes a lot more lightweight. Is that the same reasoning that you did it as well?

Adam Argyle: Yeah. Yeah. It was for size mostly. And that you, y’all make it so easy I might as well. And I think I only have a couple of GIFs, but it’s nice in case I wanna embed a GIF.

Sam Brace: Yeah.

Adam Argyle: So, if I’ve got a blog post that I write and I wanna put a GIF in there I can have it transformed on the fly, just put it in my bucket, pull it down and apply some optimizations. But yeah, that’s a pretty good overview of like my pic component that powers a lot of the images. And here, yeah, I’ll just leave it at this spot right here.

Sam Brace: Yeah, I think this is really powerful what you’ve shown here, because it explains that all you need to do is make sure that you are uploading your files properly to Cloudinary, and then a lot of the transformation work has been very scripted out so that you don’t have to worry about, did I apply this parameter, or is this being optimized or is this not being optimized? So there’s a lot of things that you’re doing to make sure that this is streamlined and automated really as much as possible. So there’s a lot to like about this.

Adam Argyle: We could look at usage really quick. So, if I [00:27:00] open up like what’s a good blog post? Oh, let’s see, gradient.style. Maybe this’ll have one in it. Oh, here’s a good example.

So even the, like the markdown posts have a hero and the source look, it’s prefixed with argylelink, so I know that it’s coming from Cloudinary, so I can go fetch it and build out this nice hero image, which is a little bit, oh look, here’s the size of that one was 2144 pixels wide.

I doubt anyone sees it at that size cause I think I maxed out the width of my entire blog post at a certain size. But still, these are just inline initial attributes that the browser uses for a ratio, it’s not actually gonna draw them at that size, it’s gonna look at CSS and make something smarter. And look, oh, here, look at this.

I didn’t even plan that, but here’s what kind of like an image looks like. So I’ve got a little bit of a secret sauce in my markdown that I can use, but I passed the path to my folder, and then the name of the item. Oh, it looks like I adjusted some code. Pass the name of the image. This is my alt text. And then at the [00:28:00] end I use a double dollar sign.

Sam Brace: Nice

Adam Argyle: To note the inline height and width attributes. So that way I know that even though they’re coming through markdown, they’re not gonna cause any layout shift. They’re gonna get embedded and have a proper ratio and then I’ll go Cloudinary them and grab them at the best size that they can.

And that’s the same for videos pretty much too. I don’t know if there’s a video on here. Yeah, look, here’s a simple image. So that one I didn’t apply alt to. Anything else? Nope, just a couple code pen inbeds.

Sam Brace: One of the transformations that I saw that you use is c_limit as well, which is like an excellent way to make sure that you never accidentally upscale that image past when it should ever be. I know that you were putting in huge images to why would you ever upscale something that it was, 2,100 pixels in width. But, you have that as that parameter saying, if I ever make an error and I had an additional zero or something like that. Then don’t worry it, it’s gonna catch it and make sure it never serves it past the original either.

So there’s really smart things that you’re putting into the overall optimization. It’s like it really is. You have a true set and [00:29:00] forget it type of optimization layer, which is great.

Jen Brissman: Yeah you have.

Adam Argyle: Yeah. Build it into the code.

Jen Brissman: Yeah. You have lots of parameters passed in on page load. And I also just, just even going through, if you scroll down to when you’re using. Let’s see a little bit further down. Yeah, you’re when you’re using, you’re just using a lot of Cloudinary features and I was just wondering as we were going through them, how you figured it all out because we talked to a lot of awesome developers that are using Cloudinary in some cool ways, but then they’re missing some really important ways and they’re just like, oh, I just never found out about it.

But somehow, Adam, you found out about all these little lesser known Cloudinary features and it, is it just because you’re a tinkerer or is it just because you’re focused on the user or you just wanna optimize? Like how did you find out about all of these Cloudinary features?

Adam Argyle: That is a very good question.

A lot of it starts with the base of, I work with HTML engineers, so they’re building the HTML spec. [00:30:00] I get to watch image features land in the browser, and y’all do a very good job at watching what’s going on and you start implementing those features as soon as you can. Like you have some special Chrome only information, like I think client hints are.

They’re a spec, but they’re only implemented in Chrome right now. They might be in Firefox anyway y’all were on top of it. You were like, huh, more ways to optimize. You’re like, here, let’s give that to developers. And so I’ve, I follow those and then I go looking for those in your docs and I’m like I need to know how do I pass these things to, to take care of all of this superpower stuff that I know the browser can do.

All this communication that can happen between a server and client, I want that. Again, cause I wanted the user to have it and I wanted to dog food these things. So I scoured the docs, read each parameter one by one. I was like, oh yeah, I want that one. And just had a comma and then, oh, I want that one too.

I had a comma, but there’s a secret sauce which is, y’all have a Dev Rel and his name’s Colby and he’s very cool.

Sam Brace: Yes.

Adam Argyle: [00:31:00] And so I was, showing my site. I was like, I used Cloudinary. And he popped it open and was like, “Oh, hey, you could do this”. I was like, ah, gasp. I would love to do that.

And then he’d be like, “Oh, if you tweak this one little pram right here, you can get that”. I’m trying to remember, he might have been the one that told me to put c_limit in there.

Sam Brace: Oh, if he did, he deserves all the awards. It’s a great transformation. So that’s good job, buddy.

Adam Argyle: What else did he have in there? Anyway, so I also, that was like some secret sauce. I got a direct line to your excellent Dev Rel who helped me really hone it. So, it’s like I’d done a good job. It’s not like I’d done poorly, I’d implemented a lot of great things. But that last little, those are also the things I love being like a user experience oriented engineer.

I’m like, oh, the little things are really important to me. So I got some special help from one of my friends and their name’s Colby his friend now wasn’t a friend before, but yeah.

Jen Brissman: Cool. So yeah…

Sam Brace: Colby’s basically everybody’s friend, right?

Jen Brissman: Yeah. Yeah. Everyone knows and loves Colby and I totally agree. I’m one [00:32:00] of those people. So before the, secret superpower of Colby, you decided something you wanted to do and then went in the docs to see if it was possible. Is that the order or you found out something that was possible and then went into the docs to figure out how to do it?

Adam Argyle: Yes. Okay. So some things like data saver and client headers.

Like I knew all in client hints, I knew what client hints were and I’d never implemented them before. So again, like me being the sort of explorer that just wants to always adopt things and try them out and get a sense of what the trade-offs are. I went reading your client hints docs, which were pretty new at the time.

I think they’re still even, maybe they changed, or I think I found a bug at one point too. Where I was like, hey, I tried to pass this, and they were like looking at my server requests being like, oh, that client information, that client headers are there, what are we doing? And having a conversation back and forth there.

But Data Saver was one that I’m a little partial to that one. I’m one of the spec editors of the concept of Data Saver and CSS. [00:33:00] That’s like in your browser or in your operating system, you can indicate that you are in a tight wifi scenario or a tight data network. And so you don’t wanna use a lot.

And you can send that along with requests and servers can see that and be like, oh, this user doesn’t wanna download my huge images, for example, or something like that. Let’s make sure to give them something low quality or maybe nothing at all, or. Just the alt or, all sorts of, there’s all sorts of like fun moments that happened after that.

So, I went looking at can I do data saver client hints with Cloudinary? And sure enough it was there. But I think that’s the one where it had an issue and I needed to add some special header. Like we were looking at that funky syntax here in the page meta. This took a lot to figure out.

Sam Brace: I can see that. Yeah.

Adam Argyle: sec-ch-width. This sec-ch. Oh, this is the client hints dpr client hints widths client hints viewport. Oh, that’s what it was too, is all this all has to match this and it has to be in the same order. [00:34:00] So there was like a combination of things I had to do that y’all were also looking for. It’s just the classic code dance. And so I was trying to early adopt the idea of data saving and using client hint and scouring those docs. I even think I got a direct line with through Colby to your engineer who’s working on those. And we got to go back and forth looking at the server logs, looking at the headers on my images. They’re looking at the headers on my images.

Sam Brace: Oh, that’s cool.

Adam Argyle: And it was really cool and we ended up finding some little tweak that optimized it for both of us or whatever, and it was like, oh, wins, wins for everybody. That’s cool. So that, yeah, I was return to early adopt scouring docs had good lines to folks. Y’all are very available, which is really nice. And so that’s how that came about. Yeah.

Sam Brace: One thing I did wanna ask you about, because like I could look, looking at your screen now, obviously if anybody knows what TSX is, they know that’s TypeScript. What I’d like to ask more about is just like the choices of using [00:35:00] TypeScript, was it also because of the framework as well? Cause I know Deno pushed a lot, like they’re, they do lots of TypeScript support whatnot. What was the reasoning for this when you were going down to their website side?

Adam Argyle: Awesome question. So all in all, I generally don’t like TypeScript. And it’s not that I don’t like it, it’s just that I like computers to do the work for me and when I have to type things, I’m doing a lot of the computers work for it, and I’m just like bums me out. But okay. But Deno comes with it prebuilt. So one of the, one of the bummers of TypeScript is taking care of TypeScript. It’s kinda needy sometimes. It needs a lot of configuration to be customized or whatever. It has all these different sort of needs.

And so the trade-offs for me were always like, I’m spending too much time in TypeScript. I’m not getting the value back. But with Deno, it’s all built in. You don’t have to manage it at all. There’s nothing that I had to set up. It’s outta the box. And then again, I like to early adopt things. This isn’t my first TypeScript [00:36:00] TSX or like TypeScript JSX project.

I’ve done a couple of them before, but this one was mine. And so that was nice. I got to do it my way. So these days I call my, call myself a light typer. As you can see, there’s light amounts of types. I have some interfaces and I have some typed parameters. But I’m not going overkill. I remember the first time I was learning TypeScript which I come from a strong typed language.

I learned Java as like my first language. And and action script three, it was like a really big language for me for many years. So I was so happy to drop types and then all of a sudden it was cool to type again. I was like, no, we move forward. Okay. Anyway, that’s just still me ranting, but. It comes with the framework in Fresh.

So a lot of it’s outta my hair and I got to do light typing, which was, minor amounts of confidence in my builds or minor amounts of confidence in what am I passing between all my components and stuff like that. And so that was the reason for that. It came with Deno Fresh and Deno is a TypeScript centric edge server to [00:37:00] begin with. Yeah.

Sam Brace: I think it’s cool. I think and I like the trade off there that it makes sense. It makes a lot of sense. Fun, fresh framework, no pun intended, but then also getting to be able to say but I have to do some type script, but I can also get what I want out of it. So that’s cool.

Adam Argyle: Very cool. Yep.

Sam Brace: And I love the fact that, maybe this is intentional, maybe not, but if like the color scheme of your IDE all seems to match the color scheme of nerdy.dev, was that intentional or did you make your own color scheme?

Adam Argyle: Oh yeah. I have made my own color theme. It’s called Oh, geez, I’m gonna forget the name of it. It’s what was the movie where they had a lot of Kung Fu, it was on Netflix, Kung Fury. Kung Fury is the name of the thing.

I dunno if you remember that … It was a, actually it was a Kickstarter. And then it got picked up on Netflix cause it was so successful. But anyway, it’s very tongue in cheek a retro wave type of thing, and it had all these super rad [00:38:00] neon colors and stuff.

So I built a theme based on that. This particular theme, like I normally wouldn’t put a vibrant yellow in mine but someone else made one. I also have a YouTube series called GUI Challenges, which is always using my Kung Fury theme in sublime, and people commented on all the time. They generally don’t like it.

But some people are like super in love with it. Like the things not to like, which are things that are important to me and this one doesn’t have it as much is I try to, if the syntax is correct, I push all the noise away: like quotes, curly brackets, semicolons, colons, commas I do like to keep because like I just as a scanner of the code, that’s all noise.

I just wanna be like imports, pic path from, there’s the path, like the rest of it is all just junk to get the job done. So my code syntax highlighting is always pushing the junk away as long as it’s good, cause if it’s bad, it highlights in red. So that’s my mantra and somebody built this theme. I was like, they, and it’s my VS code theme is very out date at this [00:39:00] point.

My sublime theme is very nice and up to date. And this one was made, oh, what is the name of this one? Anyway, someone built it inspired from GUI Challenges and I was like, y’all did a really good job. I sent a messages and I’m like, I’m using your theme now on my VS code. And they’re were like, huh? I was like, job, I gotta do it.

But yeah, it does all match the cyans. The purples. The pinks. That’s good stuff.

Sam Brace: As every good designer should. Carry the design across all elements. Excellent work there Adam. I like it.

Jen Brissman: Yeah, and I knew okay, so obviously I think Sam was saying, I think it’s intentional, probably knowing that it very much was intentional, but like I knew okay, like not to take a turn here, but like I knew how your code made me feel.

I’m like, wow, this is so clean. I love this. I feel like very safe with Adam’s code right now and I’m looking at his website and it looks like very beautiful and clean. And what you said before, simple and intentional and minimal, but just beautiful and appealing, and it just makes you feel good.

And as much as like developers, I know a lot of incredible developers that are [00:40:00] like, I don’t do like design or I can’t be bothered with that. And that’s fine and great, but I do think it matters even on the Deno website that we were just looking on before. I’m like, this looks really pretty.

I like this like minimal vibe we have going on here and it does matter. And I love that that’s so much of what you talk about Adam and color and all of this, because even just in this podcast and looking at your stuff, I’m like, this all just feels good. Even your background, even your colors behind you, like you just, oh yeah. It now makes you feel good and safe and it’s fun and fresh and I just love it. So this is maybe something I was gonna say after you left the show, but had to give you some compliments in real time cause it just all feels so good. Yeah.

Adam Argyle: Thanks so much. I follow in the footsteps of some other great people where they were like, I just found this cool font for my

code, and I was like, and it was like, I remember operator mono and it was like $150 bucks to buy it and I was like, Ooh, I’m not gonna buy that. But I did buy Dank Mono and that’s what I’ve been bringing with me for all these years. And so that’s, the font in here [00:41:00] is Dank Mono, which has cool Fs and it has the kind of cursive-ish italics and stuff and yeah, look at from, that’s just pretty. And I was like, I gotta have it. Oh yeah. Back when Ligatures were just coming out when the arrow was connected to the greater down, I was like, oh, I gotta, I have that’s just too slick.

Jen Brissman: Yeah. And I’ve never seen a theme where it strips out like, if the syntax is correct.

And I was wondering, I’m like how do you know if it’s not, so it gives you red and squiggly underline of doom and you know to fix it. But when it’s right, like how it just strips it away I think that’s awesome. I’ve never seen that. And I’m gonna, I’m gonna get one of those themes for myself.

Adam Argyle: Thanks. Do it, Kung fury and ping me after the show. I’ll tell you which one this is on VS Code in case you’re in VS Code.

Jen Brissman: Yeah, for sure. I am on VS code. Cool.

Sam Brace: I think the thing that’s great about the project in many ways is that, we are we’re touching lots of different things, right?

As we’re going through this. Obviously, we talk about the images and the videos, but I think the nice thing is that [00:42:00] if people go to your site, nerdy.dev, and they take a look at the blog post where you talked about new year, new site it happened of course, on January 1st, so not hard to track it down it’s to say there’s lots of things that we break down, like the fact that you’ve been able to handle fun ways to handle light and dark modes, and you have all your commenting done through web mentions, and the way you handle analytics is also a little bit groundbreaking, at least in my opinion. So it’s where I hope people don’t just say oh, this is a chance to talk about fun ways to do images and videos properly.

But it’s also to say If you’re not so inclined on the image video side, you want to cover other things. I think there’s lots of little pockets and rabbit holes you can go down in that blog post that can really teach you a lot about ways to really enhance any website, let alone a personal blog post.

So I’m very impressed by the work that you’ve been doing, Adam. So if this is…

Adam Argyle: Thank you.

Sam Brace: …people’s first foray into what you’re doing, goodness gracious you, there’s gonna be a lot that they can uncover where the great [00:43:00] work you’re putting out there.

Adam Argyle: Thanks so much. I appreciate that a lot. It’s really nice.

Sam Brace: So, Adam, since you are a developer, you’ve been doing this for years, you’ve been developing, as you said, you’ve done lots of websites, so you have your time at Google, getting to work with some probably the brightest and best in the field. What do you feel like, is there any like big takeaways to say people should be focusing on X or Y or like maybe inspiration for the developers out there that are saying, I’ve heard a lot.

What should I be doing? What can I do with information? Anything like that.

Adam Argyle: Ooh, I have a…

Sam Brace: I know spot block. The floor is yours.

Adam Argyle: Lot of different rants there, right? Let’s see. I think a good one to mention is that there’s a lot of conversation around DX versus UX. And I feel like I’m a weirdo in this conversation.

So like I obviously I have a lot of DX in mind. I’ve got my own syntax themes that I use. I’ve developed my own way to work with TypeScript. I’m trying out all these different frameworks, looking at their DX, [00:44:00] looking at Cloudinary, experiencing the developer experience of Cloudinary. And these things

I directly use to impact my UX, but I also don’t, I don’t attribute the success of my user experiences from my tools. So what I wanna do is help us split things out. Like we’re doing a disservice to the user experience industry. And the developer experience industry by trying to say that one leads or one rules the other one.

And so I wanted to share that as a user experience designer that’s all they do and they’re doing way more than you could ever do, building it into VS Code the things that they think about, the things that they care about. It compliments everything that you are gonna eventually build into this tool.

So DX can’t exist without UX being thought of first. And so just I would implore folks to really focus on your user. Put yourself in their shoes. Think about what it would be like [00:45:00] to not have a mouse and to only be able to use a keyboard. What would it be like if the light theme gave you migraines?

All sorts of things like that and that, data saver mode, like I was saying, that that’s really important to me that folks visit my site and I’m not gonna be like, here’s 140 images that are all about five megabytes each. That would be rude. So I got loading lazy on there, and then I’m doing all this optimization and then they load my site.

They’re like, oh good. This is only, a light amount on my data plan, which is really nice. Orient yourself to the user and you’ll be happier. Compare yourself and compete less with other people and you’ll be happier. That’s my message, I guess.

Sam Brace: I like it. I like it a lot. And I think it is something that it’s so easy for anybody, I think, in the tech space, regardless actually what your role is, to be so heads down and focused on the tasks that are at hand, that they don’t think to themselves, how is this gonna impact the person that’s actually gonna have to use this thing that I’m building or working on?

So I think constantly putting yourself in the shoes of the person that’s [00:46:00] gonna be experiencing whatever you’re working on is a great focus area. And I love that area to say, think about the user and developers can help drive that engagement for every user. So I love the mirroring between the two.

Adam Argyle: We’re all in this together.

Sam Brace: This is cool. This is cool.

Jen Brissman: Yeah. We’re all in it together. Like you’re talking about working with Colby, all the people available at Cloudinary. Like teamwork makes the dream work, but also it’s not just about. Making something work. A lot of developers, their mindset is like the first thing you have to do is let’s make this work.

But then the next step, which I feel like Adam, you’re all about, is how does it make you feel? Is it gonna stress you out, give you a migraine make use a bunch of data? How is this gonna make the user feel? And that feels like a kinda new-ish concept in the not new, I don’t know what new means, but I hope we see a lot more developers focusing on the stuff that you’re focusing on going forward.[00:47:00]

Adam Argyle: Thanks so much. I have a metaphor I like to say is you could give me two cars and one has a, just the latest, coolest engine it’s so fast, hyper optimized, uses $1 worth of gasoline and goes a thousand miles or whatever. And I sit in it and it’s all squeaky. And then I try stirring the steering wheel and I’m like, it’s weird and uncanny. And then, the interface is all weird. I’m just like, sorry you lost me. Your car is dead to me now I’m gonna go with the car that I sat in that was comfy and might be mildly less good in some other ways. It’s just that’s how we are as users. At the end of the day, the performance factors don’t apply as much as a vibe.

This is like Bauhaus used to teach us that form follows functions. So yeah, you do need to make it work first, but then you need to find out what’s the shape that makes this ergonomic, what’s the shape that makes this last? And that’s the fun part. It’s also a really hard quest, but it’s worth it. Yeah.

Sam Brace: [00:48:00] Love it. Way to end on a Bauhaus situation. I love that too. Adam, this is great. Great work. So thank you for being here. This is wonderful and I highly encourage for people to be able to come over and check out all the great work you’re doing over on nerdy.dev. I think it’s, you’re doing some amazing stuff.

And I, I will also quickly plug the work that you’ve been doing with being able to do the HD gradients, the other one that you mentioned earlier with the Svelte framework that’s different than the nerdy.dev program. Make sure that people are checking both of these things out. Amazing work by you. So keep it up.

Adam Argyle: Thanks so much. Jen, it was really nice hanging out with you and Sam, nice hanging out with you too. Appreciate the time.

Sam Brace: Absolutely.

Jen Brissman: Thanks for coming on, Adam. This was a lot of fun.

Sam Brace: Jen, I gotta ask you. What is your big takeaway here? What’s the thing that stood out to you about everything we talked about with Adam today?

Jen Brissman: I don’t wanna sound like a broken record because I feel like I’m, [00:49:00] I keep saying it, but I’ve been in the head space just personally. I’m in Japan right now and everything is so aesthetically intentional and it makes you feel good. It’s minimal and the design is just like something at least I’m not used to in the US.

And I feel like Adam I don’t know, maybe he belongs in Japan because his stuff just makes me feel so good. I don’t know if I’m not used to that is the right thing to say, but it just feels like a newer concept. And I know as a developer myself, CSS is like not that fun to learn.

There’s a big hump to get over until you’re actually good at it. And I’m not over that hump myself and I just see what he’s doing and it makes me like wanna get over that hump because I think what you’re really fluent in CSS, you can do some amazing things, but there are a lot of different programs coming out that are like low-code, no-code or drag and drop, snap to fit Wix, like website [00:50:00] creators and programs that take that part out of it.

But, it just makes me wanna go back and do it like Adam’s doing it because I think it can be so much better when you customize it and you really know what you’re doing and you really have the user in mind and. And yeah, I just feel really inspired. So those are my takeaways.

Sam Brace: Good. And it’s wonderful when we feel inspired. We already knew Adam and knew what we’re gonna walk into. So it’s nice when there’s layers and layers on this as well. I think the big thing for me with this was I love the exploration that Adam did, where like new site knew everything and like where he basically started fresh, like I said, new framework, new way of handling commenting because he wanted it.

He works at a company that does analytics and he’s but I can potentially do it slightly differently and try out in different platforms and see what’s possible. So, I just like the fact that everything was blank canvas theres nothing assumed. That’s coming in there and trying it and seeing what [00:51:00] works.

And so I, I really appreciated the fresh takes of a lot of the things that he did and I hope that many developers, even ourselves, continue to do that and say, just because we did it that way yesterday doesn’t mean is the right way to do it today. So I think there’s a lot to learn from Adam there.

Jen Brissman: Yeah. And I love that comfy car concept. I hadn’t thought of it like that, but, and also the fact that Adam has gone in and just poked around and just seeing how things work. Obviously that’s an incredible quality in any developer, but it just goes to show when you’re passionate about something, you can just get so much farther and learn so much more. And his passion clearly shows and what he’s landed on and what I trust, he’ll continue to grow and continue to land on, continue to explore. And yeah, it’s just really awesome stuff.

Sam Brace: Absolutely. Absolutely. So with that said, let’s make sure that people know if they liked us.

Great. Stick around because we got plenty more episodes for you to check out all of them at [00:52:00] cloudinary.com/podcasts. And it’s not the only place you can get our podcasts, of course we’re gonna be on all the various services you probably listen to podcasts on, such as we’re on YouTube, we’re on Spotify, we’re on Apple Podcasts, Google Podcasts, we’re on basically, you name it, we’re there. And of course, we have years and years of content to go through. So you can see here we have episodes from all the way from student developers all the way to some of the best and brightest in the field, like this episode right at the top from Kent Dodds. So, make sure to check those out if you wanna see the full library, of course, cloudinary.com/podcasts.

Also, as mentioned before, keep the conversations going. If there’s anything that Adam talked about or you’ve heard about on other episodes and you want to ask other users… are they doing this? Like maybe some of the transformations that Adam went explored, like f_auto and q_auto and c_limit, or maybe some of the ways that he was able to do conversions from GIFs to mp4s, anything like that, you can discuss that at Cloudinary’s community.

So that’s community.cloudinary.com and as you can see, we have a [00:53:00] handy dandy Discord server for realtime chats amongst yourselves as well. So make sure not to miss any of those. And even though I plugged it earlier, I can’t plug it enough, go check out nerdy.dev for all of the great work that Adam’s doing.

You can see he’s regularly posting content about all the things that he’s up to, what places he’s speaking at, and of course just some of the moods that he happens to be. So wonderful things that are happening in this case.

Jen, any final thoughts before we let our audience take the rest of their day?

Jen Brissman: I don’t think so. I think we covered it. I don’t wanna sound like a broken record. I just I think this was a really fun episode.

Sam Brace: Yeah. I agree. Absolutely. On behalf of everybody at Cloudinary, including myself and Jen, thank you for participating in this DevJams program and we hope to see you at future episodes where we will talk with developers that are doing innovative, inspiring, and interesting projects with images and videos, and likely using Cloudinary.

[00:54:00] Take care and we’ll see you at the next one.