DEV Community: Abu Sufyan

Stop using UUID v4 as your database primary key (and what to use instead)

Abu Sufyan — Fri, 26 Jun 2026 11:33:56 +0000

You've been generating UUID v4 for your primary keys. It works. Nothing is on fire. But your database is slowly getting slower, and you might not have noticed why yet.

Here's the short version: UUID v4 is completely random. That sounds like a good thing until you realise what it does to your B-tree index.

What's actually happening inside your database

Every time you insert a row with a random UUID v4 as the primary key, PostgreSQL (or MySQL, or any B-tree-indexed store) has to find a random spot in the index to place it. Not at the end — somewhere in the middle. Randomly. Every single time.

This causes index fragmentation. Over thousands of inserts, the index pages split constantly, fill unevenly, and require more I/O to read. On a small app you'll never notice. At 10M rows, you will.

Here's what a v4 primary key sequence looks like:

f47ac10b-58cc-4372-a567-0e02b2c3d479  ← random
3d4a2f1c-9b3e-4c7a-8d2e-1f5a9b3c7d2e  ← random
a1b2c3d4-e5f6-4789-abcd-ef0123456789  ← random

Every one of those lands in a different page of your index. PostgreSQL has to do a page lookup every single insert.

UUID v7 fixes this

UUID v7 (standardised in RFC 9562) encodes a Unix millisecond timestamp in the first 48 bits. The rest is still random — you still get global uniqueness — but because the timestamp comes first, rows generated close in time sort close together in the index.

Here's what a v7 sequence looks like:

018f4b2c-1a00-7e3d-9b4f-2a1c3d5e7f9b  ← 2026-05-01 09:00:00.000
018f4b2c-1a01-7d2c-8a3e-1b2c4d6e8f0a  ← 2026-05-01 09:00:00.001
018f4b2c-1a02-7c1b-7b2d-0a1b3c5d7e9f  ← 2026-05-01 09:00:00.002

Sequential. New rows go at the end of the index, not scattered through it. Index pages fill cleanly. Fragmentation drops dramatically.

The real-world impact: teams migrating from v4 to v7 primary keys have reported 30–60% reduction in index bloat on high-write tables. The write amplification on SSDs drops too.

When to use v4 vs v7

Situation	Use
General-purpose unique ID (session tokens, correlation IDs, API responses)	v4
Database primary key on a high-write table	v7
You need IDs to be sortable by creation time	v7
You want to obscure creation order from external users	v4
Distributed system, multiple writers, no coordination	v7 (timestamp still prevents fragmentation)

If you're starting a new project in 2026, default to v7 for primary keys. The only reason to pick v4 is when you explicitly want non-sortable IDs (rate-limiting tokens, password reset links, etc.).

Generating them in code

JavaScript / Node.js (v7):

// Node 22+ has experimental v7 support
// Until then, use the 'uuid' package
import { v7 as uuidv7 } from 'uuid';

const id = uuidv7();
// → '018f4b2c-dead-7bee-beef-123456789abc'

PostgreSQL native (requires pg_uuidv7 extension):

SELECT uuid_generate_v7();

Python:

import uuid_utils  # pip install uuid-utils

id = uuid_utils.uuid7()
print(str(id))

Quick sanity check — extract the timestamp from a v7:

function extractTimestamp(uuidV7) {
  const hex = uuidV7.replace(/-/g, '').slice(0, 12);
  return new Date(parseInt(hex, 16));
}

Need to generate a batch right now?

If you're seeding a database, writing a migration script, or just need a stack of test UUIDs without installing anything — I built a free browser-based tool that handles both v4 and v7 bulk generation.

👉 Bulk UUID v4 & v7 Generator — WebToolkit Pro

Everything runs in your browser via crypto.getRandomValues(). Nothing is sent to a server. Generate up to 100 at a time, copy them all in one click.

TL;DR

UUID v4 is random → random index positions → index fragmentation at scale
UUID v7 is time-prefixed → sequential inserts → cleaner indexes, faster writes
Use v7 for database primary keys, v4 for tokens and IDs that shouldn't be guessable
Native browser generation with crypto.getRandomValues() is already cryptographically secure — no library needed for v4; use the uuid package for v7 until runtimes catch up

Abu Sufyan is a full-stack developer and builder of WebToolkit Pro — a free, privacy-first collection of 150+ client-side developer utilities.

A few weeks ago I started building WTKPro.

Abu Sufyan — Thu, 18 Jun 2026 11:00:00 +0000

The goal wasn't to create another collection of generic tools.

The goal was to build practical browser-based utilities that solve real problems for developers, students, and professionals.

Current tools include:
• JWT Decoder
• JSON Formatter
• Regex Tester
• Image Resizer
• SLA Breach Calculator
• Unit Converter

Every tool is built with speed, simplicity, and privacy in mind.

Explore:
https://wtkpro.site/

I'd love to hear which tools you'd like to see next.

Simple tools save time.

Abu Sufyan — Wed, 17 Jun 2026 11:00:00 +0000

I built a Unit Converter that helps convert measurements quickly without ads, popups, or unnecessary complexity.

Useful for:
• Students
• Engineers
• Developers
• Everyday calculations

Try it:
https://wtkpro.site/tools/unit-converter/

What conversions do you use most often?

Managing support teams often means tracking SLA performance.

Abu Sufyan — Tue, 16 Jun 2026 11:00:00 +0000

I built an SLA Breach Calculator that helps teams calculate compliance rates, breach percentages, and service performance metrics.

Useful for:
• IT Support
• Customer Support
• Service Desk Teams
• Managed Service Providers

Tool:
https://wtkpro.site/tools/sla-breach-calculator/

I'd appreciate feedback from anyone working in support operations.

JavaScript Regex Multiline Guide 2026 — Fix Matching Errors Fast

Abu Sufyan — Tue, 16 Jun 2026 07:27:11 +0000

description: "Fix JavaScript regex multiline matching errors in 3 steps. Covers the m flag, s flag (dotAll), and cross-platform line breaks (\r\n). Tested on Node 20."
category: "Engineering"
tags: ["JavaScript", "Regex", "Programming", "Web Development"]
keywords: ["javascript regex multiline guide 2026", "regex multiline match", "javascript dotall flag", "regex m flag", "match across multiple lines javascript"]
readTime: '6 min read'
tldr: "To match text across multiple lines in JavaScript, you must understand the difference between the m (multiline) flag, which modifies how ^ and $ work, and the s (dotAll) flag, which allows the . character to match newline characters. Using [\\s\\S] is the legacy fallback."
author: "Abu Sufyan"
image: "/blog/regex-multiline-guide.jpg"
imageAlt: "JavaScript Regex Multiline matching code example"
expertTips:

"Use the s (dotAll) flag instead of the legacy [\\s\\S] hack for better readability and performance in modern V8 engines."
"Always account for Windows (\\r\\n) and Unix (\\n) line endings by using \\r?\\n when explicitly matching line breaks." faqs:
q: "What does the m flag do in JavaScript regex?" a: "The m (multiline) flag changes the behavior of the ^ and $ anchors. Instead of matching only the absolute start and end of the entire string, they will match the start and end of each individual line within the string."
q: "How do I match a dot across multiple lines in JavaScript?" a: "Use the s (dotAll) flag. For example, /foo.*bar/s. This allows the dot . character to match newline characters (\\n), which it normally ignores."
q: "Is the s flag supported in all browsers?" a: "Yes, the s (dotAll) flag is fully supported in all modern browsers (Chrome 68+, Firefox 78+, Safari 11.1+) and Node.js v9+ as of 2026."
q: "How do I replace all newlines in a string using regex?" a: "You can use the global flag with the newline characters: text.replace(/\\r?\\n/g, ' '). This replaces all line breaks with a single space." steps:
name: "Understand the m flag" text: "Learn how the m flag modifies anchor behavior."
name: "Understand the s flag" text: "Learn how the s flag enables dotAll matching."
name: "Combine flags safely" text: "Use m and s flags together for complex multiline extraction." type: "blog" ---

JavaScript Regex Multiline Guide 2026 — Fix Matching Errors Fast

A missing regex flag caused our markdown parser to silently drop half of our documentation pages during a migration. Here is the exact fix — and why multiline matching in JavaScript is so commonly misunderstood.

I've been using JavaScript regular expressions for over 8 years, and multiline string parsing remains one of the most frequent causes of silent bugs in data extraction pipelines.

JavaScript regex multiline matching is the process of finding patterns that span across multiple lines of text, or anchoring patterns to the start/end of individual lines within a larger string. It works by utilizing two specific flags: m (multiline) and s (dotAll). In 2026, the standard approach is to use the s flag rather than legacy whitespace hacks.

TL;DR: The fix is using the correct flag for your goal. To make ^ and $ match per line, add the m flag. To make . match across newlines, add the s flag. Example: /pattern/ms.

What Is Multiline Regex Matching?

JavaScript regex multiline matching allows your pattern to correctly process strings containing newline characters (\n or \r\n). By default, JavaScript regex engines treat a string as one single continuous block, where . stops at a newline, and ^/$ only match the absolute beginning and end of the file. If you are new to V8 engine execution rules, read our JS Regex Cheat Sheet for a full primer.

When you parse CSV files, markdown documents, or raw HTTP responses, you are dealing with multiline strings. If you don't explicitly tell the V8 regex engine how to handle those newlines, your data extraction will fail.

Why Multiline Regex Matters / The Problem It Solves

Imagine you are writing a script to extract all <h2> tags from an HTML document. You write a regex like /<h2[^>]*>.*<\/h2>/g. It works perfectly in your unit tests.

But in production, a user formats their HTML with a line break inside the <h2> tag:

<h2 class="title"
>My Header</h2>

Suddenly, your regex completely misses this header. Your table of contents generates incorrectly, and users complain about missing sections. This happens because the . character in JavaScript regex does not match newline characters by default.

How to Match Across Multiple Lines — Step by Step

To fix multiline parsing errors, you need to apply the correct flags. As covered in our performance optimization guide, choosing the right flags avoids unnecessary string traversal overhead.

Prerequisites

Node.js v20+ or any modern browser
A basic understanding of regex syntax

Step 1 — Use the `m` (multiline) flag for Anchors

If you want to extract the first word of every line, you need the ^ anchor to trigger at the start of each line, not just the start of the string.

const text = `apple is red
banana is yellow
cherry is red`;

// Without 'm' flag: Only matches "apple"
const noFlag = text.match(/^\w+/g); 

// With 'm' flag: Matches "apple", "banana", "cherry"
const withMFlag = text.match(/^\w+/gm); // ← add this line

Expected output with the m flag: ['apple', 'banana', 'cherry'].

Step 2 — Use the `s` (dotAll) flag for Spanning Lines

If you want to capture everything between two delimiters, even if there are newlines between them, use the s flag.

const html = `<div class="content">
  <p>Hello World</p>
</div>`;

// Fails because '.' stops at the first newline
const failMatch = html.match(/<div class="content">.*<\/div>/);

// Succeeds because 's' makes '.' match newlines
const successMatch = html.match(/<div class="content">.*<\/div>/s); // ← add this line

The s flag is the modern 2026 standard for spanning lines.

Step 3 — The Legacy Fallback (`[\s\S]`)

If you are maintaining a legacy codebase (older than ES2018 / Node.js 9) where the s flag is not supported, you must use the [\s\S] character class hack.

// Matches any whitespace OR any non-whitespace (effectively matching everything including newlines)
const legacyMatch = html.match(/<div class="content">[\s\S]*?<\/div>/);

Success confirmed. However, migrate to the s flag when possible for cleaner syntax.

Common Multiline Regex Errors and How to Fix Them

Error 1 — Missing matches on Windows line endings

Cause: Windows uses \r\n for newlines, while Unix/Linux uses \n. If your regex explicitly looks for \n, it will fail on Windows files.
Fix: Use \r?\n to make the carriage return optional.

const extractLines = text.split(/\r?\n/);

Error 2 — Greedy matching consuming the whole file

Cause: When using the s flag with a greedy .*, the engine will consume the entire document up to the last matching closing tag, rather than stopping at the first one.
Fix: Make the quantifier lazy by adding ?.

// BAD: Consumes from the first <div> to the very last </div> in the file
const greedy = /<div>.*<\/div>/s;

// GOOD: Stops at the first closing </div>
const lazy = /<div>.*?<\/div>/s;

Multiline Regex Best Practices in 2026

Always prefer the s flag over [\s\S]. It clearly communicates your intent to other developers.
Use trim() before applying line-start anchors. Invisible leading whitespace will cause ^ anchors to fail if you aren't careful.
Don't use Regex for complex HTML parsing. If you are parsing nested, deeply multiline HTML, use a proper DOM parser like cheerio or JSDOM. Regex cannot accurately parse nested recursive structures.

`s` Flag vs `[\s\S]` Hack

Feature	`s` Flag (dotAll)	`[\s\S]` Hack	Winner
Performance	Fast	Fast	Tie
Readability	Excellent	Poor	`s` Flag
Compatibility	ES2018+	Universal	`[\s\S]` Hack
Intent	Explicit	Implicit	`s` Flag
Best for	Modern 2026 Stacks	Legacy IE11/Node 8 Code	`s` Flag

The clear winner for any modern development environment is the s flag.

My Experience Using Multiline Regex — Honest Verdict

What I liked:

The addition of the s (dotAll) flag in ES2018 finally fixed the most annoying quirk of JavaScript regex. It makes payload extraction significantly cleaner.
The m flag is incredibly reliable for parsing .env files or CSV line items locally without needing a heavy parser library.

What frustrated me:

The fact that ^ and $ don't default to per-line matching still trips up junior developers.
Debugging multiline regex failures in production logs is painful because standard log aggregators often strip or mangle newline characters, making it impossible to reproduce the exact string state.

Who I'd recommend it for:

Developers building lightweight markdown parsers, log analyzers, or scraping scripts.

Who should look elsewhere:

Teams trying to parse complex, user-generated HTML. Use a dedicated HTML parser instead.

Frequently Asked Questions

Q: What does the m flag do in JavaScript regex?
A: The m (multiline) flag changes the behavior of the ^ and $ anchors. Instead of matching only the absolute start and end of the entire string, they will match the start and end of each individual line within the string.

Q: How do I match a dot across multiple lines in JavaScript?
A: Use the s (dotAll) flag. For example, /foo.*bar/s. This allows the dot . character to match newline characters (\n), which it normally ignores.

Q: Is the s flag supported in all browsers?
A: Yes, the s (dotAll) flag is fully supported in all modern browsers (Chrome 68+, Firefox 78+, Safari 11.1+) and Node.js v9+ as of 2026.

Q: How do I replace all newlines in a string using regex?
A: You can use the global flag with the newline characters: text.replace(/\r?\n/g, ' '). This replaces all line breaks with a single space.

Try our free RegEx Tester & AI Explainer to validate your multiline patterns instantly →

Abu Sufyan · Full-stack developer · Founder of WebToolkit Pro
LinkedIn

Last updated: 2026-06-16

I spent too much time debugging regular expressions.

Abu Sufyan — Mon, 15 Jun 2026 11:00:00 +0000

That's why I built a Regex Tester that highlights matches in real time and makes testing patterns much easier.

Features:
• Instant matching
• Pattern testing
• Visual feedback
• No installation required

Try it:
https://wtkpro.site/tools/regex-tester/

Regex experts: what features do you look for in a testing tool?

Working with APIs usually means dealing with messy JSON.

Abu Sufyan — Sun, 14 Jun 2026 11:00:00 +0000

To make debugging easier, I built a JSON Formatter & Validator that instantly formats and validates JSON data.

Features:
✓ Pretty-print JSON
✓ Error detection
✓ Fast validation
✓ Browser-based processing

Tool:
https://wtkpro.site/tools/json-formatter/

What JSON features would you like to see added?

Stop pasting JWTs into random websites.

Abu Sufyan — Sat, 13 Jun 2026 07:50:00 +0000

While debugging authentication issues, I realized many developers upload sensitive JWT tokens to third-party tools without thinking twice.

So I built a browser-based JWT Decoder that processes tokens locally and helps inspect headers, payloads, and expiration dates quickly.

Features:
✅ Instant decoding
✅ No account required
✅ Clean interface
✅ Works directly in your browser

Try it here:
https://wtkpro.site/tools/jwt-decoder/

I'd love feedback from fellow developers.

Free Online Tool to Resize Images Without Upload Limits

Abu Sufyan — Sat, 13 Jun 2026 06:45:51 +0000

If you need a quick way to resize images for websites, social media, or documents, I recently built an online tool resize image utility that works directly in your browser.

Features:

Resize by pixels or percentage
Fast processing
No software installation
Works on desktop and mobile

Try it here:
https://wtkpro.site/tools/image-resizer/

Feedback is welcome!

Cron Expression Guide — Examples & Generator 2026

Abu Sufyan — Mon, 08 Jun 2026 07:30:00 +0000

✓ Last tested: June 2026 · Verified against standard Vixie Cron implementation

1. Field Notes: The Timezone Trap

Early in my career, I deployed a database backup script using a cron job set to 0 2 * * * (2:00 AM daily). I wanted the backup to happen during the lowest traffic window for our US-based users.

A week later, the database crashed at 9:00 PM EST due to IO exhaustion. Why? The AWS EC2 instance was running in UTC. 2:00 AM UTC is 9:00 PM EST—smack in the middle of prime time.

The lesson? A cron expression is just a string of characters. It has no concept of geography. You must always align your cron schedules to the server's local timezone configuration, which in 2026 should always be UTC.

2. Cron Expression Syntax — The 5 Fields Explained

A standard cron expression consists of five fields separated by spaces. (Some systems, like AWS CloudWatch or Quartz, use 6 fields to include seconds or years, but standard Linux cron uses 5).

* * * * *
│ │ │ │ │
│ │ │ │ └── Day of the week (0 - 7) (0 and 7 are both Sunday)
│ │ │ └──── Month (1 - 12)
│ │ └────── Day of the month (1 - 31)
│ └──────── Hour (0 - 23)
└────────── Minute (0 - 59)

Special Characters

* (Asterisk): Matches all values. (e.g., * in the hour field means "every hour").
, (Comma): Separates items in a list. (e.g., 1,15 in the minute field means "at minute 1 and 15").
- (Hyphen): Defines a range. (e.g., 9-17 in the hour field means "between 9 AM and 5 PM").
/ (Slash): Specifies increments. (e.g., */10 in the minute field means "every 10 minutes").

3. 20 Ready-to-Use Cron Expression Examples

Stop guessing. Here are the most common schedules you will actually use in production.

High Frequency

Every minute: * * * * *
Every 5 minutes: */5 * * * *
Every 15 minutes: */15 * * * *
Every 30 minutes: */30 * * * *

Hourly Schedules

Every hour, on the hour: 0 * * * *
Every 2 hours: 0 */2 * * *
At minute 15 past every hour: 15 * * * *

Daily Schedules

Midnight every day: 0 0 * * *
Every day at 2:30 AM: 30 2 * * *
Every day at 8:00 AM and 8:00 PM: 0 8,20 * * *

Weekly Schedules

Every Sunday at midnight: 0 0 * * 0
Every Monday at 9:00 AM: 0 9 * * 1
Monday through Friday at 5:00 PM (Business close): 0 17 * * 1-5
Weekends only, at noon: 0 12 * * 0,6

Monthly / Yearly Schedules

First day of every month at midnight: 0 0 1 * *
15th of every month at 3:00 AM: 0 3 15 * *
January 1st at midnight (Happy New Year): 0 0 1 1 *

4. Cron in Kubernetes — What's Different?

If you are writing a Kubernetes CronJob manifest, the syntax is identical to standard Linux cron. However, Kubernetes adds a crucial behavior parameter: concurrencyPolicy.

If your job takes 10 minutes to run, but your cron is scheduled every 5 minutes (*/5 * * * *), Kubernetes will overlap the pods. You must set concurrencyPolicy: Forbid in your YAML if your script cannot handle concurrent executions safely.

5. Common Cron Expression Mistakes

The Day/Date OR Trap: If you write 0 0 1 * 1, you might think this means "Run at midnight on the first of the month, BUT ONLY if it's a Monday." Wrong. It means "Run on the first of the month, OR if it is a Monday."
Using Seconds: Writing 0 * * * * * (6 fields) will crash standard crontab, as it expects 5 fields.
Environment Variables: Scripts run by cron execute in a highly restricted shell. Your ~/.bashrc is not loaded. Always use absolute paths to node/python binaries inside your scripts.

Need to translate a complex schedule into cron syntax? Use our free Cron Expression Generator to build and validate your schedule instantly →

External Sources

Abu Sufyan · Full-stack developer · Founder of WebToolkit Pro
Github

Last updated: June 2026

Originally published on WebToolkit Pro. Explore our suite of 145+ free, privacy-first developer utilities at wtkpro.site.

Canonical URL SEO Guide — Fix Duplicate Content 2026

Abu Sufyan — Sun, 07 Jun 2026 07:28:27 +0000

✓ Last tested: June 2026 · Verified against Google Search Central Guidelines

1. Field Notes: The E-Commerce Parameter Nightmare

I once audited an e-commerce site that was struggling to rank for "leather boots." When I checked Google Search Console, I saw that Google had indexed 45 different versions of their leather boots category page.

Why? Because their filtering system appended parameters to the URL: ?sort=price_asc, ?color=brown, ?size=10. Because there were no canonical tags, Googlebot treated every filter combination as a unique page, diluting the ranking power (link equity) across 45 identical pages.

We deployed absolute, self-referencing canonical tags on the clean URL, and pointed all parameter variations back to that clean URL. Within a month, the consolidated link equity pushed the main category page to page 1.

2. What Is a Canonical URL and Why Does It Matter?

A canonical URL is an HTML link tag with the attribute rel="canonical". It tells search engines: "I know there are multiple ways to access this content, but THIS is the official version I want you to index and rank."

It prevents duplicate content issues. Google hates duplicate content because it forces them to waste crawl budget and makes it difficult to decide which page to rank.

3. Common Duplicate Content Problems That Need Canonicals

Even if you don't deliberately create duplicate content, your server might do it automatically.

Issue	Variant A	Variant B (Duplicate)
WWW vs Non-WWW	`https://example.com`	`https://www.example.com`
HTTP vs HTTPS	`https://example.com`	`http://example.com`
Trailing Slash	`https://example.com/blog`	`https://example.com/blog/`
Tracking Parameters	`https://example.com/sale`	`https://example.com/sale?utm_source=twitter`
Capitalization	`https://example.com/Products`	`https://example.com/products`

A self-referencing canonical tag fixes almost all of these (though server-level 301 redirects are preferred for HTTP/HTTPS and WWW issues).

4. How to Add a Canonical Tag

The canonical tag must be placed in the <head> section of your HTML document.


<link rel="canonical" href="https://example.com/leather-boots/" />



<link rel="canonical" href="https://example.com/leather-boots/" />

Implementing in Next.js (App Router)

Next.js makes this easy with the Metadata API:

export const metadata: Metadata = {
  alternates: {
    canonical: 'https://example.com/leather-boots/',
  },
}

5. Canonical Tag Mistakes That Confuse Google

Google treats the canonical tag as a hint, not an absolute directive. If you implement it poorly, Google will ignore it.

Relative URLs: Always use absolute URLs. href="https://wtkpro.site/" is wrong. href="https://site.com/about" is correct.
Multiple Canonicals: Having two canonical tags on one page (often caused by a CMS plugin conflict) will cause Google to ignore both.
Canonicalizing to a 404/301: The canonical URL must return a 200 OK status.
Canonical + Noindex Conflict: Do not put a <meta name="robots" content="noindex"> on a page and then add a canonical tag pointing to another page. Choose one.

6. Cross-Domain Canonicalization

If you write an article on your blog and syndicate it to Medium, Substack, or Dev.to, you risk those platforms outranking your own website.

To fix this, you must set a cross-domain canonical. When publishing on Medium, use their advanced settings to set the canonical URL to point back to your original blog post. This tells Google to give the ranking credit to your original site.

Need to check if your pages are properly canonicalized? Use our free Canonical URL Checker to audit your headers and meta tags instantly →

External Sources

Abu Sufyan · Full-stack developer · Founder of WebToolkit Pro
Github

Last updated: June 2026

Originally published on WebToolkit Pro. Explore our suite of 145+ free, privacy-first developer utilities at wtkpro.site.

Stop Pasting JWTs Into Random Websites. Here's What I Built Instead.

Abu Sufyan — Tue, 02 Jun 2026 06:33:44 +0000

By Abu Sufyan · Lead Systems Architect, WebToolkit Pro

Every week, thousands of developers do something they know they shouldn't.

They open a new browser tab, navigate to some third-party JWT decoder, and paste a live production token directly into it.

That token probably contains a user ID. Maybe a role claim. Maybe an internal service identifier that maps to something sensitive in your infrastructure. And it just left your browser.

I know, because I used to do it too.

The Incident That Made Me Stop

In late 2024, I was debugging an auth issue on a client's Node.js API — a financial services platform. Standard stuff: the access token wasn't refreshing correctly and I needed to inspect the payload quickly to verify the exp claim.

I instinctively opened a well-known JWT decoder site and pasted the token.

Then I stopped.

I was working in a production environment. That token belonged to a real user — a client of theirs. It contained a sub (subject) claim with a UUID that mapped directly to their user database. It contained an iat and exp. And most critically, it contained a roles claim: ["admin", "finance_read"].

I had just sent a production admin token to a third-party server I knew nothing about.

The site claimed it was "client-side only." But I couldn't verify that. There was no open-source repo I could inspect. No audit trail. No CSP headers I could check. Just a text box and a promise.

That afternoon, I filed an internal incident report and started building a replacement.

What Makes a JWT Decoder Dangerous

Before I get to what I built, it's worth understanding exactly why this matters technically — not just philosophically.

A JWT has three parts: header, payload, and signature. The first two are just Base64url-encoded JSON. Decoding them requires zero network traffic. It's pure string manipulation you can do in two lines of JavaScript:

const [header, payload] = token.split('.');
const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));

That's it. There is no cryptographic reason a JWT decoder needs to contact any server whatsoever.

And yet, when you paste a token into most online decoders, your token travels over the network to a server. That server may or may not be logging requests. It may be behind a CDN that caches POST bodies. It may be owned by a company whose threat model you have no visibility into.

The attack surface is real:

Session hijacking if the token is still valid and the attacker can replay it against your API
Claim exposure — user IDs, email addresses, role names, tenant identifiers
Infrastructure mapping — the iss (issuer) claim often reveals internal service URLs or identity provider endpoints
Algorithm fingerprinting — the alg header tells an attacker exactly what signing algorithm you're using, useful for crafting exploit attempts

The Architecture: Zero-Knowledge Client-Side Decoding

What I built — the Offline JWT Decoder at WebToolkit Pro — operates on a simple constraint: nothing ever leaves the browser tab.

Here's the actual execution model:

User pastes token → Browser JS splits on '.'
                  → atob() decodes header + payload
                  → JSON.parse() reconstructs the object
                  → Rendered directly into DOM

No fetch(). No XMLHttpRequest(). No WebSocket. No Service Worker relay.

To verify this yourself: open DevTools → Network tab → paste a token → watch. Zero outbound requests. The network panel stays empty.

The implementation uses the Web Crypto API for signature verification — which also runs entirely in the browser sandbox. There are no API keys, no backend, no telemetry. The Content Security Policy on the page blocks outbound requests at the browser level, so even if a malicious script injection somehow occurred, it couldn't exfiltrate the token.

Beyond Decoding: The Signature Verification Problem

Most online JWT decoders only decode. They don't verify.

Decoding tells you what's inside the token. Verification tells you whether to trust it.

The difference matters enormously in debugging scenarios. If you're diagnosing an auth failure, you need to know:

Is the token malformed? (decoding fails)
Is it expired? (check exp vs current timestamp)
Is the signature valid against the expected public key? (actual cryptographic verification)

Point 3 is where most tools fall apart. They skip it entirely, leaving you with no way to confirm whether the token was legitimately issued or tampered with.

The JWT Debugger & Inspector I built handles all three. You can paste your JWKS (JSON Web Key Set) endpoint URL or paste the raw public key directly, and the tool performs RS256/ES256 signature verification locally using window.crypto.subtle.verify() — the same Web Crypto primitive your browser uses for HTTPS.

// What's happening under the hood
const key = await crypto.subtle.importKey(
  'jwk',
  jwkPublicKey,
  { name: 'RSASSA-PKCS1-v1_5', hash: 'SHA-256' },
  false,
  ['verify']
);

const isValid = await crypto.subtle.verify(
  'RSASSA-PKCS1-v1_5',
  key,
  signature,
  data
);

No server. No SDK. Pure browser cryptography.

The `alg: none` Attack — Why Your Decoder Needs to Flag This

While building this, I added one feature that I think every JWT tool should have: automatic detection of the alg: none exploit vector.

Here's the attack. Some JWT libraries — particularly older versions — accept tokens where the algorithm is set to none and the signature is empty. An attacker who knows this can forge a token with any payload they want:

// Header
{
  "alg": "none",
  "typ": "JWT"
}
// Payload
{
  "sub": "1234567890",
  "roles": ["admin"],
  "iat": 1516239022
}
// Signature: empty string

This gets concatenated as base64(header).base64(payload). — note the trailing dot with no signature.

The decoder flags this immediately with a warning: ⚠ Algorithm "none" detected. This token carries no cryptographic integrity guarantee. Reject in production.

It's a small thing, but it's the kind of context-aware output you only get from a tool built by someone who actually works with these tokens in production.

What I Learned Building Privacy-First Tools

This JWT decoder is one of 150+ tools I've built at WebToolkit Pro. Every single one follows the same constraint: your data never leaves your browser.

Password generator. Hash generator. Base64 encoder. Regex tester. JSON formatter. AES encryption tool. All of them execute entirely client-side.

Building this way taught me a few things:

WebAssembly changed what's possible. Operations that used to require a server — like Argon2 password hashing, which is deliberately memory-intensive — can now run in the browser via WASM. The Argon2 Hasher generates production-grade password hashes locally in under a second.

Web Workers are underused. For tools that process large inputs (the JSON formatter handles payloads up to 50MB), moving the parsing off the main thread via Web Workers keeps the UI responsive. No spinners, no freezes.

The hardest part isn't the crypto — it's the UX. Security tools have a reputation for being hostile to use. I spent more time on the output formatting and error messaging than on the underlying algorithms. A tool that correctly identifies an exp claim mismatch but displays it as a raw timestamp integer has failed its user.

Try It Yourself

If you're debugging JWTs today, open DevTools first. Network tab, record. Then go to wtkpro.site/tools/jwt-decoder and paste your token.

Watch the network panel stay silent.

That silence is the feature.

DEV Community: Abu Sufyan

Stop using UUID v4 as your database primary key (and what to use instead)

What's actually happening inside your database

UUID v7 fixes this

When to use v4 vs v7

Generating them in code

Need to generate a batch right now?

TL;DR

A few weeks ago I started building WTKPro.

Simple tools save time.

Managing support teams often means tracking SLA performance.

JavaScript Regex Multiline Guide 2026 — Fix Matching Errors Fast

JavaScript Regex Multiline Guide 2026 — Fix Matching Errors Fast

What Is Multiline Regex Matching?

Why Multiline Regex Matters / The Problem It Solves

How to Match Across Multiple Lines — Step by Step

Prerequisites

Step 1 — Use the m (multiline) flag for Anchors

Step 2 — Use the s (dotAll) flag for Spanning Lines

Step 3 — The Legacy Fallback ([\s\S])

Common Multiline Regex Errors and How to Fix Them

Error 1 — Missing matches on Windows line endings

Error 2 — Greedy matching consuming the whole file

Multiline Regex Best Practices in 2026

s Flag vs [\s\S] Hack

My Experience Using Multiline Regex — Honest Verdict

Frequently Asked Questions

I spent too much time debugging regular expressions.

Working with APIs usually means dealing with messy JSON.

Stop pasting JWTs into random websites.

Free Online Tool to Resize Images Without Upload Limits

Cron Expression Guide — Examples & Generator 2026

1. Field Notes: The Timezone Trap

2. Cron Expression Syntax — The 5 Fields Explained

Special Characters

3. 20 Ready-to-Use Cron Expression Examples

High Frequency

Hourly Schedules

Daily Schedules

Weekly Schedules

Monthly / Yearly Schedules

4. Cron in Kubernetes — What's Different?

5. Common Cron Expression Mistakes

External Sources

Canonical URL SEO Guide — Fix Duplicate Content 2026

1. Field Notes: The E-Commerce Parameter Nightmare

2. What Is a Canonical URL and Why Does It Matter?

3. Common Duplicate Content Problems That Need Canonicals

4. How to Add a Canonical Tag

Implementing in Next.js (App Router)

5. Canonical Tag Mistakes That Confuse Google

6. Cross-Domain Canonicalization

External Sources

Stop Pasting JWTs Into Random Websites. Here's What I Built Instead.

The Incident That Made Me Stop

What Makes a JWT Decoder Dangerous

The Architecture: Zero-Knowledge Client-Side Decoding

Beyond Decoding: The Signature Verification Problem

The alg: none Attack — Why Your Decoder Needs to Flag This

What I Learned Building Privacy-First Tools

Try It Yourself

Links

Step 1 — Use the `m` (multiline) flag for Anchors

Step 2 — Use the `s` (dotAll) flag for Spanning Lines

Step 3 — The Legacy Fallback (`[\s\S]`)

`s` Flag vs `[\s\S]` Hack

The `alg: none` Attack — Why Your Decoder Needs to Flag This