Rating and Roasting Your Projects
Chapters24
Wes and Scott kick off a Syntax Highlight episode by exploring a variety of creative projects people are building, and discuss the challenge of getting others to check out new work.
Syntax’s Wes and Scott roasts, showcases, and riff-tracks a slew of dev tools—from JSON viewers to AI agent dashboards—plus quirky projects that push the boundaries of designer-developer workflows.
Summary
Wes kicks off a lively Syntax highlight by inviting Scott to weigh in on the coolest projects people are shipping. They start with JSON Alexander, a self-made JSON viewer Chrome extension Wes built to avoid ad-injecting incumbents, then pivot to FFF, a blazing-fast file search toolkit for AI agents. Bramis’ view-transitions toolkit and related playback controls spark discussion about debugging and animation in modern web apps, while agentation and Spelt agentation bring in-browser feedback loops for AI agents. The conversation veers into Remotion, UI generation for AI-produced videos, and a design-tool from Motion that lets you tweak props and keyframes visually. The duo also explores practical utilities like Peakdown.app for Markdown previews, Dex for AI-driven to-dos, and Sentry’s agent-monitoring for real-time cost and tool-call visibility. They pepper in fun picks (Pon Ping’s Warcraft-style agent voices, Peakdown’s Markdown preview, Comark’s streaming Markdown-to-component rendering) and contrast serious tooling with silly projects from the Silly Goose Software Club. As the episode closes, they tease downstream topics like drift-detection for code and the promise (and peril) of sandboxed AI in the browser. Overall, syntax-rich recommendations and candid critiques blend practical utility with playful experimentation, giving developers a broad map of what’s worth digging into next. — Wes and Scott.
Key Takeaways
- JSON Alexander delivers a customizable JSON viewer with collapse, multi-level expansion, and console data access, addressing a gap left by more invasive browser extensions.
- FFF (fast-file-search) accelerates code search for AI agents, with multiple versions (PI plugin, Node) and live GP search modes—ideal for quick repo discovery.
- Chrome view-transitions tooling offers playback controls (pause/resume) and automatic name mapping for transitions, aiding debugging of scroll-driven animations.
- Agentation (and Spelt variant) enables in-browser feedback to AI agents, including contextual markup, components, and an MCP/interactive workflow to streamline change requests.
- Dex stores to-dos and epics in a JSON file inside the repo, enabling deterministic, commitable task tracking for AI-generated work; it supersedes noisy in-repo task lists for many workflows.
- Comark enables streaming markdown rendering into multi-framework outputs (Vue/React/Spelt/HTML/ANC), blending MDX-like flexibility with framework-agnostic rendering.
- Silly Goose Software Club showcases playful, low-stakes projects that spark creativity and reduce burnout by focusing on fun experiments rather than heavy production tooling.
Who Is This For?
Frontend and backend developers, AI practitioners, and product teams who want a practical, opinionated tour of current tools for code search, AI agent orchestration, UI/UX design with AI, and project organization. Great for those exploring new workflows that combine AI, web tooling, and design notes.
Notable Quotes
""JSON 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 ... make the data available in the console so that you can sort of play with it.""
—Wes introduces his self-made JSON viewer and explains its key features and motivation.
""The future of code search is not rex... you can see just how fast it is directly in here.""
—Discussion of FFF’s speed and its positioning as a faster alternative to traditional code search tools.
""Agentation basically creates all this little notes throughout like revision changes... so you can paste in a big block of feedback in one go.""
—Explanation of how in-browser feedback for AI agents works and why it’s powerful.
""Comark is streaming ready markdown parser with component support for Vue, React, Spelt, HTML, and ANC terminals.""
—Introduction to Comark’s cross-framework streaming markdown rendering.
""This is a design tool that works with your agent... it’s a very good stab at what a next-generation dev tools might look like.""
—Review of Motion’s design-tool approach and its potential impact on developer tools.
Questions This Video Answers
- What is JSON Alexander and why would you build a custom JSON viewer instead of using a Chrome extension?
- How does FFF improve AI-driven code search and why is speed important for developers?
- What are agentation and Spelt agentation, and how do they streamline feedback to AI agents in the browser?
- What makes Comark's MDX-like approach cross-framework, and when should you consider it over MDX?
- How can Dex help structure AI-generated tasks in a repo for deterministic work?
JSON AlexanderFFFview transitionsagentationDexSentry monitoringComarkWarcraft Pon PingPeakdownRemotion
Full Transcript
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's so many cool things. I can't wait to get into it. My name is Wes. Obviously with me is is always is Scott. How you doing, Scott? Hey, I'm doing good. Uh Michigan won the national championship in uh basketball last night. And congratulations. Oh yes, I know. I did so much work playing basketball to win that game and uh no I it was so cool to see that happen. Our kids went nuts and uh go blue. Right on. Right on. All right. So, the way this is going to work is we're going to go back and forth and just pick ones that we found interesting and detail them and and kind of 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 SK that I put out here. All right. 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 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 um 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, um 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 I have a bug here, but uh 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. All right, I got something really cool for you and it is FFF, which is the fastest, most accurate file search toolkit for AI agents.
Basically, uh 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 reax so you can see just how fast it is directly in here uh they even give you a nice little okay so I just typed in uh static in here I'm typing into a textbox audio listeners and it is filtering things very quickly here so uh 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 uh 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 um uh live GP search modes multi select it's pretty pretty stinking fast so check it out fff 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 um on on my own personal GitHub.
Simply just finding things. The amount of times I've opened up like a parent folder in VS Code to simply use that search because the like OSX search sucks. It's like way too often. Yeah. Well, you know what it it's uh interesting about this Wes is really that it is largely discussed as being like something to make your agent tools work faster, right? Um 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. Uh, another one from Bramis.
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 lot 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. Um, 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 cuz 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 Bramis, you got to take this this the gradient text off of here. Um because it's like as as soon as I see that like a lot of the stuff we're looking at today is like vibe coded 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, cuz we don't get unfortunately we don't get that gradient anymore.
Yeah. Totally. And one of the coolest things in this package, Wes, is the the playback control of view transitions. So, you can pause, resume, uh, 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, um, more Yeah, it it's not just all compatibility and whatever stuff. There's some really really interesting things coming in here. Um, also like the automatically inject from name and to name view transition. So that way you 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 like 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 was thinking that because it's it's kind of hard to like scrub animations. And I was like wondering I was like maybe now that we have all of this tooling around being able to control animations. Um 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. Um, 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 um 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 3 seconds worth of of code.
So th this seems kind of 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 it neat stuff. Um next one I have here is a couple of plugins which is agentation and then there's a spelt version of this called spelt agentation. Now the thing uh agentation is really dope. So, this thing allows you to essentially do feedback into AI agents from directly in the browser. Um, 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 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 um what would you call those where they're um like a little notes throughout like when you're you know asking for revised changes, right? And then from there like a feedback stickers or you know you put you overlay these things on top of a design 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 all right 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. uh 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 uh 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 um so I I was annoyed that I couldn't use it first and foremost cuz it looked dope but then along came this felt agentation uh 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 I just wish, you know, it could have been web components, but there's a spelt version of it as well, which um 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 uh 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. Uh it's a neat little project and again something I wanted 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 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 can 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 want to like click the thing and 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 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." Um, 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 bucks. 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 going to 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 IDE look like and things like that.
So, some there's some someone's got to 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 it good feedback. And I know there's lots of people working on stuff like that right now. Yeah. Word. Um I have a fun one for you, Wes. Have you ever played Warcraft? Warcraft? Like World of Warcraft? No. Warcraft? No. I've I don't think I've ever played a video game before. No. Okay. Well, this might not tickle your fancy as much as it does mine.
Uh but Pon 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 there's they have these like little sayings that they do. And uh this is so funny. Be h it is so stupid and it's hilarious. So now when you're working with your claw code and it's like thinking it's going to like use the actual audio files from Warcraft 3, uh it's super funny. They also actually uh have the human peasant.
They have the Soviet engineer from Red Alert 2, 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, uh ponping.com is very funny. Uh I've got one called Peakdown.app. And this is simply just a quick view plugin for like, you know, when you have a file on your Mac, you push spacebar and you want to do a quick view. Um for markdown files, you can just simply view them as rendered. I have one that will highlight them and and show them to me as code, but I've I've this is kind of cool where it will actually render them out.
I don't know. Markdown. What do you think? When you push space on a markdown file, do you want to see the actual markdown itself or do you want to see the rendered version of it? I want to see the markdown itself. I think I want to see the markdown itself. Yeah. Or I want to see a rendered version that I can edit as markdown like notion. Yeah, like yeah, like like a or like like Obsidian, right? Where like cuz Obsidian kind of does both of those, right? I want to see the images, but I kind of also want to see like the markdown as well.
So, kind of a a neat project. Peakdown.app. Check it out. Yeah. Uh, very neat. I like quicklook plugins, man. I feel like that's something that is underutilized. I went a little overboard on the quicklook plugins a while ago and I kind of regret it. Um, and now I have all I'm looking forward to getting a new computer so I can start 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 plugins that don't work great all the time and I don't know where they are and I I brood installed them at one point.
So I I installed a bunch of stuff on my computer. The hard drive filled up so I have to get a new one now. Uh, it's that's what happens. Just h it's the name of the game. Disposable computer. Um, I have one that is from David Kramer at Century, which is Dex at dex.ripp. Uh, 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. Uh Kramer built Dex and I like Dex because it's less heavy, less invasive.
It's more simple in terms of like the actual uh 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 codebase 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 uh Dex tasks.
And then of course there are dex skills here so that you can tell a uh 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 in 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 um 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. there. 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 mode when I want to do something that is larger than simply implementing two or three features, like I find it like it wants to get going and then I find it hard to create a plan that is like I I sometimes want to spend like three hours working on on a plan for specific features because I want to 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 kind of 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. M 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 um and sometimes maybe I'm having it write out specs and MD files and then I have the agent convert that to uh DEX epic with with individual tasks those task descriptions might even uh reference what files need to be worked on or what the scope is and like 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 uh 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 uh dog 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 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 Scott in the loop that's what everybody needs. That's That's your new project. Scott in the loop. Sloop. All right. So, we asked on Twitter for people to submit theirs. Um, Floren 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 this is like a huge promise for people that are like try in social media just trying to figure out what content should I create and what are other people doing right now and seems interesting. Um but then I'm I'm going to I'm going to roast you Floren. I went to his own uh Instagram and um doesn't seem like it's working. Um it's got five 500 views on on most of his stuff. So this is something that you see a lot that people think AI is going to solve where 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're going to you're going to 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, um, that stuff I don't think is ever going to to work. Um especially now people who watch social media are like their 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.
So no no shade to like Floren this seems like a cool research tool as well but obviously it doesn't work. Yeah. Uh I got one here from me. You did one from you. So I'm going to do one for me. uh which is my open code sentry monitor. So uh Sentry has and and this is simultaneously both an ad read and a plug for my uh 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 uh errors LLM calls tool calls token usage.
you can dive into uh just how performant and how good all of your Yeah, sorry there's a lot of data here. My computer is running like total uh garbage right now in case people are wondering. Um 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, uh where some of your tokens are being taken up in, and like how effective things are.
And so I built an open code sentry monitor plugin which uses this tool. So you can connect your sentry agent monitoring to open code and you just install it as a plugin. You pass in your DSN as a config file and then you have fullon logs and traces for your AI agents. One thing that I think is really cool about this Wes beyond seeing like all right models and whatever usage um it 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 else.
So you can run it all all of your projects in one monitoring. And I even have a Pi version of this, but mine isn't very good. Uh, 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 want to say shout out to the Century agent monitoring in general because I think this is a really neat stuff. Um, 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 and 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 cost 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 uh 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 arrowjs 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. Um, 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. Um, but the the sort of the problem with rendering unknown HTML um, right now is that like you probably shouldn't just be injecting um, random HTML, CSS, and JavaScript into your user's page.
that that's sort of the problem that OpenAI and all these like chat bots have right now where they're trying to solve that with MCP and MCPUI. Um, and I don't know where MCPUI 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 up front 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, "Ah, give me um the ability to I don't order a pizza as 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 is pretty good at coming up with some UI for that. Um 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 arrowjs which does its rendering not in like a like an iframe. Um it injects it straight into the DOM but it then it it renders it inside of um a web assembly 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 where 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. Um, use these pieces to make me a a new UI. So, I thought this was pretty cool. Um, aerogjs.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 yeah man the whole sandbox thing is is so tricky because you want everything to be safe um but you also want everything to have access to everything you want and and we saw this before agents as well with uh Dino um so Dino 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 um send data to certain URLs, you have to sort of approve them one by one. Um and now we see it with with cloud code. Um and in reality, people just go, I want it to have access to everything. This is too hard. I don't want to sit here and approve every single ls that you have. So, I'm just going to dangerously run permissions.
And that's why OpenClaw blew up as well is because there there was no security on it. So, I don't know that it's going to 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 I feel like things are going to be changing in that rate. There's going to be some something that becomes a new deacto something at at some point here. Right now it feels like 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 uh to run tool calls, but again, not always. Um, we're still going to need things like like running a sandbox in Wom. Hey Wes, I got something uh real cool for you here, which is called Comark. Comark is a streaming ready markdown parser with component support for Vue, React, spelled, HTML, and ANC terminal. Uh 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 and you could think of something like MDX only uh 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 the mark it's always marked markdown that you're writing, but you're rendering view reactor spelt all from the exact same markdown syntax.
So, pretty stinking neat. Uh 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. Um 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 would allow you to stream back and then render out components from app like view react. Think about it. MDX, right? MDX you you can just drop in a React component directly or JSX component. It's not just MDX has nothing to do with React.
It's JSX. I've only used it 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 uh view output, React output, spelt output or or spelt 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? Um, why wouldn't they use the compon like why wouldn't you import the component itself is what you're saying?
Well, I'm I'm thinking like there 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 kind of what I'm thinking. Uh, 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 uh plugin 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 um like a native implementation of it. I see. I see. That makes sense because like man, 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. I mean, people love uh Markdown nowadays. Everybody loves Markdown. All right, I'm in. I'm in. Comark. Skeptically in another one. Silly Goose Software Club. This is just a listing of projects that are silly. And if you're feeling I' I've said this many times on this podcast, if you are 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 are feeling burned out, I highly suggest you check out a uh build something build something fun.
Build something silly that is simply just there to make you laugh and then oops, you accidentally learn something along the way. Um, so silly softsoftware. 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. Uh, I'm going to go with another one here called Sugar High, which is uh my last one was Markdown. Something that I hate working with in uh, you know, in my projects. But the other one would be uh, syntax highlighting. I hate syntax highlighting plugins. They're all such a PIA.
So, uh, Sugar High is a super lightweight syntax highlighter. A tiny, it says super tiny, super lightweight, super tiny, super lightweight. Uh, about 1KB. Uh, works with any JavaScript, JSX, uh, even React flavor JSX. And, uh, basically allows you a couple of CSS properties to configure this thing. And it is just nice. It's just nice. So, uh, again, I I really just I I hate working with with, uh, syntax highlighting overall. So, I think this is a nice little option for you. There's even a Remark plugin if you're already using Remark. So, Remark read, man, my own my own personal website.
I had to like go down the whole Remark re whatever. God, I have such a crazy setup. And uh, yeah, that's that's a hard thing to do. I had to get the syntax highlighting going as well. What's the one from AntFu that everyone uses? That's what I'm using. Antfu syntax highlight. Shaky. I'm using Shiki myself, but as as with everything, I wanted like the Wom 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 ended up getting started installing Remark plugins. I I'm just gonna I'm gonna stop. I'm just going to say I wrote my own I wrote a walker for some of the stuff on my website. I did too, Les. Uh for demos. I did it for demos. Uh now I can just use Comark. So shout out Comark. There you go. Um 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. Um, because like 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 you do need docs, right? You do need specs and 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 Zigg. You know, it's probably awesome then to make sure that the does not drift apart.
People have been hyping up Zigg Zig. Zig. Uh I Yeah, I don't I don't know if Ziggs is just one of those things I haven't had a use for, but people have been talking big talk about Zigg. I have a project in Rust here, which uh Wes, I I want you to keep that drift in mind. We're going to 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 want to see a little bit more of that. Maybe I'll I'll I'll do some deep dives there because uh 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 cruff 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 uh come out a couple weeks ago about AI slop and one of the tools I mentioned in that video was uh docs.fallow.tools is a codebase 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 spelt react and any of the stuff you use. It works with this thing rips and you can run 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 uh you know this many uh lines of the code are duplicated before it gets triggered as like okay so minimum tokens per clone if 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 uh registered as like a duplicate line of code. So you can set minimum lines threshold or tokens uh for you to be able to say like what is actually in my mind duplicate code and what is not.
And the coolest there's autofix mode and stuff. There's a nice report. You can have your AI agents just like scoop this up and then uh 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 know you were showing me this the other day and I was like we don't need all these tools. Um 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, all right, looks good. You know, merged it 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.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." Mhm. the entire tool chain uh for Firefox when it's just like come on like Think you think for two seconds and 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. Um, this one's from Ilia Hadid and he sent me a Instagram DM the other day about this thing that he's working on and it's called edit mind local video knowledge base. So essentially you can give it some video and you get from that you can get like transcription frame analysis um 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 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 want to search my video for when Wes showed an icon of George Castanza, you know, and there's there's a new Google um uh embedding model, which an embedding will will take like something like text or or um 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 in that text or video or 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 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 could search inside of videos for um 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 it's working hard on it.
It's called Edit Mind. Yeah, I want this for just straight up even like organizing my video files cuz I have like what now like 15 years of tutorial videos that sometimes I got to say my organization just kind of 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 got to do? I got to 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 kind of neat.
Or even like um like video camera. Um, 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 all the episodes there would 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. Um I think the Google one was like like 2 cents if you're running like 24 frames a second. So 2 cents per minute, but you probably could drop the frames way down um is probably still expensive. So local models were things that just simply run slowly on your machine are 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. have been working on a uh lightning based CSS llinter.
So lightning is the CSS uh parser project from um is it Devon? Yeah, Devon Gova. He's the guy behind um Parcel React uh yeah parcel and uh React Arya and like literally everything. The guy's guy's a straight up genius. Yeah. So, he made lightning CSS, which is a parser 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 um 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 want to say first and foremost the idea here was for just an experiment here but um I made a a CSS llinter which the idea is really inspired by the folks over at uh Void Zero for their work on Vit 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 llinter again with smart defaults. I just renamed it from CSS lint to Clint because uh 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. Um, and there no global leaks, no deprecated features, and and you can configure all of these things. It is again uh just a nice little CLI tool that I've been working on. It is still rough. Um, one of the things Wes I was trying to do with this was actually bring in a number of the uh the tests from Stylint into this project.
Now, not all of them, but I brought over some of the Stylant 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, uh, check it out. I I've just been working on a little bit here. And if that's something that's interesting to you, uh, come help out. That'd be fun. I know you shut down, but I got to I'm going to speedrun my last couple.
Um, 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? 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 into a site using a React Native web 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 request 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 custo because that that would be the same thing. You just get Yeah, man. He says once you learn this is 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 you can like bought it, right? You can pro programmatically do things. Yeah, I'm I'm right now. Easy. You could do that as long as Tonal has like a like a website, right? Is there a They do there's a mobile thing, man. that you know Apple's for sure gonna shut that down.
No, don't don't 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 people said they're working on like Screen Studio alternative competitors. This is one called Open Screen has been popping up. Um, 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 in JavaScript these days. Video editors in JavaScript. Hey, you know what? I think the video editor is ripe for change. Um, you know, I I saw a post that was 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, "Oh, 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 going to 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 reaching 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 reotion like skill is 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 kind of 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 are like Da Vinci and whatnot eventually. Not that there already is some, right? Yeah, Da Vinci's got some interesting stuff going on, but yeah. Um, proxy box. 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.
Uh, there's lots of companies out there where you can get PCBs made with the PCB way 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 um Cloudflare tunnels or what's what's the one that you're everyone else is using that you're using?
Tail scale. Tail scale. you know, something like that where you can like simply just now connect to these devices um in a neat way. That's all we have here, man. There's probably 300 more um 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 uh I'm pretty excited. Yeah, me too. I there 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, uh, thanks Wes for bringing what you brought. All right. Peace. Peace.
More from Syntax
Get daily recaps from
Syntax
AI-powered summaries delivered to your inbox. Save hours every week while staying fully informed.






