In this post, I’m going to show you 3 great browser bookmark tricks to speed up your productivity.

1. Use better names

Save a bookmark for any page you visit frequently. Save it to the bookmark bar.

When you add the bookmark, don’t keep the name that your browser provides. Set it to something short and lower case.

You should do this because you can type the bookmark name into the address bar to get to the page faster. Simply type the name, then press down and enter to jump straight to the page.

Your browser will show your bookmarked page at the top of the list before other page suggestions.

As a result, you often don’t have to type the whole name of the bookmark to find the page.

This is much faster than trying to find a bookmark in a folder or subfolder using a mouse.

It also means that you can put the bookmark into a folder after the name becomes muscle memory.

Bookmarks examples:

piv: pivotal tracker page for your project. You could use jir for Jira etc or tre for trello:

mystory: This is a direct link to the current story/task that you are working on. You can update this every time you start a new story.

findstory: This one is a little more complicated. This links to https://yourstorytracker.com/project/something/story/findstory.

I often know a story id. For example, if It’s included in a commit message, branch name or pull request. This will allow you to jump straight to the story with the following keystrokes:

• findstory – to load the bookmark URL
• Down arrow – put the URL into the address bar
• alt + shift + left – highlight the text “findstory”
• ctrl / cmd + v – paste the story id
• Enter – jump to that page

You can also use backspace to delete the word “findstory” but this is faster once it becomes muscle memory.

If you have a job for this, try it a few times until it becomes muscle memory.

2. Bookmarklets

Bookmarklets allow you to run JavaScript on a webpage by clicking on a bookmark.

The JavaScript code is stored inside a bookmark.

You can use this to fill in webpage forms that you use with the same / non-important but necessary content. This is a bit like the browser filling in your address details for you on some pages.

You do need to know some basic JavaScript to use this, so I’ll give a brief explanation for the most basic usage. You will be able to fill in your name a text-box on this page by the end.

Using only your browser:

1. Use browser developer tools to find the input in HTML
2. Note the id of the input
3. Write JavaScript to store a reference to the element in a variable
4. Set the value of the input (e.g. your name)
5. Repeat for any other inputs you want to set
6. Put the code into https://mrcoles.com/bookmarklet/
7. Add a new bookmark with the link as the code that gets generated
8. You’re done

From the command line

If you’re doing this all the time, there is an npm command line tool that allows you to do this as well from the same author.

1. npm install -g bookmarklet
2. Put the javascript into a file
3. Run bookmarklet yourfile.js
4. Copy the output into a bookmark

More info on how to do the JavaScript part…

In HTML most inputs look like this <input type="text" id="someId">.

JavaScript allows you to use CSS selectors to target elements using document.querySelector("#someId"). This is the same as $("#someId"); in JQuery.

1. Right click on the below textbox and choose inspect element
2. In the elements tab, you will find that it looks like <input type="text" id="TheProductiveDeveloperBookmarkletName">
3. Note the id is “TheProductiveDeveloperBookmarkletName”
4. Click on the console tab of the developer tools
5. Type in const myName = document.querySelector('#TheProductiveDeveloperBookmarkletName');
6. myName.value = "Your name";
7. You will see that the text box says “Your name”

const name = document.getElementById('TheProductiveDeveloperBookmarkletName');
name.value = "Your Name Here";

THIS TEXT-BOX:

If the input that you are selecting doesn’t have an id (and you are using google chrome):

1. Right click on the html input in the elements tab
2. Choose copy > selector
3. Paste that into the query selector function. (In Firefox it says “Copy CSS Selector”).

This also works for other form elements i.e. textarea (larger textbox that can be resized) and select (Dropdown menus).

In my experience, this only works for simple websites. It is less successful for those written in JavaScript (Angular/ ReactJS websites).

3. Use only the icon

If you find your bookmark bar has become cluttered, you can delete the text of the bookmark name. Keep only the icon.

You can use this for pages you frequently visit and keep everything else in folders.

If you want to space the icons out to group them, you can add some spaces to the start.

Final words

Did you try any of these browser bookmark speed-hacks? Do you have other browser bookmark speed-hacks that you think I’ve missed? Leave a comment below!