modster/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        font-size: large;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
          sans-serif;
        font-weight: 300;
      }
    </style>
  </head>
  <body>
    <button id="btnRun">Show Digits</button>
    <ol>
      <li>[1e7] + -1e3 + -4e3 + -8e3 + -1e11 converted to a string.</li>
      <li>
        For each 0, 1, or 8 in the original string.
        `10000000-1000-4000-8000-100000000000`
      </li>
      <li>new Uint8Array(1) creates 8-bit TypedArray [00000000]</li>
      <li>
        crypto.getRandomValues(TypedArray) fill TypedArray with a random
        number(s) 0-255. 1 per array index.
      </li>
      <li>Take first random number from TypedArray [0].</li>
      <li>c/4 = 0 || 0.25 || 2</li>
      <li>15 >> 0 || 0 || 2 = 1111 || 1111 || 0011</li>
      <li>random number from step 5, AND & 1111 || 1111 || 0011</li>
      <li>c (0000 | 0001 | 0101) XOR ^ result</li>
    </ol>
    <pre></pre>
    <code
      >let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => (
      c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
      ).toString(16) );</code
    >
    <script>
      const pre = document.querySelector('pre');
      const btn = document.getElementById('btnRun');
      btn.addEventListener('click', getDist);

      function getDist(ev) {
        let str = [1e7] + -1e3 + -4e3 + -8e3 + -1e11;
        pre.textContent = [1e7] + -1e3 + -4e3 + -8e3 + -1e11 + '\n';
        let result = str.replace(/[018]/g, (c) => {
          let rand = crypto.getRandomValues(new Uint8Array(1))[0]; //random 0 -255
          let shifted = 15 >> (c / 4);
          let ANDed = rand & shifted;
          let XORed = c ^ ANDed;
          let digit = XORed.toString(16);
          pre.textContent += `Hex digit is ${digit}\n`;
          // pre.textContent += `************** \n`;
          return digit;
        });
        pre.textContent += 'crypto.getRandomValues() ' + result + '\n';

        //OR the newer randomUUID method
        if (crypto && 'randomUUID' in crypto) {
          pre.textContent +=
            'NEW crypto.randomUUID() ' + crypto.randomUUID() + '\n';
        }
      }
    </script>
  </body>
</html>

## uuid.mjs
import crypto from 'crypto';

if (crypto) {
  let id;
  if (false && 'randomUUID' in crypto) {
    console.log('randomUUID');
    id = crypto.randomUUID();
  } else {
    console.log('getRandomValues');
    id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
      (
        c ^
        (crypto.webcrypto.getRandomValues(new Uint8Array(1))[0] &
          (15 >> (c / 4)))
      ).toString(16)
    );
    //in the browser it is crypto.getRandomValues(new Uint8Array(1))[0]
  }
  console.log(id);
} else {
  console.log('no support for crypto');
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
	html {
	font-size: large;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
	Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
	sans-serif;
	font-weight: 300;
	}
	</style>
	</head>
	<body>
	<button id="btnRun">Show Digits</button>
	<ol>
	<li>[1e7] + -1e3 + -4e3 + -8e3 + -1e11 converted to a string.</li>
	<li>
	For each 0, 1, or 8 in the original string.
	`10000000-1000-4000-8000-100000000000`
	</li>
	<li>new Uint8Array(1) creates 8-bit TypedArray [00000000]</li>
	<li>
	crypto.getRandomValues(TypedArray) fill TypedArray with a random
	number(s) 0-255. 1 per array index.
	</li>
	<li>Take first random number from TypedArray [0].</li>
	<li>c/4 = 0 \|\| 0.25 \|\| 2</li>
	<li>15 >> 0 \|\| 0 \|\| 2 = 1111 \|\| 1111 \|\| 0011</li>
	<li>random number from step 5, AND & 1111 \|\| 1111 \|\| 0011</li>
	<li>c (0000 \| 0001 \| 0101) XOR ^ result</li>
	</ol>
	<pre></pre>
	<code
	>let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => (
	c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
	).toString(16) );</code
	>
	<script>
	const pre = document.querySelector('pre');
	const btn = document.getElementById('btnRun');
	btn.addEventListener('click', getDist);

	function getDist(ev) {
	let str = [1e7] + -1e3 + -4e3 + -8e3 + -1e11;
	pre.textContent = [1e7] + -1e3 + -4e3 + -8e3 + -1e11 + '\n';
	let result = str.replace(/[018]/g, (c) => {
	let rand = crypto.getRandomValues(new Uint8Array(1))[0]; //random 0 -255
	let shifted = 15 >> (c / 4);
	let ANDed = rand & shifted;
	let XORed = c ^ ANDed;
	let digit = XORed.toString(16);
	pre.textContent += `Hex digit is ${digit}\n`;
	// pre.textContent += `************** \n`;
	return digit;
	});
	pre.textContent += 'crypto.getRandomValues() ' + result + '\n';

	//OR the newer randomUUID method
	if (crypto && 'randomUUID' in crypto) {
	pre.textContent +=
	'NEW crypto.randomUUID() ' + crypto.randomUUID() + '\n';
	}
	}
	</script>
	</body>
	</html>
	import crypto from 'crypto';

	if (crypto) {
	let id;
	if (false && 'randomUUID' in crypto) {
	console.log('randomUUID');
	id = crypto.randomUUID();
	} else {
	console.log('getRandomValues');
	id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
	(
	c ^
	(crypto.webcrypto.getRandomValues(new Uint8Array(1))[0] &
	(15 >> (c / 4)))
	).toString(16)
	);
	//in the browser it is crypto.getRandomValues(new Uint8Array(1))[0]
	}
	console.log(id);
	} else {
	console.log('no support for crypto');
	}