Skip to content

Instantly share code, notes, and snippets.

View johnloy's full-sized avatar

John Loy johnloy

View GitHub Profile
johnloy / image-download-progress.html
Created June 10, 2024 18:58
Image download progress with XHR
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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
const regex = /(auto|scroll)/;
const style = (node, prop) =>
getComputedStyle(node, null).getPropertyValue(prop);
const scroll = (node) =>
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:
class EventBus extends EventTarget {
constructor() {
addCustomEventListener<T extends Partial<Record<string, any>>>(
type: string,
listener: (event: CustomEvent<T>) => void,
johnloy /
Created March 4, 2024 20:55 — forked from WebReflection/
NodeJS Executable Standalone Module


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
exec node --input-type=module - $@ &lt;$input_file
johnloy /
Created February 22, 2024 20:49 — forked from rponte/
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 (
# Thomas Ruoff (
# 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 /
Last active May 26, 2023 17:05 — forked from JBlond/
The entire table of ANSI color codes. #bash

Regular Colors

Value Color
\e[0;30m Black
\e[0;31m Red
\e[0;32m Green
\e[0;33m Yellow
\e[0;34m Blue
\e[0;35m Purple
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.
npm install
johnloy /
Created June 19, 2022 21:01 — forked from m-radzikowski/
Minimal safe Bash script template - see the article with full description:
#!/usr/bin/env bash
set -Eeuo pipefail
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...]