Articles

Improve your UI and UX of your Rails apps with the articles focusing on Tailwind CSS, ViewComponent and Hotwire.

  1. How do Turbo Streams Work (behind the scenes)
  2. Changing CSS as You Scroll with Stimulus
  3. Announcing JavaScript for Rails Developers
  4. Rails UI Components Library Tips and Tricks
  5. Smooth Transitions with Turbo Streams
  6. S3 Alternatives for Rails' ActiveStorage
  7. ActiveStorage Direct Upload with Stimulus
  8. RailsDesigners.com, Elite Ruby on Rails Product Engineers & UI Designers
  9. Drag & Drop Images with Preview using Stimulus Outlets
  10. Conditionally Style Turbo Frame Content
  11. Fix Any CSS Z-index Issue With This One Trick
  12. Create a Resizable Navigation with Stimulus
  13. Connected and Disconnected Target Callbacks with Stimulus
  14. Building Nested Forms in Rails with Stimulus
  15. Refactor Stimulus.js Controllers to Use Change Callbacks
  16. Launch a Turbo Modal with URL Params Using Stimulus
  17. Tidy up your Rails code with `inquiry`
  18. Better Inline Validation for Rails Forms (with ViewComponent or partials)
  19. Introducing: Beautiful Layouts for Your Rails App
  20. When to Use call, erb_template, or html.erb in Rails ViewComponents?
  21. Nested Forms With Turbo (without dependencies)
  22. Nested Layouts with Ruby on Rails
  23. Preview an Image Before Upload with Hotwire/Stimulus
  24. New Rails Designer Tool: beautiful Tailwind CSS gradients
  25. From Partials (and Helpers) to Embracing ViewComponent in Rails
  26. Use CSS' `only-child` instead of `if/else` logic
  27. Inline Save and Add Another with Rails and Hotwire
  28. 5 UI Components Libraries for Ruby on Rails (in 2024)
  29. Add a “X is writing…” with Rails and Turbo
  30. Create a String to Color Helper with Ruby
  31. Rails Designer V1 is here!
  32. Add a custom Tailwind CSS class for reusability and speed
  33. UI Design Tips Using Tailwind CSS for Developers
  34. When to use `link_to` and `button_to` in Rails
  35. How to add “Save and add another” feature to Rails apps
  36. How to Create an Undo Action with Rails
  37. How Layouts Work in Rails
  38. How to disable Rails Form's `.field_with_errors`
  39. Update a Progress Bar using Turbo Streams (using Custom Actions)
  40. PayPal is Now Accepted
  41. Lesser Known Rails Helpers to Write Cleaner View Code
  42. Communicating between Stimulus Controllers using Outlets API
  43. Customize the Turbo Progress Bar
  44. Inline SVG Icons in Your Rails App
  45. Custom Confirm Dialog For Turbo and Rails
  46. Simple Preferences to Any Resource for Rails
  47. How to Create a Stimulus Toggle Class Controller
  48. How to Add Disabled State to Buttons with Turbo & Tailwind CSS
  49. New in Rails Designer: the Command Menu Component
  50. How to Work with Forms inside Forms in Rails
  51. Hidden Gems of Tailwind CSS
  52. ViewComponent over Turbo Stream Broadcasts
  53. Hello 100 Rails Designers!
  54. Introducing Rails Icons: One Gem to Rule Them All
  55. Guide to Slots in Rails' ViewComponent
  56. Easy Peasy Form Validation Errors with Rails Turbo Frames (modals)
  57. Data-Attributes Magic with Tailwind CSS & Stimulus
  58. How to Toggle Multiple CSS Classes with Stimulus
  59. How to Properly Structure Stimulus Controller
  60. Make Your Rails App Future Proof: Move From React to Hotwire
  61. Custom Meta Titles in Rails Apps: A Quick Guide
  62. How to implement and customize Rails Flash Messages (notifications)
  63. Why choose ViewComponent over Rails partials
  64. Conditionally Add CSS Classes in Your Stimulus Controllers
  65. Conditionally Add CSS Classes to Your Views and Components
  66. How to add a skeleton UI to Rails with Turbo
  67. How to add Hotkeys to your Rails App with Stimulus
  68. Favicons in Rails Apps: the 2024 way
  69. The missing UI Components Library for Rails: Introducing Rails Designer
  70. Missing Styles from Tailwind CSS in ViewComponent?
  71. How to create Modals with Rails and Hotwire (and Tailwind CSS)
  72. Quicktips for ViewComponent with Tailwind CSS/Hotwire