Ruy Adorno ruyadorno

Why imperative imports are slower than declarative imports

A lot of people misunderstood Top-level await is a footgun, including me. I thought the primary danger was that people would be able to put things like AJAX requests in their top-level await expressions, and that this was terrible because await strongly encourages sequential operations even though a lot of the asynchronous activity we're talking about should actually happen concurrently.

But that's not the worst of it. Imperative module loading is intrinsically bad for app startup performance, in ways that are quite subtle.

Consider an app like this:

// main.js

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

Setup Mac OS X

This is just a personal script to help me remember all the steps required to setup a new osx machine in their correct order. I do not advise you to follow this guide if you don't know what you're doing.

Setup

0. Setup iCloud

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

Launch quicktime player
do Screen recording

	{"name":"hello-world-bespoke-archive-format","version":"1.0.0","main":"lib/index.js"}
	console.log('hello, world!')
	# hello-world-bespoke-archive-format

	An example of a "hello world" program, but instead of being a tarball, it's
	shown in the bespoke package format that npm SHOULD have used, instead of
	tar.

	One can be forgiven for not wanting to reinvent the wheel, but let this be a
	lesson that, in fact, some wheels _ought_ to be reinvented, when the

	const reg = new RegExp("([^?=&]+)(=([^&]*))?", "g")

	function qs (uri) {
	const obj = {}
	uri = uri.replace(/^.*\?/, '')
	uri.replace(reg, map)
	return obj

	function map (a0, a1, a2, a3) {
	obj[decodeURIComponent(a1)] = decodeURIComponent(a3)

	# In order for gpg to find gpg-agent, gpg-agent must be running, and there must be an env
	# variable pointing GPG to the gpg-agent socket. This little script, which must be sourced
	# in your shell's init script (ie, .bash_profile, .zshrc, whatever), will either start
	# gpg-agent or set up the GPG_AGENT_INFO variable if it's already running.

	# Add the following to your shell init to set up gpg-agent automatically for every shell
	if [ -f ~/.gnupg/.gpg-agent-info ] && [ -n "$(pgrep gpg-agent)" ]; then
	source ~/.gnupg/.gpg-agent-info
	export GPG_AGENT_INFO
	else

	// ----
	// libsass (v3.1.0-beta)
	// ----


	$map-one: (color: orange, height: 100px);

	.block {
	color: map-get($map-one, color);
	}

	var production = process.env.APP_ENV === "test";
	var gulp = require('gulp');
	var gutil = require('gulp-util');
	var sass = require('gulp-sass');
	var cssmin = require('gulp-minify-css');
	var prefix = require('gulp-autoprefixer');
	var newer = require('gulp-newer');
	var print = require('gulp-print');
	var notify = require('gulp-notify');
	var batch = require('gulp-batch');

	Agnes en_US # Isn't it nice to have a computer that will talk to you?
	Albert en_US # I have a frog in my throat. No, I mean a real frog!
	Alex en_US # Most people recognize me by my voice.
	Alice it_IT # Salve, mi chiamo Alice e sono una voce italiana.
	Alva sv_SE # Hej, jag heter Alva. Jag är en svensk röst.
	Amelie fr_CA # Bonjour, je m’appelle Amelie. Je suis une voix canadienne.
	Anna de_DE # Hallo, ich heiße Anna und ich bin eine deutsche Stimme.
	Bad News en_US # The light you see at the end of the tunnel is the headlamp of a fast approaching train.
	Bahh en_US # Do not pull the wool over my eyes.
	Bells en_US # Time flies when you are having fun.