Peter Briers peebeebee

Keybase proof

I hereby claim:

I am peebeebee on github.
I am pbriers (https://keybase.io/pbriers) on keybase.
I have a public key ASDdTj8q8k5jVlvpVUzcZpR7u5Dmp-2AfrchRRy-PhBxRgo

To claim this, I am signing this object:

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
elem.getClientRects(), elem.getBoundingClientRect()

Canvas Experiments 006

A Pen by Peter Briers on CodePen.

License.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>DOM Stress Test (Auto)</title>
	<style>
	body {
	margin: 0;
	font-family: monospace;
	overflow: hidden;

	const body = document.body;
	const hero = document.querySelector('.hero').cloneNode(true);
	const materials = document.querySelector('.project-materials').cloneNode(true);
	const article = document.querySelector('.project-steps').cloneNode(true);

	body.innerHTML = `<style>
	.step-type {
	page-break-inside: avoid;
	}

	const roman = 'XXVIV';
	const mapping = {'X': 10, 'I': 1, 'V': 5}; // add stuff
	const total = roman.split('').map(el => mapping[el]).reduce((acc, curr, i, src) => {
	let prev = src[i-1];
	return (prev && curr > prev)
	? acc - prev + (curr-prev)
	: acc + curr;
	}, 0);

	:) Krijg een brief over de "MijnVoorkeuren" service van bPost.
	:( Ga online om voorkeuren in te geven. Service down...
	:) Probeer de dag nadien opnieuw. Lukt om Cubee-punt als voorkeur in te stellen.
	:( Volgende pakketjes komen nog steeds niet aan in Cubee-punt.
	:\| Krijg opnieuw melding om "MijnVoorkeuren" aan te vullen, want nu kan er meer informatie worden ingegeven ed...
	:( Volgend pakketje laat de postbode laat gewoon een papiertje achter zonder aan te bellen. Ik was thuis!
	:) Papiertje bevat 2 adressen: Cubee-punt, of het postkantoor (als het niet in het postkantoor ligt)
	:( Ga naar Cubee-punt. Pakje niet daar.
	:( Ga naar Post-kantoor. Pakje niet daar.
	:( Pakje ligt op een ander postpunt, niet vermeld op het papiertje.

	# A functional and reactive JavaScript framework for cleaner code
	http://cycle.js.org/

	# Elm
	http://elm-lang.org/

	# Closure
	http://clojurescript.org/

	INPUT="$1"
	OUTPUT=${INPUT%.*}.avi
	ffmpeg -i "$INPUT" -b:v 1M -vf scale=720:480 -c:v mpeg4 -vtag xvid "$OUTPUT"