Autoshow Types with Dev Agrawal

Episode Description

Anthony Campolo and Dev Agrawal discuss SolidJS, React suspense patterns, TypeScript best practices, and review types in the Autoshow project.

Episode Summary

Anthony Campolo welcomes returning guest Dev Agrawal for a wide-ranging conversation that touches on SolidJS's growing influence in the JavaScript ecosystem, the mechanics of React's suspense and transitions for handling asynchronous UI, and practical TypeScript advice applied directly to Anthony's Autoshow project. Dev shares how Angular's adoption of signals marked a turning point for Solid's visibility, and he previews his upcoming CodeMash conference talk on building asynchronous UIs, framing suspense as the async/await equivalent for component rendering. The conversation shifts when Anthony walks through the Autoshow CLI architecture—a tool that processes audio and video content through transcription and LLM-powered show note generation—and Dev offers live TypeScript feedback, emphasizing that developers should minimize manual type annotations and rely on type inference wherever possible. He demonstrates how removing return types and redundant variable annotations can simplify code without losing safety, and explains how TypeScript's reference navigation features change how you move through a codebase. The pair also compares AI coding tools and LLM workflows, debates the merits of Cursor versus ChatGPT-based development, and discusses image generation for conference slides before planning a follow-up stream.

Chapters

00:00:00 - Catching Up and the State of SolidJS

Anthony welcomes Dev Agrawal back to the show, joking about him becoming a regular guest. They reflect on how their interests in the web ecosystem have shifted over the years, with Anthony moving toward AI while Dev has gone deeper into front-end frameworks, particularly SolidJS, where he now serves on the core team.

Dev traces his entry into SolidJS back to late 2022, spurred by Theo's coverage of the framework. They discuss Solid's impressive record as the most loved framework on the JS survey four years running, though Dev tempers that enthusiasm by noting small communities tend to skew toward enthusiasts. He argues that the real inflection point for Solid's influence came when Angular adopted signals, which brought broad industry attention to the reactive primitive that Solid had championed.

00:06:26 - CodeMash Conference and Async UI Patterns

Dev plugs his upcoming talk at CodeMash, a multi-track software conference held at an indoor water park resort in Sandusky, Ohio. After some banter about snow conditions in Kansas and Ohio, he introduces his talk topic: building asynchronous UIs without the typical hassle of managing loading states, error states, and race conditions.

He walks through how suspense and transitions eliminate intermediate async states, making asynchronous data behave almost like synchronous state from the developer's perspective. Anthony draws a helpful parallel to JavaScript's async/await syntax, which Dev appreciates as a framing device for his conference audience. They discuss how frameworks like Remix and libraries like React Query handle async outside of React versus how suspense brings those patterns directly into the rendering model.

00:13:17 - Suspense Deep Dive and Presentation Walkthrough

Dev shares his screen to walk through slides explaining how suspense simplifies state management. He illustrates how each asynchronous data source normally introduces loading and error states that compound across navigations and multiple data dependencies, and how suspense collapses all of those intermediaries so developers only handle them when they choose to.

Anthony connects this to Redwood Cells, which similarly separate success, error, and loading states into distinct components, though Dev clarifies that suspense inverts that pattern by making async transparency the default. The conversation touches on delimited continuations as the theoretical umbrella connecting async/await, try/catch, and generators, reinforcing the idea that suspense brings a familiar programming model into UI rendering.

00:19:52 - TypeScript Journey and Framework Experiences

The conversation pivots to TypeScript as Anthony asks about Dev's history with types. Dev recounts learning TypeScript through Angular 2 around 2017, where the framework's class-based architecture made type adoption seamless compared to later experiences with React's prop types. He credits VS Code's Language Service Protocol and autocomplete features for making TypeScript immediately valuable.

Dev traces how TypeScript influenced his framework choices, leading him to NestJS for backend work and eventually to tRPC and the Create T3 App ecosystem. Anthony shares his own path, explaining how Redwood's GraphQL and Prisma integration gave him type safety without writing TypeScript directly, and how his DevRel role made him cautious about adding TypeScript complexity to demo apps that needed to be accessible to beginners.

00:31:34 - TypeScript in Practice: Reading and Navigating Code

Dev makes the case that TypeScript improves code comprehension and navigation, not just correctness. He explains how shared types across files reveal relationships between variables that would otherwise require manual investigation, and how type names add a layer of semantic context beyond variable names alone.

They acknowledge the tradeoff: heavily typed libraries like TanStack Router can become harder to read, not easier. Dev and Anthony discuss the broader TypeScript debate, referencing Ryan Carniato's preference for JavaScript and Kyle Simpson's standards-first philosophy. Chris chimes in from the chat as the TypeScript advocate, and the group touches on the prospect of native type annotations coming to JavaScript itself.

00:39:28 - Live Code Review of Autoshow Types

Anthony shares his screen to walk through the Autoshow project architecture, explaining its CLI pipeline: metadata extraction via yt-dlp, audio processing, transcription through Deepgram, Assembly, or Whisper, prompt selection, and LLM-powered show note generation. He then opens the project's type definitions for Dev's review.

Dev examines the processing options type, handler function types, and the process command architecture. He identifies that the handler function's return value isn't being consumed in several code paths, prompting a discussion about whether all output should flow through a SQLite database rather than being passed through function returns. Dev observes that type questions often reveal architectural questions underneath.

00:54:02 - Simplifying Types Through Inference

Dev provides hands-on TypeScript advice, demonstrating that many of the project's explicit return type annotations can be safely removed because TypeScript's inference engine already knows the correct types. He shows how hovering over functions reveals inferred types and explains that manually annotated return types can actually distort reality if they drift from what the code actually returns.

They remove several return types and unused type definitions live on stream, with Dev explaining the principle that if removing a type annotation causes no errors, it was unnecessary. He references the Theo versus Primagen debate on return types, noting Theo's position that inference should always be trusted versus Primagen's preference for explicit signatures as documentation. Dev also recommends avoiding enums in favor of string unions.

01:06:56 - TypeScript Tooling and Developer Workflow

Dev demonstrates TypeScript's reference navigation features, showing Anthony how shift-F12 and go-to-references provide a more reliable way to navigate code than text search, since TypeScript tracks semantic connections rather than just matching names. They troubleshoot a persistent TSC error related to the Anthropic AI SDK's type definitions.

The conversation shifts to comparing AI-assisted coding workflows. Anthony describes his ChatGPT-based approach of conversational feature development and iterative error correction, while Dev advocates for Cursor's composer feature. They discuss the economics of AI subscriptions, with Anthony explaining his preference for the ChatGPT Pro plan's unlimited o1 access and Dev considering a switch from OpenAI to Claude for both chat and coding.

01:28:25 - AI Image Generation and Closing Thoughts

Dev expresses interest in improving his use of AI image generation for conference slides, and Anthony suggests making it the topic of their next stream. They briefly discuss Black Forest Labs, Grok's permissive image generation policies, and tools like v0 and Bolt for UI generation.

Anthony shares a personal anecdote about creating a picture book with his wife using AI-generated character avatars, illustrating how image generation has opened creative possibilities for people who can't draw. Dev connects this to his own goal of improving conference demo UIs with minimal design effort. They wrap up with Dev plugging SolidJS and suggesting Anthony connect with a community member named Jesse who manually creates chapter markers for Solid streams, a workflow the Autoshow tool could potentially streamline.

Transcript

00:00:02 - Anthony Campolo

And we're live. Welcome back, everybody, to AJC and the Web Devs. We have returning guest Dev Agarwal. What's up, buddy?

00:00:14 - Dev Agrawal

How's it going? At this point, you might as well call it AJC and the Web Dev.

00:00:19 - Anthony Campolo

Oh, singular Dev with the Web Dev, you mean?

00:00:24 - Dev Agrawal

Yeah, yeah. Most people just get confused on that. But yeah, I get what you mean. Thanks for having me back on. It's a lot of fun having these conversations every now and then.

00:00:36 - Anthony Campolo

Yeah, for sure, man. You sent me a super nice New Year's message saying how much you love our web chats, and I very much enjoy them, too. I was saying last time you were on that you were plugged in to the web ecosystem now at the level that I was like two years ago and no longer am. So I need people like you to help fill me in because I don't know what's going on anymore.

00:01:01 - Dev Agrawal

I mean, hey, in two years' time, it might be flipped again.

00:01:06 - Anthony Campolo

Yeah, well, I know I'm probably not going back. I'm probably going to stay where I am. In two years, we'll need to find the new young upstart and he can educate us. That's fair.

00:01:17 - Dev Agrawal

Yeah. You've jumped around quite a bit. Web and Web3, AI. It's like you've been on the hot trends, and I've been keeping them away as much as I could.

00:01:33 - Anthony Campolo

I will tell people, though, that I was interested in crypto and AI far before they became big trends. I was interested in them before I even learned how to code. So you could look at my history and be like, oh, he just hopped on the Web3 bandwagon and then when Web3 crashed, he got on the AI bandwagon. And it's like, no, actually, in 2019, I wrote a blog post about GPT-2, so suck it.

00:01:59 - Dev Agrawal

Nice. Yeah. It's very difficult to see the small minority of people who jumped on something before it was cool.

00:02:08 - Anthony Campolo

Totally. Yeah. But you've been on the Solid bandwagon. Now you're on the core team. So that's pretty cool.

00:02:17 - Dev Agrawal

Yeah, I jumped on it when it became cool, so I don't get that. I guess I don't know if it still counts. Maybe at some point, if Solid gets big, it gets a lot of adoption, then I get to say that, okay, I was in pretty early. But in terms of mindshare, in terms of impact on the ecosystem, I definitely got there once it started its golden age.

00:02:40 - Anthony Campolo

When did you start doing Solid?

00:02:44 - Dev Agrawal

I would say late 2022 is when I heard about Solid. I started looking into it and I tried to understand some of its concepts. Early 2023 is when I started my first Solid project, just a random side project to explore what it is, how it's different from React, and also Solid Start, what it's trying to do compared to Next.js and other things like that.

So yeah, early 2022. Sorry, late 2022, early 2023. Basically, around the time Theo was talking about SolidJS a lot because that was my entry point.

00:03:28 - Anthony Campolo

Yeah, yeah. For me, I have a hard time pinpointing when Solid became cool, if it's even cool at all yet. Because I had him on in November of 2021, and at that point I felt like it was starting to become cool. But most people probably didn't even really know about it then relative to now. But in three years, more people will know about it relative to now. So it's like, you know.

Yeah, I thought it was really interesting though. Ryan posted this: they've been number one every year they've been on the JS survey in terms of most loved framework. Four years in a row since they entered the chart, they've always been number one. I didn't realize that until now. I thought that was absolutely incredible.

00:04:12 - Dev Agrawal

Yeah, it's a really nice metric to look at. And yeah, to some extent, I also cannot be very happy about that because to some extent it's just a sign of having a small community. When you have a small community, you just have a community of enthusiasts. And when you get as big as React, you have people that are being forced to use React. So that number automatically goes down.

So it's a very exciting metric and there's a lot of good things about that. But it's also tough to gain any real sort of sense of achievement out of that metric.

00:04:50 - Anthony Campolo

Yeah. But even the fact that it's all, you know, a group of enthusiasts who love it. Even having a group of enthusiasts who love it is itself an accomplishment because it means someone's using it. You could get a whole bunch of people to use something and then they all say it's crap.

00:05:03 - Dev Agrawal

Yeah. Actually, I think I can pinpoint when Solid became cool: right when Angular started thinking about adopting signals. Because Angular is the biggest framework that adopted signals, other than Vue, which kind of already always had signals, it just had to expose them out.

But Angular is the one that really brought out all the discussion from all the big players about signals. And right now, if you go to conference talks, you look at YouTube videos, if it's about signals, it's about Angular.

So I think, yeah, that's what I would say. I was looking at CFP submissions for Momentum—that's the conference I organize or I help organize—and there were five proposals for signals. And all of them were for Angular. Obviously, because Angular is the one that is used in big companies that people go to conferences for and people talk about in these non-web dev communities and ecosystems. So obviously, if something new comes there, then everyone's going to know about it.

00:06:12 - Anthony Campolo

Yeah, that makes sense. I kind of had a similar thought, actually, when Brandon started building Analog. It was like, oh, Vite has hit the Angular community. That must mean it's finally arrived.

00:06:23 - Dev Agrawal

Exactly. Yeah.

00:06:26 - Anthony Campolo

Yeah, yeah. And you mentioned conferences. You're also doing a conference talk at CodeMash. You want to give that a quick plug?

00:06:34 - Dev Agrawal

Yes. CodeMash is next week in Sandusky, Ohio. It's one of my favorite conferences of the year because they do it in Kalahari Resort, which is the biggest indoor water park in Ohio. That's a lot of fun.

00:06:52 - Anthony Campolo

Tech conference at a water park. Can I go?

00:06:56 - Dev Agrawal

Please do. Yeah. CodeMash. That conference is another one that they do at Kalahari. There's probably one or two others. But yeah, CodeMash is one of my favorites also. Oh, 100%. It's snowing in Kansas, so it's definitely snowing in Ohio. Yeah, it's been snow-covered here for three days.

00:07:16 - Anthony Campolo

I'm sure you're also hit by it. We were hit by a huge storm like two or three days ago. We're going to have snow on the ground for the next ten days. It's going to be below freezing essentially the whole time.

00:07:27 - Dev Agrawal

Yeah, same. We've had snow here for the last three days. Honestly, I kind of miss Cincinnati's infrastructure of immediately cleaning out the snow from sidewalks and roads as soon as it happens. Here, no one really bothers cleaning it out, which is really interesting to see after living in Ohio for six years.

00:07:48 - Anthony Campolo

And I bet you pay the same amount of taxes for both.

00:07:53 - Dev Agrawal

I think I pay a bit more, honestly.

00:07:57 - Anthony Campolo

Well, there you go. It's going somewhere.

00:07:59 - Dev Agrawal

Yeah, yeah, yeah. I noticed my paycheck got just a little bit smaller as soon as it switched from Ohio to Kansas.

But anyways, yeah, CodeMash is a fantastic conference. It's a pretty big conference. It's one of the—it's gotten smaller since COVID like every other conference, but it's one of the biggest ones. Obviously, it's inside a water park. It's not a web dev conference. It's a general software dev conference. Multi-track. Two days.

Chris, how's it going? Long time no see.

00:08:34 - Anthony Campolo

Thanks for joining.

00:08:36 - Dev Agrawal

Yeah. Two days of workshops and two days of talks. Or is it three days of talks? It's also kind of a family conference where people bring their kids. They have a kids' section where it's kids-related sessions or sessions specifically for kids. So yeah, that's a lot of fun. Obviously, you're going to have access to an indoor water park for five days.

And my talk is called "Building Asynchronous UIs Without a Hassle." So I'm going to be talking about how, normally with frameworks, we have access to synchronous state management, which is pretty good. We have a lot of patterns around that. But when it comes to async, we always have a lot of problems, like race conditions, a bunch of different states that we have to represent, and we try to find patterns to make that easier.

[00:09:33] But eventually, I think now we are settled at some patterns that make it much simpler to deal with asynchrony. And these patterns are specifically suspense and transitions. So that's what I'm going to be talking about: what they are, how React implements them, and how Solid implements them.

00:09:53 - Anthony Campolo

Yeah. I want to just stick on this just for a quick second, because this is something I used to be interested in, but always felt like I didn't really have a good handle on it. Because stuff like suspense, I feel like it was kind of a thing that if you're someone who always uses frameworks, I feel like you wouldn't necessarily have to use because it's baked into frameworks.

So is that kind of your read as well, that basically people who use frameworks and get suspense automatically, versus people who write raw React have to figure out suspense? Is that kind of right?

00:10:22 - Dev Agrawal

So you can think about it. Yeah. If your framework that lives outside of React, like Remix, essentially it builds things like suspense and transitions outside of React, on the router level. So you didn't need it inside React.

00:10:40 - Anthony Campolo

So do they not even use the actual suspense? They would write their own stuff?

00:10:46 - Dev Agrawal

So they did use the actual suspense mechanism. You do need some level of suspense within React that you can hook into. Let me think about that. How do I want to talk about this? Because it's a very interesting, tricky topic that I've also kind of gained some different insights or different perspectives on as I was trying to build my demo for the talk.

Because I was trying to build something without a router, without a data fetching library, and in two different ways: with suspense and without suspense, and trying to figure out what exactly. So it's more like you can do your asynchronous management completely outside of React, which is what something like Remix would do, or something like Relay would do—one of those data frameworks or async frameworks. And then all the state would be piped into React where you just use it.

[00:11:47] So from that kind of perspective, you don't necessarily need suspense. React Query is another example where you use React Query for all your asynchronous stuff. And that gives you—that solves some of the problems for you, but not all of them. You still have to deal with all the different loading and error states yourself.

What suspense basically does is it brings a lot of those patterns within React. So if you want to build a framework around it, it gets much easier to do that because you can now just directly expose async things to React instead of handling them on your level. I don't know how much sense this is making. Probably not a lot.

00:12:32 - Anthony Campolo

It's making sense to me because I already have the whole suspense 101, right? The easiest thing I think to get people on board with it—yeah, right—it's just like, you know how you get your loading spinners in there? Yeah. In a simple way. That's like the most basic definition I usually gave of suspense.

00:12:50 - Dev Agrawal

Yeah. Yeah. I'm trying to talk about suspense in a way that it makes asynchronous consistency a default. Like, by default, it removes all the async edge cases, weird things that we have to do, and makes them as simple as synchronous states that we have to deal with. So let me actually share my screen and get your thoughts on this.

00:13:17 - Dev Agrawal split

Yeah, sure.

00:13:20 - Anthony Campolo

I always enjoy hearing people's talks and things like that because I've given so many talks myself. And it's a fun process.

00:13:29 - Dev Agrawal

Yeah. So this is how I kind of am trying to explain it. If you have these synchronous states A, B...

00:13:43 - Anthony Campolo

You're lagging. It's getting a little worse, Dev. Oh, you just dropped. You dropped out for about the last five to ten seconds.

00:13:52 - Dev Agrawal

Okay. How's it now?

00:13:57 - Anthony Campolo

Yeah, you're better now. Chris is saying that suspense is a little bit like Redwood Cells and Astro Islands, but different.

00:14:08 - Dev Agrawal split

Mm. Not sure.

00:14:11 - Dev Agrawal

About that.

00:14:12 - Anthony Campolo

It's true for Redwood Cells. I don't know if it's true for Islands.

00:14:18 - Dev Agrawal

Redwood.

00:14:21 - Anthony Campolo

Cells. Okay. Is that—it's a built-in convention where basically it gives you a pre-built component that separates your success, error, and loading states.

00:14:32 - Dev Agrawal split

Yeah.

00:14:32 - Dev Agrawal

Got it. Yeah. So in that sense, it's actually—I would say it's the reverse of that. So Cells is what I'm describing here. It's like if D is a state that requires fetching some data from the server, you have to deal with the loading state and the error state. So for each of these asynchronous states, you have two additional things to deal with: the loading and the error, right here.

So this is what you were talking about with Redwood Cells. Every time you have a cell, you have a loading and an error component with it. Or if you're using React Query, you have to deal with the loading and the error status, and then you deal with the data itself. Right? So every time you have one of these, you have these two additional things that come along with them.

So I have a couple different examples of like you reach D and maybe from that point you go to a different state.

[00:15:32] So then you have a loading state in between. So basically think of navigating to a page, and once you're on that page, you can navigate to a different page. Or here you're on a page where you require two data sources, which means you have to go through two different loading states, one after the other. And both of them can have their own error states. And only when both of them resolve, you have this final state where you see all the data at the same time.

What suspense does is it basically eliminates all of them. It makes the asynchronous state almost the same as the synchronous state. So you don't have to deal with it at all. So this is your default. You just go from C to D or from D to E or from C to D plus C. So all these intermediate states are removed. You don't have to deal with them at all. You only deal with them if you want to.

[00:16:23] And you deal with them at a hierarchical level or on your UI instead of on your data.

00:16:30 - Anthony Campolo

So could you say that it's just like...

00:16:33 - Dev Agrawal

That's how.

00:16:33 - Dev Agrawal split

I think.

00:16:34 - Dev Agrawal

About suspense.

00:16:35 - Anthony Campolo

Yeah, because you say it's literally like the async await built-in JavaScript feature then.

00:16:41 - Dev Agrawal split

Yes, yes.

00:16:43 - Dev Agrawal

I was going to add some slides about comparing it with async await and with try catch with generators. Basically this general idea of delimited continuations or continuations, which is the umbrella term for async await, try catch, and the generator syntax in general.

So yeah, that's basically the best way to think about Suspense. It does that async await kind of thing. It adds that async await flavor to React's model.

00:17:21 - Anthony Campolo

Cool. Yeah, I think that's a good way to frame it, especially for JavaScript devs. If you're not a JavaScript dev, obviously it won't make much sense, but every JavaScript dev at this point knows async await.

This is actually something that I have a custom instruction prompt for when I'm using LLMs, because sometimes they'll, because of their training data, they tend to use require instead of import and dot then instead of async await. So I have instructions to tell it, "Always use the modern JavaScript stuff," which is using async await. And then you get really clean code every time.

00:17:59 - Dev Agrawal

Yeah, that's nice. I was working on the explanation yesterday and I had remembered earlier to bring up the async await comparison, but I forgot about it yesterday as I was writing everything down. So thanks for reminding me. That's a very important comparison point that I need to bring up.

00:18:17 - Anthony Campolo

Yeah, for sure. That's what I'm here for. I know how to frame things so that the noobs can get it. That's kind of my superpower.

00:18:27 - Dev Agrawal

That's awesome. Yeah. Sometimes, especially being, talking to Ryan and some of these people, I've almost forgotten what a new mindset is like.

00:18:40 - Anthony Campolo

Yeah man, Ryan's the anti-noob.

00:18:42 - Dev Agrawal split

More of that.

00:18:43 - Anthony Campolo

Ryan is the least noob person in the entire JavaScript community.

00:18:48 - Dev Agrawal

Exactly.

00:18:49 - Dev Agrawal split

Yeah.

00:18:51 - Dev Agrawal

I talk too much with him and I think too much like how he talks or how he thinks. And that's not great when I'm trying to give a conference talk or write some documentation or even make a YouTube video.

00:19:06 - Anthony Campolo

Yeah, it's really interesting because you learn working with people like Ryan why it is required to be able to speak at that level. Because it's the only way that you can compress knowledge in a way that two experts can have a useful conversation, and it's awesome.

And this is why a lot of scientific papers are so hard to read. It's not because they're loading it with jargon. That's a separate problem that lots of people do. But it's because you're trying to compress so much built-in knowledge to be able to have a higher-level conversation.

And when you can get to that point, it's incredible because you can do work that no one else can do, but everyone else is kind of left in the dust.

00:19:47 - Dev Agrawal split

Yeah.

00:19:50 - Dev Agrawal

Exactly.

00:19:50 - Dev Agrawal split

Yeah.

00:19:51 - Anthony Campolo split

What's up man?

00:19:52 - Anthony Campolo

Thank you for everyone who's joining. Cool, let's start talking types. So you are a type expert. You know a lot about types.

We're talking about Ryan Carniato, the creator of Solid. So check him out. Ryan Solid on the internet. Oh, he is getting confused. He's my man. So you know a lot about types. This is one of the reasons I brought you on to the show in the first place, I think.

00:20:29 - Dev Agrawal split

So talk about a little bit.

00:20:30 - Anthony Campolo

The Autoshow types. So what is your journey with types? And is it related to the fact that you wrote Java?

00:20:38 - Dev Agrawal split

Um.

00:20:42 - Dev Agrawal

It is not related to that. But it is, in the sense it made my experience of Java a little more enjoyable than it would have been. My journey with TypeScript: So when I was in my first couple years into JavaScript, web dev, front-end dev, I started obviously with jQuery. I learned a little bit of Backbone.js, then I learned Meteor, which is where I spent about a whole year earlier.

And I built a lot of full-stack stuff with Meteor JS. It had a big impact on my entire trajectory, even to this day. I talked a decent bit about it. This has nothing to do with it. This is before TypeScript.

But after Meteor, I started learning Angular because Angular 2 had just come out and it was obviously the biggest framework at that time.

[00:21:55] It was kind of neck and neck with React, and the whole problem of going from. Am I back? Yeah.

00:22:15 - Anthony Campolo

We lost you for a second. You were just talking about Angular 2.

00:22:19 - Dev Agrawal

Okay, right. Angular 2, okay. Yeah, so obviously when Angular 2 came out, Angular was the biggest framework. The transition to 2 is what led to its downfall and gave React kind of the throne.

But when it came out, it was the biggest framework. So I started learning Angular 2, and Angular 2 defaulted to TypeScript. It was the recommended way. TypeScript was the recommended way to use Angular. They had a JavaScript version. They had a Dart version. But they're like, "Use TypeScript. That's the way that we want you to use Angular."

And honestly, after the first bit, it was kind of like, this was maybe two years, three years into my learning JavaScript, and it was a pretty fun experience. I don't remember if I had any issues or hurdles, that learning curve of learning what types are. I feel like maybe if I was jumping into TypeScript four years, five years into my career or into my journey, it would be a lot more difficult.

[00:23:28] But because it was so early on, or maybe there was that time where I hated it, but I don't really remember that. Another part, the other reason why maybe it was more seamless is because Angular was designed around TypeScript almost.

00:23:47 - Anthony Campolo

Yeah, so I was gonna say, yeah.

00:23:49 - Dev Agrawal

It was, yeah. And later when I used TypeScript with React, it was actually a lot more painful because I had to define all the prop types myself. With Angular, because you get classes, you don't really have that. You don't have to define prop types separately. Classes are types and you just define the constructor types, maybe the types of your properties.

So it was a lot easier to use TypeScript with Angular compared to with React. So this.

00:24:18 - Anthony Campolo

It was actually 2016 when Angular 2 came out. I just looked it up because I was curious. Also, you would have been in high school, you would have been like a freshman.

00:24:30 - Dev Agrawal

Yeah, I just graduated high school. Yeah, so this was I think 2017, I think. Yeah, by the time I got around to it, it was Angular 4 already. They skipped 3 for some weird reason.

So yeah, it was not exactly when 2 came out. It was a few months after that. So it was Angular 4 by that time, 2017, I think.

And because of how Angular was kind of designed to work with TypeScript really well, it was a better experience. I really loved the autocomplete features. I was also using VS Code. I'm pretty sure it was. Yeah, that was also the time that I switched from Sublime Text to VS Code.

So it was my first time using VS Code, first time using TypeScript, first time using Angular, and it was a pretty good experience because VS Code also came out with LSPs and it was the Angular Language Service, the TypeScript Service Protocol.

00:25:25 - Anthony Campolo

Yeah.

00:25:26 - Dev Agrawal

Yeah, and they had the autocomplete features from TypeScript, which I loved. After two years of just looking up documentation to try to figure out and making small typos and not knowing what I did, it was kind of a breath of fresh air having my IDE tell me what I'm doing wrong so early on.

So yeah, in that sense, I fell in love with it pretty quickly. And from that point on, I tried to make sure that I still worked on a few Meteor projects, but Meteor did not have that great support with TypeScript. So I went back to vanilla JavaScript.

But TypeScript was also one of the main reasons why I picked up NestJS for back-end, because it was basically Angular.

00:26:10 - Anthony Campolo

Yeah, it's like Angular for back-end and stuff. Yeah.

00:26:14 - Dev Agrawal

Yeah, so it was also one of the reasons I picked up Nest, because of its types, because how it was also designed with TypeScript in mind. Although today, it's not that great today. Things like tRPC take it much, much further. But yeah, tRPC obviously didn't exist back then, but I had no idea about it.

00:26:34 - Anthony Campolo

So is this why you jumped into the Create T3 App world so quickly when it came out? Because you kind of saw how it was really taking TypeScript to the next level?

00:26:48 - Dev Agrawal

Yeah, Create T3 App. So it was a funny story. About a few months before I saw Create T3 App and tRPC, I was working on a Next.js project. It was the first time I was working on a Next.js project where back-end and front-end were in the same project, server JavaScript and client JavaScript were in the same project, instead of being split into two projects with two different Git repos or two different projects within a monorepo or something like that.

And I kept running into this issue where I have some back-end code, and I put that in an API endpoint, and then I have to write a bunch of types around it. I have to write all the JavaScript on the client side to make that HTTP request, and then parse the JSON and then convert the types.

And I was very close. I was on the borderline of inventing a very shitty version of tRPC myself.

[00:27:55] That's the point I was hitting. And then I started working on that project, and a few months later I discovered tRPC. Like, wow, where was this seven months ago when I really, really needed it? Yeah, so yeah, I was fully on the T3 App after that.

00:28:14 - Anthony Campolo

Yeah. No, that's super interesting. For me, getting into Create T3 App was the first time where I really got into TypeScript, because the framework is set up in a way where it will not let you not use TypeScript. You have to use TypeScript. It won't work.

They have their CLI has this funny little bit where they would ask you at one point if you wanted to pick JavaScript or TypeScript, like, you know, Astro and these other projects. If you picked JavaScript, it would say, "Sorry, that's not an option," which I thought was really hilarious.

00:28:45 - Dev Agrawal

Yeah. Wrong answer. Use TypeScript.

00:28:47 - Anthony Campolo

Yeah, yeah. But really it was like you were saying, how it made it easy for you because Angular had it built in. It made it easy for you to kind of get into it because there were all these conventions already, and the framework itself was just built that way.

So for me, that was like Create T3 App. It was already built in. It would give you the types that you could use as base types to start with.

But what's funny is part of the reason why I wasn't using TypeScript for a while is because I was in this weird zone with Redwood, where Redwood is built on, or it was at the time built on GraphQL and Prisma. GraphQL itself is like a typing kind of scheme. And then Prisma was all TypeScript. You would have kind of types for your database models.

And if you had that set up with your Redwood project, you could write your front-end in JavaScript, but you would get all of the autocomplete because you had a schema and a database model.

[00:29:44] So it already knew what your types were, regardless of whether you used JavaScript or TypeScript or not. So I was like, this is the way to go. If you have your back-end typed so well that all the types get fed into your front-end, then you don't necessarily need to use TypeScript on the front-end.

So I really liked that kind of mode because it kept all of the TypeScript complexity within the framework and then within your back-end. And your back-end types will be generated by these scaffolding commands that you would do that would give you your create, read, update, delete features for your different models. And it would just give you all that, so you wouldn't have to worry about writing any of those types. So that was pretty sweet.

And also, you know, I was a DevRel. I was creating demo apps and I felt that it was like the rare case where you could make the case for leaving complexity out when you can. Because if people want to look at your demo and learn how it works, the less stuff you can put in there that's unrelated to what you're trying to teach, the better.

[00:30:51] So if someone who didn't know TypeScript wanted to come into your demo and learn how it works, if there's all this TypeScript stuff, then they'd be like, "Oh no, I don't know TypeScript. This demo is now harder for me to use and to understand."

So that was kind of how I made the case. It wasn't that I was saying TypeScript is bad and people shouldn't use TypeScript. It was more like I'm in a very, very specific narrow use case where you can actually make the case for why you wouldn't want it.

Now though, I'm building a production app and obviously you want TypeScript on a production app, so I'm willing to admit now I am in a world where TypeScript is the correct solution, and so I've gone all in on it. My project has been TypeScript for a very long time now.

00:31:34 - Dev Agrawal

Yeah, it's really interesting, that perspective on demos, because I feel like oftentimes when I jump into a new codebase, even if it's a demo and I'm trying to understand what it's doing, I often find TypeScript is helpful to me. And when it's not there, I have to do more work to understand what it's doing rather than if there were a couple type definitions that I could look at.

00:31:57 - Anthony Campolo

By looking at it, it helps to understand the project. Yeah.

00:32:04 - Dev Agrawal

Not just understand the project, but also navigate around it. Like, for example, if across two different files there's two different variables that don't seem related at all, but if they have the same type, it immediately gives me a lot more information. Okay, either it's the same object that's being passed from here to there, or they have the same source, or I know what properties are available on this or why this is being used here.

So it adds a lot more context to whatever I'm looking at, just having that knowledge of what data type this is, what properties it has. And beyond that, what is it named? Just having that name of the type, because the name of the type might be different from the name of the variable. So instead of just the name of the variable, you now have an additional piece of context. This is what the name of the type is.

[00:33:01] Now, obviously it can get a lot more complicated because if I jump into the codebase of, let's say React Query or TanStack Router, those are things that use TypeScript tuned all the way to 11 there. It adds nothing but complexity. There I would say, okay, remove all the TypeScript. Maybe it's going to make it much easier for me to understand the code.

But in simpler apps, for me, so I guess, yeah, what I'm trying to say is it's probably just about preference. If you don't have TypeScript knowledge, it's probably going to make it harder for you to understand the TypeScript codebase. If you do, it's probably going to make it easier compared to vanilla JavaScript.

00:33:43 - Anthony Campolo

Yeah.

00:33:43 - Dev Agrawal

Totally, for the codebase.

00:33:44 - Anthony Campolo

Like Chris is saying, "A TypeScript error a day keeps the production bugs away." Yeah, Chris has been all TypeScript for as long as I've known him, so that was actually really useful on the show because then we were both able to represent kind of the two sides of the TypeScript debate. Nice.

And what's funny is I didn't know anyone who was a serious JavaScript dev who was anti-TypeScript until I met Ryan. Ryan Carniato is, I wouldn't say he's anti-type, that probably doesn't represent his case, but he is someone who tends to lean towards JavaScript instead of TypeScript. And when I learned that I was like, cool, I finally have someone I can point to and be like, "Well, Ryan Carniato doesn't do TypeScript, you know?"

Still there? Sorry. For the audience out there, we've been battling a bit of computer lag here. Can you hear me, Dev?

00:34:49 - Dev Agrawal split

Oh, hello?

00:34:56 - Anthony Campolo

Oh no, we lost him entirely. Okay, what's up everyone out there in the chat? Anyone who's still watching, say hey. What's up man? We lose you entirely?

00:35:10 - Dev Agrawal

Yeah man, my internet is just not, it doesn't.

00:35:17 - Anthony Campolo

Hey, you gotta get an upgrade. I was actually, because I have some internet issues in my own place as well, I was looking at what would it cost to just get your own Starlink beamed directly into my unit, you know?

00:35:33 - Dev Agrawal

That'll be fun. Yeah, I do want to get an upgrade, but then I keep feeling like I don't do this often enough to justify it. Everything else really, it works fine. It's really when I'm on calls or live streams.

00:35:47 - Anthony Campolo

You don't stream on Twitch anymore? You gave up on streaming?

00:35:52 - Dev Agrawal

I mean, I want to. It's just that in my priority list, making YouTube videos is higher than Twitch streaming. And so if I cannot find time to just record YouTube videos, then streaming is like, I'm not even thinking about it. If I'm able to pump out YouTube videos, maybe. Yeah.

00:36:14 - Anthony Campolo

What about the Theo mode where you stream yourself recording YouTube videos?

00:36:22 - Dev Agrawal

I think I try to make my videos, this is not a comment on Theo's videos, but if you watch my YouTube videos, I don't think those are the kind of videos that you can record while streaming, because it's very much like there's a lot more editing work that goes into it.

00:36:44 - Anthony Campolo

Yeah, I think most people, I think it's pretty rare that someone can just do a stream and bang out five YouTube videos that just require a minimal amount of editing. That's a pretty rare skill.

00:36:56 - Dev Agrawal

Yeah, honestly. I should probably. I am from India and my channel name is just my full name. Dev Agrawal.

00:37:07 - Anthony Campolo

No, no, no. Zero nine? Like your Twitter handle?

00:37:12 - Dev Agrawal

No.

00:37:15 - Anthony Campolo

I think Chris is saying here, "I make my TypeScript so strict."

00:37:18 - Dev Agrawal

I'll throw it in the chat because I am not signed in to StreamYard.

00:37:22 - Anthony Campolo

Yeah, that's fine. I thought this is funny. Chris says his typescripts are so strict, it requires a congressional hearing and character witness.

And then we had one more comment here about Kyle Simpson. Yeah, I know I've listened to Kyle on a lot of podcasts. I don't know if I've ever heard him go deep into TypeScript itself, but I know he's a big guy. He likes to just use JavaScript based on the standards, and he doesn't like going outside of the world of JavaScript standards.

If I'm remembering his position correctly, I may be totally misrepresenting. This has been a couple of years since I've listened to him, but I'm pretty sure that's why he leads into using JavaScript, the language. He's really big on that.

So once JavaScript adds types, which let's be real, they're getting there. It's just going to be a couple more years I think. Then he'll be like, oh, now types are great.

00:38:20 - Dev Agrawal

It reminds me of Brian Leroux.

00:38:23 - Anthony Campolo

Oh my god, Brian is so funny. Brian is the person who I both respect the most while disagreeing with probably literally everything he has ever said. Like, I really disagree with his takes, but I gotta respect his knowledge and how he comes to those takes.

I don't think they're bad because it's bad thinking. I think he is actually an incredibly intelligent, really experienced dude. But you know, he's all in on web components and stuff like that.

00:38:55 - Dev Agrawal

Yeah. No build web components. Source maps, no TypeScript. Yeah. It's a fun crowd to be a part of. I like to stay away from that if I can.

00:39:08 - Anthony Campolo

This here for people who.

00:39:10 - Dev Agrawal

Yeah.

00:39:10 - Anthony Campolo

There's Devs, YouTube channel. Lots of great stuff.

00:39:16 - Dev Agrawal

Thanks. Yeah. So I'm probably gonna start live streaming once I can bring myself to record some videos. Yeah. Types. You're talking about types?

00:39:28 - Anthony Campolo

Yeah. Yeah. Let me start sharing my screen. I'm gonna go over. Oh, I might have to.

00:39:37 - Dev Agrawal

Rozelle. How's it going? Long time no see. Happy new year.

00:39:40 - Anthony Campolo split

We are Rozelle in the chat. What is up? It's good to see you, Rozelle.

00:39:46 - Anthony Campolo

A homie who has actually dove into webs. Not necessarily. They don't call it web three, but she's in the decentralized spaces, is what I would say.

00:39:57 - Dev Agrawal

It's beyond web three. Web five. A whole different level.

00:40:02 - Anthony Campolo

That's right. Yeah. Let me close that as well.

So let me start by just kind of explaining the auto show project to you first, and then I'll show you the types to get your take on it. So cool. I'm gonna just kind of go through the CLI version. There's a server as well that kind of reuses most of the same logic.

But basically it's a CLI where you're able to feed it different types of content. So you can give it a YouTube video URL, a YouTube playlist URL, a YouTube channel. I've actually been doing this with Ryan Otto's channel. Processing all of his videos is going to take me like five days of my computer running.

And then you can give it a list of YouTube URLs. You could give it a file on your computer, or you could give it an RSS, and then you can give it different transcription services, or you can give it different prompts.

00:41:04 - Anthony Campolo

And then it runs through this process of different steps. So the first step is it uses this thing called DLP to get the metadata from. Are you familiar with DLP?

00:41:22 - Dev Agrawal

Yeah, Theo talks about it all the time.

00:41:24 - Anthony Campolo

Oh does he. Cool. That's awesome. Yeah, it's an amazing tool. It's a huge component of this project actually.

So it basically takes in a URL and it can get the channel, the title of the video, when it was uploaded, the thumbnail, all of that. And then I have that turn it into a front matter block, essentially. Nice.

So that's the first step. Then it downloads. It takes the video or the audio and either extracts the audio from the video or changes the audio to the correct form, because it has to be, for Whisper, it has to be a WAV file.

So this is basically either takes, if it's a video, playlist, URLs, RSS or channel. It then strips out the audio. And if it's a file then it just kind of figures out what the format is and transitions it.

Then there's the transcription step. So now you have the audio file, and then you feed this to either Deepgram or Assembly, which are both third party API services, or Whisper which runs it directly on your machine.

00:42:44 - Anthony Campolo

So step three, and then those kind of reach out to these different transcription files. So it's modular essentially.

And then you have the select prompt. So what this does is this is how you tell the LLM what you want the show notes to be. So in the utils there's all the different prompts. So like create different titles, write a summary, different length summaries, bullet points versus prose. And then there's things like chapters.

So these are all the different things that you can tell it. I want you to generate this based on the content. Then there's the actual LLM step. So now that it has the transcript and the prompts, you feed those together to the project.

And you can actually skip this if you just want to get the prompt and the transcript and you can dump it into a chat interface yourself. But if you want the entire process to be automated, then you use the run LLM step.

And then clean up files. I used to have the project create intermediary files, especially around the transcription, where it will create you an LRC file that would then be changed to a text file.

00:44:00 - Anthony Campolo

That's all kind of been removed. Now I just have the transcription pass it through JavaScript variables.

So this is actually not really that useful anymore. It's basically just cleans up the WAV file, which I might get rid of just so people can have it after the end. But anyway.

00:44:16 - Dev Agrawal

Right.

00:44:16 - Anthony Campolo

So that's kind of how the project itself works. And then let's look at the types now.

So the kind of first most important type is the processing options. So this is all of the CLI options that you can feed to it. So you have video, playlist, channel, URLs, file and RSS. So those are the specific types to the CLI.

And you see here RSS. They're all strings except RSS because I have it set up to where you can pass multiple RSS feeds.

00:44:57 - Dev Agrawal

Makes sense.

00:44:58 - Anthony Campolo

Now for something like URLs, it's a string because it's a string that is giving you the path to a file that contains a list of URLs. So there's some parts where because it's a CLI, you're passing around a lot of strings. But underneath that there's actually kind of more complicated stuff going on.

So that's kind of the first note about things that might be able to be improved.

And then there's item which is specific to URL or specific to RSS feeds, because I have a setup to where you can pass a specific episode of a podcast. Like if you just want this, you don't want to process the whole feed. And it's an array because you can pass multiple of those.

00:45:52 - Dev Agrawal

Right?

00:45:53 - Anthony Campolo

Let's see. So let's get into some of these other ones. So actually this is no longer necessary. I can delete that type. Hey.

So now we have things like Whisper. So for Whisper you have Whisper types, and that's going to be over here in the transcriptions. So for each of these there's different models that you can pick. So you have tiny, base, small, medium. And then that kind of extends to things like Deepgram and Assembly.

So that's for transcription. It's the same for LLMs. We have ChatGPT models.

00:46:36 - Dev Agrawal

Right?

00:46:37 - Anthony Campolo

Claude models. Coherent models. Nice. And then so then there's also things like LLM services. So for this, it kind of gives you a list of all the different LLMs.

I think the one thing that I would be curious to ask you about. If I'm doing this correctly. So this handler function. So let me just see where is this being used. What's this handlers. Okay.

So let's talk about this right here. So we got this variable. This is for the different six process. I didn't go over each of these, but there's different process command that is for the six bases, which is video, playlist, channel. So each of those has their own file.

And there's this process handler that is like here's the six. And then there's a type that checks whether it's a valid action.

00:47:46 - Dev Agrawal

That's.

00:47:47 - Anthony Campolo

In here. So it checks that each one is valid action. And then, sorry, I'm getting kind of lost in the sauce here.

And then it also has this handler function type. So the handler function then checks for the options input, which is either going to be a URL or file path, and then the services, the transcription services.

But it has, I added more of these just to fix errors as it was going, because it used to be it would just return a promise with no info.

00:48:24 - Dev Agrawal

Right.

00:48:25 - Anthony Campolo

And then it used to return that. At some point it returned a promise with a string because it needed to pass like the transcription. But now it's just passing a promise, which is an object, because it returns all of the info like the front matter, the LLM output, the transcript output.

00:48:44 - Dev Agrawal

So actually it's basically any at that point.

00:48:47 - Anthony Campolo

What's going to happen if I. Yeah, exactly. So it's kind of useless. So if I remove all of those, let's see.

00:48:53 - Dev Agrawal

We have one here first header.

00:48:55 - Anthony Campolo

It'll give me these kind of errors.

00:48:58 - Dev Agrawal

So yeah. So that one's returning void. Okay.

00:49:03 - Anthony Campolo

All right. So I think I know why this is. This is because playlist, channel and URLs, each of those are running a bunch of these video commands basically.

So the video one just runs each of the six steps. And then for something like the playlist, it will do a loop and run process video on each of them.

So should there be different types for each of the process commands? Or should I figure out a way to have the handler function work for each of them?

00:49:48 - Dev Agrawal

I mean, it kind of depends what's happening with the result. Like where is the result going? The result out of the handler function. Does it just dump it into the terminal as an output?

00:50:04 - Anthony Campolo

So yeah. So it kind of depends whether you're using the CLI or the server, which is partly why this is a little bit confusing.

So let me just run a couple commands to give you some examples here. So let's just do a basic one like this. So this will be the simplest command you can run. It's just going to run on a single file.

00:50:28 - Dev Agrawal

Right.

00:50:29 - Anthony Campolo

That we have. And so this will be the file process command. So for this, it's going to return the front matter, the prompt you used, the LLM output and the transcription.

And there won't be an LLM output for what I just did because I didn't include an LLM. Okay. And then you get this, which is the file. And then also logs it in the terminal.

And if you were to do, so let me do this with the server as well. So you can see how that goes. So if we have a server running, then we can do this instead.

00:51:15 - Dev Agrawal

Right.

00:51:21 - Dev Agrawal split

Okay. Here we go.

00:51:25 - Anthony Campolo

So this will send a curl request with type file and file path. So it basically takes this command and it turns the flags into JSON inputs.

00:51:40 - Dev Agrawal

Right.

00:51:40 - Anthony Campolo

Essentially. Yeah. So this is going to do the exact same thing. But now it's going to, let's see.

00:51:51 - Dev Agrawal split

Oh, that's interesting. I don't think. Let me try this with.

00:51:57 - Dev Agrawal

What's supposed to download the file or something.

00:52:00 - Anthony Campolo

No, it was supposed to in the output here give you everything. Hold on. I think I know why. I want to do the video one.

00:52:09 - Dev Agrawal split

Let's do that instead.

00:52:16 - Anthony Campolo

So because there's also a front end that goes along with this. I'm basically the way I've been using this project the entire time has been with just the CLI, and it's all based kind of on file operations. So you'd always have this content folder where you would get the file at the end.

But since now I have a server and a front end, I've had to adapt all of that to basically return the info so that when you have a front end, you can actually get that response back into the front end.

Now another complicating factor though. There's also a SQLite database where things are being saved. So it may be the case that I actually might want to just say, screw all of this and just have everything be written to the database and work through that.

So if you see here now, we have this output, which is really hard to read, but it's basically just a JSON object.

00:53:17 - Dev Agrawal split

So look at that.

00:53:19 - Anthony Campolo

Yeah. So here we get the front matter comes out and then the prompt. And then there's no LLM output. And then the transcript.

So this is what happens for video. It should happen with file. I need to update that code. And then when you use the playlist, channel or URLs ones, it's running multiple times. So it's harder to know exactly what the output should be for that because you don't want to just output every single video necessarily.

So I think this is where what I'm realizing by just having this conversation with you is everything should just go through the database. I think that's how this should work. Yeah.

00:54:01 - Dev Agrawal

Mhm.

00:54:02 - Dev Agrawal split

Yeah.

00:54:02 - Dev Agrawal

So this is one funny thing I like about types is that at the end, questions about types turn into questions about the architecture more often than not. Totally.

00:54:13 - Anthony Campolo

Yeah, yeah, yeah. So what I'm thinking now is that.

00:54:23 - Dev Agrawal

So I think at this point, maybe you could, what you could have is, actually, I want to see where these functions are called. Like the handler function, where they're called in your code, and what happens to the result of that. Yeah. So like process handlers.

00:54:41 - Anthony Campolo

So right now, yeah, it seems like actually this itself isn't even being used really that much. It's only being used for this validate RSS action.

00:54:50 - Anthony Campolo

Hold on, I think I'm actually not even using this anymore because this should have been in my RSS one, but it's not even here anymore. So this might actually be just dead code.

00:55:09 - Dev Agrawal

You can look at the process handlers and where you're reading out of that as well.

00:55:19 - Anthony Campolo

Let me just try first deleting this and see what happens. Oh wait. No. Here. That's where it's being used.

00:55:27 - Dev Agrawal

Okay.

00:55:28 - Anthony Campolo

Okay. So right here, this is the process action.

00:55:35 - Anthony Campolo

And so let's see where that's being used.

00:55:40 - Dev Agrawal

I want to look into the inside the validate RSS action because that's the one that you're passing the handler into. So that's the one that's going to be invoking the handler. So I want to look into the code of validate RSS action because we know here the result is not being used. Do you not use control click or command click?

00:56:09 - Anthony Campolo

I'm not a TypeScript guy bro.

00:56:11 - Dev Agrawal

The first thing that I would say is TypeScript has really changed how I navigate the code base. So instead of using a global find and file find, it's been a lot more like go to reference or search by references, because that's what TypeScript enables. Things like command clicking or I think it should be F12 on the Mac where you see all the references of something. So if you try pressing F12.

00:56:42 - Anthony Campolo

F12 is just volume.

00:56:43 - Dev Agrawal

Nevermind. Okay. Right click and it should show us. Yeah. Right click on there.

00:56:53 - Anthony Campolo

Like right click?

00:56:56 - Dev Agrawal

Go to references. Yeah, that shift F12, sorry. So shift F12 shows you where everything is being used or where the thing that you're on is being used. So now validate RSS action is only used in one place, so that's fine. But if you look at like process action, if you click a process action and shift F12, this shows you a list of, okay, this is where this function is being called or this is where it's imported. This is where it's called.

So because TypeScript makes these connections through references, you have a much better way to navigate the code base that's not reliant on the name of something, because the names might be different, but TypeScript has a different dimension of how things connect to each other. So that will take a long time to get used to, how you navigate your code base, especially if you're already used to how you're navigating right now with find.

00:58:03 - Anthony Campolo

Yeah.

00:58:03 - Dev Agrawal

At some point I think that's going to speed you up as well. But outside of that, let's get into the validate RSS action.

00:58:18 - Anthony Campolo

So the where it's being used or the definition.

00:58:20 - Dev Agrawal

Yeah, the definition. So here you're passing the handler function. And you await the handler in here. But you don't do anything with the return value in line 605.

00:58:33 - Anthony Campolo

What this is basically meant to do is it's making sure, because there's a bunch of extra options with the RSS. And this goes with channel too. I'm eventually going to want to merge the RSS and the channel stuff together, because you have this huge chunk of data that comes along with a podcast feed or a YouTube channel, and there's a bunch of different options where you can do like the last three episodes or the episodes on a specific date, or you can go from the oldest to the newest or the newest to the oldest. And you can skip a couple at the same time.

So there's like 6 or 7 different flags that let you manipulate how you process the RSS feed or the YouTube channel. So this is making sure that you're not using options together that don't make any sense. Like you don't want to say, I want to download all the episodes on December 30th, and I want the last seven days because that wouldn't make any sense, you know?

00:59:33 - Dev Agrawal

Yeah. Makes sense. But the thing that I want to see is where are you calling the handler? Like any function of type handler function and using the return value, the object that you're getting out of it. That's what I want to see. Like here you're not using it. But what's a place where you are using it?

So you have this process. Yeah. Go to the process handlers where you have all six of them, the video channel playlist. You have that. Yeah, the second one. So now click on process handlers and go to find all references. Okay. So yeah the last one here is the third one. Yeah. So this is where you, in the process action, you have a handler but I guess you just pass it in. Is it the second one then, the selected action in?

01:00:37 - Anthony Campolo

So there's validate process actions and there's process actions. This is where having all this code written by ChatGPT gets you, because I don't entirely understand what all this stuff is doing.

01:00:50 - Dev Agrawal

Yeah. So I'm just looking for where that return value is being used. And it doesn't look like it's being used anywhere. So even if all your handlers just return void, it wouldn't really change anything. You're returning things.

01:01:08 - Anthony Campolo

Let me go the opposite direction here. So I know that for video it's returned here. And so this has process video which is using process options during process. So where is the process? So process video somewhere is interacting with this.

01:01:31 - Dev Agrawal

Bunch of places.

01:01:32 - Anthony Campolo

Nice. Okay. So that's what's happening here. So the process handler returns each of these. The process video and process file as well should also return the same thing. So these process video and process file are both returning all of that information about the show notes itself. Whereas process playlist channel and URLs are running multiple process videos or process files.

01:01:56 - Dev Agrawal

Yeah. So my question is that process, the data that process video is returning, who is looking at that data? Is there any piece of code that uses that object to do something with it?

01:02:09 - Anthony Campolo

So that's where the front end comes into play, or the server. So there's the server. The server will have to return. So you have here process video type. So process video will happen here. And then the server returns it. Yeah.

01:02:26 - Dev Agrawal

Right. So here you're calling process video directly. You're not going through the process handlers object, the record that you had that you were using for your CLI. Got it. Okay. That makes sense. Cool.

01:02:45 - Anthony Campolo

Yeah. And then this is an endpoint that an Astro front end is calling.

01:02:49 - Dev Agrawal

Got it. Okay. Yeah I think in that case maybe you would want to come up with a uniform representation of what all of these are going to return. Like maybe process video only returns one object, but process playlist returns multiple objects in an array. So you might have something like that.

01:03:11 - Anthony Campolo

That makes total sense. Yeah.

01:03:14 - Dev Agrawal

Yeah, maybe that's what it ends up being. And then that's what you store in the database as well. So it's the same as your database schema. That might be it. The other thing.

01:03:25 - Anthony Campolo

Oh yeah. Sorry. Go ahead.

01:03:26 - Dev Agrawal

Yeah. The other thing I noticed was this was a big thing two years ago, return types. So you're adding return types to almost all of your functions, which I think usually that's considered kind of like overkill or unnecessary and maybe even problematic in some weird cases.

01:03:51 - Anthony Campolo

Say more about that. Why is that?

01:03:54 - Dev Agrawal

It's because one of the things about TypeScript is that you want to minimize how many type annotations you're putting, and you want to rely on type inference as much as possible. So for example, even back when you were giving that Redwood example where you had Prisma and GraphQL, and because you had Prisma and GraphQL, you didn't need to write TypeScript on your own. You just had type safety in your regular JavaScript front end. Right?

That's because of TypeScript inference. Like you're actually still using TypeScript, but you're not writing TypeScript. Your IDE is using TypeScript features behind the scenes to give you those type safe capabilities, type inference basically, without you even having to write it. So you actually gave a very good example of relying on type inference without even having to write TypeScript. So that's actually the ideal way. That's close to the ideal way that you want to use TypeScript. It's like you don't want to write it.

01:04:55 - Dev Agrawal

You just want to gain the advantages of it behind the scenes. Return types is one of them. So, for example, here, you should be able to remove this entire prompt, a colon promise, and the entire definition of what it returns. Yeah, right. And still have it work. And if that doesn't work, that means there might be a few small tweaks that you can make to make the inference better.

But yeah, if nothing else breaks, this means that this is another way to improve your TypeScript. If you can remove an annotation and nothing breaks, you're probably doing something right. And that annotation didn't need to be there in the first place.

01:05:35 - Anthony Campolo

Fascinating. Super fascinating. Let me real quick, I had made a change here. For now, let's keep this here, and then let's see, having made that change, if I have any errors. Do you use tsc? How do you check for just type errors in your whole project? Do you use some like TSC or other tools like that?

01:06:00 - Dev Agrawal

I mean, yeah, usually whatever development server I have running is going to report type errors. It's not going to block me, but it's still going to report type errors. Or more often than not, if I change something like I have the file already open. And more likely than not, the issue is in that file and not in a different file that I don't have open.

But when I do, like VSCode lets me know, the dev server lets me know. There's enough things running TypeScript all the time that someone is going to let me know that something went wrong. And it basically makes sure that I don't make a commit or make a PR with type errors in it. It's way more likely that I make lint errors than type errors, because I don't always have the linter running. Okay, yeah, Chris is on that as well. Okay, better to let the function work it out rather than writing more types. Yeah.

01:06:56 - Dev Agrawal

You want to minimize how much TypeScript you are writing and let inference do most of it.

01:07:03 - Anthony Campolo

Okay, cool. You may not know this then if you're not using TSC, but it keeps throwing me this one error that's related to a node module for the Anthropic AI SDK. I wish it wouldn't do this but I don't know how to get rid of it.

01:07:20 - Dev Agrawal

Does it not have a like at types slash the differentially typed thing? So we can try. Go to your package.json. I want to see what the Anthropic AI. So what TSC is saying is that this package doesn't come with types, right? Anthropic SDK. What you can try to do is like npm install at types slash the name of the package and do it like.

01:07:51 - Anthony Campolo

Like these.

01:07:52 - Dev Agrawal

Yeah. Exactly. Yeah. Like that. Yeah.

01:07:57 - Dev Agrawal

And if that doesn't exist, then you can hack around, tell TypeScript that it's okay. It doesn't exist. It's basically the version of any for packages. You still need the at for Anthropic AI. Yeah.

01:08:14 - Anthony Campolo

Okay.

01:08:16 - Dev Agrawal

And the full package name. So Anthropic AI slash.

01:08:19 - Anthony Campolo

Okay.

01:08:21 - Anthony Campolo

It doesn't look like it exists.

01:08:24 - Dev Agrawal

Maybe it's like different syntax. Yeah.

01:08:29 - Anthony Campolo

Let's try this. Someone else has probably run into this. Oh, this one's mentioning no emit. Just like Chris said.

01:08:48 - Dev Agrawal

I guess it doesn't have a typed package, which is interesting. I thought most JavaScript SDKs these days are either built in TypeScript or have a separate type definitions package, which is.

01:09:06 - Anthony Campolo

Yes, literally it's a TypeScript library.

01:09:09 - Dev Agrawal

What? Yeah, maybe it's just a TypeScript versioning thing.

01:09:18 - Dev Agrawal split

Okay.

01:09:18 - Dev Agrawal

You might have a different version of TypeScript when you run TSC compared to what you have in VS Code. Right? It's just when you run TSC.

01:09:27 - Anthony Campolo

Exactly. Yeah.

01:09:29 - Dev Agrawal

Yeah. Then it's probably TSC of a bad version or something like that.

01:09:35 - Anthony Campolo

My node manager is...

01:09:41 - Dev Agrawal split

Let's see.

01:09:42 - Dev Agrawal

Yes. That's the first time I've seen someone using not npm.

01:09:47 - Anthony Campolo

Dude, NVM is trash. Volta is the shit.

01:09:51 - Dev Agrawal

I don't know, I've never had a bad experience with NVM.

01:09:54 - Anthony Campolo

Weird. I've only had bad experiences with NVM. Okay, this is not super important. That's fine. Yeah, let's go back to our types. Okay, so.

01:10:05 - Dev Agrawal

A package manager, he meant not node manager. Anyways, yeah.

01:10:08 - Anthony Campolo

Package manager, I'm just using npm.

01:10:12 - Dev Agrawal

Yeah, so with types you want to define obviously these core types, like the handler function, the markdown data. Those kind of need to be there, sure. But when you're writing functions, you shouldn't need to define the return types. It should just be inferred from whatever you're returning from it, more often than not.

Actually, as much as possible. And according to Theo, that should be the case 100% of the time. You should never have return types. Really? I disagree with that, and so does Primagen. But that's a whole different story. That was a whole debate.

01:10:54 - Anthony Campolo

Try and summarize their positions.

01:10:59 - Dev Agrawal

I think Theo's position is just that you should rely on inference all the time. Anytime you manually add expectations of types, it might be different from what the reality is. Type inference always gives you the reality. It's impossible for it to be anything different. But as soon as you add an expectation, you might distort the view of reality. That's kind of his position.

I think for Primagen, it's more about readability. When you look at the name of the function, the signature of the function, it tells you that. You look at it, promise void, and you know that you don't have to do any extra work to figure out what it returns.

For me, that has a very easy solution. You just hover on the name and the tooltip will tell you what it returns. So now if you hover on process URLs.

01:12:01 - Anthony Campolo

Mhm.

01:12:02 - Dev Agrawal

Yeah, it says promise void. So look at that. You remove the promise void, but type inference can still very accurately know that it's a promise void. So that's a sign that you don't need that.

01:12:13 - Anthony Campolo

So let's see what we'll do with this one as well. It does. Oh my.

01:12:19 - Dev Agrawal

If you hover on...

01:12:19 - Anthony Campolo

On.

01:12:19 - Dev Agrawal

Yeah. So now what it does is instead of giving you the named property, the named type, it just gives you the description. So this is one of the cases where it might be helpful to add that back in. So now if you add that back in, it just says markdown data instead of giving you that whole structure. Okay, so yeah, this is one of the cases.

01:12:39 - Anthony Campolo

So if I'm returning a type I've actually defined, it's more useful to have the return type. But if it's just returning information that is not actually written as a specific type, you should leave it out.

01:12:50 - Dev Agrawal

Yeah. And then it becomes about your preference. Sometimes just looking at the structure is enough for you to figure out what this type is. You don't need the name. Yeah.

01:13:04 - Anthony Campolo

No, this is great. This is super useful.

01:13:07 - Dev Agrawal

Also, you have JSDoc, which probably means that you can also remove the types from the parameters, like if you remove the options processing options. TypeScript can probably not from there. From the TypeScript. Not from there.

01:13:22 - Anthony Campolo

From the TypeScript. Like this.

01:13:24 - Dev Agrawal

Yeah. If you remove... never mind, I thought it looks at the JS docs. I might be wrong.

01:13:32 - Anthony Campolo

Yeah, I'm not sure. The JS docs has been a little tricky because there's JSDoc and then there's TypeDoc. So I'm using TypeDoc technically.

01:13:41 - Dev Agrawal

Okay.

01:13:41 - Anthony Campolo

Got it. Which is like JS docs that are better for when you're actually using a TypeScript project.

01:13:46 - Dev Agrawal

Interesting. I thought it was the opposite. I thought JSDoc had better TypeScript support because I might be misremembering, but I know there's definitely one where if you have the type definitions in your JSDoc, you don't need to repeat them in your TypeScript or in your type annotations. You can take that to the logical extreme and again, go back to not writing TypeScript at all and having all your types in JSDoc, which is another thing that the TypeScript crowd likes to talk about.

Brian Leroux talks about JSDoc a lot. He's like, just use JSDoc prototypes. You don't need TypeScript. Again, because it eliminates the build step and it still gives you type safety, which has the same argument. But that's more from the framework author standpoint and less from the application developer standpoint.

01:14:49 - Anthony Campolo

Cool. All right, well, I just got to delete a whole bunch of code. So that's always nice.

01:14:54 - Dev Agrawal

So another thing that this highlights if you stay here, you see the async is underlined. I think it's trying to say that this function is not actually async. What are you returning? Oh, oh yeah. Just how can we move to TypeScript types. Okay, that's interesting. See if you can quick fix that. What does it do? Oh, just add it back in.

01:15:18 - Anthony Campolo

Yeah.

01:15:18 - Dev Agrawal

Oh, that's dumb. Never mind. Yes, sometimes VSCode does the weirdest stuff.

01:15:25 - Anthony Campolo

Yeah, totally. I have been enjoying, though, I've started using the quick fix stuff anytime there's a type error. Now that I have Copilot, it will fix my type errors with Copilot, which is really nice. Yeah.

01:15:38 - Dev Agrawal

Yeah, honestly for me, a lot of times Copilot just generates code without any types at all, which makes it only more difficult. Then I have to tell it, "No, you dumbass. Rewrite that and give it types."

01:15:55 - Anthony Campolo

Yeah. Okay, I'm almost done with this.

01:16:03 - Dev Agrawal

So the Ollama function is another one. Say, call Ollama. And you're explicitly typing that as LM function. See if you can remove that as well. So that's the other one where you manually annotate a constant or a variable. Those are the two ones that should be inferred: the return types from functions and any of these variable annotations. And again, if nothing breaks, then you're fine.

01:16:29 - Anthony Campolo

Yeah. Yeah, that's one of the things I like about TypeScript is that you'll know whether you did it right or not without having to run the code.

01:16:39 - Dev Agrawal

Exactly. Yeah. Yeah. And then maybe if LM function as a type is not being used at all, you can get rid of, you can nuke the definition itself.

01:16:47 - Anthony Campolo

Yeah, we'll see. Once we've done all this, we'll see where we're at with that.

01:17:01 - Anthony Campolo split

Okay.

01:17:08 - Dev Agrawal

Okay. Now I want to see where that LM function definition... is it being used anywhere? Okay, yeah. That's also a place where you can remove it from because... yeah. And now I don't think it's used anywhere, which means you can nuke the definition itself.

01:17:23 - Anthony Campolo

So it's being used in this LM function, which is...

01:17:27 - Dev Agrawal

Is that...

01:17:27 - Anthony Campolo

Being used here. So let me delete.

01:17:31 - Dev Agrawal

Can you remove it also? Yeah. There you go. Look at that.

01:17:35 - Anthony Campolo

And this? Both of these types are gone now. Wham!

01:17:41 - Dev Agrawal

Yeah.

01:17:43 - Anthony Campolo

Killer.

01:17:44 - Dev Agrawal

And if you only have that one error, then you're doing fine. Yeah.

01:17:48 - Anthony Campolo

Awesome. Okay, so I think that might be the same for...

01:17:52 - Dev Agrawal

Yeah, you can find a bunch more where you might be able to do this. And also, probably not using enums and just using the string unions.

01:18:04 - Anthony Campolo

So that was actually one of my questions. Yeah, so yeah, that's a good thing, sounds like. Yes.

01:18:10 - Dev Agrawal

That is a good thing. Yes. Avoid enums. There's a couple Matt Pocock videos about that. He can talk about that much better than I can. Honestly, I don't even remember all the arguments. I just know that I want to avoid them.

01:18:24 - Anthony Campolo

That's funny. Okay, cool. I think I'm in a good spot with that.

01:18:36 - Dev Agrawal

Nice.

01:18:36 - Anthony Campolo

So I think in terms of this was the only return type I kept. I think these are all good.

01:18:43 - Dev Agrawal

A lot of effort into docs. That's impressive.

01:18:48 - Anthony Campolo

I mean, I guess it's one of those things. It's like I code this whole project with a very LM heavy workflow. So every time I have it write me code, I have custom instructions that say you have to write docs and you have to use JS doc or type doc or something like that.

And I don't even have the generated type docs saved anywhere. I haven't gotten to that step yet. But I'm pretty close to having everything typed in a way where I can generate the type docs. Nice doc reference. Which, really, I'm not even going to read. I'm just going to feed back into the LM so it understands my project. Makes sense, you know?

01:19:31 - Dev Agrawal

So you have an LLM heavy workflow and you're not using cursor?

01:19:36 - Anthony Campolo

No, because the way I've done it is that I like having the ability to have a conversation. And maybe cursor does this as well where you can have a chat going on about your thing. So basically what I do is when I want to build a feature, I explain the feature I want to build, and then I give it the specific files that are relevant to that, and then I tell it to rewrite the files in a certain way, and then it basically responds back with the code.

And then I make the change and it either works or it doesn't. And if it doesn't, then I get an error message and I give it the error message back and I'm saying, hey, the code you wrote doesn't work. So this workflow has worked for me. I have played around with Copilot. I haven't used cursor, but I have to imagine it's fairly similar to using Copilot. And I don't know, I just like this workflow better for whatever reason.

01:20:32 - Dev Agrawal

Yeah.

01:20:33 - Dev Agrawal

Okay. Yeah. Makes sense. Yeah, I would say like give it a try at least. And it has the chat functionality, although I've only been using composer where you give it a prompt and it just comes up with like changes that you can make to your files and you can apply them one by one. Of course it has results. Yeah. I mean it has like it's a feature within cursor like composer is.

Yeah, you can add like files as context, and then it will use those files to figure out like what needs to be changed. It can also like automatically detect like what files should be part of the context sometimes. And then it has a separate chat window which I haven't used, which I think does more of what you're talking about, where you can just talk through building a feature instead of like applying all of that. Yeah. So it has these two. And of course it has a result. Vouch.

01:21:36 - Anthony Campolo

As a what?

01:21:37 - Dev Agrawal

Results vouching for cursor. So that's got to count for something.

01:21:41 - Anthony Campolo

Yeah. No. And yeah, usually really smooth. Yeah. No, I've heard lots of good things about cursor. A really long interview that they did with Lex Fridman as well. Yeah, I should probably try it. Nice.

01:22:01 - Dev Agrawal

I was trying it, but then I ran out of the trial and then I ran out of OpenAI credits. So now I'm kind of stuck. I'm just waiting for like the month to reset, and my OpenAI's usage to come back.

01:22:15 - Anthony Campolo

So that's partly also I think why I've hesitated from using it is that I pay for OpenAI and I have the ability to have as many chats as I want with it, and it doesn't use your API key because I'm just using the regular chat. So cursor, I'm assuming you give it your OpenAI API key, right?

01:22:33 - Dev Agrawal

Right. Yeah.

01:22:35 - Dev Agrawal

So it has its own. Like you can just pay for cursor and like it's going to use its own thing. Or you can yeah, you can add your own. Of course. Yeah.

01:22:47 - Anthony Campolo

Yeah. So if I have to pay for cursor and OpenAI, that might be why I would hesitate to use it.

01:22:54 - Dev Agrawal

Yeah, I think you can just pay for OpenAI and use your API key. That's how I want to use it. I was going to use it. It's just that yeah, I also use my OpenAI key for like one of a random side project I was working on. And I think I might have just burned through my usage limits for the month.

01:23:18 - Anthony Campolo

Totally. You got to get on that pro subscription.

01:23:21 - Dev Agrawal

I am on the pro subscription.

01:23:23 - Anthony Campolo

For the $200 a month one?

01:23:25 - Dev Agrawal

Oh not that. No, not that one. Yeah, I'm on the $20 a month. $200 a month, I don't think I even use it that much to justify.

01:23:33 - Anthony Campolo

Yeah. The $200 one month one you can use o1 unlimited and then you get access to o1 Pro, which is a model you don't even get if you're on the free plan. But honestly, o1 is pretty good. I think getting 50 shots on o1 per week is good for most people. Unless you're really just using it an insane amount.

The o1 Pro is basically just like o1, but it takes a lot longer to give you an answer. And allegedly the answer is better. Like it thinks for like 5 to 10 minutes before it gives you an answer, which is kind of overkill and really breaks your workflow, I think.

01:24:15 - Dev Agrawal

Let me see which one do I use. Okay. Yeah. So I use, I guess for ChatGPT, I use 4o most of the time. I've used o1 probably a little bit here and there for some coding stuff. But yeah, I've barely used o1 right now. And yeah, I'm still waiting for my limits to reset.

01:24:36 - Anthony Campolo

o1 versus 4o is a big difference. I would highly recommend if you're doing any sort of coding, I would always default to o1 until you've used up all of that.

01:24:47 - Dev Agrawal

Yeah, I think my ChatGPT is right now mostly used for university assignments, which not mine of course. I'm not a student, but yeah, anyways, I'm not going to say anymore.

01:25:05 - Anthony Campolo

That's funny. And did you use Claude at all?

01:25:08 - Dev Agrawal

I used Claude as a part of just the free trial of cursor. And I've heard a lot of good things. I think at this point, I might just want to like end my OpenAI subscription and switch to Claude. Both for chat and for like for coding for cursor. I know that Copilot recently expanded their free tier and they added ability for using different models, so maybe I want to play with that as well. I'm not sure.

01:25:45 - Anthony Campolo

Yeah, I was using Claude almost exclusively for coding until o1 came out and then I switched back to ChatGPT. I'm imagining that at some point Claude is going to start doing the chain of thought, because what it does is o1 allows it to basically write an outline of what it's actually going to do before it gives you an answer. Result of saying Claude is her favorite way about writing code. I mean, yeah, I have had that experience with like o1.

01:26:15 - Dev Agrawal

I find that o1 is better for more complex coding problems. Like Rosa wants to know.

01:26:29 - Dev Agrawal

Of course.

01:26:30 - Anthony Campolo

Secret gig.

01:26:32 - Anthony Campolo

Are you writing essays for people and just using ChatGPT?

01:26:36 - Dev Agrawal

Not me. I'm not. Okay. ChatGPT is the one writing this essays.

01:26:41 - Anthony Campolo

Yeah.

01:26:42 - Dev Agrawal

Yeah, I'm sure I graduated university at the exact right time. If I was there for one more year, I would have seen like the entire pandemic of students using AI for all their assignments. Honestly, there's a lot of assignments that I had to spend way too much time writing, and I did not enjoy that. So it would have been honestly like a pretty good addition when I was a student.

01:27:12 - Anthony Campolo

Yeah, I was lucky. I was a music major, so I think I wrote one essay in the four years I was in college. But Brazil is saying here that you haven't tried o1 and you got tired of ChatGPT. I agree. Actually, I had a running Twitter thread of every single person who was complaining about 4o and how much it sucked, and I think Brazil was actually one of the people in that thread that I included.

And o1 I felt like completely redeemed them. It's really quite good. So I would recommend trying it out just to kind of see how it works for your own workflow. I'd still use Claude if I want to like refactor a single file or like add comments to some code or things like that, especially because it's a lot cheaper. It's, you know, $20 versus $200.

Yeah, or you can still use o1 on the $20 plan, but you get capped at like weekly usage, which that always kind of bugged me because if I got in a flow, I would use it a lot and I'd be like, hey, you have five messages left and then you get new messages in three days.

01:28:14 - Anthony Campolo

I'm like, oh, well, crap. Like then I'm like in this weird scarcity around my tokens.

01:28:17 - Dev Agrawal

No more recording for today.

01:28:19 - Anthony Campolo

So yeah, but you can get around that by paying $200 a month, which is, you know, pretty steep.

01:28:25 - Dev Agrawal

So honestly, what I want right now is like I need to learn how to use image models better, because one of the main things I use LLMs for is generating images for my conference slides. And you like the last 2 or 3 of my talks, I've used like a bunch of AI images.

I started with the one that I gave in May, and then I gave a talk at React Rally. It only had really 1 or 2 images. Then I gave a talk at Dallas last month. It also had a few AI generated images. And the one that I gave about Solid Start in November, October, November, I think it was October anyways.

So yeah, I want to get better at like generating images and I tried ChatGPT and like a few of the extensions that ChatGPT has because I just wanted to get like get it easy and done, but they were not up to par.

01:29:29 - Dev Agrawal

And I know there's like very deep you can go into generating images. I am just like I'm level one. I need to be at level seven.

01:29:38 - Anthony Campolo

Cool. We should plan another stream in a couple weeks and we can go over that, because that's something that I've done a little bit of research in. Not a lot. There's like Black Forest Labs. Yeah. So let me share my screen real quick and then we'll close it out after this.

So there's a thing called Black Forest Labs that I tried them out. I used their API a bit. It was really hard to get going, and I thought it was supposed to be open source. But then the way you use it, you end up just hooking into their kind of service anyway. And so it seemed like it kind of defeated the purpose. So I was not a huge fan, honestly.

So I need to also kind of look at the different image models available because there's open source stuff and there's paid stuff. And there's like all sorts of restrictions.

01:30:35 - Anthony Campolo

They add to it like with Grok, actually, you can have it generate images of real people. Like if you want to, you know, create an image like a politician or whatever, it'll do that. But ChatGPT will like very firmly say I will not generate any images of any people you have ever heard of. And if you want me to, then you can just shut up because I'm not going to do it.

01:30:57 - Dev Agrawal

Yeah, I have heard about that. Yeah. People on Twitter are very proud about Grok and its image generation capabilities. I see it all the time. Maybe I should just use Grok.

01:31:08 - Anthony Campolo

It does some wild stuff. Let me tell you.

01:31:11 - Dev Agrawal

I've noticed. Yeah.

01:31:14 - Anthony Campolo

Cool, man. Well, this was super duper useful for me. I learned a bunch. I got some very actionable insights. So very much appreciate you coming on and helping me out with this. And yeah, I would love to just kind of get like a regular streaming cadence going with you, maybe like once a month or so if you want, because it's always fun chatting with you and there's all sorts of stuff we can work on.

01:31:37 - Dev Agrawal

Yeah, definitely. Yeah. Let's, I guess it sounds like we have the topic for the next one.

01:31:44 - Anthony Campolo

Yeah, yeah, I'll do some research on that because that's something I want to learn more about as well. Actually, me and my wife have this thing we do where we both have our kind of like character avatars that we use and we generate ChatGPT images like based on different circumstances we've been in.

So I'm a parakeet filling my Twitter handle. It's a little parakeet avatar. And then she's a porcupine. And so we generated like literally like hundreds of these images of us just like in all sorts of different scenarios. And then she actually ordered like a kind of picture book that kind of narrates our first couple years relationship with these pictures. It's super cute and it is very fun.

So like this is something that I enjoy doing because it's something that allows me to connect with my wife. And because as a kid, I could not draw for shit. I was terrible at drawing.

01:32:37 - Dev Agrawal

I still cannot.

01:32:39 - Anthony Campolo

Yeah. So you'll agree with me then? Oh yeah. Yeah, yeah, it's super cute. And so the ability to now create all this artistic work through LLMs for me is like very gratifying because I can never create this any other way, you know?

01:32:54 - Dev Agrawal

Yeah. That's exactly why I'm trying to use these for my conference talks. Like I know I'm horrible at designing. Like I know I can't even like design slides for shit. So at least if I can like put a nice looking image there, like people are less stressed. Like I can distract people away from my bad slide design capabilities.

I'm trying to do same for my conference demos as well, where like obviously we have things like Shadcn where you can just have your UI look good without putting too much effort. But I want to get to a point where I can also like just very easily just come up with UIs for these demos or random apps that I'm building on the side without putting too much effort, and they still look good. Have you tried? That's kind of my goal.

01:33:52 - Dev Agrawal

I have not. I've heard a decent bit about it. I'm kind of scared to try it. It probably requires like a decent bit of time investment to learn the workflows around it.

01:33:56 - Anthony Campolo

Yeah, yeah. Bolt. Interesting. I've only used it once, but I'm in the same boat where I want to try it more.

01:34:02 - Dev Agrawal

The other thing is, I have not used online IDEs a lot. Like I barely look at CodeSandbox. I've almost never used StackBlitz. I almost always prefer like cloning locally and running. So it's like there's some level of familiarity with StackBlitz and that online environment that you need before you can really get used to the workflows. I might be wrong though.

01:34:26 - Anthony Campolo

No, no, you're totally right. I got very into online IDEs in like 2021. Not as like a user necessarily, but just as like a proponent of them because I think like when I was learning to code, you know, they would have been super duper useful.

I've told this story a bunch of times, but when I first started coding, my npm was literally broken. Like you could not run npm install because I had this really super duper weird specific edge case where I had a node_modules in the root of my programming machine. And so for some reason that broke the whole thing. So no npm commands would work, or even return errors to let someone figure out what the issue was. So I went through the first like three months of my programming bootcamp without being able to run npm commands.

01:35:21 - Dev Agrawal

Damn. Yeah, I was using an online platform, so at least that. Yeah, I guess in that sense I was like at at least a learning phase. I was using Codecademy, which is kind of an online IDE.

01:35:34 - Anthony Campolo

So Codecademy comes with an IDE? I've never used Codecademy.

01:35:38 - Dev Agrawal

Yeah, Codecademy has its own like it's like you have instructions, you follow the instructions, you write the code, you see the output, and then you move on to the next thing. And I know a bunch of different learning platforms do this. This was when Codecademy was completely free. So yeah, that was an era.

01:35:56 - Anthony Campolo

Word. Okay, cool. I think we can start closing it out here. Thank you to everyone who is in the chat who's hanging out, Roselle and Chris and Nikki T and Abhimanyu. And I think that was everybody. But this is super fun. Anything you want to plug or stuff you want to promote before we close it out?

01:36:23 - Dev Agrawal

Check out SolidJS if you haven't yet, I guess.

01:36:30 - Anthony Campolo

Solid. Yep. Yeah. When I'm done processing all his videos, I need to figure out how I want to give them to him.

01:36:40 - Dev Agrawal

Actually, yeah. So there's someone in the community who like after every stream. Have you seen the chapters in streams?

01:36:50 - Anthony Campolo

Yes, yes, this is one of the things the tool could do, so I should connect with them exactly.

01:36:55 - Dev Agrawal

Okay. Yes, definitely connect with Jesse who puts way too much effort into watching the entire stream multiple times and coming up with those chapters. I cannot imagine the effort that takes.

01:37:08 - Anthony Campolo

How's the last name spelled?

01:37:11 - Dev Agrawal

I think on Twitter he might be Jazzy Pants. I'll just like send you a link or send you his profile on Twitter. Cool. Yeah, definitely talk to him. Because if you can simplify his workflow, like we all want those chapters as quickly as possible. And he, like out of everyone, he would appreciate this the most for sure.

01:37:32 - Anthony Campolo

No, yeah. Thank you for that connection. Yeah. This is why I built it. And so I want to find the people who will benefit from it for sure.

01:37:40 - Dev Agrawal

Awesome. Yeah. Very happy to see the work you're doing on Autoshow. I want to use this as well for a bunch of things. Hopefully.

01:37:49 - Anthony Campolo

Very cool. All right, thanks everyone for watching and we will catch you next time.