Alfred Westerveld alfredwesterveld

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

Distributed Read-Write Mutex in Go

This project has moved to https://github.com/jonhoo/drwmutex so it can be imported into Go applications.

This is one chapter of my "Chrome Extension Workshops" tutorial, see the rest here: https://gist.github.com/caseywatts/8eec8ff974dee9f3b247

Unrelated update: my book is out! Debugging Your Brain is an applied psychology / self-help book

Making Bookmarklets

I'm feeling very clever. I've got this sweet line of javascript that replaces "cloud" with "butt". My mom would LOVE this, but she doesn't computer very well. I'm afraid to show her the Developer Console and have her type/paste this in. But she IS pretty good at bookmarks, she knows just how to click those!

A bookmark normally takes you to a new web page. A bookmarklet is a bookmark that runs javascript on the current page instead of taking you to a new page. To declare that it is a bookmarklet, the "location" it points to starts with javascript:.

	import {createServer} from 'http';
	function waitForChromeToTerminate() {
	let retry = 5;
	return new Promise((resolve, reject) => {
	const server = createServer();
	server.listen(9222);
	server.once('listening', () => {
	debug('Port is free')
	server.close(() => resolve());
	});

	'use strict';

	console.log('// loading function');

	const aws = require('aws-sdk');
	const s3 = new aws.S3({apiVersion: '2006-03-01'});
	const gzip = require('zlib').createGunzip();
	const fs = require('fs');

	// MIT Licensed
	// Author: jwilson8767

	/**
	* Waits for an element satisfying selector to exist, then resolves promise with the element.
	* Useful for resolving race conditions.
	*
	* @param selector
	* @returns {Promise}
	*/

	// load canvas with id 'c'
	const canvas = new fabric.Canvas('c');
	// use canvas height as the height limit
	var limit = canvas.height;

	var text = new fabric.Textbox('Some very long text');
	// set initial values
	text.set({
	top: margin,
	width: canvas.width,

	import numpy as np
	import cv2

	img = cv2.imread('background.jpg')
	overlay_t = cv2.imread('foreground_transparent.png',-1) # -1 loads with transparency

	def overlay_transparent(background_img, img_to_overlay_t, x, y, overlay_size=None):
	"""
	@brief Overlays a transparant PNG onto another image using CV2

	const fs = require('fs');
	const path = require('path');
	const spawn = require('child_process').spawn;
	const FPS = 60;
	const MICROSEC_PER_FRAME = Math.round(1000000 / FPS);
	if (process.argv.length < 3) {
	console.log(`node ${path.relative('.', process.argv[1])} [DevToolsProfile]`);
	process.exit(1);
	}
	let traceFile = path.resolve(process.argv[2]);

	#!/usr/bin/env bash
	#
	# wpt-side-by-side
	# ~~~~~~~~~~~~~~~~
	# Generate a side-by-side comparison video from two WebPageTest runs.
	#
	# Usage:
	# wpt-side-by-side WEBPAGETEST_URL_1 WEBPAGETEST_URL_2
	#
	# Requirements: