This is a continuation of this , 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 browser and Atom. post Chrome 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. — 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. Moar Tabs, Less Tabs, Tabs Galore! Saving our 100 tabs for “later” Anyways, open a new tab up with , and close one with . Didn’t mean to close that one? Save your mistake with ! Alternatively, you can to go to a new tab with your history on it and find a page you previously went to. Apple + T Apple + W Apple + Shift + T Apple + Y — 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 or to back to previous page, and conversely or to go forward. Back and Forth Apple + [ Apple + Left Arrow Apple + ] Apple + Right Arrow Quick navigation with opening and closing and switching tabs Quick flick to a tab by using . 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 and back with but with Macs I think this rarely used as all three buttons are on the left side making it very awkward to press together. Apple + [number] Control + Tab Control + Shift+ Tab Did you know that you have a Javascript ‘terminal’ in every Chrome browser? Just hit to bring it up. You can to your heart's content. I've used this console so much especially when looking something up I can try it out straight away. For the Developers! — Apple + Alt + J var hello = "hello world"; hello; => "hello world" Open the Javascript console for a quick and easy sandbox right there in your web browser! Use 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 to go into inspect mode to allow you to point to any element on the page to inspect it. Apple + Alt + I Apple + Shift + C Reload with and hard reload with to see your work in action. Apple + R Apple + Shift + R 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 ) and click on the install tab. Then write down the name of the package into the search box, and then click the install button. Apple + , (‘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. Atom Prettier ‘(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 to toggle your curser to the matching bracket. Bracket Highlighting Control + M Puts boxes around matching brackets, use Control + M to toggle the curser between them It also a good idea to show the indent line which will help you see matching brackets. Go to Atom/preferences or the editor tab, then scroll down and click the ‘show indent guide’ option to turn it on. Apple + , Indent guides help you see which brackets are matching (‘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. Hightlight Selected Highlights a word, and all other matching ones automatically (‘file-icons’) — Adds nice icons for your file types in the directory tree. File Icons Awesome automatic recognition of icons for easy reading! (‘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! Open in Browser Why is this feature not part of Atom by default? 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! — Double click a word to highlight it, then press 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 will let you add cursers to where you click. Multiple Curser Editing [Apple + D] Apple + D Apple + Click Apple + D creates new cursors at the matching word highlighted — Highlight what you wanna copy, and hit 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. Copy It All! [Apple + Shift + D] Apple + Shift + D Apple + Shift + D copies and pastes a line underneath it — 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. Move It! [Apple + Control + Arrow Direction] Apple + Control + Arrow Direction moves the highlighted text in that direction — Most people know that can help you find things on the page, but sometimes you may want to find something over multiple pages. That’s what is great for. This makes renaming all your variables/functions or simply finding them over multiple files easier. Find It All! [Apple + Shift + F] Apple + F [Apple + Shift + F] — You can hide the file tree on the side using this shortcut for more space. Hide/View File Tree [Apple + ] coding 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 , 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. Apple + . I set mine to for open in browser because its easy to remember. Your curser has to be in the HTML file for it to work tho. Apple + Shift + O Similarly I set the markdown preview toggle to be . Apple + Shift + M My own custom created shortcut that toggles the Markdown preview 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!

Too Long; Didn't Read

Making security fun one episode at a time

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

Too Long; Didn't Read

Puyan Wei

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Puyan Wei

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES