CodeSnips

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

Turbo Native bridge for mobile hybrid apps

Turbo Native allows building iOS and Android apps using Rails server-rendered HTML with native navigation chrome. The web views communicate with native code via a JavaScript bridge for features like push notifications, camera access, or native UI patt
by Jordan Lee
0
0

ViewComponent for reusable UI components

ViewComponents bring object-oriented design to Rails views, making complex UI elements testable and reusable. Each component is a Ruby class paired with a template, encapsulating both logic and presentation. I use components for buttons, cards, modals
by Jordan Lee
0
0

Stimulus controller for autosaving form drafts

Losing form data due to browser crashes or accidental navigation is frustrating. An autosave controller periodically saves form state to localStorage and restores it on page load. I debounce the save operation to avoid excessive writes and clear the d
by Jordan Lee
0
0

Turbo Stream broadcasts for real-time collaboration

Broadcasting Turbo Streams via Action Cable enables real-time collaborative features without polling. When a model is created, updated, or destroyed, I broadcast the change to all subscribed users using broadcasts_to or manual broadcast_* methods. Sub
by Jordan Lee
0
0