ux

javascript
import { Controller } from "@hotwired/stimulus"
import { DirectUpload } from "@rails/activestorage"

export default class extends Controller {
  static targets = ["input", "preview", "status"]
  static values = {

Stimulus controller for drag-and-drop file uploads

stimulus javascript file-uploads
by Jordan Lee 2 tabs
typescript
export interface UseClipboardResult {
  copied: boolean;
  error: Error | null;
  copy: (value: string) => Promise<boolean>;
}

Copy-to-Clipboard Button With a useClipboard Hook and Timed Success Feedback

react hooks clipboard
by codesnips 3 tabs
ruby
class PostsController < ApplicationController
  def create
    @post = current_user.posts.build(post_params)

    if @post.save
      flash[:success] = 'Post was successfully created.'

Rails Flash messages for user feedback

rails flash messages
by Maya Patel 2 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["field"]

  connect() {

Stimulus: autofocus the first invalid field after Turbo update

rails stimulus hotwire
by codesnips 3 tabs
css
.confirm-dialog {
  border: none;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 26rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);

Stimulus: resilient confirmation for destructive actions

rails stimulus hotwire
by codesnips 3 tabs
typescript
import { z } from "zod";

export const signupSchema = z
  .object({
    email: z.string().min(1, "Email is required").email("Enter a valid email"),
    username: z

React Signup Form Validation With Zod and Field-Level Errors

react zod forms
by codesnips 3 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
typescript
import { CanDeactivateFn } from '@angular/router';
import { Observable } from 'rxjs';

export interface HasUnsavedChanges {
  canDeactivate(): boolean | Observable<boolean>;
}

Warn Users About Unsaved Changes With an Angular CanDeactivate Guard

angular routing guards
by codesnips 3 tabs
typescript
import React from 'react'

interface SkeletonProps {
  width?: string | number
  height?: string | number
  className?: string

Skeleton screens for better perceived performance

react ux performance
by Maya Patel 3 tabs
swift
import UIKit

class HapticFeedbackManager {
    static let shared = HapticFeedbackManager()

    private let impactLight = UIImpactFeedbackGenerator(style: .light)

Haptic feedback with UIFeedbackGenerator

swift haptics feedback
by Sofia Martinez 1 tab
typescript
export interface Page<T> {
  items: T[];
  nextCursor: string | null;
}

export interface Post {

Infinite-Scroll List in React with IntersectionObserver and Cursor Pagination

react hooks infinite-scroll
by codesnips 3 tabs