Articles

Articles, tips and ideas to become a better Rails UI engineer and front-end designer.

Archive

  1. Touch Events (swipe) using Stimulus
  2. Translations in Stimulus Controllers
  3. JavaScript for Rails Developers is Coming Soon
  4. Using the Keyboard with Stimulus
  5. Build a Notion-like editor with Rails, part 2
  6. Create a Animated Counter in Stimulus
  7. Introducing Rails Vault: simple to add settings to any Active Record model
  8. How to Send Requests from Stimulus Controllers
  9. Build a Notion-like editor with Rails
  10. Multiple component variants with Tailwind
  11. Rails link_to_if and link_to_unless
  12. Free Icon Libraries for Rails Apps
  13. Introducing Rails Stats
  14. Use cases for Turbo's Custom Events
  15. How to order attributes on HTML elements
  16. The Best of 2024 from Rails Designer (number 1 won't surprise you 🤪)
  17. Use Tailwind CSS with Your Rails Forms
  18. Introducing Rails UI Audit
  19. Announcing Stimulus FX
  20. Rails Icons 1.0.0 is here
  21. Simple accordion without JavaScript
  22. Advanced Stimulus: Custom Action Options
  23. Why Disconnect in Stimulus Controllers
  24. Stimulus Features You (Didn't) Know
  25. Spacer Components introduced in ViewComponent 3.20
  26. Inline Unsupported Browser Warning (using Rails 7.2 feature)
  27. Inheritance with Stimulus Controller
  28. Don't expose primary id's with Rails' dom_id
  29. Announcing: Build a SaaS with Ruby on Rails
  30. Rails' Partial Features You (didn't) Know
  31. Mathematical and Optically alignment in (visual/UI) design
  32. Store UI State in localStorage with Stimulus
  33. Use Action Cable with Your Main PostgreSQL Database
  34. Hotwire and Stimulus Tools You Need to Know
  35. Basic Autocomplete Without JavaScript using Datalist
  36. Tailwind CSS Patterns
  37. Broadcast Turbo Streams without Redis
  38. New: Rails Development Tool
  39. How do Turbo Streams Work (behind the scenes)
  40. Changing CSS as You Scroll with Stimulus
  41. Announcing JavaScript for Rails Developers
  42. Rails UI Components Library Tips and Tricks
  43. Smooth Transitions with Turbo Streams
  44. S3 Alternatives for Rails' ActiveStorage
  45. ActiveStorage Direct Upload with Stimulus
  46. RailsDesigners.com, Elite Ruby on Rails Product Engineers & UI Designers
  47. Drag & Drop Images with Preview using Stimulus Outlets
  48. Conditionally Style Turbo Frame Content
  49. Fix Any CSS Z-index Issue With This One Trick
  50. Create a Resizable Navigation with Stimulus
  51. Connected and Disconnected Target Callbacks with Stimulus
  52. Building Nested Forms in Rails with Stimulus
  53. Refactor Stimulus.js Controllers to Use Change Callbacks
  54. Launch a Turbo Modal with URL Params Using Stimulus
  55. Tidy up your Rails code with `inquiry`
  56. Better Inline Validation for Rails Forms (with ViewComponent or partials)
  57. Introducing: Beautiful Layouts for Your Rails App
  58. When to Use call, erb_template, or html.erb in Rails ViewComponents?
  59. Nested Forms With Turbo (without dependencies)
  60. Nested Layouts with Ruby on Rails
  61. Preview an Image Before Upload with Hotwire/Stimulus
  62. New Rails Designer Tool: beautiful Tailwind CSS gradients
  63. From Partials (and Helpers) to Embracing ViewComponent in Rails
  64. Use CSS' `only-child` instead of `if/else` logic
  65. Inline Save and Add Another with Rails and Hotwire
  66. 5 UI Components Libraries for Ruby on Rails (updated for 2025)
  67. Add a “X is writing…” with Rails and Turbo
  68. Create a String to Color Helper with Ruby
  69. Rails Designer V1 is here!
  70. Add a custom Tailwind CSS class for reusability and speed
  71. UI Design Tips Using Tailwind CSS for Developers
  72. When to use `link_to` and `button_to` in Rails
  73. How to add “Save and add another” feature to Rails apps
  74. How to Create an Undo Action with Rails
  75. How Layouts Work in Rails
  76. How to disable Rails Form's `.field_with_errors`
  77. Update a Progress Bar using Turbo Streams (using Custom Actions)
  78. PayPal is Now Accepted
  79. Lesser Known Rails Helpers to Write Cleaner View Code
  80. Communicating between Stimulus Controllers using Outlets API
  81. Customize the Turbo Progress Bar
  82. Inline SVG Icons in Your Rails App
  83. Custom Confirm Dialog For Turbo and Rails
  84. Simple Preferences to Any Resource for Rails
  85. How to Create a Stimulus Toggle Class Controller
  86. How to Add Disabled State to Buttons with Turbo & Tailwind CSS
  87. New in Rails Designer: the Command Menu Component
  88. How to Work with Forms inside Forms in Rails
  89. Hidden Gems of Tailwind CSS
  90. ViewComponent over Turbo Stream Broadcasts
  91. Hello 100 Rails Designers!
  92. Introducing Rails Icons: One Gem to Rule Them All
  93. Guide to Slots in Rails' ViewComponent
  94. Easy Peasy Form Validation Errors with Rails Turbo Frames (modals)
  95. Data-Attributes Magic with Tailwind CSS & Stimulus
  96. How to Toggle Multiple CSS Classes with Stimulus
  97. How to Properly Structure Stimulus Controller
  98. Make Your Rails App Future Proof: Move From React to Hotwire
  99. Custom Meta Titles in Rails Apps: A Quick Guide
  100. How to implement and customize Rails Flash Messages (notifications)
  101. Why choose ViewComponent over Rails partials
  102. Conditionally Add CSS Classes in Your Stimulus Controllers
  103. Conditionally Add CSS Classes to Your Views and Components
  104. How to add a skeleton UI to Rails with Turbo
  105. How to add Hotkeys to your Rails App with Stimulus
  106. Favicons in Rails Apps (updated for 2025)
  107. The missing UI Components Library for Rails: Introducing Rails Designer
  108. Missing Styles from Tailwind CSS in ViewComponent?
  109. How to create Modals with Rails and Hotwire (and Tailwind CSS)
  110. Quicktips for ViewComponent with Tailwind CSS/Hotwire