typescript

typescript
import { useEffect, RefObject } from "react";

const TABBABLE =
  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';

export function useFocusTrap(

Accessible modal with focus trap

react a11y accessibility
by codesnips 4 tabs
typescript
import { useState, useEffect } from 'react'

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

  useEffect(() => {

Custom hooks for reusable logic

react hooks typescript
by Maya Patel 3 tabs
typescript
import { createConsumer, Cable } from '@rails/actioncable'

let cable: Cable | null = null

export function getCable(): Cable {
  if (!cable) {

WebSocket integration with Action Cable

react actioncable websockets
by Maya Patel 3 tabs
typescript
import { readFileSync } from 'fs';
import { join } from 'path';
import Handlebars from 'handlebars';
import mjml2html from 'mjml';
import { htmlToText } from 'html-to-text';

Email sending with nodemailer + templates

node email nodemailer
by codesnips 3 tabs
typescript
import { useState, useMemo, useCallback } from 'react'
import { Post } from '@/types'
import { PostCard } from './PostCard'

interface FilteredPostsProps {
  posts: Post[]

Memoization in React with useMemo and useCallback

react performance memoization
by Maya Patel 1 tab
typescript
import { Injectable } from '@nestjs/common';

export interface RateLimitResult {
  allowed: boolean;
  remaining: number;
  limit: number;

Sliding-Window Webhook Rate Limiting with a NestJS Interceptor and In-Memory Counter

typescript nestjs rate-limiting
by codesnips 3 tabs
typescript
import { useEffect, useState, useRef } from 'react'

interface UseInViewOptions {
  threshold?: number | number[]
  rootMargin?: string
  triggerOnce?: boolean

Intersection Observer API for visibility tracking

react performance intersection-observer
by Maya Patel 2 tabs
typescript
export class AppError extends Error {
  public readonly statusCode: number;
  public readonly code: string;
  public readonly isOperational: boolean;

  constructor(message: string, statusCode = 500, code = 'INTERNAL_ERROR', isOperational = true) {

Backend: normalize errors with a single Express handler

express error-handling typescript
by codesnips 4 tabs
typescript
export type CircuitState = "closed" | "open" | "half-open";

export interface CircuitBreakerOptions {
  failureThreshold: number;
  resetTimeout: number; // ms to wait in "open" before probing
  onStateChange?: (from: CircuitState, to: CircuitState) => void;

Circuit breaker wrapper for flaky third-party APIs

circuit-breaker resilience http
by codesnips 3 tabs
typescript
import { ApplicationConfig } from '@angular/core';
import {
  provideHttpClient,
  withInterceptors,
} from '@angular/common/http';
import { retryInterceptor } from './retry.interceptor';

Angular HttpInterceptor With Exponential Backoff and Jittered Retries

angular http-interceptor rxjs
by codesnips 3 tabs
typescript
export type CheckResult = { name: string; status: 'up' | 'down'; durationMs: number; error?: string };
export type Check = () => Promise<void>;

function withTimeout(fn: Check, ms: number): Promise<void> {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => reject(new Error(`timeout after ${ms}ms`)), ms);

Health checks with readiness + liveness

reliability fastify kubernetes
by codesnips 3 tabs
typescript
import { useReducer } from 'react'

interface FormState {
  values: Record<string, any>
  errors: Record<string, string>
  touched: Record<string, boolean>

React useReducer for complex state logic

react hooks state-management
by Maya Patel 1 tab