Skip to main content

Get the most out of your browser

A whole year without a blog post! Now that I've changed job, I'm hoping that I can settle down and push more useful tips on my blog. So, to get back to form I have one about web browser productivity.

Web browsers have come a long way since it's inception in the early days of the World Wide Web. But if you've just been using it to browse the Web, you are really missing out on a ton of stuff. Productivity is just the start of it.

Let's take a look at some of the hidden gems that a browser has to offer. I will mostly be focusing on Chrome and Firefox, but a lot (if not all) the tips may apply to your favourite browser.

Pin Tabs

First up is the ability to pin a tab. You do this by right-clicking on a tab and selecting Pin Tab. Did you just see how it react? It resize and just shows the icon. If you have a lot of tabs this is a real space saver.

Using Keywords

Firefox has keyword bookmarking, which is an absolute essential for many. This allows you to call a website from your bookmarks and provide a custom parameter in one go, without having to fiddle with a URL.

To achieve this, you can right-click on any search field on a website and select Add a Keyword for this Search. Let's try this. Head to Wikipedia's site and right-click on the search field. You should get something like this:
Click on Add a Keyword for this Search and you will get a popup to enter whatever keyword you want and where the bookmark will be saved. I'm going to use "w". Then click Save.



Firefox is not the only browser to do this. You can also achieve this in Google Chrome, by way of defining Search Engines. Let's get you going. Start by right-clicking in Chrome's omnibox and selecting Edit Search Engines:


Now all you have to do is add a search engine, where Name is used to identify your favourite site, the keyword you want to use and the URL. For the URL replace where the search term is expected to go with %s. So, if you know the URL for the search on Wikipedia's site looks like this:
https://en.wikipedia.org/wiki/United_Nations

Then the URL for the Search Engine should be set to:
https://en.wikipedia.org/wiki/%s

Now let's try it. Head to the address bar (or onmibox on Chrome) and type in your keyword followed by whatever term you like to search for on Wikipedia. Have a look at what's presented:


One you hit enter, you will be taken to the Wikipedia search results. Result!

Keyboard Shortcuts

Maybe this should've been mentioned at the top of the article, but learning the keyboard shortcuts help to increase productivity. The common ones I use between the two browsers (Chrome and Firefox) are:

Description PC Shortcut Mac Shortcut
Create a new tab CTRL + T ⌘ + T
Close the current tab CTRL + W ⌘ + W
Re-open the last closed tab(s) CTRL + SHIFT + T ⌘ + SHIFT + T
Jump to the next tab CTRL + → ⌘ + Option + →
Jump to the previous tab CTRL + ← ⌘ + Option + ←
Jump to x (numbered) tab CTRL + 1 thru CTRL + 8 ⌘ + 1 thru ⌘ + 8
Open page link in a new tab CTRL + click ⌘ + click
Get to the omnibox / address bar CTRL + L ⌘ + L

There's plenty more useful shortcuts that you may want to add to your list of favourites. Have a look at the browser documentation. To get you started:

Sync your bookmarks

How could you not? You spend all that time creating and organising all those perfect bookmarks, there has got to be a way to restore them the next time you refresh your system. Or maybe you want to sync them between your home or work computers.
In Chrome, all you have to do is sign in with your Google account. In addition to bookmarks, this also backs up and syncs your extensions, themes and settings. Up to date instructions to sign in can be found in Chrome Help.
With Firefox, you can sync your bookmarks, history, password, and more. To do this you need to create an account and then you can setup Firefox Sync. Have a look at this video to set it up

Task Manager

This is something I have used in Chrome whenever my laptop slows down like crazy. Using this, you can identify which tab is misusing resources (memory and CPU). To get to it, click on the three-dotted settings icon to the right of the omnibox, then More Tools > Task Manager.

I've not seen one for Firefox, but you can fill that void with an extension/add-on: https://addons.mozilla.org/en-GB/firefox/addon/task-manager/

Extensions / Add-ons

Now that I mentioned extensions your browser functionality can be extended by installing add-ons. Many browsers out there can install and use Chrome's add-ons. So here's two links to point you in the right direction:

But let me get you started on a couple of vital extensions:
  • Lazarus: Form Recovery
    For those moments you spend a long time composing a document, blog, or some kind of update, and the browser decides to crash on you. This plugin will recover what you've done so far
    ChromeFirefox
  • uBlock Origin, Ad Block Plus
    Or any other ad blocker to speed up page load. These are, probably, the top two extensions and I do have a preference for uBlock Origin (Chrome, Firefox)
This gives me an idea of listing out useful add-ons. Will put out another blog and link to it here.

Highlight Text and Search

Sometimes, you may see a term on a web page that you would want to search for online. Simple, highlight that phrase or word and right-click on it. An option will appear to search for that using the default search engine for your browser

See? It doesn't have to just be a Google Search. Changing the default search engine is usually done in the browser settings. For Chrome, edit the search engines like you were shown above, highlight the one you want and select Make Default.

In Firefox, click on the magnifying glass for the search box, next to the address bar and click on Change Search Settings.

In the Default Search Engine drop-down choose the one you want


That's all folks. See you next time!


Comments

Popular posts from this blog

Will we ever get Dreamweaver on Linux?

I have been a keen user of Ubuntu for some time now, and have to admit that this distribution has improved by leaps and bounds. However, what I do honestly miss on windows is... Dreamweaver. Some will swear by it, some will swear at the mention of its name. But for me, it is a very powerful tool when used correctly. Such a very popular and powerful web design and development tool is available on Windows and Mac OS, but not Linux. If you would just consider, Adobe has already supported the platform with their Adobe Reader and Adobe Air. Why is Dreamweaver not available? It just seems that there's not such a huge call for it so they just don't see the need to put in an effort for another platform. One chap at Adobe suggested to use Dreameaver under wine , but it doesn't work so great. There is an alternative to wine which, according to a user on the forums, works flawlessly - Crossover . However, the former option is not free, so some may be dissuaded where they woul

Image links in IE8

While mocking up a design page for a colleague's website I came across a new browser behaviour in IE8. This was the first time I used IE8 as my main development browser, due to the fact that the PC was re-installed and high-priority updates were applied. Surprisingly Microsoft branded IE8 as a priority update. Anyway, back to what I was talking about, here's a sample: <a href="index.htm"><img src="logo2.jpg" alt="Logo" title="Logo" /></a> As you can tell, this is using an image for a link, where it behaves well in Chrome, Firefox and in the previous versions of IE (7 and older). But in IE8, this is not the case as the DOM does not treat the image as innerText, only as a child node. As a result, everytime I hover the mouse over this image, an extra gap would come from nowhere shifting any relatively positioned elements. To fix this I explicitly added a space (&nbsp;), so the line would look like: <a href="inde