John Michel johnmichel

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.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Last updated: 2017-03-18

Searching for Files

Find images in a directory that don't have a DateTimeOriginal

exiftool -filename -filemodifydate -createdate -r -if '(not $datetimeoriginal) and $filetype eq "JPEG"' .

###Output photos that don't have datetimeoriginal to a CSV### Note this can take a long time if you have a lot of jpgs

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

Spurred by recent events (https://news.ycombinator.com/item?id=8244700), this is a quick set of jotted-down thoughts about the state of "Semantic" Versioning, and why we should be fighting the good fight against it.

For a long time in the history of software, version numbers indicated the relative progress and change in a given piece of software. A major release (1.x.x) was major, a minor release (x.1.x) was minor, and a patch release was just a small patch. You could evaluate a given piece of software by name + version, and get a feeling for how far away version 2.0.1 was from version 2.8.0.

But Semantic Versioning (henceforth, SemVer), as specified at http://semver.org/, changes this to prioritize a mechanistic understanding of a codebase over a human one. Any "breaking" change to the software must be accompanied with a new major version number. It's alright for robots, but bad for us.

SemVer tries to compress a huge amount of information — the nature of the change, the percentage of users that wil

	const I = x => x
	const K = x => y => x
	const A = f => x => f (x)
	const T = x => f => f (x)
	const W = f => x => f (x) (x)
	const C = f => y => x => f (x) (y)
	const B = f => g => x => f (g (x))
	const S = f => g => x => f (x) (g (x))
	const S_ = f => g => x => f (g (x)) (x)
	const S2 = f => g => h => x => f (g (x)) (h (x))

	// http://www.haskellforall.com/2013/02/you-could-have-invented-comonads.html

	const daggy = require('daggy');
	const {toUpper, prop, identity, range, curry, compose} = require('ramda');

	const Config = daggy.tagged("opts")

	Config.prototype.inspect = function() {
	return `Config(${this.opts})`
	}

	var active = false;

	function changeRefer(details) {
	if (!active) return;

	for (var i = 0; i < details.requestHeaders.length; ++i) {
	if (details.requestHeaders[i].name === 'Referer') {
	details.requestHeaders[i].value = 'http://www.google.com/';
	break;
	}

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

	var R = require('ramda');

	// `proxy` is a function to allow for point-free recursion in JavaScrpipt
	// it takes in a function name as a string, and returns a proxy function to the original function
	var factorial = R.ifElse(
	R.eq(0), R.always(1),
	R.converge(R.multiply, R.I, R.compose(proxy('factorial'), R.dec))
	);

	factorial(0);