CodeSnips

Jordan Lee

24 code snips and 0 followers in 8 days
Follow

Hotwire-powered multi-step forms

Multi-step forms traditionally require complex JavaScript state management, but Hotwire makes them simple. Each step is a separate controller action that renders a Turbo Frame containing the current step's fields. Navigation between steps updates only
by Jordan Lee
0
0

Tailwind CSS with Rails asset pipeline

Tailwind CSS provides utility-first styling that pairs perfectly with Rails component-driven architecture. I configure Tailwind to scan templates for class names and generate only the CSS being used. The standalone CLI runs during development with --w
by Jordan Lee
0
0

Toast notifications with Stimulus and Tailwind

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
by Jordan Lee
0
0

Progress indicators for long-running operations

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
by Jordan Lee
0
0

Keyboard shortcuts with Stimulus and Mousetrap

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
by Jordan Lee
0
0

Live search with Turbo Frames and debouncing

Real-time search enhances discoverability but naive implementations hammer the server with requests. I use Turbo Frames to scope search results and a Stimulus controller to debounce input events, only sending requests after typing pauses. The search f
by Jordan Lee
0
0

Accessible modal dialogs with Stimulus and ARIA

Modals are everywhere but often fail accessibility requirements. I build modals with Stimulus that properly manage focus, support keyboard navigation, and announce themselves to screen readers. When opened, focus moves to the modal and gets trapped in
by Jordan Lee
0
0

Optimistic UI updates with Turbo Streams

Waiting for server confirmation makes interfaces feel sluggish. Optimistic updates immediately show the expected result, then reconcile with the server response. When a user likes a post, I increment the count immediately via Stimulus, submit the requ
by Jordan Lee
0
0

Mobile-first responsive navigation with Stimulus

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
by Jordan Lee
0
0

Stimulus controller for drag-and-drop file uploads

Modern file uploads should support drag-and-drop in addition to traditional file inputs. I use Stimulus to handle dragover, drop, and paste events, showing upload previews and progress. The controller prevents default browser behavior for drag events
by Jordan Lee
0
0

Morphing page updates with Turbo Morphing

Traditional Turbo Drive replaces the entire <body>, which can cause flickering and lose scroll position. Turbo Morphing (using idiomorph algorithm) intelligently diffs the DOM and updates only changed elements, preserving focus, scroll, and tran
by Jordan Lee
0
0

Stimulus outlets for inter-controller communication

Outlets allow Stimulus controllers to reference and communicate with other controller instances, enabling composition without tight coupling. I define outlets by specifying which controller types to connect to, and Stimulus automatically finds matchin
by Jordan Lee
0
0