Brad Dougherty bdougherty

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

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.

Using `<details>` in GitHub

Suppose you're opening an issue and there's a lot noisey logs that may be useful.

Rather than wrecking readability, wrap it in a <details> tag!

<details>
 Summary Goes Here

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

~~Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.~~

Parens And Performance

Years ago, some smart folks that worked on JS engines realized that not all JS that's loaded into a page/app initially is needed right away. They implemented JIT to optimize this situation.

JIT means Just-In-Time, which means essentially that the engine can defer processing (parsing, compiling) certain parts of a JS program until a later time, for example when the function in question is actually needed. This deferral means the engine is freer to spend the important cycles right now on the code that's going to run right now. This is a really good thing for JS performance.

Some time later, some JS engine devs realized that they needed to get some hints from the code as to which functions would run right away, and which ones wouldn't. In technical speak, these hints are called heuristics.

So they realized that one very common pattern for knowing that a function was going to run right away is if the first character before the function keyword was a (, because that usually m

	##################
	# Privacy Settings
	##################

	# Privacy: Let apps use my advertising ID: Disable
	Set-ItemProperty -Path HKCU:\SOFTWARE\Microsoft\Windows\CurrentVersion\AdvertisingInfo -Name Enabled -Type DWord -Value 0
	# To Restore:
	#Set-ItemProperty -Path HKCU:\SOFTWARE\Microsoft\Windows\CurrentVersion\AdvertisingInfo -Name Enabled -Type DWord -Value 1
	# Privacy: SmartScreen Filter for Store Apps: Disable
	Set-ItemProperty -Path HKCU:\SOFTWARE\Microsoft\Windows\CurrentVersion\AppHost -Name EnableWebContentEvaluation -Type DWord -Value 0

	// ES6 meta programming ???

	// The more complex form of ES6 template strings are called
	// "tagged" template strings. In short, they allow you to
	// pass the final evaluated string to a function for further
	// processing. This allows for some interesting things. For example:
	//
	// get`https://api.github.com/repos/${org}/${repo}/issues?sort=${sort}`;
	//
	// _could_ make a network request and return a Promise with the result

	'use strict';

	// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
	// http://creativecommons.org/publicdomain/zero/1.0/

	(function() {

	// Update 'version' if you need to refresh the cache
	var staticCacheName = 'static';
	var version = 'v1::';

	// only polyfill .finished in browsers that already support animate()
	if (document.body.animate) {

	// Chrome does not seem to expose the Animation constructor globally
	if (typeof Animation === 'undefined') {
	window.Animation = document.body.animate({}).constructor;
	}

	if (Animation.prototype.finished === undefined) {
	Object.defineProperty(Animation.prototype, 'finished', {

	# Description: Boxstarter Script
	# Author: Jess Frazelle <[email protected]>
	# Last Updated: 2017-09-11
	#
	# Install boxstarter:
	# . { iwr -useb http://boxstarter.org/bootstrapper.ps1 } \| iex; get-boxstarter -Force
	#
	# You might need to set: Set-ExecutionPolicy RemoteSigned
	#
	# Run this boxstarter by calling the following from an elevated command-prompt: