DEV Community: Dev Nestio

I Built a Visual CSS Box Shadow Generator — Multi-Layer, Inset, Presets, 125 Tests

Dev Nestio — Sun, 28 Jun 2026 03:26:21 +0000

I Built a Visual CSS Box Shadow Generator — Multi-Layer, Inset, Presets, 125 Tests

box-shadow is one of those CSS properties where the syntax is perfectly clear yet getting the right values by hand is painful. Is the blur too soft? Does the spread look weird at this opacity? Multi-layer shadows are even worse to iterate on manually.

I built a zero-dependency browser tool to compose box shadows visually — including multi-layer stacking, inset toggling, opacity sliders, and 12 ready-made presets.

Live tool → box-shadow-generator-ias.pages.dev
All tools → devnestio.pages.dev

What the tool does

Full property control: horizontal offset (X), vertical offset (Y), blur radius, spread radius — all via sliders with -100/+100px ranges
Color + opacity: <input type="color"> for the shadow colour, separate opacity slider (0–100%) that computes the correct rgba() value
Inset toggle: one click switches between outer and inset shadow
Multi-layer shadows: add and remove layers independently; each layer has its own controls; the CSS output stacks them comma-separated
Live preview: 140×140 card updates on every slider move; choose square, rounded, or circle card shape; three preview background options (dark, light, darker)
12 presets: Soft, Sharp, Elevated (2-layer), Glow, Inset, Neumorphic (2-layer), Danger, Deep (3-layer), Flat, Ambient, Neon (2-layer), None
CSS output with one-click copy

Single index.html, no npm, no build step.

The CSS box-shadow value format

The full syntax for a single shadow layer is:

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

Multi-layer shadows are comma-separated:

box-shadow:
  0px 2px 4px -1px rgba(0,0,0,0.20),
  0px 8px 24px -4px rgba(0,0,0,0.15);

The tool outputs exactly this format, with the standard box-shadow: property.

Architecture: pure functions for testability

Same pattern I use across all my devnestio tools — extract computation into pure functions, test them without a browser.

function hexToRgba(hex, opacity) {
  const clean = hex.replace('#', '');
  const full = clean.length === 3
    ? clean.split('').map(c => c + c).join('')
    : clean;
  const r = parseInt(full.slice(0, 2), 16);
  const g = parseInt(full.slice(2, 4), 16);
  const b = parseInt(full.slice(4, 6), 16);
  const a = parseFloat((opacity / 100).toFixed(2));
  if (a >= 1) return `#${full.toLowerCase()}`;
  return `rgba(${r},${g},${b},${a})`;
}

function buildShadowString(layer) {
  const inset = layer.inset ? 'inset ' : '';
  const color = hexToRgba(layer.color, layer.opacity);
  return `${inset}${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${layer.spread}px ${color}`;
}

function buildBoxShadowCSS(layers) {
  if (layers.length === 0) return 'none';
  return layers.map(buildShadowString).join(',\n             ');
}

function buildFullCSS(layers) {
  return `box-shadow: ${buildBoxShadowCSS(layers)};`;
}

State is a plain array of layer objects. The UI reads sliders, updates the active layer, and re-runs these functions on every change.

125 tests, zero framework

✅ 125 passed, ❌ 0 failed (125 total)

Node.js assert only. The test file mirrors every pure function:

// hexToRgba
test('opacity 100 returns hex', () => {
  assert.strictEqual(hexToRgba('#000000', 100), '#000000');
});
test('opacity 50 returns rgba 0.50', () => {
  assert.strictEqual(hexToRgba('#000000', 50), 'rgba(0,0,0,0.5)');
});
test('3-char hex expanded', () => {
  assert.strictEqual(hexToRgba('#f00', 100), '#ff0000');
});

// buildShadowString
test('inset prefix present', () => {
  assert.ok(buildShadowString(defaultLayer({ inset: true })).startsWith('inset '));
});
test('negative offsetX', () => {
  assert.ok(buildShadowString(defaultLayer({ offsetX: -10 })).includes('-10px'));
});

// buildBoxShadowCSS
test('empty layers returns none', () => {
  assert.strictEqual(buildBoxShadowCSS([]), 'none');
});
test('two layers joined with comma', () => {
  assert.ok(buildBoxShadowCSS([defaultLayer(), defaultLayer()]).includes(','));
});

// buildFullCSS
test('starts with box-shadow:', () => {
  assert.ok(buildFullCSS([defaultLayer()]).startsWith('box-shadow:'));
});
test('ends with semicolon', () => {
  assert.ok(buildFullCSS([defaultLayer()]).endsWith(';'));
});

Tests also cover: clamp, validateHex, opacityToAlpha, alphaToOpacity, defaultLayer, and integration tests for every preset.

The neumorphic preset is interesting

Neumorphism needs two shadows with opposite signs — one dark, one light — to create the embossed look:

box-shadow:
  6px 6px 12px 0px rgba(0,0,0,0.15),
  -6px -6px 12px 0px rgba(255,255,255,0.70);

The tool makes this easy: add two layers, set one to positive offsets with a dark semi-transparent colour, the other to negative offsets with a near-opaque white. The live preview shows the effect immediately against the card colour you choose.

Opacity is a slider, not a hex alpha

I chose a 0–100% opacity slider rather than an 8-character hex colour (#00000040) for a simple reason: most designers think in opacity percentages, not hex fractions. The function converts internally:

const a = parseFloat((opacity / 100).toFixed(2));
// 25  → 0.25 → rgba(0,0,0,0.25)
// 100 → 1.00 → #000000  (opaque shorthand)

At 100% opacity the output falls back to a plain hex value since rgba(0,0,0,1) and #000000 are equivalent, but the shorter form is cleaner to read.

Running locally

# No install — open directly
open src/index.html

# Tests
npm test
# ✅ 125 passed, ❌ 0 failed

The tool

box-shadow-generator-ias.pages.dev — free, no login, works offline.

Part of devnestio.pages.dev — a growing set of single-file browser tools for developers.

What's your go-to shadow style — soft ambient, sharp offset, or full neumorphic? Drop it in the comments.

I Built a Visual CSS Gradient Generator in Pure Vanilla JS — Linear, Radial & Conic, 150 Tests

Dev Nestio — Sun, 28 Jun 2026 03:21:15 +0000

I Built a Visual CSS Gradient Generator in Pure Vanilla JS — Linear, Radial & Conic, 150 Tests

CSS gradients are everywhere — hero sections, buttons, card backgrounds, loaders — yet writing them by hand is genuinely tedious. linear-gradient(135deg, #6c63ff 0%, #ff6584 100%) isn't hard to type, but tweaking angles, juggling multiple color stops, and switching between gradient types gets painful fast.

I built a zero-dependency browser tool that lets you compose gradients visually and copy the ready-to-paste CSS in one click.

Live tool → css-gradient-generator-ebf.pages.dev
All tools → devnestio.pages.dev

What the tool does

Three gradient types: Linear, Radial, and Conic — switchable with a tab
Color stops: add/remove stops freely; each has a color picker (<input type="color">), an alpha (opacity) slider, and a position (%) slider
Linear: angle 0–360° slider
Radial: shape (circle / ellipse), size (farthest-corner, closest-corner, farthest-side, closest-side), and position (center, top, top left, etc.)
Conic: from-angle 0–360° and position
Real-time preview that updates on every slider move
CSS output with both standard and -webkit- prefixed declarations
12 presets: Sunset, Ocean, Forest, Purple Rain, Fire (radial), Arctic, Peach, Mint, Dusk, Candy (conic), Chrome, Aurora
Copy button — one click, clipboard ready

All in a single index.html. No npm install, no build step, no server.

Architecture: pure functions for testability

The tricky thing about testing UI tools is that the rendering logic is usually tangled with the DOM. My approach: extract every meaningful computation into a pure function that takes plain values and returns a string.

function hexToRgba(hex, alpha) {
  const clean = hex.replace('#', '');
  const full = clean.length === 3
    ? clean.split('').map(c => c + c).join('')
    : clean;
  const r = parseInt(full.slice(0, 2), 16);
  const g = parseInt(full.slice(2, 4), 16);
  const b = parseInt(full.slice(4, 6), 16);
  if (alpha >= 1) return `#${full.toLowerCase()}`;
  return `rgba(${r},${g},${b},${alpha.toFixed(2)})`;
}

function buildColorStop(stop) {
  return `${hexToRgba(stop.hex, stop.alpha)} ${stop.position}%`;
}

function buildLinearCSS(angle, stops) {
  return `linear-gradient(${angle}deg, ${stops.map(buildColorStop).join(', ')})`;
}

function buildRadialCSS(shape, size, position, stops) {
  return `radial-gradient(${shape} ${size} at ${position}, ${stops.map(buildColorStop).join(', ')})`;
}

function buildConicCSS(fromAngle, position, stops) {
  return `conic-gradient(from ${fromAngle}deg at ${position}, ${stops.map(buildColorStop).join(', ')})`;
}

function buildFullCSS(s) {
  const gradient = /* dispatch by type */;
  return `background: ${gradient};\nbackground: -webkit-${gradient};`;
}

These functions have no DOM dependencies — they're pure input → output transformations. That means the test file is just Node.js with assert, no test framework required.

150 tests, zero dependencies

✅ 150 passed, ❌ 0 failed (150 total)

The test file mirrors the pure functions and exercises them exhaustively:

// hexToRgba
test('hexToRgba: opaque 6-char returns hex', () => {
  assert.strictEqual(hexToRgba('#ff0000', 1), '#ff0000');
});
test('hexToRgba: 3-char shorthand expanded', () => {
  assert.strictEqual(hexToRgba('#f00', 1), '#ff0000');
});
test('hexToRgba: alpha 0.5 rgba correct', () => {
  assert.strictEqual(hexToRgba('#ff0000', 0.5), 'rgba(255,0,0,0.50)');
});

// buildLinearCSS
test('buildLinearCSS: angle 0', () => {
  const r = buildLinearCSS(0, [{ hex: '#ff0000', alpha: 1, position: 0 }, { hex: '#0000ff', alpha: 1, position: 100 }]);
  assert.ok(r.startsWith('linear-gradient(0deg'));
});

// buildRadialCSS
test('buildRadialCSS: position=top left', () => {
  const stops = [{ hex: '#fff', alpha: 1, position: 0 }, { hex: '#000', alpha: 1, position: 100 }];
  assert.ok(buildRadialCSS('ellipse', 'farthest-corner', 'top left', stops).includes('at top left'));
});

// buildConicCSS
test('buildConicCSS: from 180deg position bottom', () => {
  const stops = [{ hex: '#fff', alpha: 1, position: 0 }, { hex: '#000', alpha: 1, position: 100 }];
  assert.ok(buildConicCSS(180, 'bottom', stops).includes('from 180deg') && r.includes('at bottom'));
});

The tests cover:

hexToRgba: 3-char expansion, uppercase normalisation, alpha → rgba conversion, channel parsing
buildColorStop: opaque and semi-transparent, all positions
buildLinearCSS / buildRadialCSS / buildConicCSS: all variants of type, shape, size, position, angle
buildFullCSS: webkit prefix present, two-line output, type dispatch
sortStops, validateHex, clamp, alphaToPercent, percentToAlpha: utility logic
Preset-style integration tests for Sunset, Ocean, Fire, Candy

The conic gradient type is underrated

Conic gradients get overlooked but they're perfect for pie charts, colour wheels, and clock-face effects. The CSS spec is:

background: conic-gradient(from 0deg at center, #f472b6 0%, #facc15 33%, #34d399 66%, #f472b6 100%);

The tool supports all three types at the same fidelity — same stop system, same alpha control, same output format.

The `-webkit-` prefix question

I include both:

background: linear-gradient(135deg, #6c63ff 0%, #ff6584 100%);
background: -webkit-linear-gradient(135deg, #6c63ff 0%, #ff6584 100%);

For modern browsers targeting 2024+, the -webkit- prefix for gradients is unnecessary — Chrome, Safari, Firefox, and Edge all handle unprefixed gradients fine. But a lot of CSS frameworks and legacy codebases still emit the prefix, so including it avoids confusion when pasting into an older project.

Running locally

# No install needed — just open the HTML
open src/index.html

# Tests
npm test
# ✅ 150 passed, ❌ 0 failed

The tool

css-gradient-generator-ebf.pages.dev — free, no login, works offline after first load.

Part of devnestio.pages.dev — a growing collection of single-file browser tools for developers.

Source: single index.html + test/test.js, no build tooling, no framework.

What gradient effect do you use most often? Drop it in the comments — might make it into the presets.

I Built a Browser-Only IP / CIDR Calculator — IPv4 & IPv6, Subnet Split, Binary Breakdown (136 Tests)

Dev Nestio — Sun, 28 Jun 2026 01:57:08 +0000

CIDR notation is one of those things every developer encounters but rarely fully understands. What does /24 mean exactly? What is the broadcast address? How many usable hosts are in a /26? These questions come up during infra work, firewall rules, VPC setup, and Kubernetes networking — and I always had to reach for a tool.

So I built my own: a single HTML file that handles both IPv4 and IPv6 CIDR calculations, subnet splitting, supernetting, and binary visualization — with zero uploads, zero dependencies, and 136 passing tests.

Live tool → devnestio.pages.dev/cidr-calculator/

What it calculates

For IPv4:

Network address (host bits masked to 0)
Broadcast address (host bits all 1)
Subnet mask and wildcard mask
First and last usable host
Total addresses and usable hosts
IP class (A/B/C/D) and type (Private RFC 1918, Loopback, Link-local, Multicast, Public)
Binary breakdown with color-coded network vs host bits
Subnet splitter: divide a /24 into /26s, etc.
Supernet: one prefix up

For IPv6:

Compressed and expanded representations
Network and last address
Prefix mask and wildcard
Total address count (as BigInt — these numbers are huge)
Address type: Global Unicast, Link-local (fe80::/10), Unique Local (fc00::/7), Multicast (ff00::/8), Loopback (::1), Documentation (2001:db8::/32)

There is also a prefix reference table listing /8 through /32 with mask, wildcard, and host count.

The math: IPv4 bit operations

IPv4 addresses are 32-bit unsigned integers. CIDR prefix math is pure bitwise operations:

// prefix → subnet mask
function prefixToMask(prefix) {
  if (prefix === 0) return 0;
  return (0xFFFFFFFF << (32 - prefix)) >>> 0;
}

// from mask + IP → network, broadcast, hosts
const mask      = prefixToMask(prefix);
const wildcard  = (~mask) >>> 0;          // invert all bits
const network   = (ip & mask) >>> 0;      // AND with mask
const broadcast = (network | wildcard) >>> 0; // OR with wildcard
const firstHost = (network + 1) >>> 0;
const lastHost  = (broadcast - 1) >>> 0;
const usable    = Math.pow(2, 32 - prefix) - 2;

The >>> 0 casts keep everything as unsigned 32-bit. JavaScript bitwise operators work on signed 32-bit integers internally, so without >>> 0, a /0 mask would give -1 instead of 4294967295.

Rendering IP addresses:

function uint32ToIPv4(n) {
  return [
    (n >>> 24) & 0xFF,
    (n >>> 16) & 0xFF,
    (n >>> 8)  & 0xFF,
    n          & 0xFF,
  ].join(.);
}

Edge cases worth knowing

/31 (point-to-point links, RFC 3021): No broadcast or network address — both addresses are usable. My code special-cases prefix === 31: usableHosts = 2, and firstHost = network, lastHost = broadcast.

/32 (single host route): One address, used as a host route. totalHosts = 1, usableHosts = 1.

/0 (default route): network = 0.0.0.0, broadcast = 255.255.255.255. The left-shift 0xFFFFFFFF << 32 in JavaScript wraps around to 0xFFFFFFFF due to how shift amounts are masked — I guard with if (prefix === 0) return 0.

The math: IPv6 with BigInt

IPv6 addresses are 128-bit. JavaScript numbers are 64-bit floats, so they can not represent 128-bit integers precisely. BigInt handles this:

function ipv6ToBigInt(expanded) {
  // expanded = "2001:0db8:0000:..."
  return BigInt("0x" + expanded.split(":").join(""));
}

function calcIPv6Network(ipInt, prefix) {
  const maxVal = (1n << 128n) - 1n;
  const maskInt = prefix === 0 ? 0n
    : (maxVal << BigInt(128 - prefix)) & maxVal;
  return ipInt & maskInt;
}

Total addresses in a /64:

const totalHosts = 1n << BigInt(128 - 64); // 2n^64 = 18446744073709551616n

That is about 18.4 quintillion addresses per /64. You cannot fit that in a regular JavaScript number.

IPv6 compression/expansion

IPv6 has a compact notation that omits leading zeros and replaces the longest run of zero groups with ::. I implement both directions:

Expand (e.g., ::1 → 0000:0000:...:0001):

function expandIPv6(str) {
  if (str.includes("::")) {
    const [left, right] = str.split("::");
    const leftParts  = left  ? left.split(":")  : [];
    const rightParts = right ? right.split(":") : [];
    const missing = 8 - leftParts.length - rightParts.length;
    const mid = Array(missing).fill("0000");
    return [...leftParts, ...mid, ...rightParts]
      .map(p => p.padStart(4, "0")).join(":");
  }
  return str.split(":").map(p => p.padStart(4, "0")).join(":");
}

Compress (find longest run of 0 groups, replace with ::):

function compressIPv6(expanded) {
  const groups = expanded.split(":").map(g => parseInt(g, 16).toString(16));
  let bestStart = -1, bestLen = 0, curStart = -1, curLen = 0;
  for (let i = 0; i <= groups.length; i++) {
    if (i < groups.length && groups[i] === "0") {
      if (curStart === -1) { curStart = i; curLen = 1; }
      else curLen++;
    } else {
      if (curLen > bestLen) { bestLen = curLen; bestStart = curStart; }
      curStart = -1; curLen = 0;
    }
  }
  if (bestLen < 2) return groups.join(":");
  const before = groups.slice(0, bestStart).join(":");
  const after  = groups.slice(bestStart + bestLen).join(":");
  return (before ? before + "::" : "::") + after;
}

Binary visualization

One of the most useful features for learning CIDR is seeing the binary breakdown. For 192.168.1.0/24:

IP Address   11000000.10101000.00000001.00000000
Subnet Mask  11111111.11111111.11111111.00000000
Wildcard     00000000.00000000.00000000.11111111
Network      11000000.10101000.00000001.00000000

The first 24 bits (network part) are highlighted in teal; the remaining 8 bits (host part) in amber. This makes it immediately clear why 192.168.1.0/24 gives 256 total addresses.

function uint32ToBinary(n) {
  return [24, 16, 8, 0].map(shift =>
    ((n >>> shift) & 0xFF).toString(2).padStart(8, "0")
  ).join(".");
}

Subnet splitting

Splitting a network into equal-sized subnets:

function splitSubnet(info, newPrefix) {
  if (newPrefix <= info.prefix || newPrefix > 32) return null;
  const count = Math.pow(2, newPrefix - info.prefix);
  const subnetSize = Math.pow(2, 32 - newPrefix);
  const subnets = [];
  for (let i = 0; i < count; i++) {
    const net = (info.network + i * subnetSize) >>> 0;
    // ...compute broadcast, first/last host
    subnets.push({ cidr: `${uint32ToIPv4(net)}/${newPrefix}`, ... });
  }
  return subnets;
}

A /24 split into /26 gives 4 subnets of 64 addresses each (62 usable). Each subnet in the output is clickable — it loads that CIDR into the calculator instantly.

Testing: 136 tests, plain `node`

The pure-logic functions are tested with node test/test.js — no framework, just assert:

node test/test.js

Suite	Tests
parseIPv4	11
uint32ToIPv4 round-trips	5
prefixToMask	7
maskToPrefix (incl. inverse loop)	7
uint32ToBinary	5
calcIPv4 /24 full check	12
calcIPv4 edge cases	24
parseCIDRv4	5
splitSubnet	13
supernet	4
expandIPv6 / compressIPv6	8
calcIPv6	10
IPv6 BigInt conversion	5
isIPv6	4
calculate() dispatcher	5
Additional calcIPv4	12
Total	136

Key test vectors:

test("prefixToMask and maskToPrefix are inverse for /0–/32", () => {
  for (let i = 0; i <= 32; i++) {
    assert.strictEqual(maskToPrefix(prefixToMask(i)), i);
  }
});

test("/64 totalHosts = 2^64", () => {
  const r = calcIPv6("2001:db8::/64");
  assert.strictEqual(r.totalHosts, 2n ** 64n);
});

test("host IP gets masked to network: 192.168.1.100/24", () => {
  const r = calcIPv4("192.168.1.100/24");
  assert.strictEqual(r.networkStr, "192.168.1.0");
});

Tech used

Bitwise operations — all IPv4 math (>>>, &, |, ~)
BigInt — IPv6 128-bit arithmetic
No dependencies — pure Vanilla JS, single HTML file
node + assert — testing without frameworks

Try it

Tool: devnestio.pages.dev/cidr-calculator/
Hub (26 tools): devnestio.pages.dev

Next time someone asks "what is /25 again?" you will know: 128 addresses, 126 usable, split your /24 exactly in half.

I Built a Browser-Only Favicon Generator — Text, Emoji & SVG to ICO/PNG (136 Tests, Zero Dependencies)

Dev Nestio — Sun, 28 Jun 2026 01:49:37 +0000

Favicons are tiny but they matter. A sharp, recognizable 32×32 icon in a browser tab signals polish. But most favicon tools either require uploads, email sign-ups, or bloated JavaScript frameworks. I wanted something you can open, use in 10 seconds, and close — with nothing sent to a server.

So I built Favicon Generator: a single HTML file that converts text, emoji, or pasted SVG code into PNG files (16×16 through 180×180) and a multi-size .ico. Everything runs in the browser. Zero upload. Zero tracking.

Live tool → devnestio.pages.dev/favicon-generator/

What it does

Text or emoji input — type 1–3 characters ("Fg", "JS", "🚀") and the Canvas API renders them live
SVG paste — paste any SVG code; it renders via URL.createObjectURL and scales to fill the canvas
Background & foreground color pickers with hex text inputs (three-char shorthand works)
Auto-contrast button — uses WCAG 2.1 relative luminance to pick #000000 or #ffffff automatically
Border-radius slider — 0% (sharp square) to 50% (perfect circle)
Font family selector — System sans-serif, Serif, Monospace, Impact
Manual font-size override — or keep it on "auto" and the tool scales based on glyph count
10 one-click presets — language logos (JS, Go, Py, TS) and emoji styles
Live previews — 256px main canvas, browser-tab mockup (with fake chrome UI), phone home-screen mockup
Download individual PNGs — 16, 32, 64, 128, 180px buttons
Download ZIP — all selected sizes bundled, implemented in pure JS (no JSZip, no external library)
Download ICO — 16px + 32px images packed into a real .ico binary, hand-rolled from the ICO spec

The interesting bits

ICO format from scratch

ICO is a binary container format. Modern tools embed PNG data directly inside it (rather than raw BMP), and browsers understand that since IE 10+.

The structure is straightforward:

ICONDIR (6 bytes)
  Reserved       [0x0000]
  Type           [0x0001]   ← 1 = ICO, 2 = CUR
  Count          [N]

ICONDIRENTRY × N (16 bytes each)
  Width          [1 byte]   ← 0 means 256
  Height         [1 byte]
  ColorCount     [0]        ← 0 = no palette (for PNG)
  Reserved       [0]
  Planes         [0x0001]
  BitCount       [0x0020]   ← 32 bpp
  BytesInRes     [uint32]   ← size of PNG blob
  ImageOffset    [uint32]   ← byte offset from file start

PNG data × N

The first image offset = 6 + 16 * count. Each subsequent image sits right after the previous one. Simple.

function createIco(images) {
  // images = [{width, height, pngData: Uint8Array}]
  const count = images.length;
  const dirSize = 6 + count * 16;
  let offset = dirSize;
  const enriched = images.map(img => {
    const e = { ...img, offset };
    offset += img.pngData.length;
    return e;
  });
  // ... write header, directory, then concatenate PNG blobs
}

Getting the PNG bytes from a Canvas element:

function canvasToPng(canvas) {
  const dataUrl = canvas.toDataURL("image/png");
  const base64 = dataUrl.split(",")[1];
  const binary = atob(base64);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
  return bytes;
}

ZIP format from scratch (STORE method)

For the ZIP download I implemented a minimal STORE (no compression) ZIP creator. It is only ~80 lines including CRC32:

Local file header  (30 + filename_length bytes)
File data
...repeat for each file...
Central directory entries
End of central directory record

Key signatures to know:

Local file header: 0x04034B50 (PK\x03\x04)
Central directory entry: 0x02014B50 (PK\x01\x02)
End of central directory: 0x06054B50 (PK\x05\x06)

All multi-byte integers are little-endian. That is the only gotcha.

CRC32 uses the standard IEEE 802.3 polynomial 0xEDB88320 (bit-reversed):

const CRC32_TABLE = (() => {
  const t = new Uint32Array(256);
  for (let i = 0; i < 256; i++) {
    let c = i;
    for (let j = 0; j < 8; j++)
      c = (c & 1) ? (0xEDB88320 ^ (c >>> 1)) : (c >>> 1);
    t[i] = c;
  }
  return t;
})();

function crc32(data) {
  let crc = 0xFFFFFFFF;
  for (let i = 0; i < data.length; i++)
    crc = (crc >>> 8) ^ CRC32_TABLE[(crc ^ data[i]) & 0xFF];
  return (crc ^ 0xFFFFFFFF) >>> 0;
}

Test vector: crc32("123456789") should equal 0xCBF43926.

Emoji rendering

Emoji need special handling on Canvas. The trick is skipping fillStyle and using sans-serif (not your custom font), letting the OS emoji font take over:

if (isEmoji(text)) {
  ctx.font = `${fontSize}px sans-serif`;
  // do not set fillStyle — OS emoji font handles color
} else {
  ctx.fillStyle = fgColor;
  ctx.font = `bold ${fontSize}px ${fontFamily}`;
}
ctx.fillText(text, size / 2, size / 2 + size * 0.03);

The tiny + size * 0.03 vertical nudge corrects the optical center — Canvas textBaseline: middle tends to sit slightly high for square layouts.

Auto-contrast via WCAG 2.1

function luminance(r, g, b) {
  const srgb = [r, g, b].map(v => {
    const s = v / 255;
    return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2];
}

function autoContrast(bgHex) {
  const rgb = hexToRgb(bgHex);
  const lum = luminance(rgb.r, rgb.g, rgb.b);
  return lum > 0.179 ? "#000000" : "#ffffff";
}

The threshold 0.179 is derived from the WCAG 2.1 contrast ratio formula — at this luminance, white and black text have roughly equal contrast against the background.

Testing: 136 tests, zero test framework

The tool is one HTML file, so the pure-logic functions (ICO, ZIP, CRC32, color math) are mirrored in test/test.js and run with plain node:

node test/test.js

Test categories:

Category	Count
CRC32 algorithm	15
ICO binary format	23
ZIP binary format	25
Color utilities (hexToRgb, luminance, autoContrast)	25
Hex validation & normalization	11
Text & emoji processing	22
Utility functions (clamp, readU16LE, readU32LE)	10
Integration (ICO + ZIP end-to-end)	5
Total	136

Standard test vector sanity:

test("CRC32 of 123456789 = 0xCBF43926", () => {
  assert.strictEqual(crc32(new TextEncoder().encode("123456789")), 0xCBF43926);
});

test("ICO dir entry 0: offset = 6 + 16 (1 image)", () => {
  const ico = createIco([{ width: 16, height: 16, pngData: fakePng }]);
  assert.strictEqual(readU32LE(ico, 18), 22); // 6 header + 16 dir entry
});

Tech used

Canvas API — rendering and PNG export
Blob + URL.createObjectURL — SVG to Canvas pipeline and file downloads
DataView — writing ICO and ZIP binary structures
TextEncoder — filename bytes for ZIP
Intl.Segmenter — accurate grapheme cluster count (emoji sequences like 🏳️‍🌈)

No build step. No bundler. No npm install for the browser. Open the file, it works.

Try it

Tool: devnestio.pages.dev/favicon-generator/
Hub (25 tools total): devnestio.pages.dev

Happy favicon-ing. 🎨

I Built a Unit Converter in Pure Vanilla JS — 7 Categories, 70+ Units, 165 Tests, Zero Dependencies

Dev Nestio — Sun, 28 Jun 2026 00:22:00 +0000

Unit converters are everywhere online, but they all seem to either require an account, run ads that cover half the screen, or send your input to a server for no reason. I built one that runs entirely in your browser, with no dependencies, no tracking, and no round-trips.

👉 https://unit-converter-dev.pages.dev

What It Does

Seven conversion categories, 70+ units, real-time bidirectional conversion:

Category	Example units
Length	mm, cm, m, km, in, ft, yd, mi, nmi, light-year
Weight	mg, g, kg, t, oz, lb, st, short ton
Temperature	°C, °F, K, °R
Volume	ml, l, m³, fl oz, cup, pint, quart, gallon, tbsp, tsp
Area	mm², cm², m², km², ha, acre, ft², in², mi², yd²
Speed	m/s, km/h, mph, ft/s, knot, Mach
Data	bit, byte, KB/KiB, MB/MiB, GB/GiB, TB — both SI and binary

Features:

Bidirectional — type in either field, the other updates instantly
Swap button — flip from/to with one click
All-units panel — see your input converted to every unit in the category simultaneously
Formula display — shows the conversion factor (e.g. "1 Mile = 1.609344 Kilometer")
Zero dependencies — single HTML file, no build step, no npm

Implementation Notes

Linear vs. non-linear conversions

Most unit conversions are linear: multiply by a factor to get to the base unit, divide by another factor to get to the target. The approach:

function convert(catKey, fromUnit, toUnit, value) {
  const base = toBase(catKey, fromUnit, value);     // → base unit
  return fromBase(catKey, toUnit, base);            // base unit → target
}

function toBase(catKey, unit, value) {
  const u = CATEGORIES[catKey].units[unit];
  if (u.toBase) return u.toBase(value);             // non-linear (temperature)
  return value * u.factor;
}

Temperature is the classic non-linear case. You can't just multiply to convert between Celsius, Fahrenheit, and Kelvin — you need offset arithmetic:

temperature: {
  units: {
    C: {
      toBase:   v => v + 273.15,               // °C → K
      fromBase: v => v - 273.15,               // K → °C
    },
    F: {
      toBase:   v => (v - 32) * 5/9 + 273.15, // °F → K
      fromBase: v => (v - 273.15) * 9/5 + 32, // K → °F
    },
    K: { toBase: v => v, fromBase: v => v },
    R: { toBase: v => v * 5/9, fromBase: v => v * 9/5 },
  }
}

SI vs. binary data units

The data category includes both SI prefixes (1 KB = 1000 bytes) and binary prefixes (1 KiB = 1024 bytes). Both are represented with the same factor-based approach, just stored as separate units:

data: {
  units: {
    kB:  { factor: 8e3     },  // Kilobyte  = 8000 bits
    kiB: { factor: 8192    },  // Kibibyte  = 8192 bits (= 8 × 1024)
    mB:  { factor: 8e6     },  // Megabyte  = 8,000,000 bits
    miB: { factor: 8388608 },  // Mebibyte  = 8,388,608 bits (= 8 × 1024²)
    // ...
  }
}

Number formatting

The tricky part is displaying results cleanly. 1.6093440000000001 is ugly; 1.609344 is what you want. toPrecision(10) then parseFloat removes trailing zeros while keeping enough precision:

function formatNum(n) {
  if (!isFinite(n)) return '';
  if (n === 0) return '0';
  const abs = Math.abs(n);
  if (abs >= 1e-3 && abs < 1e13) {
    return parseFloat(n.toPrecision(10)).toString();
  }
  return n.toExponential(6);  // very large or very small → scientific notation
}

Testing

165 tests, all passing, using only Node.js assert:

§1  Length conversions         (17 tests)
§2  Weight conversions         (12 tests)
§3  Temperature conversions    (13 tests)
§4  Volume conversions         (11 tests)
§5  Area conversions           (10 tests)
§6  Speed conversions          ( 9 tests)
§7  Data conversions           (12 tests)
§8  formatNum                  (15 tests)
§9  convert edge cases         ( 8 tests)
§10 Roundtrip conversions      (13 tests)
§11 Category structure         (12 tests)
§12 Known reference values     (13 tests)
§13 Additional coverage        (20 tests)

Highlights from the test suite:

-40°C = -40°F (the only point where Celsius and Fahrenheit are equal)
0 K = -459.67°F (absolute zero)
1 mi = 5280 ft = 1760 yd = 1.609344 km
1 GiB = 1024 MiB = 8589934592 bits
Roundtrip tests: convert A→B→A and verify you get A back (within floating-point tolerance)

Try It

👉 https://unit-converter-dev.pages.dev

Part of devnestio — a collection of free, zero-dependency developer tools that run entirely in your browser.

I Built a Text Diff Tool in Pure Vanilla JS — Myers Algorithm from Scratch, 129 Tests, Zero Dependencies

Dev Nestio — Sun, 28 Jun 2026 00:17:14 +0000

Every developer ends up needing to compare two blocks of text at some point — a config before and after an edit, two versions of a log file, or just "what exactly changed between these two pastes?" Most tools either require a server round-trip or pull in a 200KB library.

I built one that runs entirely in the browser, with no dependencies, and implements the Myers diff algorithm from scratch.

👉 https://text-diff-60y.pages.dev

What It Does

Side-by-side view — original on the left, modified on the right, with line numbers
Unified view — traditional +/- format in a single pane
Real-time diffing — results update as you type, no button press needed
Color coding — additions in green, deletions in red
Diff statistics — "+N added / −N removed" badge in the toolbar
Copy diff — one click copies the full diff as unified text
Zero dependencies — single HTML file, no npm, no build step

The Algorithm: Myers Diff

The classic "diff" algorithm used in git diff, GNU diff, and most modern diff tools is the Myers diff algorithm, published by Eugene Myers in 1986. It finds the shortest edit script between two sequences — the minimum number of insertions and deletions to transform A into B.

The core insight: represent the diff problem as finding the shortest path through an edit graph where:

Moving right = delete a line from A
Moving down = insert a line from B
Moving diagonally = lines match (free move)

The algorithm explores diagonal "snakes" (sequences of matching lines) greedily, expanding by edit distance d = 0, 1, 2, ... until it reaches the bottom-right corner (n, m).

function myersDiff(a, b) {
  const n = a.length, m = b.length;
  const max = n + m;
  const v = new Int32Array(2 * max + 1);
  const trace = [];
  const offset = max;

  outer:
  for (let d = 0; d <= max; d++) {
    trace.push(new Int32Array(v));
    for (let k = -d; k <= d; k += 2) {
      let x = (k === -d || (k !== d && v[offset+k-1] < v[offset+k+1]))
        ? v[offset+k+1]
        : v[offset+k-1] + 1;
      let y = x - k;
      while (x < n && y < m && a[x] === b[y]) { x++; y++; }
      v[offset+k] = x;
      if (x >= n && y >= m) { trace.push(new Int32Array(v)); break outer; }
    }
  }
  // ... backtrack through trace to reconstruct ops
}

The tricky part is the backtracking phase. After finding the minimum edit distance D, you replay the trace in reverse to recover the actual sequence of insertions and deletions. Each step looks at V_{d-1} (the saved state from the previous edit depth) to determine whether the path came from an insert or a delete.

The backtrack bug that tripped me up: the trace array stores V_{d-1} at trace[d] (pushed before processing depth d), plus a final snapshot after finding the goal. So D = trace.length - 2, and the loop runs from d = D down to 1, using trace[d] as V_{d-1}. After the loop, any remaining diagonal from (x, y) back to (0, 0) is the d=0 snake (the longest common prefix).

Implementation Details

The whole thing is a single index.html — no bundler, no framework, no runtime dependencies.

Rendering: Two modes share the same diff output. Side-by-side uses a fixed-layout table with four columns (line number, content, divider, line number, content). Unified uses a three-column table (old line number, new line number, sign, content). HTML is escaped before insertion to prevent XSS from user-pasted content.

Performance: For typical developer use cases (config files, code snippets, log excerpts — up to a few thousand lines), the O(ND) algorithm is fast enough for real-time updates on every keystroke. For very large inputs the browser's event loop keeps things responsive.

Copy: Uses navigator.clipboard.writeText with a document.execCommand('copy') fallback for older browsers.

Testing

129 tests, all passing, using only Node.js assert — no test framework:

§1  myersDiff — edge cases         (20 tests)
§2  computeDiff — basic            (16 tests)
§3  computeDiff — counts           (10 tests)
§4  esc() — HTML escaping          (17 tests)
§5  myersDiff — larger inputs      (11 tests)
§6  computeDiff — special content  (10 tests)
§7  single vs multi-line           ( 5 tests)
§8  empty lines and whitespace     ( 7 tests)
§9  line number correctness        ( 6 tests)
§10 esc() edge cases               ( 6 tests)
§11 real-world diff scenarios      ( 8 tests)
§12 additional coverage            (13 tests)

Tests cover: empty inputs, identical inputs, pure insertions, pure deletions, changes in various positions, unicode, emoji, very long lines, Windows line endings, HTML content, JSON, CSS, code snippets, config files, and determinism checks.

What I Learned

Implementing Myers from scratch taught me a few things:

The trace is subtle. The algorithm stores a snapshot of V before each edit depth d. When you break early (goal found mid-loop), you push an extra snapshot. So D = trace.length - 2, not trace.length - 1. Off by one here causes identical strings to look like they have one deletion.
In-place V updates are safe. Within a single d level, k jumps by 2. So k=-1 writes to v[offset-1] and k=1 reads from v[offset+0] and v[offset+2] — no aliasing.
Backtrack uses V_{d-1}, not V_d. To determine whether a move was an insert or delete at depth d, you compare entries in the previous V array (trace[d]), not the current one.

Try It

👉 https://text-diff-60y.pages.dev

Part of devnestio — a collection of free, zero-dependency developer tools that run entirely in your browser.

Source available at the link above (view-source on the single HTML file — everything is there).

I Built a Visual Chmod Calculator in Pure Vanilla JS — Checkboxes ↔ Numeric ↔ Symbolic, 222 Tests

Dev Nestio — Sat, 27 Jun 2026 19:10:40 +0000

Every Linux and macOS developer has typed chmod 755 on autopilot — but what does 7 actually mean? Why is 644 the default for files? And what happens to the execute bit when you set the setuid flag?

Most chmod reference pages list a table. I wanted something interactive: flip a checkbox, see the octal update. Type rwsr-xr-x, watch the checkboxes respond. So I built one — in the browser, no server, no framework.

👉 https://chmod-calculator.pages.dev

What It Does

Checkboxes for Owner / Group / Others × Read / Write / Execute — check one, everything updates instantly
Numeric input (e.g. 755) — type any valid octal, the UI reflects it
Symbolic input (e.g. rwxr-xr-x) — edit the string, checkboxes follow
Octal display (e.g. 0755) with the full 4-digit form
Binary display (e.g. 111 101 101) — see exactly which bits are set
Special bits — Setuid (4000), Setgid (2000), Sticky (1000) as labeled cards with descriptions
Presets — one click for 644, 755, 777, 600, 700, 400, 4755, 1777
chmod command generator with an editable filename field and a copy button
Zero external dependencies — single HTML file, works offline

The Core Logic

Unix permissions are a 12-bit integer. The lower 9 bits are the familiar rwx groups. Bits 9–11 are the special flags.

Bit layout (octal prefix → lower 9 bits):
  bit 11 (0x800) = setuid
  bit 10 (0x400) = setgid
  bit  9 (0x200) = sticky
  bits 8-6       = owner  r/w/x  (0x100, 0x80, 0x40)
  bits 5-3       = group  r/w/x  (0x20,  0x10, 0x08)
  bits 2-0       = others r/w/x  (0x04,  0x02, 0x01)

Numeric → Symbolic

function modeToSymbolic(mode) {
  const bits = [
    [0x100, 'r'], [0x80, 'w'], [0x40, 'x'],
    [0x20,  'r'], [0x10, 'w'], [0x08, 'x'],
    [0x04,  'r'], [0x02, 'w'], [0x01, 'x']
  ];
  let sym = '';
  for (let i = 0; i < 9; i++) {
    sym += (mode & bits[i][0]) ? bits[i][1] : '-';
  }
  const setuid = !!(mode & 0x800);
  const setgid = !!(mode & 0x400);
  const sticky = !!(mode & 0x200);

  // Special bits replace the execute position
  if (setuid) sym = sym.slice(0, 2) + ((mode & 0x40) ? 's' : 'S') + sym.slice(3);
  if (setgid) sym = sym.slice(0, 5) + ((mode & 0x08) ? 's' : 'S') + sym.slice(6);
  if (sticky) sym = sym.slice(0, 8) + ((mode & 0x01) ? 't' : 'T');

  return sym;
}

The special bit substitution follows the POSIX convention: lowercase s/t when the execute bit is also set, uppercase S/T when it is not. This lets ls -l pack two pieces of information into one character.

Symbolic → Numeric

function symbolicToMode(sym) {
  if (!/^[rwxsStT-]{9}$/.test(sym)) return null;

  const values = [0x100, 0x80, 0x40, 0x20, 0x10, 0x08, 0x04, 0x02, 0x01];
  let mode = 0;
  for (let i = 0; i < 9; i++) {
    const c = sym[i];
    if (c === 'r' || c === 'w' || c === 'x') {
      mode |= values[i];
    } else if (c === 's') {
      mode |= values[i];                         // execute bit
      if (i === 2) mode |= 0x800;               // setuid
      else if (i === 5) mode |= 0x400;          // setgid
    } else if (c === 'S') {
      if (i === 2) mode |= 0x800;               // setuid without execute
      else if (i === 5) mode |= 0x400;
    } else if (c === 't') {
      mode |= values[i];                         // others execute
      mode |= 0x200;                             // sticky
    } else if (c === 'T') {
      mode |= 0x200;                             // sticky without execute
    }
  }
  return mode;
}

Position matters: s at index 2 is setuid, s at index 5 is setgid. The regex guard [rwxsStT-]{9} rejects anything that can't be a valid symbolic string before any bit-twiddling begins.

Why `s` vs `S` — and `t` vs `T`

chmod 4755 /usr/bin/sudo   →  rwsr-xr-x   (setuid, owner exec set)
chmod 4644 myfile          →  rwSr--r--   (setuid, owner exec NOT set)
chmod 1777 /tmp            →  rwxrwxrwt   (sticky, others exec set)
chmod 1776 /tmp            →  rwxrwxrwT   (sticky, others exec NOT set)

The uppercase form is a warning: the special bit is set but has no execute bit to "attach" to — which is unusual and often unintentional.

Octal formatting

function modeToOctal(mode) {
  const special = (mode >> 9) & 7;
  const owner   = (mode >> 6) & 7;
  const group   = (mode >> 3) & 7;
  const other   = mode & 7;
  // Prefix 0 when no special bits, otherwise lead with special digit
  return special ? `${special}${owner}${group}${other}` : `0${owner}${group}${other}`;
}

0644 and 4755 both have 4 characters. The leading 0 for a plain mode signals "no special bits" without adding a fifth digit.

Binary representation

function modeToBinary(mode) {
  const owner = ((mode >> 6) & 7).toString(2).padStart(3, '0');
  const group = ((mode >> 3) & 7).toString(2).padStart(3, '0');
  const other = (mode & 7).toString(2).padStart(3, '0');
  return `${owner} ${group} ${other}`;
}
// 755 → "111 101 101"
// 644 → "110 100 100"

Three groups of three bits, each padded to width 3. This makes the r/w/x mapping visually obvious — a 1 in position 0 of each group means read, position 1 means write, position 2 means execute.

Keeping All Representations in Sync

The state is a single integer currentMode. Every input (checkbox, numeric field, symbolic field, preset button) calls updateFromMode(mode) after computing the new mode value. That function pushes the new state to every output element — no separate reconciliation loop needed.

let currentMode = 0o644;

function updateFromMode(mode) {
  currentMode = mode;
  // Update all 12 checkboxes
  document.getElementById('ur').checked = !!(mode & 0x100);
  // ... and the rest
  // Update numeric input
  document.getElementById('numInput').value = modeToOctal(mode).replace(/^0/, '');
  // Update symbolic input
  document.getElementById('symInput').value = modeToSymbolic(mode);
  // Update display cards and chmod command
}

A suppressUpdate flag prevents re-entrant updates when the function itself sets input values (which would otherwise trigger their input event handlers).

Common Permissions Reference

Mode	Symbolic	Typical use
644	rw-r--r--	Regular files (web content, configs)
755	rwxr-xr-x	Directories, executables
600	rw-------	Private keys, .env files
700	rwx------	Private directories
400	r--------	Read-only secrets
4755	rwsr-xr-x	Setuid executables (sudo, ping)
1777	rwxrwxrwt	Sticky directories (/tmp)

Testing Without a Framework

222 tests, no test runner, no dependencies — just Node.js built-ins:

let passed = 0, failed = 0;

function eq(a, b, label) {
  if (a === b) { console.log(`  ✓ ${label}`); passed++; }
  else {
    console.error(`  ✗ ${label}\n    got:      ${JSON.stringify(a)}\n    expected: ${JSON.stringify(b)}`);
    failed++;
  }
}

// Round-trip test: mode → symbolic → mode
function roundTrip(mode, label) {
  const sym = modeToSymbolic(mode);
  const back = symbolicToMode(sym);
  eq(back, mode, `round-trip ${label}`);
}

roundTrip(0o755, '755');
roundTrip(0o4755, '4755 setuid');
roundTrip(0o1777, '1777 sticky');
// ... 18 round-trips total

The round-trip tests (symbolic → numeric → symbolic → numeric) catch any asymmetry between the encode and decode paths. If they both have the same bug, round-trips still pass — so I also test both directions against known expected values.

All 222 tests PASSED

Try It

https://chmod-calculator.pages.dev

Source is a single self-contained HTML file — open DevTools, read the script block, and you have the full implementation. Part of devnestio, a collection of browser-only developer tools.

I Built a Browser-Only HTML Entity Encoder/Decoder — Named, Decimal & Hex, 246 Tests

Dev Nestio — Sat, 27 Jun 2026 19:00:47 +0000

Every developer has hit this: you need to escape <, >, &, and quotes before dropping user input into HTML — or you're staring at mangled text full of & and need to convert it back. Most online tools do the basics, but fall short on the full HTML5 named entity set or force you to choose between three encoding formats.

I built one that handles all three formats, 253 named entities, and decodes all of them with a single regex pass — entirely in the browser, no server, no framework.

👉 https://html-entity-encoder.pages.dev

What It Does

Encode: text → HTML entities in three modes
- Named — é → é, © → ©, π → π
- Decimal — é → é, © → ©
- Hex — é → é, © → ©
Decode: all three entity formats back to plain text
253 HTML5 named entities — Latin-1 Supplement, Latin Extended-A, Greek, Math, Arrows, Punctuation, Currency, Symbols
Real-time: output updates on every keystroke
Quick Reference: collapsible table you can click to insert characters
Swap, Copy, Clear, Sample buttons
Zero external dependencies — single HTML file, works offline

The Core: Encoding in Three Modes

The encoding logic iterates over Unicode code points (not UTF-16 code units), which is essential for handling emoji and characters outside the BMP:

const ALWAYS_ENCODE = new Set(['&', '<', '>', '"', "'"]);

function encode(text, mode) {
  if (!text) return '';
  const result = [];
  for (const ch of text) {          // for...of iterates code points
    const cp = ch.codePointAt(0);
    const mustEncode = ALWAYS_ENCODE.has(ch) || cp > 127;
    if (!mustEncode) { result.push(ch); continue; }

    if (mode === 'named') {
      result.push(CHAR_TO_ENTITY[ch] || `&#${cp};`);
    } else if (mode === 'decimal') {
      result.push(`&#${cp};`);
    } else {                        // hex
      result.push(`&#x${cp.toString(16).toUpperCase()};`);
    }
  }
  return result.join('');
}

The for...of loop over a string yields Unicode code points. A for loop with index would break on any character outside the Basic Multilingual Plane — emoji like 😀 are encoded as surrogate pairs in UTF-16, so a naive str[i] approach would emit two separate (invalid) entities for a single character.

Why &#N; fallback in named mode? Because the 253 named entities don't cover everything. A character like 😀 (U+1F600) has no HTML5 named form, so decimal is the only option.

The Decode Regex

One regex handles all three entity formats in a single pass:

function decode(text) {
  if (!text) return '';
  return text.replace(
    /&([a-zA-Z][a-zA-Z0-9]*);|&#([0-9]+);|&#[xX]([0-9a-fA-F]+);/g,
    (match, name, dec, hex) => {
      try {
        if (name !== undefined)
          return Object.prototype.hasOwnProperty.call(ENTITY_TO_CHAR, name)
            ? ENTITY_TO_CHAR[name] : match;
        if (dec !== undefined)
          return String.fromCodePoint(parseInt(dec, 10));
        if (hex !== undefined)
          return String.fromCodePoint(parseInt(hex, 16));
      } catch (_) {}
      return match;
    }
  );
}

Three alternation groups, each capturing a different entity format. The named entity lookup uses hasOwnProperty explicitly to guard against prototype pollution — toString, constructor, __proto__ are technically valid entity name shapes, so a direct ENTITY_TO_CHAR[name] lookup could be exploited to return unexpected values from the prototype chain.

The hex branch accepts both &#x...; and &#X...; (the [xX] in the regex) — the HTML5 spec allows both, even though lowercase is conventional.

Building the Entity Maps

The decode map is the source of truth: ENTITY_TO_CHAR maps each name string to its Unicode character. Then the encode map is derived by inverting it:

const CHAR_TO_ENTITY = {};
(function buildCharMap() {
  // First pass: reverse all entries
  for (const [name, ch] of Object.entries(ENTITY_TO_CHAR)) {
    if (!CHAR_TO_ENTITY[ch]) CHAR_TO_ENTITY[ch] = `&${name};`;
  }
  // Second pass: force canonical preferred names for ambiguous chars
  const preferred = {
    '"': '&quot;', '&': '&amp;', "'": '&apos;',
    '<': '&lt;',   '>': '&gt;',  ' ': '&nbsp;',
    '©': '&copy;', '®': '&reg;', '™': '&trade;',
    '€': '&euro;', '×': '&times;', '÷': '&divide;'
  };
  Object.assign(CHAR_TO_ENTITY, preferred);
})();

Some characters have multiple named forms in HTML5. For example, ' maps to both ' (from XHTML) and &squot; — the second pass pins canonical names so the encoder always outputs the most recognizable form.

What's in the 253-entity Map

Category	Count	Examples
HTML special	5	`&` `<` `>` `"` `'`
Latin-1 Supplement	96	`é` `ñ` `©` `€`
Latin Extended-A	5	`&OElig;` `&oelig;` `&Scaron;`
Greek	49	`α` `π` `Σ` `Ω`
Mathematical	37	`∞` `≠` `≤` `∑` `√`
Arrows	11	`→` `←` `⇔` `&crarr;`
Punctuation	20	`—` `–` `…` `“`
Misc Symbols	10+	`™` `•` `&spades;` `&hearts;`
Currency	5	`€` `£` `¥` `¢`

Testing: 246 Cases, No Framework

246 tests across 26 sections, built on a two-function inline runner:

let passed = 0, failed = 0;

function eq(a, b, label) {
  if (a === b) { console.log(`  ✓ ${label}`); passed++; }
  else {
    console.error(`  ✗ ${label}\n    got:      ${JSON.stringify(a)}\n    expected: ${JSON.stringify(b)}`);
    failed++;
  }
}

Section	Tests	What's covered
Entity map coverage	12	Size ≥ 250, key entries exist
Encode HTML specials (named/decimal/hex)	23	`& < > " '` in all modes
Encode Latin extended (all modes)	25	`© € é ñ ü ± ° ½`
Encode Greek (all modes)	14	`α β γ π Σ Ω`
Encode math & symbols	11	`∞ ≠ ≤ √ → • — …`
ASCII passthrough	8	Letters, digits, misc symbols
Encode mixed strings	7	XSS payloads, café, résumé
Decode named entities	20	All common named entities
Decode decimal entities	10	`&` through `π`
Decode hex (lowercase/uppercase X)	15	`<` and `&#X3C;` forms
Decode mixed strings	8	Full HTML tags, price strings
Decode edge cases	10	Unknown entities, no semicolon, empty
Round-trip (encode→decode)	30	10 strings × 3 modes
Double-encoding prevention	2	`&` → `&amp;`
Unicode correctness	7	U+0000, U+0041, U+2665
Entity map value checks	10	Known char values
Misc symbols encode	8	`♠ ♥ ♦ ♣ ⇒ ∑`
Less common entities	13	`&OElig;` `•` `&permil;`
Whitespace entities	5	`&ensp;` `&emsp;` `&zwnj;`
Hex uppercase digits	4	`Ä` `Ü`
Non-BMP encode/decode	4	😀 decimal + hex round-trip

Run with npm test.

A Subtle Edge Case: Prototype Pollution in Decode

The named entity lookup is written as:

Object.prototype.hasOwnProperty.call(ENTITY_TO_CHAR, name)
  ? ENTITY_TO_CHAR[name]
  : match

rather than the simpler ENTITY_TO_CHAR[name]. Why? Because name comes from user-supplied text via the regex match. If someone passes &constructor; or &__proto__; as input, a direct bracket lookup would walk the prototype chain and return a function object or the prototype itself — then String.fromCodePoint on a non-integer would throw, but that's after already leaking prototype state.

The hasOwnProperty check ensures we only return values that are explicitly in the entity map, not inherited from Object.prototype.

Try It

https://html-entity-encoder.pages.dev

Single HTML file, no build step. Open DevTools and read the source — everything is there.

Also part of devnestio — a growing collection of zero-dependency browser tools for developers.

Built with: vanilla JS, the HTML5 named character references spec, and an unreasonable number of Greek letters.

I Built a Color Picker & Palette Generator in Pure Vanilla JS — No Libraries, 187 Tests

Dev Nestio — Sat, 27 Jun 2026 18:49:03 +0000

Every designer and developer has been there: you have a brand color and need a palette that actually works — complementary, analogous, triadic, or something in between. Most tools either require an account or pull in a heavy design library. I built one that runs entirely in the browser with zero dependencies.

The result: Color Picker & Palette Generator — a free, client-side tool that converts colors between four formats and generates six types of palettes instantly.

👉 https://color-picker-62x.pages.dev

What It Does

Native color picker (<input type="color">) — no custom UI needed, OS-native and accessible
Real-time conversion between HEX, RGB, HSL, and HSV
Click any value to copy — format strings like hsl(243, 100%, 70%) go straight to your clipboard
Six palette types: Complementary, Analogous, Triadic, Tetradic, Split-Complementary, Monochromatic (6 shades)
Click any swatch to copy its hex code
Random color button for quick inspiration
Zero external dependencies, works offline

The Color Math

The core is pure math — no canvas tricks, no DOM manipulation for conversion. Every format conversion is a direct function.

HEX ↔ RGB

Straightforward bit-shifting:

function hexToRgb(hex) {
  const h = hex.replace('#', '');
  const full = h.length === 3
    ? h.split('').map(c => c + c).join('')
    : h;
  const n = parseInt(full, 16);
  return { r: (n >> 16) & 0xff, g: (n >> 8) & 0xff, b: n & 0xff };
}

function rgbToHex({ r, g, b }) {
  return '#' + [r, g, b]
    .map(v => Math.round(v).toString(16).padStart(2, '0'))
    .join('');
}

Short hex (#fff) is expanded by doubling each character before parsing.

RGB → HSL

The trickier conversion — HSL is the most useful space for palette generation because hue rotations map directly to color relationships:

function rgbToHsl({ r, g, b }) {
  const rn = r / 255, gn = g / 255, bn = b / 255;
  const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);
  const l = (max + min) / 2;
  let h = 0, s = 0;
  if (max !== min) {
    const d = max - min;
    s = d / (l > 0.5 ? 2 - max - min : max + min);
    switch (max) {
      case rn: h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6; break;
      case gn: h = ((bn - rn) / d + 2) / 6; break;
      case bn: h = ((rn - gn) / d + 4) / 6; break;
    }
  }
  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}

The saturation formula switches between two variants based on lightness — that's the subtle part. When l > 0.5, you're in the upper half of the HSL cylinder and the denominator changes.

RGB → HSV

HSV (also called HSB) is different from HSL in how it handles brightness. A fully saturated red at V=100 is rgb(255,0,0); at V=50 it's rgb(128,0,0). That makes HSV natural for adjusting brightness without washing out to white (which HSL's lightness does at L=100).

function rgbToHsv({ r, g, b }) {
  const rn = r / 255, gn = g / 255, bn = b / 255;
  const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);
  const d = max - min;
  let h = 0;
  const s = max === 0 ? 0 : d / max;
  const v = max;
  if (d !== 0) {
    switch (max) {
      case rn: h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6; break;
      case gn: h = ((bn - rn) / d + 2) / 6; break;
      case bn: h = ((rn - gn) / d + 4) / 6; break;
    }
  }
  return { h: Math.round(h * 360), s: Math.round(s * 100), v: Math.round(v * 100) };
}

Palette Generation

All palettes derive from HSL hue rotation — that's why HSL is the right working space for this.

Hue normalization

Before any rotation, normalize hue to [0, 360):

function normalizeHue(h) { return ((h % 360) + 360) % 360; }

The double-mod pattern handles negative inputs correctly (e.g., normalizeHue(-60) → 300).

The six palette types

Type	Colors	Logic
Complementary	2	hue + 180°
Analogous	5	hue ± 30°, ± 60°
Triadic	3	hue + 0°, 120°, 240°
Tetradic	4	hue + 0°, 90°, 180°, 270°
Split-Complementary	3	hue + 0°, 150°, 210°
Monochromatic	6	same hue/saturation, lightness 10–85%

function paletteTriadic(hex) {
  const { h, s, l } = hslFromHex(hex);
  return [0, 120, 240].map(offset =>
    hexFromHsl(normalizeHue(h + offset), s, l)
  );
}

function paletteMonochromatic(hex) {
  const { h, s } = hslFromHex(hex);
  return [10, 25, 40, 55, 70, 85].map(l => hexFromHsl(h, s, l));
}

The monochromatic palette fixes hue and saturation, stepping lightness from dark to light. Six evenly-spaced steps from L=10 to L=85 gives a usable range across backgrounds and text.

Clipboard Copy

Two paths — modern async API with a document.execCommand fallback:

function copyToClipboard(text) {
  try {
    navigator.clipboard.writeText(text)
      .then(() => showToast('Copied: ' + text));
  } catch (e) {
    const ta = document.createElement('textarea');
    ta.value = text;
    ta.style.position = 'fixed';
    ta.style.opacity = '0';
    document.body.appendChild(ta);
    ta.select();
    try { document.execCommand('copy'); } catch (_) {}
    document.body.removeChild(ta);
    showToast('Copied: ' + text);
  }
}

The fallback matters because navigator.clipboard requires HTTPS and a focused document — both guaranteed in production, but not always in local dev.

Testing: 187 Cases, No Framework

The test suite covers every conversion function, round-trips, palette shapes, and edge cases — 25 sections, built with a 30-line inline runner.

Section	Tests	What's covered
hexToRgb	12	6-char, 3-char, known vectors
rgbToHex	10	known vectors, padding
rgbToHsl	12	primaries, achromatic, bounds
hslToRgb	10	primaries, achromatic, boundary hues
rgbToHsv	10	primaries, white, black, gray
normalizeHue	10	negative, >360, wrapping
HEX round-trip	8	hex → rgb → hex identity
RGB→HSL→RGB round-trip	8	Δ ≤ 1 per channel
paletteComplementary	8	count, hue offset, input preserved
paletteAnalogous	8	count, center matches input, hue steps
paletteTriadic	8	count, hue spacing 120°
paletteTetradic	8	count, hue spacing 90°
paletteSplitComplementary	8	count, offsets 150°/210°
paletteMonochromatic	8	count, same hue/s, lightness order
hslFromHex helper	6	known outputs
hexFromHsl helper	6	known outputs
rgbToHsl edge cases	6	achromatic, near-white/black
hslToRgb boundary	6	h=360, l=0/100, achromatic
Palette count checks	6	all 6 types
Total palette colors	4	2+5+3+4+3+6 = 23
Hue arithmetic	6	complement hues verified
rgbToHsv consistency	6	yellow, gray, cyan
HSL→RGB→HSV chain	6	hue preserved across chain
Palette hue spacing	6	triadic 120°, tetradic 90°
Format string construction	6	regex, range checks

No Jest, no Mocha, no assert module — just:

function assert(condition, label) {
  if (condition) { console.log(`  ✓ ${label}`); passed++; }
  else { console.error(`  ✗ ${label}`); failed++; }
}

Run with npm test.

The Tricky Edge Case

The rgbToHsl saturation formula has a branch that trips people up:

s = d / (l > 0.5 ? 2 - max - min : max + min);

When lightness exceeds 0.5, the formula switches denominator. It took me three wrong implementations before I traced it back to the original HSL cylindrical model definition. The two-segment formula ensures saturation reaches 100% at both the brightest and darkest extremes.

Try It

https://color-picker-62x.pages.dev

Single index.html, no build step, no framework. Open DevTools and read the source.

Also part of devnestio — a collection of zero-dependency developer tools.

Built with: vanilla JS, the HSL spec, and a lot of hue rotation math.

I Built a QR Code Generator in Pure Vanilla JS — No Libraries, No Server, 202 Tests

Dev Nestio — Sat, 27 Jun 2026 18:33:16 +0000

QR codes look like magic — a grid of black and white squares that encodes anything from a URL to a business card. But how do they actually work? I decided to find out the hard way: implement the full QR Code Model 2 algorithm in vanilla JavaScript, zero external dependencies.

The result: QR Code Generator — a free, client-side tool that generates QR codes from any text or URL.

👉 https://qr-code-generator-e83.pages.dev

Why No Libraries?

I maintain a collection of browser-only developer tools at devnestio. Every tool has the same rule: zero external dependencies. No npm installs, no CDN scripts, no servers.

For most tools (JSON diff, Base64 encoder, UUID generator) that's easy. QR codes are different. The spec is a 126-page ISO document. Most developers just npm install qrcode and call it a day.

But writing it from scratch taught me more about error-correcting codes, Galois field arithmetic, and matrix encoding than I ever expected. Worth every hour.

What the Tool Does

Real-time generation as you type (debounced at 80ms)
Size selector — 128 × 128, 256 × 256, or 512 × 512 pixels
Error correction level — L (7%), M (15%), Q (25%), H (30%)
Color picker — any foreground and background color
PNG download via canvas
SVG download with crisp vector output at any scale

How QR Codes Actually Work

QR Code Model 2 (the standard you see everywhere) has six major steps. Here's the short version:

1. Data Encoding

Text gets encoded into one of three modes based on content:

Numeric (0-9): packs 3 digits into 10 bits — most compact
Alphanumeric (0-9 A-Z $%*+-./:space): 2 chars into 11 bits
Byte (everything else): UTF-8, one byte per 8 bits

The encoder picks the mode automatically and finds the minimum QR version (1–40) that fits the data.

function detectMode(text) {
  if (/^\d+$/.test(text)) return NUMERIC_MODE;
  if (text.split('').every(c => ALPHANUMS.includes(c))) return ALPHANUM_MODE;
  return BYTE_MODE;
}

2. Reed-Solomon Error Correction

This is the hard part. QR codes can survive up to 30% damage (at ECL H) because of Reed-Solomon codes — the same algorithm used in CDs, DVDs, and deep-space transmissions.

RS encoding requires arithmetic in Galois Field GF(256), where numbers wrap around at 256 using polynomial division mod x⁸ + x⁴ + x³ + x² + 1 (0x11d):

const GF = (() => {
  const EXP = new Uint8Array(512);
  const LOG  = new Uint8Array(256);
  let x = 1;
  for (let i = 0; i < 255; i++) {
    EXP[i] = x;
    LOG[x] = i;
    x <<= 1;
    if (x & 0x100) x ^= 0x11d; // reduce mod primitive polynomial
  }
  for (let i = 255; i < 512; i++) EXP[i] = EXP[i - 255];
  return {
    mul(a, b) { return (a === 0 || b === 0) ? 0 : EXP[LOG[a] + LOG[b]]; },
    // ...
  };
})();

Multiplication in GF(256) becomes table lookups: mul(a, b) = EXP[LOG[a] + LOG[b]]. The EXP and LOG tables are precomputed once, making the encoder fast.

3. Data Interleaving

For larger QR versions, data is split into multiple blocks, each with its own RS error-correction codewords. The blocks are then interleaved — one byte from block 1, one from block 2, etc. — so physical damage (a scratch across the code) hits different blocks and can be recovered.

4. Matrix Construction

A QR code matrix (21×21 for version 1, up to 177×177 for version 40) has:

Finder patterns — the three 7×7 squares in the corners
Alignment patterns — smaller squares for versions 2+
Timing patterns — alternating dark/light rows/columns for calibration
Format information — ECL and mask pattern, BCH(15,5) encoded
Version information — for versions 7+, BCH(18,6) encoded
Data modules — placed in a specific zigzag path

5. Masking

QR scanners struggle with large solid areas or repetitive patterns. The spec defines 8 mask functions (e.g., (row + col) % 2 === 0). The encoder tries all 8, scores each using a 4-rule penalty system, and picks the lowest-penalty mask:

const MASK_FNS = [
  (r,c) => (r+c)%2===0,
  (r,c) => r%2===0,
  (r,c) => c%3===0,
  (r,c) => (r+c)%3===0,
  (r,c) => (Math.floor(r/2)+Math.floor(c/3))%2===0,
  (r,c) => (r*c)%2+(r*c)%3===0,
  (r,c) => ((r*c)%2+(r*c)%3)%2===0,
  (r,c) => ((r+c)%2+(r*c)%3)%2===0
];

6. Format Info Placement

The chosen ECL and mask index are BCH-encoded into a 15-bit format string and written to reserved areas around the top-left finder pattern and mirrored at the top-right and bottom-left finders. I precomputed all 32 possible values to keep the runtime code simple.

Testing: 202 Cases, Node.js Built-in Only

The test suite covers every layer of the algorithm:

Section	Tests	What's covered
GF(256) arithmetic	14	mul, div, pow, inv, tables
RS generator	8	polynomial degree, known vector
Mode detection	12	numeric/alphanumeric/byte edge cases
UTF-8 encoding	10	ASCII, 2/3/4-byte codepoints
Data capacity table	10	versions 1–40, all 4 ECL levels
charCountBits	9	bit width transitions at v9/v26
encodeData version selection	12	min version, overflow, max inputs
BitStream	8	append, byte packing, alignment
generateQR shape	12	matrix dimensions, null inputs
Module values	10	0/1 only, finder pattern positions
Version sizes	8	size = version × 4 + 17
Mask patterns	8	all 8 mask functions
Version info BCH	6	known spec values (v7–v10, v40)
Format strings	6	known spec values (all ECL levels)
Alignment positions	6	v1, v2, v7, v40
Codeword interleaving	6	total length = data + EC
ECL level comparisons	8	same text, increasing ECL = higher ver
Known RS vector	6	exact byte match from QR spec
Finder pattern modules	8	dark/light positions verified
Edge cases	6	emoji, long URLs, whitespace
ECL stress	6	version ordering across L/M/Q/H
Null input handling	4	null/undefined/empty/overflow

No Jest, no Mocha, no assert module — just a 30-line test runner I wrote inline.

The Hardest Bug

The format info placement had a subtle off-by-one. The spec places bits 0–5 of the 15-bit format word in rows 0–5 of column 8, bit 7 in row 7, and bit 8 in row 8. I had the bit ordering reversed for the horizontal vs vertical copies, which produced valid-looking (but wrong) format areas.

The fix: explicitly write each position separately rather than looping symmetrically.

Try It

https://qr-code-generator-e83.pages.dev

The full source is a single index.html — open DevTools and read through it. No build step, no framework, no minification. It's all there.

Also part of devnestio — a growing collection of zero-dependency developer tools.

Built with: vanilla JS, a copy of the QR Code ISO standard, and too much coffee.

I Built a Browser-Only YAML Formatter & Validator (No Dependencies, Works Offline)

Dev Nestio — Sat, 27 Jun 2026 17:57:23 +0000

If you work with Kubernetes manifests, Docker Compose files, or GitHub Actions workflows, you know the pain: you kubectl apply something, and only then discover there's a bad indentation on line 47.

I built a YAML Formatter & Validator that catches those errors before you ever leave your browser tab.

👉 https://devnestio.pages.dev/yaml-formatter/

Why Yet Another YAML Tool?

Most online YAML validators do the job, but they send your config files to a server. When you're working with cloud infrastructure configs — Kubernetes secrets, Helm values, Terraform variables — sending those to a third-party feels wrong.

This tool runs entirely in the browser. No server, no external libraries, no network requests. Paste your YAML, get instant feedback.

What It Does

Format & Normalize Indentation

Paste any YAML with inconsistent indentation and it normalizes to clean 2-space format instantly:

# Input (messy indentation)
name: John
address:
 street: "123 Main St"
  city: Springfield

# Output (normalized)
name: John
address:
  street: 123 Main St
  city: Springfield

Validate with Line Numbers

When there's a syntax error, you get the exact line:

Error: bad indentation of a mapping entry at line 4, column 3

That's far more useful than kubectl apply's generic "Invalid YAML" message.

Bidirectional YAML ↔ JSON Conversion

Need your Kubernetes manifest in JSON? Or have terraform output -json output you want to convert to YAML? Both directions are one click.

# YAML
server:
  host: localhost
  port: 8080
  debug: true

{
  "server": {
    "host": "localhost",
    "port": 8080,
    "debug": true
  }
}

Minify

Strip comments and output compact JSON — handy for embedding values in CI/CD pipelines.

What YAML Structures Are Supported?

The parser is hand-written (no js-yaml), so here's the honest coverage:

✅ Nested mappings (deep Kubernetes spec nesting)
✅ Sequences (- item notation)
✅ Block scalars (| literal, > folded)
✅ Quoted strings (single and double)
✅ Inline comments
✅ Numbers, booleans, null with proper type detection
⚠️ Anchors (&anchor) and aliases (*alias) — partial support

Why No External Libraries?

js-yaml would make this trivially easy, but devnestio's rule is: single HTML file, zero external dependencies.

Two reasons:

Trust — CDN scripts could theoretically send your data somewhere. Removing all external scripts eliminates that concern.
Offline — After the first load, it works entirely from browser cache. Useful in VPN environments, airplanes, or restricted staging environments.

The parser was built with AI assistance (Claude Code sessions with detailed PRDs), validated with 114/114 passing tests.

Try It

If you work with YAML daily — k8s, Docker, GitHub Actions, Helm — keep this tab open:

👉 YAML Formatter & Validator — devnestio

All tools: https://devnestio.pages.dev

Feedback on edge cases (especially unusual YAML structures) is very welcome in the comments.

I Built a UUID Generator Using crypto.randomUUID() (Why Math.random() Is the Wrong Choice)

Dev Nestio — Sat, 27 Jun 2026 17:56:11 +0000

UUID generators are everywhere. Most of them work. But a surprising number use Math.random() under the hood, which is not cryptographically random — it's a pseudorandom number generator seeded from system time.

I built a UUID Generator using crypto.randomUUID() and crypto.getRandomValues(), with bulk generation, copy support, and format options. All in the browser.

👉 https://uuid-generator-bsf.pages.dev/

Why `crypto.randomUUID()` and Not `Math.random()`?

For UUIDs used as database primary keys or session identifiers, the uniqueness guarantee matters. Math.random() is deterministic given the same seed and is not suitable for security-sensitive random number generation.

crypto.randomUUID() uses a CSPRNG (cryptographically secure pseudorandom number generator) internally and produces a properly formatted v4 UUID per RFC 4122:

const uuid = crypto.randomUUID();
// "f47ac10b-58cc-4372-a567-0e02b2c3d479"

Position 13 is always 4 (version), and position 17 is always 8, 9, a, or b (variant). The spec guarantees this. Math.random() implementations don't.

Fallback for Older Environments

For environments without crypto.randomUUID(), there's a manual implementation using crypto.getRandomValues():

function uuidv4Fallback() {
  const b = crypto.getRandomValues(new Uint8Array(16));
  b[6] = (b[6] & 0x0f) | 0x40; // version 4
  b[8] = (b[8] & 0x3f) | 0x80; // variant
  const h = [...b].map(x => x.toString(16).padStart(2, "0"));
  return `${h.slice(0,4).join("")}-${h.slice(4,6).join("")}-${h.slice(6,8).join("")}-${h.slice(8,10).join("")}-${h.slice(10).join("")}`;
}

Setting version and variant bits manually ensures the output is a valid v4 UUID even without the high-level API.

What the Tool Includes

Single UUID generation — one click, instantly copied
Bulk generation — specify a count, get a list; useful for seeding test databases
Per-UUID copy and copy all buttons
Uppercase/lowercase toggle — some systems require uppercase UUIDs
Hyphen toggle — some APIs want f47ac10b58cc4372a5670e02b2c3d479 without separators
Fully offline — generation never touches a network

Validated Against Format Requirements

Test coverage includes:

Version bit: position 13 is always 4
Variant bit: position 17 is always 8, 9, a, or b
Total length: always 36 characters (32 hex + 4 hyphens)
Bulk generation: 10,000 UUIDs produced with zero duplicates
Uppercase/lowercase and hyphen modes produce correct output formats

58/58 passing tests.

No Framework, No External Libraries

A UUID generator has one meaningful state: the list of generated UUIDs. There's no component hierarchy, no data flow, no need for a virtual DOM. A single HTML file with ~100 lines of vanilla JS handles it.

This is devnestio's standard: single HTML file, zero CDN dependencies. After the first page load, it works entirely from browser cache — offline, on a plane, in a restricted environment.

What's Next

UUID v7 support — time-sortable UUIDs, increasingly popular as database primary keys
ULID generation — another time-ordered unique ID format
UUID validation and parsing — check whether a string is a valid UUID and what version

UUID v7 is particularly interesting: it encodes the timestamp in the first 48 bits, making them naturally sortable by creation time without a separate created_at column. Worth adding if there's demand.

Try It

For test data, mock APIs, or any time you need a few UUIDs without opening a terminal:

👉 UUID Generator — devnestio

All tools: https://devnestio.pages.dev

No ads, no server, no tracking. Just UUIDs.

DEV Community: Dev Nestio

I Built a Visual CSS Box Shadow Generator — Multi-Layer, Inset, Presets, 125 Tests

I Built a Visual CSS Box Shadow Generator — Multi-Layer, Inset, Presets, 125 Tests

What the tool does

The CSS box-shadow value format

Architecture: pure functions for testability

125 tests, zero framework

The neumorphic preset is interesting

Opacity is a slider, not a hex alpha

Running locally

The tool

I Built a Visual CSS Gradient Generator in Pure Vanilla JS — Linear, Radial & Conic, 150 Tests

I Built a Visual CSS Gradient Generator in Pure Vanilla JS — Linear, Radial & Conic, 150 Tests

What the tool does

Architecture: pure functions for testability

150 tests, zero dependencies

The conic gradient type is underrated

The -webkit- prefix question

Running locally

The tool

I Built a Browser-Only IP / CIDR Calculator — IPv4 & IPv6, Subnet Split, Binary Breakdown (136 Tests)

What it calculates

The math: IPv4 bit operations

Edge cases worth knowing

The math: IPv6 with BigInt

IPv6 compression/expansion

Binary visualization

Subnet splitting

Testing: 136 tests, plain node

Tech used

Try it

I Built a Browser-Only Favicon Generator — Text, Emoji & SVG to ICO/PNG (136 Tests, Zero Dependencies)

What it does

The interesting bits

ICO format from scratch

ZIP format from scratch (STORE method)

Emoji rendering

Auto-contrast via WCAG 2.1

Testing: 136 tests, zero test framework

Tech used

Try it

I Built a Unit Converter in Pure Vanilla JS — 7 Categories, 70+ Units, 165 Tests, Zero Dependencies

What It Does

Implementation Notes

Linear vs. non-linear conversions

SI vs. binary data units

Number formatting

Testing

Try It

I Built a Text Diff Tool in Pure Vanilla JS — Myers Algorithm from Scratch, 129 Tests, Zero Dependencies

What It Does

The Algorithm: Myers Diff

Implementation Details

Testing

What I Learned

Try It

I Built a Visual Chmod Calculator in Pure Vanilla JS — Checkboxes ↔ Numeric ↔ Symbolic, 222 Tests

What It Does

The Core Logic

Numeric → Symbolic

Symbolic → Numeric

Why s vs S — and t vs T

Octal formatting

Binary representation

Keeping All Representations in Sync

Common Permissions Reference

Testing Without a Framework

Try It

I Built a Browser-Only HTML Entity Encoder/Decoder — Named, Decimal & Hex, 246 Tests

What It Does

The Core: Encoding in Three Modes

The Decode Regex

Building the Entity Maps

What's in the 253-entity Map

Testing: 246 Cases, No Framework

A Subtle Edge Case: Prototype Pollution in Decode

Try It

I Built a Color Picker & Palette Generator in Pure Vanilla JS — No Libraries, 187 Tests

What It Does

The Color Math

The `-webkit-` prefix question

Testing: 136 tests, plain `node`

Why `s` vs `S` — and `t` vs `T`

Why `crypto.randomUUID()` and Not `Math.random()`?