Become The Shortcut Master - Chrome and Atom (Part 2)

This is a continuation of this post, which contains some awesome quick shortcuts for using you mac and the terminal. In this second part we're gonna be looking at using the Chrome browser and Atom.


CHROME

There are a lot of other great web browsers out there, but Chrome seems to be the most popular because of its user friendliness and the dev tools that it allows developers to use.

Moar Tabs, Less Tabs, Tabs Galore! - One of the most common behaviours of the 2010+ user is that we love to have loooots of tabs open. I used to open loads of tabs too, mainly with the intention of 'saving them' for later to read but found that in the end it was just wishful thinking and that would just almost always never happen.

Anyways, open a new tab up with Apple + T, and close one with Apple + W. Didn't mean to close that one? Save your mistake with Apple + Shift + T! Alternatively, you can Apple + Y to go to a new tab with your history on it and find a page you previously went to.

Back and Forth - One of the things I like about using keyboard shortcuts is the fact that you get an actual physical response of the key being pressed as confirmation. With the mouse clicking on the GUI buttons, you just don't get that confirmation, like sometimes I'll try and click back or forward and nothing would happen, and I would question whether I clicked the location properly or not, especially is there is lag or a delayed response. Press Apple + [ or Apple + Left Arrow to back to previous page, and conversely Apple + ] or Apple + Right Arrow to go forward.

Quick flick to a tab by using Apple + [number]. This will make you go to that tab, as long as its between 1 and the 9th tab. I'm not sure how to shortcut more tabs then that. You can move forward between tabs with Control + Tab and back with Control + Shift+ Tab but with Macs I think this rarely used as all three buttons are on the left side making it very awkward to press together.

For the Developers! - Did you know that you have a Javascript 'terminal' in every Chrome browser? Just hit Apple + Alt + J to bring it up. You can var hello = "hello world"; hello; => "hello world" to your heart's content. I've used this console so much especially when looking something up I can try it out straight away.

Use Apple + Alt + I to bring up the elements console. This is every front end developer's dream! Here, it allows you to play around with the HTML on the page, as well as the css styling. When your in this mode you can hit Apple + Shift + C to go into inspect mode to allow you to point to any element on the page to inspect it.

Reload with Apple + R and hard reload with Apple + Shift + R to see your work in action.



ATOM

Atom is by far the most popular IDE text editor for developers to use. Atom has a lot of helpful shortcuts to speed up your efficiency in your projects. One of the coolest things about Atom is that you can download packages to it which will have different features to help you. I'll start out with some packages that I find are must haves for me when programming;

INSTALLING PACKAGES

To install a package go to Atom/preferences (or Apple + ,) and click on the install tab. Then write down the name of the package into the search box, and then click the install button.

Atom Prettier ('atom-prettier') - This is to help you with your linting errors. Linting is to do with how your code format is written, making sure all your whitespaces are correct and brackets are matching.

Bracket Highlighting '(atom-bracket-highlight') - This package helps highlight the matching bracket to your code, making it easier to see which ones are matching to which. You can press Control + M to toggle your curser to the matching bracket.

It also a good idea to show the indent line which will help you see matching brackets. Go to Atom/preferences or Apple + , the editor tab, then scroll down and click the 'show indent guide' option to turn it on.

Hightlight Selected ('highlight-selected') - Puts a nice square around the word that you have highlighted, as well as highlights all the other words that are the same.

File Icons ('file-icons') - Adds nice icons for your file types in the directory tree.

Open in Browser ('open-in-browser') - Adds an option to be able to open your HTML files in your browser when right clicking your file in the tree directory. For some reason this feature isn't in Atom for some strange reason, as it seems to be something that would be really useful. However, such is the open source way of Atom, people can just create packages for these things so it becomes a thing!

THE ATOM SHORTCUTS

Some of these shortcuts I found are so useful, that I was just crazy annoyed that I didn't know about them because I'm sure they would have saved tons of time, especially when copy and pasting stuff repetitively!

Multiple Curser Editing [Apple + D] - Double click a word to highlight it, then press Apple + D to highlight the next instance of that same word below it, repeat to highlight more words below. Then delete it or edit as needed. This creates multiple instances of cursers in those locations so that you can edit multiple places at the same time. Clicking Apple + Click will let you add cursers to where you click.

Copy It All! [Apple + Shift + D] - Highlight what you wanna copy, and hit Apple + Shift + D and it'll copy and paste it below it! It will also copy the line/paragraph where the curser is, without any highlighting needed at all.

Move It! [Apple + Control + Arrow Direction] - Did you know you can move stuff up/down/left/right without needing to cut and copy? This is crazy useful when moving code around, and can help with debugging to understand what is happening.

Find It All! [Apple + Shift + F] - Most people know that Apple + F can help you find things on the page, but sometimes you may want to find something over multiple pages. That's what [Apple + Shift + F] is great for. This makes renaming all your variables/functions or simply finding them over multiple files easier.

Hide/View File Tree [Apple + ] - You can hide the file tree on the side using this shortcut for more coding space.

CUSTOM SHORTCUTS

Two shortcuts I wanted to create was for making one for the 'open-in-browser' package above, and another for toggling the markdown preview to see what my .md files would look like.

To do this, go to Atom/Preferences or Apple + ., then the keyBindings tab. I typed in open-in-browser, copied the icon into the keymap file as suggested. When you paste it in, it looks like this. Restart Atom and it should be done.

I set mine to Apple + Shift + O for open in browser because its easy to remember. Your curser has to be in the HTML file for it to work tho.

Similarly I set the markdown preview toggle to be Apple + Shift + M.

Ok, I think I'm shortcutted out! There's probably more that I've forgotten. If you guys have any good ones add it in the comments below! I hope this will make you a more efficient developer!

Become The Shortcut Master - The Mac and Terminal (Part 1)

I've kinda wanted to write this post for a while, mainly because I am anticipating that my trusty 2011 Macbook Air is going to die at any second now. I did replace the old batteries which made it die at 30% charge, and now the replacement is saying I need to change it again...


OPTIMISATION ADDICT

I really am just addicted to improving things all the time. Its always on my mind. Which can be great when it works out, but most of the time its quite an annoying distraction. Like literally yesterday for no real reason I decided to switch up my furniture in my room which took hours, when I had already listed out some other stuff to do that day.

When it comes to coding or just generally working on the computer, some of these optimisations are worth it especially if you are gonna use these actions a lot. Things like learning to touch type really can save you a crap ton of time, and it pains me to see the older generations use their two forefingers to p-r-e-s-s [looks at screen to check for spelling mistakes] e-a-c-h [looks again] l-e-t-e-r [looks and sees error, deletes whole word and starts again].

When it comes to Macs it has taken me some time to decide whether I should use the swiping desktop motion or not. In the end I've decided its just not for me, I found that I would open like 3 or 4 different Chrome browsers, each one having 20 tabs and just a bit mad trying to keep track of what goes where...

So right now, Apple + Tab is what I'm using, trying to keep the minimum amount of desktops. But we'll see how it goes, coz at work I can definitely see that there are moments when multiple screens are a necessity.

It also helps that my left hand is almost always on the apple key, and most of the shortcuts can be done using the left hand, with the touch pad being close to my thumbs. This actually makes things faster then using the mouse gestures and/or setting the corners of your screen to switch tabs in expose.

Using custom keyboard shortcuts whilst playing my poker games

I remember the days of playing 18 tables at once in online poker, and/or also loving playing Starcraft 2 having super high APM but really not being that good at the game at all, since it was mostly spam and not useful commands! I think my bias might come from the fact that when you keep switching windows using shortcuts it looks pretty cool and looking cool and imagining you're some cool cybernetic futuristic hacker always trumps everything else! (I'm kidding :P).






MAKE IT A HABIT!

Using shortcuts can be difficult but it will pay off later on, so its important that you make yourself do it. With the touch typing I basically made myself type without looking at the keyboard by forcing myself to do it during the msn messenger years (who remembers that? Ok, calm down AOL users yeah yeah u guys where even older...). Even though my typing isn't perfect "five finger" official style, (I use forefingers to hit space bar), I still learned my own method of allowing myself to touch type which is super useful.

That being said, when introducing yourself to new optimisations, remember to add things little by little, otherwise it will be too overwhelming. Do things Agile style!

BAD MAC KEY NAMINGZ

A quick note about the Apple Key. I think officially Apple wants people to call this this Command Key, but for some reason they keep the Apple squarey circular corner symbol around. If that's the case I don't know why they keep it around, either have one or the other.

I prefer saying Apple key because Command is not only similar to the word Control, but Command and Control are literally next to each other bar one key.

The Apple Key or Command Key, which has two symbols and two names! So confusing...

That key is called the Alt Key but even more stupidly is also known as the Option Key, which is not printed on the key, just some weird two to one lane road symbol is.

When it comes to trying to make things as least confusing as possible for non techy users, they really messed up and for some reason are sticking to it.

Just for our sakes, I'm gonna use Apple Key and Alt Key.

THE MAC

Undo It [Apple + Z], Redo It [Apple + Y] - Most Apple programs will have this as their defaults. This is great as it should help you not being too scared of trying things out knowing you can always roll back and/or re-re roll back. Its the best way to learn! Gone are the days of the old skool computers where one wrong command could cause a major wide crash (i.e my Dad's old 8 inch floppy disk computer).

Switching Windows [Apple + Tab]/[Apple + `] - I don't mean upgrade to Windows 10 (although you really should if you have a older version), I mean quickly interchanging the window that is in the front so that you can focus on that. Most people will know about tabbing to different screens using Apple + Tab, but I recently found out that you could also tab between windows of the same kind of program using "**Apple +". Note that is not an single quote mark that is a backtick which is the key that you've never seen or used until now between left shift and z. This is great for if you have multiple browser windows or Atom coding windows and don't want to merge them together, but still manage to quickly switch between them.

WhereTF is the Delete [fn + Backspace or Control + D] and the # key[Alt + 3]? - One of the most common complaints I hear about using macs is they do miss out on a few keys. Deleting is pretty common in Windows, which is like a reverse backspacing way to delete a word. This can be done using the function key which is the most bottom left key and backspace, or control + D.

For some reason Apple hates twitter, so even though on windows this is on the main keyboard, on the mac this doesn't even make a shift key cut! Again, having these different assignments to control, apple key, function key and alt key makes it all the more confusing for new users.

Bin It with [Apple + Backspace] - Sometimes files need to be deleted asap. Box a bunch of your items with the mouse and hit that shortcut for maximum time saving with that satisfying binned sound.

Search It with [Apple + Spacebar] - Apple's search bar can be pretty quick, espcially since your hands are on the keyboard already. Just hit Apple + Spacebar and type your folder/file/app and you'll open it in no time.

THE TERMINAL

I'd suggest using iTerm2 as your terminal and then modding it following this blog post.

This also will allow cool functionality like tabbing through your files once you start typing a name, it will try and guess it, meaning no more need to type 'cd'.

This page is awesome to find shortcuts for the terminal.

Go to Start [Control + A / Function + Left Arrow] or End [Control + E / Function Right Arrow] of sentence - During my course at Makers, one of the most common things I'd see us all doing in the terminal was writing out a long sentence (usually a commit message), then realising there was a typo and then having to use the curser to move it back to the beginning. You couldn't use the mouse to jump there, which was really annoying. Damn, all it took was a few seconds of googling it...

The ZSH shell allows you to use shortcuts for git. This can save you a lot of time, since as high quality coders we're always gitting our code, right?? ;)

Blue colours show where you are, yellow/green show you git status

Common ones I use are;

• Git Add All - gaa
• Git Commit Message - gcm [message]
• Git Push - gp
• Chain the 3 above, if one fails then others will stop - gaa && gcm [message] && gp
• Git Status in lovely colours - gss
• Git Create Branch - gcb [branch name]
• Git See All Branches - gba
• Git Pull - gl
• Git Pull from Brance - ggl [branch name]

I've messed around a lot with where to put my terminal, at first I put it in another screen to swipe to, then I've been playing around with setting a position on the right and then bottom permanently. However, my work colleague showed me this pretty awesome blog post about how to make it pop up (or down if you prefer) using a hotkey (I used Control + Spacebar).

The terminal pops up and then slides downwards when and only when you need it!

I know there is an option to find a package in Atom which puts your terminal at the bottom, but I like my custom ZSH iTerm2 window not just because of the ZSH shortcuts but also the fact that it will show you your git statuses bright and clearly which I really want.

Next week - Chrome and Atom Shortcuts. Have a great week y'all and now enjoy the confusion of some code bizarreness! - https://www.destroyallsoftware.com/talks/wat