David Aerne meodai

Don't use VPN services.

No, seriously, don't. You're probably reading this because you've asked what VPN service to use, and this is the answer.

Note: The content in this post does not apply to using VPN for their intended purpose; that is, as a virtual private (internal) network. It only applies to using it as a glorified proxy, which is what every third-party "VPN provider" does.

A Russian translation of this article can be found here, contributed by Timur Demin.
A Turkish translation can be found here, contributed by agyild.
There's also this article about VPN services, which is honestly better written (and has more cat pictures!) than my article.

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

	#!/bin/bash

	# you need httpie (apt-get install httpie)
	# you need to replace <these things> with your details
	# run with 'source' to export vars to your shell for experimentation

	# 1. authenticate to get an access token

	auth_server=https://authserver.mojang.com
	user=<your login email>

	#!/usr/bin/env bash

	VERSION=4.0.1
	SCRIPT=`basename "$0"`
	APPNAME="My App"
	APPICONS="/System/Library/CoreServices/CoreTypes.bundle/Contents/Resources/GenericApplicationIcon.icns"
	OSX_VERSION=`sw_vers -productVersion`
	PWD=`pwd`

	function usage {

	'use strict';

	const FIELD_TYPE_BLACKLIST = ['file', 'reset', 'submit', 'button'];

	const isFieldSerializable = (field) => field.name && FIELD_TYPE_BLACKLIST.indexOf(field.type) === -1

	const formFieldsReducer = (state, field) => {
	if (!isFieldSerializable(field)) {
	return state;
	}

	// calculates the checkdigit number of Swiss Invoice codes
	function calc_digit(number) {
	var table = [0, 9, 4, 6, 8, 2, 7, 1, 3, 5];
	var uebertrag = 0;

	for (var i = 0; i < number.length; i++) {

	c = parseInt(number.substring(i, i + 1), 10);
	index = (uebertrag + c) % 10;

	#ifndef __LAB_COLORSPACE__
	#define __LAB_COLORSPACE__

	/*
	* Conversion between RGB and LAB colorspace.
	* Import from flowabs glsl program : https://code.google.com/p/flowabs/source/browse/glsl/?r=f36cbdcf7790a28d90f09e2cf89ec9a64911f138
	*/

	float3 rgb2xyz( float3 c ) {
	float3 tmp;

	// Preview online
	// http://www.deathbysoftware.com/colors/index.html

	function rgb2ryb ( iRed, iGreen, iBlue )
	{
	// Remove the white from the color
	var iWhite = Math.min( iRed, iGreen, iBlue );

	iRed -= iWhite;
	iGreen -= iWhite;

	// https://github.com/caillou/motion-synth


	// If you have a computer, open the
	// dev tools and type this:
	ctx = new AudioContext();
	osc = ctx.createOscillator();

	// Try 'triange', 'sawtooth', 'sine'
	osc.type = 'square';

	/* 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)); };