DEV Community

ElshadHu
ElshadHu

Posted on

Open Source: My Path to Better Code

#learning #typescript #opensource #react

How to Keep Myself Interested via Open Source

Open Source is an adventure. I learn tons of information by checking projects and looking at issues in my free time, which gives me pleasure. In this blog, I'll cover three PRs I made to dive deeper into TypeScript and React semantics:

  1. React Hooks Optimization - samui-wallet | Issue | PR
  2. Date/Time Display Fix - archestra | Issue | PR
  3. JSONata Timeout Validation - node-red-contrib-home-assistant-websocket | Issue | PR

Are hooks Always beneficial ?

Short answer: No. Everything in programming has trade-offs, and hooks are no exception.

The Problem

The 24 words button wasn't working, and the maintainer wanted minimal code changes. I fixed it by removing an unnecessary React hook and changing just one line of code.

The Solution

Before:

   const [wordCount, setWordCount] = useState(12)
Enter fullscreen mode Exit fullscreen mode

After:

  const [strength, setStrength] = useState<MnemonicStrength>(128)
  const wordCount = strength === 128 ? 12 : 24
Enter fullscreen mode Exit fullscreen mode

I just derived it directly , it's a one-line ternary. I realized that there is no need to make things overcomplicated by using useEffect which would add an extra render cycle. Also, useMemo is expensive for one button.

Time Format Challenges

Working on the archestra MCP server project, analyzing the issue was straightforward, but reproducing the bug was time-consuming. I created mock test data to verify the fix. I fixed two issues in the MCP Gateway logs table:

I removed redundant toLocaleDateString() conversion and passed the ISO string directly to formatDate(). I added a TruncatedText component for long server names

The Open Source Reality

After submitting my PR, the maintainer thanked me but had already pushed their own fix, that's just how open source works sometimes.

What I Learned

I reviewed the maintainer's code and realized they used an even simpler solution:

// My approach - thinking beyond, but simpler is better
const dateString = 
  typeof row.original.createdAt === "string"
    ? row.original.createdAt
    : new Date(row.original.createdAt).toISOString();

// Maintainer's approach - cleaner
date: row.original.createdAt,
Enter fullscreen mode Exit fullscreen mode

They simply passed the raw value, trusting that formatDate() handles the conversion internally. I already knew this solution, but sometimes, my empathy with the code and caring too much about code drives me crazy. Remember simplicity is always the key. I regularly study other developers' contributions to learn clean code practices, it's one of the best ways to improve.

Handling JSONata timeout values

I discovered node-red-contrib-home-assistant-websocket, a fascinating project that bridges Node-RED's powerful flow-based programming with Home Assistant's smart home capabilities. I found an issue I could solve, reproduced the bug in the UI, and implemented validation for JSONata timeout values:

    #validateAndConvertTimeout(result: unknown): number {
        const timeout = Number(result);

        if (result === null || isNaN(timeout) || timeout < 0) {
            throw new InputError(
                [
                    'ha-wait-until.error.invalid_timeout',
                    { timeout: String(result) },
                ],
                'ha-wait-until.error.error',
            );
        }

        return timeout;
    }
Enter fullscreen mode Exit fullscreen mode

Firstly I validated if it is undefined which was already being evaluated to isNaN. I fixed that via the suggestion of maintainer, also I changed the error message to String(result) for not making users confused. In open source, if you try your best and show genuine care, maintainers will guide you. What they value most is attention to detail and being specific in your contributions.

Conclusion

Open source is accelerating my learning and growth. I'm not just learning code, I'm learning architecture, clean code principles, communication skills, and new tools. The combination of hands-on problem-solving and collaboration with experienced developers makes every contribution a valuable learning experience.

Top comments (0)