Why I use GitHub’s code editor, “Atom”

Considering I am a Web Developer that works with git all the time, this is really beneficial – they seem to care.

Atom is used and tested by a huge community; issues are consistently reported and dealt with meaning that a lot of problems are genuinely fixed very promptly (if they haven’t already been resolved). Another benefit of Atom being set up like this is that you can contribute to the project if you want to yourself.

Here is a quote from Atom, describing Atom:

In clear proclamation of retro futurism, GitHub even produced this fantastic video advert for it:

The Cost

Atom is open source.

Tree View

View on GitHub

Why wouldn’t you want a code editor that is not tied up with git? It makes life so much easier, you can easily see where a modified/new file is within a folder structure instead of hunting for it! This has probably collectively saved me hours of looking through folders over my time using it.

APM (Atom Package Manager)

A nice convenience of using Atom is that you can use their built in Atom Package Manager. It behaves in a very similar way to NPM (Node Package Manager). To install a package using APM you will need to open up your terminal window and type the following command:

Once you have done this you may need to restart Atom to see the changes. However, if you install through the built in package area, it seems to work straight away.

For a real world example you can try install the package qolor:

Packages

Just to demonstrate the commitment of the Atom community, here is a list of a few packages you may find helpful. I love how the community are in the habit of making little gif files showing you the features of their plugins. This simply means you don’t have to install it to figure out if it’s worth using!

1. Antialiased

Antialiased text in your code area, though some developers seem to prefer the look without.

Atom.io PackageGitHub Repo

2. Atom Beautify

Make ugly code beautiful.

Atom.io PackageGitHub Repo

3. Copy File Contents

As you would expect, right click > file, get contents copies the file’s content to your clipboard.

Atom.io PackageGitHub Repo

4. Emmet

Just like sublime’s package, “Expands abbreviations”, you may have to change the key bindings on OSX. By default, this is cmd+shift+e.

Atom.io PackageGitHub Repo

5. File Icons

A very nice benefit. In my opinion, it does help you identify the files you need faster. It certainly improves the look of your editor too.

Atom.io PackageGitHub Repo

6. Fonts

Maybe you love a theme, but not the font? This package lets you alter that.

Atom.io PackageGitHub Repo

7. Git Time Machine

This package looks so incredibly helpful. This is its official description: “git-time-machine is a package for Atom that allows you to travel back in time! It shows visual plot of commits to the current file over time and you can click on it on the timeplot or hover over the plot and see all of the commits for a time range.”

Atom.io PackageGitHub Repo

8. Linter

This package allows you to visualise errors and other kinds of messages

Atom.io PackageGitHub Repo

9. Minimap

“A preview of the full source code”, this preview shows up on the right side as an alternative to a scrollbar.

Atom.io PackageGitHub Repo

10. Pigments

A package to display colours in project and files.

Atom.io PackageGitHub Repo

The Status Bar

In the bottom right of the window, Atom can show you the current charset, current language (syntax highlighting), the git branch you are working on, how many commits you are behind, and how many changes you’ve made to the file. Despite all this information being within a small area, it’s not cluttered – and, crucially, it all makes sense! It’s only a small thing, but a nicety nonetheless.

You can of course click the charset, or, the language to change them. One improvement over Sublime Text is that the language selection utilises a “suggest as you type” search feature, which is a lot nicer in terms of user experience. You can then use your up/down arrows – a big improvement over Sublime.

You can also get a path to the current file within the project. This can be copied by clicking it.

The Atom Settings Area

Whilst I find this area much more helpful than Sublime’s approach, some of these settings may disappear depending on what theme you have selected. They could do a better job of telling you!

I think a GUI is essential for a settings area: you may need to show examples, a description or different options that are available for various settings.

Keybindings

If you hate Atom’s keybinds, you can revert what you used to do in Sublime (or whatever editor you are used to):

Packages

I love this area so much. Not only do you get a nice list of all your installed packages, but you can filter them too. You can click into a package’s settings for more options, uninstall one or disable it.

In addition, if you are having a problem with a core package (or you simply just do not like its behaviour), you can disable that too! I suppose this is the reason it’s called “Atom”: the editor has been designed with a similar methodology as Atomic Design.

Package settings

Fantastic! A settings area for a plugin, of course this lets you change the package’s settings, shows links to view the package on Atom’s package site, report an issue on the plugin’s github repo, view the code for that package directly in atom.

Themes

In this area you can flick through your installed themes, changing the UI themes and the Syntax themes. Depending on theme, there will also be a link to theme settings. A much improved experience over the method that Sublime uses to change themes.

While on the subject, I thought I would mention the theme I currently use:

Atom Material UI

This is one of the best looking themes I think I have seen!

To get the full theme you need to install both a part for the “UI” and the “Syntax” areas. Just like with packages, this can be achieved by using the command line with APM (Atom Packing Manager):

Install Packages & Themes

This area is very handy. Whether popular or trending, Atom lets you browse some of the featured packages and themes. It also allows you to search for all the existing Atom packages & themes. You can install them in the same window.

Sublime Text still has its use cases

There are still a couple of scenarios where I don’t think Atom is currently suitable:

Non-standard Characters

A couple of times, I have experienced some weird issues where I have copied and pasted some content from a website, Adobe Photoshop or a Word document (as we all have). The result is that Atom brought through non-standard characters (such as control characters used to indicate new lines).

It used to be the case that Atom did not show anything; they have since added settings to deal this, but currently is not very obvious in the code area.

Opening Large Files

Sometimes, everyone needs to look in large files, SQL script or log files for example. Unfortunately, Atom doesn’t handle them very well, as an example, when trying to open a 100MB SQL file I am presented with a warning. If you proceed this will probably turn into an error…

When opening files with less ridiculously filesizes, Atom does still behave quite laggy. Sublime still handles either scenario very well.

Why I converted from Sublime Text Editor

I think it’s important to go over the reasons I left Sublime. I did use it for a long time – there is still a place for it in my heart, but in my opinion a few core things could be done a lot better. I still use it from time to time and I’ll explain why later on.

Changing settings

You get 2 settings files: 1 of them is the “default” settings version, the other is the “user” settings (which you can use to overwrite the default settings). What I find very unhelpful is that when you are referring to the “user” file, you have no idea what settings exist or their values!

Package Control

One example of this is the package manager “Package Control”. Yes it’s great, and, easy to install stuff. But what if you want to disable something in particular or uninstall it quick to see if it’s behaving how you expect?

Changing Plugin Settings – what are the options I can change again?

What if you want to change those settings for a new cool plugin or theme that you have just installed? You have to edit a json file…
What if you don’t know all the correct values for an option? You have to look in the readme that comes with the package or open the “default” settings file to reference that… How ridiculously unhelpful.
I think this area really needs to benefit from some sort of GUI. I don’t want to look in a readme for all the available options: I just want dropdowns, checkboxes and stuff to click to quickly figure out if I want to keep setting or a theme.

Changing your colour scheme & themes?

Honestly, what a faff! There are 2 options that you need to update if you want to change the entire interface.
To add to your grief, you have absolutely no idea what the specific theme’s names are and Sublime doesn’t suggest any way of finding out! Why do they expect you to know this? Do they presume you are some sort of wizard?
You will need to look in the theme’s readme or github/package page in order to get the correct names.

Here is a screenshot of my settings at the moment, the “theme”: will change the sidebar and the tabs, where as the “color_scheme” will change the code area.

Quick mention: During my research I did find a nice Sublime theme based on Google’s Material Design called “Material Theme“. This theme does in fact let you “activate” it, which will change both the sidebar colours & the syntax highlighting for you!

Tree View

There is no Tree View, which really sucks when you have worked with it for so long. I’ll discuss this further down in the post. This is not to be confused with Sublime’s Git Gutter plugin (which Atom also has built in as a core package).

The Cost

I feel that $70 for 1 license is too much, especially considering how unfriendly the user experience is, and, for how much it relies on the community for innovative and helpful packages.

Atom Dislikes

1. In its current form, I find Atom very stable, but I have previously experienced a situation where a community built package has caused the editor to crash. However, uninstalling or disabling it has made it work again. I think they could do more to stop this being a problem in the future.

2. It would be much more helpful if packages installed using the APM method did not require a restart of the editor.

3. An issue that hardly anyone will care about, but, the logo does not appear represent an existing atom.

If my impressive qualifications in this field are to be trusted (GCSE in Chemistry), it is my understanding that the only atom with 1 particle in its nucleus is hydrogen, which only has 1 electron & 1 energy level surrounding the nucleus.
Maybe the intention of the logo is not meant to reveal the size of the nucleus?

The logo is clearly based on Retrofuturism from the start of the “Atomic Age”. You can even read an interesting Github Issue thread of how the Atom developers were considering various options for their first version of the logo.

On a relevant note: If you have ever watched the 2009 movie or read the comic book called “Watchmen” by Alan Moore, then you may remember a scene where Dr Manhattan describes a very similar Retrofuturistic atom logo as “meaningless”, and proceeds to draw hydrogen on his forehead.

I am not the only one who has thought this – I feel that we all have a responsibility not to mislead anyone.