Your friends at Viget present Extend, a Code & Technology Blog

My Overused Sublime Text Keyboard Shortcuts

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.


(Finally) Introducing RouterRouter, a JavaScript Routing Library derived from Backbone

Just over a year ago now, I wrapped up a significantly large project for The Chronicle of Higher Education. I spent a good amount of my time on the project learning and working with Backbone.js, a popular MVC-ish JavaScript library. There are plenty of things to like and dislike about Backbone, but I really like the library’s Router.


PRchive: A little tool for collecting media from your GitHub pull requests

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.


How to Build Your Own Filters with Ransack

ActiveAdmin has some pretty awesome built-in filtering functionality -- and it looks nice to boot!

filters

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.

Dat Sidebar

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

ActiveAdmin Filters—Unlocking the Power of Ransack

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.

default_filters

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.