Today I Learned

A Hashrocket project

76 posts about #workflow

Install a Homebrew Formula at Master

We’ve been testing out the forthcoming Elixir 1.6 formatter on Tilex’s codebase, which requires a version of the langage that has not yet been officially released.

There’s a few ways to do this. Since Elixir is installed with Homebrew on my machine, here’s how to do it with Homebrew:

$ brew install elixir --HEAD

From the Homebrew man page:

If --HEAD is passed, and formula defines it, install the HEAD version, aka master, trunk, unstable.

Welcome to the bleeding edge!

h/t Brian Dunn

Break Current tmux Pane Out To Separate Window

You have a split pane open in your current window. Perhaps it is running a local server or has a connection to a database. The pane is taking up too much space in the current window, but it is important so you don’t want to just kill it. If that is the case, break it out into a separate window.

With that pane in focus, enter into command mode (<prefix>:) and then issue the break-pane command.

Alternatively, you can trigger this with a keybinding: <prefix>!.

See man tmux for more details.

Require Additional JS Libraries In Postman

When writing pre-request scripts and test scripts as part of a Postman request, you aren’t limited to vanilla JavaScript. There are a handful of libraries that can be required where needed.

This short list of available libraries includes cherrio, lodash, and moment.

To pull one of these into a particular script, use the standard require feature:

var moment = require('moment');

var now = moment();

For a full list of what is available, check out Postman’s Sandbox API Reference.

Environmental Variables and Chaining with Postman

Postman is a tool for building APIs. We’ve been digging into it today; it’s got some great features.

Today I learned we can chain requests, passing the result from one API interaction to all subsequent interactions.

Let’s say one API call gets a token on success, a token that all other calls require. When we run the first request, we can add a test that pulls out and sets the token:

var data = JSON.parse(responseBody);
postman.setEnvironmentVariable("token", data.token);

Now, other tests can reference {{token}} in their headers. We can even chain calls in Postman’s automated test runner, ensuring that the token-getting request always runs first.

more info

Hub CI Status

hub is a command-line client for Github. It lets you manage pull requests, forks, issues, and more from the command line. I regularly find new ways to integrate it into my open-source gardening.

Today I learned hub can report on your CI integration. We recently switched TIL to Circle CI, are iterating toward a stable test build, so CI status is important and not always predictable.

I check the status of a commit with the following command:

$ hub ci-status 7aa1316fe8665ef8cab5dd10cc80da024625ba20
$ hub ci-status HEAD

Search Tweets By Author

Twitter has some advanced search features that allow you to do more than just search by keyword. The from:<author> syntax is the way that you can restrict your search results to a specific twitter user.

twitter from search

By using "pair programming" from:hashrocket, I am able to find all of the tweets by @hashrocket that use the exact phrase pair programming.

tmux copy-mode -u, useless or useful?

Tmux comes with a key binding for both copy-mode and copy-mode -u. The first is straight forward, you can navigate through the window history, highlight something and place it into your tmux buffer. I was curious about what the -u flag was for, and the man page says:

The -u option scrolls one page up.

So the -u option just places you into copy-mode one page up. Useless! Or wait, maybe that’s something I want…

Screengrab to Clipboard on Mac

If you’ve ever taken a screengrab on a Mac with CMD + Shift + 4, then pasted or dragged that image into a text area such as a Github issue description, there is a better way: CMD + CTRL + Shift + 4. This captures your screengrab right to the clipboard, ready to paste wherever.

The equivalent command with 3– take a screenshot– also works as expected.

This isn’t a particularly ergonomic key combination, but it helps when adding visuals to bug reports and feature requests.

h/t Dorian Karter

Advanced Google Queries

You can use various techniques to narrow your Google queries:

To start, open a new tab, and google Compare those results to the following: This will only return resources that have a reference to this website. admin Same as above, but only containing resources that contain the word admin. In this case, it shows all of the TIL posts containing admin. Only pages that have links to Sites that are similar to (other dev shops).

source: ‘The Web Application Hackers Handbook 2’ - Dafydd Stuttard & Marcus Pinto

Fork A Heroku Project

The Heroku CLI has a useful command I recently learned about, called heroku fork. Here’s how it works:

$ heroku fork --from tilex-staging --to tilex

As the example suggests, I’ve used this tool to clone a tricky-to-set-up Heroku staging application as a production application. It’s great.

The bad news is that Heroku us sunsetting fork as a core CLI command. Use it while you can. After that, you can fork the Github repo and use it as CLI plugin.

Fingerpring of an ssh key in multiple formats

You might need to confirm which keys you have attached to your github account. Github provides a list of your keys with the associated fingerprints. If you have a public key on your machine you can see what fingerprint it has with:

> ssh-keygen -lf ~/.ssh/
4096 SHA256:/6Rat4zVZ0auHEwWtF4QG8NA0j4NAKWisFuXV0ZP5zk (RSA)

Github displays an md5 fingerprint rather than a sha256 fingerprint. You can use the -E flag to choose a specific hash type.

> ssh-keygen -E md5 -lf ~/.ssh/
4096 MD5:e3:19:85:1c:8a:31:0f:4b:de:cb:6d:a7:64:b4:4e:e7 (RSA)

Opening Gnome terminal emulator

In an attempt to get better with keyboard shortcuts on Ubuntu I’ve - for the time being - ditched the mouse. I generally only use two applications, Firefox and Terminal.

Opening a new terminal is as easy as:

Ctrl + Shift + T

It starts rather small but I resize it by using left or right with the Super (window/apple/command) key.

Super + Left
Super + Right

Then its resized to either the left half of the screen or the right half of the screen.

Add email to github account

You can have multiple emails associated with your github account so that if your commits have or on another machine your commits have they’ll both show up as you on the github system.

In my case, all commits on hashrocket workstations are and we change who that somebody is with the pear application. So when I’m working on a hashrocket workstation I commit as

When editing a profile on github there is a left hand menu labeled ‘personal settings’ and in that menu there is an emails link. When you click emails you have the opportunity to ‘Add email address’. There ya go! Happy committing!

H/T Matt Polito

Debug :hover selectors in CSS

When styling HTML you may need to define a hover style the css of which might look like this:

div.something:hover {
  background-color: red;

The div with class something will now have a red background when your mouse hovers over it.

This can be hard to debug however, if this were a regular style we could inspect it and change the style of the element in dev tools. With hovers, the style is only available in dev tools when the mouse is physically over the element.

Chrome has a facility to declare that a hover state should be on for an element. Simply open dev tools and in the “Elements” tab right click an element to get a context menu. The menu will have options :active, :hover, :focus, and :visited. Choose :hover and the hover state will be permenantly affixed to that element. You can now play with the hover style until it looks right.

Full page screenshots in Firefox

Firefox has an interesting feature called the Developer Toolbar. This toolbar is entirely separate from the JS console and provides a cli for custom commands for specific functionality. It can opened with shift-F2 or Tools > Developers > Developer Toolbar.

In that toolbar, type:

screenshot --fullpage my-page.png

A png file with the given name will be saved to the Downloads folder. The file format will always be png.


More Developer Toolbar information can be found here.

Type help in the toolbar to see all the commands.

Images in markdown

Images in markdown are the same as links except for the bang (!) character preceding the syntax.

The syntax for links is squares-parens. I have a hard time remembering this, and I try parens-squares as often as not, but its squares-parens, like this:

[My text](

The syntax for images is also squares-parens but preceded by a bang (!), like this:

![My alt text](

Understanding Github's Language Calculations

Ever noticed this at the top of a Github repo?

This filetype percentage is calculated by Github’s Linguist project.

There’s just one problem: ‘Today I Learned’ isn’t a JavaScript project; it’s a Rails application. I would expect the majority of the files to be Ruby files. Labeling ‘Today I Learned’ a JavaScript project misrepresents it to the Github community.

I found several techniques to correct the Linguist evaluation; this pull request explains one I tried in greater detail. TL;DR – once I moved some vendored JS files into a directory with a name that Linguist ignores (ace-builds/), the calculation started to look more like a Rails app.

Here’s the updated header:

Exclude Whitespace Changes From GitHub Diffs

If you run a tidy ship and use plugins like vim-spacejam, then whitespace changes cluttering up your git diffs probably isn’t much of an issue.

However, if you are working with other people or messier code bases, then you may not be so lucky. If there are a bunch of whitespace changes in a commit, then that is going to make the diff view of a commit on GitHub annoying, and perhaps hard, to read.

You can cut to the chase by excluding whitespace changes from GitHub’s diff view by adding w=1 to the diff URL.

Check out this view of the diff and then this view of the diff that excludes whitespace.


Simulating Various Connection Speeds In Chrome

I spend everyday building web apps from a machine that has a wired connection to the internet. Though I spend a lot of time loading various pages and experiencing the app like a user might, I end up having a pretty narrow perspective. What will this app be like for people on various qualities of mobile connections?

Chrome has a feature built in to its devtools that makes it easy to throttle your connection to simulate various speeds. Open up devtools with Cmd+Opt+J, navigate to the Network tab, and then open the throttling drop down.

From here we can select the connection speed we want to simulate. If we then reload the page, we will not only experience the page load at that speed, we will also see the numbers in that Network tab.

View your Github Project's Forks

Today I clicked on the number next to the fork count on a Github project, and landed on this page (TIL used as an example):

This chart is pretty cool— it visualizes the recent forking activity around your project, and gives you insight into activity happening downstream on different forks.

Map Caps Lock to Escape in macOS Sierra #seil

macOS Sierra was made available to the public yesterday and many of us early adopters rushed to install and test it out.

One of the things that broke and really affected my workflow was that Seil, the program I use to remap Caps Lock to ESC, no longer works. It’s sister application Karabiner also stopped working.

Fortunately there’s a solution available from the developer of Karabiner and Seil. It’s a little more complicated than usual:

  1. Download and install Karabiner-Elements:

  2. Karabiner Elements will install a virtual keyboard driver, and you probably want to disable the default capslock behavior for the new virtual driver:

    disable capslock

  3. Use your favorite editor and edit the following file (create it if does not exist):

    vim ~/.karabiner.d/configuration/karabiner.json

    And add the following to it:

        "profiles": [
                "name": "Default profile",
                "selected": true,
                "simple_modifications": {
                    "caps_lock": "escape"

That’s it. Just make sure you have Karabiner Elements running.

Find Dead Code with Unused

Today I discovered a fascinating tool called Unused, written by Josh Clayton.

Unused leverages two of my favorite projects, Exhuberant Ctags and The Silver Searcher, to identify dead code. I installed it with homebrew.

Dead code is code that is never used by your application. It wastes electricity and mental bandwidth, and can hang around unnoticed for years. We need powerful tools to find and remove it.

Unused threw out a few false positives, as expected. Use with caution and a solid test suite.

The Unused website highlights several pull requests removing dead code from popular open source projects. I was able to use it on ‘Today I Learned’ itself. A small win:

Github Advanced Search Parameters

I really enjoy browsing Github. The search feature in particular is a fantastic way to stumble on interesting projects.

Search has an ‘advanced’ menu that lets you restrict your query. I’ve used it enough that I have some preferences that I enter directly into the search bar: is:issue is:open label:"help wanted" finds open issues actively seeking outside contributions. Not everybody uses labels, so removing that can yield even more results.

Add a language filter as a query parameter, and you’re on your way to some good open source contribution opportunities. Drill down further with a search term, such as ‘testing’ or ‘flicker’.

Toggle Mute in Hangouts (Mac)

During client calls, I mute and unmute my microphone dozens of times. Mute to listen and cut ambient office noises, unmute to speak.

Google Hangouts provides some shortcuts for this and other common activities. In particular, ⌘ + d toggles mute on a Mac.

Step your videoconferencing game up! 🖥

Drop connections with Nginx

You can ignore requests sent to nginx by responding with the status 444

server {
  listen 80;
  listen [::]:80;
  listen 443;
  listen [::]:443 ssl http2;

  location /no-response {
    return 444;

The primary use for this is to prevent processing requests with undefined server names:

# block for requests with undefined server names
server {
  listen 80;
  listen [::]:80;

  return 444;

Loopback to different 127.*.*.* ips mac osx

You can’t bind to the loopback interface automatically on mac osx.

> rails -b
ERROR: Can't assign requested address - bind(2) for (Errno::EADDRNOTAVAIL)

Mac OSX will disable all loopback addresses other than by default, but they can be enabled with ifconfig.

> sudo ifconfig lo0 alias up

And now your server can bind to that address.

h/t Jack Christensen

Script for bootstrapping a new project #bash #git

Creating a new project and publishing it usually involves many repeatitive steps. As developers we like to automate the tedious repetitive tasks to allow our creative juices to flow freely.

I wrote the following script for boostrapping a new project. Feel free to modify and add to your zshrc or bashrc:

function initprj() {
  # create the directory and cd into it unless the user uses '.'
  # to indicate current directory
  if [[ "$1" != "." ]]; then
    mkdir $1
    cd $1

  # setup git
  git init

  # setup remote repo on github and add it to git remote
  hub create

  # setup base files (add your own if you'd like)
  touch .gitignore

  # You must use tabs if you want to indent heredocs that use the <<- syntax
  cat <<-EOF > LICENSE
        Copyright (c) $(date +"%Y") Dorian Karter

        Permission is hereby granted, ...

To run the script simply type initprj my-project and watch the magic happen.

Note: you must have hub installed to create the remote repo.

`CTRL` commands in Chrome's Address Bar

The Hashrocket Dotmatrix binds some of the UNIX CTRL- commands to commands in Chrome’s address bar. Here are a few examples:

  • CTRL-a to move cursor to the beginning of the line
  • CTRL-e to move cursor to the end of the line
  • CTRL-b to move the cursor one space backward
  • CTRL-f to move the cursor one space forward

There are more to try; some work the same as they do in the command line, and some work differently.

Here’s the code that makes this possible.

h/t Brian Dunn

Rust Array Access is Bound Checked at Runtime

Today I encountered a feature of Rust that I hadn’t seen before— uses of array subscript notation (‘array[n]’) are checked at runtime to ensure they fit into the bounds of the array.

Here’s a passing test I wrote to demonstrate:

// src/
#[should_panic(expected="index out of bounds: the len is 3 but the index is 5")]
fn array_access_is_bound_checked_at_runtime() {
    let elements = ["Wind", "Fire", "Water"];
    assert_eq!("Wind", elements[5]);

>’Such errant access is the source of many bugs in other systems programming languages.’ —The Rust Programming Language

More information:

Trust Issues 🤔

Our computers trust a scary amount of Root Certificate Authorites, and sometimes I have trust issues with some of them. Most recently being the StartCom bug, which allowed anyone to get a certificate for any domain they wanted.

I can’t trust them. Period. And I don’t have to.

Here is how you can revoke trust for any Root CA in OSX:

  1. Open Keychain Access.
    open /Applications/Utilities/Keychain\
  2. Click on System Roots from the left Keychains sidebar.
  3. Typestartcom in the search bar.
  4. Select all the root certificates and press ⌘i.
  5. Expand the Trust section
    and change the option
    When using this certificate
    Never Trust.

Github Reactions and Merge Strategy

Recently Github has launched 2 new features:

Reactions to comments

Now users can add few reactions to Issues, Pull Requests or Comments. This will reduce a lot of noise on issues like the 👍 (:+1:) for new feature. Really cool.

Squash and rebase as a new merge strategy

Github always create a new commit merging a branch into another one (usually master).

So now we can choose to squash commits and merge. So all commits in a branch will become just one and this one will be rebased into the branch. Sounds cool for a few situations.

Check it out!

Add Emoji To GitHub Repository Description

GitHub restricts the set of unicode characters that can appear in the description field of a repository to anything up to 0xffff. Most emoji have unicode values above this. This means you will have limited success adding emoji via your system’s emoji keyboard.

Fortunately, GitHub allows you to add any recognized emoji to a repository description with its specialized emoji syntax (e.g. :memo:). You may have used this syntax in other parts of GitHub such as the issue tracker.

If you add an emoji like this:

it will show up like so:

Check out this Emoji Cheat Sheet for the names of all recognized emojis.

Put -L in your ssh config

If you’ve used ssh you’ve probably had to use local port forwarding before. If you use complex flags often, you will find remembering what you need is tiresome. Stop. Write it down so you can forget all about it. Save your memory.

Instead of doing this:

ssh -L 3000:localhost:3002

Add those flags to the ~/.ssh/config file instead:

# /home/dillon/.ssh/config

Host example
  User         not_dillon
  LocalForward 3000 localhost:3002

From now on, all you need to type is:

ssh example

Pretty Print Tabular Data

Looking at a bunch of data in the Chrome dev tools console isn’t great. It can be a bit difficult to read because of the way it is displayed. Fortunately, the Chrome dev tools come with a handy way of displaying tabular data, console.table(). If you give console.table an array of objects or array of arrays, it will format it in a table like so: