Revitalizing the text editing experience with Atom

Atom is a beast of a text editor. It was all the rage in the text editing world prior to Microsoft’s release of VS Code, which just like Atom, is built on Electron. The two editors are very similar, but VS Code is clearly faster and arguably uses better defaults. On the upside though, visual elements in Atom can be fully customized using CSS. Given that, it’s the best text editor for experimenting with next generation visuals. That’s what this post is about.

Only with Atom

Atom’s reliance on HTML/CSS make it possible to do things no other editor can do. Like this:

notebook-ui-fullscreen.png

That’s my recently published Notebook UI theme. It makes extensive use of gradients, blend modes and background images; only feasible using CSS. It’s heavy on the CPU but makes text editing feel a little like gaming.

Then there’s this:

blueprint-ui-main.png

That’s Blueprint UI which uses subtle text-shadows to emphases code elements while comments without shadows blend comfortably in the background.

And on a bit more of a practical note, there’s this:monotony-syntax.png

That’s Monotony Syntax theme, which uses subtle rotations to highlight simple but common keywords while somewhat blurring comments to keep attention on code elements.

Experimenting toward a better experience

Given the use of rather heavy CSS styling, those themes may not be the most practical. On older computers, they might be unusable. Even gaming notebooks might get a fair bit of unwanted battery drain as well. However, they’re great for experimenting to see if there’s an experience that might actually work better for programmers or data scientists.

As an example, Notebook UI works just fine alongside the Hydrogen extension for Atom. Since it looks like a notebook and Hydrogen was inspired by Jupyter notebooks, the combination feels natural.

Much more is still possible with Atom too. Here’s a great example of someone making use of 3d transforms:
https://medium.com/hacking-atom/some-subtle-3d-effects-for-atom-d7a624a74fdd

On a very fun note, Gradient Syntax Theme adds a bit of CSS animation with gradients:

gradient-syntax.gif

I’m also assembling a UI theme to simplify use of SVG filters, tentatively named Wireframe UI. It aims to bundle in the beautiful SVG filters from Inkscape and provide the simplest example for anyone to make use of them.

More possibilities exist.

Pressing Concerns

Both Electron and Atom were made by GitHub. Since Microsoft announced its purchase of GitHub and especially considering Microsoft already develops and maintains VS Code, Atom’s future seems uncertain.

We’ll see how that goes but meanwhile, we can still use Atom as the best platform for experimenting with visual designs for the next generation of text editing.

Advertisements
Revitalizing the text editing experience with Atom

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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