BitmapCake!

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.