Zach Adams Web Developer and Programmer

Supercharge Your Browser for Web Development

February 3, 2015

Think about common tasks you do in your browser everyday. Open a tab, close a tab, right click on a link to open it in a new tab, duplicate that tab, etc, etc. Usually browsing the web requires a fair amount of mouse or trackpad movement, and that can slow you down.

Programmers have been trying to solve this problem for years and IDEs and Code Editors include many features which allows you to navigate and command the IDE while keeping your hands on the keyboard. Why don’t browsers have the same features?

I’ll show you some cool tips and tools which will help fix that.

Tools

VimiumVimium/VimFX – the hacker’s browser

Chrome/Firefox

If you know what Vim is, then you know how powerful it is. If you don’t know what Vim is, you’re missing out. Vimium and VimFX allows you to navigate and control the webpage without ever having to take your fingers off the keys. Clicking a link is as simple as pressing “f” then the links “code”. Now I will admit that Vim is not the easiest thing in the world to learn, and to beginners it’s downright terrifying. However I promise if you take a few days to learn the key map, you will use it the rest of your life.

Of all the tools I can recommend in this post this is my #1.

1Password1Password/LastPass – never type in a password again

1Password/LastPass – Both all browsers

Remembering and typing down passwords is the bane of my existence. Not to mention that it’s best to keep every password as complicated and long as possible. This is where 1Password and LastPass come in. Both allow you to keep and store your passwords in a secure place and retrieve them automatically when they’re applicable. LastPass is free, however I prefer 1Password due to the fact that none of my data is sent to a server like with LastPass.

AlfredAlfred 2/Wox – all powerful launching applications

Alfred 2 – Mac/Wox – Windows

Searching the web is perhaps the easiest thing you can do, however sometimes you don’t need to Google it, you just need a wiki page or a function reference. Alfred 2 and Wox are quick-launch applications that allow you to search more specifically and faster then Googling it. You can launch Alfred or Wox with a simple command like “Ctrl+Space” and then search your favorite function reference or wiki with “wp get_bloginfo”.  While Wox is pretty awesome for Windows, Alfred 2 has a lot more features and functionality and the Powerpack upgrade is well worth it.

BetterTouchToolBetterTouchTool – the missing Mac trackpad companion

BetterTouchTool – Mac

There’s so much functionality available in your Mac mouse or trackpad, and BetterTouchTool unlocks that. While it’s better to keep your hands on your keyboard, sometimes it’s not possible, and for those times this app comes in handy. My general rule is every time I have to right click something I find a gesture on BetterTouchTool and replace it with that. Eventually I’ll start looking like Tom Cruise in the Minority Report.

Sprint ReaderSprint Reader – read faster then you ever thought possible

Sprint Reader – Chrome/Reasy – Firefox

Sprint Reader is a cool new technology that takes advantage of how well your brain can read, even when your eyes can’t keep up. I can’t really explain it all that well, so here’s a demonstration that might just blow your mind.

Downloads Overwrite Existing Files

Link – Chrome

Ok this one is really just my preference, however I get sick of having to tell Chrome that I know what I’m doing and to go ahead and overwrite the file with the same name. Perhaps not for everybody, but I find it helpful.

Tips

1. Know your browsers default shortcuts. Duh. Take a day and learn them all, and you’ll be surprised how easy it is to move around your browser without any extensions. Chrome, Firefox

2. Know what tools you have available with your development workflow. Many web developers have access to tools like Gulp, Grunt and Livereload. Use them. Your F5 key will thank me.

3. Get good at Google searches. Google’s smart. It should be. However if you’re not finding what you’re looking for, it may just be your fault. Check out this infographic to find all the tools Google provides you.

That’s all I have for now, though I’ll update this post with further things I find.

Share your tips and tools in the comments!

Comments

Sayed Taqui says:
February 5th 2015 at 12:00am
Thanks for sharing. Specially Overwrite Existing Files extension, was looking for something like this for long.

Leave a Reply

Your email address will not be published. Required fields are marked *