jakearchibald

<script src="jquery.js" async id="jq-script"></script>
<script src="carousel-ui.js" async requires="#jq-script"></script>
<script src="dialog-ui.js" async requires="#jq-script"></script>

<!--
  All files load async in parallel.
  
  jquery.js will execute first of the three
  
  carousel-ui.js & dialog-ui.js will execute in load order after jquery.js

jakearchibald

What do you think this will output?

var div = document.createElement('div');
div.innerHTML = '<span>Hello world!</span>';
var span = div.firstChild;
div.innerHTML = '<span>Uh oh!</span>';
console.log(span.innerHTML);

jakearchibald

@keyframes zoom {
	from {
		transform: scale(0.1);
	}
	to {
		transform: scale(10) translate(-30px, 80px);
	}
}

img {

jakearchibald

.test, .test2 {
	width: 200px;
	height: 200px;
	background: green;
	border-radius: 500px;
	position: relative;
	transition: all 2s linear;
	left: 0;
	margin: 0 0 10px;
}

jakearchibald

.test, .test2 {
	font-family: sans-serif;
}
.test2 {
	transform: rotate(0.0001deg);
}
.test:hover {
	transition: all 5s linear;
	transform: translate(20px, 0);
}

jakearchibald

.test, .test2 {
	width: 200px;
	height: 200px;
	background: green;
	border-radius: 500px;
	position: relative;
	transition: all 2s linear;
	left: 0;
	margin: 0 0 10px;
}

jakearchibald

.test, .test2 {
	width: 200px;
	height: 200px;
	background: green;
	border-radius: 500px;
	position: relative;
	transition: all 2s linear;
}
.test2:hover {
	transform: translate(20px, 0);

jakearchibald

document.body.addEventListener('error', function(event) {
	if ( event.target.nodeName.toLowerCase() == 'img' ) {
		// an image on the page failed to load
	}
}, true);

jakearchibald

.outer {
	width: 5000px;
}
.inner {
	height: 50px;
	background: green;
	width: 5%;
}
.inner2 {
	height: 50px;

jakearchibald

<div class="whatever">
	<style>
		.whatever {
			p {
				margin: 0;
			}
		}

		/* Or even better... */
		:root {