ux

Power users appreciate keyboard shortcuts that speed up common actions. I integrate the Mousetrap library via Stimulus to define app-wide shortcuts like cmd+k for search, c to compose, or ? to show help. The controller binds shortcuts on connect and u

HTML5 form validation uses attributes like required, pattern, min, max, and type to validate input. I leverage native validation before JavaScript. The <label> element associates text with inputs for accessibility. Input types like email, tel, u

The default browser confirm() dialog is ugly and doesn't match your design system. Turbo provides hooks to intercept confirmation dialogs and show custom modals instead. I listen for the turbo:before-fetch-request event, check if the element has data-

Simple disclosure components are everywhere: FAQ, details panels, advanced filters. I keep them as progressive enhancement: the HTML is valid and readable, and Stimulus adds toggling behavior. The controller toggles a hidden class and updates aria-exp

Server-side validation is the source of truth, but raw error payloads are rarely UI-friendly. I normalize validation errors into a Record<field, message> shape so forms can render them consistently. The tricky detail is mapping server field path

When toasts are appended via Turbo Streams, they should self-dismiss without extra wiring. I attach a Stimulus controller to the toast element that schedules removal after a delay (and allows manual close). This means the server only needs to render a

Users need feedback during slow operations like file uploads or complex processing. I combine Turbo Streams with background jobs to show real-time progress. When an operation starts, I enqueue a job that periodically broadcasts progress updates via Ac

Mobile navigation requires different patterns than desktop—hamburger menus, slide-out drawers, and touch-friendly interactions. I build a responsive nav with Stimulus that shows a mobile menu button below a breakpoint and auto-hides when links are cli

Undo is a great UX improvement for destructive actions. My approach is: on destroy, soft-delete the record (or keep enough data to restore), remove it from the list via turbo_stream.remove, and append a toast with an “Undo” link. Clicking “Undo” hits

Toast notifications provide non-intrusive feedback for user actions. I build a notification system with Stimulus that manages a stack of toasts, auto-dismisses them after a timeout, and supports manual dismissal. Notifications are queued when multiple

Spinners hide layout shifts and make an app feel slow even when it isn’t. Skeletons preserve layout and give users a sense of progress without jumping content around. I keep skeleton components simple and match the shape of the final UI. One practical

Sometimes you want to show non-blocking warnings (e.g., “link looks unreachable”) while still saving. Turbo streams can append warnings to a panel without rerendering the whole page.