mtmckenna/roy.html

## roy.html
<!DOCTYPE html>
<title>Roy'z Thoughtz</title>
<body style="background-color: #000; color: #fff; background-image: url('orion.jpg'); background-size: 100%;">

  <img src="roy.png" style="height: 100px; float: left; padding-right: 10px;">

  <div style="font-style: italic; font-size: 30px; height: 100px;" class="roy-quote">
    I've seen things...
  </div>

  <p><button onclick="createExplodingBattlecruisers()">See Things People Wouldn't Believe!</button></p>

  <script>
    var battlecruisers = [];

    function createExplodingBattlecruisers() {
      for (var i = 0; i < 50; i++) {
        battlecruisers.push(addBattlecruiserToDom());
      }

      updateRoyQuote(battlecruisers.length);
    }

    function addBattlecruiserToDom() {
      var battlecruiser = document.createElement("img");
      battlecruiser.src = "battlecruiser-exploding-5.gif";

      // Add rando super long string to the element so the memory leak is obvious
      battlecruiser.data = new Array(100000).join("c-beams");

      var body = document.getElementsByTagName("body")[0];
      body.appendChild(battlecruiser);

      window.setTimeout(function() {
        body.removeChild(battlecruiser);
      }, Math.random() * 2000);

      return battlecruiser;
    }

    function updateRoyQuote(numberOfBattlecruisers) {
      var royQuote = "I've seen " + numberOfBattlecruisers + " attack ships on fire off the shoulder of Orion."
      document.getElementsByClassName("roy-quote")[0].innerText = royQuote;
    }
  </script>

  <h3>Links!</h3>
  <ul>
    <li>
      <a href="https://github.com/GoogleChrome/devtools-docs/blob/master/docs/demos/memory/example6.html" style="color: #fff" >Example from Google's memory profiling resources</a>
    </li>
    <li>
      <a href="https://www.youtube.com/watch?v=JdUq2opPY-Q" style="color: #fff" >The C-Beams Speech</a>
    </li>
  </ul>
</body>
	<!DOCTYPE html>
	<title>Roy'z Thoughtz</title>
	<body style="background-color: #000; color: #fff; background-image: url('orion.jpg'); background-size: 100%;">

	<img src="roy.png" style="height: 100px; float: left; padding-right: 10px;">

	<div style="font-style: italic; font-size: 30px; height: 100px;" class="roy-quote">
	I've seen things...
	</div>

	<p><button onclick="createExplodingBattlecruisers()">See Things People Wouldn't Believe!</button></p>

	<script>
	var battlecruisers = [];

	function createExplodingBattlecruisers() {
	for (var i = 0; i < 50; i++) {
	battlecruisers.push(addBattlecruiserToDom());
	}

	updateRoyQuote(battlecruisers.length);
	}

	function addBattlecruiserToDom() {
	var battlecruiser = document.createElement("img");
	battlecruiser.src = "battlecruiser-exploding-5.gif";

	// Add rando super long string to the element so the memory leak is obvious
	battlecruiser.data = new Array(100000).join("c-beams");

	var body = document.getElementsByTagName("body")[0];
	body.appendChild(battlecruiser);

	window.setTimeout(function() {
	body.removeChild(battlecruiser);
	}, Math.random() * 2000);

	return battlecruiser;
	}

	function updateRoyQuote(numberOfBattlecruisers) {
	var royQuote = "I've seen " + numberOfBattlecruisers + " attack ships on fire off the shoulder of Orion."
	document.getElementsByClassName("roy-quote")[0].innerText = royQuote;
	}
	</script>

	<h3>Links!</h3>
	<ul>
	<li>
	<a href="https://github.com/GoogleChrome/devtools-docs/blob/master/docs/demos/memory/example6.html" style="color: #fff" >Example from Google's memory profiling resources</a>
	</li>
	<li>
	<a href="https://www.youtube.com/watch?v=JdUq2opPY-Q" style="color: #fff" >The C-Beams Speech</a>
	</li>
	</ul>
	</body>