After giving a presentation that included some live coding, a few audience members asked how I was doing stuff so quickly. Of course there’s no one answer; it’s a combination of a bunch of simple shortcuts and a lot of practice. In response to that inquiry I thought it made sense to see what shortcuts I am using on a daily basis without thinking of it.
On the front-end development team at Viget, we do a lot of our communication through GitHub’s pull requests, which allow everyone on the team to review changesets before they go into master. Since front-end devs primarily build UIs, a lot of our work is visual, so we explain our PRs with screenshots and LICEcap gifs to give reviewers more context about the changes they're critiquing.
We recently realized that these screenshots and gifs were probably valuable outside the team — we can send them to clients as minor progress updates, run them past designers to verify decisions, or archive them for our work viget.com/work page post-project. However, going back through our PRs and scraping out all the files is tedious work, so I decided to make something that simplified it.
ActiveAdmin has some pretty awesome built-in filtering functionality -- and it looks nice to boot!
In a previous post, I covered how these filters work under the covers -- using a sweet gem called Ransack. In this post, I'd like to talk about how to build your own filtering interface similar to how ActiveAdmin does.
So that ActiveAdmin filtering sidebar is pretty tight, but what really is it? It always seemed a bit magical to me. Turns out, it's just a form! In normal Rails projects, we're usually creating forms and pointing them at instances of a model:
form_for @user do |f| ... end
With ActiveAdmin's filtering sidebar, the form points to a Ransack search object. If we had a model
User, we'd get a Ransack search object like this:
User.search => Ransack::Search<class: User, base: Grouping <combinator: and>>
Knowing this, we can start to build our own filtering form to turn into a nice interface component:
search = User.search form_for search do |f| ... end
For those who aren't familiar with ActiveAdmin, it provides a nice out-of-the-box admin interface for Rails projects that has a pretty solid DSL. If you've never heard of ActiveAdmin or used it before -- check out the documentation!
ActiveAdmin has some pretty great out-of-the-box filters on resource index pages, which lets you search on a field-by-field basis to scope the collection of records. On each index page, any field you have on a given model will get a corresponding filter based on the underlying column's data type or whether or not it represents an association.
ActiveAdmin takes care of the DSL for defining filters as well as how they look on a page, but all the heavy lifting is done behind the scenes with the Ransack gem. If we want to do sweet, sweet things with filters, one must first learn how to harness the power of Ransack.