jakearchibald

Snow in canvas land

Other people's code is awful, and your own code from months previous counts as someone else's. With this and the festive spirit in mind, I dug up a canvas snow demo I made two years ago to see how bad my code really was.

Turns out the performance landscape has changed quite a bit, but after applying a couple of workarounds, best practices, and memory management, I got the demo running smoother than it ever did.

Ugh, I can't believe I just wrote "performance landscape". Anyway...

How does the demo work?

jakearchibald

Fun with Mutation Observers

I’ve been having a play around with Mutation Observers this morning, trying to work out when notifications happen and what happens when removing a node that was just added.

If you’re unfamiliar with Mutation Observers, they let you receive notifications when an element, or elements, have been modified in a particular way (here's an intro to Mutation Observers from Mozilla).

Observing mid-parsing

Consider this:

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 {