Mobile web usability

[ajvsol]

Cool project, especially like that you've got persistence through both offline and a server implementation already.

Regarding using Flowy on mobile there's a few things that could be changed to make it more usable:

• Ability to tap of the white space to the right of the bullet text and it'll move the cursor to the end of the line. Currently clicking there does nothing
• A scrolling above the keyboard like in the HandyFlowy mobile app would be helpful in order to use the keyboard shortcuts (indent, unindent, zoom in, zoom out, delete, complete)
• Use the same click-bullet-to-zoom workflow, or at least have a setting to enable it. The pin feature is quite innovative, but I'd leave it in a menu that pops up on mouse hover (like WorkFlowy's overflow menu) and in a scrolling toolbar on mobile. I've used WF for years and still prefer using mouse clicks over keyboard shortcuts for zooming so I prefer zooming to get higher priority to use the bullet point.

Hope that's useful feedback. By the way, have you got any other ideas of the direction you're going to take this app in?

[suyash]

Ability to tap of the white space to the right of the bullet text and it'll move the cursor to the end of the line. Currently clicking there does nothing

Should be extremely simple to implement.

A scrolling above the keyboard like in the HandyFlowy mobile app would be helpful in order to use the keyboard shortcuts (indent, unindent, zoom in, zoom out, delete, complete)

From what I've seen that is a feature only available to native apps, I am not aware of any web SDKs for doing that, and I'm not interested in doing a native app. For indent/unindent, I'm thinking of adding dragging behavior, so dragging tasks left/right would work w.r.t a parent task. For zooming in/out, I'll add the bullet. I thought double click would work, but it is not that great of an experience (ends up selecting the nearest word, so you could accidentally change text you didn't mean to). For delete, currently selecting all text and removing it will delete the item, and checking is directly available through the checkbox.

Use the same click-bullet-to-zoom workflow, or at least have a setting to enable it. The pin feature is quite innovative, but I'd leave it in a menu that pops up on mouse hover (like WorkFlowy's overflow menu) and in a scrolling toolbar on mobile. I've used WF for years and still prefer using mouse clicks over keyboard shortcuts for zooming so I prefer zooming to get higher priority to use the bullet point.

Will do, as I said the double click to zoom workflow is not working. However, I'm not a fan of the overflow menu, I'm trying to do a simpler thing, with fewer options. I'll just add a bullet before the pin/expand button. Note that the pin is a replacement for the expand/contract button, you can only pin tasks that do not have any subtasks. However those will be the only 3 options for a task, all available before the task text right there, you can zoom into it, pin/expand it, or check/uncheck it. However there are some things this project doesn't aspire to do, like notes, or bookmarks.

Hope that's useful feedback. By the way, have you got any other ideas of the direction you're going to take this app in?

Currently being able to use the same storage on multiple devices is very important to me, there seem to be two pieces to fix that problem

• cache a timestamp for each successful store update, and on each load, get the storage server to return all the updates that happened after the cached timestamp, and only render the main board after finishing those updates.

• add WebSocket support and a message format that allows tasks to be updated in real-time, especially for users that keep a pinned tab open.

Other than this there are things that I expected to work out of the box, for example "Add to Home Screen". Currently firefox allows me to add an icon, but clicking on it opens a new tab inside firefox each time. I looked into it and it requires creating a JSON manifest file with 4 different icon sizes, so its not something that I can do immediately.

One other thing regarding different user preferences/workflows was the idea of providing a way for users to contribute "themes". For example, the workflowy app shows the expand button on the right of a task, and some users might want that. Throughout the app, I've tried to maintain properties on elements that decide what is rendered, for example for the pin button, if the element gets a "has-subtasks" attribute, the icon on that automatically changes to a "+". The entire layout can be controlled through CSS by applying properties to elements that have the attributes you want that property for. This can also be useful for people who want a dark mode, or a solarized mode and so on. And since it would all be user contributed and open source you don't have to start from scratch, just start from something, change one thing you don't like and add a new theme with a custom name.

There are other cool things in the web app space, for example the Background Sync spec that allows queuing requests that fail in the service worker, so I don't have to add a resync button for elements that fail to sync to the backend, the system will take care of that whenever the user comes online. But that currently doesn't work in firefox.

Thanks a lot for the feedback! This is a side project, and I'll try to hack on it whenever possible. I'll also generate a changelog file in the main repo.

[ajvsol]

scrolling above the keyboard like in the HandyFlowy mobile app would be helpful in order to use the keyboard shortcuts (indent, unindent, zoom in, zoom out, delete, complete)

"From what I've seen that is a feature only available to native apps, I am not aware of any web SDKs for doing that, and I'm not interested in doing a native app."

This is a feature available for web apps, for example WorkFlowy.com uses it:

[suyash]

Did some remote debugging on Firefox

The controls are defined in HTML, and show up based on detecting when the keyboard is visible on a phone.

The keyboard detection logic seems to be based on detecting a window resize event, as there aren't other usecases to resize a browser window on a phone.

Will try to get this to work by this weekend. Thanks!

[suyash]

@ajvsol I have an initial version of this running on firefox.

Unfortunately, the window resize trick does not seem to be working in chrome, still looking into detecting keyboard and showing controls there

[suyash]

@ajvsol chrome should be up working too

[ajvsol]

Awesome, it works great! Looks like the other feedback issues I mentioned are fixed too, nice work.

I have noticed some new things now:

• I can swipe the web app to the left and it goes offscreen
• If you zoom into a bullet which hasn't got any children it would be useful to have a + button there which allows you to create a child item
• Unique URLs for the view of each bullet you zoom into would be ideal, because I'm zooming into a child item then click the browser back button and it closes the tab, rather than moving me to the home view or whatever view I was looking at last