Transcription
What's up, y'all? Today, I'm sharing another tool I've added to my workflow. It's called Hunk, a diff viewer that prioritizes reviewing code, and it works really well with agents. Don't just take my word for it. Mitchell Hashimoto from, you know, Ghosty and Terraform, and DHH from Ruby on Rails and 37signals both praised it. And after using it for a bit, I can see why.
Now, I'll be using Hunk along with Herder, but that's not a requirement. I just wanted to give you the heads-up. If you wanted to [music] find out more about Herder, you can watch my previous video. All right, let's just dive right in.
Let's start by installing Hunk. It's very easy. You can install it using npm [music] i hunk. I'll copy this, paste it into my terminal, and now it's installed. Now, note it's a [music] diff viewer, so if I just do hunk, it will show me the options. I will build the most trivial app I could think of, just a beginner app here with a count and an API call. And I asked my coding agent to add hono js. This is just so that we can focus on the tool and not on the code.
So, I'll open it up by hunk diff. Now, on the right here, we have hunk. Let me make it a little bit uh larger. And there's two view modes. If you press one, you'll get the side-by-side view, which I prefer on large screens. And if you press two, you get the stacked view. Normally, I use zero, which will do it automatically. On a big screen, you get side-by-side. [music] On a smaller screen or a smaller viewport, you get stacked.
I can go through these chunks by [music] pressing the brackets. See how I move next chunk to next chunk to next chunk? I'm pressing [music] the left and the right bracket. You can also see the change on the sidebar by pressing S. Here are the changes. I can, of course, click on these files, or I can press slash and search for index. And then I get my worker here. Now, let's undo this, so I can toggle this with S. I can toggle line numbers by L, because [music] you don't always need the line numbers for reviewing. I can toggle line wrapping with W. As you can see here by hono, it wraps the line up. Finally, I can toggle metadata by pressing M. I usually leave metadata off. You can switch themes by pressing T and searching any of these themes. [music] I will use GitHub dark default. Those are the basics.
Let's be honest, that's not all that impressive yet. Can you make the counter persistent with Cloudflare KV? You have access to the Wrangler CLI. And I'll fast forward the video. Okay, it's done. Let's check out the change real quick. If I press the counter a few times and I refresh, that works. Now, as you'll notice, inside of our hunk diff, it didn't change. This is because I have to manually refresh by pressing R. Here we see our new changes. [music]
Alternatively, I can now quit by key pressing Q and do hunk diff {dash} {dash} watch, and this will watch changes live, but I personally actually prefer reloading whenever [music] I want to see new changes. This is still not very impressive. Now, we're going to get to the good part. If you watch this far, you're in for a treat.
Let's open the hunk git repository, and there's this step working with agents. And what's important is this generic prompt. It says, "Load the hunk skill and use it for this review. Run hunk skill path to get the skill path." If I paste this, I can ask my coding agent to review the code and then >> [music] >> write the comments inside of hunk. So, this is a generic path. You can add your own spin to it by say, "Focus on security, focus on being idiomatic." You can [music] tailor to your needs, but right now, you can just paste this to see it work. I personally created a prompt template, so I just do {slash} hunk. For the sake of this video, I'm going to use the generic prompt. Enter.
Okay, so the agent is done. Let's go back to our hunk, and I'm going to refresh by pressing R, and I should now be able to see agent notes. You can toggle agent notes by using the angle brackets. There's currently one agent note. There could be more if the agent decides to write more. Right here, you can see worker index.js 25, worker index.js 25. So, the agent added a note to our review here. You can go back. Oh, okay. The KV increments can lose concurrent updates. Interesting. Interesting. So, I can really review my code here from the agent right within my terminal. And this is very cool.
But, the part that really got me interested in using Hunk is using it the other way around. Now, if I go to Hunk here, we see we have an API and a get counter and an increment. Now, check this out. We can also write notes ourselves. I can add here, let's add another another API for resetting the counter. Say in the React app button, I can say add a button for the reset API. I'm now writing some comments inside of the diff viewer, [music] and because the Hunk skill is loaded, our coding agent can access it. And that's incredible. So, I'll just say implement the comments I left. It implemented the user comments. >> [music] >> Now, if I go back to Hunk and I refresh, we have our notes. We can just remove our notes ourselves cuz it's done here. Reset is implemented. So, now we can see we have a It added a reset button because we wrote that in Hunk. Let's see if it works. Counter is three. 1 2 refresh. Reset. Boom. It works. Freaking incredible, right? This is amazing. I love it. I'm a big Hunk fan. [music] Well, I said I'm a big Hunk, but I mean I'm a big Hunk app fan. Yeah, Hunk is a tool that greatly improved my workflow. I hope that you found this video useful and informative. And please let me know in the comments what you want to see next. See you later.