Taskcafe Devlog #3

December 26th, 2020

This is the third entry in the Taskcafe (was Project Citadel) devlog. You can find the previous one here.

Some of the major things I've learned so far:

  • tsserver and gopls are MEMORY HOGS
  • Drag & drop is complicated (even more so when there can be multiple levels)
  • Public projects is going to be way more annoying to implement than I thought

tsserver & gopls

I use neovim as my primary editor when working on Taskcafe, and one of the main things that I really want in whatever editor I'm working in, is auto completion.

The smarter the auto complete is, the better. So for neovim, I use a plugin called coc which integrates with language servers to provide autocomplete suggestions based on the actual code you're editing.

The language servers I use are tsserver for Typescript and gopls for Golang.

While they're very nice to use, they eat up SO MUCH MEMORY. My laptop that I code with has 8 GB of RAM and I constantly run into out of memory errors.

My laptop would freeze so much that I had to install a new program that would kill off processes before it got to the point the whole thing froze.

While that works well, it is still annoying to have things just kind of die because the two language servers are taking up 6+ GB of RAM.

With the latest update to gopls, it seems to have calmed down some but they're still both the biggest contenders for most memory usage on my system.

htop output

Drag and drop

One of the main features I've been working on for the past month is the new Outline functionality.

The premise is basically just a huge bullet list that can have multiple levels of indentation (think Workflowy or Dynalist).

Since it was a feature that I barely had even had a rough idea on how to code, it felt like a good challengel. It also seemed like a userful feature for Taskcafe to have.

As I felt drag & drop would be the hardest part of the tool to implement, I began with that (and boy was I right).

If it was just a normal list with no levels of indention, then it probably would have been a lot easier.

The main issues I had was the recursive nature of the list (each entry can have children, with those children also having the option of having their own children).Then as the user drags, figuring out where it actually is in the list and where it would go if the user dropped it.

The next hardest part was allowing users to select multiple entries. First I had to figure out what the user was selecting, then how each one would react when actually dropped.

I think I've made a good amount of progress in the time I've worked on it (I did have to refactor, a lot considering I had no idea what I was doing), but I've since switched off to work on other features for Taskcafe (and give my mind a break).

It is by far one of the more complicated things I've written, but it has been a joy to work on!

Public projects

After working on the outliner, I wanted to work on something new - so I chose public projects since that has been a planned feature for the 0.3.0 release for a while now.

After spending several hours working on implementing it I realized that it was going to take more time than I thought.

The issue is that in pretty much all of my code, I assume a user is present.

With public projects, that assumption is no longer the case. So I would have to refactor a large part of the code, with this new info in mind - something I'm just not ready to do yet!

Emojis & markdown

One of the components for adding comments to tasks is that I wanted users to be able to write them using Markdown. I also wanted easy emoji support through the use of slack like emojis :smile: and an emoji picker (emoji-mart).

I'm using react markdown to actually render my markdown, but now the problem became how to render the emojis themselves!

I first tried to use a remark plugin, remark-emoji, to convert the emoji colons to unicode emojis.

While this worked, the issue was that they looked different compared to the emoji-mart icons, since emoji mart used a specific icon set, as opposed to the unicode emojis which just used your computer's native emoji font.

So the obvious solution was to use the <Emoji> component emoji-mart provided to render the emojis. The less obvious part was actually getting react-markdown to play well with turning the emoji colons into the components. I tried many different ways but the final hacky way I settled on (at least for the time being) was to:

  • turn off escapeHTML on react markdown
  • purify the markdown myself before passing it to react-markdown using DOMPurify
  • modify the remark-emoji plugin to render the <Emoji> component instead of unicode

While I probably could have gotten the remark plugin to do all of it, itself - I had enough trouble getting the thing to just render the emoji code.

0.3.0 release of taskcafe

I had planned on waiting until the new year to release the next version of Taskcafe, but I think I've done enough to warrant a new semi-stable alpha release.

diagram for new project sharing

Some of the main things I've done is:

  • overhaul project sharing (new users can be directly invited by email in the project sharing)
  • redesign how the initial user is registered when a new taskcafe instance is created
  • personal projects
  • Task activity & comments [TODO]
  • Custom background or color [TODO]

Next steps:

  • My tasks view for seeing assigned tasks across all projects
  • Workspace, a feature to see what you're currently working on
  • More work on the outline
  • Bugfixing & polish on existing features