Skip to content

Instantly share code, notes, and snippets.

View mrclay's full-sized avatar

Steve Clay mrclay

View GitHub Profile
@mrclay
mrclay / withoutNulls.ts
Last active July 12, 2023 20:11
Destructure objects so that defaults can be given for nulls, too.
type OmitNull<T> = T extends null ? Exclude<T, null> | undefined : T;
type OmitNullProps<T extends object> = { [Key in keyof T]: OmitNull<T[Key]> };
/**
* Allow destructuring an object, turning any null properties into undefined so
* a default can be given. If the given object may be null/undefined, then every
* property may be undefined.
*
* Useful for assigning defaults for properties that may be null. In a usual destructuring
* assignment, nulls are passed through so you can't provide a default for that case:
@mrclay
mrclay / vite-plugin-qwik-fragment.ts
Last active September 14, 2023 13:12
Vite plugin to place after the Qwik's static output plugin to generate fragment.html
/**
* Creates embed-friendly dist/fragment.html
*
* Install qwik: `npm create qwik@latest`
* Configure static: https://qwik.builder.io/docs/guides/static-site-generation/#static-site-generation-config
* In adapters/static/vite.config.ts place vitePluginQwikFragment() after the staticAdapter.
* Build: `npm run build`
* The file `dist/fragment.html` will be created.
* To test: `npx serve dist` and open http://localhost:3000/fragment.html
*
@mrclay
mrclay / empty.js
Created November 23, 2022 18:40
Find empty HTML elements in DOM
[...document.querySelectorAll('h1,h2,h3,h4,h5,h6')].filter(el => !el.textContent.trim()).forEach(el => console.log(el))
@mrclay
mrclay / file.json.d.ts
Created October 6, 2022 16:18
Example d.ts file for a JSON file
// filename.json <-- the data
// filename.json.d.ts <-- type definition (this file)
// Just an example type
const value: Record<string, string>;
export default value;
@mrclay
mrclay / fetch-inpector.ts
Last active September 17, 2022 15:27
Create a fetch wrapper that allows logging input/output.
export interface FetchInfo {
uri: RequestInfo;
init: RequestInit;
res?: unknown;
text?: string;
error?: unknown;
}
function defaultLogger({uri, init, text}: FetchInfo): void {
console.info({uri, text, init});
@mrclay
mrclay / teaful-sync.js
Last active August 8, 2022 03:20
Minimal teaful-like store using useSyncExternalStore()
import {useSyncExternalStore} from 'use-sync-external-store/shim';
const DOT = '.';
export default function createStore(defaultStore = {}) {
let allStore = defaultStore;
const listeners = new Set();
function subscribe(listener) {
listeners.add(listener);
@mrclay
mrclay / root-dir.sh
Last active May 2, 2022 23:58
Shell: Getting directory of code or active script
#!/bin/bash
# Execution-relative (all shells). Get dir path of the script executed
# by the user.
__0="$(CDPATH= cd -- $(dirname -- $0) && pwd -P)"
echo "$__0"/bar
# Code-relative (bash/zsh only). Get dir path of *this file*,
@mrclay
mrclay / ddev-build.sh
Created April 13, 2022 16:21
Allows inspecting docker builds in ddev projects
#!/bin/bash
# Like docker compose build [SERVICE].
#
# USAGE: ddev-build [SERVICE]
#
function ddev-build {
~/.ddev/bin/docker-compose -f .ddev/.ddev-docker-compose-full.yaml build $1 --no-cache --progress=plain
}
@mrclay
mrclay / svg-progress.html
Created November 11, 2021 19:05
Progress circle SVG with 0% at top
<body>
<svg viewBox="0 0 200 200" height="200">
<circle cx="100" cy="100" r="90" pathLength="1" transform="rotate(-90 100 100)" class="percentage" stroke-dashoffset="0.9"></circle>
</svg>
<p>
Set percentage:
<button type="button">0</button>
<button type="button">15</button>
<button type="button">50</button>
@mrclay
mrclay / README.md
Created May 20, 2021 17:17
Build set of JSON files for specifying US state grid map positions