Avoiding the productivity mouse-traps

// This post is a follow up to my talk of the same name in YGLF 2017 in Tel Aviv.

My full talk at YGLF 2017

*Warning — this blogpost has more than 50MB of gifs I think, please be mindful if you’re on mobile. Sorry ¯\_(ツ)_/¯

2X : enhance cursor speed

One of the first things you should do is make your cursor repeat faster. The default repeat rate was made for grandmas and grandpas that use the osx

Setting up repeat speed and repeat delay

5x : Move word by word

Hold Option ⌥ + left/right (ctrl on windows) buttons to jump by word. This results in much more precise and faster cursor movement that fits development.

Hold Option ⌥ (ctrl on win) win to move the cursor by word

10x : Jumpy

For code editing, this is one of those things that you can’t go back from. Jumpy and Acejump are plugins for editors / IDE that are assign short codes to places in the file, and you can jump to those shortcodes without using the mouse.

Jumpy plugin for atom/vs code.

Jumpy and Acejump are available as plugins for all major code editors here :

Atom : http://bit.ly/jumpy-atom
VS Code: http://bit.ly/jumpy-vscode
Jetbrains: http://bit.ly/ace-jump-jetbrains
Sublime: http://bit.ly/ace-jump-sublime

Same thing applies to selection

2x — Faster selection

If you enabled faster key repeat, then you already enjoy my 2x tip for selection.

5x — Select by word

Add shift to jump by word Shift ⇧ + Option ⌥ + left/right (win: shift+ctrl+left/right)

⇧+⌥+ left/right to select by word

10x — What if selection was smart and knew about code?

Text selection wasn’t built for code, it was built for word processors. Wouldn’t it be cool if we had smarter selection? One that knows our coding syntax? One that knows how to select blocks?

Yes, yes it would be cool! It would also be very very productive. See below:

Expand selection plugin knows about our code and expands selection based on block

Expand selection/region is available as as plugin for all major code editors. And it’s one of those things you can’t go back from. I use this all the time.

My Pycharm Productivity metrics. Syntax aware selection is by far the one I use the most

All major code editors have plugins for this, and I strongly recommend binding the expand to ⌥ + up and shrink to ⌥ + down

Atom : http://bit.ly/atom-expand-selection
VS Code: http://bit.ly/vscode-expand-region
Jetbrains: Native Support
Sublime: http://bit.ly/sublime-expand-region

2x — Don’t use the mouse for opening files. Use the fuzzy file search

The fuzzy file opener for most code editors is an amazing productivity boost!

Most editors have agreed on the same shortcut for this

Atom, Sublime, VS code : ⌘ + p ( win CTRL+P )

Jetbrains products (webstorm, pycharm, etc’): ⌘ + ⇧ + O (win CTRL + SHIFT + O)

5x — Go directly to line

Imagine the following scenario. You see a JS error, or a CSS rule in devtools. You usually see the filename and the line number right?

Well luckily for us, we can skip opening the file, and scrolling to the line.

Go directly to line by adding a :

By just adding a : in the fuzzy file navigation, we can go directly to the line we need, thus saving a LOT of valuable time and keeping focus.

10x — Symbol nagivation

Symbol navigation is amazing. You can use the same fuzzy search syntax from above, to navigate directly to a function name, class, css rule, whatever!

In Sublime 3, you can even do this directly from the Omni search by adding a @ sign, but you can do this in all other editors as well.

For most editors, you can navigate to symbol for the current file or for the whole project. THIS IS AMAZING, USE THIS

Atom / Sublime3 — File symbols : ⌘+ R | Project symbols ⌘ + ⇧ + R
Vscode — File Symbols : ⌘ + ⇧ + O | Project symbols ⌘ + T
Jetbrains — File Symbols : ⌘+ F12 | Project symbols ⌥+ ⇧ + O

2x — Open dev tools directly in inspect mode

Toggling the inspect mode should save you a click on the little inspect icon. You can also use the same shortcut to disabled the inspect mode

Inspect mode (Chrome Firefox) : ⌘ + ⌥ + C ( ctrl + shift + C)

2x — Toggle responsive mode

Responsive (mobile emulation mode) is a big part of working on a responsive website, finding it’s icon is also very annoying.

Toggle mobile responsive mode : ⌘+ ⌥ + M ( ctrl + shift + M )

  • Protip: Firefox you can toggle the responsive mode without open devtools! Which is cool

10x — Use command menu in devtools

Devtools has the same fuzzy file search and command menu as sublime and atom. So you can do stuff like select all the different tabs, go offline and online, all without using the mouse

Using ⌘ + P will let you go directly to a line

Using ⌘ + ⇧ + P will let you use any action/option devtools supports ( Only chrome)

Browsers weren’t built for keyboard using. We can tab around, but it doesn’t work for all cases and often annoying! So let’s see how we enhance using the browser with one hand on the mouse and one on the keyboard.

5x — basic shortcuts you have to use

⌘ + L : Focus on address bar
⌘ + T : Open a new tab
⌘ + W : Close current tab
⌘ + ⇧ + T : Reopen last tab ( Tab group )
⌘ + ⇧+ R : Reload without cache

What if we could use some usecases of the browsing without the mouse as well? Well turns out it’s awesome and possible with the plugin Vimium for chrome and firefox. Below are a few things that are possible with it.

Tab Search ( shortcut : T )

Bookmarks search ( Shortcut : B)

The best feature ever! Mark all clickable links / inputs with shortcodes ( shortcut : F )

All this and MUCH MUCH more lies in this amazing chrome / firefox add on called Vimium

Vimum for Chrome : http://bit.ly/vimium-chrome
Vimium for FF : http://bit.ly/vimium-ff

*I strongly recommend you give this a try if only for the links feature!

Fuzzy search for all actions in mac

As you might see from above, I think omni tools / fuzzy searches are very strong productivity enhancers. But what if our app doesn’t have one? Can we still somehow get a benefit of a keyboard?

Luckily in mac-os we can. There’s an amazing HELP feature, which has a fuzzy search for all actions that sit in the menu.

Example from sketch, which doesn’t have this omnibox, but this works for all mac apps.

⌘+ ⇧ + / : Open the help menu

In the talk I also covered Alfred app and a bunch of its features.

You can download Alfred App here : http://bit.ly/alfred-macos

Hope you use any of these in your life. Please feel free to point out any other shortcuts that are useful to you in comments.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.