Jacob Groß kurtextrem

RAIL encouraged loading a site in under 1000ms on cable and (not well documented) between 3000ms and 5000ms on 3G. This loosely correlates to Google's research that 53% of mobile users will abandon a site if it doesn't load in 3s. So 5s is the headroom we give you for loading and becoming interactive so a user can realistically tap on a part of your user interface and have something useful happen. Loading is more nuanced than we as web developers once thought however.

It's is a pretty broad term and we don'the think it's enough for the page to "look" done. It should be engagable.

The issue:

..mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

(from a new defunct https://developers.google.com/mobile/articles/fast_buttons article)

touch-action CSS property can be used to disable this behaviour.

touch-action: manipulation The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.

	/**
	* Delays calling the given function until the browser is notifying us
	* about a certain minimum budget or the timeout is reached.
	* @param {!Window} win
	* @param {number} startTime When we started waiting for idle.
	* @param {number} minimumTimeRemaining Minimum number of millis idle
	* budget for callback to fire.
	* @param {number} timeout in millis for callback to fire.
	* @param {function()} fn Callback.
	*/

	// no leading call, only trailing
	function debounce(callback, timeout, _time) {
	timeout = timeout \|\| 100;

	return function debounce() {
	window.clearTimeout(_time);
	_time = window.setTimeout(callback, timeout);
	}
	}

	(function(x,y,z){(x[y]&&x[y](z))\|\|z()})(window,'requestIdleCallback',function(){
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){
	(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
	ga('create', 'UA-XXXXX-X', 'auto');
	ga('send', 'pageview');
	});

	//META{"name":"CollapsibleEmbeds"}*//
	/*
	Check for Updates: https://gist.github.com/shtrih/59a8be1f9ff53f0499c2
	How to install:
	1. If you don't have it, get Discord from https://discordapp.com/apps
	2. Download BetterDiscord for your platform on https://betterdiscord.net/home
	3. Push the button «Raw» then Ctrl + S.
	3. Place the plugin in %appdata%\BetterDiscord\plugins\.
	4. Refresh Discord with Ctrl + Shift + R or just restart Discord completely.
	5. Go to the BetterDiscord settings → plugins tab and check plugin.

	void function() { "use strict"
	/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! WIP DO NOT USE WIP !!!!!!!!!!!!!!!!!!!!!

	DO NOT USE THIS YET.
	USE THE 2016 VERSION BELOW PLEASE.


	WWWWWWWW WWWWWWWWIIIIIIIIIIPPPPPPPPPPPPPPPPP
	W::::::W W::::::WI::::::::IP::::::::::::::::P
	W::::::W W::::::WI::::::::IP::::::PPPPPP:::::P

	const I = x => x
	const K = x => y => x
	const A = f => x => f (x)
	const T = x => f => f (x)
	const W = f => x => f (x) (x)
	const C = f => y => x => f (x) (y)
	const B = f => g => x => f (g (x))
	const S = f => g => x => f (x) (g (x))
	const S_ = f => g => x => f (g (x)) (x)
	const S2 = f => g => h => x => f (g (x)) (h (x))

	<!DOCTYPE html>
	<html>
	<head>
	<title>Customized range slider, pure CSS</title>
	<style>
	body {
	background: #f8f8f8;
	}
	.slider {
	width: 302px;

	<!DOCTYPE html>
	<html>
	<head>
	<title>Toggle Switch</title>
	<style>
	.switch {
	position: relative;
	}
	.switch label {
	width: 55px;