I recently needed to display some content “cards” from dynamic content interspersed with static content on a Rails-backed website I was building for a client. Essentially, I needed something like this…

<div class="container">
  <div class="person">John Smith</div>
  <div class="person">Bill Nye</div>
  <div class="interstitial">
    <a href="/sign-up">Sign Up Now</a>
  </div>
  <div class="person">Carl Sagan</div>
</div>

…only where the people are filled in from the database. One solution is using CSS ordering instead of source ordering. This can work really well, but it takes additional time and can increase the cognitive overhead for reasoning about the behavior of a piece of code, especially for someone new to the project.

I wanted the source order to reflect the display order, but I didn’t want to repeat myself unnecessarily.

Verbose, and liable to trip me up in the future:

I’m often moving pretty quickly when it comes time to commit work to Git. I have a bit of a workflow down, and I type the same few shortcuts frequently:

$ git st (expands to status)
$ git ks (expands to difftool, which opens Kaleidoscope)
$ git add -A
$ git ci (expands to commit)

Regularly, though, my fingers will transpose the t in Git and the space that follows it: gi tks.

This has become frequent enough that I finally took the time to address it by making the desired action still occur:

$ git config --global alias.tst status
$ git config --global alias.tks difftool
$ git config --global alias.tci commit

Then, in ~/.bash_profile:

alias gi=git

Now when I make a mistake, Git does what I want and I don’t lose my flow. It’s a small thing, but it’ll improve my day a little bit a dozen times a day.

Mentioned in this post: Kaleidoscope, the (mostly) fantastic diff visualizer...

On occasion, I’ll need to add sensitive configuration data to a Heroku application that happens to be multiline or contains non-alphanumeric characters. For example, uploading a public or private key file, where whitespace (including vertical whitespace) is significant. Another example that I ran into recently was uploading a JSON file for Google Auth configuration.

The solution is pretty straightforward:

$ heroku config:set FOO="$(< /my/file.json)"

That’s it. If you feel like it, you can confirm that the data is represented accurately by checking heroku config.

Perhaps this will help you if you’re in a similar situation. Cheers!

I recently saw another designer using minimal-ui in his <meta name="viewport"> declaration. And then I saw Daniel Eden explain it on Twitter, and go so far as to include it on his own website.

Adding “minimal-ui” to the viewport meta minimizes Safari’s chrome. Tap to reveal fully. E.g. pic.twitter.com/1N7RHJMZt3

— Daniel Eden (@_dte) January 26, 2014

I gave it a cursory look, and included it on my next project without much thought.

It wasn’t until I started working on mobile layout that I realized something was up. Dragging the page down (i.e. scrolling toward the top) in mobile Safari normally has the behavior of revealing the chrome on the bottom of the screen, including back, forward, bookmark, and tab-switching buttons.

With minimal-ui, however, this behavior was eliminated. Tapping, as suggested in the above referenced tweet, does not have any affect. The only way to reveal...