javascript

javascript
'use strict';

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

function backoffDelay(attempt, baseMs, maxDelayMs) {
  const exponential = baseMs * 2 ** attempt;

Retry Failed Async Operations With Exponential Backoff and Jitter in Node.js

nodejs retry backoff
by codesnips 2 tabs
erb
<%= turbo_frame_tag 'modal' %>

Keyboard shortcut “command palette” modal (Hotwire-first)

rails hotwire stimulus
by Henry Kim 3 tabs
javascript
export const required = (msg = 'This field is required') => (value) =>
  value && value.trim() !== '' ? '' : msg;

export const minLength = (n, msg) => (value) =>
  value && value.length >= n ? '' : msg || `Must be at least ${n} characters`;

Field-by-Field Signup Validation with a Reusable useForm Hook in React

react hooks forms
by codesnips 4 tabs
javascript
import React, { lazy, Suspense, useState, useEffect } from 'react';

// 1. Component lazy loading
const HeavyComponent = lazy(() => import('./HeavyComponent'));
const AdminPanel = lazy(() => import('./AdminPanel'));
const Dashboard = lazy(() => import('./Dashboard'));

Performance optimization - lazy loading and code splitting

performance optimization lazy-loading
by Alex Chang 2 tabs
javascript
import React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';

// 1. useState - managing component state
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

React hooks - useState, useEffect, and custom hooks

react javascript hooks
by Alex Chang 1 tab
javascript
const crypto = require('crypto');

function parseSignatureHeader(header) {
  const parts = {};
  for (const segment of String(header || '').split(',')) {
    const [key, value] = segment.split('=');

Verify Stripe-Style Webhook HMAC Signatures with a Timestamped Scheme in Express

express webhooks hmac
by codesnips 3 tabs
javascript
export function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
}

export function move(list, from, to) {
  const next = list.slice();

Drag-and-Drop Sortable List with Pointer Events and an Immutable Reorder Helper

react drag-and-drop pointer-events
by codesnips 3 tabs
javascript
// Basic closure example
function outer() {
  const message = 'Hello from outer';

  function inner() {
    console.log(message); // Accesses outer variable

JavaScript closures and lexical scope fundamentals

javascript closures scope
by Alex Chang 1 tab
javascript
import { useReducer, useCallback } from 'react';

const initialState = (present) => ({ past: [], present, future: [] });

function historyReducer(state, action) {
  const { past, present, future } = state;

Build an Undo/Redo History Stack with a useHistory Reducer Hook in React

react hooks usereducer
by codesnips 3 tabs
javascript
export const initialState = (steps, initialData = {}) => ({
  steps,
  stepIndex: 0,
  data: initialData,
  errors: {},
});

Multi-Step Form Wizard in React With a useReducer State Machine

react hooks usereducer
by codesnips 4 tabs
javascript
class TokenBucket {
  constructor(capacity, refillRatePerSec) {
    this.capacity = capacity;
    this.refillRate = refillRatePerSec;
    this.tokens = capacity;
    this.lastRefill = Date.now();

Token Bucket Rate Limiter as Express Middleware

express rate-limiting token-bucket
by codesnips 3 tabs
javascript
import * as Turbo from "@hotwired/turbo";

function metaContent(name) {
  const el = document.querySelector(`meta[name="${name}"]`);
  return el ? el.getAttribute("content") : null;
}

Attach custom headers to Turbo fetch requests (stimulus-free)

rails hotwire turbo
by codesnips 3 tabs