mike-pete

const direction = {
	'↑': [-1, 0],
	'↗': [-1, 1],
	'→': [0, 1],
	'↘': [1, 1],
	'↓': [1, 0],
	'↙': [1, -1],
	'←': [0, -1],
	'↖': [-1, -1],
} satisfies Record<string, [number, number]>

mike-pete

Editable Text for Srcbook

This might be a reasonable MVP for making your page content editable.

In the Iframe

1. find all the elements that contain text
2. make them editable with contentEditable = 'true'
3. listen for text changes and pass those changes to the parent window

mike-pete

class Heap<T> {
	#heap: (T | undefined)[] = [undefined]

	#prioritize: (a: T, b: T) => number

	constructor(prioritize: (a: T, b: T) => number, toHeapify: T[] = []) {
		this.#prioritize = prioritize
		this.#heap = [undefined, ...toHeapify]
		this.#heapify()
	}

mike-pete

So let's say I'm building a website to tell me what I should wear based on the current weather (raining, sunny, snowing).

I only use the app once per day, and the weather won't change while I'm looking at the app, so the clothing choice should be constant.

I also want the code to be easy to read so other members of my team can easily understand the code.

mike-pete

Webpage Layout Builder (proof of concept)

Why is it cool?

• The canvas can be resized, allowing you to see what your design would look like with different screen sizes and aspect ratios
• The elements of your design are stored in an object/tree, maintaining the page hierarchy while allowing constant time access to each element
• The elements in the design canvas (center) and hierarchy (left sidebar) are recursively rendered
• Design elements can be deeply duplicated (including all children in the duplication) (which involves some fun tree traversal)

Repo (with GIFs) | Demo

mike-pete

// higher-order function that returns a tag function (closure) that replaces variables in a template literal with the value of "word"
const wordReplacer = (word) => (strings, ...values) => {
  return strings.join(word)
}

// proxy handler that will intercept "get" and return a tag function
const proxyHandler = {
  get(_, prop) {
  	return wordReplacer(prop)
  },

mike-pete

const pubSub = <UpdateType>() => {
	type Subscriber = ({ update, unsubscribe }: { update: UpdateType; unsubscribe: () => void }) => void

	const subscribers = new Set<Subscriber>()

	const subscribe = (sub: Subscriber) => subscribers.add(sub)
	const publish = (update: UpdateType) => {
		subscribers.forEach((sub) => {
			const unsubscribe = () => subscribers.delete(sub)
			sub({ update, unsubscribe })

mike-pete

const createExposedPromise = <T>() => {
	let resolve: (value: T | PromiseLike<T>) => void
	let reject: (reason: any) => void

	const promise = new Promise<T>((res, rej) => {
		resolve = res
		reject = rej
	})

	return {

mike-pete

import { memo, useEffect, useRef } from "react"

const Dialog: React.FC<{ open: boolean, className?:string, children:React.ReactElement }> = ({ open, className, children }) => {
    const dialogRef = useRef<HTMLDialogElement>(null)

    useEffect(() => {
        if (open) {
            if(dialogRef.current?.open){
                dialogRef.current?.close()
            }

mike-pete

const useRecords = () => {
	const [record, setRecord] = useState<Record<string, string>>({
		'record 1': 'foo',
		'record 2': 'foo',
		'record 3': 'bar',
	})

	return {
		get uniqueRecords() {
			const uniqueRecords = new Set(Object.values(record))