meandmycode / react-ideation Goto Github PK

Should be easy enough to switch over to Preact and should reduce the app size down from 180kb to around 50kb.

When viewing on a smaller mobile device (such as an iPhone 5 class device) then the layout becomes single column:

We can probably fit two ideas in here, but we should also consider how this works on device, especially when invoking the keyboard, how the view zooms and how janky the experience feels when switching between different inputs.

The sort order should instead of be based on the flushing/flushed value instead of the priming value.

Currently we highlight ideas that cannot persist with an redish orange ring:

The idea here is to draw attention that the item cannot be saved, this could be for various reasons though:

1. You are offline, the API cannot be reached right now
2. The API is offline or broken
3. The API rejected the changes because they didn't pass entity validation (such as the body being too long)

We should have error codes to identify the types of errors and think about how to handle each case, for being offline we should look into things like Google docs and how their offline UX looks..

Finally, we should consider using service workers to handle persisting ideas once the user comes online, even if the web application is not running, we should then consider sending local notifications to inform the user their changes are saved.

When an overspilling textarea ends with trailing spaces the layout between the real input and the spoof (which is used to display the overspill highlight) fall out of sync:

This is likely due to some subtle differences with how CSS white-space is being handled between the input and spoof element.

Since we're targeting modern browsers we skipped adding autoprefixer as it would add nothing, however - one CSS feature we're using that has still failed to be fully standardised yet is appearance and so we have a couple of places that are manually using prefixes.

Since we use :hover for the delete button, then the first tap onto an idea is either swallowed to then switch to the hover state (then showing the delete button), and then subsequent tap then enables editing.. on some devices the hover state and editing state happen within the first tap together.

The UX here is inconsistent and doesn't fall in line with user expectations with touch devices, where secondary operations are often triggered via gestures or become available within a details view of the item.

We could play around with a few ideas to see what works best, either making ideas in the listing view non-editable on touch devices, and using tap to open an editing view of the item, or to use gestures such as side swipes, or tap and hold to bring up additional context.

The entity manager handles state transitions for a set of remotely (async) persisted entities, in its current state there are a few edge cases that may cause subtle UX issues (such as a slow API call returning an updated remote entity that overwrites the local version).

To solve this there needs to be a configurable conflict resolution strategy and our application will need to allow the local version to override the remote (bar certain fields, such as the primary key), in these cases the local version then needs to be considered dirty, essentially this becomes a merge (similar to git), for most cases this will be fine, but we'll probably want to allow conflict data to be included with the entity object, so that the view layer can provide a user interface into conflict resolution (such as a side-by-side).