Make Links & Forms Asynchronous
Submitting a form or clicking on a link shouldn’t trigger a full page reload. H1 Rails enables this in a single place using hx-boost, which means you can just build normal links and forms, and this will work automatically.- Read More about How We Use Htmx.
Use CSS animations on clickable elements
This is a pretty broad directive - generally it’s best to consult a designer on this stuff. But clickable elements that don’t change when moused over, feel stiff and unresponsive.Show loading text and spinners on buttons and forms
HTMX makes it very easy to show an element while a form, button, or link is loading- Read More about HTMX Loading Patterns
Make It Fast
It’s really important that the app responds quickly. Some things, like the user’s connection speed, are out of our control. But we can usually tune the app to respond in a time that feels almost instant on good connections. As a general rule, pages should load in 300 miliseconds or less on a good connection.Remove N+1 Queries
- Set Rails verbose query logging to
true
- this will now add the exact line of code that called the database, to your logs.
- Add the Bullet gem
- Use
.includes
when fetching data in the controller, to avoid triggering an n+1 in your view.