Terkel terkelg

Colours in terminal

It's a common confusion about terminal colours... Actually we have this:

plain ascii
ansi escape codes (16 colour codes with bold/italic and background)
256 colour palette (216 colours + 16 ansi + 24 gray) (colors are 24bit)
24bit true colour ("888" colours (aka 16 milion))

printf "\x1b[${bg};2;${red};${green};${blue}m\n"

Using git-submodules to version-control Vim plugins

If you work across many computers (and even otherwise!), it's a good idea to keep a copy of your setup on the cloud, preferably in a git repository, and clone it on another machine when you need. Thus, you should keep the .vim directory along with your .vimrc version-controlled.

But when you have plugins installed inside .vim/bundle (if you use pathogen), or inside .vim/pack (if you use Vim 8's packages), keeping a copy where you want to be able to update the plugins (individual git repositories), as well as your vim-configuration as a whole, requires you to use git submodules.

Creating the repository

Initialize a git repository inside your .vim directory, add everything (including the vimrc), commit and push to a GitHub/BitBucket/GitLab repository:

cd ~/.vim

This isn't bullet-proof but here's how I've doing things lately:

modular ThreeJS quickie

npm install three --save
Include this in your browserify/webpack root script, typically your index.js:

global.THREE = require('three')

Add the "THREE" global to your linter (e.g. semistandard/eslintrc)

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.~~

	var str = 'class ಠ_ಠ extends Array {constructor(j = "a", ...c) {const q = (({u: e}) => {return { [`s${c}`]: Symbol(j) };})({});super(j, q, ...c);}}' +
	'new Promise((f) => {const a = function* (){return "\u{20BB7}".match(/./u)[0].length === 2 \|\| true;};for (let vre of a()) {' +
	'const [uw, as, he, re] = [new Set(), new WeakSet(), new Map(), new WeakMap()];break;}f(new Proxy({}, {get: (han, h) => h in han ? han[h] ' +
	': "42".repeat(0o10)}));}).then(bi => new ಠ_ಠ(bi.rd));';

	try {
	eval(str);
	} catch(e) {
	alert('Your browser does not support ES6!')
	}

	attribute vec3 position;
	uniform mat4 modelViewMatrix;
	uniform mat4 modelMatrix;
	uniform mat4 projectionMatrix;

	uniform float scale;
	uniform float size;
	uniform float aspect;
	varying vec2 vUv;

	export function tween( time, update ) {
	const start = Date.now();

	var isCanceled = false;
	var isComplete = false;

	var chain = [];

	function loop() {
	if ( isCanceled ) return;

	uniform vec4 offsetRepeat; // from ThreeJS Texture
	uniform float time;
	#pragma glslify: noise = require('glsl-noise/simplex/2d');

	float pattern(float v, float repeats, float threshold) {
	float result = mod(v * repeats, 1.0);
	return step(threshold, result);
	}

	void main () {

	const glslify = require('glslify');
	const path = require('path');

	// This is the original source, we will copy + paste it for our own GLSL
	// const vertexShader = THREE.ShaderChunk.meshphysical_vert;
	// const fragmentShader = THREE.ShaderChunk.meshphysical_frag;

	// Our custom shaders
	const fragmentShader = glslify(path.resolve(__dirname, 'standard.frag'));
	const vertexShader = glslify(path.resolve(__dirname, 'standard.vert'));

	:root {
	--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
	--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
	--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
	--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
	--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
	--ease-in-circ: cubic-bezier(.6, .04, .98, .335);

	--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
	--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);