Forem: Thiyagu Arunachalam

Day Zero of My Open-source project

Thiyagu Arunachalam — Sat, 04 Apr 2026 16:24:11 +0000

Why I Rebuilt Kitsune Chaos from Scratch

Every interactive learning tool I've ever loved eventually dies. The Flash ones went first. The ones built on unmaintained jQuery plugins followed. I've rebuilt this project three times now, and each time I've gotten a little smarter about what actually matters.

This is the story of the third rewrite — and why I'm reasonably confident it's the last one for a while.

What was wrong with the old version

The original Kitsune Chaos was a single HTML page with inline scripts. It worked, barely. The pendulum simulator was a <canvas> element with 200 lines of procedural JavaScript living in a <script> tag. The Ohm's Law calculator was a form with oninput handlers.

Shipping a new tool meant copy-pasting the whole page and editing it. There was no shared code. Every tool reimplemented the same slider, the same layout, the same color scheme — but slightly differently each time because I'd changed my mind between shipping them.

The real breaking point: I wanted to add a blog. And I had absolutely nowhere to put it.

The new stack

The new version is a Turborepo monorepo with four packages:

@kitsunechaos/physics — pure TypeScript physics helpers (no React, no DOM)
@kitsunechaos/ui — shared React components: Slider, Panel, ToolShell
@kitsunechaos/tools — the actual interactive tools, built with React + Vite
@kitsunechaos/config — shared TypeScript and Tailwind configs

The apps/web Next.js app shells everything. It handles routing, SEO, and this blog. The tool components themselves have zero Next.js dependency — they're pure React and could theoretically be embedded anywhere.

Why separate the physics math from React?

Because V = I × R doesn't need hooks.

@kitsunechaos/physics is plain TypeScript functions. You can unit test them without jsdom. You can import them in a Node script or a Cloudflare Worker. When I eventually add a signal path calculator or a projectile motion tool, the math gets added here first, and the React layer just calls it.

The tool page pattern

Each tool page in Next.js is roughly:

const OhmsLaw = dynamic(
  () => import('@kitsunechaos/tools').then(m => m.OhmsLaw),
  { ssr: false, loading: () => <ToolSkeleton /> }
)

Server-rendered: the page title, description, and category (for Google). Client-rendered: the actual interactive component.

This means search engines see real content, and users don't get a blank screen while the JavaScript loads.

What's next

The two tools live right now — Ohm's Law and the Pendulum Simulator — are just proof that the architecture works. The interesting ones are coming:

RLC circuit analyzer — impedance, phase angle, resonant frequency
Projectile motion — launch angle, drag, range optimization
Wave interference — superposition, standing waves, beats
Lens equation — thin lens, focal length, magnification

I'm building these in public. The source is on GitHub. If you find a bug or want to suggest a tool, open an issue.

Workers with AI Skills Earn 56% More. Here's the 5-Step Plan to Become One of Them

Thiyagu Arunachalam — Thu, 02 Apr 2026 13:59:19 +0000

The pay gap between AI-fluent and AI-ignorant professionals is widening fast. Here's exactly what to do about it.

Let's not sugarcoat it: 2026 is a brutal year to be standing still in your career.

While you're reading this, your company is quietly sorting its workforce into two buckets — those who can work with AI, and those who are being replaced by it. The uncomfortable truth is that most people don't realize which bucket they're in.

56%
That's how much more workers with advanced AI skills earn compared to peers in the same role, according to PwC's analysis. Not a different job. The same job.

This isn't a future problem. It's happening now. And the window to act is smaller than you think.

Here's the exact 5-step plan I'd follow if I had to future-proof my career starting today.

Step 1: Run a "Replacement Audit" on Your Own Job

Open a blank document. List every task you did last week. Then, for each task, ask one question: Could a well-prompted AI do 80% of this?

If the answer is yes, that task is at risk. If no — that's your moat.

Most people skip this step because it's uncomfortable. Don't. You can't protect what you haven't identified.

Step 2: Pick ONE AI Tool and Go Deep — Not Wide

The biggest mistake professionals make is dabbling. They try five AI tools, use each one twice, and then tell themselves they "know AI." That's not fluency — that's tourism.

Pick the tool most relevant to your core work:

Claude — writing and analysis
Cursor — code
Midjourney — design
NotebookLM — research

Spend 30 minutes a day for two weeks going deep. Learn its edge cases. Break it. Learn its limits.

The professionals thriving in 2026 aren't avoiding AI — they're the ones actively learning to work alongside it.

Step 3: Make Your AI Wins Visible

Skill without visibility is a hobby. When AI helps you cut a 4-hour task down to 45 minutes — document it. Tell your manager. Quantify it.

The professionals getting promoted right now aren't necessarily the most technically skilled. They're the ones making the business case for their own value.

Keep a simple "AI impact log":

Date	Task	Old Time	New Time	Outcome
...	...	...	...	...

After 30 days, that document becomes your performance review.

Step 4: Rebuild Your "Human Edge" Stack

Here's what AI still can't do:

Build real relationships
Read a room
Carry institutional memory
Make judgment calls with incomplete information
Communicate a nuanced idea to a skeptical audience

The World Economic Forum calls creative thinking, resilience, and leadership the fastest-rising skills of 2026 — precisely because they complement what AI does.

Invest in these deliberately. Take on a cross-functional project. Volunteer to present. Find the hard conversation at work that nobody else wants to have — and have it well.

Step 5: Stop Waiting for Your Company to Upskill You

Only 54% of employees used AI at work at all last year, despite most companies claiming AI is a priority. The upskilling gap is real — and it won't close itself.

The people who win in this market are taking personal ownership of their development, not waiting for a training program that may never come.

Spend one hour per week — just one hour — learning something AI-adjacent:

A YouTube tutorial
A prompt engineering guide
A conversation with someone who already does it well

Compound it over 12 months, and you will be unrecognizable from where you started.

The Bottom Line

The 56% wage gap isn't going to shrink — it's going to grow. The only question is which side of it you're on.

The good news: you don't need to become an engineer. You don't need to take a six-month bootcamp. You need to start this week, stay consistent, and make your progress visible. That's it.

The window is open. Use it.

Stop Copy-Pasting That "Click Outside" Snippet — Use This Hook Instead

Thiyagu Arunachalam — Thu, 02 Apr 2026 13:51:23 +0000

Every React developer has written this code at least once:

useEffect(() => {
  function handleClickOutside(event) {
    if (ref.current && !ref.current.contains(event.target)) {
      setOpen(false);
    }
  }
  document.addEventListener("mousedown", handleClickOutside);
  return () => document.removeEventListener("mousedown", handleClickOutside);
}, [ref]);

You paste it from Stack Overflow. It works. You move on. Then you write it again next week for the modal. Then again, for the dropdown. Then again, for the tooltip.

Press enter or click to view image in full size

Photo by Lautaro Andreani on Unsplash
Sound familiar?

That’s exactly why I built @kitsunechaos/use-outside-click.

The Problem
Detecting a click outside an element is one of the most common UI patterns in React:

Closing a dropdown when you click elsewhere
Dismissing a modal on backdrop click
Collapsing a popover, tooltip, or color picker
Hiding a mobile navigation drawer
Yet every time, we write the same boilerplate — or worse, reach for a 6KB library that wraps it in a class component HOC from 2018.

Introducing @kitsunechaos/use-outside-click
A dead-simple React hook that detects clicks outside any element. That’s it. No fluff.

npm install @kitsunechaos/use-outside-click
Usage

import { useRef } from "react";
import useOutsideClick from "@kitsunechaos/use-outside-click";
function Dropdown() {
  const ref = useRef(null);
  const [open, setOpen] = useState(false);
  useOutsideClick(ref, () => setOpen(false));
  return (
    <div ref={ref}>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && <ul>{/* dropdown items */}</ul>}
    </div>
  );
}

One import. One ref. One callback. Done.

What Makes It Different
✅ Zero Dependencies
No bloat. No peer dependency warnings. Nothing extra in your node_modules.

✅ Fully Typed
Written in TypeScript from the ground up. Full type inference — no @types/ package needed.

useOutsideClick(ref: RefObject, callback: () => void): void
✅ SSR Safe
Works seamlessly with Next.js, Remix, and any server-side rendering setup. No window is defined.

✅ Touch + Mouse Support
Handles both mousedown and touchstart events — works perfectly on mobile devices too.

✅ Tiny Bundle Size
Under 400 bytes gzipped. Your users will never notice it’s there.

✅ Supports Multiple Refs
Need to track outside clicks across multiple elements? Supported out of the box.

Real World Example — Dropdown Menu

import { useRef, useState } from "react";
import useOutsideClick from "@kitsunechaos/use-outside-click";
export function DropdownMenu() {
  const ref = useRef<HTMLDivElement>(null);
  const [isOpen, setIsOpen] = useState(false);
  useOutsideClick(ref, () => setIsOpen(false));
  return (
    <div ref={ref} style={{ position: "relative", display: "inline-block" }}>
      <button onClick={() => setIsOpen((prev) => !prev)}>
        Options ▾
      </button>
      {isOpen && (
        <ul style={{ position: "absolute", background: "white", border: "1px solid #eee" }}>
          <li>Edit</li>
          <li>Duplicate</li>
          <li>Delete</li>
        </ul>
      )}
    </div>
  );
}

No more cleanup logic. No more forgotten removeEventListener. Just clean, readable code.

Before vs After**
Before — raw boilerplate every time:**

// 10+ lines, every single component
useEffect(() => {
  function handleClickOutside(event) {
    if (ref.current && !ref.current.contains(event.target)) {
      onClose();
    }
  }
  document.addEventListener("mousedown", handleClickOutside);
  return () => {
    document.removeEventListener("mousedown", handleClickOutside);
  };
}, []);

After — one line:

useOutsideClick(ref, onClose);

Installation

npm

npm install @kitsunechaos/use-outside-click

yarn

yarn add @kitsunechaos/use-outside-click

pnpm

pnpm add @kitsunechaos/use-outside-click

Links
📦 npm → npmjs.com/package/@kitsunechaos/use-outside-click
🐙 GitHub → github.com/kitsunechaos-labs/use-outside-click
If this saved you from writing that boilerplate one more time — drop a ⭐ on GitHub. It genuinely helps other developers discover it.

Built with 🦊 by kitsunechaos