5 JavaScript Utilities AI Helped Me Build (That I Actually Use)

AI Coding
0 Comments
Featured image for 5 JavaScript Utilities AI Helped Me Build (That I Actually Use)AI-Generated ImageAI-Generated Image

There is a difference between code that demonstrates a concept and code that solves a problem you actually have. Most AI coding tutorials show you the former — clean, minimal examples that illustrate a technique but do not survive contact with real-world requirements. This post is about the latter — JavaScript utilities that were built with AI assistance and that serve genuine daily needs. Each one includes the problem it solves, the approach taken, and the code itself.

1. Smart Text Formatter

The problem: content pasted from various sources arrives with inconsistent formatting — smart quotes mixed with straight quotes, en dashes mixed with hyphens, inconsistent spacing, and HTML entities that should be plain text. Cleaning this up manually before publishing is tedious and error-prone.

The solution: a JavaScript function that normalizes text formatting according to configurable rules. It standardizes quotation marks, normalizes dashes and hyphens, fixes spacing issues, decodes HTML entities, and removes invisible Unicode characters that can cause rendering issues.

function smartFormat(text, options = {}) {
  const defaults = {
    smartQuotes: true,
    normalizeDashes: true,
    fixSpacing: true,
    decodeEntities: true,
    removeInvisible: true
  };
  const opts = { ...defaults, ...options };
  let result = text;

  if (opts.removeInvisible) {
    result = result.replace(/[\u200B-\u200D\uFEFF\u00AD]/g, '');
  }
  if (opts.decodeEntities) {
    const el = typeof document !== 'undefined'
      ? document.createElement('textarea')
      : null;
    if (el) { el.innerHTML = result; result = el.value; }
  }
  if (opts.normalizeDashes) {
    result = result.replace(/\u2013/g, '-').replace(/\u2014/g, ' - ');
  }
  if (opts.fixSpacing) {
    result = result.replace(/ +/g, ' ').replace(/\n{3,}/g, '\n\n').trim();
  }
  return result;
}

The AI contributed the comprehensive Unicode range for invisible characters and the HTML entity decoding approach. The human contribution was defining what “correct” formatting means for this specific publishing workflow.

2. Debounced Search With Highlight

The problem: searching through large text content on a page needs to feel responsive without firing a search on every keystroke, and results need to be visually highlighted in context.

function createSearchHighlighter(containerEl, options = {}) {
  const { delay = 300, minChars = 2, highlightClass = 'search-highlight' } = options;
  let timeout;

  const clearHighlights = () => {
    containerEl.querySelectorAll('.' + highlightClass).forEach(el => {
      const parent = el.parentNode;
      parent.replaceChild(document.createTextNode(el.textContent), el);
      parent.normalize();
    });
  };

  const highlight = (term) => {
    clearHighlights();
    if (term.length < minChars) return 0;
    const walker = document.createTreeWalker(containerEl, NodeFilter.SHOW_TEXT);
    const matches = [];
    while (walker.nextNode()) {
      const idx = walker.currentNode.textContent.toLowerCase().indexOf(term.toLowerCase());
      if (idx !== -1) matches.push({ node: walker.currentNode, idx, len: term.length });
    }
    matches.reverse().forEach(({ node, idx, len }) => {
      const range = document.createRange();
      range.setStart(node, idx);
      range.setEnd(node, idx + len);
      const span = document.createElement('span');
      span.className = highlightClass;
      range.surroundContents(span);
    });
    return matches.length;
  };

  return (term) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => highlight(term), delay);
  };
}

The TreeWalker approach for traversing text nodes without affecting HTML structure was AI-suggested. The reverse iteration to prevent index shifting during DOM modification was a crucial detail the AI got right on the first try.

3. Local Storage Manager With Expiry

The problem: localStorage has no built-in expiration mechanism. Data stored there persists until explicitly removed, which can lead to stale data and storage bloat.

const store = {
  set(key, value, ttlMinutes = null) {
    const item = {
      value,
      timestamp: Date.now(),
      expiry: ttlMinutes ? Date.now() + ttlMinutes * 60000 : null
    };
    localStorage.setItem(key, JSON.stringify(item));
  },
  get(key) {
    const raw = localStorage.getItem(key);
    if (!raw) return null;
    const item = JSON.parse(raw);
    if (item.expiry && Date.now() > item.expiry) {
      localStorage.removeItem(key);
      return null;
    }
    return item.value;
  },
  clear(prefix = '') {
    Object.keys(localStorage)
      .filter(k => k.startsWith(prefix))
      .forEach(k => localStorage.removeItem(k));
  },
  cleanup() {
    Object.keys(localStorage).forEach(k => {
      try {
        const item = JSON.parse(localStorage.getItem(k));
        if (item?.expiry && Date.now() > item.expiry) localStorage.removeItem(k);
      } catch (e) { /* not our item, skip */ }
    });
  }
};

4. Responsive Image Lazy Loader

The problem: images below the fold should not load until they are about to enter the viewport, but the implementation should be modern, lightweight, and handle srcset for responsive images.

function lazyLoad(selector = 'img[data-src]') {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (!entry.isIntersecting) return;
      const img = entry.target;
      if (img.dataset.srcset) img.srcset = img.dataset.srcset;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      img.removeAttribute('data-srcset');
      observer.unobserve(img);
    });
  }, { rootMargin: '200px' });
  document.querySelectorAll(selector).forEach(img => observer.observe(img));
  return observer;
}

Clean, minimal, and it works. The 200px root margin preloads images just before they scroll into view, eliminating the flash of empty space that aggressive lazy loading can cause.

5. Simple State Machine

The problem: managing UI states (loading, error, success, idle) with conditional logic leads to spaghetti code. A simple state machine enforces valid transitions and keeps state management predictable.

function createMachine(config) {
  let current = config.initial;
  const listeners = new Set();

  return {
    get state() { return current; },
    send(event) {
      const transitions = config.states[current]?.on;
      const next = transitions?.[event];
      if (!next) return false;
      const prev = current;
      current = next;
      listeners.forEach(fn => fn({ from: prev, to: current, event }));
      return true;
    },
    on(fn) { listeners.add(fn); return () => listeners.delete(fn); },
    matches(state) { return current === state; }
  };
}

// Usage
const fetchMachine = createMachine({
  initial: 'idle',
  states: {
    idle: { on: { FETCH: 'loading' } },
    loading: { on: { SUCCESS: 'success', ERROR: 'error' } },
    success: { on: { FETCH: 'loading', RESET: 'idle' } },
    error: { on: { RETRY: 'loading', RESET: 'idle' } }
  }
});

Each of these utilities started as a conversation with AI — describing a problem, evaluating the generated solution, and refining until it fit the actual use case. The code is not impressive for its complexity but for its utility. It works, it is used daily, and it was built in minutes rather than hours. That is the promise of AI-assisted coding delivered.

Similar Posts

Leave a Reply