recursionbane

"Scar Tissues Make Relationships Wear Out"

04/26/2103. From a lecture by Professor John Ousterhout at Stanford, class CS142.

This is my most touchy-feely thought for the weekend. Here’s the basic idea: It’s really hard to build relationships that last for a long time. If you haven’t discovered this, you will discover this sooner or later. And it's hard both for personal relationships and for business relationships. And to me, it's pretty amazing that two people can stay married for 25 years without killing each other.

[Laughter]

> But honestly, most professional relationships don't last anywhere near that long. The best bands always seem to break up after 2 or 3 years. And business partnerships fall apart, and there's all these problems in these relationships that just don't last. So, why is that? Well, in my view, it’s relationships don't fail because there some single catastrophic event to destroy them, although often there is a single catastrophic event around the the end of the relation

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

Protractor and Performance Test

Protractor is the end to end test case runner for AngularJS. These end to end test cases can be repurposed to record performance metrics when the scenario is being run. This is a sample repository with an example of how this can be done.

Usage

Step 0 - Setup

Install all dependencies using npm install

Step 1 - Prepare configuration

Fork your own Gist

This is a script that adds a fully functional Fork button to your own Gist.

If a Fork button is already present in the page, this bookmarklet will set focus to it instead of adding another one.

The change is temporary and the button will disappear as soon as you navigate away from that Gist (clicking the Fork button does this for you as well). Meaning you will have to run the script every new page load.

Firefox

Copy the contents from bookmarklet.js, open Scracthpad (Ctrl+F4), paste it there. Back in browser, swwitch to tab with your Gist you want to fork. Back in Scratchpad, "Run" it. Save and/or bookmark the Scratchpad file for future use.

Each of these commands will run an ad hoc http static server in your current (or specified) directory, available at http://localhost:8000. Use this power wisely.

Discussion on reddit.

Python 2.x

$ python -m SimpleHTTPServer 8000

	<!-- View it live here: http://codepen.io/anon/pen/waZOjB -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
	<script type="text/javascript" src="https://cdn.rawgit.com/JustMaier/6ef7788709d675bd8230/raw/3d39d50e66d8d77e05656ed7dd09298be7e86f1f/ngClickCopy.js"></script>
	<script>
	angular.module('app', ['ngClickCopy'])
	</script>

	<div ng-app="app">
	<button ng-click-copy="Hello World">Copy</button>
	</div>

	function getWatchers(root) {
	root = angular.element(root \|\| document.documentElement);
	var watcherCount = 0;

	function getElemWatchers(element) {
	var isolateWatchers = getWatchersFromScope(element.data().$isolateScope);
	var scopeWatchers = getWatchersFromScope(element.data().$scope);
	var watchers = scopeWatchers.concat(isolateWatchers);
	angular.forEach(element.children(), function (childElement) {
	watchers = watchers.concat(getElemWatchers(angular.element(childElement)));

	app.directive('faFastScroll', ['$parse', function ($parse) {
	var Interval = function(min, max) {
	this.min = min \|\| 0;
	this.max = max \|\| 0;
	};

	Interval.prototype.clip = function(min, max) {
	if(this.max <= min \|\| this.min >= max) {
	this.min = this.max = 0;

	Regular expression cheat sheet for Varnish

	Varnish regular expressions are NOT case sensitive. Varnish uses POSIX
	regular expressions, for a complete guide, see: "man 7 regex"

	Basic matching:
	req.url ~ "searchterm"
	True if req.url contains "searchterm" anywhere.

	req.url == "searchterm"

	// Somewhere in your controllers for this given example

	// Example functions
	$scope.itemOnLongPress = function(id) {
	console.log('Long press');
	}

	$scope.itemOnTouchEnd = function(id) {
	console.log('Touch end');
	}