Futuristic Design w/ fzf

For Valentine's day, per tradition, my friend Zoe and I were creating a themed experience for our respective lovers.

Our theme this year was loosely, "London in the Future", and we wanted to put together an interactive, futuristic cocktail selection menu.

Normally, I might reach for web technologies to create a futuristic experience, but I was in a hurry, and the terminal is already so future-y, that it seemed a natural choice, and with a one-liner, I ended up with something I was really stoked about:

Given the directory structure:

Assign this whole big command to a command called drink:

Take the contents of the current directory:

And pipe them into fzf, an interactive chooser:

With two arguments, both relating to the preview feature of fzf, which allows you to present information related to what you're selecting.

The first, to define a column layout with the preview stacked vertically on top of the selector:

(This is wholly unnecessary, and was an aesthetic choice. For longer items, it's probably nice to have the vertical layout, where more line numbers are visible in the preview)

The second to use bat as the viewer for the preview window. bat is a drop-in replacement for the more traditional, cat (which could be used here). The reason I chose it though is for the colorization that it provides.

Note, that the {} is the placeholder fzf fills in with the contents of the selection.

Now see the menu!

That's it! An interactive menu!

After discussing with some fellow Recurse Center alums, I thought it worth mentioning a few addendums:

ls . --> ls *.md

Instead of ls ., it might be worth running ls *.md if you want to filter out any non-markdown files that may live in the directory.

alias -> script

This was implemented as a quick and dirty, but there are some reasons to run commands like this as a script, rather than as an alias, and that's something worth considering. Check out SO Answer for some differences.