Rails UI Engineering Articles
Practical guides for building better Rails interfaces. I share the patterns and approaches I use in my daily work with Hotwire, Tailwind, and modern front-end practices.
Latest articles
- Touch Events (swipe) using Stimulus
- Translations in Stimulus Controllers
- JavaScript for Rails Developers is Coming Soon
- Using the Keyboard with Stimulus
- Build a Notion-like editor with Rails, part 2
- Create an Animated Counter in Stimulus
- Introducing Rails Vault: simple to add settings to any Active Record model
- How to Send Requests from Stimulus Controllers
Popular
-
hotwire
Stimulus Features You (Didn't) Know
Stimulus is advertised as a modest JavaScript framework, but packs still quite a few features. Lets explore the lesser known ones. -
rails
Rails' Partial Features You (Didn't) Know
Rails partials have many lesser known features. From counters to spacer templates! Learn all there is to know about partials. -
tailwindcss
UI Design Tips Using Tailwind CSS for Developers
Explore some quick tips to level your UI design from okay to great with these Tailwind CSS-based tips. -
tailwindcss
Hidden Gems of Tailwind CSS
Unlock the full potential of Tailwind CSS for your Rails-based SaaS apps with our guide on hidden features. From changing checkbox colors to leveraging peer modifiers and custom variants, enhance your web UIs effortlessly.
Archive
February 2025
January 2025
December 2024
- The Best of 2024 from Rails Designer (number 1 won't surprise you 🤪)
- Use Tailwind CSS with Your Rails Forms
- Introducing Rails UI Audit
- Announcing Stimulus FX
- Rails Icons 1.0.0 is here
- Simple accordion without JavaScript
- Advanced Stimulus: Custom Action Options
- Why Disconnect in Stimulus Controllers
November 2024
- Stimulus Features You (Didn't) Know
- Spacer Components introduced in ViewComponent 3.20
- Inline Unsupported Browser Warning (using Rails 7.2 feature)
- Inheritance with Stimulus Controller
- Don't expose primary id's with Rails' dom_id
- Announcing: Build a SaaS with Ruby on Rails
- Rails' Partial Features You (Didn't) Know
- Mathematical and Optically alignment in (visual/UI) design
- Store UI State in localStorage with Stimulus
- Use Action Cable with Your Main PostgreSQL Database
October 2024
- Hotwire and Stimulus Tools You Need to Know
- Basic Autocomplete Without JavaScript using Datalist
- Tailwind CSS Patterns
- Broadcast Turbo Streams without Redis
- New: Rails Development Tool
- How do Turbo Streams Work (behind the scenes)
- Changing CSS as You Scroll with Stimulus
- Announcing JavaScript for Rails Developers
- Rails UI Components Library Tips and Tricks
- Smooth Transitions with Turbo Streams
- S3 Alternatives for Rails' ActiveStorage
- ActiveStorage Direct Upload with Stimulus
September 2024
- Drag & Drop Images with Preview using Stimulus Outlets
- Conditionally Style Turbo Frame Content
- Fix Any CSS Z-index Issue With This One Trick
- Create a Resizable Navigation with Stimulus
- Connected and Disconnected Target Callbacks with Stimulus
- Building Nested Forms in Rails with Stimulus
- Refactor Stimulus.js Controllers to Use Change Callbacks
August 2024
- Launch a Turbo Modal with URL Params Using Stimulus
- Tidy up your Rails code with `inquiry`
- Better Inline Validation for Rails Forms (with ViewComponent or partials)
- Introducing: Beautiful Layouts for Your Rails App
- When to Use call, erb_template, or html.erb in Rails ViewComponents?
- Nested Forms With Turbo (without dependencies)
- Nested Layouts with Ruby on Rails
- Preview an Image Before Upload with Hotwire/Stimulus
- New Rails Designer Tool: beautiful Tailwind CSS gradients
- From Partials (and Helpers) to Embracing ViewComponent in Rails
July 2024
- Use CSS' `only-child` instead of `if/else` logic
- Inline Save and Add Another with Rails and Hotwire
- 5 UI Components Libraries for Ruby on Rails (updated for 2025)
- Add a “X is writing…” with Rails and Turbo
- Create a String to Color Helper with Ruby
- Rails Designer V1 is here!
- Add a custom Tailwind CSS class for reusability and speed
- UI Design Tips Using Tailwind CSS for Developers
- When to use `link_to` and `button_to` in Rails
June 2024
May 2024
- Lesser Known Rails Helpers to Write Cleaner View Code
- Communicating between Stimulus Controllers using Outlets API
- Customize the Turbo Progress Bar
- Inline SVG Icons in Your Rails App
- Custom Confirm Dialog For Turbo and Rails
- Simple Preferences to Any Resource for Rails
- How to Create a Stimulus Toggle Class Controller
- How to Add Disabled State to Buttons with Turbo & Tailwind CSS
- New in Rails Designer: the Command Menu Component
April 2024
March 2024
- Data-Attributes Magic with Tailwind CSS & Stimulus
- How to Toggle Multiple CSS Classes with Stimulus
- How to Properly Structure Stimulus Controller
- Custom Meta Titles in Rails Apps: A Quick Guide
- Make Your Rails App Future Proof: Move From React to Hotwire
- How to implement and customize Rails Flash Messages (notifications)
- Why choose ViewComponent over Rails partials
- Conditionally Add CSS Classes to Your Views and Components
- Conditionally Add CSS Classes in Your Stimulus Controllers