Ori Livni oriSomething

This document has moved!

It's now here, in The Programmer's Compendium. The content is the same as before, but being part of the compendium means that it's actively maintained.

Looking for support tables for HTML/CSS/JavaScript features or details on their implementation status in major browsers?

Chrome Platform Status (covers Chromium and thus includes Opera)
Firefox Platform Status
Microsoft Edge Platform Status
WebKit Feature Status
API Catalog

And then there’s Can I use…?.

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

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

	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!')
	}

	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])) {

	import { createStore } from 'redux';
	import combineReducers from './combineReducers';

	let Store = createStore(combineReducers({

	reducerA(state = 0, action, waitFor){
	if ( action.type === 'TEST'){
	waitState = waitFor(waitFor.reducerB)
	if ( waitState.reducerB === 5 )
	state = 10

	function rfc3339(d) {

	function pad(n) {
	return n < 10 ? "0" + n : n;
	}

	function timezoneOffset(offset) {
	var sign;
	if (offset === 0) {
	return "Z";

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