Damien Seguin dmnsgn

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

ffmpeg

Converting Audio into Different Formats / Sample Rates

Minimal example: transcode from MP3 to WMA:
ffmpeg -i input.mp3 output.wma

You can get the list of supported formats with:
ffmpeg -formats

You can get the list of installed codecs with:

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

mostly in the realm of creative coding and graphics programming

lots of these are my own :)

tooling

https://www.npmjs.org/package/wzrd (browserify dev server)
https://www.npmjs.org/package/budo (like wzrd but with incremental watching & LiveReload)
https://www.npmjs.org/package/beefy (more fully-featured dev server)

	function mapValues(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	result[key] = fn(obj[key], key);
	return result;
	}, {});
	}

	function pick(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	if (fn(obj[key])) {

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

	import { Component } from "React";

	export var Enhance = ComposedComponent => class extends Component {
	constructor() {
	this.state = { data: null };
	}
	componentDidMount() {
	this.setState({ data: 'Hello' });
	}
	render() {

	var Bar1 = base => class extends base {
	componentWillMount(){
	super.componentWillMount();
	console.log('Bar1');
	}
	};

	var Bar2 = base => class extends base {
	componentWillMount(){
	super.componentWillMount();

	<!doctype html>
	<html>
	<head>
	<title>JS1k 2015 Invitation by Mathieu 'p01' Henri</title>
	<meta charset="utf-8" />
	<meta name="author" content="Mathieu 'p01' Henri, @p01"/>
	<meta name="viewport" content="width=device-width,initial-scale=1"/>
	<style>
	html, body { margin: 0; padding: 0; border: 0; }
	#c { display: block; } /* kill scrollbars from hell */

	// http://michalbe.blogspot.com.br/2013/03/javascript-less-known-parts-bitwise.html
	// http://jsperf.com/bitwise-vs-math-object
	// http://united-coders.com/christian-harms/results-for-game-for-forfeits-and-the-winner-is/
	// https://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/
	// https://dreaminginjavascript.wordpress.com/2009/02/09/bitwise-byte-foolish/
	// http://jsperf.com/math-min-max-vs-ternary-vs-if/24

	"use strict";

	var PI = Math.PI;