Making a code editor, Part 2

Read part 1: Writing a new text editor for JavaScript in JavaScript »

Every time I see the Atom editor mentioned on Hacker news there's always someone saying it sucks because it lags when opening a 200MB file ... doh. So I'm not going to release my editor before it can handle your weird benchmarking tests. Although I might run a closed beta soon, so feel free to contact me if you are interested in beta testing my editor.

Fighting the hydra

The editor now has all the functionality I looked for when searching for a new editor. And I now use it for all my work.
I have a ton of ideas for new features, but I'm currently focusing on fixing bugs, and making in run fast.

The only problem is that whenever I fix a bug, I find at least two or more bugs or issues.
For example, last week I fixed ten issues and found twenty new.

This has been going on for a while and is very frustrating. I have never felt this unproductive. And I'm starting to doubt myself.
Is the time I put into this really worth it?

LCD Text

Text rendering is very opinionated and thus work different in each OS or even differs between programs. Then there are fonts, letter spacing, row spacing, etc.

Today I spent a whole day just tweaking things to get a good reading experience. And trying to get LCD-text running in Linux. After several hours of debugging I came to the conclusion that the Linux Canvas sometimes renders with sub-pixel-anti-alias and sometimes not ... It seems to be a low level optimization in either Chromium or the OS.

LCD Text, or sub-pixel-anti-alias is a neat trick that works on LCD-monitors because each pixel has three separate red, green and blue lines. So you can actually draw a line between two pixels, by making it red, green or blue! This makes text look more crisp. This is however not needed on high-pixel density screens, (like Apple's "retina" screens).

I've also researched the best possible text and background color, and it seems that black text on white background is superior in light rooms.
Bright text on a dark background makes the text stand out more, but it will be a bit blurry because light from the room and the monitor will bounce off the characters. While black text just sucks it up. But in a dark room and on a dark monitor (dark background) it should not be a problem. So different themes is on my todo-list!

I've got some competition

After I begun working on my editor, some other editors have started to become popular. Namely Microsoft's Visual Studio Code, Github's Atom, and Adobe's Brackets.

Just like my editor, they are all open source, built using JavaScript, and are targeted at web developers.
So why ain't I hacking away on any of those editors!?

Huge code-base

What these competing code editors have in common is that they are built with several thousands of coupled files. Yes thousands!
It's almost impossible to get a grip on how something works. And you have to swhich back and forth between several files to follow the code.

Meanwhile my editor just have four core files: index.htm, style.css, editor.js and File.js. Then the functionality is addend independently as plugins, which don't depend on each other.
It looks more like a simple web-app in comparison. And I think that will be an advantage for web developers that want to tweak or add functionality to my editor.


These competing code editors use the "Document Object Model" API to make things happen.
The browser is very good at rendering text and I love HTML, but the DOM is slow and tedious to work with.

My editor instead use the Canvas API, which is much faster then the DOM. And it also offers more freedom: Instead of creating div's at the right places I can paint stuff directly on the screen.


My main problem with Atom is that it's not actually written in JavaScript, it's written in Coffeescript, that is compiled into JavaScript.

The Atom community has actually started to write new stuff in ES6, the new "standard" for JavaScript (that looks just like Coffeescript) But even though it's the new "standard" it still has to compile, because it's not yet implemented in the JavaScript engine(s).
And I'm not a fan of this new "standard".
My main problem with ES6 is that it introduces many syntactic changes, for stuff that can already be done with libraries and plain old JavaScript syntax.
Also most people, probably because it's new and cool, tend to over-use some features, like arrow functions, that makes the code harder to understand and reason about.
ES6 also has an obsolete module standard instead of the CommonJS one which lead to the success of Node.js ... I could probably write a whole blog post ranting at ES6.

Visual Studio Code

Visual Studio Code is written in Typescript, yet another language that compiles to JavaScript. It's main feature is adding typechecks, like most other languages does.
I however find it liberating not having to think about types in JavaScript, or make the code redundant, like: var Foo Foo = new Foo Foo().
And I have never, besides my early JavaScript adventures had any problems with the JavaScript types. Once I learned not to mix numbers and strings like "1" + 1 != 2, I've got literally no bugs because of types, I swear *grin*, but seriously, one of the great things with JavaScript is that it doesn't require a compile step.

Then there's the Visual Studio privacy policy ... Hidden away in some dark corner of the internet it basically says $$$ will track everything you do even if the editor is not running.
This makes installing it equivalent of being part of a "Big Brother" TV-show.
Looking at the telemetry feature of Windows 10, this seem to be Microsofts new strategy, to collect everything about you. Just like *couch* Google *couch*.

That said, Visual Code is actually awesome. It got all functionality that I need, and they recently went open source.

But considering Microsoft's history of "embrace extend extinguish" ...
I own a Nokia N9 phone, that is ten times better then the Windows phone I had before it ... Last year Microsoft bought the whole company (Nokia) and killed the N9 by stopping distribution and updates, as well as shutting down the app-store and dev-tools.
I kinda hope they will buy my editor too ... for a few billion dollars *grin*


Brackets is actually written in JavaScript! And compared to last time I tried it, it seems to have most of the functionality that I need. And the JavaScript extensions doesn't crash. It seems like a mature editor and is probably the best contender!?

Unique features

When making my editor, I've made some design decisions that I think is better then my competitors.


The other editors say they have automatic indention, but my editor takes that one step further: You can't indent code! Instead the editor does that for you.
You no longer have to decide whether to use tabs or spaces! And the indention is right all the time! It does add tabs or spaces to the source code, but just so people with other editors can read it. You never have to bother with indentation!

Auto completion using tab

Now when we have the tab key free, we can use it for auto-completion instead! If you want to auto-complete something, just hit tab, like in Linux bash. No annoying pop ups!

Written by May 26, 2016.

Follow me via RSS:   RSS https://z├Ą (copy to feed-reader)
or Github:   Github