DEV Community: Zley

I Started Treating AI Coding Like an Engineering Process, Not a Magic Trick

Zley — Mon, 25 May 2026 08:31:30 +0000

The most useful AI coding improvements I have seen lately are not about making the model sound more confident. They are about making it less reckless.

That is why Superpowers caught my attention.

Superpowers is an agentic skills framework and software development methodology from Jesse Vincent. The idea is simple: give coding agents a stricter process so they stop jumping straight into implementation, stop inventing requirements, and stop claiming work is complete before verification.

In practice, it pushes the agent toward a workflow that looks much closer to real engineering:

clarify requirements before touching code
write a design before implementation
split work into small reviewable tasks
use git worktrees to isolate changes
follow TDD instead of writing tests after the fact
verify before claiming completion
use review-oriented agent workflows when useful

That matters because the failure mode of AI coding is often not “it cannot write code.” The failure mode is that it writes too much code too confidently.

If you have ever asked an agent to fix a bug and watched it declare victory without reproducing the issue, you know the problem. If you have ever asked for tests and got something that could never fail, you know the problem too.

Superpowers does not magically solve software engineering. It adds friction in the right places. For tiny edits, that friction can feel like overhead. For larger features, bug fixes, and refactors, it can prevent a lot of wasted time.

I wrote a full review of Superpowers on Open Agent Skills, including how it works, where it helps, and where it still feels heavy:

https://openagentskills.dev/skills/superpowers

If you use Claude Code, Codex, Cursor, Gemini CLI, Copilot CLI, or similar agentic coding tools, Superpowers is worth a look. The bigger lesson is even more important: the future of AI coding may not just be smarter models. It may be stricter processes around models.

Links:

Superpowers review: https://openagentskills.dev/skills/superpowers
Open Agent Skills: https://openagentskills.dev
GitHub project: https://github.com/obra/superpowers

I Built an MD5 Hash Generator Because Checksums Still Show Up Everywhere

Zley — Fri, 08 May 2026 07:34:09 +0000

Even though MD5 is no longer a good choice for storing passwords, it still shows up in everyday developer work: checksum comparisons, legacy integrations, migration scripts, cache keys, and quick data fingerprints.

So I added a small browser-based tool to Tools Online: MD5 Hash Generator.

Why I built it

I kept needing a quick way to paste a string and get the standard 32-character MD5 hash without opening a terminal, writing a one-off Node script, or searching for a random page that might send input to a server.

The tool is intentionally narrow: paste text, optionally add a salt, and copy the generated MD5 output.

What it supports

The first version includes:

Standard 32-character MD5 output
Short 16-character variant
Uppercase and lowercase formats
Prefix or suffix salt support
Recent hash history
Copy buttons for the generated values

It runs directly in the browser, so the input text does not need to leave the device.

The important security note

I also wanted the page to be clear about what MD5 should and should not be used for. It is fine for checksums, legacy compatibility, deduplication, and non-security fingerprints. It should not be used for new password storage. For passwords, use bcrypt, Argon2, or PBKDF2 instead.

That note matters because a hash tool can be useful without pretending the algorithm is modern cryptography.

Where AI helped

AI helped me shape the page copy around the edge cases: explaining one-way hashing, clarifying why MD5 is not reversible, calling out rainbow table risks, and keeping the UX focused on real developer workflows rather than overselling the algorithm.

The final tool is simple, local-first, and built for quick checksum work.

Try it here: https://toolsonline.run/md5

I Built an AI Token Calculator Because Long Prompts Need a Sanity Check

Zley — Thu, 07 May 2026 07:48:31 +0000

I keep running into the same small problem when working with LLMs: a prompt looks fine in a text editor, but I still need to know whether it is going to fit inside the model context window before I send it.

That is why I added a new tool to Tools Online: AI Token Calculator.

It is a browser-based token and context estimator for common AI models. You can paste a prompt, code snippet, document section, or chat draft, pick the provider/model you care about, and see the token count plus context usage immediately.

What it supports

The first version focuses on the models I most often need to plan for:

OpenAI / GPT models
Claude
Gemini
Qwen
GLM
Kimi

For OpenAI models, the tool uses compatible local BPE tokenizers. For the other providers, it shows the result as a local estimate because their exact billing tokenizers are either proprietary or exposed through authenticated APIs.

That distinction is intentional. I did not want the UI to pretend every number has the same precision. If the result is exact, it is marked as exact. If it is an estimate for planning, it is marked as an estimate.

No API key, no upload

The part I cared about most was privacy. Prompt drafts often contain product ideas, customer text, logs, or internal notes. I did not want a token calculator that sends that text to another server just to produce a rough number.

So the calculator runs in the browser and does not require an API key. You paste text, choose the model, and get a quick read on whether the prompt is small, close to the limit, or already too large.

Where AI helped during development

AI was useful in the boring but important parts of the build. I used it to map out edge cases, compare how different providers expose token counting, shape the first version of the copy, and check whether the UI explained exact counting versus estimation clearly enough.

The final product still needed manual decisions: keep the tool simple, avoid implying exact billing numbers for proprietary tokenizers, support multiple languages, and make the context window usage obvious at a glance.

When I use it

This has already been useful before sending long prompts to production models, trimming documents for chat, checking code snippets, and estimating whether a multi-message prompt should be split.

If you work with GPT, Claude, Gemini, Qwen, GLM, or Kimi and want a quick local check before sending a prompt, you can try the AI Token Calculator here.

UI UX Pro Max — Multilingual Translation Site for Chinese & Vietnamese Developers

Zley — Tue, 05 May 2026 02:39:44 +0000

I'm not the author of UI UX Pro Max — I'm just a multilingual translator who built the official translation site.

What is UI UX Pro Max?

UI UX Pro Max is an AI-powered design intelligence toolkit with 67 UI styles, 161 color palettes, 57 font pairings, and 99 UX guidelines. It works as a skill for AI coding assistants.

Original project: https://github.com/nicekid1/UI-UX-Pro-Max

What I Did

I translated the entire project into Chinese and Vietnamese, and built a multilingual site at:

https://ui-ux-pro-max-skill.com

Languages available: English / 简体中文 / Tiếng Việt

If you're a Chinese or Vietnamese developer who wants to use this toolkit with your AI coding assistant, check it out!

I Built a Word Count Tool Because SEO Drafts Shouldn't Need a Spreadsheet

Zley — Sat, 02 May 2026 00:57:02 +0000

I added a small tool to Tools Online today: Word Count.

It is one of those utilities that looks almost too simple until you notice how often you need it. I hit this all the time when writing README sections, product descriptions, changelogs, SEO snippets, launch posts, and short technical notes.

The annoying part is not counting words itself. The annoying part is switching context just to check whether a title is getting too long, whether a meta description is still readable, or whether a draft has turned into a wall of text.

What I wanted

I wanted the boring version of this tool:

paste text
get the counts immediately
keep everything in the browser
avoid uploading draft content anywhere
include enough numbers to make editing decisions quickly

So the tool shows character count, characters without spaces, word count, sentence count, paragraph count, and estimated reading time.

Why it is useful for developers

Developers write more text than we usually admit. A lot of it is not code, but it still affects how people understand the code or the product around it.

A few places where I keep needing quick counts:

README intros
PR descriptions
documentation summaries
changelog entries
landing page copy
SEO titles and descriptions
short product announcements

For example, when I am working on a tool page, I often want the description to be short enough for search results but still clear enough for a real person. Having the count update instantly makes that editing loop much faster.

Privacy matters for tiny tools too

This is also why I prefer small browser-side utilities for text work. Drafts often contain unfinished product ideas, notes, customer wording, or internal phrasing. There is no reason to send that text to a server just to count it.

You can try it here:

https://toolsonline.run/word-count

I am slowly collecting these small daily utilities into Tools Online. The goal is not to make a heavy platform. It is to make the little tasks developers repeat all day faster to finish.

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!