Workflow for developers (AKA My current tools)

29 May 2017

I’m a huge fan of “a good workflow”. Makes you think better.

This is still under construction, but I’m fleshing out all the tools, tidbits, and other things that serve me well every day as I build my skills as a developer. It will always be a work in progress, but will hopefully serve others.

See More Code

Most of us are on Macbooks with retina screens. The default resolution of your mac doesn’t take advantage of this high-resolution capability.

There’s a few different ways of showing the difference in resolution. I’ll show one way, but ultimately, you should experiment yourself with maxing out the resolution and then bumping up the text size as needed. This allows the less-important parts of your tools take up less space (like sidebars, navigation elements, etc) while leaving you more room for what matters. (Code, text)

Compare the side bar in the first image to the one in the second. There’s about 25% more visible items. This is a win, in my book. Laptop screens are small enough.

Spectacle video

iTerm

iTerm is powerful. It can also be intimidating, because it’s your window into the command line, github, and the dark depths of your machine. The more you can make it match your workflow, the less intimidating it will seem.

Split Panes

You can split your iTerm panes, similar to how you might split Atom.

cmd-d splits iTerm vertically. cmd-shift-d splits it horizontally. I like to have all my windows related to a certain app under a single iTerm tab, so I might have two or three panes open, and when I want to see one pane better, I’ll hit cmd-shift-enter to expand the pane to fill the entire iTerm window.

This is useful if I need to see a full stack-trace, or scroll back through server error messages. Once I’m done looking, I hit cmd-shift-enter again, and it shrinks back to its normal size.

Pulling up previous commands

In iTerm, the up arrow cycles through previously entered commands.

Just as useful, though, is filtering through this list. Imagine you ran rspec spec/features/sessions/guest_user_can_sign_up_spec.rb, all the tests passed, so you did your git add/commit/push workflow, and maybe some other stuff.

Now you want to run that specific RSpec command again, but it might be many commands ago.

If you type !rsp and hit enter, iTerm will find the last command that starts with rsp, and place it under your cursor. If you want to run it, hit enter. I use this all the time.

(There’s more complex “interactive search” tools you can use, but the !command is a great starting point.)

Navigate iTerm output quickly

Since the up arrow pulls up previous commands, to scroll back through your iTerm output one line at a time, hold down shift and hit up arrow.

To scroll one page at a time, hold down shift + command and hit up arrow.

To get back to the bottom, let go of shift/command and hit the up or down arrow.

Global key binding

We use alt-tab all day long, but it’s imprecise. The order of the items that you cycle through with alt-tab depends on what you last used.

I like being able to jump to important programs straight away.

In preferences > keys > hotkey you can set a “system-wide hotkey”. I’ve got mine mapped to cmd+shift+i (i for “iTerm”), and it doesn’t conflict with any other bindings on my machine. I use it dozens of times a day.

Reuse current working directory for new tabs/panes

Split panes are cool, but it’s a huge pain if it always opens a new tab to your root directory. You have to cd around just to get to where you want to be.

The fix is easy. Set iTerm to use your “Present Working Directory” for new panes. When I’m pairing with other students, this is one of the first changes I recommend they make.

Splitting Screens for fun and profit

New lines where you want them

cmd-enter makes a new line under your cursor, and places your cursor there. cmd-shift-enter makes a new line above your cursor, also places your cursor there.

Find all the things

Have you ever had a spelling error, but you’re not sure where in your project it is?

You’re familiar with cmd-f, or “find within document”. You should also use the related cmd-shift-f, or “find within project”. Atom will search your entire project (everything that is in the sidebar) for whatever criteria you give it.

If you misspelled a method somewhere and don’t recall where, use global find to get find it.

It’s got many, many uses. You’ll find them all.

Git/Github

Oh boy. Git. It’s the most amazing thing ever, but it can be intimidating.

This is good news! This means as intimidating is Git may seem, we’re in good company. Any effort expended on better understanding Git will be well-spent.

Many others have written about Git and how to use it far better than I ever could, so I’ll make just a few suggestions.

Use a staging branch for group work

If you’ve got a group project and you need the master branch to always be stable (because Heroku is always running on it, or something) change the repo settings to make a branch besides master the default branch.

Just make staging the default branch for your repo, and now all your PRs will (by default) be against this branch. This is perfect, because you might find yourself often squashing bugs when merging in other’s work, and it’s way better to hotfix bugs on something that is not master.

Pull Request Template

When we’re first starting, a good pull request is the last thing that is on our mind. We just wanna merge in our branch without merge conflicts.

As soon as you start doing group work, though, the value of explaining to the rest of the team what you’re working on will rival the importance of the actual code that you’re writing.

So, when you make a pull request, I’d strongly recommend getting in the habit of giving a summary of what the new code does, making a few other standard comments, and then also adding comments to your code, calling out interesting bits and pieces.

This helps your learning, this helps their learning, and this habit will serve you well for the rest of your life.

Always merge staging into your branch before making a pull request

In group work, especially if you have a branch checked out for more than a few hours (or a day), it’s possible that the “base branch” will change between when you check out your branch, and when you want to merge it back in.

It will be a great service to your team if, before making your pull request for your new feature, to fetch and merge the most recent version of staging, and then merge staging into your branch.

THEN make your pull request. If you do this every time you make a PR, you should pretty much never have merge conflicts, and then you and the team don’t have to try to sort all that out when merging.

Then, whenever staging is in good shape, and you want to update master, just merge staging to master, and you’re good to go!

Chrome

You’ll spend a lot of time in your browser.

There’s some keyboard shortcuts I use all the time for Chrome. Don’t try to use all at once, but test each one once or twice, decide if you like it, and then use it for a few days.

Shortcuts for Chrome

cmd-l puts the “focus” on the address bar. You can copy the address, paste a different one in, etc.

cmd-shift-[ and cmd-shift-] cycles left and right through your current tabs. (This tab movement works in Atom too!)

cmd-shift-c opens your “element selector” in your dev tools.

the above shortcut pairs well with cmd-opt-i, which toggles your dev tools. I often hit the element selector shortcut, click the item I want to inspect, and then toggle dev tools closed again, all in a second or two.

cmd-w closes the current tab.

Extensions

The Great Suspender will “put to sleep” inactive tabs. Chrome is a bit of a resource hog, and this seems to help it consume less energy.

Vimium gets you Vim-like navigation around your browser. I use it mostly to move up/down a page and to “click” links with the keyboard, but it can do much more than that.

uBlock Origin is an Ad-blocker, closely related to (but very much distinct) uBlock. I love it. Cuts down on the visual clutter that tends to crop up on pages, and has some other cool tools. (Similar to Chrome’s “element selector”, you can click an element with uBlock and add it to a black-list, so you’ll never see that pop-up/interstitial again)

Applications

Dash: Documentation that doesn’t suck

Dash is an application that lets you download documentation for just about anything with documentation. I regularly use docs for Ruby, Rails, HTML, CSS, Sass, JavaScript, and more. With Dash, I don’t have to hop into a browser and google for things, because it’s already installed locally, and is searchable.

It’s not free, but I find it worth it. (It has a free-to-use mode that makes you wait a short period of time before using it.)

Alfred: Do anything on your computer

AlfredApp is my favorite program on my computer, by miles. It replaces your “omnibar”, or whatever pops up when you hit cmd-space. Alfred’s workflows are where the real power shows.

I can’t give it a fraction of the praise it deserves, so here’s some “getting started with Alfred” guides that might convince you to give it a whirl.

The powerpack extension is not free, but the base application is free. It’s a big step up from the default mac omnisearch thing.