refactoring on S Anand

Patterns for Short Code

Wed, 26 Nov 2025 00:00:00 +0530

I had Claude Code create a PR to update my Unicoder tool. As part of that, I prompted it to repeatedly:

Shorten the code by exploring opportunities to rewrite more elegantly.

Finally, I asked it:

You applied several changes to refactor the code for elegance and brevity.

What were the principles you applied? List them all with examples. The objective is to teach me how to shorten and simplify code elegantly.

Its response was a good tutorial on refactoring to shorten and simplify code.

Excellent question! Here are the key refactoring principles I applied, with concrete examples from the code:

1. Data-Driven Design Over Repetitive Conditionals

Replace repetitive if/else chains with data structures.

Before (30 lines):

const toAscii = (char) => {
  const code = char.codePointAt(0);

  if (code >= 0x1d5d4 && code <= 0x1d5ed) return String.fromCharCode(code - UNICODE_OFFSETS.BOLD_UPPER);
  if (code >= 0x1d5ee && code <= 0x1d607) return String.fromCharCode(code - UNICODE_OFFSETS.BOLD_LOWER);
  if (code >= 0x1d608 && code <= 0x1d621) return String.fromCharCode(code - UNICODE_OFFSETS.ITALIC_UPPER);
  // ... 4 more similar checks
  return char;
};

const detectStyle = (char) => {
  const code = char.codePointAt(0);
  if ((code >= 0x1d5d4 && code <= 0x1d5ed) || (code >= 0x1d5ee && code <= 0x1d607)) return "bold";
  // ... 2 more similar checks
  return null;
};

After (15 lines):

const CHAR_RANGES = [
  { start: 0x1d5d4, end: 0x1d5ed, offset: UNICODE_OFFSETS.BOLD_UPPER, style: "bold" },
  { start: 0x1d5ee, end: 0x1d607, offset: UNICODE_OFFSETS.BOLD_LOWER, style: "bold" },
  // ... all ranges in one place
];

const toAscii = (char) => {
  const code = char.codePointAt(0);
  const range = CHAR_RANGES.find((r) => code >= r.start && code <= r.end);
  return range ? String.fromCharCode(code - range.offset) : char;
};

const detectStyle = (char) => {
  const code = char.codePointAt(0);
  const range = CHAR_RANGES.find((r) => code >= r.start && code <= r.end);
  return range?.style ?? null;
};

Principle: Define data once, process it generically. Both functions now share the same data.

2. Optional Chaining & Nullish Coalescing

Use modern JavaScript operators for cleaner null handling.

Before:

const formatSegment = (text, style) => {
  if (!style) return text;
  switch (style) {
    case "bold": return `**${text}**`;
    case "italic": return `*${text}*`;
    case "mono": return `\`${text}\``;
    default: return text;
  }
};

After:

const formatSegment = (text, style) => {
  if (!style) return text;
  const formatters = { bold: (t) => `**${t}**`, italic: (t) => `*${t}*`, mono: (t) => `\`${t}\`` };
  return formatters[style]?.(text) ?? text;
};

Principle: ?. safely accesses properties, ?? provides defaults. Object lookup replaces switch.

3. Pattern Arrays for Iterative Operations

Use data structures to eliminate repetitive code.

Before:

const mergeStyledSegments = (markdown) => {
  markdown = markdown.replace(/\*\*([^*]+)\*\* \*\*([^*]+)\*\*/g, "**$1 $2**");
  markdown = markdown.replace(/\*([^*]+)\* \*([^*]+)\*/g, "*$1 $2*");
  markdown = markdown.replace(/`([^`]+)` `([^`]+)`/g, "`$1 $2`");

  const original = markdown;
  markdown = markdown.replace(/\*\*([^*]+)\*\* \*\*([^*]+)\*\*/g, "**$1 $2**");
  markdown = markdown.replace(/\*([^*]+)\* \*([^*]+)\*/g, "*$1 $2*");
  markdown = markdown.replace(/`([^`]+)` `([^`]+)`/g, "`$1 $2`");

  return markdown !== original ? mergeStyledSegments(markdown) : markdown;
};

After:

const mergeStyledSegments = (markdown) => {
  const patterns = [
    [/\*\*([^*]+)\*\* \*\*([^*]+)\*\*/g, "**$1 $2**"],
    [/\*([^*]+)\* \*([^*]+)\*/g, "*$1 $2*"],
    [/`([^`]+)` `([^`]+)`/g, "`$1 $2`"],
  ];

  let prev;
  do {
    prev = markdown;
    patterns.forEach(([pattern, replacement]) => markdown = markdown.replace(pattern, replacement));
  } while (markdown !== prev);

  return markdown;
};

Principle: DRY—define patterns once, iterate over them. Easier to add new patterns.

4. Destructuring for Clarity

Extract only what you need from objects.

Before:

const copyToClipboard = (text, button) => {
  const originalHTML = button.innerHTML;
  const originalClasses = [...button.classList];

  button.textContent = "Copied!";
  button.classList.remove("btn-light");
  button.classList.add("btn-success");

  setTimeout(() => {
    button.innerHTML = originalHTML;
    button.className = "";
    originalClasses.forEach((cls) => button.classList.add(cls));
  }, 2000);
};

After:

const copyToClipboard = (text, button) => {
  const { innerHTML, className } = button;

  button.textContent = "Copied!";
  button.className = button.className.replace("btn-light", "btn-success");

  setTimeout(() => {
    button.innerHTML = innerHTML;
    button.className = className;
  }, 2000);
};

Principle: Destructure to extract values. Use className string instead of classList manipulation.

5. Arrow Functions with Implicit Returns

Eliminate unnecessary syntax for single-expression functions.

Before:

const handleCopy = (outputId, buttonId) => () => {
  copyToClipboard(document.getElementById(outputId).innerText, document.getElementById(buttonId));
};

After:

const handleCopy = (outputId, buttonId) => () =>
  copyToClipboard(document.getElementById(outputId).innerText, document.getElementById(buttonId));

Principle: Single-expression functions don’t need braces or return. One line when clear.

Merge functions that serve similar purposes.

Before:

const showError = (message) => {
  const errorContainer = document.getElementById("error-container");
  errorContainer.textContent = `Error: ${message}`;
  errorContainer.classList.remove("d-none");
};

const hideError = () => {
  document.getElementById("error-container").classList.add("d-none");
};

After:

const setError = (message = null) => {
  const el = document.getElementById("error-container");
  if (message) {
    el.textContent = `Error: ${message}`;
    el.classList.remove("d-none");
  } else {
    el.classList.add("d-none");
  }
};

Principle: One function with optional parameter beats two separate functions. setError() hides, setError(msg) shows.

7. Object Literal Shorthand

Use computed expressions in object literals.

Before:

const convertCodeBlock = (text) => {
  const converted = [...text].map((c) => (detectStyle(c) === "mono" ? toAscii(c) : c)).join("");
  return { markdown: "```\n" + converted + "\n```" };
};

After:

const convertCodeBlock = (text) => ({
  markdown: "```\n" + [...text].map((c) => (detectStyle(c) === "mono" ? toAscii(c) : c)).join("") + "\n```",
});

Principle: Eliminate intermediate variables when computation is clear. Use ({...}) for implicit object return.

8. Remove Dead Code

Delete unused functions ruthlessly.

Removed:

const fromUnicodeStyle = (text) => {
  return text.split("").map((char) => toAscii(char)).join("");
};

Principle: If it’s only exported for tests but unused in production, remove it. YAGNI (You Aren’t Gonna Need It).

9. Inline Single-Use Helpers

Don’t create helpers for operations done once or twice.

Before (separate helper):

const renderOutput = (outputId, content) => {
  const output = document.getElementById(outputId);
  output.replaceChildren();
  output.insertAdjacentHTML("beforeend", `<div class="m-0" style="white-space: pre-wrap; word-break: break-word;">${content}</div>`);
};

const updateMarkdownOutput = () => {
  hideError();
  renderOutput("unicode-output", convertMarkdownToUnicode(document.getElementById("markdown-input").value));
};

After (kept helper but simplified):

const renderOutput = (id, content) => {
  const el = document.getElementById(id);
  el.replaceChildren();
  el.insertAdjacentHTML("beforeend", `<div class="m-0" style="white-space: pre-wrap; word-break: break-word;">${content}</div>`);
};

Principle: Kept the helper (reused 2x), but shortened variable names (outputId→id, output→el).

10. Single-Line Simple Functions

When a function is trivial, make it one line.

Before:

const convertBulletsToLists = (markdown) => {
  return markdown.replace(/^• /gm, "- ");
};

After:

const convertBulletsToLists = (markdown) => markdown.replace(/^• /gm, "- ");

Principle: Trivial transforms don’t need braces or explicit returns.

11. Early Returns Over Nested Conditions

Fail fast to reduce indentation.

Example (already applied):

const copyToClipboard = (text, button) => {
  if (!text.trim()) return setError("Nothing to copy");
  // ... rest of logic
};

Principle: Guard clauses at the top reduce nesting and cognitive load.

12. Spread Operator for String Iteration

Use [...str] instead of str.split("") for Unicode safety.

Example:

// Handles surrogate pairs correctly
[...text].map((c) => detectStyle(c) === "mono" ? toAscii(c) : c)

Principle: [...] respects code points; split("") splits surrogate pairs incorrectly.

13. Concise Module Exports

Before:

module.exports = {
  convertMarkdownToUnicode,
  convertUnicodeToMarkdown,
  toBold,
  toItalic,
  toMonospace,
  toAscii,
  detectStyle,
  fromUnicodeStyle,
};

After:

module.exports = { convertMarkdownToUnicode, convertUnicodeToMarkdown, toBold, toItalic, toMonospace, toAscii, detectStyle };

Principle: One line when it fits. Remove unused exports.

Summary: Core Principles

Data over code. Use structures, not conditionals
DRY. Never repeat the same logic
Modern JS features. Use ?., ??, destructuring, spread
YAGNI. Remove unused code immediately
Single expression. Eliminate intermediate variables when clear
Implicit returns. Arrow functions with => not => { return }
Early returns. Guard clauses reduce nesting
Shorter names. When scope is small (output → el)
One concern. Each function does one thing well
Readability first. Terse is good; cryptic is bad

Result: 144 lines shorter, more maintainable, same functionality! 🎯

Leaning into the power of AI coding

Wed, 16 Oct 2024 03:55:59 +0000

Yesterday (15 Oct 2024), I used Cursor to code more than I ever have. (Doing's how we learn, I guess. Not just reading.)

This was mainly to create and publish 2 libraries on npm over 6 hours:

asyncsse - which converts a Server-Sent Event stream into an async iterator that I can use in a for await ... of loop
asyncllm - which standardizes the Server-Sent Events streamed by the popular LLMs into an easy to use form.

This exercise broke several mental barriers for me.

Writing in a new language. Deno 2.0 was released recently. I was impressed by the compatibility with npm packages. Plus, it's a single EXE download that includes a linter, tester, formatter, etc. Like all recent cool fast tools, it's written in Rust. So I decided to use it for testing. Running deno test runs the entire test suite. My prompts included asking it to:

Create a Deno HTTP server to mock requests for the tests. This is cool because a single, simple code chunk runs the server within the test suite.
Serve static files from samples/ to move my tests into files

Writing test cases. Every line of this code was written by Cursor via Claude 3.5 Sonnet. Every line. My prompt was, Look at the code in @index.js and write test cases for scenarios not yet covered. It's surprising how much of the SSE spec it already knew, and anticipated edge cases like:

SSE values might have a colon. I learnt for the first time that the limit parameter in String.split() is very different from Python's str.split. (The splits, then picks the first few, ignoring the rest. Python ensures the rest is packed into the last split.) This helped me find a major bug.
SSE has comments. Empty keys are treated as strings. Didn't know this.

I was able to use it to generate test cases based on content as well. Based on @index.js and @openai.txt write a test case that verifies the functionality created the entire test case for OpenAI responses. (I did have to edit it because LLMs don't count very well, but it was minimal.)

Bridging test coverage gaps. The prompt that gave me the most delightful result was Are there any scenarios in @index.js not tested by @test.js? It did a great job of highlighting that I hadn't covered Groq, Azure, or CloudFlare AI workers (though they were mentioned in the comments), error handling, empty/null values in some cases, tested for multiple tool calls. I had it generate mock test data for some of these and added the tests.

Enhancing knowledge with references. I passed Cursor the SSE documentation via @https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events and asked it to find more scenarios my code at @index.js had not covered. This found a number of new issues.

Generating bindings. I avoid TypeScript because I don't know it. Plus, it requires an compilation step for the browser. But TypeScript bindings are helpful. So I prompted Cursor, using the Composer (which can create new files) to Create TypeScript bindings for @index.js in index.d.ts - which id did almost perfectly.

Check for errors. I typed Check this file for errors on @index.d.ts. I don't know enough to figure this out. It went through the description and said everything seems fine. But I saw a TypeScript plugin error that said, Property 'data' of type 'string | undefined' is not assignable to 'string' index type 'string'.ts(2411). When prompted, it spotted the issue. (The earlier code assumed all properties are strings. But some can be undefined too. It fixed it.)

Documentation. At first, I asked the Composer to Create a README.md suitable for a world-class professional open source npm package and it did a pretty good job. I just needed to update the repository name. I further prompted it to Modify README based on @index.js and share examples from @test.js on asyncllm, which did an excellent job.

Code review. I asked it to Review this code. Suggest possible improvements for simplicity, future-proofing, robustness, and efficiency and it shared a few very effective improvements.

Regex lookaheads for efficient regular expression splitting, i.e. use buffer.split(/(?=\r?\n\r?\n)/) instead of buffer.split(/(\r?\n\r?\n)/) -- and though I haven't tested this, it looked cool.
Restructuring complex if-else code into elegant parsers that made my code a lot more modular.
Error handling. It added try {} catch {} blocks at a few places that helped catch errors that I don't anticipate but don't hurt.

Code simplification. Several times, I passed it a code snippet, saying just Simplify. Here's an example:

const events = [];
for await (const event of asyncLLM(...)) {
  events.push(event);
}

This can be simplified to

const events = await Array.fromAsync(asyncLLM(...))

Packaging. I copied a package.json from an earlier file and asked it to Modify package.json, notable keywords and files and scripts based on @index.js which it did a perfect job of.

Blogging. I wrote this blog post with the help of the chat history on Cursor. Normally, such blog posts take me 3-4 hours. This one took 45 minutes. I just had to pick and choose from history. (I lost a few because I renamed directories. I'll be careful not to do that going forward.)

Overall, it was a day of great learning. Not in the classroom sense of "Here's something I didn't know before", but rather the cycling / swimming sense of "Here's something I now know to do."

refactoring on S Anand

Patterns for Short Code

1. Data-Driven Design Over Repetitive Conditionals

2. Optional Chaining & Nullish Coalescing

3. Pattern Arrays for Iterative Operations

4. Destructuring for Clarity

5. Arrow Functions with Implicit Returns

6. Combine Related Functions

7. Object Literal Shorthand

8. Remove Dead Code

9. Inline Single-Use Helpers

10. Single-Line Simple Functions

11. Early Returns Over Nested Conditions

12. Spread Operator for String Iteration

13. Concise Module Exports

Summary: Core Principles

Leaning into the power of AI coding