<h1>Detection of MPU endianness (Big or Little Endian)</h1>
<h2>Your MPU/CPU is:<h2>
<div id="endianness" class="green"></div>
  <div id="info">
    Endianness basically means the order of bytes stored in memory.<br/>
    Nowadays Big Endian is mainly used in network protocols and embedded MPUs.<br/>
    Little Endian got popular because of Intel.<br/>
    <br/>
    Example: every pixel on screen has an <span class="green">RGBA</span> value (red, green, blue, alpha).<br/>
    Big Endian systems store such a number in memory also from left to right,<span class="green"> R G B A</span>.<br/>
    Little Endian systems store it from right to left, <span class="green">A B G R</span>.
  </div>

#endianness {border: 1px solid orange; padding: 0.3em;}
#info {margin-top: 2em; font-size: 0.8em;}
.green {color: green;}

function isBigEndian() {
  let buf = new ArrayBuffer(4);
  let u32data = new Uint32Array(buf);
  let u8data = new Uint8Array(buf);
  u32data[0] = 0xcafebabe;
  return u8data[0] === 0xca;
}

function start() {
  let cout = console.log;
  let output = document.getElementById("endianness");
  if (isBigEndian()) {
    cout("Yes, BIG!");
    output.innerText = "Big Endian 😎";
  } else {
    cout("Sorry, LITTLE.");
    output.innerText = "Little Endian 🙃";
  }
}

document.addEventListener("DOMContentLoaded", start);