msichterman / getVideoThumbnail.ts

Created November 17, 2023 17:09

Get a video thumbnail dynamically using <canvas>

	/**
	* Generates thumbnails on demand to show as video previews
	* @param videoUrl - the S3 video url
	* @returns "blob:" url to the first video frame
	*/
	const getVideoThumbnail = async (videoUrl: string) => {
	return new Promise<string>((resolve, reject) => {
	const video = document.createElement("video");
	video.crossOrigin = "anonymous";
	video.src = videoUrl;

msichterman / UploadDragDrop.tsx

Created November 12, 2023 15:25 — forked from JaumeGelabert/UploadDragDrop.tsx

	"use client";

	import {
	Dialog,
	DialogContent,
	DialogTitle,
	DialogTrigger
	} from "@/components/ui/dialog";
	import { cn } from "@/lib/utils";
	import { Expand, Loader2, RotateCcw, Trash2, UploadCloud } from "lucide-react";

msichterman / expand.ts

Created May 24, 2023 22:57

use conditional type inference to "copy" a type T into a new type variable O and then an identity-like mapped type which iterates through the copied type's properties. The conditional type inference is conceptually a no-op, but it's used to distribute union types and to force the compiler to evaluate the "true" branch of the conditional (if you …

	// https://stackoverflow.com/a/69288824

	export type Expand<T> = T extends (...args: infer A) => infer R
	? (...args: Expand<A>) => Expand<R>
	: T extends infer O
	? { [K in keyof O]: O[K] }
	: never;

	export type ExpandRecursively<T> = T extends (...args: infer A) => infer R
	? (...args: ExpandRecursively<A>) => ExpandRecursively<R>

msichterman / pickBy.ts

Created April 20, 2023 20:46

pickBy Generic Filtering Util

	export function pickBy<T>(object: T, predicate: (arg: unknown) => boolean) {
	const obj: T = {} as T;
	for (const key in object) {
	if (predicate(object[key])) {
	obj[key] = object[key];
	}
	}
	return obj;
	}

msichterman / adding-a11y-to-dev.ts

Last active March 10, 2023 16:59

How to add Axe A11Y Testing to Dev Workflow

msichterman / learning-path.md

Last active February 24, 2023 16:13

Matt's Mega-Nerd Learning Path

Free Resources

Resource	Description
Beginner's TypeScript	Get hands-on interactive TypeScript practice and learn the foundational knowledge and skills you need to become a TypeScript Wizard.
Zod	Gain hands-on practice with Zod by working through a series of exercises that demonstrate how useful runtime type checking is.

msichterman / typescript-enums-explained.ts

Last active December 15, 2022 17:54

	//// TYPESCRIPT ENUMS EXPLAINED

	// Outcome of Matt Pocock's video titled "Enums considered harmful" – https://youtu.be/YmxwicpROps

	// Follow along with the TypeScript Playground: https://url.msich.dev/ts-enums-pg

	/* Challenges of TypeScript built-in enums
	- Enums are not native to JavaScript
	- Enums behave a little bit unpredictibly at runtime
	- Const enums have a lot of pitfalls

	if (process.env.NODE_ENV !== "production" && !isServerSideRendered()) {
	const axeConfig = {
	rules: [],
	};
	import("react-dom").then((ReactDOM) => {
	import("@axe-core/react").then((axe) => {
	axe.default(React, ReactDOM, 1000, axeConfig);
	});
	});
	}

Matt Sichterman msichterman

Matt's Mega-Nerd Learning Path

Free Resources