cferdinandi/about.html Secret

## about.html
<h2>Hi, I'm Chris Ferdinandi.</h2>

<p><strong>I help people learn vanilla JavaScript,</strong> and I believe there’s a simpler, more resilient way to make things for the web.</p>

## index.html
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Includes</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<style type="text/css">
			body {
				margin: 0 auto;
				max-width: 40em;
				width: 88%;
			}
		</style>
	</head>

	<body>

		<h1>Hate the complexity of modern front-end web development?</h1>

		<p>Me too! I send out a short email each weekday on how to build a simpler, more resilient web. Join over 13k others.</p>


		<include-html path="about.html">
			<a href="about.html">Learn more about me.</a>
		</include-html>


		<script>
			// Extend the HTMLElement class to create the web component
			class IncludeHTML extends HTMLElement {

				/**
				 * The class constructor object
				 */
				constructor () {

					// Always call super first in constructor
					super();

					// Get the source HTML to load
					let path = this.getAttribute('path');
					if (!path) return;

					// Render HTML
					this.innerHTML = `<iframe src="${path}" onload="this.before(...(this.contentWindow.document.body||this.contentWindow.document).children);this.remove()">`;

				}

			}

			// Define the new web component
			if ('customElements' in window) {
				customElements.define('include-html', IncludeHTML);
			}
		</script>

	</body>
</html>
	<h2>Hi, I'm Chris Ferdinandi.</h2>

	<p><strong>I help people learn vanilla JavaScript,</strong> and I believe there’s a simpler, more resilient way to make things for the web.</p>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Includes</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style type="text/css">
	body {
	margin: 0 auto;
	max-width: 40em;
	width: 88%;
	}
	</style>
	</head>

	<body>

	<h1>Hate the complexity of modern front-end web development?</h1>

	<p>Me too! I send out a short email each weekday on how to build a simpler, more resilient web. Join over 13k others.</p>


	<include-html path="about.html">
	<a href="about.html">Learn more about me.</a>
	</include-html>


	<script>
	// Extend the HTMLElement class to create the web component
	class IncludeHTML extends HTMLElement {

	/**
	* The class constructor object
	*/
	constructor () {

	// Always call super first in constructor
	super();

	// Get the source HTML to load
	let path = this.getAttribute('path');
	if (!path) return;

	// Render HTML
	this.innerHTML = `<iframe src="${path}" onload="this.before(...(this.contentWindow.document.body\|\|this.contentWindow.document).children);this.remove()">`;

	}

	}

	// Define the new web component
	if ('customElements' in window) {
	customElements.define('include-html', IncludeHTML);
	}
	</script>

	</body>
	</html>