Joe Lencioni lencioni

Array Iteration

https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it mu

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

	// UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that
	// does not support `nomodule` is probably not being used anywhere. The code below is left
	// for posterity.

	/**
	* Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
	* load <script nomodule> anyway. This snippet solve this problem, but only for script
	* tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
	*
	* Again: this will not prevent inline script, e.g.:

	// see for screenshot:
	// https://twitter.com/paul_irish/status/829090506084749312

	const http = require('http');

	function requestHandler(request, response) {
	const headers = {
	'Server-Timing': `
	sql-1;desc="MySQL lookup Server";dur=100,
	sql-2;dur=900;desc="MySQL shard Server #1",

	import React from 'react';

	const toPromise = (load) => (new Promise((resolve) => (
	load(resolve)
	)));

	class LazilyLoad extends React.Component {

	constructor() {
	super(...arguments);

	source_files:
	- http://localhost:8080/diffux.js # For convenience, for use with webpack server. Is ignored on CircleCI.
	- diffux-new.js
	snapshots_folder: ./diffux_snapshots

	#!/bin/bash

	# Make the script fail on the first error encountered.
	set -euo pipefail

	# Create a temp folder that we can use to store files in.
	if [ "$(uname -s)" = "Darwin" ]; then
	tmp_dir=$(mktemp -d -t find-dead-modules.XXXXXXXX)
	else
	tmp_dir=$(mktemp -d --tmpdir find-dead-modules.XXXXXXXX)

	/* This has moved to:
	* https://github.com/devonzuegel/digital-nesting/blob/master/zoom/zoom.js
	*/