DEV Community

Urban Mixo
Urban Mixo

Posted on

I got tired of slow, ad-infested calculators, so I built a 100/100 Lighthouse Utility Suite in Vanilla JS 🚀

#javascript #webdev #productivity #showdev

Ever tried to quickly calculate a subnet mask, check a text diff, or generate a password, only to be hit by a site with a 5-second load time, cookie popups, and intrusive ads?

I got tired of it. So I built Urban Mixo.

Urban Mixo is an open-access utility network of 30 computational tools designed for developers, engineers, and professionals. My goal was simple: Absolute mathematical precision, zero dependencies, and 100% client-side privacy.

🏛️ The Architecture

Instead of reaching for React, Vue, or heavy component libraries, I went back to basics to achieve a perfect 100/100 Lighthouse Score across Performance, Accessibility, and SEO:

  • 100% Client-Side: All 30 tools execute natively in the browser memory via Vanilla JavaScript. No inputs are ever sent to a backend server.
  • Zero Dependencies: No jQuery, no NPM bloat, no external CSS frameworks. Just raw, semantic HTML5 and modern CSS Grid/Flexbox.
  • Hardware-Backed Entropy: The Cryptographic Password Generator doesn't use Math.random(). It hooks directly into the Web Crypto API (window.crypto.getRandomValues()) with rejection sampling to eliminate modulo bias.
  • Edge Routing: Hosted on Google infrastructure with DNS and TLS secured at the edge via Cloudflare.

🛠️ Tools Built for Developers & STEM

While the platform includes Finance and Clinical Health hubs, I built several tools specifically for our daily workflows:

  1. Text Diff Checker & Code Compare: A pure client-side implementation of the Myers LCS diff algorithm for instant side-by-side or unified code comparison.
  2. IPv4 Subnet & CIDR Calculator: Instantly converts between slash CIDR notation and dotted-decimal, with a 32-bit binary octet visualizer.
  3. Aspect Ratio & Dimension Resizer: Uses the Euclidean GCD algorithm to simplify resolutions, complete with a visual bounding box and auto-generated CSS.
  4. CSPRNG Random Number Shuffler: Implements the unbiased Fisher-Yates (Knuth) algorithm for shuffling arrays and generating data.

🔒 Privacy by Design

Because everything runs client-side, it is inherently immune to database breaches. You can paste a proprietary source code snippet into the Diff Checker or test an API key without it ever touching a network request.

Check it out!

I'd love for the DEV community to try it out and try to break the math.

🌐 Live Platform: urbanmixo.online
🐙 GitHub Organization: github.com/urbanmixo-tools

Let me know what tools you'd like to see added next!

Top comments (0)