This is a guide to help you build “inline CRUDs” with rails and hotwire, where you create and edit records in the same page. Instead of a “new product” page it shows the form in the same page Instead of an “edit product” page it shows the form on the same page by replacing the product item. Like in the next video… The example app You can find the code of the app in the video on: github/bhserna/inline_crud_hotwire To explain how you can add this behavior to your app, I will use the app from the video as an example. If you need help to extrapolate the example for your use case, you can ask a ..read more

Here I want to show you how you can build “remote modals” (modals where the content is requested to the server), submit forms embedded in them and handle errors, with rails, hotwire and bootstrap. Example app I will show you how to build is something like this… Where you can… Click a link that requests content to the server and then shown inside a modal. Submit a form and display the errors inside the modal If the form is processed with success, the redirect to the expected page. Keep the “fade” effect of the bootstrap modal. Like a standard rails CRUD, but using modals to show the form. Pl ..read more

A very common task as a Rails developer is to let the user filter a list with a combination of search fields and selects. Here I want to show you one way of doing it using turbo and stimulus.js from hotwire, with an example app. Play with the code The code of the app is on github.com/bhserna/dynamic filters hotwire, you can clone it and play with it. What does the app do? The app displays a paginated list of products and lets the user filter the products by selecting a category and typing a search term. How does it work? By watching the file template products/index.haml, you will see that the ..read more

One of the things that I want from css is to have to possibility to compose already defined styles, to define new ones… If you try to write “Semantic CSS”, you will find a hard time trying to avoid the repetition on things that look the same but are different things, like when you want to render a “card” for the an author and then for an article. You can create “content agnostic CSS components”, but things start to get complicated, when you want to avoid duplication if things from one component are similar to other components. One way of solving this problems is by using something like the @ex ..read more

If you work with capybara and you are constantly searching for capybara helpers, maybe to have this little cheatsheet at hand could work for you. I already have share it on as a blog post, but now I want to share it with you as a pdf ..read more

Maybe you are already familiar with includes or preload, but you know that a lot of the time you will need more than just preload(:comments). I have already share with you a guide for preloading associations… It starts with the basics, with just a regular has_many, preload orincludes, and build from this to then show you things like… How to preload nested associations How to define associations to help you simplify the preloading How to preload just a part of the association like an scope How to preload just the “top 1 per group” or the “latest of each” How ..read more

Although there are tools that can help you detect n+1 queries before they hit production, I think that is good to be able to identify n+1 queries directly by watching your logs… Not all the tools will tell you exactly that you have n+1 queries, and sometimes the ones that will tell you, can give you false negatives. Also I think that, although there is hardly no training anywhere for this ability, is always an expected ability for an experienced rails developer. Look for repeated queries As you may know, an n+1 queries problem means that a query is executed for every result of a previous query ..read more

Maybe you already know that “fixing” an n+1 queries problem can hurt the performance of your app… But even if you already know it and also understand how it can happen, it could not be obvious how to know if this is will happen with your fix. Some things that you can try are to… Compare the requests time Compare the queries load time Compare the produced allocations Depending on the criticality of the fix and the volume that is handling your app you can just push to production and check there or try to simulate with the expected volume of data on development. Try on development first Althoug ..read more

When you are working with SQL, to use information from other tables you would use a JOIN… And if you are just starting to learn ActiveRecord comming from SQL, you could think that by using the joins method you will be able to later use the data from the associations without doing a new query. And this is true and false at the same time… It will let you use the association on the query Yes you will be able to use the data of the associations but just in the same query. If you want to use the data from an association after the query result has been returned, you will need a new query. To see it ..read more

I want to share with you an example application to help you visualize why “fixing” an n+1 queries problem, can hurt the performance of your application if you preload assocations with too many records. It simulates the index page of a blog application. And appart from the rack-mini-profiler gem, it shows the logs in the page to help you visualize easily the queries, request time and allocations. By default it has an n+1 queries problem. It makes a call to the database to fetch the latest comment for each post in the list, but you can fix it with a checkbox. It will let you compare request time ..read more