Minimal Atom – Productivity Fridays

I last talked about my IDE a little over a year ago, at the time my Atom looked something like:

It remained like this for over a year, but at the start of this year I slowly started thinking about what aspects of my setup I was using day in and day out, and what I just use occasionally. While it’s great I could do so much in Atom and wanted to continue to have all the power, I also wanted to focus more about writing code with little distractions.

Around the same time Marcel brought out Tinkerwell which is a very simple minimal PHP editor with live editing. I found myself really enjoying using Tinkerwell in part because I can live edit but also it was an utterly simple interface that just made editing the first and only thing you do.

This craving grew, am I finally reaching the point where I leave Atom? Where do I go, am I going to try new editors or can I get Atom to do what I want?

Getting Atom distraction down

The main picture above shows most tabs open, and normally I have all panes barring the file tree, so the first big change was to reduce my reliance on the file tree. My day job involves dealing with several large complex projects with lots of files across 4 or 5 projects at any one time. So it’s not unusual for me to have several projects open and multiple tabs. This is great when bug fixing but when writing code quickly becomes distracting. So the first thing was to simply close the file tree panel and get used to CMD k b to open and close it as needed. 

However the biggest change really has been to force myself to use CMD t to open the fuzzy finder for looking for files, it’s so much quicker, and built-in, to the point I really don’t need the file tree except for very odd structural choices.

The next thing was to remove Minimap; I really liked having the Minimap to show me the whole file in a glance, but the reality is it’s useful for the first 20 seconds as I open the file and look for the location I wish to work in, click it and then I pretty much ignore it from then on. Other than being a nice conscious reminder of the size of some files it has a limited purpose within my workflow. So I removed the Minimap and also at the same time, removed the line wrap guide line. This is the vertical line that appears on the screen by default at 80s. Given I have multiple projects each with their own wrap limits I just let the project determine it via the style linter.

After a month or so my use of mouse within Atom had reduced significantly, less use of the mouse is, in theory, improved productivity and I have generally been happy. 

That was until…

That’s so pretty, so simple, so clean but with all the power of Visual Code behind it…

Ok, so let’s face it, anything you can do in Visual Code you can do in Atom, so let’s see if we can get this working and the result:

Meet Minimal Atom

As much of the distractions as I could have been removed, and while I could have gone a little further I’m quite happy with the results. Like Caleb mentioned, for VScode getting Atom into this state requires some tweaking, I also wanted to still be able to access panes when needed.

Step 1 Removing the Gutter

The gutter is the left-hand side, line numbers and lint errors, as well as breakpoints, when it comes to debugging this, is super useful. But for writing code and being in the flow, red and yellow blobs are somewhat distracting. So like many panels, I want to be able to access when I want but have it hidden by default. Thankfully like most things in Atom there is a package for that.

apm install toggle-gutter

Provides keyboard shortcut to add/remove either line numbers or the entire gutter, when needed; I tend to toggle the entire gutter.

Step2 Removing the Title Bar

This is pure aesthetics but I really like the trend of no MacOS title bar, where the tabs merge, I originally used the Atom built-in option to “hide” the title bar, but this has the issue that you lose anywhere to grab to and move windows except in the status, and the typical Mac quick functions to close, maximise etc.

So instead I used a package called No Title Bar

apm install no-title-bar

Which puts the quick functions in line with the tabs.

Step 3 – No tabs when one tab

When I have a single file open, I want a totally clean interface without the tabs at the top. To do this again, reaching for a package, and this time

apm install one-tab

Which removes the tab bar, when only a single file is open. This works great, except now the No Title Bar package has an issue, the quick functions now float over the code. The one-tab package provides a target you can use within Atoms style sheets so within less.styles

 atom-workspace.theme-one-dark-ui atom-pane-container  {
    atom-pane[data-one-tab="true"] {
        .item-views {
            border-top: 22px solid @pane-item-border-color;
        }
    }
}

This provides a small bar at the top of the interface.

Step 4 – Reducing the status bar noise

The status bar is at the footer and contains useful information and a few one click menu items however for me the only two that are really useful are the filename (which is handy because I try to multitask and fail) and where my cursor is, which is useful because I no longer have line numbers and if I’m debugging and need to quote the line number I can just glance down.

The rest I don’t use so I have removed; getting rid of it was just a case of finding the various classes in Developer Tools and then in my styles.less, applying none.

The result is a very clean status bar.

That’s it, minimal and clean, and I’m loving it.

Making it look nice?

I really like my new minimal look. I pair the Atom-One-Dark UI with the Monokai theme, I use Monokai or a variant across most of my applications and terminals.

To get that slightly translucent look I use One Vibrancy Package (apm install one-vibrancy), though while it looks nice with my general muted oranges and brown wallpaper if there is a white background it looks a little naff so might not stay.

My font choices:

• Fira Code
• Pacifico 

I’m not a huge fan of Pacifico (so very much up for alternative) but really like Fira Code.

Things to take away

It doesn’t matter what IDE you use, you can, and should, customise it how you want. Minimalism might be a phase or it might stick but I love having the choice, right now I have two projects open, one is in a lovely no panes open, just code. The second is in debug mode, with the gutter open and the diagnostic panel as I use breakpoints to step through a bug. The great thing is, I can do both.

Next is how I can start to bring the live editing experience of Tinkerwell into Atom from their Github. Tinkerwell isn’t planning support for such a “niche” browser which is a real shame. However, that just sounds like challenge accepted.