CodeSnips

ruby

Rails.application.routes.draw do
  concern :tabs do
    get :profile, on: :collection
    get :billing, on: :collection
    get :security, on: :collection
  end

Tabs UI using Turbo Frames (no client router)

rails hotwire turbo

by codesnips 4 tabs

typescript

import { startOfDay, isToday, isYesterday, format } from 'date-fns';

export interface ChatMessage {
  id: string;
  senderId: string;
  senderName: string;

Group Chat Messages by Day with a Memoized Selector in React

react typescript selectors

by codesnips 3 tabs

javascript

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["dialog", "message"]

  connect() {

Custom confirm dialog with Stimulus (better than window.confirm)

rails hotwire stimulus

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

swift

import SwiftUI

struct AnimationExamplesView: View {
    @State private var isExpanded = false
    @State private var rotation: Double = 0
    @State private var scale: CGFloat = 1.0

SwiftUI animations and transitions

swift swiftui animations

by Sofia Martinez 2 tabs

typescript

import { createContext } from "react";

export type ToastVariant = "info" | "success" | "error";

export interface Toast {
  id: string;

Toast Notification Queue with a useToast Hook and Context Provider in React

react hooks context

by codesnips 4 tabs

typescript

import { useCallback, useEffect, useRef, useState } from "react";

export function useIntersectionObserver(options?: IntersectionObserverInit) {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const nodeRef = useRef<Element | null>(null);
  const optionsKey = JSON.stringify(options ?? {});

Infinite-Scroll Feed with a React IntersectionObserver Hook and Cursor Pagination

react hooks intersection-observer

by codesnips 3 tabs

typescript

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

export interface ConfirmDialogData {
  title: string;
  message: string;

Reusable Angular Confirmation Dialog Service Returning an Observable of the User's Choice

angular rxjs observables

by codesnips 3 tabs

typescript

import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { FormsModule } from '@angular/forms';
import { Contact, ContactStore } from './contact.store';

@Component({

Virtual Scrolling a Long List in Angular with CDK and trackBy

angular virtual-scroll cdk

by codesnips 3 tabs

ruby

# Gemfile
gem 'view_component'

# app/components/button_component.rb
class ButtonComponent < ViewComponent::Base
  VARIANTS = %w[primary secondary danger].freeze

ViewComponent for reusable, testable view components

ruby rails view-component

by Sarah Mitchell 2 tabs

typescript

import React from 'react';
import { useToasts } from './useToasts';

export function Toaster() {
  const { toasts, dismiss } = useToasts();

Frontend: toast notifications via a small event bus

react frontend typescript

by codesnips 3 tabs

typescript

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

type Handler = (event: MouseEvent | TouchEvent) => void;

export function useClickOutside<T extends HTMLElement>(
  ref: RefObject<T>,

Reusable useClickOutside Hook for Closing Dropdowns in React

react hooks typescript

by codesnips 3 tabs