Welcome to Syntax. Today, we have a Syntax highlight. This is where we're looking at your projects that you've been working on either reviewing or roasting them or just checking out cool stuff that people are working on. Everybody right now has a project. Everybody's working on something cool.

And I think the most frustrating part about this stuff is getting people to simply care, get simply getting people to check stuff out. My DMs are full of stuff where people are like, can you just check this out for me, Wes? You know? So I thought, let's do a whole episode looking at what everybody's working on. And, man, there are so many cool things. I can't wait to get into it. My name is Wes, obviously. With me is is always JS Scott. How you doing, Scott?

Hey. I'm doing good.

Michigan won the national championship in, basketball last night. And Congratulations.

Oh, yes. I know. I did so much work playing basketball to win that game.

And, no. I I it's so cool to see that happen. Our kids went nuts and, go blue. Right on. Right on. Alright. So the way this is is gonna work is we're gonna go back and forth and just pick ones that we found interesting and detail them and and kinda dive into them. If you have something you'd like to share for the next syntax highlight, make sure you send it on over. You can reply to this tweet or skeet that I put out here.

Alright. I'm gonna 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 when you're in the browser. Right? I had been using one for for super long, and I realized it was, like, injecting some, like, random stuff into my DOM. And I I looked into it. Turns out the author is I don't know. He's he's going private with it, doing some tracking stuff in there. And I was like, you know what? In in this age, I don't need to use somebody else's Chrome extension who is inevitably going to, start injecting ads and and whatever into it. So I went and built my own. It's called JSON Alexander, and it has everything that I've 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? Alright. I have I have a bug here, but, what what should be happening is that the data should be available in the console so that you can sort of play with it and 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. Alright. I got something really cool for you, and it is f f f, 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 f f f, and it is very, very fast.

And their 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 pie plug in 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. F f f. Yes. Very cool project. That's really cool because, honestly, my one of the biggest problems I have with all of these projects that I'm working on is I simply forget what I called it, and I can't find it on my machine and or I can't find the Git repo, on on my own personal GitHub, simply just finding. The amount of times I've opened up, like, a parent folder in Versus Node to simply use that search because the, like, OSX search sucks is, like,

way too often. Yeah. Well, you know what? It it's, interesting about this, Wes, is really that it is largely discussed as being, like, something to make your agent tools work faster. Right? Yeah. Because your a AI agent tools are are kind of constantly searching through your code. So this would be a faster process that would, in turn, pay dividends in your entire process.

Another one from Baranis. He 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 Scott of the stuff around learning how this type of stuff works. And they are working on this view transitions toolkit, 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, all the 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 and Scott of diving into it. So this seems like a pretty nifty toolkit. I do have to say, like, Bram, you gotta take this this, like, gradient text off of Yeah. Because This site does read.

As soon as I see that. Like, a lot of stuff we're looking at today is, like, vibe Node, and 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, from, like, six months ago. You know? Because we don't get fortunately, we don't get that gradient anymore.

Yeah. Totally. And one of the coolest things in this package, Wes, is the Yeah. 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 to worry about that. There's measuring tools and stuff. So Yeah. More yeah. It it's not just all compatibility and whatever stuff. There's some really, really interesting things coming in here.

Also, the the automatically inject from name and to name view transition, so that way you can can maybe control direction and things like that.

Pretty neat. You know what I was thinking the other day? You know, Remotion does, like, video from, like, React components.

And, the one thing about Remotion, I I think this is still the case, is that if you want, like, animations or whatever in your video file, you have to do your animations the Remotion way. And I I Wes thinking that because it's it's kind of hard to, like, scrub animations. And I Wes, like, wondering. I was, like, maybe now that we have all of this tooling around being able to control animations, you know, like, you can obviously scrub your animation with your scroll, but it looks like you can just scrub the animation here with, like, an input box.

And the reason they needed that is because the way that Remotion works is that it just takes screenshots of every single, like, millisecond of your video. So it needs to be able to scrub your, explicitly scrub those animations to each thing. It's not simply just recording the screen and letting the animation play out. It might, like, might spin up, like, a 100 workers that will take a 100 screenshots and then stitch those together, and then that gives you a 100 frames, which will be, I don't know, maybe two or three seconds worth of of code. So this seems kinda neat that may have an interesting use case of, like, generated video from browsers.

Yeah. Yeah. And then all all browser based instead of faking stuff, you know, with React or whatever.

Node stuff.

Next one I have here is a couple of plug ins, which is Agentation, 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.

There's a that will connect directly to your AI agent.

But the coolest thing about this is so you you basically you mark up aspects of your site. So you could say, I'm gonna 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? And then from there It's like a feedback stickers or, you know, you you put you overlay these things on top of a a design and say, yeah. This is not working. 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, alright. Here's the hero demo. Here's the location of the classes, and the feedback is make this red. So instead of having to go into your agent and say, hey. In this file and this component in this class, make it red.

Agentation just kind of, like, makes that whole process a little bit more streamlined. And then if you use their ex 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 us to be React? This seems like it's, like, prime candidate for a web component that you could just drop ESLint to anything. Right? So I I was annoyed that I couldn't use it first and foremost because it looked dope. But then along came the Svelte agentation.

What act so 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 I just wish, you know, it could have been web components. But there's 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.

You know, whenever I leave feedback for these types of things and I'm trying to, like, come up with, examples, Wes. My example is always make it red. I I can't couldn't possibly tell you why.

Make it bigger. Make it make it pop.

Yeah. Make it pop. Make it red. It's a neat little project, and, again, something I wanted in, my code.

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 your agent. So, basically, it's kind of a similar thing where you can just, like, click around your website, and then in this case, you could just change the properties.

I don't 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 wanna, like, click the thing.

I'm, like, maybe maybe, like, you you give feedback, say make this a bit wider or whatever, but, like, very rarely do I wanna, like like, click on, like, oh, this thing and then just, like, explicitly change the height or or explicitly change the border. Like, I'm trying to make reusable things. And and maybe 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 let me make this into, like, a reusable component.

But it also has support for motion itself where you can add, like, key frames 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.

I'm curious to see how this sort of pans out for them. So props to the motion folks. It's an interesting thing, and I think we're gonna see more visual tools like this pop up. I I do think that is that you you've speculated a little bit on that in recent episodes about what the future of IDEs look like and things like that. So Some there's some someone's gotta figure out this whole

design with AI type of thing, you know, where somebody still with good taste is able to, like, control this thing and give a good feedback. And I know there's lots of people working on stuff like that right now.

Yeah. Word.

I have a fun one for you, Wes. Have you ever played Warp? WarCraft?

What like World of Warcraft?

No. Warcraft.

No. I've I don't I've never played a video game before. No. Okay. Well, this might not tickle your fancy as much as it does mine.

But Peon Ping is basically giving your AI agent a character voice. It's very funny. If you've ever played Warcraft three 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're they have these, like, little sayings that they do. And, this is so funny. The 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 from Warcraft three, it's super funny. They also actually, have the human peasant. They have the Soviet engineer from Red Alert two, a battle cruiser from StarCraft.

So if you're if you're a a a fan of RTS games and you want some fun audio when you're you when you're using any of your AI agents, peonping.com is very funny.

I've got one called peakdown. App, and this is simply just a quick view plug in for, like, you know, when you have a file on your Mac, you push space Bos and you wanna do a quick view.

For markdown files, you can just simply view them as a rendered. I have one that will highlight them and and show them to me as code, but I've I've this is kinda cool where it will actually render them out. I don't know. Markdown, what what do you think? When you push space on a Markdown file, do you wanna see the actual Markdown itself, or do you wanna see the rendered version of it?

I wanna see the Markdown itself. I think I wanna see the Markdown itself. Yeah. Or I wanna see rendered version that I can edit as markdown,

like Notion. Yeah. Like, yeah, like a like a or like like Obsidian. Right? Or like because Obsidian kinda does both of those. Right? I wanna see the images, but I kinda also wanna see, like, the markdown as well. So, kind of an a neat project. Peekdown.app.

Check it out. Yeah. Very neat. I like quick look plug ins, man. I feel like that's something that is underutilized. I went a little overboard on the quick look plug ins a while ago, and Yeah. I kinda regret it. You know, I have all I I'm looking forward to getting a new computer.

So Yeah. Scott start fresh again. You know? And, like, I know I can, like, wipe my computer and start again. But now I I have these quick look plug ins that don't work great all the time, and I don't know where they are. And I I brewed installed them at one point.

So Yeah. I I installed a bunch of stuff on my computer. The hard drive filled up, so I have to get a new one now. It's That's what happens.

Just so that's it's the name of the game, disposable computer.

I have one that is from David Kramer at Century, which is [email protected].

Many people have heard of the tool, beads, for working with AI and giving them tasks and to do list 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, like, you can have tasks blocked by other tasks and things like that in your code Bos, 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, DEX tasks. And then, of course, there are DEX 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 dos 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 decks 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. Now I understand that, like, you know, all of the tools have their own built in to do lists and stuff, but I find they largely suck. They are, like, at the whim of whether the agent actually wants to use it at that time. They're sometimes the agent does the work and then doesn't actually check off the things and the actual thing. And, again, you can't commit it. It's it's not like it's not a a thing you take with you.

Yeah. I I find that with the the cursor plan Node. When I wanna do something that is larger than simply implementing two or three features, like, I find it, like, it wants to get going. And then Yeah. I find it hard to create a plan that is like, I I sometimes wanna spend, like, three hours working on on a plan for specific features because I wanna really get into it because the otherwise, you you let the thing rip, and then it doesn't implement all how how you really wanted it to do. And and and that at that point, it's easier just to kinda sit there and just do it feature by feature. So I much prefer something that I can just make a very, very long plan and then just let it rip for hours on end.

Mhmm. See, what I've been doing, Wes, is not necessarily even that. What I've been doing is I I 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, decks epic with with individual tasks. Those task descriptions might even, reference what files need to be worked on or what the scope JS. And, like, you really need to be 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 it it I'd still move fast, but I it just, like, gives me that ability to say, did you really need this third effect in this code? Like, this shouldn't even be a side effect in the first place, and now you've added three of them to one component. Like, what's your deal? Scott in the loop. That's what everybody needs.

That's that's your new project. Scott in the loop.

Sloop.

Alright. So we asked on Twitter for people to submit theirs. Florin Pnpm, who I know he listens to the show, he submitted his contentcopilot.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 this JS, like, a huge promise for people that are, like, in social media, just trying to figure out what content should I create and what are other people doing right Node. And seems interesting, but then I'm I'm gonna I'm gonna roast you, Florin. I went to his own, Instagram, Node, doesn't seem like it's working.

It's got five five hundred views on on most of his stuff. So this is something that you see a lot people think AI is going to solve Wes you if you can just cheat the system and use AI to figure things out for you, of course, it's it's good for research, then then you you're gonna you're gonna absolutely blow up. And I have yet to see a case where where that is that is it. Right? Like, we saw it with SEO people. They're like, oh, if I can just get AI to write 20,000 articles, my website's gonna blow up. Or if I can create this, like like, a 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 to work.

Especially now, the people who watch social media Yarn, like, their bullshit detector is starting to go off Wes it's just like, oh, you're just recording this because you think it's going to do well, not because you wanna share something interesting with me.

So no no shade to, like, Florin. This seems like a cool No. Yeah. Yeah. Yeah. Tool as well, but, obviously, it doesn't work.

Yeah.

I got one here from me. You did one from you, so I'm gonna do one for me, which is my open code Sanity monitor. So, Sentry has and 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 Wes 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 a whole user is.

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 OpenCode Century monitor plug in, which uses this tool so you can connect your Century agent monitoring to Node. And you just install it as a plug in. You pass in your DSN as a config file, and then you have a full on logs and traces for your AI agents. One thing that I think is really cool about this Wes beyond seeing, like, alright, models and whatever usage.

Node actually the the given project you're on, it has that as an agent. So it'll tell you which project you're on and everything. Wes you could run it all all of your projects in one monitoring. And I even have a Py 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. So I I wanted to say shout out to the Century Agent Monitoring in general because I think this is a really neat stuff.

Something I've been using a lot of. I man, I I need this on on there as well because, like, you often, like, build something. You think, how much how much did that cost? Or, like, if you're on a if you're on, like, an unlimited plan or whatever, how much would that have Scott? Or how many tokens did that use? That's

really interesting stats to get get your hands on. Yeah. And even just getting to dive into, like, the tool calls and stuff like that, I find to be really interesting. Like, why is this, you know, doing these tool calls when it shouldn't have to? And and maybe you could get into, like, hyper optimizing things. So yeah. Next one is Aero JS, and I stumbled upon this when I was looking into the CloudFlare

dynamic what are they? 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 for to generate some some code that would then output HTML, and then I needed to render that HTML, like, in, like, a chat box.

But the the sort of the problem with rendering unknown HTML, right now JS that, like, you probably shouldn't just be injecting, random HTML, CSS, and JavaScript into your user's page. That that's sort of the problem that OpenAI and all these, like, chatbots have right now Wes they're trying to solve that with MCP and MCP UI.

And I don't know where MCP UI is with this right now, but, like, one of the downsides to it when I was, like, looking into it was that you would have to, like, make all the interfaces upfront.

And 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, give me, the ability to, I don't know, order a pizza JS a stupid example. That's all we we always say, or or show me these things on a map or 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 Aero JS, which does its rendering not in, like, a like an iframe, and it injects it straight into the DOM, but it then it 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 it is on top of that is a full, like, UI framework Wes you can give an agent the docs in the framework and say, like, here are the pieces. You know? Like, I built all of these pieces. Here's a button. Here's a card. Here's here's everything that you're used to.

Use these pieces to make me a a new UI. So I thought this was pretty cool.

Arrowjs.com.

Yeah. That's very interesting. The sandbox stuff is getting a lot of conversation right now in various ways that I haven't quite figured out personally, like, what it all means for me. Like, what yeah.

Man, the whole sandbox thing is is so tricky because you want everything to be safe, but you also want everything to have access to everything you want. And and we saw this before agents as well with, Deno.

So Deno, by default, you have to opt in to the potentially sensitive APIs that you want. Right? If you want your script to be able to access the network or if you want your script to be able to access your file system or if you want your script to be able to, send data to certain URLs, you have to sort of approve them one by one. And now we see it with with cloud code.

Mhmm. And in reality, people just go, I want it to have access to everything. This is too hard. I don't wanna sit here and approve every single JS that you have, so I'm just gonna Right. Dangerously run permissions. And that's why OpenCloud blew up as well is because there there was no security on it. So I don't know. That it's gonna be a hard thing for people to figure out of the balance of security and ease of use.

Yeah. It is. It's a it's all I feel like things are gonna be changing in that rate. There's gonna be some something that becomes a new de facto something at at some point here. Braden, I feel like there's a lot of new tools coming out.

I I think the models will eventually get smarter at, like, is this actually a sensitive thing? You know? Like, oh, you're reading a file from my file system? I'm I I think that's okay. You know? I think the models will eventually get to a spot where you'll be able to mostly trust them, to to run tool calls, but, again, not always.

We're still going to need things like like running a sandbox in Wasm. Hey, Wes. I got something, real cool for you here, which is called Comarch. Comarch 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 rendering. 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 Comarch.

And then when you render it, like so the the mark it's always markdown that you're writing, but you're rendering Vue, React, or Svelte all from the exact same markdown syntax.

So pretty stinking neat, especially since markdown has 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 it's likely that your agent would be returning markdown, but also you want to return, like, rich components inside of that.

So this is a thing that will allow you to stream back and then render out components from app. Like, what do you React Think about MDX.

Right? MDX, you you can just drop in a React component directly. Yeah. Or a JSX component. It's not just it MDX has nothing to do with React. It's JSX. I'm only using the React context.

JSX is React to me, folks. I'm sorry.

And, 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 or Svelte components directly inside of markdown.

And you're all using the same syntax, and there's streaming support. So really super neat.

Why wouldn't they just return the component itself instead of this weird syntax?

Why wouldn't they use the comp like, why wouldn't you import the component itself JS what you're saying? Well, I'm I'm thinking, like,

they're now you're coming up with this new syntax, which is this colon colon alert, and then you're passing in props type of info.

And and I'm wondering why you wouldn't just ask the agent to return the alert component itself. And is the answer to that because it's an agnostic way to return components, and it could be rendered in any framework?

Yeah. That's that's kinda what I'm thinking.

Okay.

Yeah. To me, it's like you have one syntax now that is used for all of the frameworks, and the only thing that's different about them is the, plug in that you're using to, you know, process the markdown.

Oh, to rent your your oh, I see. I see. So your render layer is up to you. This and this this isn't just like, this could be in terminals. Right? Or this could be like a, like a native implementation of it.

I see. I see. That makes sense. Because, like, I mean, as much as I hate when we have another markdown standard, it it does make a lot of sense where you you will need some sort of more rich way to return it. But then why don't we just use HTML? Because markdown is Yeah.

Markdown is good.

Yeah. Markdown is good. That's true. And It's only getting better too. I mean, people love, Markdown nowadays.

Everybody loves markdown. Alright. I'm in. I'm in. Cool, Mark.

Skeptically in.

Another Node, silly goose software club. This is just a listing of projects that are silly. And if you're feeling I've I've said this many times on this podcast. If you're feeling burned out at all, especially all this stupid AI stuff that we won't stop talking about, there's a whole other side to it of people building really cool fun stuff. And if you're feeling burned out, I highly suggest you check out a, build something. Build something fun. Build something silly that is simply just there to make you laugh, and then, oops, you accidentally learned something along the way.

So sillysoftware.club has a listing of everybody's silly projects, and you'll have a good laugh. So need more of this on the Internet.

Yes.

I'm going to go with another one here called Sugar High, which is, my last one was markdown, something that I hate working with in, you know, in my projects. But the other one would be, syntax highlighting. I hate syntax highlighting plugins. They're all such a PIA. So, Sugar High is a super lightweight syntax highlighter, a tiny so super tiny, super lightweight, super tiny, super lightweight, about one kb.

Works with any JavaScript, JSX, even React flavor JSX Wes, and, basically, allows you a couple of CSS properties to configure this thing, and it is just nice. It's just nice. So, again, I I really just I I hate working with with, syntax highlighting Vercel, so I think this is a nice little option for you. There's even a Remark plug in if you're already using Remark. So Remark.

Re man, my own Yeah. My own personal website. I had to, like, go down the whole Remark re whatever. Oh my god.

I have such a crazy setup.

And, yeah, that's that's a hard thing to do. I had to get the syntax highlighting going as well. What's the one for Sanity Foo that everyone uses? That's what I'm using.

Ant Foo

syntax Cheeky. Highlight.

Cheeky. I'm using Cheeky myself, but JS as with everything, I wanted, like, the WASM version so I could server render it and then pain. Pain all the way down. I couldn't get it to work, and then I, like, wanted it to work on Cloudflare, which is, like, another hard on hard mode.

I it So Yeah. I'm getting it going. Installing

Remark plugins. I I'm just gonna I'm gonna stop. I'm just gonna say I wrote my own. I wrote a walker for some of the stuff on my website. I did too, Wes.

For demos. I did it for demos.

Now I can just use, Comarch.

So shout out Comarch. There you go.

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, like, your skills or whatever, like, you have to to document your actual code and the code itself drift. Right? And this that's this is a big problem because the agent will go in and read the documentation and just say, ah, that's that's not good. So I I've opted to doing a lot more of my coding in, like, my documentation directly inside of the code, because, like Yes. 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.

But in many cases, you do you do need docs. Right? You do need specs and and for how these things work, and you would 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 the does not drift apart.

People have been hyping up Zig.

Zig Zig. I don't yeah. I don't I don't know if Zig 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, Wes, I I want you to keep that drift in mind. We're gonna do an episode on deterministic tools for AI. So I want if you if you can dive into that a little bit or I will because I wanna see a little bit more of that. Maybe I'll I'll I'll do some deep dives there because, one of the things I've been really getting into is, like you mentioned, like, these 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 weeks ago about AI Scott, and one of the tools I mentioned in that video was Fallow.

Docs.fallow.tools 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 plug ins. So it works with Svelte React. Pnpm 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, alright. 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, 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 of 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, and the best part is it is, like, so fast.

I I needed this the other day. I know I Node you're showing me this the other day, and I was like, Wes don't need all these tools.

But then, like like, a couple hours later, what had happened is I had that Chrome extension, and somebody sent in a PR for Firefox.

And they said, here is Firefox support for it. And I go, oh, that's weird. Like, I I thought Firefox just supported Chrome extensions now. Like, why do why do I need to do this? But what the the PR was basically just, like, duplicating it, creating output files for the Chrome version and for the Firefox version. It had TS config inputs for the Chrome version and the like, basically, duplicate for every single thing because now there is two versions. There's a Firefox version, and there is a Chrome version. And I was like, alright. It looks good. You Node? Merged it and and whatever. And then I was just like like, why do why do we need this? There's so much extra garbage in here. And I, like like, went through it, and there was one line of code on Firefox's manifest dot JSON that was required, and Chrome simply just ignored that. So I just nuked the whole thing, added that one line in there, and, like, that's the perfect example of an an agent being like, oh, I'm going to now do the same thing for Firefox.

Let me allow reimplement Mhmm. The entire tool chain, for Firefox Wes it's just like, come on. Like Yeah. Think you think for two seconds. And or or or even, like, the person that pull requested it as well. Like, think for two seconds.

I know. It's so funny how, like, inefficient these tools can be. So I I'm yeah. I for me, it's like the tools that I'm wanting to add are the more deterministic tools, not the less deterministic ones. Right? The ones that are actually analyzing things. So

That's great.

This one's from Ilya Hadid, and he sent me a Instagram DM the other day about this thing that he's working on, and it's called edit mine local video knowledge base. Mhmm. It's essentially you can give it some video, and you get from that, you can get, like, 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 Wes, where, like, I wanna be able to, like, search the the syntax transcripts for x, y, and z.

And and the way that we we do that right now is, like, we can vectorize each of the utterances, which is, I don't know, two or three sentences that were said, and then maybe we grab a sentence before and 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 or maybe I wanna search my video for when West showed an icon of George Costanza.

You know? And there's there's a new Google, embedding model, which pnpm embedding will will take, like, something, like text or or, like, a screenshot or a photo or whatever, and then it will it will turn it into a bunch of numbers that somehow describe the things that are in that text or video or or image. And then you can run vector querying on it. You can do a whole bunch of kinda neat stuff once it's been turned into numbers.

I was 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 and he's working on one where he's doing, like, video analysis as Wes. 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 EditMind.

Yeah. I want this for just straight up even, like, organizing my video files because I have Yeah.

Like, what now? Like, fifteen years of tutorial videos that sometimes, I gotta say, my organization just kinda went like I had some months where I was just, like, tossing my video files into a folder and, you know, now it's like, what do I gotta do? I gotta watch those videos again to see also, do I actually even need them? That's a whole another conversation, you know, at this point. But yeah. It's kinda neat. Or even, like,

like, video camera.

Like, I would love to have all of my security cameras, and I would love to be able to search the security cameras. And I know that there are things like that or, like, video editors. Like, I would love to go back in the, like, 1,000 episodes of Syntax and be like, where did Scott wear a funny hat? You know? Be able to search the video itself.

And Well, the episodes, there'd be too many of them where Scott wore a funny hat. A funny

you know what I mean, though? Like, it's that's so cool that we can start to build these things, and they're very expensive.

I think the Google one was, like like, 2¢ if you're running, like, 24 frames a second. So 2¢ per minute, But you probably could drop the frames way down. It's probably still expensive. So local models were things that just simply run slowly on your machine warp probably a good use case for this.

Yeah. Okay. I got one from me to wrap this up, Wes, and you might not even know I've been working on this. I've been working on a, Lightning based CSS linter. So Lightning is the CSS parser project from,

Devon? Yeah. Devon Gova. He's the guy behind, Vercel, yeah, Parcel and, 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, a built in Rust.

And, man, ESLint is one of those tools that I really rely on, but I've just been finding it, like, to just be kind of, 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 and this is I just wanna say first and foremost, the idea here was for just an experiment here. But, I made a a CSS linter, which the idea is really void zero for their work on Vite plus and ESLint 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 wanna 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.

There's Node global leaks, no deprecated features, and and you can configure all of these things. It JS, 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, the tests from StyleLent into this project. Now not all of them, but I brought over some of the StyleLent tests and have adapted them to this. So that way, using their 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 I've just been working on a little bit here. And if that's something that's interesting to you,

come help out. That'd be fun. I know you said that, but I gotta I'm gonna speed run my last couple.

Daniel says he's working on a Reddit client in React Native.

I thought Reddit clients were done. You know? I thought there was there's no API. So I was like, how how are you doing this? Yeah. Are you what what are you using? I'm using the stupid native one, and I hate it. The native one sucks. I'm using

Narwhal.

And the problem with Narwhal is that it is paid. It's like I it's not expensive, but it's significantly better. And I use Reddit enough that I'm like, you know what? This native app absolutely sucks. I I cannot I cannot use this. So I am paying for Narwhal, and it's good. Man, so

he sent me a DM on how he's doing this. And I don't know if I'm supposed to say this, but I think it's really interesting. He says, it's sort of an open secret in the React Native community where you're able to do things that are not possible in a typical web app. For example, if a user logs ESLint a site using a React Native Wes view, technically, you have access to their cookies and can make requests on their behalf.

I didn't know you could do that.

And that that's essentially just like running a headless agent browser on on behalf. So he's probably reverse engineered a lot of the Reddit APIs, or he's probably running the, like, Wes as simple just, like, clicks or visits to simple URLs and then parsing out

either the data payload or the HTML, something like that. I should do this for my tonal my tonal app.

Tonal CSS because that that would be the same thing. You just get yeah.

Man, he says, once you learn this JS possible, it really makes you question if any apps are using this in bad faith.

Probably.

Oh, yeah. Yeah.

Yeah. So, like, any basically, you can make a React Native site that has a web view that opens up a web view, and then that your React Native app can then talk back and forth to that web view and, like, program I get you could, like, bought it. Right? You can pro programmatically do things.

Yeah. I'm I'm installing this right now. Easy. You could do that because as long as Tonal has, like, a, like, a website. Right? Is there a They do. Yeah. Yeah. Yeah. There's a mobile thing? Node, that you know, Apple's for sure

gonna shut that down. No. Don't don't Wes, Wes. Let's not speak that into existence. I just installed Artemis.

Yes. Okay. Well, that's really cool. I'm glad it is. A couple of people said they're working on, like, screen studio alternative competitors. This is one called Open Screen has been popping up.

Everyone's like, you don't need to buy Open Screen. And then, like, you read the comments and people like, I I use Open Screen or I use Screen Studio, and this is not nearly as good. But there's lots of people working on, like, little cool video editing tools. Canvid HQ seems to be another one blowing my mind that everyone's building video editors JavaScript

these days. Video editors in JavaScript. Hey. You know what? I think the video editor JS ripe for change.

You know, I I saw a post that Wes, like, you know, the AI first video editor tool, and I was like, oh, sick. I'm I'm so stoked to see what this looks like. And then it was just like an AI editor that you could generate video inside of. Like, all you could let's generate some AI video slop inside of a shittier editor. I'm like, okay. But the amount of comments that said the same thing led me to believe, like, people are there's there's gonna be a shakeup here in in terms of because everyone was, like, saying the same thing. Like, you can't just say it's an AI video editor. Like, people are, like, reach like, wanting something new there.

Yeah. I want some sort of tool that will, like, actually be good at editing my videos and not just take these same like, the the Remotion, like, skill has probably the closest I've seen to that type of thing. But even after, like, a couple weeks, you start seeing the same videos over and over again. It's like, oh, you just had examples of things that were done before, and you're just kinda copying those over and over again. You know? And I tried to get them I tried to make something that would, like, edit my, like, talking head videos, and, like, it gets it, like, 63% of the way there. But I think these the tools are just going to be tools that are baked into like like, the Photoshop AI tools are a really good example of it, and I'm sure we'll start seeing a lot of that stuff hit our, like, DaVinci and whatnot eventually.

Node the there already is some. Right?

Yeah. DaVinci's got some interesting stuff going on. But yeah.

Proxy Bos, this is cool. Just it basically it's it's the only hardware one that that someone replied to, and I think that this is really cool. Being able to make your own PCBs and, like, model out your own hardware has never been more accessible to anybody.

There's lots of companies out there where you can get PCBs Node, but the PCBWay is one that sponsors every single YouTube channel out there. And I've looked into it, and it's, like, several dollars to get your own custom PCB made, which is mind blowing that that you can do that. So this guy has something where you can just plug in, like, a like, a printer or something that that doesn't have access to the Internet, and you can just make it have access to the Internet. And it it does, like, proxying similar to, like, CloudFlare tunnels or what's the one that you're everyone else is using that you're using? Tailscale.

Tailscale. You Node? Something like that where you can, like, simply just now connect to these devices, in a neat way.

That's all we have here. Man, there's probably 300 more, replies that we got there. Send us what you're working on. It's really exciting, energizing to see what people are working on, and, I'm pretty excited.

Yeah. Me too. I they're endless amount of stuff. And if you have projects, feel free to share those with us because, man, it would be nice to do one of these once a month or something. There's just so much going on all the time, and I love finding out about new stuff. And in this episode already, I feel like I've gotten a bunch of stuff to go research more on. So, thanks, Wes, for bringing what you brought.

Alright. Peace.

Peace.