Erik Jung erikjung

Cheat sheet: JavaScript Array methods

Deriving a new Array from an existing Array:

['■','●','▲'].slice(1, 3)          ⟼ ['●','▲']
['■','●','■'].filter(x => x==='■') ⟼ ['■','■']
    ['▲','●'].map(x => x+x)        ⟼ ['▲▲','●●']
    ['▲','●'].flatMap(x => [x,x])  ⟼ ['▲','▲','●','●']

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

Use ESM yourself. (preferred)
Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.

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

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

ETags: a pretty sweet feature of HTTP 1.1

HTTP caching review

HTTP provides two ways for servers to control client-side caching of page components:

freshness may be based on a date or a token whose meaning is app-specific
whether or not the client needs to confirm the cached version is up-to-date with the server

This breaks down as follows:

Cache locally and don't check before using.

	(function (context, trackingId, options) {
	const history = context.history;
	const doc = document;
	const nav = navigator \|\| {};
	const storage = localStorage;
	const encode = encodeURIComponent;
	const pushState = history.pushState;
	const typeException = 'exception';
	const generateId = () => Math.random().toString(36);
	const getId = () => {

	/* iPhone 6 landscape */
	@media only screen and (min-device-width: 375px)
	and (max-device-width: 667px)
	and (orientation: landscape)
	and (-webkit-min-device-pixel-ratio: 2)
	{ }

	/* iPhone 6 portrait */
	@media only screen
	and (min-device-width: 375px)

	var ebonics = {
	"lye": "weed smoke",
	"pie": "ki of coke",
	"lifted": "high",
	"fly": "new clothes on",
	"whips": "cars",
	"kicks": "sneakers",
	"chips": "money",
	"flicks": "movies",
	"cribs": "homes",

	/*
	* Easing Functions - inspired from http://gizma.com/easing/
	* only considering the t value for the range [0, 1] => [0, 1]
	*/
	var EasingFunctions = {
	// no easing, no acceleration
	linear: function (t) { return t },

	// accelerating from zero velocity
	easeInQuad: function (t) { return t*t },

	$ = jQuery

	queues = {}
	running = false

	queue = (name) ->
	name = 'default' if name is true
	queues[name] or= []

	next = (name) ->