mike-pete

class Solution:
  def intToRoman(self, num: int) -> str:
    numerals = {
      1: 'I',
      4: 'IV',
      5: 'V',
      9: 'IX',
      10: 'X',
      40: 'XL',
      50: 'L',

mike-pete

const x = {
    a:{
        b:{
            c:'neat'
        }
    }
}

const loop = (object, path) => {
    let index = 0

mike-pete

def addAllNumbersFromZeroToN(n):
  if n > 0:
    return n + addAllNumbersFromZeroToN(n-1)
  return n

print(addAllNumbersFromZeroToN(3)) #6
print(addAllNumbersFromZeroToN(2)) #3
print(addAllNumbersFromZeroToN(5)) #15

mike-pete

Terms

Composition

• Delegate work to helper objects.
• Use objects from different concrete classes to get different implementations for helper methods.
• strategy, state, etc.

Aggregation

• (from refactoring.guru) object A contains objects B; B can live without A.

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))

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 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

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

// 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

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