DEV Community: TechMind

When lowercase Matters More Than You Think - A Developer's Perspective

TechMind — Mon, 25 May 2026 10:10:57 +0000

Lowercase conversion sounds trivial. It is not.
Here are the four situations where it matters most in real development work:

Database consistency Storing user input in lowercase prevents case-sensitivity bugs:

// Always normalise before storing
const email = userInput.toLowerCase().trim();
// "John@EMAIL.com" → "john@email.com"

URL generation Lowercase is step one before slugifying:

const slug = title.toLowerCase()
  .replace(/[^\w\s-]/g, '')
  .replace(/[\s_]+/g, '-');

String comparisons

// Case-insensitive search without regex
if (tag.toLowerCase() === searchTerm.toLowerCase()) { ... }

Cleaning legacy data Legacy systems often export ALL_CAPS. Before any transformation, convert to lowercase first to create a clean baseline, then apply the format you actually need (sentence case, title case, etc.). For manual one-off conversions: TechMind.click — paste, click lowercase, copy. Free, client-side only, no sign-up.

7 Things Wrong With Most Online Case Converters (And What to Use Instead)

TechMind — Fri, 15 May 2026 11:31:20 +0000

Most free case converter tools share the same 3 fatal flaws. Here is what they are and how to fix them in your own implementation.

Flaw 1: Proper Case ≠ Title Case

Every basic case converter uses CSS text-transform: capitalize logic — which capitalizes the first letter of EVERY word. That is Proper Case. True Title Case skips prepositions.

// WRONG — capitalizes everything (Proper Case)
const properCase = str => str.replace(/\b\w/g, c => c.toUpperCase());
// "How To Write A Blog Post For The Web" ❌

// RIGHT — true Title Case with small word exceptions
const SMALL_WORDS = new Set(['a','an','the','and','but','or','for','nor','on','at','to','by','in','of']);
const titleCase = str =>
  str.toLowerCase().split(' ').map((word, i) =>
    i === 0 || !SMALL_WORDS.has(word)
      ? word[0].toUpperCase() + word.slice(1)
      : word
  ).join(' ');
// "How to Write a Blog Post for the Web" ✅

Flaw 2: Sentence Case Destroys Proper Nouns

// WRONG — basic regex approach
const sentenceCaseBasic = str =>
  str.toLowerCase().replace(/(^\s*\w|[.!?]\s*\w)/g, c => c.toUpperCase());
// "steve jobs founded apple" — all proper nouns gone ❌

// BETTER — preserve already-capitalized words
const sentenceCaseSmart = str => {
  const words = str.split(' ');
  return words.map((word, i) => {
    if (i === 0) return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
    // Preserve words that were intentionally capitalized (proper nouns)
    if (word === word.toUpperCase() && word.length > 1) return word; // abbreviations
    if (/^[A-Z]/.test(word) && i > 0) return word; // already capitalized
    return word.toLowerCase();
  }).join(' ');
};

Flaw 3: No Companion Tools

Every blogger needs: case converter + slug generator + space remover — in the same workflow. Switching between three tools wastes time.

// All three in one utility
const textTools = {
  titleCase: (str) => { /* ... */ },
  sentenceCase: (str) => { /* ... */ },
  slugify: (str) => str.toLowerCase().trim()
    .replace(/[^\w\s-]/g, '')
    .replace(/[\s_]+/g, '-')
    .replace(/--+/g, '-'),
  removeSpaces: (str) => str.replace(/ +/g, ' ').trim()
};

// One input, multiple outputs
const title = "What Is a URL Slug? How to Create SEO-Friendly Slugs!";
console.log(textTools.titleCase(title));
// "What Is a URL Slug? How to Create SEO-Friendly Slugs!"
console.log(textTools.slugify(title));
// "what-is-a-url-slug-how-to-create-seo-friendly-slugs"

For non-technical users, TechMind.click has all of this in one free interface — no code needed.

Unicode Text Styling: Bold, Italic & Strikethrough Without CSS

TechMind — Mon, 11 May 2026 10:04:27 +0000

Most developers know HTML bold and italic tags. But what happens when your text lands in an environment that strips all HTML — WhatsApp, Discord DMs, plain text emails, or Instagram captions?
The answer: Unicode mathematical characters.

Why Unicode Styling Works Everywhere

Unicode includes dedicated ranges for bold, italic, bold-italic, and styled variants of Latin letters. These are not formatting instructions — they are different characters that happen to look styled.

Regular:   Hello World
Bold:      𝗛𝗲𝗹𝗹𝗼 𝗪𝗼𝗿𝗹𝗱
Italic:    𝘏𝘦𝘭𝘭𝘰 𝘞𝘰𝘳𝘭𝘥
Strike:    H̶e̶l̶l̶o̶ ̶W̶o̶r̶l̶d̶

Because they are actual characters, they survive:

Copy-paste into any app
Plain text environments
WhatsApp, Discord, Instagram, Telegram
SMS on modern phones
LinkedIn posts (which strip HTML completely)

The Unicode Ranges

Mathematical Bold — starts at U+1D400

// Offset for bold lowercase 'a' = U+1D41A
const BOLD_OFFSET_LOWER = 0x1D41A - 'a'.charCodeAt(0);
const BOLD_OFFSET_UPPER = 0x1D400 - 'A'.charCodeAt(0);

function toBold(char) {
  const code = char.charCodeAt(0);
  if (code >= 65 && code <= 90)  // A-Z
    return String.fromCodePoint(code + BOLD_OFFSET_UPPER);
  if (code >= 97 && code <= 122) // a-z
    return String.fromCodePoint(code + BOLD_OFFSET_LOWER);
  return char;
}

const boldText = (str) => [...str].map(toBold).join('');
console.log(boldText("Hello World")); // 𝗛𝗲𝗹𝗹𝗼 𝗪𝗼𝗿𝗹𝗱

Mathematical Italic — starts at U+1D434

const ITALIC_OFFSET_LOWER = 0x1D44E - 'a'.charCodeAt(0);
const ITALIC_OFFSET_UPPER = 0x1D434 - 'A'.charCodeAt(0);

function toItalic(char) {
  const code = char.charCodeAt(0);
  if (code >= 65 && code <= 90)
    return String.fromCodePoint(code + ITALIC_OFFSET_UPPER);
  if (code >= 97 && code <= 122)
    return String.fromCodePoint(code + ITALIC_OFFSET_LOWER);
  return char;
}

*Strikethrough *— Unicode combining character U+0336

// Add combining strikethrough after each character
const toStrikethrough = (str) =>
  [...str].map(c => c + '\u0336').join('');

console.log(toStrikethrough("Hello")); // H̶e̶l̶l̶o̶

*Underline *— Unicode combining character U+0332

const toUnderline = (str) =>
  [...str].map(c => c + '\u0332').join('');

TypeScript Implementation with Char Maps

For production use, a char map approach is more reliable than offset math — handles edge cases like special chars that don't exist in bold Unicode ranges:

const BOLD_MAP: Record<string, string> = {
  a:'𝗮', b:'𝗯', c:'𝗰', d:'𝗱', e:'𝗲', f:'𝗳', g:'𝗴',
  h:'𝗵', i:'𝗶', j:'𝗷', k:'𝗸', l:'𝗹', m:'𝗺', n:'𝗻',
  o:'𝗼', p:'𝗽', q:'𝗾', r:'𝗿', s:'𝘀', t:'𝘁', u:'𝘂',
  v:'𝘃', w:'𝘄', x:'𝘅', y:'𝘆', z:'𝘇',
  A:'𝗔', B:'𝗕', C:'𝗖', // ... etc
};

function applyMap(text: string, map: Record<string, string>): string {
  return [...text].map(c => map[c] ?? c).join('');
}

export const toBold = (text: string) => applyMap(text, BOLD_MAP);

Image to PDF in the Browser - No Libraries, No Backend

TechMind — Sat, 09 May 2026 11:13:20 +0000

As Steve Jobs said, "Design is not just what it looks like and feels like. Design is how it works."

Converting an image to PDF should work like this: open tool → upload image → get PDF. That is it. No backend calls, no third-party APIs, no file size limits from a server.

Here is how it actually works in the browser — and why TechMind.click built it this way.

The Core Approach - Canvas + jsPDF

The cleanest client-side image-to-PDF conversion uses the HTML5 Canvas API and jsPDF:

import { jsPDF } from "jspdf";

async function imageToPDF(imageFile) {
  return new Promise((resolve) => {
    const reader = new FileReader();

    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        // A4 dimensions in mm
        const pdf = new jsPDF({
          orientation: img.width > img.height ? "landscape" : "portrait",
          unit: "mm",
          format: "a4"
        });

        const pageWidth = pdf.internal.pageSize.getWidth();
        const pageHeight = pdf.internal.pageSize.getHeight();

        // Calculate scaled dimensions preserving aspect ratio
        const ratio = Math.min(
          pageWidth / img.width,
          pageHeight / img.height
        );

        const imgWidth = img.width * ratio;
        const imgHeight = img.height * ratio;

        // Center on page
        const x = (pageWidth - imgWidth) / 2;
        const y = (pageHeight - imgHeight) / 2;

        pdf.addImage(
          e.target.result,
          "JPEG",
          x, y,
          imgWidth, imgHeight
        );

        resolve(pdf.output("blob"));
      };
      img.src = e.target.result;
    };

    reader.readAsDataURL(imageFile);
  });
}

Handling Multiple Images

async function multipleImagesToPDF(imageFiles) {
  const pdf = new jsPDF({ unit: "mm", format: "a4" });
  const pageWidth = pdf.internal.pageSize.getWidth();
  const pageHeight = pdf.internal.pageSize.getHeight();

  for (let i = 0; i < imageFiles.length; i++) {
    if (i > 0) pdf.addPage();

    const dataUrl = await fileToDataURL(imageFiles[i]);
    const dimensions = await getImageDimensions(dataUrl);

    const ratio = Math.min(
      pageWidth / dimensions.width,
      pageHeight / dimensions.height
    );

    pdf.addImage(
      dataUrl, "JPEG",
      (pageWidth - dimensions.width * ratio) / 2,
      (pageHeight - dimensions.height * ratio) / 2,
      dimensions.width * ratio,
      dimensions.height * ratio
    );
  }

  return pdf.output("blob");
}

const fileToDataURL = (file) => new Promise((res) => {
  const reader = new FileReader();
  reader.onload = (e) => res(e.target.result);
  reader.readAsDataURL(file);
});

const getImageDimensions = (src) => new Promise((res) => {
  const img = new Image();
  img.onload = () => res({ width: img.width, height: img.height });
  img.src = src;
});

Why Client-Side Matters

As Alan Turing would appreciate — the most elegant solution solves the problem with the least complexity. Client-side conversion means:

Zero server costs — no file storage, no bandwidth for uploads
Privacy — user files never leave their device
Speed — no round-trip to a server
Offline capable — works without internet after initial page load

Quick Manual Fix

For non-developers or one-off conversions, TechMind.click has this built in — upload image, download PDF, done. Uses the same browser-based approach — no server, no storage.

What is your preferred client-side PDF library? jsPDF vs pdf-lib — drop it in the comments.

Title Case vs Sentence Case - A Developer's Guide

TechMind — Tue, 05 May 2026 13:36:11 +0000

As a developer, you deal with text casing constantly - button labels, nav items, page titles, error messages, documentation headings. And at some point, someone on your team will ask:
"Should this be title case or sentence case?"

Here's the definitive answer.

The Quick Difference

// Title Case — most words capitalized
"The Best Free Tools for Writers and Developers"

// Sentence case — only first word + proper nouns
"The best free tools for writers and developers"

When to Use Title Case

Use title case for:

tags and page titles
Book/product names referenced in code comments
Navigation menu items (many design systems prefer this)
Marketing headlines (traditional style)
Formal document section headers

<!-- Title case in nav -->
<nav>
  <a href="/">Home</a>
  <a href="/about">About Us</a>
  <a href="/contact">Contact</a>
</nav>

When to Use Sentence Case

Use sentence case for:

UI labels, buttons, tooltips
Error messages and system notifications
Blog/documentation subheadings
Email subject lines
Social media copy

// Google, Apple, Notion all use sentence case for UI
<Button>Save changes</Button>   // ✅ Sentence case
<Button>Save Changes</Button>   // ❌ Title case — feels stiff
<ErrorMessage>Something went wrong</ErrorMessage>  // ✅

The CSS Way to Handle Case

Sometimes the content comes in one case but you need another — handle it in CSS instead of changing the actual text:

/* Force title case visually */
.page-title {
  text-transform: capitalize;
}

/* Force uppercase */
.nav-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Force lowercase */
.tag {
  text-transform: lowercase;
}

Warning: text-transform: capitalize capitalizes the first letter of EVERY word — it is not smart about prepositions. For true title case logic, use JavaScript.

JavaScript Title Case Function

function toTitleCase(str) {
  const smallWords = ['a','an','the','and','but','or','for','nor',
                      'on','at','to','by','in','of','up','as'];
  return str
    .toLowerCase()
    .split(' ')
    .map((word, index) => {
      if (index === 0 || !smallWords.includes(word)) {
        return word.charAt(0).toUpperCase() + word.slice(1);
      }
      return word;
    })
    .join(' ');
}

toTitleCase("the best tools for writers and developers");
// → "The Best Tools for Writers and Developers"

Sentence Case Function

function toSentenceCase(str) {
  return str
    .toLowerCase()
    .replace(/(^\s*\w|[.!?]\s*\w)/g, c => c.toUpperCase());
}

toSentenceCase("THE BEST TOOLS FOR WRITERS. they are all free.");
// → "The best tools for writers. They are all free."

Quick Manual Fix (No Code)
For one-off conversions outside your codebase — content cleanup, blog posts, social media — TechMind.click has both Title Case and Sentence Case converters free. Paste, click, copy.

Rule of thumb: Sentence case for UI and digital content. Title case for formal headings, titles, and navigation. Consistency matters more than which one you pick.
Drop your preferred case style in the comments — always curious how different teams handle this.

How to Remove Extra Spaces from Text - 3 Ways (Including a 1-Click Fix)

TechMind — Sun, 03 May 2026 17:04:24 +0000

If you have ever scraped data, imported CSV files, or copy-pasted content from a PDF, you know the pain of extra spaces in strings.

// You expect this:
"Hello World. This is clean."

// You get this:
"Hello     World.   This  is  messy."

It breaks string comparisons, corrupts database fields, and makes your content look unprofessional.

Why It Happens

Extra spaces come from:

PDF extraction — PDFs store characters with spacing metadata that leaks on extraction
HTML copy-paste — and layout spaces copy over when grabbing web content
User input — double spacebar taps, especially on mobile
Data migrations — moving between systems often introduces whitespace inconsistencies

3 Ways to Fix It

1. JavaScript (client-side)

const cleanText = text.replace(/  +/g, ' ').trim();
// Or more thorough:
const cleanText = text.replace(/\s\s+/g, ' ').trim();

2. Python (data processing)

import re
clean = re.sub(r' +', ' ', raw_text).strip()

3. Quick Manual Fix (no code)

For non-technical users or quick one-off cleaning, TechMind.click has a free Remove Spaces tool. Paste text → click button → copy clean result. No login, no limit.

When to Use Which

Scenario

Production code / data pipeline
One-off content cleanup
Non-technical team member needs it
Large dataset automation

Best approach

JS or Python regex
TechMind.click online tool
TechMind.click online tool
Python with re module

Bonus: Other Useful Text Utilities

If you work with text data regularly, these are also worth bookmarking:

Case converters (UPPERCASE, lowercase, Title Case, Sentence case)
Slug generator for URLs
Reverse text
Image to PDF

TechMind.click has all of these in one place, free.

Have a better regex for handling non-breaking spaces and tabs too? Drop it in the comments.

I built a free text formatter tool (no login, no ads)

TechMind — Fri, 27 Mar 2026 07:00:46 +0000

I built a free text formatter tool (no login, no ads)

Hi developers 👋

I built a simple text formatter tool that helps with:

Convert text to uppercase / lowercase
Remove extra spaces
Generate slugs instantly
Clean and format text quickly

I created this because I was tired of switching between multiple tools for small tasks.

So I made one simple tool that does everything in one place.

👉 Try it here: https://www.techmind.click/

Would love your feedback 🙌