A Quick Run Down Of Useful Shortcuts As A Developer
What are Shortcuts?
Shortcuts are a developer’s best friend. We can operate efficiently with little-to-no effort at all, as we navigate from task to task.
Shortcut keys are key-bindings that are set to perform a menu function or common function in a program or operating system. There are many shortcuts that you’re probably familiar with; copy, paste, quit application, but my focus in this blog is to highlight the really useful shortcuts for navigating & operating tasks in the Google Chrome Browser, and Atom (my go-to text-editor).
Before we start talking about Chrome or Atom shortcuts, one of my favourite shortcuts for Mac is the shortcut key to bring up the Spotlight search bar (command-space ). From Spotlight, we can type a keyword and Spotlight will search for any files that have a match for that keyword.
In the example above, I’m searching the computer for anything that matches with “pokemon”, and I’m getting a multitude of files, folders and even images that have matched.
Another favourite of mine, that isn’t chrome or atom specific would be screen shot shortcuts, as seen in the picture below…
Atom (and most text-editors) Shortcuts
As a developer, we aim to adhere to the DRY rule. Don’t — Repeat — Yourself. Let’s say for this exercise, that we have multiple debuggers inside a javascript file and we’ve lost track of where they are, in fact there’s a hundred of them. We could manually sieve through the code looking for every debugger inside our code or we maybe we could let a shortcut do all the work for us. I like to type the word I’m looking for at the top of my file. This will be debugger. With our text-cursor or insertion-point inside the word (debugger) or just sat on the end of the word we can use the “Command-D” shortcut and select that text, and for every time we use that shortcut thereafter we select the next piece of text that matches our first selection. Eventually after spamming the shortcut, we’ll have selected every debugger in our code and we can now either delete the flock of debuggers from our code, or simply comment them out (“Command - / ”), which could come in handy if we’d like to make our debuggers live again.
Another useful shortcut key to use whilst dealing with text (in browsers and text-editors). Holding command and a arrow key will jump your insertion-point to the edge of your file. Want to reach the end of your line of text, press command and the left arrow key. Want to reach the top line of your text, use the command and the up arrow keys. Of course, using an arrow key without a combined key will operate as expected — moving the cursor along the text in the line — but if we hold an arrow key and the shift key the result is we end up highlighting the text from its starting point to wherever we move to in the text via the corresponding arrow key and combining it again with command we swiftly reach the end destination of whatever directional key we use (going up, will select all text above our starting position and any text on the line before our starting point.
Google Chrome Shortcuts
Knowing your browser’s shortcuts can really help to optimise efficiency & your performance as a developer. I’ll list off a couple of my favourite shortcuts & then I will leave you with a list I’ve curated containing two dozen vital Google Chrome shortcuts!
Number 1, Chrome’s Find Bar!
The mighty Find Bar! Imagine we’re scrawling through documentation — say we’re looking for a specific method — we can use the find bar to search for a keyword inside the web page, and the find bar will find any matching results inside the web page. It loads a list of all the matches to be found and allows us to cycle through those results. To bring up the Find Bar, we use the shortcut key “command-f”.
Number 2, Inspect Elements
There are two shortcuts for this tool. They are “Command-Option-C” & “Command-Shift-C”, both giving the same results. The inspect element tool is great, we can use it to select an element, and with the element we can call it inside of the javascript console (“Command-Option-j”) by typing ‘$0’ and assign it to a variable, so we can operate on the element, manipulating it inside the DOM as we find fit.
Finally the LIST!
Googling ‘shortcut gifs’ returns a fail compilation apparently. Have fun! Bye.
