DEV Community: Coloful Toolhub

Developer Quick Fix: broken JSON, regex, HTML, and the lookup you actually need

Coloful Toolhub — Sat, 03 Oct 2026 15:43:22 +0000

There is no single page named Developer Quick Fix. This is a sequence through tools that already exist on Colorful Toolhub and run in the browser: a payload that will not parse, a regular expression that misses, HTML crushed onto one line, and a magic number you should not keep guessing.

Make the JSON readable before you diff it

The JSON Workbench can format, minify, escape, unescape, convert Unicode and Chinese punctuation, sort keys, inspect a tree, validate a schema, run JSONPath, compare documents, and draft models. Use that list in order:

Check that it is JSON. If it is not, unescape first. Logs often wrap the payload in another string.
Format only after it parses. Minify when you have to paste it back into a query or a string literal.
Sort keys before a diff. Key order is not a content change.
Pull one field with JSONPath instead of another chain of data.data.list[0].
Treat generated models as a sketch of the shape. Rename fields before they land in the repo.

Decode \uXXXX in the workbench instead of by hand. Convert full-width quotes and commas back to ASCII before blaming the parser for a quote that is not a quote.

Regex: look up the metacharacter, then generate, then test three strings

The Regular Expression Metacharacter Reference covers escapes, classes, quantifiers, anchors, groups, lookaround, and JavaScript flags. Confirm the engine, and decide whether you need the u flag. Without it, some Unicode classes do not match what you expect.

The Regex Code Generator drafts an expression and a language-specific call from a description. It does not know whether your input contains newlines, or whether you need a full match. Before you commit it, run three samples: one hit, one miss, and one boundary you meant to exclude, such as a trailing space or a full-width symbol.

When the expression is right in a regex literal and wrong inside JSON, the extra backslash was eaten by another layer. The JavaScript Escape Sequence Reference separates JS strings, JSON strings, template literals, and regex literals.

Beautify HTML and CSS before you edit them

Do not patch a minified line. The CSS and HTML Formatter beautifies or minifies CSS, and beautifies, minifies, or escapes HTML. Beautify while debugging. Minify only when you are packaging. Escape when the snippet has to appear as text, so a <script> is not parsed as an element.

For a real table, the HTML Table Generator turns rows and columns into markup you can copy.

The Text Quick Tools join lines, or strip letters, CJK characters, or digits while leaving the rest. That is input cleanup, not redaction. Do not "remove digits" and call a secret safe.

Look up the constant, then write the name back

The Developer Cheat Sheet Reference covers Android Manifest permissions, editor shortcuts, User-Agent examples, and HTML, CSS, JavaScript, and DOM. Narrower tables are faster when you already know the question:

Key codes and adb shell input keyevent: Android KeyEvent reference
Named, decimal, and hex entities: HTML entity reference
Extension to Content-Type: MIME type reference
The English name of a keyboard glyph: keyboard symbol reference

These are references, not the spec. Recheck permissions and key codes against the SDK you ship.

One order, so you do not change three layers at once

Parse the payload, sort keys, and keep a copy.
If the failure is a match, check metacharacters and escape layers, draft with the generator, and test three strings.
If the failure is layout, beautify, then edit.
If the failure is a magic number, look it up and put the constant name in the code.

General utilities: Developer General Utilities. Formatting: Frontend Devtools. Sheets: Tool Aggregation Nav.

The smallest SEO loop for a static tool site

Coloful Toolhub — Sat, 03 Oct 2026 15:41:44 +0000

Tool sites generate many similar URLs. The pieces below are the ones that change indexing and share cards. Examples are taken from the public HTML of Colorful Toolhub. The generators live on the SEO Marketing workbench and run in the browser.

One title and description per URL

The home page title is "Colorful Toolhub by Snamibo - Free Online Tools Collection", and the description names 1,400+ tools, 72 workbenches, and local processing. A category page should not repeat that sentence. Mobile PWA Tools is titled "Mobile PWA Tools - Free Online Tools" and names Compass and the PWA Manifest Generator. That difference is what a search snippet is for.

Keep titles near 60 English characters, with the page topic before the brand. Keep descriptions near 150–160 characters. If you leave the description empty, the engine will quote navigation or a random tool name.

Every indexable URL needs one rel=canonical to the URL you want indexed. Search URLs such as /?q= should canonicalize back to the stable page, not spawn an index entry per query.

The Meta Tag Generator emits title, description, canonical, and viewport together. Viewport is not a ranking hint, but a missing viewport is treated as a poor mobile page.

Open Graph is the share card, not the ranking

The home page sets og:type=website and og:image to https://toolhub.snamibo.com/og-toolhub.png at 1200×630. Use an absolute image URL. Relative paths often become a blank card in chat apps.

Also set twitter:card to summary_large_image with the same image. Not every crawler falls back from Open Graph to Twitter or the other way around.

Generate tags with the Open Graph Generator, then check truncation in the Open Graph Preview. After deploy, refresh the platform's own cache. A correct tag can still show the previous card for days.

hreflang has to be a closed set

The home page announces og:locale=en_US, og:locale:alternate=zh_CN, and JSON-LD inLanguage of en-US and zh-CN. That does not replace hreflang.

Each language URL needs the full set, including itself:

<link rel="alternate" hreflang="en" href="https://toolhub.snamibo.com/">
<link rel="alternate" hreflang="zh-CN" href="https://toolhub.snamibo.com/zh/">
<link rel="alternate" hreflang="x-default" href="https://toolhub.snamibo.com/">

The Chinese page needs the same three lines. A one-sided annotation is ignored. x-default is for visitors who match neither language. Build the set with the Hreflang Generator so the self-reference is not the line you forget.

robots.txt and the sitemap describe only URLs you can stand behind

robots.txt belongs at the origin root. Allow CSS and JavaScript. A Disallow: / cannot be undone by a noindex the crawler is not allowed to fetch.

User-agent: *
Allow: /

Sitemap: https://toolhub.snamibo.com/sitemap.xml

Write it in the Robots.txt Generator and probe real paths in the Robots.txt Tester: home, one category, one draft you intend to hide.

A sitemap should list only 200 OK, indexable, canonical URLs. Leave out site search and session parameters. changefreq and priority are mostly ignored. Generate XML with the Sitemap Generator, then drop 404s with the Dead Link Checker. A dead URL inside a sitemap is worse than no sitemap, because you handed the crawler the broken address.

JSON-LD only for what the page really does

The home page's JSON-LD is a WebSite plus an Organization. The site declares a SearchAction targeting https://toolhub.snamibo.com/?q={search_term_string}. Keep that only if the query string actually searches. A client-side filter that ignores the parameter on reload should not advertise a search action.

A tool page fits WebApplication better than a fake review snippet. Do not invent ratings. Draft with the Schema.org JSON-LD Generator and check required fields in Rich Results Test. A pass means the markup is well formed, not that Google will show a rich result.

Keep campaign parameters off the canonical URL

Build campaign links with the Tracking URL Builder. Canonicals and sitemap URLs stay clean. Otherwise one article becomes a pile of indexed parameter variants.

That loop is the whole controllable base for a static tool site that does not yet have an editorial blog: unique titles, canonicals, a 1200×630 share image, paired hreflang, a root robots file, a sitemap of live URLs, and JSON-LD that matches the page.

Ship an installable PWA: manifest, maskable icons, and a service worker

Coloful Toolhub — Sat, 03 Oct 2026 15:40:17 +0000

This is the short path that actually makes a static site installable. The generators used below run locally in the browser on Colorful Toolhub's Mobile PWA workbench. You still deploy the files yourself.

Chromium installs a site when it is served over HTTPS, the page points at a valid manifest, a service worker controls the page, and 192px and 512px icons are present. iOS does not use the manifest icons for the home screen. You still need apple-touch-icon.

Manifest

Use the PWA Manifest Generator.

short_name stays around 12 characters. Home screens truncate longer names.
start_url is a stable path inside the site, optionally with one fixed query such as /?source=pwa. Do not put changing analytics parameters here.
scope must cover start_url. A site deployed at /app/ cannot use scope /.
display: "standalone" is the usual choice. browser does not leave the browser UI. fullscreen hides the status bar.
background_color is the splash background. theme_color is the browser chrome. They can differ.
Provide PNG icons at 192 and 512. SVG alone is still unreliable on some Android installers.

shortcuts are optional. Each shortcut URL has to sit inside scope.

Save the file as /manifest.json and add this to every HTML document:

<link rel="manifest" href="/manifest.json">

A root-relative href that does not match the deployed path fails silently. The installer requests that exact URL.

Maskable icons

Android masks icons as a circle, a rounded square, or a teardrop. The safe zone is roughly the center 80%. Keep the mark inside that circle.

Adjust it in the Maskable Icon Editor, and preview circle, rounded-rect, and teardrop. Prefer two manifest entries over a single purpose: "any maskable" image:

{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/icon-maskable-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }

Do the same for 512. One image marked any maskable is often padded, so the non-masked icon looks small.

iOS still wants touch icons and splash screens. The Launch Icon and Splash Generator exports those PNGs and the link tags. Without them, Safari screenshots the current page and flashes a blank splash.

Service worker

Installability only needs a controlling worker. Caching strategy decides whether the next deploy is reachable.

Fingerprinted JS, CSS, and fonts: cache-first. A new filename is a new resource.
HTML: network-first, then cache. Cache-first HTML keeps pointing at deleted hashed assets and the site goes blank.
API responses: stale-while-revalidate, or do not cache them.
One offline fallback document for failed navigations.

The Service Worker Generator emits sw.js plus a registration snippet for those strategies. Register after load. The default scope is the script's directory, so /sw.js can control the origin and /assets/sw.js cannot.

Do not call skipWaiting() and clients.claim() on the first install of every version. The old page and the new cache will mix. Let the new worker wait, tell the page, and skip waiting only after a refresh.

Check

In Chrome DevTools, Application:

Manifest shows no errors, start_url is inside scope, icons preview.
The service worker is activated and controls the current window.
Offline reload still serves the HTML fallback you wrote, not the browser's offline dinosaur.

The install icon, or a firing beforeinstallprompt, is the real signal. Lighthouse no longer scores PWA as a single category, so an old PWA score is not the definition of done.

I built a free, local-first toolbox so I could stop opening five random sites

Coloful Toolhub — Sat, 12 Sep 2026 05:10:12 +0000

I got tired of opening a different website for every tiny job — format JSON, make a QR code, OCR a screenshot, convert YAML to JSON — and half of them wanted an account.

So I put together Colorful Toolhub: a free collection of browser-based utilities. No signup. Where it makes sense, processing stays in the browser.

Site: https://toolhub.snamibo.com

If you only try a few:

JSON workbench: https://toolhub.snamibo.com/A/t/json-workbench
QR generator: https://toolhub.snamibo.com/T/t/qr-generator
Image OCR (in-browser): https://toolhub.snamibo.com/P4A/t/ocr
JSON/YAML/TOML/XML/CSV converter: https://toolhub.snamibo.com/N/t/data-format-converter

About 1,450 tools across 72 workbenches, English and Chinese. I'm a solo builder; feedback on which tools are actually worth keeping in the front is welcome.