typescript

typescript
export interface UploadHandle {
  promise: Promise<{ status: number; body: string }>;
  xhr: XMLHttpRequest;
}

export function uploadFile(

React File Upload with Live Progress Bar Using XMLHttpRequest

react file-upload xmlhttprequest
by codesnips 3 tabs
typescript
// 1. Basic types
let username: string = 'Alex';
let age: number = 30;
let isActive: boolean = true;
let items: string[] = ['item1', 'item2'];
let numbers: Array<number> = [1, 2, 3];

TypeScript fundamentals for type-safe front-end code

typescript javascript types
by Alex Chang 2 tabs
typescript
import { useState, useRef } from 'react'
import { DirectUpload } from '@rails/activestorage'

interface ImageUploadProps {
  onUploadComplete: (blobId: string) => void
  maxSize?: number

Image upload with preview and Rails Direct Upload

react rails activestorage
by Maya Patel 1 tab
typescript
export type EventMap = Record<string, unknown[]>;

type Listener<Args extends unknown[]> = (...args: Args) => void;

export class TypedEmitter<Events extends EventMap> {
  private listeners = new Map<keyof Events, Set<Listener<any>>>();

Type-Safe Event Emitter With Strongly-Typed Listener Payloads in TypeScript

typescript events event-emitter
by codesnips 3 tabs
typescript
import { useCallback, useEffect, useRef, useState } from 'react';

export type CopyStatus = 'idle' | 'copied' | 'error';

function fallbackCopy(text: string): boolean {
  const textarea = document.createElement('textarea');

Frontend: copy-to-clipboard with fallback

frontend ux react
by codesnips 3 tabs
typescript
import { Response } from 'express';

type Client = { id: number; res: Response };

const clients = new Map<string, Set<Client>>();
let nextId = 1;

SSE endpoint for server-to-browser events

realtime sse express
by codesnips 3 tabs
typescript
import { Writable } from "node:stream";
import type { Pool } from "pg";

interface Row {
  email: string;
  name: string;

Streaming CSV import (Node streams)

streams postgres nodejs
by codesnips 3 tabs
typescript
import React, { useMemo } from 'react';
import { VirtualList } from './VirtualList';

interface LogEntry {
  id: number;
  level: 'info' | 'warn' | 'error';

Virtualized List in React: Render Only Visible Rows on Scroll

react virtualization windowing
by codesnips 3 tabs
lua
-- KEYS[1] = current window key, KEYS[2] = previous window key
-- ARGV: limit, window_ms, elapsed_ms
local limit = tonumber(ARGV[1])
local window = tonumber(ARGV[2])
local elapsed = tonumber(ARGV[3])

Sliding-Window Rate Limiting for Express Routes Backed by Redis

express redis rate-limiting
by codesnips 4 tabs
typescript
import { lazy, Suspense } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Layout from '@/components/Layout'

// Eager load critical routes
import Home from '@/pages/Home'

Lazy loading routes with React.lazy and Suspense

react performance code-splitting
by Maya Patel 1 tab
typescript
import * as Sentry from "@sentry/react";

const environment = import.meta.env.VITE_ENVIRONMENT ?? "development";
const isProd = environment === "production";

export function initSentry(): void {

Sentry initialization with release + environment

observability frontend sentry
by codesnips 3 tabs
typescript
const rawOrigins = process.env.ALLOWED_ORIGINS ?? "";

export const allowedOrigins = new Set(
  rawOrigins
    .split(",")
    .map((o) => o.trim())

CORS configuration that’s explicit (no *)

security http express
by codesnips 3 tabs