Atom editor adventures

I’ve been using Atom a lot lately. It’s been my regular editor these past few weeks. Because who doesn’t love a text editor that always hangs, right!?

atom is not responding

But why did I get to use it anyway?

Okay, a brief for those who don’t know already: Atom is built on Electron. Electron uses WebKit. Chrome uses WebKit. WebKit uses V8. node.js uses V8.

I have Atom installed long ago. But I was a Sublime Text user. I even do my node.js projects on Sublime. Why the switch? I don’t really remember. Maybe there’s really no reason. It just clicked with me.

I have Jetbrains’ awesome web development application WebStorm. I think it’s the best node.js debugger out there. Well, there’s node-inspector, but it’s not working for me now.

But here I am now.

So how about I talk about my Atom haxx? Starting with some awesome packages!

  • Stylus – Stylus support. Stylus rules SASS sux LESS sux even more
  • api-docs – API documentation
  • file-icons – Distinguish between files. I can’t understand the reasoning behind the CSS icon though.
  • git-plus – Just git things. I don’t use it regularly but it’s awesome. Maybe I should use it regularly?
  • language-dots – .*ignore support
  • language-jade – Jade support
  • pigments – display colors. Heck it even displayed one in an ordinary text file.
  • source-preview – for transpilers
  • source-preview-babel – for Babel, specifically
  • language-babel – This is a deal-breaker. Jetbrains doesn’t have ES7 support. Maybe that’s the reason why I moved to Atom. Because even if I edit Javascript in WebStorm, it won’t highlight async and await. Atom doesn’t complain. It’s just a text editor, not an IDE. But this. This changed everything.
  • npm – npm I guess. Haven’t used it. (LOL)

I’ve also tinkered around and have some styles for the scrollbar. It was too dark and thin (curse Mac OS peeps! You really think this is good UX?) so I added some styles. Here’s the LESS code:

.scrollbars-visible-always /deep/ ::-webkit-scrollbar {
width: 12px !important;
height: 12px !important;

.scrollbars-visible-always /deep/ ::-webkit-scrollbar-thumb {
background: rgba(100%, 100%, 100%, 0.2);

I’ve also created my own theme based on the custom one I have on WebStorm, which is in turn based on its own default dark syntax theme.

I also made it so that I have a background in my code editor area. I stole some ideas from editor-background (an Atom package), though. But that’s because that itself didn’t work as I expected.

Here’s the LESS code:

&:not(.mini) {
  background-color: transparent;
    radial-gradient(circle at 80% 35%, fade(@syntax-background-color, 85%) 0%, @syntax-background-color 80%),
  background-size: cover;

I think this requires a little explanation. The background-color should be transparent because code blocks actually cover the editor background. This defaults to @syntax-text-color, and you should keep it like this anyway because other text fields are created with the same atom-text-editor element (hence the :not(.mini)). The background is specified as-is. Only, I added a radial gradient. This is the idea I stole. It makes it look like the background is filtered in some way. I set it up so that the center is focused on the subject of the background (which I’ll discuss later) and to darken the area that’s supposed to be filled with code (i.e. the left side). The filter is actually kinda important because it kinda keeps me from being distracted with details of the background. That’s one way of mitigating the presence of a background. That’s the only one for me, though.

When I first thought of this, I first searched for a cool background to use. I came across a wallpaper with Yuuma Isogai in it that I apparently have no memory of saving or using so I went with that.

Well, that’s it, I guess. Atom is inconvenient in a way or two but that’s just that. We can’t really argue with the Mac OS peeps that made this. So yeah. The end.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s