DEV Community: kingfujing

5 Developer Tools That Respect Your Privacy

kingfujing — Wed, 08 Jul 2026 08:13:57 +0000

Every day, developers paste sensitive data into online tools. API responses, JWT tokens, database dumps, configuration files — all uploaded to servers you don't control. Most free online tools process your data on their servers, which means they could log, analyze, or even sell it.

But it doesn't have to be this way. Modern browsers are incredibly powerful. Tools like JSON formatters, Base64 encoders, and even AI image processing can run entirely in your browser using JavaScript APIs — with zero server uploads.

This article covers five essential developer tools that respect your privacy by keeping your data local.

1. JSON Formatter & Validator

JSON is everywhere — API responses, config files, database exports. A JSON formatter is one of the most-used developer utilities, but many online JSON tools send your data to a server for parsing.

A privacy-first JSON formatter uses the browser's built-in JSON.parse() and JSON.stringify() — both available in every modern browser. Your API response with auth tokens, database config with connection strings, or any other sensitive data never needs to leave your machine.

Look for these signs of a privacy-respecting JSON tool:

"All data is processed locally" or "client-side only" statement
Works offline (disconnect your network and try it)
No account or sign-up required
Instant results with no loading spinners

2. Base64 Encoder / Decoder

Base64 encoding is used everywhere — from email attachments to JWT tokens to data URIs. A Base64 encoder/decoder might seem simple, but many implementations fail with Unicode characters like Chinese, Japanese, or emoji.

The privacy risk is real: if you're decoding JWT tokens (which often contain user IDs, email addresses, and other PII) in an online tool, that data is being transmitted to a remote server. A client-side Base64 tool uses the browser's native btoa() and atob() functions with Unicode workarounds, keeping everything local.

3. Regex Tester

Regular expressions are notoriously tricky to debug. A good regex tester with real-time highlighting can save hours of trial and error. But when you paste sensitive data (log files, user-generated content, email lists) into a server-side regex tester, you're giving away that data.

Client-side regex testers use JavaScript's RegExp engine — the same one that powers your browser. Support for named capture groups, lookahead assertions, Unicode property escapes — all available locally, with zero latency and zero privacy risk.

4. JWT Decoder

JSON Web Tokens are a cornerstone of modern authentication. When debugging auth issues, you often need to inspect a token's header and payload. But decoding a JWT in a web-based tool means sending your token (and potentially your users' data) across the network.

A client-side JWT decoder simply base64-decodes the three parts of the token right in your browser. No signature verification (which would require the server's secret — a huge security risk), just pure decoding. The tool can show you the expiration time, issuer, and all custom claims without any data leaving your machine.

5. AI ID Photo Maker

This one might surprise you. An AI-powered ID photo maker that runs entirely in your browser? Yes, it's possible. Using ONNX Runtime Web, the AI model for background removal runs locally via WebAssembly — your photo never leaves your device.

Compare this to typical "free" ID photo websites, which require you to upload your photo to their servers. Who knows what happens to that photo after you upload it? A local AI gives you the same result — professional background removal and standard sizes (1-inch, 2-inch) — with complete privacy.

How to Check If a Tool Respects Your Privacy

Here's a quick checklist:

Disconnect your internet — does the tool still work? If yes, it's fully client-side.
Check the browser's Network tab — are there any API calls when you use the tool?
Look for privacy statements — does the site explicitly say data stays local?
Check the source — many open-source tools are fully transparent about their processing.

Most online developer tools don't need to send your data anywhere. Between JavaScript's built-in APIs and modern WebAssembly, anything from JSON parsing to AI image processing can run locally. The next time you need a quick developer tool, choose one that keeps your data where it belongs — on your machine.

This article was originally published on DevToolsHub — free, privacy-first developer tools that run completely in your browser.

Unix Timestamp Cheat Sheet: Convert, Read, and Debug Like a Pro

kingfujing — Sun, 05 Jul 2026 14:50:24 +0000

Originally published on DevToolsHub — free, privacy-first online tools for developers.

Every developer hits timestamps at some point. JWT expiration (exp), API pagination cursors, database audit fields — Unix timestamps are everywhere. Yet they're one of the most common sources of confusion (and bugs).

This cheat sheet covers everything: conversion tricks, the seconds vs milliseconds trap, timezone gotchas, and one-liners for every major language.

⏱ Quick Try: Convert timestamps instantly with our free Timestamp Converter — supports seconds, milliseconds, and multiple timezone formats.

Quick Reference: Common Timestamps

Date/Time (UTC)	Unix (seconds)	Unix (ms)
Jan 1, 1970 00:00:00	0	0
Jan 1, 2000 00:00:00	946684800	946684800000
Jan 1, 2020 00:00:00	1577836800	1577836800000
Now (Jun 2026)	~1782000000	~1782000000000
Jan 19, 2038 03:14:07	2147483647 ⚠️	2147483647000 ⚠️

⚠️ Year 2038 Problem: The last row shows 2,147,483,647 — the maximum value for a signed 32-bit integer. After this point, 32-bit systems will overflow. Most modern systems use 64-bit timestamps (safe for 292 billion years), but embedded systems and legacy APIs may still be vulnerable.

The #1 Bug: Seconds vs Milliseconds

This is the most common timestamp bug in existence:

JavaScript Date.now() → milliseconds
Python time.time() → seconds (as float)
JWT exp claim → seconds
PostgreSQL EXTRACT(EPOCH FROM NOW()) → seconds
MySQL UNIX_TIMESTAMP() → seconds

Rule of thumb: If the value is around 1.7 billion → it's seconds. If it's around 1.7 trillion → it's milliseconds. The current epoch (June 2026) is about 1,782,000,000 in seconds.

Our Timestamp Converter automatically detects whether your input is seconds or milliseconds — just paste and it works.

One-Liners for Every Language

JavaScript / TypeScript

// Current time
Date.now()                         // -> 1782000000000 (ms)
Math.floor(Date.now() / 1000)      // -> 1782000000 (s)

// Timestamp to Date
new Date(1782000000000)            // -> 2026-06-24T... (ms)
new Date(1782000000 * 1000)        // -> same, but for seconds input

// Date to timestamp
new Date('2026-06-24').getTime()   // -> 1758585600000 (ms)
+new Date()                        // -> shorthand for Date.now()

// Format timestamp
new Date(1782000000000).toISOString()  // -> "2026-06-24T12:00:00.000Z"

Python

import time, datetime

# Current time
time.time()                        # -> 1782000000.123 (seconds, float)

# Timestamp to datetime
dt = datetime.datetime.fromtimestamp(1782000000)
print(dt.strftime('%Y-%m-%d %H:%M:%S'))

# Datetime to timestamp
dt = datetime.datetime(2026, 6, 24)
dt.timestamp()                     # -> 1758585600.0

# Timezone-aware (recommended)
from datetime import timezone
dt_utc = datetime.datetime.fromtimestamp(1782000000, tz=timezone.utc)

SQL (PostgreSQL)

-- Current Unix timestamp (seconds)
SELECT EXTRACT(EPOCH FROM NOW())::bigint;

-- Timestamp to date
SELECT to_timestamp(1782000000);

-- Date to timestamp
SELECT EXTRACT(EPOCH FROM TIMESTAMP '2026-06-24 12:00:00')::bigint;

-- Check if JWT is expired
SELECT 1782000000 > EXTRACT(EPOCH FROM NOW())::bigint; -- false = expired

Bash / Shell

# Current timestamp
date +%s                    # -> 1782000000 (seconds)

# Timestamp to date
date -d @1782000000         # macOS: date -r 1782000000

# Date to timestamp
date -d "2026-06-24" +%s   # -> 1758585600

# ISO format
date -u -d @1782000000 +"%Y-%m-%dT%H:%M:%SZ"

Java

// Current time (milliseconds)
System.currentTimeMillis();        // -> 1782000000000L

// Convert to seconds
System.currentTimeMillis() / 1000;

// Timestamp to Instant
Instant.ofEpochSecond(1782000000);
Instant.ofEpochMilli(1782000000000L);

// Format
Instant.now().toString();          // -> "2026-06-24T12:00:00Z"

// JWT exp check
long exp = 1782000000L;
boolean expired = Instant.now().getEpochSecond() > exp;

Go

// Current time
time.Now().Unix()              // -> 1782000000 (seconds)
time.Now().UnixMilli()         // -> 1782000000000 (ms)

// Timestamp to readable
t := time.Unix(1782000000, 0)
fmt.Println(t.Format(time.RFC3339))

// Parse to timestamp
t, _ := time.Parse(time.RFC3339, "2026-06-24T12:00:00Z")
t.Unix()                       // -> 1782000000

Rust

use std::time::{SystemTime, UNIX_EPOCH};

// Current timestamp
let now = SystemTime::now()
    .duration_since(UNIX_EPOCH)
    .unwrap();
println!("{}", now.as_secs());       // seconds
println!("{}", now.as_millis());      // ms

Common JWT Timestamp Patterns

If you're decoding JWTs (use our JWT Decoder), you'll frequently need to check these timestamp claims:

exp — Token expiration (always in seconds)
iat — Token issued at (seconds)
nbf — Not valid before (seconds)

Copy the exp value into the Timestamp Converter to instantly see if a token is expired — it color-codes expired vs valid.

Time Zones: The Hidden Trap

Unix timestamps are always UTC. They don't have a timezone. A timestamp of 1782000000 means the same moment everywhere on Earth — it's the display that varies by timezone.

When converting timestamps to readable dates:

Use ISO 8601 format (e.g., 2026-06-24T12:00:00Z) for communication between systems — the trailing Z means UTC
Only convert to local time when presenting to users
Never store timestamps in local time — always use Unix timestamps or UTC ISO strings

🎯 Summary: Unix timestamps = seconds since Jan 1, 1970 UTC. JS uses milliseconds, most backends use seconds. Timestamps are always UTC — timezone is a display concern. Use our Timestamp Converter for quick conversions and check JWT expiration with our JWT Decoder.

Related Tools: Timestamp Converter · JWT Decoder · UUID Generator

UUID v4 vs UUID v7: Which One Should You Use?

kingfujing — Sun, 05 Jul 2026 14:50:23 +0000

Originally published on DevToolsHub — free, privacy-first online tools for developers.

UUIDs (Universally Unique Identifiers) are everywhere in modern software development. But not all UUIDs are created equal. With the introduction of UUID v7 in RFC 9562 (May 2024), developers now have a compelling alternative to the ubiquitous UUID v4.

In this guide, we'll compare UUID v4 and UUID v7 across performance, database impact, sortability, and real-world use cases — so you can make the right choice for your next project.

💡 Quick Try: Use our free UUID Generator to generate UUID v4 and v7 right in your browser.

What is UUID v4?

UUID v4 is the most commonly used UUID version. It generates 122 bits of random data, making it effectively unique for practical purposes. The probability of collision is so low (about 1 in 5.3×10³⁶) that you can generate billions per second without worrying.

550e8400-e29b-41d4-a716-446655440000  (v4 example)
# The "4" in position 13 indicates UUID v4
# The version nibble (4) and variant (10xx) are fixed
# Everything else is random

Pros: Simple, battle-tested, available everywhere. Doesn't leak timing information.

Cons: Completely random — no natural ordering. This wreaks havoc on B-tree database indexes because new rows get inserted at random positions instead of appended.

What is UUID v7?

UUID v7 is the new kid on the block. It encodes a 48-bit Unix timestamp (millisecond precision) as its most significant bits, followed by random data. This makes v7 UUIDs time-sortable — you can sort them by creation time without storing a separate timestamp column.

018f0a56-1234-7b00-8a00-123456789abc  (v7 example)
# "018f0a56-1234" = Unix timestamp in milliseconds
# The "7" in position 13 indicates UUID v7
# Remaining bits are random for uniqueness

Pros: Time-ordered = database-friendly. Monotonically increasing = great for B-tree indexes. Encodes creation time without an extra column.

Cons: Newer standard — not all languages/libraries support it yet. Leaks approximate creation time (like auto-increment IDs).

Head-to-Head Comparison

Feature	UUID v4	UUID v7
Timestamp	None (random)	48-bit ms timestamp
Sortable	❌ No	✅ Yes (by time)
DB Index Friendly	❌ Bad (random inserts)	✅ Excellent (sequential)
Collision Resistance	122 random bits	74 random bits
Privacy	✅ No info leakage	⚠️ Leaks creation time
Library Support	✅ Universal	⚠️ Growing (2026+)
Standard	RFC 4122 (2005)	RFC 9562 (2024)

Database Performance: The Real Story

The biggest pain point with UUID v4 is database index fragmentation. PostgreSQL, MySQL, and most relational databases use B-tree indexes, which perform best when new rows have sequentially increasing primary keys.

With UUID v4, every insert lands at a random leaf position, causing:

Page splits — 50-100x more index maintenance
Cache misses — working set doesn't fit in memory
Write amplification — each insert touches multiple index pages

UUID v7 solves this elegantly. Since the timestamp is the leading bits, new UUIDs are monotonically increasing — new rows append to the rightmost index page. This gives you near-sequential performance without the coordination overhead of auto-increment.

When to Use Each

Use UUID v4 when:

You need unpredictable IDs (public API tokens, session IDs)
Privacy matters — v4 doesn't leak creation time
Your database is read-heavy with few writes (index fragmentation isn't an issue)
You're working in an environment without UUID v7 library support

Use UUID v7 when:

You're using UUIDs as primary keys in a write-heavy database
You want time-sortable identifiers without an extra column
You're designing a new system and can pick the latest libraries
Database index performance matters at scale (millions+ rows)

How to Generate UUID v7 in Different Languages

JavaScript / TypeScript

// UUID v7 is not yet in crypto.randomUUID() (still v4)
// Use a small helper:

function uuidv7() {
  const timestamp = Date.now();
  const hex = timestamp.toString(16).padStart(12, '0');
  const rest = Array.from({ length: 16 }, () =>
    Math.floor(Math.random() * 16).toString(16)
  ).join('');
  return `${hex.slice(0,8)}-${hex.slice(8,12)}-7${rest.slice(0,3)}-8${rest.slice(3,7)}-${rest.slice(7)}`;
}

console.log(uuidv7()); // "018f0a56-1234-7b00-8a00-123456789abc"

Python

import uuid
import time

def uuid7():
    timestamp = int(time.time() * 1000)
    hex_ts = f"{timestamp:012x}"
    rest = uuid.uuid4().hex[12:]
    return uuid.UUID(f"{hex_ts[:8]}-{hex_ts[8:12]}-7{rest[:3]}-8{rest[3:7]}-{rest[7:]}")

print(uuid7())  # UUID('018f0a56-1234-7b00-8a00-123456789abc')

PostgreSQL

-- If using pg_uuidv7 extension:
CREATE EXTENSION IF NOT EXISTS pg_uuidv7;
SELECT uuid_generate_v7();

-- Or just generate v4 (built-in, PostgreSQL 13+):
SELECT gen_random_uuid();

Final Verdict

🎯 Recommendation: For new projects that use UUIDs as database primary keys, start with UUID v7. The time-ordered structure gives you B-tree friendly insertion without sacrificing the global uniqueness that makes UUIDs valuable. Reserve UUID v4 for cases where unpredictability is a requirement — API keys, session tokens, or any identifier that must not reveal creation time.

Try generating both UUID versions instantly with our free online UUID Generator tool. It runs entirely in your browser — no server uploads, no data leaks.

Related Tools: UUID Generator · Timestamp Converter · Base64 Encoder/Decoder

How to Decode JWT Tokens Without a Backend

kingfujing — Thu, 02 Jul 2026 16:48:03 +0000

Originally published on DevToolsHub — free, privacy-first online tools for developers. All tools run in your browser; your data never touches any server.

If you've worked with authentication (OAuth, OpenID Connect, or any modern API), you've almost certainly encountered JWT (JSON Web Tokens). They're everywhere — but they can feel like a black box.

The good news: you don't need a backend to inspect a JWT. Since JWTs are base64url-encoded JSON, you can decode them entirely in your browser. In fact, that's the safest way to do it — your token data never leaves your machine.

🔐 Quick Try: Decode any JWT instantly with our free JWT Decoder tool — all client-side, no server uploads.

What is a JWT?

A JSON Web Token is a compact, URL-safe way to represent claims between two parties. A JWT looks like this:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

It has three parts, separated by dots: Header.Payload.Signature

Part 1: The Header

The header tells you how the token was created. Decode the first segment from base64url, and you'll get something like:

{
  "alg": "HS256",
  "typ": "JWT"
}

Key fields:

alg (Algorithm) — The signing algorithm. Common values: HS256 (HMAC+SHA256), RS256 (RSA+SHA256), EdDSA
typ (Type) — Usually "JWT"
kid (Key ID) — Optional. Identifies which key was used to sign

Part 2: The Payload (Claims)

This is the data part — the actual claims the token carries. Standardized claims include:

Claim	Name	Description
`iss`	Issuer	Who created the token
`sub`	Subject	Who/what the token is about (usually a user ID)
`aud`	Audience	Who should accept this token
`exp`	Expiration	Unix timestamp when token expires
`nbf`	Not Before	Token is not valid before this time
`iat`	Issued At	When the token was issued
`jti`	JWT ID	Unique identifier (prevents replay attacks)

Custom claims (like role, permissions, or email) are also common. Use our JWT Decoder to see exactly what your token contains.

Part 3: The Signature

The signature verifies that the token hasn't been tampered with. It's created by taking the header + payload, signing them with a secret key (for HMAC) or private key (for RSA/ECDSA), and base64url-encoding the result.

signature = HMACSHA256(
  base64urlEncode(header) + "." + base64urlEncode(payload),
  secretOrPrivateKey
)

⚠️ Important: Decoding a JWT does NOT verify the signature. You can read the payload without the secret key, but you need the server's secret to confirm the token is authentic. Never trust a decoded JWT without verification.

How to Decode a JWT Step by Step

You only need 3 steps. No server, no libraries:

Split by dots — Take your JWT and split on "." — you get three parts: [header, payload, signature]
Base64url decode the payload — Convert from base64url (use atob() in JS, but first replace - with + and _ with /)
Parse as JSON — JSON.parse() the decoded string — now you can read every claim

Or just use our JWT Decoder and paste your token — it does all three steps instantly, with syntax-highlighted output and expiration status.

Common JWT Security Pitfalls

1. The "none" Algorithm Attack

Older JWT libraries had a vulnerability where an attacker could change the algorithm to "none" and bypass signature verification. Always whitelist expected algorithms on the server side.

2. Storing JWTs in localStorage

While convenient, localStorage is accessible to any JavaScript running on the same origin. If your site has an XSS vulnerability, tokens can be stolen. Consider HttpOnly cookies for production applications.

3. Not Checking the exp Claim

Always verify the exp (expiration) claim on the server. An expired token should be rejected. Use our Timestamp Converter to check if a token's exp timestamp is still valid.

4. Decoding Without Verifying

This bears repeating: anyone can decode a JWT. The security comes from verifying the signature, which requires the server's secret key. Client-side tools like our JWT Decoder are great for debugging and inspection, but never trust the decoded data for authorization decisions.

Debugging JWTs Like a Pro

When debugging authentication issues, here's what to check with a JWT decoder:

Is the token expired? Check the exp claim against the current time
Is the issuer correct? Verify the iss claim matches your auth server
Is the audience correct? Check aud — your API should verify it
Are custom claims present? If your API expects a role or permissions claim, confirm it's there

Use our free JWT Decoder to inspect tokens quickly — it runs entirely in your browser, so your tokens stay private.

Related Tools:

10 Free Online Developer Tools You Need in 2026

kingfujing — Fri, 26 Jun 2026 01:27:46 +0000

Originally published on DevToolsHub — a collection of free, privacy-first online tools for developers.

Every developer has those moments — you need to quickly format some JSON, decode a Base64 string, or test a regex pattern, but you don't want to open a heavy IDE or risk pasting sensitive data into an unknown website.

I've been maintaining a collection of privacy-first developer tools that run entirely in your browser. Your data never touches any server. Here are 10 tools that I use almost daily.

1. 🔧 JSON Formatter & Validator

The most requested tool in any developer's arsenal. Paste messy JSON, hit format, and get beautifully indented output with syntax validation.

Why use it:

Format with adjustable indentation (2/4 spaces, tabs, minified)
Real-time error detection — highlights exactly where your JSON broke
Copy formatted output with one click

👉 Try it: DevToolsHub JSON Formatter

2. 🔄 Base64 Encoder / Decoder

Need to quickly encode an API token or decode a JWT header? Base64 encoding is everywhere in web development.

Why use it:

Full Unicode support (Chinese characters, emoji, etc.)
Automatic detection — paste Base64 and it auto-decodes
Toggle between encode/decode with one click

👉 Try it: DevToolsHub Base64

3. 🎯 Regex Tester with Live Preview

Regex is powerful but notoriously hard to debug. This tool gives you real-time matching feedback so you can see exactly what your pattern captures.

Why use it:

Live matching as you type (300ms debounce)
Supports all flags: g, i, m, s, u, y
Named capture groups (?<name>...) support
Highlighted matches in the test string

👉 Try it: DevToolsHub Regex Tester

4. 🔑 UUID Generator

Need a UUID for a database primary key, API identifier, or session token? Generate them in batches.

Why use it:

Generate 1, 5, 10, 25, 50, or 100 UUIDs at once
Uses crypto.randomUUID() — cryptographically secure
One-click copy all

👉 Try it: DevToolsHub UUID Generator

5. ⏱ Timestamp Converter

Unix timestamps are everywhere in APIs and databases. This bidirectional converter saves you from mental math.

Why use it:

Convert timestamp → human date, and date → timestamp
Auto-detects seconds vs milliseconds
"Now" button for current timestamp

👉 Try it: DevToolsHub Timestamp Converter

6. 🎨 Color Converter

Designers and frontend developers: need to convert between HEX, RGB, and HSL? This tool has you covered.

Why use it:

Auto-detects input format
Large color preview swatch
Copy any format with one click

👉 Try it: DevToolsHub Color Converter

7. 🔗 URL Encoder / Decoder

URL parameters with special characters breaking your API calls? Encode them properly.

Why use it:

Dual mode: encodeURI (preserves URL structure) or encodeURIComponent (encodes everything)
Swap button to quickly switch encode/decode
Clean output

👉 Try it: DevToolsHub URL Encoder/Decoder

8. 🔐 JWT Decoder

Inspect JWT tokens without a backend. Decode the header and payload to debug authentication flows.

Why use it:

Automatically splits header, payload, and signature
Shows expiry time with green/red status
Sample JWT pre-filled for testing

👉 Try it: DevToolsHub JWT Decoder

9. 📸 AI ID Photo Generator

Need a passport-style photo for your developer profile? This tool removes backgrounds and generates standard ID photos right in your browser.

Why use it:

Completely client-side — no uploads
Multiple standard photo sizes
Background removal with AI

👉 Try it: DevToolsHub AI ID Photo

10. 📋 UUID v4 vs v7 Comparison

Not a tool, but an essential read if you're deciding which UUID version to use in your next project.

👉 Read: UUID v4 vs v7: Which One to Use

Why These Tools Are Different

Most online developer tools upload your data to a server for processing. DevToolsHub does not.

✅ 100% client-side — all processing happens in your browser
✅ No data leaves your machine — perfect for sensitive data
✅ No account required — just open and use
✅ Free forever — no hidden limits or paywalls

What's Next?

I'm actively adding new tools. If there's something you'd like to see, let me know in the comments!

If you found this useful, consider bookmarking DevToolsHub or sharing it with a fellow developer.

The Complete Guide to Writing Better Regular Expressions

kingfujing — Sat, 20 Jun 2026 05:30:04 +0000

Originally published on DevToolsHub — a collection of free, privacy-first online developer tools.

Regular expressions are one of the most powerful — and most intimidating — tools in a developer's arsenal. They can validate an email in one line, extract data from messy logs, or replace patterns across thousands of files. But they can also produce unexpected results, suffer from catastrophic backtracking, or simply fail to match what you intended. This guide covers practical patterns, common traps, and expert techniques for writing better regex.

Start with a Regex Tester

Never write a complex regex without a tester. Live feedback is essential — it shows you exactly what matches, what does not, and why. The DevToolsHub Regex Tester provides real-time highlighting, flag toggles, and named group detection. Always test your pattern against multiple input strings before deploying it.

Understanding Regex Flags

Flags change how a regex pattern is interpreted. Here are the six most important flags in JavaScript:

Flag	Name	Effect
`g`	Global	Find all matches, not just the first one
`i`	Case-insensitive	Match both uppercase and lowercase
`m`	Multiline	`^` and `$` match start/end of each line
`s`	Dot All	Make `.` match newline characters too
`u`	Unicode	Enable Unicode property escapes like `\p{L}`
`y`	Sticky	Match only from `lastIndex` position

Practical Patterns for Everyday Use

Email Validation

A robust email regex is surprisingly complex. The official RFC 5322 regex is hundreds of characters long. For practical purposes, this pattern covers 99.9% of real email addresses:

/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

URL Extraction

/https?:\/\/[\w\-._~:\/?#\[\]@!$&'()*+,;=]+/g

Password Strength (at least 8 chars, 1 upper, 1 lower, 1 digit)

/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/

This uses lookaheads ((?=...)) to check each condition without consuming characters.

Extract All Hex Colors from CSS

/#([a-fA-F0-9]{3}|[a-fA-F0-9]{6})\b/g

Named Capture Groups

JavaScript (ES2018+) supports named groups, which make your regex much more readable:

const logPattern = /(?<ip>\d+\.\d+\.\d+\.\d+) - - \[(?<date>[^\]]+)\]/;
const match = logPattern.exec('192.168.1.1 - - [19/Jun/2026:12:00:00]');
console.log(match.groups.ip);    // "192.168.1.1"
console.log(match.groups.date);  // "19/Jun/2026:12:00:00"

Named groups make complex patterns self-documenting and eliminate fragile index-based group references like match[1].

Common Regex Traps

1. Catastrophic Backtracking

Nested quantifiers like (a+)+b can cause exponential backtracking. On a long string of "a"s without a "b" at the end, the engine tries every possible split before giving up. This can freeze your application.

Fix: Use atomic groups (if supported) or rewrite to avoid nested quantifiers. Use possessive quantifiers like a++ where available.

2. Greedy vs Lazy Matching

By default, quantifiers are greedy — they match as much as possible. To match the minimum, add ? after the quantifier:

// Greedy: matches "<div>...</div><span>..." as one match
/<.*>/

// Lazy: matches each tag individually
/<.*?>/

3. Forgetting the Global Flag

Without the g flag, regex.exec() and String.match() return only the first match. Always add g when you need all occurrences.

Testing Your Regex

Even experienced developers write buggy regex on the first try. Always test your patterns against:

Valid input — does it match what you want?
Invalid input — does it correctly reject bad data?
Edge cases — empty strings, very long strings, strings with special characters
Performance — test with a large input to catch backtracking issues

Use the DevToolsHub Regex Tester to iterate quickly with live match highlighting. The 300ms debounce ensures instant feedback without performance lag.

Final Advice

Regex is a skill you build over time. Start with simple patterns, use named groups for readability, always test with a dedicated tool, and never nest quantifiers. With practice, you will go from fearing /^$REGEX$/ to wielding it with confidence.

If you found this guide useful, check out DevToolsHub for more free online developer tools. All tools run locally in your browser — your data never leaves your device.

Base64 Encoding & Decoding: What Every Developer Needs to Know

kingfujing — Sat, 20 Jun 2026 05:11:00 +0000

Originally published on DevToolsHub — a collection of free, privacy-first online developer tools.

Base64 is one of those technologies that every developer encounters but few deeply understand. It shows up in data URLs, JWT tokens, email attachments, authentication headers, and countless API specifications. But what exactly is Base64, and why is it so widely used? This guide covers everything you need to know.

What Is Base64?

Base64 is a binary-to-text encoding scheme that represents binary data in an ASCII string format. It uses 64 printable characters — A-Z, a-z, 0-9, +, and / (plus = for padding) — to encode arbitrary binary data. The name "Base64" comes from the 64-character alphabet.

Crucially, Base64 is not encryption. It is an encoding, like Morse code or hexadecimal. Anyone can decode Base64 back to the original data. Never use Base64 to protect sensitive information — use proper encryption (AES, RSA) for that.

When Do Developers Use Base64?

1. Data URLs in HTML/CSS

Inline images and fonts can be embedded directly in HTML using data URLs. The image binary is Base64-encoded and embedded in the src attribute:

<img src="data:image/png;base64,iVBORw0KGgo..."/>

This eliminates an HTTP request but increases the page size by about 33% (Base64's overhead). Use it sparingly — typically only for very small images (under 1 KB).

2. JWT Tokens

JSON Web Tokens (JWTs) use Base64url encoding (a URL-safe variant) for their three parts: header, payload, and signature. Each part is Base64url-encoded JSON. If you paste a JWT into a JWT decoder, it uses Base64 decoding under the hood to parse the token.

3. HTTP Basic Authentication

The Authorization: Basic header encodes the username:password pair in Base64:

// "admin:secret123" → Base64
Authorization: Basic YWRtaW46c2VjcmV0MTIz

This is not secure by itself — always use HTTPS to prevent middlebox interception.

4. Email Attachments (MIME)

Email protocols were designed for text. Binary attachments (images, PDFs, documents) are Base64-encoded within MIME parts so they can traverse SMTP servers reliably. Every email attachment you've ever sent or received has been Base64-encoded somewhere along the way.

How Base64 Works (Briefly)

Every 3 bytes (24 bits) of input data are split into four 6-bit chunks. Each 6-bit value (0-63) maps to a character in the Base64 alphabet. If the input length is not divisible by 3, padding = characters are added to make the output length a multiple of 4.

This means Base64 encoding increases data size by roughly 33% — every 3 bytes become 4 ASCII characters.

Input:   [0x4D  | 0x61  | 0x6E]  (3 bytes: "Man")
Bits:    01001101 01100001 01101110
6-bit:   010011 010110 000101 101110
Base64:  T      W      F      u

The Browser Unicode Pitfall (Most Common Bug)

The browser APIs btoa() (binary to ASCII) and atob() (ASCII to binary) have a notorious limitation — they only work with Latin-1 (single-byte) characters. Trying to encode a Unicode string like "你好" directly with btoa() throws a DOMException:

btoa("你好"); // ❌ DOMException: String contains characters outside of Latin1 range

The fix involves a two-step encode/decode using URI encoding:

// Encode Unicode string to Base64
btoa(unescape(encodeURIComponent("你好世界")));
// → "5L2g5aW95LiW55WM"

// Decode Base64 back to Unicode string
decodeURIComponent(escape(atob("5L2g5aW95LiW55WM")));
// → "你好世界"

A good Base64 encoder/decoder handles this automatically — just paste your text and it works, no matter the encoding.

Base64 vs Base64url

Standard Base64 uses + and /, which are problematic in URLs and filenames. Base64url replaces them with - and _, and strips trailing = padding:

Feature	Standard Base64	Base64url
Alphabet chars	A-Z, a-z, 0-9, +, /	A-Z, a-z, 0-9, -, _
Padding	`=` added as needed	`=` stripped
Used in	MIME, data URLs	JWT, filenames, OAuth

JWT tokens and many modern APIs use Base64url. This is why a JWT header like {"alg":"HS256"} encodes to eyJhbGciOiJIUzI1NiJ9 instead of the standard Base64 eyJhbGciOiJIUzI1NiJ9 (same in this case, but different when + or / appear in the data).

When NOT to Use Base64

Base64 is convenient but carries real costs:

Large file transfers — 33% overhead means a 10 MB file becomes 13.3 MB. Use binary transfers (multipart/form-data, ArrayBuffer) instead.
Sensitive data — Base64 is trivially reversible. It provides zero confidentiality. Use AES or HTTPS.
Database storage — Storing Base64 strings in databases is wasteful. Store binary data as BYTEA (PostgreSQL), BLOB (MySQL), or VARBINARY (SQL Server).
Performance-critical paths — Encoding/decoding Base64 burns CPU cycles. For high-frequency operations (like logging millions of events), consider raw binary formats.

Key Takeaways

Base64 is an encoding, not encryption — do not use it to protect secrets
It adds ~33% overhead, so avoid it for large data transfers
Browser btoa() does not support Unicode — use the encodeURIComponent workaround
Base64url is the URL-safe variant used in JWT and modern web standards
Use a dedicated online Base64 tool when you need quick encode/decode during development

Next time you see a long string of seemingly random characters ending in =, you will know exactly what it is — Base64, the universal binary-to-text bridge.

If you found this guide useful, check out DevToolsHub for more free online developer tools. All tools run locally in your browser — your data never leaves your device.

JSON Formatting 101: How to Debug JSON Data Like a Pro

kingfujing — Fri, 19 Jun 2026 16:18:50 +0000

Originally published on DevToolsHub — a collection of free, privacy-first online developer tools.

JSON (JavaScript Object Notation) is the lingua franca of modern web APIs. Whether you are debugging a REST endpoint, configuring a cloud service, or building a frontend app, you encounter JSON every day. Yet reading raw, minified JSON is a painful experience — one missing comma can break an entire payload. Here is everything you need to know about JSON formatting, validation, and debugging.

What Is JSON Formatting?

JSON formatting (also called "pretty-printing") transforms compressed, hard-to-read JSON into an indented, human-readable structure. A JSON formatter takes something like this:

{"name":"DevToolsHub","tools":[{"name":"JSON Formatter","url":"/json-formatter"},{"name":"Base64","url":"/base64"}],"active":true}

And turns it into this:

{
  "name": "DevToolsHub",
  "tools": [
    {
      "name": "JSON Formatter",
      "url": "/json-formatter"
    },
    {
      "name": "Base64",
      "url": "/base64"
    }
  ],
  "active": true
}

Why Formatting Matters

Find errors faster — malformed JSON is immediately obvious when you can see the structure
Compare responses — formatted JSON makes side-by-side comparison of API outputs easy
Share readable snippets — formatted JSON is easier to paste into documentation, issues, or PRs
Debug configurations — many cloud and DevOps tools (Terraform, Kubernetes, AWS) output JSON

Common JSON Mistakes to Watch For

1. Trailing Commas

JavaScript allows trailing commas in objects and arrays. JSON does not. This is one of the most common sources of parse errors:

// Invalid JSON (trailing comma)
{
  "name": "DevToolsHub",  ✗ remove this comma
}

2. Unquoted Keys

In JavaScript, object keys can be unquoted identifiers. JSON requires all keys to be wrapped in double quotes:

// Invalid JSON (unquoted key)
{ name: "DevToolsHub" }

// Valid JSON
{ "name": "DevToolsHub" }

3. Single Quotes Instead of Double Quotes

JSON only allows double quotes ("). Single quotes (') are not valid, even though many programming languages accept them for string literals.

4. Undefined or NaN Values

JSON supports null, true, and false, but not undefined or NaN. These values cause JSON.stringify() to silently drop keys or convert them to null.

JSON.stringify({ a: undefined, b: NaN, c: Infinity });
// → "{"b":null,"c":null}"   ← 'a' disappeared entirely!

JSON Formatting Best Practices

Use 2-Space Indentation

The standard for JSON formatting is 2-space indentation. It provides enough visual structure without wasting horizontal space. Some tools default to 4 spaces — configure them to use 2 for consistency with most API documentation.

Validate Before You Use

Always validate JSON before feeding it to your application. A good JSON formatter with validation catches errors immediately and shows you exactly where the problem is. This saves hours of debugging.

Compress for Production

When sending JSON over the wire, use the compression mode to strip all whitespace. JSON.stringify(value) (without spacing arguments) produces compressed output. A typical API response shrinks by 30-50% when compressed — saving bandwidth and improving load times.

Watch Out for Deeply Nested Structures

JSON parsers typically have a nesting depth limit (often around 100-200 levels). If you are working with highly nested data — like OpenAPI specs or complex configuration files — be aware that extremely deep structures can cause parse errors in some environments.

Real-World Debugging Scenario

Imagine you are debugging a payment API that returns this error response:

HTTP 400
{"status":"error","code":"INVALID_PAYLOAD","message":"Validation failed","details":[{"field":"amount","error":"must be a positive number"},{"field":"currency","error":"must be one of: USD, EUR, GBP"}]}

Instead of squinting at that mess, paste it into a formatter:

{
  "status": "error",
  "code": "INVALID_PAYLOAD",
  "message": "Validation failed",
  "details": [
    {
      "field": "amount",
      "error": "must be a positive number"
    },
    {
      "field": "currency",
      "error": "must be one of: USD, EUR, GBP"
    }
  ]
}

Immediately you can see: two fields failed validation (amount and currency). The fix is obvious. This is the kind of insight that formatted JSON gives you in seconds versus minutes.

Putting It All Together

Whether you are a seasoned backend engineer or a frontend developer learning the ropes, mastering JSON formatting is a foundational skill. The next time you copy a curl response, paste it into a JSON formatter before trying to read it. Your eyes — and your debugging efficiency — will thank you.

If you found this guide useful, check out DevToolsHub for more free online developer tools. All tools run locally in your browser — your data never leaves your device.

10 Free Online Developer Tools to Supercharge Your Workflow in 2026

kingfujing — Fri, 19 Jun 2026 16:05:22 +0000

Originally published on DevToolsHub — a collection of free, privacy-first online developer tools. All processing is done locally in your browser.

Every developer has a toolkit — but the best tools are the ones that are always accessible, never ask for a credit card, and keep your data private. In 2026, the bar for "good enough" online tools has risen dramatically. Here are 10 free online developer tools that deliver real power without the bloat.

1. JSON Formatter & Validator

Working with APIs means working with JSON — lots of it. A good JSON formatter does more than just pretty-print. The DevToolsHub JSON Formatter validates your structure, highlights syntax errors, and lets you toggle between compressed and formatted views.

Whether you are debugging a REST API response or writing a config file, this is the first tool you should bookmark.

2. Base64 Encoder / Decoder

Base64 encoding is everywhere — data URLs, JWT tokens, email attachments, and API authentication headers. A reliable Base64 encoder/decoder handles edge cases that raw btoa() and atob() cannot — like Unicode strings and special characters.

Paste a blob, swap between encode and decode, and get back clean output in milliseconds.

3. Regex Tester with Live Highlighting

Regular expressions are incredibly powerful and notoriously tricky. Writing a regex without live feedback is like coding blindfolded.

The DevToolsHub Regex Tester provides real-time match highlighting as you type, supports all common flags (g, i, m, s, u, y), and displays named capture groups. The 300ms debounce keeps it snappy even with large test strings.

4. UUID Generator (Bulk)

Need a UUID for a database primary key, a session token, or a unique filename? The UUID Generator uses crypto.randomUUID() for cryptographically secure v4 UUIDs.

Generate 1, 10, 50, or 100 at once and copy them all with a single click. No server round-trip needed.

5. Timestamp Converter

Every developer has stared at a Unix timestamp and wondered what date that represents. A good timestamp converter handles both directions — seconds to date and date to seconds.

It automatically detects whether the input is in seconds or milliseconds (values over 1 × 10¹¹ are treated as milliseconds). The "Now" button gives you the current timestamp instantly.

6. Color Converter (HEX, RGB, HSL)

Designing UI components often requires converting between color formats. Whether you are writing CSS, configuring a chart library, or tweaking a Tailwind palette, the Color Converter handles HEX (both shorthand #fff and full #ffffff), RGB, and HSL conversions with a live preview swatch.

Paste any format and get the others instantly.

7. URL Encoder / Decoder

Query strings, form data, and API parameters all need proper URL encoding. The URL Encoder/Decoder gives you two encoding modes: encodeURIComponent for thorough encoding and encodeURI for preserving URL structural characters.

The Swap button lets you toggle input and output instantly.

8. JWT Decoder

JSON Web Tokens power modern authentication. When a token is not working, you need to inspect its header, payload, and signature. The JWT Decoder parses the three parts of any valid JWT, displays them as formatted JSON, and even checks the exp claim to tell you if the token has expired — with a clear green/red indicator.

9. Code Beautifier (Coming Soon)

Beyond JSON, developers regularly work with YAML, XML, SQL, and other structured formats. A universal code beautifier that supports multiple languages is on our roadmap. Stay tuned.

10. Diff Checker (Coming Soon)

Comparing two blocks of text — whether it's configuration files, API responses, or code snippets — is a daily task for many developers. A side-by-side diff checker with syntax highlighting is another tool we're building.

Why All Tools Should Run Locally

Every tool on DevToolsHub runs entirely in your browser. Your data is never sent to a server, never logged, never stored. This matters because:

🔒 Privacy — sensitive API keys, tokens, and proprietary data stay on your machine
⚡ Speed — no network latency, results appear instantly
📡 Offline-first — once the page loads, the tool works even if you lose connectivity
🚫 No accounts — zero sign-ups, zero subscriptions, zero tracking

Build Your Toolkit in 2026

The best tools are the ones you reach for without thinking. Bookmark DevToolsHub, explore the collection, and keep it as your go-to for quick, reliable, privacy-first developer utilities. All 8 available tools are free, fast, and built by developers for developers.

If you found this useful, consider sharing it with a fellow developer. Happy coding! 🚀