Colin Gourlay colingourlay

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

Scottish Tablet

Preparation time: 40 minutes
Total time: 3 hours
Makes: ~50 portions

Ingredients

1kg caster sugar
250g butter

Global traits, local components

The idea is to combine the best bit of global styling (reuse, small payload) and local styling (total isolation, first-class React syntax)

This is combined with the concept of traits: you can think of them as permitted property/value pairs. Instead of every component being able to have every CSS property available to it, you can reduce your permitted set to X font families, Y font-size + line-height pairs, Z foreground/background colour pairs, W padding amounts. This is based off my work using amcss on real projects — traits were the single key feature that kept me using AM.

The one-sentence explanation: A site defines a set of permitted visual features, all components are simply a combination of those features

Definitions

This is a rough spec for an implementation of a realtime virtual world using OpenStreetMap data and voxel.js. The basic idea is to encode feature data pulled from Mapbox vector tiles as overzoomed tiles, which can be represented as voxels. This allows for easy scalability, since it utilizes existing algorithms and architecture.

The initial implementation is going on here.

###general

1 voxel = 1 tile at zoom 17 = 1.1943 sq meters
the world is a 33,554,432 x 33,554,432 voxel grid
assume that a server is serving up vector tile pbfs at z15 (mapbox.com, local, etc.)
vector tiles are loaded at zoom 15 and geometry is encoded as 4096x4096 pixel coordinates, which is equivalent to tiles at zoom 24

	'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::';

	var gulp = require('gulp');

	var browserify = require('browserify');
	var babelify = require('babelify');
	var source = require('vinyl-source-stream');
	var buffer = require('vinyl-buffer');
	var uglify = require('gulp-uglify');
	var sourcemaps = require('gulp-sourcemaps');
	var livereload = require('gulp-livereload');

	#!/bin/bash

	while [ 1=1 ]; do
	wget seattletimes.com -O st.html
	git commit -a -m "Registered update"
	sleep 600
	done

	# You don't need Fog in Ruby or some other library to upload to S3 -- shell works perfectly fine
	# This is how I upload my new Sol Trader builds (http://soltrader.net)
	# Based on a modified script from here: http://tmont.com/blargh/2014/1/uploading-to-s3-in-bash

	S3KEY="my aws key"
	S3SECRET="my aws secret" # pass these in

	function putS3
	{
	path=$1

	* {
	font-size: 12pt;
	font-family: monospace;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	color: black;
	cursor: default;
	}

	// array utils
	// =================================================================================================

	const combine = (...arrays) => [].concat(...arrays);

	const compact = arr => arr.filter(Boolean);

	const contains = (() => Array.prototype.includes
	? (arr, value) => arr.includes(value)
	: (arr, value) => arr.some(el => el === value)