ruby
class ProductsController < ApplicationController
  before_action :set_product, only: %i[edit update]

  def index
    @products = Product.order(:name)
  end

Inline edit a table row with Turbo Frames

rails hotwire turbo
by codesnips 4 tabs
ruby
module FlashHelper
  FLASH_CLASSES = {
    "notice" => "flash--success",
    "alert"  => "flash--error",
    "error"  => "flash--error"
  }.freeze

Turbo Stream flash messages without custom JS

rails hotwire turbo
by codesnips 4 tabs
typescript
import axios from 'axios';

export type NormalizedErrors = {
  fields: Record<string, string>;
  formLevel: string | null;
};

Frontend: normalize and display server validation errors

ux typescript react
by codesnips 3 tabs
typescript
import { z } from "zod";

export const envSchema = z.object({
  VITE_API_URL: z.string().url(),
  VITE_APP_NAME: z.string().min(1).default("my-app"),
  VITE_ENABLE_ANALYTICS: z

Vite env handling: explicit prefixes only

vite frontend env
by codesnips 3 tabs
json
{
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",

Prettier config for consistent formatting

tooling prettier formatting
by codesnips 3 tabs
javascript
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettierConfig from 'eslint-config-prettier';

export default [
  js.configs.recommended,

ESLint config that avoids bikeshedding

tooling typescript eslint
by codesnips 3 tabs
javascript
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
  openAnalyzer: true,
});

/** @type {import('next').NextConfig} */

Next.js bundle analyzer for targeted performance work

nextjs performance tooling
by codesnips 4 tabs
typescript
import type { IncomingMessage, ServerResponse } from "http";

const MIN_BYTES = 1024;

const INCOMPRESSIBLE = /^(image|video|audio)\/|application\/(zip|gzip|x-brotli|pdf|octet-stream)/i;

Response compression (only when it helps)

performance http express
by codesnips 3 tabs
typescript
import crypto from 'crypto';
import helmet from 'helmet';
import type { Express, Request, Response, NextFunction } from 'express';

function cspNonce(req: Request, res: Response, next: NextFunction): void {
  res.locals.cspNonce = crypto.randomBytes(16).toString('base64');

Security headers with helmet (baseline hardening)

security express helmet
by codesnips 3 tabs
typescript
import { Readable } from "node:stream";
import { S3Client } from "@aws-sdk/client-s3";
import { Upload } from "@aws-sdk/lib-storage";

const s3 = new S3Client({ region: process.env.AWS_REGION });
const BUCKET = process.env.UPLOAD_BUCKET!;

Multipart upload streaming (busboy)

busboy express s3
by codesnips 3 tabs
sql
CREATE TABLE daily_metrics (
    id          BIGGENERATED ALWAYS AS IDENTITY PRIMARY KEY,
    tenant_id   BIGINT      NOT NULL,
    metric      TEXT        NOT NULL,
    day         DATE        NOT NULL,
    count       BIGINT      NOT NULL DEFAULT 0,

SQL upsert for counters (ON CONFLICT DO UPDATE)

postgres sql concurrency
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