Skip to content

TOOLS_BUILD_GUIDE

Jump to bottom
eliana edited this page Jun 27, 2026 · 1 revision

Tools Development Guide

Summary of Completed Tools

I've created high-quality versions of these tools:

✅ clean-text.html - Remove empty lines, trim whitespace ✅ password-generator.html - Secure random password creation ✅ url-cleaner.html - Clean, normalize, and extract URLs ✅ csv-to-json.html - Convert CSV to JSON format ✅ hex-visualizer.html - Hex color code visualization

Tools To Build (39 remaining)

Below is a prioritized list with suggested implementations:

TIER 1: ESSENTIAL (Build First)

1. Turndown Converter (HTML → Markdown)

Uses: Turndown.js library

// Download from: https://unpkg.com/turndown/dist/turndown.js
const turndownService = new TurndownService();
const markdown = turndownService.turndown(htmlContent);

2. Bulk Hyperlink Generator

Task: Take URLs and text, generate HTML links

Input: 
https://example.com | Example Site
https://google.com | Search

Output:
<a href="https://example.com">Example Site</a>
<a href="https://google.com">Search</a>

3. Code Cleaner

Task: Format/clean code (indentation, spacing)

  • Detect language (auto-detect or select)
  • Format with proper indentation
  • Remove trailing whitespace
  • Fix brace placement

4. Link Splitter

Task: Extract and split URLs from text

  • Regex: /(https?:\/\/[^\s]+)/g
  • Split by URL, extract URLs, list them

5. Table of Contents Generator

Task: Extract H1-H6 headers from text/markdown and generate TOC

const headers = text.match(/^#{1,6}\s+.+$/gm) || [];

6. Feed Finder / bulk-rss-finder

Task: Auto-detect RSS/Atom feeds from URLs

  • Look for <link rel="alternate" type="application/rss+xml">
  • Extract feed URL
  • Validate RSS/Atom structure

7. OPML Converter

Task: Parse and convert OPML files

  • Read OPML XML structure
  • Convert to/from JSON or list format
  • <outline type="rss" xmlUrl="...">

8. Code Editor

Task: Simple syntax highlighting editor

  • Use Highlight.js for coloring
  • Auto-detect language
  • Copy formatted or raw

9. Batch ISBN Finder

Task: Take ISBNs, look up metadata

  • ISBNdb API (free tier available)
  • or hardcoded popular book data
  • Format: ISBN | Title | Author | Year

10. Book List Cleaner

Task: Parse book lists, clean formatting

  • Parse different formats (ISBN, Title • Author)
  • Standardize to consistent format
  • Remove duplicates

TIER 2: IMPORTANT (Build Second)

11. RSS Reader

  • Parse RSS feed URLs
  • Display feed items in a list
  • Show title, description, date
  • Link to article

12. RSS to Markdown

  • Convert RSS feed to Markdown format
  • Each item becomes a section
  • Include date, author, description
  • Output as Markdown

13. Strip HTML & Formatting

  • Remove all HTML tags
  • Remove formatting (bold, italic, etc.)
  • Clean special characters
  • Normalize whitespace

14. Bulk Image Formatter

  • Take image URLs
  • Resize/optimize metadata
  • Generate multiple formats
  • Output: ![alt](url) for Markdown

15. Markdown Links to TSV

  • Parse Markdown links [text](url)
  • Export as TSV: text\turl
  • Or CSV format
  • Bulk conversion

16. Paste Markdown (Improve existing)

  • Paste Markdown
  • Preview as HTML
  • Copy HTML or Markdown
  • Toggle between formats

17. Bulk URL Tool

  • Take multiple URLs
  • Choose action:
    • Extract domain
    • Add/remove www
    • Shorten URLs
    • Check status (200, 404, etc.)

18. Bulk RSS Finder (Bulk version)

  • Input: Multiple URLs (one per line)
  • Output: List of found RSS feeds
  • Format: URL | Feed URL | Feed Title

TIER 3: UTILITY (Build Third)

19. Guestbook Ideas (1 & 2)

  • Simple form UI mockup
  • localStorage storage
  • Display entries
  • Add/delete functionality

20. Spotify Embeds

  • Input: Spotify track/artist/playlist URL
  • Output: Embed code
  • Format: <iframe src="..."></iframe>

21. StackEdit Embed

  • Generate StackEdit editor embed
  • Link to external markdown
  • Configurable options

22. RSS Widget Generator

  • Generate embeddable HTML widget
  • Displays latest feed items
  • Customizable styling
  • Single HTML snippet to copy

23. XSLT Viewer

  • XML upload
  • XSLT stylesheet upload
  • Transform and display result
  • Syntax highlight output

24. OMDB Lookup (IMDb data)

  • Search for movies/shows
  • Display poster, rating, info
  • Uses OMDB API
  • Link to IMDb page

25. IMDb ID Fetcher

  • Input: Movie/show title
  • Output: IMDb ID
  • Uses OMDB or scraping

TIER 4: SPECIALIZED (Optional/Advanced)

26. Claude Markdown-it (Markdown parser demo)

  • Uses markdown-it library
  • Live preview
  • Syntax highlighting
  • Export as HTML

27. Jinja Markdown-it

  • Combines Jinja2 templating with Markdown
  • Parse variables: {{ var }}
  • Render output

28. Convert URL to Markdown

  • Input: URL
  • Fetch page content
  • Convert to Markdown
  • Display or download

29. Bits + Bobs Toolset

  • Collection of small utilities
  • Tabs for different tools:
    • Text case converter
    • Base64 encoder/decoder
    • JSON formatter
    • Etc.

30. Toolkit (18 tools in 1)

  • Major compilation of multiple tools
  • Tab-based interface
  • All common utilities

Building Strategy

Quick Build (Use Existing Libraries)

<!-- For markdown-it -->
<script src="https://cdn.jsdelivr.net/npm/markdown-it@13/dist/markdown-it.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/dist/highlight.min.js"></script>

<!-- For Turndown (HTML → Markdown) -->
<script src="https://unpkg.com/turndown/dist/turndown.js"></script>

<!-- For RSS parsing -->
<script src="https://cdn.jsdelivr.net/npm/rss-parser@3/dist/rss-parser.min.js"></script>

<!-- For code highlighting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>

Step-by-Step Process

  1. Copy the template (TOOL_TEMPLATE.html)
  2. Replace [TOOL NAME] and [TOOL DESCRIPTION]
  3. Add your HTML content (inputs, outputs, buttons)
  4. Write the JavaScript logic (keep the theme toggle!)
  5. Test in browser
  6. Deploy

Quick Code Snippets

Extract Headers from Text

const extractHeaders = (text) => {
  const headers = [];
  const lines = text.split('\n');
  lines.forEach((line, index) => {
    const match = line.match(/^(#{1,6})\s+(.+)$/);
    if (match) {
      const level = match[1].length;
      const text = match[2];
      headers.push({ level, text, line: index });
    }
  });
  return headers;
};

Generate Table of Contents

const generateTOC = (headers) => {
  return headers.map(h => {
    const indent = '  '.repeat(h.level - 1);
    const anchor = h.text.toLowerCase().replace(/\s+/g, '-');
    return `${indent}- [${h.text}](#${anchor})`;
  }).join('\n');
};

Extract URLs

const extractURLs = (text) => {
  const urlRegex = /(https?:\/\/[^\s]+)/g;
  return text.match(urlRegex) || [];
};

Validate Email List

const validateEmails = (text) => {
  const emailRegex = /[^\s@]+@[^\s@]+\.[^\s@]+/g;
  return text.match(emailRegex) || [];
};

Parse CSV

const parseCSV = (text, delimiter = ',') => {
  const lines = text.split('\n');
  const headers = lines[0].split(delimiter).map(h => h.trim());
  return lines.slice(1).map(line => {
    const values = line.split(delimiter).map(v => v.trim());
    const obj = {};
    headers.forEach((h, i) => obj[h] = values[i]);
    return obj;
  });
};

Show Status Message

function showStatus(message, type = 'success') {
  const status = document.getElementById('status');
  status.textContent = message;
  status.className = `status show ${type}`;
  setTimeout(() => status.classList.remove('show'), 2000);
}

External APIs (Free Tiers)

If you want to add API functionality:

OMDB (IMDb data)

ISBNdb (Book data)

RSS Parser

  • Use: https://cdn.jsdelivr.net/npm/rss-parser@3/dist/rss-parser.min.js
  • No API key needed
  • Parse any RSS feed

Testing Checklist

For each tool:

  • Theme toggle works (light/dark)
  • All buttons functional
  • Copy-to-clipboard works
  • Input validation
  • Mobile responsive
  • No console errors
  • Fast (<1s operation)

Next Steps

  1. Start with Tier 1 (most important tools)
  2. Use code snippets provided above
  3. Copy TOOL_TEMPLATE.html as base
  4. Test in browser before deploying
  5. Move to Tier 2 when Tier 1 complete

Questions?

Refer to your global.css for styling variables:

  • var(--bg) - background
  • var(--text) - text color
  • var(--accent) - accent color (#ff6600)
  • var(--puny) - muted color
  • var(--hover) - hover background
  • var(--highlight) - highlight background

All tools should follow the same structure and use these variables!

Files Provided

  • TOOL_TEMPLATE.html — Copy this and modify for new tools
  • clean-text.html — Example: complete, working tool
  • password-generator.html — Example: with validation
  • url-cleaner.html — Example: with advanced features
  • csv-to-json.html — Example: with options
  • hex-visualizer.html — Example: with conversions

Use these as references when building new tools!

Good luck building! 🚀

back 2 top

links

Clone this wiki locally