Skip to main content

Resources & Snippets

Tools, libraries, blogs, and code snippets I find useful. A living collection that grows as I discover new things.

Showing 15 resources across all topics.

Resources

MDN Web Docs

The definitive reference for HTML, CSS, and JavaScript. I check this almost daily.

ReferenceJavaScriptCSS

TypeScript Handbook

Official TypeScript documentation. The best starting point for learning TypeScript properly.

TypeScriptDocumentation

Svelte Tutorial

Interactive tutorial that teaches Svelte from basics to advanced patterns. How I learned Svelte.

SvelteTutorial

TailwindCSS

Utility-first CSS framework. The documentation doubles as an excellent CSS reference.

CSSFramework

Vite

Next-generation build tool. Fast HMR and sensible defaults for modern frontend projects.

Build ToolJavaScript

Turborepo

High-performance monorepo build system. Useful for managing multiple packages in large projects.

MonorepoBuild Tool

Zod

TypeScript-first schema validation. Replaced hand-written validators in most of my projects.

TypeScriptValidation

TanStack Query

Async state management for React. Handles caching, background updates, and stale data elegantly.

ReactState Management

Framer Motion

Production-ready animation library for React. Makes complex animations approachable.

ReactAnimation

Josh W. Comeau

Deep-dive articles on CSS, React, and web development with interactive examples.

CSSReactFrontend

Kent C. Dodds

Practical articles on testing, React patterns, and software quality.

TestingReact

Dan Abramov — overreacted.io

Thoughtful posts on React internals, JavaScript, and programming philosophy.

ReactJavaScript

Syntax.fm

Web development podcast covering frontend, backend, and everything in between. Great for commutes.

Web DevelopmentGeneral

JS Party

Weekly podcast about the JavaScript ecosystem, frameworks, and the web platform.

JavaScriptCommunity

The Changelog

Conversations with open-source maintainers and software leaders. Broader perspective beyond frontend.

Open SourceGeneral

Code Snippets

Reusable patterns I reach for frequently. Copy, adapt, and use in your own projects.

Debounce Hook (React)

A reusable React hook that debounces a value. Useful for search inputs and API calls.

import { useState, useEffect } from 'react';

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

// Usage:
// const debouncedSearch = useDebounce(searchTerm, 300);

Type-Safe Event Emitter

A generic event emitter with full TypeScript type safety for event names and payloads.

type EventMap = Record<string, unknown>;
type EventHandler<T = unknown> = (payload: T) => void;

class TypedEmitter<Events extends EventMap> {
  private handlers = new Map<keyof Events, Set<EventHandler<any>>>();

  on<K extends keyof Events>(event: K, handler: EventHandler<Events[K]>) {
    if (!this.handlers.has(event)) this.handlers.set(event, new Set());
    this.handlers.get(event)!.add(handler);
    return () => this.handlers.get(event)?.delete(handler);
  }

  emit<K extends keyof Events>(event: K, payload: Events[K]) {
    this.handlers.get(event)?.forEach((handler) => handler(payload));
  }
}

// Usage:
// type AppEvents = { 'user:login': { id: string }; 'theme:change': 'light' | 'dark' };
// const emitter = new TypedEmitter<AppEvents>();

CSS Grid Auto-Fill Layout

A responsive grid that automatically fills available space without media queries.

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

/* Usage: apply .auto-grid to a container and its children
   will automatically arrange in a responsive grid.
   No media queries needed — the grid adapts to available space. */

Intersection Observer Hook (React)

A hook for detecting when an element enters the viewport. Great for lazy loading and animations.

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

function useIntersectionObserver(options?: IntersectionObserverInit) {
  const ref = useRef<HTMLElement>(null);
  const [isIntersecting, setIsIntersecting] = useState(false);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const observer = new IntersectionObserver(([entry]) => {
      setIsIntersecting(entry.isIntersecting);
    }, options);

    observer.observe(element);
    return () => observer.disconnect();
  }, [options]);

  return { ref, isIntersecting };
}

// Usage:
// const { ref, isIntersecting } = useIntersectionObserver({ threshold: 0.1 });
// <div ref={ref}>{isIntersecting && <ExpensiveComponent />}</div>