Making YANA

(You can find YANA here. It’s my custom notetaking app)

It’s normal to underestimate a project’s difficulty, but I started this project unbelievably naive. The day I started working on YANA, I opened my laptop, typed npx create-react-app, slapped a <textarea> into my project, and thought I was halfway done with the whole thing. Boy was I wrong.

Text editors are one of those things you use so often that the complexity underlying them completely disappears — you take them for granted. Anyone can slap an <input> or <textarea> into their project without a second thought, and I naively assumed it would be simple to expand on their functionality. No thought was given to keyboard shortcuts, caret positioning, line breaks, etc. I assumed it’d be in the HTML spec somewhere, or, barring that, a simple npm install away.

The core of YANA is the enhanced selection and tagging that allows you to “tag” certain passages of text. It didn’t take long for me to realize that functionality was far beyond what was built into the <textarea> element, so I started looking for alternatives. There were a few promising npm packages, but they all had drawbacks of some sort, so I ended up looking for a bare HTML standard to work with. I found it in ContentEditable.

During this process I was gradually realizing that making text editors was really, really hard, so I went looking for inspiration. I spent hours typing “asdfasdfasdf” and messing with newlines in Medium’s own text editor, trying to see if I could work with ContentEditable to mimic its behavior.

How my Medium dashboard looks now.

Turns out, Medium’s engineering team wrote a whole post on how bad ContentEditable sucks. I went ahead and used it anyways because

1. I wasn’t building a full featured text editor
2. It’s a side project, I’m willing to deal with some jank.
3. I thought it’d be educational to spend a month tearing my hair in frustration dealing with a shitty API.

I was right on #3. This project forced me to learn how to debug properly (you know, with something other than console.log) because otherwise I’d have drowned in the soup of onClick/onMouseUp/onSelect/onInput events dispatched constantly.

At one point I broke my code and ended up with this:

Some people on Twitter thought it looked like a streetwear design, which I found amusing. Maybe I’ll throw it on a T-shirt.

Conclusion

I think — I hope — the hard part of making YANA is mostly over. From here on out, development should be fairly conventional.

You can find a list of planned features here.