mike-pete

Picture Grid

What are we assessing:

1. Ability to clarify requirements for vague requests
2. Ability to design and clearly articulate a solution
3. Ability to execute on the plan from step 2

Interview Structure:

Phase 1

mike-pete

// upload-image.ts
// Upload a file to S3 or Cloudflare R2 using Bun's built-in S3 client.
// No third-party dependencies required.
//
// Usage:
//   bun run upload-image.ts <path-to-file> [key]
//
// Arguments:
//   <path-to-file>  Local file to upload
//   [key]           Optional S3 object key (defaults to the filename)

mike-pete

function handleHttpStatusSwitch(statusCode: number): string {
	switch (statusCode) {
		case 200:
			return 'OK - Request successful'
		case 201:
			return 'Created - Resource created successfully'
		case 202:
			return 'Accepted - Request accepted for processing'
		case 204:
			return 'No Content - Request successful but no content to return'

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