Minimal Atom – Productivity Fridays

DevOps

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

Atom Editor

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. 

Want to learn more?

This post is from a series called Productivity Fridays, here is the series so far:

Help others find this post:

This post was written by Me, Tim Nash I write and talk about WordPress, Security & Performance.
If you enjoyed it, please do share it!

Helping you and your customers stay safe


WordPress Security Consulting Services

Power Hour Consulting

Want to get expert advice on your site's security? Whether you're dealing with a hacked site or looking to future-proof your security, Tim will provide personalised guidance and answer any questions you may have. A power hour call is an ideal starting place for a project or a way to break deadlocks in complex problems.

Learn more

Site Reviews

Want to feel confident about your site's security and performance? A website review from Tim has got you covered. Using a powerful combination of automated and manual testing to analyse your site for any potential vulnerabilities or performance issues. With a comprehensive report and, importantly, recommendations for each action required.

Learn more

Code Reviews

Is your plugin or theme code secure and performing at its best? Tim provides a comprehensive code review, that combine the power of manual and automated testing, as well as a line-by-line analysis of your code base. With actionable insights, to help you optimise your code's security and performance.

Learn more

Or let's chat about your security?

Book a FREE 20 minute call with me to see how you can improve your WordPress Security.

(No Strings Attached, honest!)