Forem: Zley

I Built a GUID Generator Because Test IDs Shouldn't Slow Me Down

Zley — Thu, 30 Apr 2026 02:12:52 +0000

Sometimes the smallest dev chores are the ones that interrupt flow the most.

I often need a few GUIDs while testing an API, preparing seed data, writing examples, or filling in mock payloads. It is not hard to generate one from the console, but doing it repeatedly gets annoying fast.

So I turned that tiny workflow into a browser tool: GUID Generator.

What it does

The tool is intentionally simple:

Generate 1 to 20 GUIDs at once
Switch between uppercase and lowercase
Keep or remove hyphens
Add braces when a format needs them
Copy all generated values in one click
Restore recent generated batches from local history

That covers most of the cases I run into when I need IDs for JSON payloads, SQL rows, config examples, or test fixtures.

Why I made it a separate tool

A GUID generator is not a big feature. But when a tiny task shows up many times a week, it is worth making it frictionless.

I wanted the flow to be: open the page, choose the format, generate, copy, move on. No login. No backend roundtrip. No extra UI trying to be clever.

You can try the GUID generator here.

Where AI helped

AI was useful here in a practical way. I used it to map the small edge cases first: count limits, casing, hyphen handling, brace formatting, copy feedback, and local history.

After that, I folded the implementation back into the existing Tools Online structure, tightened the TypeScript, and added the multilingual SEO page around it.

For small tools like this, AI is not replacing the product decision. It is more like a checklist partner that helps catch the boring details before they become bugs.

Who it is for

This is for developers who need quick IDs while building, debugging, documenting, or testing. If you regularly paste GUIDs into API mocks, database seeds, sample configs, or test data, this should save a few small interruptions.

It is a small tool, but that is the point. The best utility tools are the ones you can open, use, and forget about.

I Built a Text Similarity Checker: Compare Two Texts Instantly in Your Browser

Zley — Wed, 29 Apr 2026 03:11:49 +0000

Recently I was working on my online tools website toolsonline.run and decided to build a Text Similarity Checker — a tool that compares two texts and shows you exactly how similar they are.

Why I Built This

I kept running into situations where I needed to compare two blocks of text:

Writing: Checking if I accidentally repeated paragraphs in a long article
SEO: Detecting duplicate content across pages
Translation: Comparing different versions of a translated text
Code review: Spotting similar code snippets

Most existing tools require registration, file uploads, or charge a fee. I wanted something simpler: paste two texts, get instant results, no strings attached.

How It Works

Paste your two texts into "Text A" and "Text B" fields, and the tool instantly calculates:

Similarity percentage — based on the Sørensen–Dice coefficient
Shared word count — how many identical words exist between the two texts
Text overlap rate — the coverage of content overlap

Results update in real time as you type or edit.

The Technical Challenge: Chinese Tokenization

The biggest challenge was Chinese text segmentation. English splits on spaces, but Chinese has no natural word boundaries. I used Intl.Segmenter — a browser-native API that correctly handles tokenization for 15+ languages including Chinese, Japanese, Korean, and Thai. No backend needed.

The algorithm uses the Sørensen–Dice coefficient, a classic text similarity metric. It compares the intersection of word frequency distributions against their union, producing a 0–100% score.

Key Features

Real-time processing — results update as you type
Multi-language support — works with CJK languages via Intl.Segmenter
100% client-side — no data sent to any server
Free & no registration — just open and use

Try It Out

Text Similarity Checker

It's completely free, open-source friendly, and respects your privacy. All calculations happen locally in your browser.

If you find it useful, feel free to share it. Questions or suggestions? Drop a comment below!

I built a small Base64 tool because I was tired of opening the console

Zley — Tue, 28 Apr 2026 05:59:09 +0000

There are some developer tools that are not complicated at all, but still manage to interrupt your flow every time you need them.

Base64 encoding and decoding is one of those for me.

When I am debugging an API response, checking a payload, testing a data URI, or looking at a config value that someone encoded, I usually do not want to open a terminal, write a quick snippet, or search for a random converter. I just want to paste the text, see the result, copy it, and move on.

So I built a small browser-based Base64 encoder and decoder for Tools Online:

https://toolsonline.run/base64

It does the basic thing: encode text to Base64 and decode Base64 back to text. But I tried to make the workflow feel less annoying:

Real-time conversion while typing
Encode/decode mode switching
UTF-8 support, including CJK text and emoji
One-click copy and paste
Decode error feedback
Local conversion history in the browser

One detail I wanted to make clear on the page is that Base64 is not encryption.

That sounds obvious, but I still see Base64 used in places where people treat "not immediately readable" as "secure". Base64 is just an encoding format. Anyone can decode it. If the data is sensitive, it needs real encryption, not a different text representation.

I also added a short explanation of how Base64 works: 3 bytes become 24 bits, those bits get split into 4 groups of 6 bits, and each group maps to the Base64 alphabet. Padding with = is added when the input length does not fit cleanly into groups of 3 bytes.

The implementation is intentionally simple. The conversion runs in the browser, so the text never needs to be sent to a server. For a tool like this, that matters more to me than adding extra features.

AI helped with the early checklist: edge cases, UX states, page copy, FAQ structure, and multilingual SEO content. The actual implementation still needed manual cleanup around TypeScript types, browser APIs, error handling, and keeping the UI consistent with the rest of the site.

It is a small tool, but I like small tools that remove repeated friction.

If you deal with Base64 often while debugging APIs or frontend data, you can try it here:

Base64 Encode & Decode Online

How I Built My URL Decode Tool

Zley — Fri, 13 Mar 2026 11:31:06 +0000

I have been filling out Tools Online with the kind of developer utilities that are small, boring, and incredibly useful when you need them right now. A URL decode and encode tool was an obvious one to build. When you are debugging API calls, checking callback URLs, or trying to read a string full of %E4%B8%AD%E6%96%87, you usually do not want to open DevTools and write one more line of JavaScript. You just want a page that works immediately and keeps your data in the browser.

That was the whole goal here: make it fast, make it clear, and make it convenient enough that I would actually use it myself. If you want to see the finished version first, you can try it here: URL Decode tool.

What this tool does

The tool handles both sides of the workflow.

On the decode side, it takes percent-encoded content and turns it back into readable text with decodeURIComponent, which is useful when I am checking query params, callback links, or encoded values from logs.

On the encode side, I decided not to stop at a single output. The page shows both:

encodeURI, for full URLs where the URL structure should stay intact
encodeURIComponent, for parameter values where special characters should be fully escaped

That distinction matters a lot in real use. People often know they need “URL encoding,” but the difference between those two JavaScript APIs is exactly where mistakes happen. So the tool does not just convert text. It also explains the difference and shows when each option makes sense.

I also added the smaller quality-of-life pieces that make a tool like this feel complete:

real-time conversion while typing
a switch for turning real-time mode on or off
one-click copy and paste support
local history for recent conversions
clear error feedback for invalid encoded input

None of that is flashy, but together it is much nicer than opening the console every time.

How I built it

My usual approach for tools like this is to build the smallest working loop first: input, processing, output. Once that works, I add the interaction details that actually affect usability.

The main component is a client-side React component. The logic is straightforward, but I still wanted the state model to be clean. I split state across the input value, decode output, encode output, current mode, error message, copy feedback, real-time toggle, and history. For the encode flow, I keep both uri and uriComponent outputs so the user does not need to make that choice after the fact.

History is stored in localStorage, capped at 20 entries. I also made sure it does not get noisy. If the latest entry is effectively the same input in the same mode, it is ignored. In real-time mode, I do not immediately save every keystroke either. I delay history writes slightly so the tool feels like a practical utility instead of a key logger with a UI.

On the page itself, I did not want a bare input box and a button. I wanted the landing page to be useful on its own, so I included content that explains the context around the tool:

why URL encoding matters
what RFC3986 allows and reserves
common failure cases when text is not encoded properly
the difference between encodeURI and encodeURIComponent
a quick reference table for common encoded characters
FAQ, how-to content, and structured SEO metadata

So the end result is not just a working widget. It is a tool page that helps people use the feature and understand the concept.

Where AI helped

This was not a one-prompt, fully automated build. I used AI more like a fast development partner. It helped me move faster, but I still made the decisions that shaped the final result.

The first place AI helped was requirement breakdown. I used it to quickly explore which interactions were worth including beyond basic encode and decode. Real-time conversion, clipboard actions, history, and dual encode outputs all came out of that early exploration phase.

Then I used AI to help draft an initial component structure. That is where it saves the most time for me: getting a first pass on state layout, processing flow, and UI structure so I can start refining instead of staring at a blank file.

After that, I tightened the implementation myself. Type details, state behavior, duplicate-history filtering, error handling, and the final interaction choices all needed manual judgment. This project also has real constraints around strict TypeScript, Radix UI usage, i18n file organization, and SEO page structure, so I treat AI output as a draft, not a final answer.

I also use AI later in the process for cleanup work:

checking whether the copy reads naturally
filling in page content that users and search engines actually benefit from
catching obvious edge cases or missing explanations

That is the workflow I like most. AI handles the repetitive and exploratory parts. I keep control over the parts that determine quality.

The parts I like most in this tool

The first one is privacy. Everything runs in the browser. Nothing needs to be sent to a server. For a developer tool that often touches callback URLs, temporary tokens, or debugging data, that boundary matters.

The second one is that the page explains things instead of only outputting a result. I do not like tools that give you an answer without helping you understand why it works. So I added the encodeURI vs encodeURIComponent comparison, an encoding reference, and enough surrounding context to make the page useful even before someone clicks copy.

The third one is the multilingual and SEO work around it. The site supports 15 languages, so even a “small” utility ends up needing full component copy, landing-page content, FAQ, metadata, alternates, and JSON-LD. It is a lot of detail work, but it is worth it because a useful tool should be discoverable and understandable, not just functional.

Who this is for

This tool is especially handy if you regularly do things like:

debug API parameters
inspect OAuth or payment callback URLs
deal with spaces, non-ASCII text, or special characters in query strings
generate safe parameter values for URLs
quickly decide whether a full URL or a single value should be encoded

It is the kind of page that saves time when you need a quick answer and do not want to drop into code just to inspect one string.

Final note

I do not think developer tools need to be complicated to be valuable. A lot of the time, the best ones are the pages you remember at exactly the moment you need them.

That is what I wanted this URL Decode and Encode tool to be. Not flashy, not overloaded, just fast, clear, and complete enough to be genuinely useful. AI helped me speed up parts of the build, which let me spend more time on the interaction details, page content, and overall polish.

If you spend any amount of time bouncing between encoded strings and readable URLs, this one should fit nicely into your workflow. If you want to open it right away, you can try it here.

Built a tool to generate beautiful Prompt Cards over the weekend, no login required

Zley — Sat, 20 Dec 2025 05:35:36 +0000

Hi everyone,

I spent the weekend building a small tool. The idea came from my own frustration: whenever I shared AI Prompts in tech groups or on social media, copy-pasting raw text looked messy, and screenshots of ChatGPT interface were cluttered with UI elements.

I wanted a simple, pure tool to turn boring text into beautiful cards, so I built AI Prompt Card.

Live Demo: https://aipromptcard.app

What does it do?
Simply put, it "beautifies your prompts". Paste your prompt, and it automatically parses Markdown (with code highlighting) to generate a well-designed image.

✨ Key Features:

WYSIWYG: Edit on the left, preview on the right. No guessing.
Markdown Support: Optimized for code blocks and lists. Developer friendly.
Aesthetics: 10+ carefully crafted themes, supporting Dark/Light modes.
Privacy First: No backend account system. All history is saved in your browser's LocalStorage. I don't want your data.
Ultra Lightweight: No bloat. Open, generate, and go.

A bit about the dev process:
There are similar tools out there, but they often require login, produce low-res images, or have poor typography support. As someone with a bit of "pixel OCD", I tweaked the letter spacing and line height specifically to ensure the cards look great when shared on Twitter or mobile.

The project has no paid features and is purely a labor of love (I even paid for the domain 😂).

Let me know what you think! If you have any color themes you'd like to see, tell me in the comments and I'll add them!