How I manage my Google Chrome tabs and you should too

#productivity #programming #software

Intro

Since the Google Chrome update of tab groups, I always use them. I use the whole default available palette, which draws like this:

\colorbox{#e2e3e5}{\color{#e2e3e5}{X}} \colorbox{#fff}{\color{#000000}{tools}} \colorbox{#3871e0}{\color{#3871e0}{X}} \colorbox{#fff}{\color{#000000}{infra}} \colorbox{#c84031}{\color{#c84031}{X}} \colorbox{#fff}{\color{#000000}{watch}} \colorbox{#eeae3c}{\color{#eeae3c}{X}} \colorbox{#fff}{\color{#000000}{branch}} \colorbox{#3c7e40}{\color{#3c7e40}{X}} \colorbox{#fff}{\color{#000000}{suite}} \colorbox{#bf3082}{\color{#bf3082}{X}} \colorbox{#fff}{\color{#000000}{meetings}} \colorbox{#9648eb}{\color{#9648eb}{X}} \colorbox{#fff}{\color{#000000}{etc}} \colorbox{#357981}{\color{#357981}{X}} \colorbox{#fff}{\color{#000000}{incubator}} \colorbox{#EC9550}{\color{#EC9550}{X}} \colorbox{#fff}{\color{#000000}{branch}}

I organize my tabs based on colors and a title (if necessary), which works well in my daily work routine. Let’s talk about the details.

Example final organized tabs:

Groups

\colorbox{#e2e3e5}{\color{#e2e3e5}{X}} \colorbox{#fff}{\color{#000000}{Grey (tools)}}

If you need to organize the tools you use daily, put them there. It can be, for example, GitHub.

\colorbox{#3871e0}{\color{#3871e0}{X}} \colorbox{#fff}{\color{#000000}{Blue (infra)}}

It is reserved for infrastructure, e.g Google Cloud.

\colorbox{#c84031}{\color{#c84031}{X}} \colorbox{#fff}{\color{#000000}{Red (watch)}}

This color is for watching things or recent bugs that you have to look into. To be more precise, use them, for example, for grouping things that you have to look at the corner of your eye e.g. Slack or Gmail. You can always collapse them if you need a full focus.

It’s the first use case for this group, but the second one is for grouping a list of issues that you are or might be working on. If your regular job is interrupted by reports from users, it’s a good time to keep them more organized.

\colorbox{#eeae3c}{\color{#eeae3c}{X}} \colorbox{#fff}{\color{#000000}{Yellow (feat)}}

If you are working on regular features, that’s the right place for that group. Additionally, if you are working on multiple things, you can split one feature into multiple logical groups using the name convention (described below).

\colorbox{#3c7e40}{\color{#3c7e40}{X}} \colorbox{#fff}{\color{#000000}{Green (suite)}}

Management is done in this place. It’s all things that are not strictly related to the development of a particular feature. Jira and Google Drive are the right tools to move them there.

\colorbox{#bf3082}{\color{#bf3082}{X}} \colorbox{#fff}{\color{#000000}{Pink (meets)}}

If you need organized meetings, it’s a good place, e.g “daily” meetings.

\colorbox{#9648eb}{\color{#9648eb}{X}} \colorbox{#fff}{\color{#000000}{Purple (etc)}}

Designed for internal systems that exist in your company. In my case, there are, for example, internal CMS systems.

\colorbox{#357981}{\color{#357981}{X}} \colorbox{#fff}{\color{#000000}{Teal (incubator)}}

If you do research that is not a specific work in your ticket system, you can do it right there. You’re connecting the dots here. Thanks to that, you have a separate group that is not mixed with feat. Important note - it’s not research for a particular feat, but during the work, you might have tons of ideas, and when you feel there’s a little time for that, you can group things and move them here.

\colorbox{#EC9550}{\color{#EC9550}{X}} \colorbox{#fff}{\color{#000000}{Orange (branch)}}

Reserved for a branching of a particular feat. Sometimes you might have a second hypothesis to test, so then move things there.

Order

Order is based on a few factors. Usability and density. An important thing is that density is calculated only for one group. Usability has other factors like where tabs are default created or how ‘Open Link in New Window’ works. By default, new tabs are created on the right sidebar and new link windows grow up from a group where we are.

The highest density is on the left, and on the right,it’s because new tabs and “Focus” come from the right, and the “Watch” group is on the left.

Note: Thanks to that pattern, it will be possible to create an automation using Chrome API for grouping tabs based on that formula.

Group arrangement within the order

Now, if you know what usability and density are, we can go into how you can arrange them based on the groups we mentioned before.

The “Extreme left” is reserved for occasional usage, no matter what this group is. For example, you can put tabs with groups for daily meetings meetings. These groups are always closed until you don’t need them. I recommend not putting many groups on the “Extreme left” because we need space for watch group.

After “Extreme left” is a watch. Keep them as small as possible, but have every tab you need in your daily work.

“Middle” is for every group you don’t want to use heavily at the moment. Keep them ordered as you like.

“Focus” is designed for things that you’re currently working on. This area is very close to the extreme right sidebar side where new tabs are added.

Note: In my case, it’s very often for a feat.

Name convention

Use short names and sometimes shortcuts. For example, if you have many tabs, you can use shortcuts to not expand the sidebar even more. The modifier name convention is also helpful here. It’s something that helps if your group expands quickly and you would like to create a new related one. Then I suggest using the formula <name>:<modifier>, e.g. promotion: docs.

Conclusion

I love tabs, I love tab groups even more. Google Chrome didn’t have tab groups for a long time, and none of Chrome Extensions work simply and well. Since this update, my productivity has increased a lot, and I keep my mind more orderly. Thank you, Google Chrome Team!

Please remember it’s a framework that works in my case, and I'm still looking to improve that one, but if you feel it can help you, then that’s cool!

PS: My tab list is constantly growing..