import React, { useState, useEffect, useRef } from "react"; const ACCENT = "#60a5fa"; const BG = "#0b0e14"; const PANEL = "#131721"; const BORDER = "#2a3040"; const INK = "#e6e9f0"; const MUTED = "#8b93a7"; const RED = "#f87171"; const TIMEOUT_MS = 5000; const MAX_SAMPLES = 30; const PRESETS = [ { id: "cf", label: "Cloudflare", url: "https://cloudflare.com/cdn-cgi/trace", hue: "#f6821f" }, { id: "google", label: "Google", url: "https://www.gstatic.com/generate_204", hue: "#4285f4" }, { id: "esm", label: "esm.sh", url: "https://esm.sh/", hue: "#22c55e" }, { id: "vibes", label: "vibes.diy", url: "https://vibes.diy/", hue: "#a78bfa" }, ]; function useFonts() { useEffect(() => { if (document.getElementById("web-utils-fonts")) return; const pre1 = document.createElement("link"); pre1.rel = "preconnect"; pre1.href = "https://fonts.googleapis.com"; const pre2 = document.createElement("link"); pre2.rel = "preconnect"; pre2.href = "https://fonts.gstatic.com"; pre2.crossOrigin = "anonymous"; const link = document.createElement("link"); link.id = "web-utils-fonts"; link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;700&display=swap"; document.head.appendChild(pre1); document.head.appendChild(pre2); document.head.appendChild(link); }, []); } function pingOnce(url) { return new Promise((resolve) => { const t0 = performance.now(); const ctrl = new AbortController(); const timer = setTimeout(() => ctrl.abort(), TIMEOUT_MS); fetch(url, { mode: "no-cors", cache: "no-store", signal: ctrl.signal }) .then(() => { clearTimeout(timer); resolve(performance.now() - t0); }) .catch(() => { clearTimeout(timer); resolve(null); // loss / timeout }); }); } function Sparkline({ samples, hue }) { const W = 160; const H = 34; const n = MAX_SAMPLES; const data = samples.slice(-n); const vals = data.filter((s) => s != null); const max = Math.max(60, ...vals); const bw = W / n; return ( ); } function stats(samples) { const vals = samples.filter((s) => s != null); const loss = samples.filter((s) => s == null).length; if (!vals.length) return { min: null, avg: null, max: null, last: null, loss }; const last = samples[samples.length - 1]; return { min: Math.min(...vals), max: Math.max(...vals), avg: vals.reduce((a, b) => a + b, 0) / vals.length, last: last == null ? null : last, loss, }; } function fmt(n) { if (n == null || Number.isNaN(n)) return "--"; return Math.round(n); } function seedSamples(seed) { // decorative placeholder so the idle screenshot looks alive const out = []; let v = 30 + seed * 12; for (let i = 0; i < MAX_SAMPLES; i++) { v += Math.sin(i / 2 + seed) * 8 + (Math.random() - 0.5) * 10; v = Math.max(8, Math.min(120, v)); out.push(i === 22 - seed * 3 ? null : v); } return out; } function Row({ target, data, idle }) { const s = stats(data); return (

{target.label}

{target.url.replace(/^https?:\/\//, "")}

0} />

); } function Stat({ label, v, accent }) { return (

{v}

{label}

); } export default function App() { useFonts(); const [running, setRunning] = useState(false); const [customUrl, setCustomUrl] = useState(""); const [targets, setTargets] = useState(PRESETS.map((p) => ({ ...p, on: true }))); const [samples, setSamples] = useState({}); const idleSeed = useRef(PRESETS.map((_, i) => seedSamples(i + 1))); const runningRef = useRef(false); const targetsRef = useRef(targets); targetsRef.current = targets; const started = Object.keys(samples).length > 0; useEffect(() => { if (!running) return; runningRef.current = true; let cancelled = false; async function tick() { const active = targetsRef.current.filter((t) => t.on); await Promise.all( active.map(async (t) => { const rtt = await pingOnce(t.url); if (cancelled) return; setSamples((prev) => { const arr = (prev[t.id] || []).concat(rtt).slice(-MAX_SAMPLES); return { ...prev, [t.id]: arr }; }); }) ); } tick(); const iv = setInterval(tick, 1000); return () => { cancelled = true; clearInterval(iv); }; }, [running]); function toggle(id) { setTargets((ts) => ts.map((t) => (t.id === id ? { ...t, on: !t.on } : t))); } function addCustom() { let url = customUrl.trim(); if (!url) return; if (!/^https?:\/\//.test(url)) url = "https://" + url; const id = "custom-" + Date.now(); setTargets((ts) => [ ...ts, { id, label: url.replace(/^https?:\/\//, "").slice(0, 20), url, hue: ACCENT, on: true }, ]); setCustomUrl(""); } const activeTargets = targets.filter((t) => t.on); return (

WEB-UTILS

Net Ping

Live HTTP round-trip latency to popular endpoints — min, avg, max, and packet loss.

{running ? `pinging ${activeTargets.length} target${activeTargets.length === 1 ? "" : "s"} · 1/s` : "idle"}

{targets.map((t) => ( ))}

setCustomUrl(e.target.value)} onKeyDown={(e) => e.key === "Enter" && addCustom()} placeholder="add a custom URL to ping…" style={{ flex: 1, background: PANEL, border: `1px solid ${BORDER}`, borderRadius: 10, padding: "10px 14px", color: INK, fontFamily: "'IBM Plex Mono', monospace", fontSize: 13, outline: "none", }} />

{activeTargets.length === 0 && (

No targets selected — toggle one above to start pinging.

)} {activeTargets.map((t, i) => { const data = started ? samples[t.id] || [] : idleSeed.current[i % idleSeed.current.length] || seedSamples(i + 1); return ; })}

Cross-origin requests return opaque responses, so timing reflects real wall-clock round trip, not response size. Bars over {TIMEOUT_MS / 1000}s count as loss.

); }