Chris Henrick clhenrick

macOS Internals

Understand your Mac and iPhone more deeply by tracing the evolution of Mac OS X from prelease to Swift. John Siracusa delivers the details.

Starting Points

How to use this gist

You've got two main options:

Bookmarklet for Mastodon: Transport a profile or post to your server

This bookmarklet shows a profile or a post on another Mastodon server in your server’s web app.

Installation

Change the value of HOST to the domain of your Mastodon server.
Create a bookmark and paste the lines in show-in-mastodon-web-app.js into its address (browsers are OK with pasting multiple lines).

Usage

Stash the changes

git stash
git stash save

Stash the untracked files

git stash --include-untracked
git stash -u

List the stashes

git stash list

show the latest stash

git stash show

Twitter abuses all media file uploads, each type in its own way. If we want to upload a good looking animation loop from some low-color, high-detail generative art, we have to game their system's mechanisms.

don't upload a video file, they will re-encode it into absolute 💩
create a GIF, which they will auto-convert into a video file 😱
The frames of the GIF will be resized to an even-sized width using an extremely naive algorithm. Your GIF should be an even size (1000, 2000,

Find the full post on fotis.xyz

:focus-visible is a standard way of only showing focus styles for keyboard and focus-based modalities. When using it, however, you must take care to not remove :focus altogether, where :focus-visible is not supported.

With CSS, we can achieve progressive enhancement of :focus to :focus-visible:

/* Styles where only focus is supported */
button:focus,

Setting up Jest with ESM

Here are some different ways on how to set up Jest to support ESM. This applies for Jest v25, Node v13, and Babel v7.

Method A: Native Node.js support

Node v14 and Jest v26 support ESM natively with the --experimental-vm-modules flag.

Install cross-env:

	// MyType is a generic that we can pass different types when calling handleAsyncTask()
	const handleAsyncTask = async function<MyType> (asyncFn: () => Promise<MyType \| string>) : Promise<[boolean, MyType \| undefined]> {
	const result = await asyncFn();
	if (typeof result === 'string') {
	return [true, undefined];
	}
	return [false, result];
	}

	#!/bin/bash
	set -e

	# dependencies:
	# - youtube-dl: https://ytdl-org.github.io/youtube-dl/
	# - ffmpeg: https://ffmpeg.org/

	# make sure youtube-dl dep exists
	if ! command -v youtube-dl &> /dev/null
	then

	ffmpeg -ss $INPUT_START_TIME -t $LENGTH -i $INPUT_FILENAME \
	-vf "fps=$OUTPUT_FPS,scale=$OUTPUT_WIDTH:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
	-loop $NUMBER_OF_LOOPS $OUTPUT_FILENAME

	# Change these placeholders:
	# * $INPUT_START_TIME - number of seconds in the input video to start from.
	# * $LENGTH - number of seconds to convert from the input video.
	# * $INPUT_FILENAME - path to the input video.
	# * $OUTPUT_FPS - ouput frames per second. Start with `10`.
	# * $OUTPUT_WIDTH - output width in pixels. Aspect ratio is maintained.