John Loy johnloy

Web engineer at Dreamworks Animation, with 20+ years designing, back-ending, and front-ending for the web.

johnloy / image-download-progress.html

Created June 10, 2024 18:58

Image download progress with XHR

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>
	<body>
	<progress id='imageProgress' value='0' max='100'></progress>

johnloy / scrollparent.js

Created June 10, 2024 17:57 — forked from gre/scrollparent.js

get first parent scrollable container of a dom element

	// more minimal version of https://github.com/olahol/scrollparent.js/blob/master/scrollparent.js
	const regex = /(auto\|scroll)/;

	const style = (node, prop) =>
	getComputedStyle(node, null).getPropertyValue(prop);

	const scroll = (node) =>
	regex.test(
	style(node, "overflow") +
	style(node, "overflow-y") +

johnloy / typescript-custom-events.ts

Last active May 31, 2024 19:00

Strongly-typed EventTarget custom events with TypeScript

	// Credits: https://medium.com/@saeed.asghari.241/create-custom-event-in-typescript-8219054cee5d

	class EventBus extends EventTarget {
	constructor() {
	super()
	}

	addCustomEventListener<T extends Partial<Record<string, any>>>(
	type: string,
	listener: (event: CustomEvent<T>) => void,

johnloy / executable-standalone-module.md

Created March 4, 2024 20:55 — forked from WebReflection/executable-standalone-module.md

NodeJS Executable Standalone Module

Update

If you're OK in having a node-esm executable, please consider this solution.

#!/usr/bin/env sh
# the /usr/local/bin/node-esm executable
input_file=$1
shift
exec node --input-type=module - $@ &lt;$input_file

johnloy / get-latest-tag-on-git.sh

Created February 22, 2024 20:49 — forked from rponte/get-latest-tag-on-git.sh

Getting latest tag on git repository

	# The command finds the most recent tag that is reachable from a commit.
	# If the tag points to the commit, then only the tag is shown.
	# Otherwise, it suffixes the tag name with the number of additional commits on top of the tagged object
	# and the abbreviated object name of the most recent commit.
	git describe

	# With --abbrev set to 0, the command can be used to find the closest tagname without any suffix:
	git describe --abbrev=0

	# other examples

johnloy / list

Created October 11, 2023 23:30 — forked from wndhydrnt/list

Run several commands in parallel, prefix the stdout of each stdout with its source and fail the script if one of the commands exits with a code != 0

johnloy / prepare-commit-msg

Created June 9, 2023 21:09 — forked from stefanbuck/prepare-commit-msg

Ticket number git hook

	#!/usr/bin/env bash
	#
	# Authors:
	# Stefan Buck (https://github.com/stefanbuck)
	# Thomas Ruoff (https://github.com/tomru)
	#
	#
	# Description:
	# Are you still prefixing your commits with a ticket number manually? You will love this script!
	# This is a git hook script that will automatically prefix your commit messages with a ticket

johnloy / bash-colors.md

Last active May 26, 2023 17:05 — forked from JBlond/bash-colors.md

The entire table of ANSI color codes. #bash

johnloy / post-merge

Created July 25, 2022 22:14 — forked from sindresorhus/post-merge

Git hook to install npm dependencies after a `git pull`. Run `chmod +x post-merge` and put it in `.git/hooks/`. Though could really do whatever.

	#!/bin/sh
	npm install

johnloy / script-template.sh

Created June 19, 2022 21:01 — forked from m-radzikowski/script-template.sh

Minimal safe Bash script template - see the article with full description: https://betterdev.blog/minimal-safe-bash-script-template/

	#!/usr/bin/env bash

	set -Eeuo pipefail
	trap cleanup SIGINT SIGTERM ERR EXIT

	script_dir=$(cd "$(dirname "${BASH_SOURCE[0]}")" &>/dev/null && pwd -P)

	usage() {
	cat <<EOF
	Usage: $(basename "${BASH_SOURCE[0]}") [-h] [-v] [-f] -p param_value arg1 [arg2...]