997: Rating and Roasting Your Projects  🔗 **Source:** [997: Rating and Roasting Your Projects](https://share.snipd.com/episode/a3930a55-1777-4aa8-8d76-26c769b984ac) ## Highlights - **Replace Untrusted Extensions With Minimal Open Source** - Do replace browser extensions you don't trust with simple open source alternatives. - Wes built JSON-Alexander after finding his JSON viewer injected tracking code and published a clean Chrome extension he controls. Transcript: Wes Bos I'm going to shamelessly show my own as the very first one. And this is a Chrome extension called JSON Alexander. And it simply is just a Chrome extension for viewing JSON when you're in the browser, right? I had been using one for super long, and I realized it was like injecting some like random stuff into my DOM. And I looked into it. Turns out the author is, I don't know, he's going private with it, doing some tracking stuff in there. And I was like, you know what? In this age, I don't need to use somebody else's Chrome extension who is inevitably going to start injecting ads and whatever into it. So I went and built my own. It's called Jason Alexander. And it has everything that I've wanted, right? Like the ability to collapse all of the children, the ability to open at different levels, the ability to... One of the things I use all the time is I just want the JSON, the data, to be in the... Uh-oh, is it not working right now? All right, I have a bug here. But what should be happening is that the data should be available in the console so that you can sort of play with it and view it. And it's just my favorite JSON extension ever. So if you are looking, you can just clone it, install it yourself. I also have submitted it to the Chrome store. So should be in the Chrome store by the time you're listening to this. ([Time 0:01:20](https://share.snipd.com/snip/086d48ee-4b73-45e8-b168-a203abbc01ac)) - **Faster File Search Improves Agent Efficiency** - Fast localized file search can dramatically speed up AI agent workflows by reducing agent search time. - Scott demoed FFF which provides live-grep like speeds and multi-select to replace slower regex-based searches. Transcript: Scott Tolinski And it is FFF, which is the fastest, most accurate file search toolkit for AI agents. Basically, this thing would replace any file search tools that your agents would be using. Instead, it would be using this tool FFF. And it is very, very fast. And they're like their whole thing, the future of code search is not regex. So you can see just how fast it is directly in here. They even give you a nice little okay. So I just typed in static in here, I'm typing into a text box audio listeners, and it is filtering things very quickly here. So I think this is a really cool project. There's a whole bunch of different versions of this, like there's a pi plugin, somebody made, there's a node version of this again, so you can just straight up use this, or you can bake It into tools that you are building, basically giving you live grep search modes, multi select, it's pretty, pretty stinking fast. So check it out. FFF. Yes. ([Time 0:02:45](https://share.snipd.com/snip/57c8f4a1-df6d-4b39-8c40-d89edc89bccb)) - **Playback Controls Make View Transitions Debuggable** - View transition tooling that exposes playback controls eases debugging and experimentation. - Wes highlighted Bramis' toolkit which adds pause/resume, measurement, and automatic from/to naming for view transitions. Transcript: Wes Bos One from Bramis. He works on the Google Chrome team and he's done a lot of the like Chrome extension work for view transitions and scroll driven animations. And he's done a lot of the stuff around learning how this type of stuff works. And they are working on this view transitions which looks like a JavaScript library you can install. And it gives you some helper methods for getting the different animations on the page, navigation, playback control, probably all of the stuff that's in that Chrome extension as well For scroll driven animations. Because quite honestly, one of the hardest parts of working with all of this like view transition stuff is simply just debugging them and sort of diving into it. So this seems like a pretty nifty toolkit. I do have to say like, Bramps, you got to take this gradient text off of it. Yeah, the site does read. As soon as I see that, like a lot of stuff we're looking at today is like vibe coded and that is fine. But as soon as I see like this gradient right here, I immediately think not I don't immediately think, oh, it's vibe coded. I think it's old vibe coded from like six months ago, you know, because we don't get unfortunately we don't get that gradient anymore. Yeah, totally. Scott Tolinski And one of the coolest things in this package, Wes, is the playback control of view transitions. So you can pause, resume view transitions, which I think is really neat, nice to have, especially when you're working with some of this stuff to not have to worry about that. There's measuring tools and stuff. ([Time 0:04:45](https://share.snipd.com/snip/67004323-4854-4ab5-ae4c-f62efaa5fc8a)) - **Use In-Browser Markups To Feed Agents Accurate Tasks** - Do allow in-browser feedback overlays to generate precise agent tasks instead of manual copy/paste. - Scott showed Agentation which marks DOM elements and copies contextual notes (file, class, component) for agent consumption. Transcript: Scott Tolinski And then there's a Svelte version of this called Svelte agentation. Now, the thing agentation is really dope. So this thing allows you to essentially do feedback into AI agents from directly in the browser. There's even an MCP that will connect directly to your AI agent. But the coolest thing about this is so you basically you mark up aspects of your site. So you could say, I'm going to click on this header and I'm going to tell it directly in the browser, like you're leaving a note or a feedback to say, make this red. And then I click add that note. And what it does is it basically creates all this little, what would you call those? Where they're like little notes throughout, like when you're, you know, asking for revised changes, right? Wes Bos And then from there, you can- Yeah, just like a feedback stickers or, you know, you overlay these things on top of a design and say, yeah, this is not working. Scott Tolinski So basically what you do is you mark up your document, you click the copy button, and then it pastes in this whole thing where it says, all right, here's the hero demo. Here's the location of the classes. And the feedback is make this read. So instead of having to go into your agent and say, hey, in this file and this component in this class, make it read. Agentation just kind of like makes that whole process a little bit more streamlined. Then if you use their if you use their tooling in here, like their MCP, it allows you to actually have this feedback conversation directly from the browser itself instead of having to Copy and paste it into an agent. So this is really dope. And the first thing I was wondering when I saw this was like, why the heck is this just react? Because this is a React tool. And that bugged me because it's like, okay, besides the, yeah, like what about it requires this to be React? This seems like it's like prime candidate for a web component that you could just drop in to anything, right? So I was annoyed that I couldn't use it first and foremost because it looked dope. But then along came Svelte agentation. What actually I will say this, one of the reasons why agentation is react specifically, is because you can get information about the actual react component. So it's not just like, here are the classes, here are the files or whatever, here's the react component that has the issue. So it's directly tied to React. I just wish, you know, it could have been web components. But there is a Svelte version of it as well, which is not done by the same folks, but copied in a lovingly way. So again, you can see you can mark stuff up. You can leave your feedback. ([Time 0:08:12](https://share.snipd.com/snip/4af3082a-116c-4ef8-9f8d-1b09cf537b9e)) - **Use Visual Tools To Give Actionable Design Feedback** - Try visual devtools that let you tweak properties and pipe edits back to agents for reusable components. - Wes discussed Motion's paid design tool that edits site properties and supports Motion keyframes to create reusable components. Transcript: Wes Bos In uh my code um on that same thing this was launched this morning from by matthew Perry, who's the guy behind Motion. We've had him on the podcast. And this is a design tool that works with your agent. So basically, it's kind of a similar thing where you can just click around your website. And then in this case, you can just change the properties. I know how i feel about this because generally when you're like you're working with like a design i don't know that you just want to like click the thing i'm like maybe maybe like you like You give it feedback say make this a bit wider or whatever but like very rarely do i want to like like click on like thing and then just explicitly change the height or explicitly change The border. I'm trying to make reusable things. And maybe this feedback then gets piped back into your agent and then the agent says, Ah, I see what you're trying to do there. Let me make this into a reusable component. But it also has support for Motion itself, where you can add like keyframes and whatnot. Quite honestly, this looks like a very good stab at like what a next generation dev tools might look like. So I'm curious to see how this, it's a paid product, 100 bucks. I'm curious to see how this sort of pans out for them. ([Time 0:11:20](https://share.snipd.com/snip/3cec3445-fcb2-4780-8cfe-c0473b9bca0c)) - **Making Agents Speak Like RTS Peons** - Scott demoed Peon Ping which gives AI agents character voices from RTS games for comedic feedback. - He noted it uses audio like Warcraft 3 peons, Soviet Red Alert engineer, and Starcraft battle cruiser clips. Transcript: Scott Tolinski Well this might not tickle your fancy as much as it does mine uh but peon ping is basically giving your ai agent a character voice it's very funny if you've ever played warcraft 3 specifically You'll know that when you're like ordering peons around they're like work work ready to work something you're doing like they have these like little sayings that they do and uh this Is so funny it is so stupid and it's hilarious so now when you're working with your cloud code and it's like thinking it's going to like use the actual audio files form warcraft 3 It's super Funny. They also actually have the human peasant. They have the Soviet engineer from Red Alert to a battle cruiser from Starcraft. ([Time 0:13:25](https://share.snipd.com/snip/77cd9d6f-a27f-40c6-8540-2f1326f97884)) - **Store Agent Tasks In Committable JSON** - Do keep agent task lists in your repo as deterministic JSON to maintain reviewability and versioning. - Scott recommended Dex which stores epics/tasks in a JSON file you can commit and use with agent skills. Transcript: Scott Tolinski Many people have heard of the tool Beads for working with AI and giving them tasks and to-do lists that persist save into your repo and stuff like that. Kramer built Dex. And I like Dex because it's less heavy, less invasive. It's more simple in terms of like the actual repo and code. It makes like, I feel way better running this instead of beads based on what I'm trying to do. That said, it largely does the same thing. What it does is it creates epics and tasks and subtasks, and you can have tasks blocked by other tasks and things like that in your code base, and it lives in just a JSON file. So there's no database or anything like that. It lives in just a JSON file, which means you can commit it directly to your repo, which means your entire org can work off of the same to do list or decks tasks. And then, of course, there are decks skills here so that you can tell a AI agent to build out an epic of detailed tasks. Now, I use this in place of having AI write, like markdown files with detailed to do's and stuff like that, because this feels way more deterministic and that like you can have them explicitly Blocked by other ones and running the DEX CLI commands. You can say like, hey, get the next ready task and things like that. So before I do any work with AI, I'm always telling it to create, you know, detailed epics and things like that. So that way it has an actual to do list to work off of. ([Time 0:16:10](https://share.snipd.com/snip/fcbae84a-b291-4960-9014-e3b5eda5eccb)) - **Pause Agents Between Tasks For Code Review** - Do insert yourself into agent workflows by pausing between tasks for human review. - Scott described running epics where the agent stops after each task until he reviews and approves commits to avoid sloppy code. Transcript: Scott Tolinski See, what I've been doing, Wes, is not necessarily even that. What I've been doing is I work really deeply in plan mode, planning. And sometimes maybe I'm having it write out specs and MD files. And then I have the agent convert that to Dex Epic with individual tasks. Those task descriptions might even reference what files need to be worked on or what the scope is. Yeah, that's exactly what I need. Yeah. But when I work in it, I say, hey, start this epic. Go through each task individually. When you complete a task, do not commit. Do not start the next task. Stop and wait for me to review the code. And then I will tell you if you can commit and continue to the next one. And I find that for me, that has been reducing the amount of dog shit code that gets added to my repos, because I'm actually, even if the task is just a few lines of code or whatever, I'm inserting Myself into that. And I move fast but it just gives me that ability to say did you really need this third effect in this code? This shouldn't even be a side effect in the first place and now you've added three of them to one component. A sloop. Wes Bos Scott in the loop. That's what everybody needs. ([Time 0:19:02](https://share.snipd.com/snip/2a45016c-66ba-4743-a4f2-5415caad1222)) - **You Can't Cheat Viral Growth With Pure Automation** - Tools that promise content growth via automation often fail because audiences detect low-effort output. - Wes critiqued Content Copilot's viral promises and found the author's own Instagram showed low engagement. Transcript: Wes Bos So we asked on Twitter for people to submit theirs. Florin Pop who I know he listens to the show, he submitted his content copilot.com, which is a find out what's going viral. Know exactly how to replicate it. We scan thousands of Instagram reels in your niche. Select the ones blowing up and show you exactly what to do. So this is a huge promise for people that are in social media, just trying to figure out what content should I create and what are other people doing right now. And it seems interesting. But then I'm going to roast your floor. And I went to his own Instagram. And it doesn't seem like it's working. It's got 500 views on most of his stuff. So this is something that you see a lot. People think AI is going to solve. If you can just cheat the system and use AI to figure things out for you, of course it's good for research. Then you're going to absolutely blow up. And I have yet to see a case where that is it, right? We saw it with SEO people. They're like, oh, if I can just get AI to write 20,000 articles, my website's going to blow up. Or if I can create this faceless YouTube channel where I just crank out 20,000 videos a day for five different accounts. That stuff I don't think is ever going to work, especially now. People who watch social media are like their bullshit detector is starting to go off when it's just like, oh, you're just recording this because you think it's going to do well, not because You want to share something interesting with me. Yes. No shade to like Florin. ([Time 0:20:23](https://share.snipd.com/snip/58d31920-3153-4ec3-b721-be16eeddc9c2)) - **Use Agent Monitoring To Find Cost And Performance Hotspots** - Monitor agent costs, durations, and tool calls to optimize performance and spend. - Scott built an OpenCode Sentry monitor plugin to surface LLM durations, token usage, tool calls, and traces per project. Transcript: Scott Tolinski So Sentry has, and this is simultaneously both an ad read and a plug for my package here. Sentry has a really cool agent monitoring feature that you might not have known about where you can monitor both like the cost usage, but the duration, errors, LLM calls, tool calls, Token usage, you can dive into just how performant and how good all of your- Zoom it up. Yeah, sorry. There's a lot of data here. My computer is running like total garbage right now in case people are wondering. So you can see a whole bunch of information. It's basically AI span. So you can see right down to every single tool call that was done. If you're looking to optimize your agents, how they're working, how much you're spending, how much time they're taking, where some of your tokens are being taken up in and like how effective Things are. And so I built an open code century monitor plugin, which uses this tool so you can connect your Sentry agent monitoring to OpenCode. And you just install it as a plugin, you pass in your DSN as a config file, and then you have full on logs and traces for your AI agents. One thing that I think is really cool about this was beyond seeing like, all right, models and whatever usage. Actually, the given project you're on, it has that as an agent. So it'll tell you which project you're on and everything else. So you could run it all of your projects in one monitoring. And I even have a Pi version of this, but mine isn't very good. So I know Serge has made a Pi one that I will link his up because I'm not confident in mine. I'll tell you that. I am using it, but I'm not confident in it. And here it is, my Pi version of this thing. ([Time 0:22:24](https://share.snipd.com/snip/da3bd2e9-a5bf-4d54-851c-bfd4f0fdaea4)) - **Wasm Rendering Lets Agents Safely Generate UIs** - Sandboxing UI generated by agents is essential to avoid injecting arbitrary HTML/JS into pages. - Wes highlighted Arrow JS which renders in a WebAssembly worker and streams interactions to sandboxed UI components. Transcript: Wes Bos Next one is Arrow JS. And I stumbled upon this when I was looking into the Cloudflare dynamic. What are the dynamic workers, which essentially is like allowing you to run untrusted code in a Cloudflare worker. And one of the demos I did with the untrusted code was I asked an agent to generate some code that would then output HTML. And then I needed to render that HTML in a chat box. But the problem with rendering unknown HTML right now is that you probably shouldn't just be injecting random HTML, CSS, and JavaScript into your user's page. That's the problem that OpenAI and all these chatbots have right now, where they're trying to solve that with MCP and MCPUI. And I don't know where MCPUI is with this right now, but one of the downsides to it when I was looking into it was that you would have to make all the interfaces up front. And quite honestly, I think the killer feature for a lot of these agents is simply let the agent generate the UI for you. You know, like if you say like, oh, give me the ability to order a pizza as a stupid example. That's all we always say. Or show me these things on a map or whatever. The agent is pretty good at coming up with some UI for that. And then the way that they often have to do it is they have to throw it in an iframe and there's a bunch of limitations to that. But I stumbled upon this Arrow.js, which does its rendering not in like an iframe, it injects it straight into the DOM, but then it renders it inside of a WebAssembly worker and simply Just streams all of your clicks and interactions back and forth to the worker. So it is sandboxed in its rendering. And then you're simply just streaming everything back and forth. And it is on top of that as a full like UI framework where you can give an agent the docs in the framework and like, here are the pieces, you know? Like, I built all of these pieces. Here's a button. Here's a card. Here's everything that you're used to. Use these pieces to make me a new UI. So I thought this was pretty cool. ([Time 0:24:56](https://share.snipd.com/snip/9d2ccb8e-4ec5-4b02-b055-30edffc963b1)) - **Component Syntax Lets Markdown Stream Across Frameworks** - A framework-agnostic component-in-markdown format reduces fragmentation for streamed content. - Scott introduced Comark which uses ::component syntax to stream markdown with Vue/React/Svelte/HTML and terminal components. Transcript: Scott Tolinski Hey, Wes, I got something real cool for you here, which is called Comark. Comark is a streaming-ready markdown parser with component support for Vue, React, Svelte, HTML, and ANSI terminal. This is basically, you have markdown here, but then there's this interesting syntax where you have the double colons, and then you can pass in essentially props and that turns it into A component renderer you can think of something like mdx only mdx is just like a react thing but here again we can use the same syntax in comark and then when you render it like so the mark It's always markdown that you're writing but you're rendering view reactor svelte all from the exact same markdown syntax so pretty stinking neat uh especially since markdown has Wes Bos Turned into such a thing here okay so you essentially like similar to how we were just talking about your your agent returning markup, but it's likely that your agent would be returning Markdown, but also you want to return rich components inside of that. So this is a thing that would allow you to stream back and then render out components from app. Yeah, yeah. Scott Tolinski Think about MDX, right mdx you can just drop in a react component directly or jsx components not just mdx has nothing to do with react it's jsx i've only used in the react context jsx is React to me folks i'm sorry uh and uh but this you can use anything you can you can have just straight up HTML, you can have view output, react output, Svelte output, or Svelte components Directly inside of Markdown. And you're all using the same syntax and their streaming support. ([Time 0:29:20](https://share.snipd.com/snip/83bd2283-00a4-4955-860c-da5c7395be1b)) - **Add Deterministic Linters To Catch AI Slop** - Run static analysis to prevent AI-generated code rot and duplication before it merges. - Scott uses Fallow to detect dead code, circular deps, and duplication and wires it into quality gates and auto-fix workflows. Transcript: Wes Bos This one's called Drift from Fiberplane. And essentially it allows you to bind specs to code and check for drift. And your Vibe code and all this slop, what tends to happen is either your documentation or your skills or whatever you have to document your actual code. And the code itself drift, right? And this is a big problem because the agent will go in and read the documentation and just say, ah, that's not good. So I've opted to doing a lot more of my coding in my documentation directly inside of the code. Because I hate that it just generates all this freaking markdown of of how it works and explains it all and i don't need that um but in many cases you do you do need docs right you do need specs And for how these things work and you need to make sure that they do not get out of sync so it seems like a cool project written in zig you know it's probably awesome then to make sure that Scott Tolinski It does not drift apart people have been hyping up zig uh zig zig uh i don't yeah i don't know if zigs is just one of those things i haven't had a use for but people have been talking big talk About zig i have a project in rust here which uh wes i want you to keep that drift in mind we're going to do an episode on deterministic tools for AI. So if you can dive into that a little bit, or I will, because I want to see a little bit more of that. Maybe I'll do some deep dives there. Because one of the things I've been really getting into is like you mentioned, there's so much drift that happens, but there's also just like cruft that builds up when working with AI. It gets out of control so quickly. Yeah, so like what tools can I add in my tool chain that help reduce this? I had a video come out a couple of weeks ago about AI slop and one of the tools I mentioned in that video was Fallo. Docs.Fallo is a code-based analyzer for TypeScript and JavaScript. Unused code, circular dependencies, code duplication, complexity hotspots, and architectural boundary violations can be found in seconds. It's Rust native. There are 84 framework plugins, so it works with any of the stuff you use, it works with. This thing rips and you can run fallow dead code and it will find dead code or circular dependencies, code duplication. And that code duplication stuff, you can like really dial in to say, all right, I only want this to return code duplication that is, you know, this many lines of the code are duplicated Before it gets triggered as like, okay, so minimum tokens per clone is the default is 50. So for something to be determined, if it's a clone or not, 50 of the tokens would have to be cloned, and then it would be registered as like a duplicate line code. So you can set minimum lines, threshold or tokens for you to be able to say like, what is actually in my mind, duplicate code and what is not. And the cool, there's auto fix mode and stuff. There's a nice report. You can have your AI agents just like scoop this up and then suggest changes. I built this directly into all of my quality gates and stuff like that. I'm using this thing like crazy. ([Time 0:36:04](https://share.snipd.com/snip/176ace61-0adf-4047-9567-18491a11866b)) - **Embeddings Make Video Searchable And Actionable** - Video indexing with transcriptions, frame analysis, and embeddings unlocks searchable video knowledge bases. - Wes described EditMind which transcribes video, extracts frames and embeddings for vector search across course and security footage. Transcript: Wes Bos This one's from Ilya Hadid. And he sent me an Instagram DM the other day about this thing that he's working on, and it's called EditMind Local Video Knowledge Base. It's essentially, you can give it some video, and from that, you can get transcription, frame analysis, embeddings. And I thought this was kind of nifty because like, I was working on something similar for the syntax transcripts as well, where like, I want to be able to like search the syntax transcripts For X, Y, and Z. And the way that we do that right now is like we can vectorize each of the utterances, which is two or three sentences that were said, and then maybe we grab a sentence before and it's a sentence After. And that's that works well for like transcripts. But there's like there's also a lot to do in in video as well. And I think about that with my courses as well, where wouldn't it be nice if you could like search your courses for some code that was on screen? Right. And there's probably you could OCR that and whatnot, but, or maybe I wanna search my video for when Wes showed an icon of George Costanza, you know? And there's a new Google embedding model, which an embedding will take like something, like text or like a screenshot or a photo or whatever. And then it will turn it into a bunch of numbers that somehow describe the things that are in that text or video or image. And then you can run vector querying on it. You can do a whole bunch of kind of neat stuff once it's been turned into numbers. I was doing that with the syntax thing. So we could like maybe group the shows together or come up with tags. And I've done a lot of stuff in that area. And he's working on one where he's doing like video analysis as well. So you can search inside of videos for specific things. I think that is really cool. So I thought I would give a shout out and and check it out. I haven't used it myself yet, but it seems like he's working hard on it's called Edit Mind. ([Time 0:41:21](https://share.snipd.com/snip/d5d32615-e42f-4017-a330-caa210088c3a)) - **Use Rust-Based Linters For Fast Deterministic CSS Checks** - Try faster native tooling by reimplementing core checks in Rust for speed and simplicity. - Scott built Clint, a Rust Lightning CSS linter that enforces defaults like no unknown properties, duplicate selectors, and global leaks. Transcript: Scott Tolinski And you might not even know that I've been working on this. I've been working on a Lightning-based CSS linter. So Lightning is the CSS parser project from Devin? Wes Bos Yeah, Devin Gova. He's the guy behind parcel react uh yeah parcel and uh react aria and like literally everything the guy's the guy's a straight up genius yeah so he made lightning css which is a parser Scott Tolinski Uh built in rust and man style lint is one of those tools that i really rely on but I've just been finding it like to just be kind of a bloated and not like there's, there's too much there. And it's also, it's not as fast as I would like it. So the idea here in this is, I just want to say first and foremost, the idea here was for just an experiment here, but I made a CSS linter, which the idea is really inspired by the folks over At Void Zero for their work on Vite Plus, and Oxlint and those types of things where it will have the smartest defaults of the things that I feel like are important in general CSS. And it outputs like that. The whole thing is built in Rust. It is a CSS linter, again, with smart defaults. I just renamed it from CSS lint to clint because there's a project named CSS lint. I just don't want to step on their toes. But by default, the default rules are no unknown properties, no invalid values, no duplicate selectors, duplicate declarations, empty rules, legacy vendor prefixes, overqualified Selectors. No global leaks, no deprecated features. And you can configure all of these things. It is, again, just a nice little CLI tool that I've been working on. It is still rough. One of the things, Wes, I was trying to do with this was actually bring in a number of the tests from StyleLint into this project. Now, not all of them, but I brought over some of the StyleLint tests and have adapted them to this. So that way, using their test suite in a slop fork type of way, I was able to at least have a basis for things to test while I was working on it. So check it out. I've just been working on a little bit here. And if that's something that's interesting to you, come help out. ([Time 0:44:49](https://share.snipd.com/snip/9846d029-c2a2-45fb-b041-b2d4d91323cf))