Avoiding the productivity mouse-traps
// This post is a follow up to my talk of the same name in YGLF 2017 in Tel Aviv.
*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
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.
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 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)
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/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.
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.
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.
