Boosting Productivity with Arc Browser

Boosting productivity is all about using brainpower more efficiently. Roughly speaking, I think there are four ways to do this:

- Simplifying tasks
- Reducing the number of tasks
- Removing distractions
- Cleaning up your environment

While looking to do this, I read many good things about the Arc browser. So, I decided to give it a shot. I really like the sense of calm and organization it brings to my daily workflow, so I decided to write a blog about it.

### Purpose of this Blog

- Discuss what Arc is 
- Explain how Arc boosts my productivity

## What is Arc?

Arc is not afraid to challenge our current way of browsing. Think about your current browser's UI. How different is it from other browsers? How different is it from your first browser that you learned to use the internet on?

As developers, we know better than anyone that web pages are really just apps. Apple recently even launched [a feature to open web pages as apps in macOS Sonoma 14](https://support.apple.com/en-kw/guide/safari/ibrw9e991864/mac). It is Apple's attempt to make web apps feel more like regular apps. From a UI perspective, it intends to shift focus away from the browser, towards the app it is working to show you.

Arc is trying to do something very similar but goes even further. Arc completely cuts the top section, including the search bar. It's replaced by a side menu. This menu is kind of optional, meaning it can easily be hidden while browsing. That way, we can focus fully on the page in front of us.

![arcgif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588855/82dbd471-615d-9b50-567d-4ea708d6c1bb.gif)

I will explain more about how Arc works in the section about productivity, but first let's take a quick look at what powers Arc.

## Familiarity Under the Hood

Arc is based on Chromium, which was originally built on WebKit before Google forked to start its own layout engine "Blink". This means that Arc opens and displays web content in the way you are used to. Here are some key features:

- **Chrome Extensions:** Extensions from the Chrome Web Store are supported
- **Bookmark Imports:** I easily managed to import my existing bookmarks into Arc's system of folders and pins, which is a bit different from bookmarks
- **Chrome DevTools:** Arc offers the same Developer Tools as Chrome, even the shortcut to open them is the same
- **Built-in Ad Blocking:** There's an optional built-in ad blocker called Ublock Origin

## Productivity with Arc

I feel the need to add a disclaimer here: What I describe below is largely possible in other browsers.

That being said, there is no better time to break habits than when change is occurring. I took getting used to Arc as an opportunity to review my browsing behavior. Partly my ideas were fueled by the way Arc encourages browsing. With the browser UI hidden, a lack of clickable interface elements forced me to act differently. It made me see those clickable elements were really crutches.

### Hiding the Sidebar

This one falls in the "removing distractions" and "cleaning up your environment" categories. Arc naturally does these by reducing clutter in your viewport.

As described above, there is a sidebar for your navigation, folders, and tabs. In my interpretation of Arc, you are supposed to hide it. On macOS, do so with `⌘ + s`.

Your UI is now about as clean as it can get. You might feel a bit lost as to what to do next, but for now resist the urge to show it again with `⌘ + s`. Instead, press `⌘ + l`.

### Opening the Command Bar

You just did it, and you didn't have to click the search bar or hit tab until you found it like I used to do in Chrome. You can now navigate your tab to a different website.

### Settings

Type "settings" in the command bar (`⌘ + l` to open the command bar) and hit enter. This is not necessarily a productivity hack, but it's good to know.

### Navigating the Web

- `⌘ + l` to change the address of your current tab
- `⌘ + t` to open a new tab

![safegif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588855/fa8b9bc3-7a47-95e7-d2c9-5474843869b9.gif)

### Add Split View

The easiest way to do this is to open the sidebar with `⌘ + s` and just drag two tabs onto each other. You can also add a shortcut for `Add Split View` via settings.

I personally use this most for ChatGPT, which is often useful to have open to the side.

The best thing about it is how it works with pins. Say you frequently read documentation in English. You might also want AI translation whenever you have that open. If that's the case, just split it and pin it! Next time you open the tab, both your documentation and AI chat will be right there where you left it. If you use the OpenAI client, the chat context is even preserved from last time 🤯.

To achieve the same in Chrome, I often split tabs into their own separate window. After opening more tabs in that window, I'd lose track of which tab was open in which window.

### Pins

Pins (and folders) are Arc's answer to bookmarks. When you import bookmarks from Chrome, they will become pins which work a bit differently.

Whereas a bookmark is an eternal link to some URL, a pin is more like a sticky tab. Closing an unpinned tab with `⌘ + w` or `Archive Tab` sends it directly to the archive, which functions as both a "bin" and "browsing history".

By comparison, closing pinned tabs doesn't remove your pins unless you hover the pin while closed and click "X".

You can pin and unpin tabs with `⌘ + d`, but I recommend using the sidebar until you get used to how they work.

### Navigating Tabs

I used to click the top of my browser to switch tabs, and the arrow buttons to `go back` and `go forward`. I know I never had to, but I guess the UI became a crutch.

When using Arc, my desire to keep the sidebar hidden motivated me to set the following shortcuts:

| Action          | Shortcut     |
|-----------------|--------------|
| Next Tab        | ⌥⌘↓          |
| Previous Tab    | ⌥⌘↑          |
| Go Back         | ⌥⌘←          |
| Go Forward      | ⌥⌘→          |

The up and down arrows for tab cycling follow the vertical listing in the sidebar. This kind of allows me to keep track of the tabs in the sidebar as I cycle through them, without having to see them.

### Keeping Clean

Using the above way of cycling through tabs, I am much more inclined to close unnecessary ones before they pile up and I get overwhelmed.

In Chrome, I used to open more tabs than I closed, eventually creating chaos. Now that I cycle through them with shortcuts, I am more inclined to consider whether I still need them. Sometimes I do and sometimes I don't, but I like how this workflow forces a decision.

If I do decide I still need a tab, I might open the sidebar and drag it to a folder. Folders are the last thing I will discuss, as they nicely tie everything together.

### Folders

Folders contain pins. Open the sidebar and click folders to open them. This will also add that folder's pins to your `Next Tab` and `Previous Tab` rotation. This causes them to load once you cycle to them.

This creates the option of creating a folder of websites you always want to use together. You can create folders for certain types of tasks or for projects. It's really nice to open and close workspaces on a whim like this. In the beginning, I created folders like "AWS" or "Ruby on Rails". This is essentially how I had been managing bookmarks in Chrome. However, once I understood how useful folders can be, my folder structure looked more like "Project A" or "Task B".

Alternatively, if you just want to save a random tab, you can add it to a "Keep" or "Misc." folder. It's useful to know that if you open a folder, then open a pin inside it before you close the folder again, only that pin will remain "open" in the otherwise closed folder. That way, using `Next Tab` and `Previous Tab`, you don't have to cycle through all pins in that folder, keeping your rotation a bit cleaner.

### Anticipating Needs

Sometimes, Arc can improve your productivity without you having to do things. When I created a pull request, this folder appeared in the sidebar.

![prfolder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588855/d29195bc-a630-1038-045c-fe190cf9f8bf.png)

Honestly, things like this just make me excited to be using software, and also inspire me as a dev to anticipate user needs with handy features.

### Wrap Up

That's it. I hope my enthusiasm about Arc spreads a little through this blog. I haven't looked back at Chrome, and I think you might not either if you give Arc a shot.