pl12133

Keyboard Overlay Bookmarklet

What Is It?

This is a bookmarklet to visualize keyboard interactions, to make it easier to demo them in gif or video format.

How To Use It:

pl12133

#####
# File: send-eml.sh
# Author: pl12133
# Description: Send an eml file through an SMTP service using netcat
# Usage: ./send-eml.sh [file] [smtp-server]
#####
set -e

# like `cat`, but it waits for a reply.
function slowcat(){ cat "$@" | while read; do sleep 0.5; echo "$REPLY"; done; }

pl12133

function reduceElements(element, callback, accumulator) {
	if (element !== document.body && element.parentElement) {
		return reduceElements(element.parentElement, callback, callback(accumulator, element));
	}
	return accumulator;
}

function findFullWidthElement(acc, elem) {
	if (acc) {
		return acc;

pl12133

PreactX Upgrade Experience

Obvious breaking changes

See release 10.0.0-alpha.0 for a full list.

• h -> createElement
• VNode.nodeName -> VNode.type
• VNode.attributes -> VNode.props
• VNode.children -> VNode.props.children

pl12133

function leakyDebounce(fn, delay, max = 1) {
	let timer, ctx, args, outstanding = 0, queue = [];

    function done() {
		[ ctx, args ] = queue.shift();
		fn.apply(ctx, args);
		if (queue.length) {
		    timer = setTimeout(done, delay);
        }
    }

pl12133

function breakOnUrlMatch(str, callback) {
       let nextOpen = XMLHttpRequest.prototype.open;
       XMLHttpRequest.prototype.open = function monkeypatchedOpen(...args) {
               let url = args[1];
               if (url && url.indexOf(str) >= 0) { if (callback()) { return; } }
//               console.log('XHR for ', url);
               return nextOpen(...args);
       }

       let nextFetch = window.fetch;

pl12133

    <!-- Defaults -->
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
    <!-- Android -->
    <link rel="icon" type="image/png" href="/android-chrome-36x36.png" sizes="36x36">
    <link rel="icon" type="image/png" href="/android-chrome-48x48.png" sizes="48x48">
    <link rel="icon" type="image/png" href="/android-chrome-72x72.png" sizes="72x72">
    <link rel="icon" type="image/png" href="/android-chrome-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/android-chrome-144x144.png" sizes="144x144">

pl12133

import { h } from 'preact';

function lastChild(arr) {
	return arr && arr.length ? arr[arr.length - 1] : undefined;
}

function get(obj, key, def, p) {
	p = 0;
	key = key.split ? key.split('.') : key;
	while (obj && p<key.length) obj = obj[key[p++]];

pl12133

// This is mostly working but also useless, because the audio volume will periodically be reset during the discussion.

window.__hangoutsVolumeBookmarkletCleanup = (function createAudioModMenu(window, undefined) {
	if (window.__hangoutsVolumeBookmarkletCleanup) {
		window.__hangoutsVolumeBookmarkletCleanup();
	}
	var document = window.document;
	var participants = Array.from(document.querySelector('[aria-label="Video call participants"]').childNodes).slice(0, -1);
	var audios = Array.from(document.querySelectorAll('audio')).reverse();
	var children = [];

pl12133

function isInert(node) {
	// See https://www.w3.org/TR/html5/editing.html#inert
	let sty = getComputedStyle(node);
	return node.offsetHeight <= 0 || /hidden/.test(sty.getPropertyValue('visibility'));
}
function focusNext(e) {
	// Selector lifted from `jkup/focusable.git`
	let focusable = Array.from(document.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable], audio[controls], video[controls]')),
		step = e && e.shiftKey ? -1 : 1,
		activeIndex = focusable.indexOf(document.activeElement),