Seth Thompson s3ththompson

Here's a sort of unsolved logic/programming problem.

I made this site, Old Fashioned, for cocktail recipes. It has structured data for ingredients and recipes for cocktails. And one of its neat features is that, given certain ingredients, it shows you what's possible or what's nearly possible.

I've been thinking about the opposite angle: from which set of 5 ingredients can you make the highest number of different cocktails? How does one correctly solve this problem.

If formal descriptions are your jam: let's say:

You have 100 different ingredients
You have 20 cocktails, each of which use 2-6 ingredients

Spacing Tests!

Some useful strings and tools to use in spacing and kerning type.

Paul Barnes: "There should be the international standard of spacing tests," and recommended this:

(Text wasn't directly given, so this is what I remember).

Useful to adapt slightly as needed, but it's helpful that it's a simple, brief set of tests.

A few conversations have circled around user-side structural profiling. For context, see React PR #7549: Show React events in the timeline when ReactPerf is active

One particular concern is the measurement overhead. This gist has a benchmarking script (measure.js) for evaluating overhead and initial results.

Results: `performance.mark()`

Runs about 0.65µs per mark() call. Naturally, that's ~= an overhead of 1ms for 1500 mark()s.

Apps to install from macOS App Store:

Pastebot
GIF Brewery
Slack
Keynote/Pages/Numbers
1Password
OmniFocus 3
Airmail 3
iA Writer

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

~~Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.~~

Himawari-8 animation tutorial

Here’s how to make animations like this one. It requires intermediate Unix command-line knowledge, to install some tools and to debug if they don’t work. You’ll need these utilities:

curl (or you can translate to wget)
convert and montage, part of ImageMagick
ffmpeg, plus whatever codecs
parallel, for iteration that’s nicer than shell for loops or xargs
run everything in zsh for leading 0s in numerical ranges to work

	// This code is to be used with https://turbo.hotwire.dev. By default Turbo keeps visited pages in its cache
	// so that when you visit one of those pages again, Turbo will fetch the copy from cache first and present that to the user, then
	// it will fetch the updated page from the server and replace the preview. This makes for a much more responsive navigation
	// between pages. We can improve this further with the code in this file. It enables automatic prefetching of a page when you
	// hover with the mouse on a link or touch it on a mobile device. There is a delay between the mouseover event and the click
	// event, so with this trick the page is already being fetched before the click happens, speeding up also the first
	// view of a page not yet in cache. When the page has been prefetched it is then added to Turbo's cache so it's available for
	// the next visit during the same session. Turbo's default behavior plus this trick make for much more responsive UIs (non SPA).

	<?php

	class LocalValetDriver extends ValetDriver
	{
	/**
	* Determine if the driver serves the request.
	*
	* @param string $sitePath
	* @param string $siteName
	* @param string $uri

	module.exports = function (state, emitter, app) {
	state.component = require('component-box')
	app.component = function (key, Component) {
	if (!key \|\| !Component) return
	var obj = {}
	obj[key] = function () {
	return new Component()
	}
	state.component.use(obj)
	}

	/**
	* 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.
	*/