typescript

typescript
import { NodeSDK } from '@opentelemetry/sdk-node';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node';
import { Resource } from '@opentelemetry/resources';
import {

OpenTelemetry tracing for Node HTTP

observability tracing opentelemetry
by codesnips 3 tabs
typescript
import { ReactNode } from 'react'

interface CardProps {
  children: ReactNode
  className?: string
}

React component composition over inheritance

react patterns composition
by Maya Patel 2 tabs
typescript
import { Pool, PoolClient, Client, QueryResult, QueryResultRow } from 'pg';

const MAX_LIFETIME_MS = 30 * 60 * 1000;

export const pool = new Pool({
  connectionString: process.env.DATABASE_URL,

Postgres connection pooling with pg + max lifetime

node postgres connection-pooling
by codesnips 3 tabs
typescript
import { useEffect, useRef, useState } from "react";

export type AsyncState<T> =
  | { status: "loading" }
  | { status: "error"; error: Error }
  | { status: "success"; data: T };

Frontend: skeleton loading instead of spinners

react ux typescript
by codesnips 4 tabs
typescript
import { onCLS, onINP, onLCP, onFCP, onTTFB, type Metric } from 'web-vitals';

export interface VitalPayload {
  id: string;
  name: Metric['name'];
  value: number;

Web Vitals reporting to an API endpoint

performance observability react
by codesnips 3 tabs
typescript
import { useEffect, useState } from "react";

export function useDebounce<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState<T>(value);

  useEffect(() => {

Debounced search input (React)

react hooks debounce
by codesnips 3 tabs
typescript
import { defaultSchema, type Schema } from 'hast-util-sanitize';

export const markdownSchema: Schema = {
  ...defaultSchema,
  attributes: {
    ...defaultSchema.attributes,

Safe markdown rendering (remark + rehype)

markdown security remark
by codesnips 3 tabs
typescript
import { useForm } from 'react-hook-form'
import { PostFormData } from '@/types'

interface PostFormProps {
  initialData?: Partial<PostFormData>
  onSubmit: (data: PostFormData) => Promise<void>

Form handling with React Hook Form

react forms react-hook-form
by Maya Patel 1 tab
typescript
import { createHash } from "crypto";
import { readFileSync } from "fs";

export function sha256(query: string): string {
  return createHash("sha256").update(query, "utf8").digest("hex");
}

GraphQL persisted queries (hash allowlist)

graphql security performance
by codesnips 3 tabs
typescript
import express from 'express';
import cookieParser from 'cookie-parser';
import { issueCsrfToken, csrfProtection } from './csrf';
import { transfersRouter } from './routes/transfers';

const app = express();

CSRF protection with double-submit cookie

security express csrf
by codesnips 3 tabs
typescript
import { useInfiniteQuery } from '@tanstack/react-query'
import api from '@/services/api'
import { Post, PaginatedResponse } from '@/types'

export function useInfinitePosts() {
  return useInfiniteQuery({

Infinite scroll with Intersection Observer

react infinite-scroll react-query
by Maya Patel 2 tabs
typescript
import { Registry, Histogram, Counter, collectDefaultMetrics } from 'prom-client';

export const register = new Registry();

collectDefaultMetrics({ register });

Prometheus metrics for request latency

observability node metrics
by codesnips 3 tabs