[EXPERIMENTS]

DEV TOOL SUITE — BROWSER-SIDE UTILITIES

// BOOT REPORT

01ONLINEJSON FORMATTEROPEN →

02ONLINEREGEX TESTEROPEN →

03ONLINECOLOUR CONVERTEROPEN →

04ONLINEEDGE LATENCY PROBEOPEN →

05ONLINEBASE64 & URL ENCODEROPEN →

06ONLINEJAVASCRIPT PLAYGROUNDOPEN →

[01]

Dev Tools

A high-performance suite of practical web-development utilities engineered for daily developer workflows — formatting JSON, testing regex, converting colours, and benchmarking edge latency. Everything executes locally in your browser with zero latency and zero server-side telemetry.

▸ RUNS LOCALLY·▸ NO DATA SENT·▸ COPY-READY OUTPUT

[02]

JSON Formatter

MODULE // JSON_LAB

JSON Formatter

Pretty-print, minify or validate JSON with clear line and column errors.

Input JSON

Output

// format · minify · validate — all processing happens locally

[03]

Regex Tester

MODULE // REGEX_LAB

Regex Tester

Build and debug regular expressions with live match highlighting.

Pattern

Flags

Test string

Matches

—

0 matches

[04]

Colour Converter

MODULE // COLOUR_LAB

Colour Converter

Convert between HEX, rgb() and hsl(), with a live swatch preview.

Colour

Preview

Values

HEX#00FFCC

RGBrgb(0, 255, 204)

HSLhsl(168, 100%, 50%)

ALPHA1

parsed ✓ — accepts #hex, rgb() and hsl()

[05]

Edge Latency Probe

MODULE // EDGE_LAB

Edge Latency Probe

Benchmark real-time edge response latency, TTFB, and network jitter from your location.

CLOUDFLARE EDGE LATENCY PROBE

GLOBAL POP BENCHMARK & ROUND-TRIP TTFB ANALYSIS

MIN LATENCY0 ms

AVG LATENCY0 ms

P90 LATENCY0 ms

MAX LATENCY0 ms

NETWORK JITTER0 ms

PROBE EXECUTIONMEASURED ROUND-TRIP

▸ Click 'RUN 5-POINT PROBE' to measure live edge latency from your location.

[06]

Base64 & URL Converter

MODULE // BASE64_LAB

Base64 & URL Converter

UTF-8 compliant Base64 and URL encoding/decoding utilities.

Input text or Base64 / URL string

Output

// UTF-8 safe Base64 and URL encoding/decoding — runs locally

[07]

JavaScript Playground

MODULE // JS_LAB

JavaScript Playground

Browser-side JavaScript execution environment with live console capture, async/await, and return value inspection.

JavaScript Code

// Data Aggregation & Grouping
const orders = [
  { id: 'ORD-101', customer: 'Alice', category: 'Hardware', total: 249.99, status: 'completed' },
  { id: 'ORD-102', customer: 'Bob', category: 'Software', total: 89.00, status: 'completed' },
  { id: 'ORD-103', customer: 'Charlie', category: 'Hardware', total: 45.50, status: 'refunded' },
  { id: 'ORD-104', customer: 'Diana', category: 'Cloud', total: 320.00, status: 'completed' },
  { id: 'ORD-105', customer: 'Evan', category: 'Software', total: 115.00, status: 'completed' },
  { id: 'ORD-106', customer: 'Fiona', category: 'Cloud', total: 180.00, status: 'pending' }
];

console.log(`Processing ${orders.length} orders...`);

const completed = orders.filter(o => o.status === 'completed');
const totalRevenue = completed.reduce((sum, o) => sum + o.total, 0);

// Group completed revenue by category
const byCategory = completed.reduce((acc, o) => {
  acc[o.category] = Number(((acc[o.category] || 0) + o.total).toFixed(2));
  return acc;
}, {});

console.log('Revenue by category:', byCategory);

({
  processedCount: orders.length,
  completedCount: completed.length,
  totalRevenue: `$${totalRevenue.toFixed(2)}`,
  averageOrderValue: `$${(totalRevenue / completed.length).toFixed(2)}`,
  byCategory
});

// Data Aggregation & Grouping
const orders = [
  { id: 'ORD-101', customer: 'Alice', category: 'Hardware', total: 249.99, status: 'completed' },
  { id: 'ORD-102', customer: 'Bob', category: 'Software', total: 89.00, status: 'completed' },
  { id: 'ORD-103', customer: 'Charlie', category: 'Hardware', total: 45.50, status: 'refunded' },
  { id: 'ORD-104', customer: 'Diana', category: 'Cloud', total: 320.00, status: 'completed' },
  { id: 'ORD-105', customer: 'Evan', category: 'Software', total: 115.00, status: 'completed' },
  { id: 'ORD-106', customer: 'Fiona', category: 'Cloud', total: 180.00, status: 'pending' }
];

console.log(`Processing ${orders.length} orders...`);

const completed = orders.filter(o => o.status === 'completed');
const totalRevenue = completed.reduce((sum, o) => sum + o.total, 0);

// Group completed revenue by category
const byCategory = completed.reduce((acc, o) => {
  acc[o.category] = Number(((acc[o.category] || 0) + o.total).toFixed(2));
  return acc;
}, {});

console.log('Revenue by category:', byCategory);

({
  processedCount: orders.length,
  completedCount: completed.length,
  totalRevenue: `$${totalRevenue.toFixed(2)}`,
  averageOrderValue: `$${(totalRevenue / completed.length).toFixed(2)}`,
  byCategory
});

Output

// executes locally in browser · async/await, console.* & expressions · Ctrl+Enter to run