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.
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.
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.
Using only your browser:
- Use browser developer tools to find the input in HTML
- Note the
idof the input
- Set the value of the input (e.g. your name)
- Repeat for any other inputs you want to set
- Put the code into https://mrcoles.com/bookmarklet/
- Add a new bookmark with the link as the code that gets generated
- 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.
npm install -g bookmarklet
- Copy the output into a bookmark
In HTML most inputs look like this
<input type="text" id="someId">.
document.querySelector("#someId"). This is the same as
$("#someId"); in JQuery.
- Right click on the below textbox and choose inspect element
- In the elements tab, you will find that it looks like
<input type="text" id="TheProductiveDeveloperBookmarkletName">
- Note the
- Click on the console tab of the developer tools
- Type in
const myName = document.querySelector('#TheProductiveDeveloperBookmarkletName');
myName.value = "Your name";
- You will see that the text box says “Your name”
const name = document.getElementById('TheProductiveDeveloperBookmarkletName'); name.value = "Your Name Here";
If the input that you are selecting doesn’t have an id (and you are using google chrome):
- Right click on the html input in the elements tab
- Choose copy > selector
- 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).
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.
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!