Christopher Van Wiemeersch cvan

Installing Node.js live-server

The NodeJS live-server package runs a temporary server displaying any HTML/CSS/JS resources in the current folder. It automatically reloads the page in your browser when any of these files change.

OS X

Verify that Node.js is installed. If you see anything when you run which npm in a terminal, it is. If not, follow the instructions at nodejs.org to install.
Install live-server: npm install -g live-server
Move your terminal to where your pages live: cd <path-to-content>
Start the server: live-server .

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

Encoding Video

Installing

Install FFmpeg with homebrew. You'll need to install it with a couple flags for webm and the AAC audio codec.

brew install ffmpeg --with-libvpx --with-libvorbis --with-fdk-aac --with-opus

Navigation and Resource Timing provides timing data for the fetch, but currently there is no interoperable way for the server to communicate own timing information to the client. For example:

What steps were taken to generate the resource, and how long each took. Many sites already embed this type of information via HTML comments - e.g. wordpress emits  , and many sites provide more detailed stats (cache, db, generation) to enable performance debugging.
If proxied, where was the time spent - e.g. time to fetch from origin, time to process response, etc.

Instead of relying on arbitrary HTML comments, we can define an HTTP header that can be used to send key-value pairs in a well defined format. Making this data available via a well defined interface would...

Allow UA and other developer tools to automatically annotate appropriate timelines.
Allow analytics vendors to gather this data for operational analysis.
Allows proxies and CDNs to append custom timing d


	<!doctype html>
	<html>
	<head>
	<title>Isomorphic Three.js</title>
	<style>
	html, body {
	height: 100%;
	height: 100vh;
	padding: 0;

	(function() {
	var requests = window.performance.getEntries();
	var hosts = {};
	var output = "";

	for(var requestIdx = 0; requestIdx < requests.length; requestIdx++) {
	var request = requests[requestIdx];
	var origin = new URL(request.name).origin;

	hosts[origin] = 1;

	#!/bin/bash
	# First, install ncat: http://nmap.org/ncat/
	# Usually comes with the 'nmap' package on distributions.

	ncat -k -v -l -p 5555 -c 'ipfs refs local \| gzip'

	# To retrieve on the client machine:
	# nc 127.0.0.1 5555 \| gunzip \| ipfs pin add -r

	/* base font size + viewport height + viewport width */
	h1 {
	font-size: calc(2rem + 4vh + 4vw);
	}

	/* responsive font-size responsive */
	html {
	font-size: calc(100% + .2vh + .2vw);
	}

	// Today:
	var some_object = {'error': 'hey'};
	console.error('oh no blah blah ' + some_object);
	// prints: oh no blah blah [object Object]

	// But then debug:
	Object.prototype.valueOf = function() {return JSON.stringify(this);};

	// then later
	var some_object = {'error': 'hey'};