Zachary Lee ZacharyL2

🍺

writing

ZacharyL2 / SSE-Vanilla-Client.html

Created April 9, 2023 06:35

	<!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" />
	<style>
	@keyframes cursorBlink {
	0% {
	border-right-color: initial;

ZacharyL2 / useUrlState.ts

Created March 26, 2023 14:06

Simple useUrlState

	import { useMemo, useRef } from 'react';
	import { useLocation, useNavigate } from 'react-router';

	const useUrlState = <S extends Record<string, string>>(
	initialState: S,
	navigateMode: 'push' \| 'replace' = 'push',
	) => {
	const location = useLocation();
	const navigate = useNavigate();

ZacharyL2 / useRotateImage.ts

Created November 27, 2022 02:55

	import { useEffect, useRef, useState } from 'react';

	type RotatedImage = {
	src: string;
	width: number;
	height: number;
	} \| null;

	let canvas: HTMLCanvasElement \| null = null;
	let canvasCtx2D: CanvasRenderingContext2D \| null = null;

ZacharyL2 / usePrevious.js

Created September 3, 2022 14:47

	import { useEffect, useRef } from 'react';

	const usePrevious = (value) => {
	const ref = useRef();

	useEffect(() => {
	ref.current = value;
	}, [value]);

	return ref.current;

ZacharyL2 / Router.jsx

Created August 25, 2022 08:22

	import { useEffect, useState } from 'react';

	const Router = ({ routes, defaultComponent }) => {
	const [currentPath, setCurrentPath] = useState(
	() => window.location.pathname,
	);

	useEffect(() => {
	const onLocationChange = () => {
	setCurrentPath(window.location.pathname);

ZacharyL2 / readline.js

Created August 21, 2022 07:48

	console.time('Time');

	const fs = require('fs');
	const readline = require('readline');

	void (async () => {
	const rl = readline.createInterface({
	input: fs.createReadStream('test.json'),
	crlfDelay: Infinity,
	});

ZacharyL2 / custom-button-1.html

Created August 17, 2022 08:36

	<custom-button backgroundColor="red"></custom-button>

	<script>
	const template = `
	<style>
	button {
	background-color: blue;
	color: #fff;
	}
	</style>

ZacharyL2 / display-visibility-opacity.md

Last active July 29, 2022 07:46

	display: none	visibility: hidden	opacity: 0
Remove from document flow	Y	N	N
Reflow	Y	N	N
Repaint	Y	Y	/
Reversed on child element	N	Y	N
transition	N	Y	Y
Self-attached events are triggerable	N	N	Y

ZacharyL2 / generator2async.ts

Created July 18, 2022 08:35

ZacharyL2 / Mini-Redux.js

Created July 10, 2022 12:00

	// Serial execution of multiple functions
	const compose = (...funcs) =>
	funcs.reduce(
	(a, b) =>
	(...args) =>
	a(b(...args)),
	);

	export const createStore = (reducer, enhancer) => {
	if (typeof enhancer === 'function') {