BitmapCake!

I'm writing after a long break and it feels good that I've been constantly doing this. I've tried my best to keep this alive by at least writing one post whenever I get a time but somehow I missed it and here I'm back on this after a year or so because I came across something interesting and worth sharing to help my future self and others! 

So I was experimenting with Anthropic's Claude Code CLI to automate some heavy background workflows on my headless server. Typically, if you want to run an AI agent via the terminal or inside a script, you are hit with a frustrating wall: you have to go to the developer console, add in a credit card, Add funds to your API balance, and manage limits. That's too much work!

But if you already pay for a Claude.ai Team or Max web subscription, there is a brilliant way to bypass pay-as-you-go API costs entirely. You can use your existing web subscription seat directly inside a headless terminal environment. 

The Trick to Set It Up

Although I call it a trick, please note that this is not a hack or a workaround. It is completely within Anthropic’s official usage terms. In fact, they built this native command so subscription users (Pro, Max, or Team) don't have to pay extra API consumption fees just to use Claude in their terminal. It is a great, limited way to bring Claude directly into your CLI workflows.

First, run the initialization command on your remote server: 

This will take you to an authorization URL. It might open in the browser, or if not, copy that link, paste it into a browser where you are logged into your Claude account, approve it, and it will generate a long-lived OAuth token valid for a year.

Export it to your profile so your shell always remembers it: 

Now, the real magic happens when you want to run it completely headless and non-interactive (without the terminal waiting for you to press keys). You can combine the print flag with an automated permission bypass flag like this: 

One thing to note: Because Claude Code is an active agent loop (it reads files, runs commands, and thinks sequentially), it can utilize unexpected amount of tokens. Running heavy automated scripts will tap directly into your personal subscription limit pool. But this is just for your account - you are not blocking anyone else (This was a concern I had myself, and had to check that first). Using `--max-turns 3` is a great safety guardrail to make sure that a background loop doesn't accidentally use your entire daily quota in one go! 

Hope it helps! Let me know in the comments if you know a better way. 

So one of my colleagues came to me with this requirement. He wanted to create a code embed component in the React (NextJS) app that he was working on. Initially, he had used the dangerouslySetInnerHTML  attribute to set the inner HTML to the embed code (unsanitized!!). This surely works, but due to the way NextJS navigation works, this would render an empty element if you navigate back and forth. He was actually expecting a fix for this. But as a seasoned developer, you should not be applying fixes over what’s already wrong. You got to fix it the proper way.

My first concern was that using dangerouslySetInnerHTML with arbitrary HTML could lead to vulnerabilities such as XSS. (Of course, this could have been mitigated by sanitizing the HTML). The other issue was the direct arbitrary DOM manipulation - which is a bad practice.

Above all, this approach didn’t work with NextJS navigation, so trying to make it work was the challenge. So I came up with the following. I wanted to post it on my blog hoping this would be useful to someone in the future.

import { useEffect, useRef } from "react";

const CodeEmbedExample = ({ embed_code }) => {
  const embedRef = useRef();

  useEffect(() => {
    if (!embed_code) return;

    try {
      const range = document.createRange();
      const documentFragment = range.createContextualFragment(embed_code);
      embedRef.current.append(documentFragment);
    } catch (error) {
      console.error("Error embedding code:", error);
    }

    return () => {
      if (embedRef.current) {
        embedRef.current.innerHTML = "";
      }
    };
  }, [embed_code]);

  return <div ref={embedRef}></div>;
};

export default CodeEmbedExample;

Please note the above is a cleaned-up example I created for this blog post, which is untested. This is just to communicate the idea and not intended as a copy-paste solution. I’ve intentionally omitted the HTML sanitization part here to keep it simple.

You could improve the code by adding sanitization through a package like DOMPurify, and useMemo for efficiency. Also, you can add PropTypes for type validations, etc. The key takeaway is the usage of ref and createRange functions.

Hope it helps! Feel free to leave a comment if you have any better ways to do this or share if you think it is useful.

 

I wrote a Bash script today to automate my code review process and I noticed that even when certain commands in the workflow fail, the script still executes the remaining commands.

For example, let's say I have two commands that run synchronously:

git merge origin/dev
git tag <new-tag>

In this case, if the `git merge` command fails due to some reason, it will still create a new tag, which is not my intended workflow.

To avoid this, if any of the commands returns a non-zero exit status, the script should break and exit. This can be achieved in Bash by using the `-e` option.

Add the following at the very top of your script (below the shebang line):

#!/bin/bash
set -e

This will enable the `-e` option for the entire script.

If you only want to enable this option for specific commands, you can prefix them with `set -e`, like this:

set -e
git push

This will cause the script to exit if the `git push` command fails.

In mac (also in a Linux systems) you will have to install an additonal package called `tree` to display the content of folder in a tree view. 

But what if you are like me; someone who doesn't like to install additional packages just for a simple task? Well, you are at the right place then. 

Here is a nice command to get that done for you. Just run the following. 

 find . -print | sed -e 's;[^/]*/;|____;g;s;____|; |;g' 

That's just it. You should see a nice tree output as shown in the above screenshot :) 

You could also convert this to a shell function, or an alias with a parameter to run this easily in the future.

Leave a comment if it helped you.

In bash you can use ctrl + L to clear the scroll back in the terminal. However in zsh, it doesn't work. So here is a workaround. You can use a control sequence to clear it, and set an alias for that. 

Open your  .zshrc file in the editor.

$ vim ~/.zshrc

And add this to the file.

alias cls='printf "\ec\e[3J"'

Save and reload the terminal: or

    $ source ~/.zshrc

Now when you run the command 'cls', it should clear your terminal with its scroll back buffer. Hope it helps.