DEV Community

David Fang
David Fang

Posted on

Why I Built a "Boring" Tool for My Daily CSS Workflow

#webdev #css #productivity #html

Mental Math vs. Flow State 🧠

As developers, we are constantly converting units. Converting inches to centimeters (or mm to cm) might seem trivial, but every time I switch to a calculator or a generic search engine, I break my flow.

Generic converters are often bloated with ads, heavy tracking scripts, and confusing UIs. I wanted something that does one thing perfectly and instantly.

The Technical Goal: 0KB (almost) JavaScript ⚡

For inchtocm.net and mmtocm.net, my goal was extreme performance. I wanted the conversion to feel like a native OS feature.

Here’s the simple reactive pattern I used to ensure zero lag without using heavy frameworks:

// Simple, zero-dependency reactive input
const input = document.getElementById('inch-input');
const output = document.getElementById('cm-output');

input.addEventListener('input', (e) => {
  const inches = parseFloat(e.target.value);
  if (!isNaN(inches)) {
    // The constant factor: 1 inch = 2.54 cm
    output.value = (inches * 2.54).toFixed(2);
  } else {
    output.value = '';
  }
});
Enter fullscreen mode Exit fullscreen mode

Focusing on UX and Accessibility ♿

I focused on a few "invisible" features that make a big difference:

  1. Input Mode: Using inputmode="decimal" for mobile users to trigger the numeric keypad immediately.

  2. Instant Feedback: No "Convert" button. The result appears as you type.

  3. Clean UI: No layout shifts, no popups, just the utility.

Tools for the Toolbox 🛠️

If you’re tired of bloated conversion sites, I’ve optimized these two for speed:

They are lightweight, mobile-friendly, and designed to stay out of your way.

What’s your favorite "micro-tool" that you use daily? I'm looking to build more of these single-purpose utilities and would love some ideas!

Top comments (0)